Создание темы
Рабочий процесс, описанный в этой части руководства, в большей степени относится к созданию интерфейсов из компонентов, доступных в базовом наборе Bootstrap.
Если же вы создаете сайт на основе готового макета, или чувствуете, что многие из предполагаемых компонентов сайта не входят в базовый набор Bootstrap, вам лучше создавать все компоненты с нуля.
Специально для таких случаев есть отдельное руководство.
Содержание:
Мы уже упоминали создание темы во введении. Если сайт больше похож на приложение, и его интерфейс в большинстве своем состоит из всевозможных форм, кнопок, или если вы просто чувствуете, что вас устроят стандартные компоненты, предлагаемые Bootstrap, можно не создавать компоненты с нуля, потребуется всего лишь создать тему.
При создании темы, у пользователя имеется возможность изменить внешний вид встроенных компонентов. Недостающие компоненты можно реализовать самостоятельно. Процесс самостоятельной реализации компонентов описан в разделе «Создание компонентов и страниц сайта».
Все параметры, поддающиеся изменению в рамках создания темы, находятся в файле assets/scss/_variables.scss. Его мы и будем редактировать.
Создание темы вручную
По умолчанию все переменные, доступные для изменения, закомментированы. Как и указано в комментариях, раскомментирование любой из переменных и изменение ее значения переопределит соответствующее значение, установленное в Bootstrap по-умолчанию. Например, раскомментировав переменную border-radius-base и изменив ее значение на 10px, мы изменим радиус закругления углов некоторых кнопок. Аналогичным образом, меняя значения переменных, можно создать свою собственную тему.
Для того, чтобы процесс создания темы был максимально наглядным, лучше всего открыть страницу Demo Elements (перейти по адресу demoElements.html), поставляемую в стандартном наборе. На ней расположены многие стандартные компоненты, на этой странице очень легко следить за вносимыми изменениями.
Использование генераторов тем
Если вы не хотите редактировать файл темы вручную, можно воспользоваться генератором тем Bootstrap. Генератор тем позволяет изменять значения по умолчанию и наблюдать изменения в режиме реального времени. После создания темы, требуется нажать Get variables.less для получения файла темы.
Внимательный читатель мог заметить, что полученный файл является файлом LESS, хотя мы используем SCSS. Действительно, Bootstrap версии 3 использует LESS в качестве препроцессора по умолчанию, а Baumeister использует Sass. Перед тем, как вставлять полученный код в файл _variables.scss, требуется преобразовать LESS в SCSS. Сделать это можно при помощи конвертера LESS в SCSS.
Нужно заметить, что, пожалуй, единственным отличием окажется способ объявления переменной: в LESS переменные объявляются символом @, тогда как синтаксис SCSS для этой цели использует символ $.
Подключение сторонней темы
Существуют множество готовых тем для Bootstrap. Вы можете найти их на Bootswatch или на любом другом ресурсе.
Рассмотрим процесс подключения темы с Bootswatch. Предположим, нам понравилась некоторая тема. Bootswatch позволяет сразу получить файл темы в синтаксисе SCSS:
Однако не стоит заменять наш _variables.scss на тот, что мы скачали. По умолчанию, наш файл содержит дополнительные переменные, используемые Baumeister. Об этом и говорится в самом файле:
// Below this comment block you find our addional »global« variables which are
// used across our modules.
Их лучше не трогать. Вместо этого, нужно скопировать содержимое скачанного файла:
После чего нужно найти в нашем _variables.scss следующие строки:
//
// Variables
// --------------------------------------------------
Нужно выделить эти строки и все, что находится ниже, и заменить на содержимое скачанного файла. Если тема изначально была сделана ее создателями правильно, все заработает.