Bootstrap 3 - Пользовательская сборка платформы

В первой части урока мы рассмотрим, из каких именно кирпичиков, состоит платформа Bootstrap. Во второй части создадим пользовательскую сборку платформы Bootstrap, состоящей из 24 колонок.
Структура платформы Twitter Bootstrap 3
Платформа Bootstrap состоит из общих стилей, компонентов и иконок. Общие стили и компоненты разработаны с помощью технологии LESS. Реализовать некоторые компоненты посредством только технологии LESS невозможно. Поэтому, часть этих компонентов, а именно их динамическую составляющую, необходимо реализовать с помощью скриптов на языке Javascript. Скрипты javascript написаны с использованием библиотеки jQuery. Поэтому перед использованием скриптов на сайте необходимо подключить последнюю версию библиотеки jQuery, иначе компоненты, которые их используют, работать не будут.
Перед применением платформы Bootstrap на сайте, ее исходные коды компилируются:
- файлы LESS компилируются в файл CSS
bootstrap.css
и его минимизированную (сжатую) версиюbootstrap.min.css
. - файлы JavaScript тоже компилируются в один файл
bootstrap.js
и его минимизированную версиюbootstrap.min.js
.
Пользовательская сборка платформы Bootstrap
На официальном сайте getbootstrap.com в разделе "Customize" Вы можете выполнить пользовательскую сборку платформы Twitter Bootstrap. Процесс сборки представим в виде этапов:
- На первом этапе необходимо выбрать LESS файлы, которые необходимо компилировать и минимизировать в CSS файл (
bootstrap.min.css
). Файлы LESS представлены в 3 категориях: common CSS (общие стили), components (компоненты, созданные с помощью стилей) и JavaScript components (компоненты, созданные с помощью стилей и скриптов на языке JavaScript).
- На втором этапе выберите, какие плагины Bootstrap необходимо включить в пользовательскую сборку платформы. Плагины сгруппированы в разделы "Linked to components (Связанные с компонентами)" и "Magic (Магия)".
- На третьем этапе вы можете изменить значение переменных LESS для настройки общих стилей и каждого конкретного компонента.
- На последнем этапе необходимо нажать на кнопку "Compile and Download", чтобы скомпилировать и скачать пользовательскую сборку Bootstrap 3.
В качестве примера рассмотрим процесс создания пользовательской сборки, у которой сетка макета будет состоять из 24 колонок. Для этого в разделе Grid System изменяем значение переменной LESS @grid-columns
(количество колонок) на 24.
Сложно найти что-то толковое и последовательное по Бутстрапу в интернете. А вот на ваш ресурс захожу регулярно :) Все аккуратно, доступно, связно и кратенько делается — одно удовольствие заниматься!
Очень рад, что уроки могут быть полезными для Вас.
Надеюсь, что уроки, которые опубликую в скором будущем будут не менее доступными и полезными.