Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Bootstrap 3
Webdesign

Коротко о Boostrap 3: кастомизация Bootstrap 3

by
Difficulty:IntermediateLength:ShortLanguages:
This post is part of a series called Bootstrap 3 Succinctly.
Bootstrap 3 Succinctly: Changed JavaScript Features

Russian (Pусский) translation by Anton Lisovsky (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, как показано на картинке ниже:

Screenshot of the top half of the new customization tool
Скриншот верхней половины, нового инструмента кастомизации

Так как страница с этим инструментом довольно обширная, невозможно показать её всю в этом туториале, но вы можете посмотреть её сами. Просто перейдите на сайт Bootstrap и нажмите Customize в верхнем меню. Можно заметить что там находится много различных опций, к примеру JavaScript плагины, какие инструменты следует включить в сборку, какие компоненты стоит добавить и добавить стили, которые вам нужны.

К примеру, если вам достаточно только системы сеток и ничего более, тогда можно выбрать одну лишь сетку и исключить остальные компоненты.

После чего BS3 сайт создаст вам необходимый код, который вы должны добавить и ничего больше. Это настоящая находка для тех людей, которые жалуются, что сайты на Bootstrap выглядят одинаково, ваши сайты не должны отображаться также как и большинство других Bootstrap веб-сайтов - можно использовать только те части, которые вас интересуют, а остальное всё добавить сами.

Есть два других способа кастомизировать сборку. Первый - использовать дополнительную bootstrap тему CSS стилей, скопировать её и изменить стили, как вам вздумается. Это не так просто, как инструменты для кастомизации, но опять не так уж и сложно.

Большинство имён классов и настроек, которые вы хотите изменить, для кастомизации BS3, уже разделены соответствующим образом в BS2 теме, поэтому нужно экспериментировать с элементами управления и другими, на странице для создания прототипов, после чего добавить BS2 тему. 

Если вы используете Node и Bower, здорово, так вам будет гораздо проще, можно использовать live reload  и смотреть как страница меняется в реальном времени, в то время как вы настраиваете свою кстомную тему.

Следующий способ потребует больше усилий, как описано в BS3 документациях, можно выбрать два подхода: простая кастомизация и более сложная.

Пример простой кастомизации добавить дополнительный класс отвечающий за смену цвета для элемента - кнопки. К примеру если вы хотите добавить btn-sky помимо btn-info, btn-primary и так далее, можно создать дополнительную таблицу стилей с этими свойствами:

Когда вы добавите стили и создадите соответствующую ссылку, выглядеть это будет так:

Output from code sample when used with the customization sample
Пример как выглядит данный пример кода по кастомизации

Когда используется с обычной кнопкой:

Самое сложное в этом методе - искать соответствующие имена классов в CSS стилях и переписывать их, не то чтобы сложно, но занимает время.

Как только вы нашли кнопку, панель или список, или другой класс, вы можете скопировать шаблон, который вы можете использовать где захотите с кастомным классом.

Второй способ не сильно отличается от первого, главное отличие - вам следует переписать весь класс.

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

Новая архитектура фреймворка BS3 подразумевает, если вы знаете целевой селектор, тот который хотите изменить, какие у него потомки, создание или кастомизация реализуется просто. Как я уже сказал, тема bootstrap уже содержит всё что вы хотите модифицировать, и если это вам подходит обратите внимание на веб-сайт Bootswatch.com:

Screen shot of the sweet and cherry theme from Bootswatchcom
Скриншот sweet and cherry темы Bootswatch.com

Много других сайтов обладают огромным набором тем из которых можно выбрать, как платные так и бесплатные, не значит, что сайт Bootstrap должен выглядеть всегда одинаково.

Заключение

Надеюсь вам понравилась эта серия и я помог вам стать лучше в разработке на Bootstrap 3. С появлением различных техник адаптивного веб-дизайна, BS3 - фреймворк на который стоит обратить внимание, он был создан разработчиками одной их крупнейших соцсетей и используется на многих веб-сайтах.

Если вы хотите связаться со мной и возможно задать вопросы о книге, меня можно найти на Twttier @shawty_ds. Также я есть на Linkedin, или группе Linked.NET, организатором которой я являюсь.

До скорого, продолжайте работать с bootstrap.

Данный туториал является частью книги - Коротко о Boostrap 3, от Syncfusion. 

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.