Начало с Bootstrap Twitter - Часть 1

Reading time ~5 minutes

Приступаем к изучению Bootstrap Twitter.

Лично мое мнение, что любой веб-мастер, какого-бы он класса и квалификации он не был, обязан иметь о нем представление. И должен уметь создавать проекты с помощью этого продукта.

Итак, Bootstrap Twitter. Прежде всего - почему двойное название и почему Twitter? На оба вопроса одно объяснение - этот фреймворк создала команда, которая ранее создала еще один проект - Twitter. Хорошо, тогда еще один вопрос - а что такое фреймворк? Как говорит всезнающая Википедия, фреймворк, это:

… программное обеспечение, облегчающее разработку и объединение разных компонентов большого программного проекта.

Если сказать простым языком, то фреймворк - фундамент, минимальная база, которая может одинаково успешно применяться для создания любого сайта или веб-приложения. Как это часто бывает, в любой работе можно найти часть рутинного процесса, который выполняется снова и снова, без изменений.

Так вот, чтобы не повторять написание одинакового кода опять и снова, были созданы такие базовые наборы, которые можно взять за основу и потом наращивать и видоизменять. В этом суть фреймворков, но есть один момент.

C английского языка фреймворк переводиться как “каркас”. И этим уже можно все сказать, в принципе. Но, еще раз внимательно почитаем Википедию:

… каркас диктует правила построения архитектуры приложения, задавая на начальном этапе разработки поведение по умолчанию, каркас, который нужно будет расширять и изменять согласно указанным требованиям.

Вот почему некоторые веб-дизайнеры не любят этот фреймворк, но это дела не меняет. Продолжим знакомиться с Bootstrap.

На момент написания статьи имелось две версии этого фреймворка - v3.0.2 и v2.3.2. Здесь мы начнем изучение с версии v2.3.2, а потом плавно (я надеюсь) перейдем к более свежей и современной v3.0.2. Кстати, сразу стоит упомянуть, что в Сети есть несколько русскоязычных ресурсов, посвященных Bootstrap.

Но, насколько я понял, оба они являются локализованными (с разной степенью кривизны) версиями одного сайта-первоисточника - http://getbootstrap.com/. Видно, авторы этих проектов сильно торопились со своими детищами. Я рекомендую пользоваться оригиналом и в данной статье мы так и будем поступать, по мере сил.

Скачать готовый фреймворк Bootstrap можно со страницы домашнего проекта (откуда же еще?) в виде архива. Если распаковать скачанный архив на локальном компьютере, то увидим, что он состоит из трех папок: css, js, img. Первые две папки обязательны при создании любого нового проекта на Bootstrap.

Содержимое папки CSS:

bootstrap.css
bootstrap.min.css
bootstrap-responsive.css
bootstrap-responsive.min.css

Здесь расположены четыре CSS-файла, но на самом деле их два. Различия между bootstrap.css и bootstrap.min.css, bootstrap-responsive.css и bootstrap-responsive.min.css только в том, что первый вариант - это development-версия файла, которая предназначена для внесения в нее изменений при соответствующей квалификации программиста.

А второй вариант - это production-версия файла, в которую изменений вносить не планируется и практически этого невозможно сделать, так как в этом файле убраны все комментарии, отступы, табуляции и тому подобное, что делает этот файл трудночитаемым для человека. Зато размер данного файла намного меньше, чем у development-версии, поэтому главная цель этого файла - просто подключить его к проекту для дальнейшей работы.

Кстати, стоит упомянуть, что в фреймворке Bootstrap вместо сброса стилей через файл reset.css от Эрика Мейера используется приведение всех браузеров к одному общему знаменателю с помощью файла normalize.css. Помимо этого, используются компоненты известного HTML5 Boilerplate.

Файл bootstrap.css - это главный файл стилевых правил CSS для фреймворка Bootstrap, без него этот фреймворк - просто не фреймворк. В этом файле находится коллекция готовых CSS-классов, которые подключаются к элементам HTML-документа по мере необходимости и тем самым форматируют HTML-страницу.

Файл bootstrap-responsive.css - единственная задача данного файла сделать HTML-страницу, к которой подключается этот файл, адаптивной (responsive). Что такое адаптивный дизайн, вы можете легко найти в Интернете, на сегодняшний день это тема №1 в веб-дизайне.

Содержимое папки JS:

bootstrap.js
bootstrap.min.js

Также, как и в случае со стилевыми правилами, в этой папке присутствует только один файл - bootstrap.js, тогда как bootstrap.min.js - это его минимизированная production-версия. Файл bootstrap.js - это набор готовых js-сценариев, задача которых является вспомогательной в деле создания HTML-компонентов.

Дело в том, что фреймворк Bootstrap это не только набор CSS-правил, но и компонентов. Готовая панель навигации (html+css+js), форма поиска с кнопкой внутри (html+css+js), рабочая панель вкладок (html+css+js) и так далее - это все HTML-компоненты. И как уже должно быть понятно, роль js-сценариев здесь - помочь сделать эти компоненты полностью готовыми к работе.

Содержимое папки IMG:

glyphicons-halflings.png
glyphicons-halflings-white.png

Единственная папка с изображениями в проекте Bootstrap. Если вы ее откроете (предпочтительно в Adobe Photoshop), то увидите, что это обычный спрайт (sprite) - набор готовых стилизованных иконок.

Первый файл glyphicons-halflings.png - там иконки черные, а второй файл glyphicons-halflings-white.png - там иконки точно такие же, но только белого цвета (контраст).

Что такое CSS-спрайт, я тоже объяснять не буду - в Интернете есть подробная информация по этой технологии. Хотя, когда я впервые с ней познакомился, у меня было желание ее описать у себя - это интересно. Но потом время ушло, для меня все стало просто и обыденно в этом плане типа “да чего там писать - и так все просто и понятно.”

C содержимым архива и проекта Bootstrap Twitter познакомились. Теперь рассмотрим, как подключать данный фреймворк к своему рабочему проекту и пользоваться всеми его “вкусностями”.

Создаем папку с новым проектом и туда распаковываем архив с Bootstrap. Первое - нам необходим HTML-шаблон с обязательным условием - DOCTYPE HTML 5, то есть, так:


 lang="en">
 
   charset="utf-8">
   http-equiv="X-UA-Compatible" content="IE=edge">
   name="viewport" content="width=device-width, initial-scale=1">
  
  </span>Bootstrap 101 Template<span class="nt">
  
   href="css/bootstrap.min.css" rel="stylesheet">
  
  
  
 
 
  

Hello, world!

К нему подключаем CSS и JS-файлы из распакованного архива и сохраняем в ту же папку с будущим проектом. В принципе, все готово для дальнейшей работы …

На этом все.


Различие между exports и module.exports

Попытка разобраться, в чем различие между exports и module.exports, основанная на статье Understanding module.exports ...Continue reading

Комментарии

Защита от автоматических сообщений
CAPTCHA
Введите слово на картинке