От автора: В данной статье рассказывается о том, как настроить Bootstrap перед скачиванием, и рассматриваются некоторые моменты, касающиеся выбора компонентов. Вы узнаете, какие возможности данного фреймворка вам нужны, а какие нет, в зависимости от ваших потребностей.
Из прошлой статьи вы уже знаете, что такое Bootstrap, когда его следует использовать, а также из чего он состоит. Сейчас вы узнаете, как выбирать компоненты для вашего проекта, как настроить фреймворк под ваши задачи, как убрать все лишнее и не запутаться при этом. Это начальный этап практической работы с Bootstrap, и любой базовый проект начинается с данного этапа.
Зачем настраивать Bootstrap
Это очень хороший вопрос, поскольку вы же можете просто скачать целиком весь архив, не настраивая его, и работать с ним. Есть две причины: во-первых, скорее всего вам не понадобятся все компоненты Bootstrap, а, во-вторых, размер всего фреймворка не такой уж незначительный (даже в сжатом виде) — 525 Кб. Плюс 95 Кб весит jQuery, потому что без него фреймворк не будет работать. Такую роскошь не может позволить себе ни один фронтенд разработчик, поэтому вам нужно убрать все лишнее. В любом случае всегда удаляйте ненужные компоненты.
Выбор компонентов
На странице загрузки Bootstrap вы увидите форму с чекбоксами. Здесь вам нужно отметить те компоненты, которые пригодятся вам в работе над проектом. И давайте теперь взглянем на некоторые составляющие Bootstrap и их предназначение.
Базовый CSS (Common CSS)
Это набор базовых элементов, необходимых для базовой разметки. Его всегда рекомендуется оставлять отмеченным.
Стили для печати (print media styles)
Это стили, которые используются браузерами перед печатью страниц. Вы можете настроить их, как вам нравится, используя следующую запись:
|
1 2 3 |
@media print { /* ваши стили */ } |
Типографика (Typography)
Базовое оформление текста: различные отступы, абзацы, цитаты, подсветка кода, форматированный текст, заголовки, индексы – все это оформляется с помощью данных стилей.
Даже если вы не будете использовать предустановленные классы на странице, ее содержимое будет отображено в стиле Bootstrap. Это полезно для тех, кто не может или не хочет копаться в старом коде. Просто подключите библиотеку, чтобы сделать текст привлекательнее.
Вот как можно изменить простой текст без использования дополнительных стилей:
Код (Code)
Форматирование кода на страницах. Конечно, здесь не будет подсветки синтаксиса. Для этого нужно будет использовать сторонний плагин (не имеющий никакого отношения к Bootstrap). Но фреймворк позволит вам отличать код от обычного текста с помощью использования тегов code, pre или kdb.
Сеточная система (Grid system)
Магия, которую используют CSS фреймворки, до сих пор вызывает благоговейный трепет у бывалых разработчиков, которые начинали работать еще 10 лет назад, и перед началом проекта им предстояло сделать выбор между табличной или блочной версткой. А сегодня, просто путем добавления нужных классов, вы получаете адаптивный (отзывчивый) макет для вашего веб-сайта всего за 10 минут.
Давайте посмотрим на пример того, как это может выглядеть:
Таблицы (Tables)
Табличная верстка давно ушла в прошлое, но табличные данные должны отображаться соответствующим образом, если не предусмотрено ничего другого. Без хорошо подобранного дизайна, данные будут смотреться не очень привлекательно. Постарайтесь избегать следующего отображения:
После простого добавления Bootstrap, без внесения каких-либо изменений в HTML, таблица будет выглядеть вот так:
Формы (Forms)
Если вам нужно создать формы, вы можете использовать Bootstrap:
Отметьте чекбокс «Форма» («Form»), если вам предстоит создание формы.
Кнопки (Buttons)
Кнопки Bootstrap достойны отдельного обсуждения: по умолчанию они бывают 4 размеров и 7 разных типов. Дополнительно есть кнопка с выпадающим меню, блочные кнопки и т.д. По умолчанию кнопки в Bootstrap выглядят вот так:
Утилиты для отзывчивого дизайна (Responsive utilities)
В Bootstrap есть набор полезных инструментов для быстрого и легкого создания макета под мобильные устройства. Благодаря этим инструментам вы можете скрывать и показывать некоторые компоненты на разных устройствах, изменять их размеры, отдельно для больших, средних и маленьких экранов. Данный компонент существенно сокращает количество кода и состоит из следующих классов:
Как видите, один и тот же блок может быть скрыт на планшете, но отображен на настольном компьютере или мобильном устройстве.
Компоненты (Components)
Здесь дается лишь краткое объяснение, потому что сами по себе компоненты малы и можно легко понять их предназначение по названию.
1. Глиф-иконки (Glyphicons). Иконочный шрифт. Весит около 250 Кб и редко используется. Поэтому если он не нужен, отключите его.
2. Группы кнопок (Button groups). Блоки, состоящие из пары кнопок.
3.Группы полей ввода (Input groups). Расширение для текстовых блоков и полей, например, «Имя пользователя» (Username):
4. Навигация (Navs). Навигация по табам (вкладкам). Для использования нужно подключить js-модуль.
5. Навигационная панель (Navbar). Навигация для главного меню; может быть фиксированной, светлой или темной.
6. «Хлебные крошки» (Breadcrumbs). Позволяет пользователям отслеживать местонахождение на сайте.
7. Постраничная навигация (Pagination). Отображает количество страниц на веб-сайте. Особенно полезно для блогов.
8. Переключатель страниц (Pager). Кнопки «вперед» и «назад».
9. Этикетки (Labels). Имеется 6 типов:
10. Бейджи (Badges). Используются, например, для отображения количества непрочитанных сообщений.
11. Приветственный блок (Jumbotron). Большой блок с вступительным текстом. Обычно используется на промо-сайтах и содержит короткое описание проекта.
12. Миниатюры (Thumbnails). Отвечает за отображение уменьшенных вариантов изображений.
13. Предупреждения (Alerts). Указывают на успех, ошибку, информацию или подсказку.
14. Индикатор процесса (Progress bars). Процесс выполнения отображается в процентах. Дополнительно можно применять анимацию и добавлять полосатый фон.
15. Медиа объекты (Media items). Форматирование блоков с комментариями, твитами и т.д. Это обычно списки с вложенными элементами, у которых может отличаться отступ слева, как у традиционных древовидных комментариев.
16. Группы списков (List groups). Форматирование списков с дополнительными возможностями: сноски, ссылки, примечания, уведомления (смотрите «этикетки» («labels»)).
17.Панели (Panels). Блоки с хедером, основным контентом и футером. Могут использоваться для усовершенствованных уведомлений, а также для элементов управления или форм.
18. Встраивание отзывчивых элементов (Responsive embed). «Отзывчивые» объекты могут расширяться и подстраиваться под разные размеры экрана для отображения видео в нужных пропорциях и без непосредственного указания размера.
19. Вдавленные элементы (Wells). Блоки с подсказками, альтернативным оформлением для цитат и т.д.
20. Иконка закрытия (Close icon). Предназначение должно быть понятно по названию.
Компоненты JavaScript
Bootstrap расширяет возможности динамических функций. Работа данного раздела фреймворка основывается на jQuery, и он обязательно должен быть подключен к bootstrap.min.js. Состоит данный раздел из следующих компонентов:
1. Анимация компонентов (Component animations) (для JS). Плавные переходы, анимация.
2. Выпадающие элементы (Dropdowns). Выпадающие списки.
3. Всплывающие подсказки (Tooltips). Небольшие появляющиеся подсказки.
4. Всплывающие элементы (Popovers). По сути такие же всплывающие подсказки, к которым вы можете добавить динамический контент, хедер и основной текст:
5. Модальные окна (Modals). Всплывающие окна. Вы можете изменять их размеры, добавлять заголовок, основной текст, футер, изменять их так, как вам захочется. По умолчанию они выглядят так:
6. Карусель (Carousel). Простой слайдер с выбором анимации.
Настройка переменных
Вы можете изменять стандартные настройки, исходя из ваших потребностей. Вы можете создать собственную тему для Bootstrap двумя способами:
Создайте ваш файл style.css и уже в нем определяйте стили, которые «перезапишут» стили по умолчанию.
В блоке с переменными Less вы можете изменить параметры на те, которые вам действительно нужны, и скачать измененный под вас архив с Bootstrap.
Скачивание
После того как вы закончите с изменением настроек, нажмите на кнопку «Компилировать и скачать» («Compile and download»). В загруженном архиве у нас будут содержаться только выбранные нами элементы. Для сравнения: небольшой проект использует лишь какую-то часть функционала, поэтому размер фреймворка очень легко уменьшить с 600 Кб до 100 Кб. Полученные в результате файлы можно сохранить в папке с проектом, а затем подключить bootstrap.min.css и (если нужно) bootstrap.min.js.
Источник: //basicuse.net/
Редакция: Команда webformyself.
