Начинаем работу с Bootstrap

Оригинал: Getting Started and Setup for Twitter Bootstrap
Автор: Bootstrap Tutor
Дата публикации: декабрь 2012 г.
Перевод: Семененко В.
Дата перевода: август 2013 г.

Twitter Bootstrap представляет из себя простой и интуитивно понятный фреймворк для создания front-end'а сайтов. Эта статья является введением, в котором будет рассказано об установке Bootstrap и его настройке для дальнейшей работы. С помощью фреймворка Twitter Bootstrap мы будем пошагого создавать проект в следующих уроках. Итак, чтобы приступить к установке Bootstrap, потребуется совсем немного:

  • Файлы фреймворка Bootstrap, скачанные с домашней страницы проекта http://twitter.github.com/bootstrap/
  • Любой текстовый редактор для работы с HTML-кодом (в моем случае я буду пользоваться специализированным текстовым редактором Notepad++)

Для дальнейшей работы также потребуются основы знаний по HTML и CSS. Однако не стоит особенно волноваться по поводу уровня ваших знаний - все последующие уроки построены с расчетом на новичков в web-дизайне.

Получаем файлы фреймворка Bootstrap

Архивированные файлы этого фреймворка можно скачать с домашней странички проекта - http://twitter.github.com/bootstrap/.

Bootstrap

После скачивания файла разархивируем его в ту же директорию и посмотрим содержимое. Оно представляет из себя набор из трех папок:

Bootstrap Structure

Первая папка - css - содержит в себе два файла со стилевыми правилами: bootstrap.css и bootstrap.min.css. Файл bootstrap.css представляет из себя коллекцию готовых классов, с помощью которых создается front-end сайта. Файл bootstrap.min.css является копией файла bootstrap.css с той лишь разницей, что это минимизированная копия. То есть, его размер уменьшен за счет удаления комментариев, пустых строк и другой информации, облегчающей чтение исходного файла. Применять его можно, но вот читать или редактировать практически невозможно по вышеназванным причинам.

Примечание переводчика: Современная сборка фреймворка Bootstrap содержит в себе, помимо двух вышеназванных CSS-файлов, еще два стилевых файла - bootstrap-responsive.css и bootstrap-responsive.min.css.

Bootstrap CSS Responsive

Задача файла bootstrap-responsive.css - сделать сайт адаптивным (responsive). На сегодняшний день адаптивность сайта является модной и востребованной технологией, в связи с бурным ростом мобильного Интернета. То есть, если при разработке сайта необходимо сделать так, чтобы его можно было просматривать не только на десктопах или ноутбуках, но и на мобильных устройствах - смартфонах, планшетах и т. п., то необходимо воспользоваться файлом bootstrap-responsive.css в дополнение к файлу bootstrap.css. Второй файл bootstrap-responsive.min.css является минимизированной копией файла bootstrap-responsive.css.

Вторая папка - js - содержит в себе два файла со скриптами javascript: bootstrap.js и bootstrap.min.js. По аналогии с файлами CSS, первый файл bootstrap.js является набором готовых скриптов для подключения к создаваемому проекту. Второй файл bootstrap.min.js является минимизированной копией первого.

Третья папка - img - это набор готовых иконок, которые можно применять для разрабатываемого сайта. В папке, на первый взгляд, находятся всего лишь два графических файла. Но если открыть хотя бы один из них, то станет ясно, что это спрайты (sprites).

Bootstrap Sprites

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

Создаем первый сайт под Bootstrap

Для нашего первого проекта необходимо создать отдельную директорию, в которой будут храниться все необходимые файлы. В файловом менеджере (Проводник, Total Commander) создаем папку с именем "mysite" и копируем туда содержимое архива bootstrap.zip.

В итоге должна получиться следующая картина:

Bootstrap Site

Теперь необходимо создать главный индексный HTML-файл - index.html. Проще всего это сделать с помощью текстового редактора. В своем Notepad++ я создаю новый текстовый файл, печатаю в нем всего два слова - Hello World, и сохраняю изменения под именем index.html в папке "mysite".

Теперь содержимое нашего будущего проекта выглядит следующим образом:

Bootstrap Index File

Если попробовать открыть файл index.html в браузере, то увидим следующее:

Index File

Прямо скажем, не впечатляет! В окне браузера отображается только лишь текст, который был сохранен в файле index.html.

Однако не стоит расстраиваться, так как это лишь заготовка, с помощью которой будет показано, как создать полноценный HTML-файл и добавить к нему функциональность Twitter Bootstrap. Этот фреймворк значительно упростит и ускорит создание HTML-страниц, что мы и увидим в последующих статьях.

Загляните на досуге

Счетчики

Рейтинг@Mail.ru

LiveInternet

Rambler's Top100