От автора: Для любого фронтенд разработчика/программиста рано или поздно наступает момент для создания своего собственного мини-фреймворка. Обычно он состоит из тех правил и функций, которые повторялись во всех недавних проектах. После того как они будут собраны в одну библиотеку, их будет легче за один раз подключить к новому проекту и пользоваться готовыми решениями. В такую библиотеку может входить сетка с колонками, в которых находится любой контент, стандартные правила для спрайтов, внешних отступов, заголовков и т.д.
Если в разработке проекта принимает участие несколько профессиональных фронтенд разработчиков, то подобные фреймворки нужно стандартизировать. Если это так, то предпочтение отдается уже стандартизированным фреймворкам. Теперь перед нами определенно стоит выбор: какой из фреймворков использовать? В этой статье мы постараемся помочь будущим профессиональным разработчикам разобраться в «плюсах» и «минусах» фреймворка Bootstrap.
Что такое Bootstrap
Созданный командой разработчиков в компании Twitter, он изначально использовался для собственных продуктов компании и был назван «Twitter Bootstrap», но затем стал самостоятельным решением. Вот почему слово «Twitter» было в дальнейшем отброшено.
Bootstrap — это CSS/HTML фреймворк для создания веб-сайтов. Другими словами, это набор инструментов для создания веб-макета. У него есть ряд преимуществ, что делает его самым популярным среди других подобных фреймворков. Преимущества Bootstrap:
Скорость работы – создание макетов с Bootstrap занимает меньше времени благодаря большому набору готовых к использованию элементов.
Гибкость – добавление новых элементов не нарушает общую структуру благодаря динамически изменяющейся сетке.
Легкая изменяемость – правка стилей достигается за счет добавления новых CSS правил, которые переопределяют существующие. При этом, вам не нужно использовать атрибуты типа !important.
Большое количество шаблонов – этот момент будет отдельно рассмотрен далее.
Огромное сообщество сторонников/разработчиков.
Широкий спектр применения – Bootstrap используется для создания тем почти для любой CMS (Magento, Joomla, WordPress или любой другой), включая одностраничные лэндинги.
Замечательная официальная документация.
Bootstrap особенно популярен среди тех, кто занимается созданием так называемых «лэндингов» (посадочных/целевых страниц).
Шаблоны Bootstrap
Шаблоны в Bootstrap позволяют вам изменять уже модифицированные элементы под ваши нужды. Многие разработчики предлагают использовать их собственные шаблоны (платные или бесплатные). Подключаются шаблоны Bootstrap очень просто: после подключения самого Bootstrap вы просто добавляете вызов CSS шаблона.
Содержимое фреймворка
Если вы остановили свой выбор на Bootstrap, то данный фреймворк позволит вам существенно сэкономить время разработки фронтенд части проекта благодаря большому количеству готовых компонентов. Позже мы рассмотрим основные компоненты, которыми пользуются почти всех фронтенд разработчики. Следует здесь отметить, что Bootstrap — это, так сказать, набор из трех фреймворков: CSS/HTML, JS компоненты и иконочный шрифт.
Сетка
Наличие сетки является базовым требованием для хорошего макета. Сетка — это мощный инструмент для расположения блочного контента и вложенных элементов. С помощью префиксов вы можете указать, каким образом должны отображаться блоки, в зависимости от типа устройства, на котором просматривается веб-сайт.
Например, класс «col-xs-» будет использоваться для мобильных телефонов с шириной экрана менее 768 пикселей, а класс «col-lg-» — для устройств с шириной экрана более 1170 пикселей. Bootstrap разделяет ширину родительского блока на 12 равных блоков, которые мы можем использовать как угодно. Некоторые блоки могут комбинироваться, чтобы получить, например, три колонки: две 25% «col-lg-3» и одна 50% «col-lg-6».
Визуально страница может быть представлена в любом желаемом виде:
Если вы выйдете за пределы 12 блоков, то оставшаяся часть будет отображена ниже, под другими блоками, поэтому будьте внимательны. Вот пример блоков, которые будут одинаково отображаться на всех устройствах. Давайте разделим экран на три равные части:
|
1 2 3 4 5 |
<div class="row"> <div class="col-sm-4">First column</div> <div class="col-sm-4">Second column</div> <div class="col-sm-4">Third column</div> </div> |
Типографика
В дополнение к возможности изменять блоки на макете и структуру страницы Bootstrap позволяет вам форматировать параметры шрифта: абзацы, цитаты, заголовки, подзаголовки, разные размеры текста, вставки кода и т.д. В большинстве случаев вам не нужно изменять настройки текста по умолчанию, потому что все внешние отступы, заголовки, межстрочные интервалы (интерлиньяж) и т.д. уже тщательно подобраны.
Большое внимание уделяется семантике: основной заголовок может быть задан в виде тега <h1>heading</h1>, но также и в виде <div class=»h1″>heading</div> – оба варианта будут выглядеть одинаково, но второй может быть использован любое количество раз на странице.
Если вы хотите попробовать поработать с Bootstrap, но не хотите сразу разбираться во всех «тонкостях», то начните с малого: создайте текстовую страничку с какими-то новостями. Просто проведите линии под заголовками и подзаголовками, вставьте изображения, добавьте какие-нибудь цитаты, списки и наслаждайтесь тем, как легко данный фреймворк справляется с данными задачами.
Оповещения (алерты)
Любое оповещение может быть представлено в 4 стандартных форматах: положительный, информационный, предупреждающий, отрицательный. Вот как они выглядят:
Для того чтобы отформатировать любое сообщение, потребуется добавить два класса для нужного объекта:
|
1 2 3 4 |
<div class="alert alert-success" role="alert">Отлично! Вы успешно прочитали данное важное сообщение.</div> <div class="alert alert-info" role="alert">Посмотрите сюда! Это оповещение нуждается в вашем внимании, но оно не супер-важное.</div> <div class="alert alert-warning" role="alert">Осторожно! Лучше бы вам провериться, т.к. вы выглядите не очень хорошо.</div> <div class="alert alert-danger" role="alert">О, нет! Придется изменить что-нибудь и попытаться отправить заново.</div> |
Также Bootstrap позволяет вам форматировать диалоговые окна, всплывающие окна (pop-up) и всплывающие подсказки (tooltip).
Навигация
Навигация обычно является одним из основных элементов на веб-сайте и ему уделяется отдельное внимание при разработке макета. Правильное проектирование макета, создание и оформление элементов навигации для их правильной работы — это обычно одна из наиболее сложных задач. Навигации в Bootstrap уделено особое внимание: фреймворк содержит дизайны для вкладок (табов), постраничной навигации (пагинации), боковых меню, «хлебных крошек», основного меню, панели инструментов (тулбара) и т.д.
Очень легко сделать так, чтобы основное меню выглядело следующим образом:
Чтобы исправить внешний вид меню, нужно будет добавить класс «navbar-fixed».
Пагинация выглядит вот так:
А вот и необходимый для этого код:
|
1 2 3 4 5 6 7 8 9 10 11 |
<nav> <ul class="pagination"> <li><a href="#"><span aria-hidden="true">«</span><span class="sr-only">Previous</span></a></li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#"><span aria-hidden="true">»</span><span class="sr-only">Next</span></a></li> </ul> </nav> |
Как вы можете заметить, ничего сложного.
Формы
Текстовые поля и блоки (textarea), кнопки, метки (label), радиокнопки, чекбоксы, выпадающие списки — для всех этих элементов в Bootstrap уже есть подготовленные стили. Вы можете создать вертикальные и горизонтальные разделители у заголовков, а также подсветить часть формы, если возникнут какие-то предупреждения или ошибки.
Вы можете сделать горизонтальное расположение блоков, расположение всех полей в одну строку и много другое.
Кнопки
Здесь все просто. Чтобы создать кнопку, нужно указать нужный набор классов. Вот лишь несколько типов кнопок:
А вот и сам код:
|
1 2 3 4 5 6 7 |
<button type="button" class="btn btn-default">Default</button> <button type="button" class="btn btn-primary">Primary</button> <button type="button" class="btn btn-success">Success</button> <button type="button" class="btn btn-info">Info</button> <button type="button" class="btn btn-warning">Warning</button> <button type="button" class="btn btn-danger">Danger</button> <button type="button" class="btn btn-link">Link</button> |
Таблицы
Старые добрые таблицы создаются путем добавления класса «table». И мы получаем очень аккуратную таблицу:
Компоненты JavaScript
В дополнение к стилям в Bootstrap имеются правила поведения для модальных окон, слайдеров, тултипов, табов и других интерактивных элементов на странице. Чтобы управлять этими компонентами, потребуется библиотека jQuery; не забудьте подключить ее к файлу bootstrap.js.
Иконочный шрифт
Иконочный шрифт позволит вам забыть о раздражающих спрайтах для иконок и очень сильно упростит вашу жизнь. Единственное ограничение заключается в том, что к одной иконке можно применить только один цвет.
Вам предоставляется выбор из 200 иконок, и вы можете добавить их на ваш веб-сайт следующим образом:
|
1 |
<span class="glyphicon glyphicon-star"></span> |
Как подключить Bootstrap
Зайдите на официальный сайт фреймворка и отметьте все пункты, которые понадобятся для работы. Дополнительные возможности могут быть добавлены/удалены при необходимости. После того как вы нажмете на кнопку «Compile and Download» («Компилировать и Загрузить»), скачайте архив и распакуйте его.
Для базовых вещей вам потребуется всего один файл. Он подчеркнут красным цветом. Сохраните его в папке с вашим CSS и подключите в области head на странице.
|
1 |
<link rel='stylesheet' href='/styles/bootstrap.min.css' type='text/css' media='all'> |
Иконочный шрифт находится в папке fonts (шрифты), и если он вам действительно нужен, убедитесь в том, чтобы он остался в этой же папке. Сохраните структуру папок, чтобы все работало корректно.
Источник: //basicuse.net/
Редакция: Команда webformyself.
Комментарии (3)