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

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

Платформа Bootstrap состоит из общих стилей, компонентов и иконок. Общие стили и компоненты разработаны с помощью технологии LESS. Реализовать некоторые компоненты посредством только технологии LESS невозможно. Поэтому, часть этих компонентов, а именно их динамическую составляющую, необходимо реализовать с помощью скриптов на языке Javascript. Скрипты javascript написаны с использованием библиотеки jQuery. Поэтому перед использованием скриптов на сайте необходимо подключить последнюю версию библиотеки jQuery, иначе компоненты, которые их используют, работать не будут.

Перед применением платформы Bootstrap на сайте, ее исходные коды компилируются:

  • файлы LESS компилируются в файл CSS bootstrap.css и его минимизированную (сжатую) версию bootstrap.min.css.
  • файлы JavaScript тоже компилируются в один файл bootstrap.js и его минимизированную версию bootstrap.min.js.

На официальном сайте getbootstrap.com в разделе "Customize" Вы можете выполнить пользовательскую сборку платформы Twitter Bootstrap. Процесс сборки представим в виде этапов:

  • На первом этапе необходимо выбрать LESS файлы, которые необходимо компилировать и минимизировать в CSS файл (bootstrap.min.css). Файлы LESS представлены в 3 категориях: common CSS (общие стили), components (компоненты, созданные с помощью стилей) и JavaScript components (компоненты, созданные с помощью стилей и скриптов на языке JavaScript).
    Выбор LESS файлов Bootstrap для компиляции
  • На втором этапе выберите, какие плагины Bootstrap необходимо включить в пользовательскую сборку платформы. Плагины сгруппированы в разделы "Linked to components (Связанные с компонентами)" и "Magic (Магия)".
    Выбор jQuery плагинов Bootstrap для компиляции
  • На третьем этапе вы можете изменить значение переменных LESS для настройки общих стилей и каждого конкретного компонента.
    Изменение значений переменных LESS
  • На последнем этапе необходимо нажать на кнопку "Compile and Download", чтобы скомпилировать и скачать пользовательскую сборку Bootstrap 3.
    Скомпилировать и скачать пользовательскую сборку Bootstrap

В качестве примера рассмотрим процесс создания пользовательской сборки, у которой сетка макета будет состоять из 24 колонок. Для этого в разделе Grid System изменяем значение переменной LESS @grid-columns (количество колонок) на 24.

Создание пользовательской сборки платформы Bootstrap

Скачать пользовательскую сборку


   Bootstrap 0    4868 0

Комментарии (5)

  1. Toman # 0
    Спасибо за замечательные уроки!
    Сложно найти что-то толковое и последовательное по Бутстрапу в интернете. А вот на ваш ресурс захожу регулярно :) Все аккуратно, доступно, связно и кратенько делается — одно удовольствие заниматься!
    1. Александр Мальцев # 0
      Спасибо!

      Очень рад, что уроки могут быть полезными для Вас.
      Надеюсь, что уроки, которые опубликую в скором будущем будут не менее доступными и полезными.
    2. pocherk # 0
      Действительно очень полезные уроки! Bootstrap-ом пользуюсь больше года, но все как-то по-дилетански, а с помощью ваших уроков — очень продвинулся… Так держать!
      1. Александр Мальцев # 0
        Спасибо за вашу оценку.
      2. Дамир # 0
        Присоединяюсь к благодарностям, действительно данный учебник по Bootstrap уникален в рунете и очень полезен.

        Вы должны авторизоваться, чтобы оставлять комментарии.