Кастомизация стилей и компонентов Bootstrap 3

Александр Мальцев
Александр Мальцев
13K
5
Кастомизация стилей и компонентов Bootstrap 3
Содержание:
  1. Из чего состоит Bootstrap 3
  2. Сборка Bootstrap из исходных кодов
  3. Пример сборки Bootstrap с 24 колонками
  4. Комментарии

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

Из чего состоит Bootstrap 3

Перед тем как выполнить сборку Bootstrap из исходных кодов сначала разберём на чём она написана.

Bootstrap 3 разработана на:

  • Less;
  • JavaScript с использованием jQuery (jQuery плагины).

Less – это CSS препроцессор, который используется для написания стилей.

Все написанные стили можно разбить на 3 большие группы:

  • общие (Common CSS);
  • для CSS компонентов;
  • для JavaScript компонентов.

Кастомизация исходных стилей осуществляется с помощью Less переменных.

После настройки переменных и выбора нужных файлов выполняется компиляция исходных кодов.

Файлы Less компилируются в «bootstrap.css», а JavaScript – в «bootstrap.js». Перед «bootstrap.js» нужно подключить jQuery, т.к. он зависит от этой библиотеки.

Сборка Bootstrap из исходных кодов

Одним из самых простых способов выполнить сборку Bootstrap из исходных кодов является использование формы, расположенной на странице «Customize and download».

Весь процесс кастомизации Bootstrap выполняется за 4 шага.

1. Выбрать LESS файлы (исходные стили), которые необходимо включить в сборку.

В форме они разбиты на 3 категории:

  • Common CSS (здесь собраны общие стили);
  • Components (компоненты, написанные только с использованием стилей);
  • JavaScript components (компоненты, для которых кроме стилей нужен ещё код JavaScript).
Выбор исходных LESS файлов, которые необходимо включить в сборку Bootstrap 3

2. Выбрать jQuery плагины, которые необходимо включить в сборку.

Плагины разбиты на 2 категории:

  • Linked to components (необходимые для работы компонентов);
  • Magic (для создания эффектов и других вещей).
Выбор jQuery плагинов, которые нужно включить в сборку Bootstrap

3. Изменить значения переменных Less для кастомизации общих стилей и компонентов.

Кастомизация стилей Bootstrap 3 посредством изменения значений переменных

4. После того как всё сделано, необходимо нажать на кнопку «Compile and Download». Это действие запустит процесс компиляции исходных кодов. В результате получите сборку Bootstrap в зависимости от выбранных вами опций и указанных значений LESS переменных.

Компиляция сборки Bootstrap из исходных кодов и её загрузка

Пример сборки Bootstrap с 24 колонками

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

Для этого нам всего лишь нужно в разделе Grid System изменить значение переменной Less @grid-columns на 24.

Изменение Less переменной, отвечающей за количество колонок Bootstrap 3

После этого перейти вниз страницы и нажать на кнопку «Compile and Download».

Комментарии:

  1. Дамир
    Дамир
    30.06.2015, 12:05
    Присоединяюсь к благодарностям, действительно данный учебник по Bootstrap уникален в рунете и очень полезен.
    1. pocherk
      pocherk
      17.12.2014, 12:28
      Действительно очень полезные уроки! Bootstrap-ом пользуюсь больше года, но все как-то по-дилетантски, а с помощью ваших уроков очень продвинулся… Так держать!
      1. Александр Мальцев
        Александр Мальцев
        17.12.2014, 14:03
        Спасибо за вашу оценку.
      2. Toman
        Toman
        05.12.2014, 17:18
        Спасибо за замечательные уроки!
        Сложно найти что-то толковое и последовательное по Бутстрапу в интернете. А вот на ваш ресурс захожу регулярно :) Все аккуратно, доступно, связно и кратенько делается – одно удовольствие заниматься!
        1. Александр Мальцев
          Александр Мальцев
          06.12.2014, 05:12
          Спасибо!
          Очень рад, что уроки полезны.
        Войдите, пожалуйста, в аккаунт, чтобы оставить комментарий.