() translation by (you can also view the original English article)
Наконец мы добрались до последнего туторила этой серии, в котором мы научимся настраивать кастомную цветовую схему.
Как вы возможно помните в начале когда мы делали основные изменения, я упомянул что авторы BS предоставляют дополнительные файлы, чтобы сделать BS3 похожим на BS2, нежели довольствоваться flat-дизайном.
В этой серии мы использовали flat-дизайн, который BS3 предоставляет по умолчанию, но если вы скачаете версию BS3 с Bootstrap веб-сайта, вы найдёте файл внутри архива под названием bootstrap-theme.css.
Если вы добавите ссылку на этот файл в ваш проект, после основного файла bootstrap.css, вы обнаружите, что новый BS3, выглядит как приложение на BS2.
Авторы поняли, что главное препятствие популяризировать BS3 для новых приложений - это невозможность, без проблем, стилизовать ваши страницы, как вы хотите.
Если пользуетесь LESS или даже Sass (теперь существуют Sass версии BS3), кастомизация не будет проблемой. Вы просто открываете исходники LESS, настраиваете переменные и миксины как вы хотите, и запускаете LESS компилятор, чтобы получить новый CSS.
К сожалению не все используют LESS; по факту, многие разработчики и дизайнеры скачивают обычные CSS и JavaScript файлы, нужно найти более удобный способ.
Первое что можно сделать это открыть страницу с исходниками Less, чтобы кастомизировать их, на главном сайте Bootstrap, но это не что-то новое; мы могли использовать эту страницу и до этого, правда с ограниченными возможностями. С BS3, однако, инструмент для кастомизации Less был кардинально переработан и теперь вы можете переопределить всё что угодно в BS3, от шрифта и его размера, размеров сетки, брейкпоинтов, заканчивая цветовой схемой.
Теперь нет ничего, что нельзя было бы изменить перед тем как вы скачаете ваш новый кастомизированный CSS, как показано на картинке ниже:
Так как страница с этим инструментом довольно обширная, невозможно показать её всю в этом туториале, но вы можете посмотреть её сами. Просто перейдите на сайт Bootstrap и нажмите Customize в верхнем меню. Можно заметить что там находится много различных опций, к примеру JavaScript плагины, какие инструменты следует включить в сборку, какие компоненты стоит добавить и добавить стили, которые вам нужны.
К примеру, если вам достаточно только системы сеток и ничего более, тогда можно выбрать одну лишь сетку и исключить остальные компоненты.
После чего BS3 сайт создаст вам необходимый код, который вы должны добавить и ничего больше. Это настоящая находка для тех людей, которые жалуются, что сайты на Bootstrap выглядят одинаково, ваши сайты не должны отображаться также как и большинство других Bootstrap веб-сайтов - можно использовать только те части, которые вас интересуют, а остальное всё добавить сами.
Есть два других способа кастомизировать сборку. Первый - использовать дополнительную bootstrap тему CSS стилей, скопировать её и изменить стили, как вам вздумается. Это не так просто, как инструменты для кастомизации, но опять не так уж и сложно.
Большинство имён классов и настроек, которые вы хотите изменить, для кастомизации BS3, уже разделены соответствующим образом в BS2 теме, поэтому нужно экспериментировать с элементами управления и другими, на странице для создания прототипов, после чего добавить BS2 тему.
Если вы используете Node и Bower, здорово, так вам будет гораздо проще, можно использовать live reload и смотреть как страница меняется в реальном времени, в то время как вы настраиваете свою кстомную тему.
Следующий способ потребует больше усилий, как описано в BS3 документациях, можно выбрать два подхода: простая кастомизация и более сложная.
Пример простой кастомизации добавить дополнительный класс отвечающий за смену цвета для элемента - кнопки. К примеру если вы хотите добавить btn-sky помимо btn-info, btn-primary и так далее, можно создать дополнительную таблицу стилей с этими свойствами:
1 |
.btn-sky, .btn-sky:hover, .btn-sky:active |
2 |
{
|
3 |
color: #000000; |
4 |
text-shadow: 0 -1px 0 rgba(0, 0, 0, 2); |
5 |
background-color: #AAD4FF; |
6 |
border: 1px solid black; |
7 |
}
|
8 |
|
9 |
.btn-sky
|
10 |
{
|
11 |
background-repeat: repeat-x; |
12 |
background-image: linear-gradient(top, #00FFFF 0%, #FFFF00 100%); |
13 |
}
|
14 |
|
15 |
.btn-sky:hover |
16 |
{
|
17 |
background-position: 0 -10px; |
18 |
}
|
Когда вы добавите стили и создадите соответствующую ссылку, выглядеть это будет так:
Когда используется с обычной кнопкой:
1 |
<button class="btn btn-sky">My Sky Button</button> |
Самое сложное в этом методе - искать соответствующие имена классов в CSS стилях и переписывать их, не то чтобы сложно, но занимает время.
Как только вы нашли кнопку, панель или список, или другой класс, вы можете скопировать шаблон, который вы можете использовать где захотите с кастомным классом.
Второй способ не сильно отличается от первого, главное отличие - вам следует переписать весь класс.
К примеру вы нашли классы относящиеся к btn, скопируйте их, измените и добавьте их в отдельную таблицу стилей.
Новая архитектура фреймворка BS3 подразумевает, если вы знаете целевой селектор, тот который хотите изменить, какие у него потомки, создание или кастомизация реализуется просто. Как я уже сказал, тема bootstrap уже содержит всё что вы хотите модифицировать, и если это вам подходит обратите внимание на веб-сайт Bootswatch.com:
Много других сайтов обладают огромным набором тем из которых можно выбрать, как платные так и бесплатные, не значит, что сайт Bootstrap должен выглядеть всегда одинаково.
Заключение
Надеюсь вам понравилась эта серия и я помог вам стать лучше в разработке на Bootstrap 3. С появлением различных техник адаптивного веб-дизайна, BS3 - фреймворк на который стоит обратить внимание, он был создан разработчиками одной их крупнейших соцсетей и используется на многих веб-сайтах.
Если вы хотите связаться со мной и возможно задать вопросы о книге, меня можно найти на Twttier @shawty_ds. Также я есть на Linkedin, или группе Linked.NET, организатором которой я являюсь.
До скорого, продолжайте работать с bootstrap.
Данный туториал является частью книги - Коротко о Boostrap 3, от Syncfusion.
