Bootstrap - это HTML фронтенд-фреймворк для ускоренной вёрстки веб-страниц сайтов. Он не накладывает ограничений на дизайн, но всё же желательно что бы сайт имел колоносную структуру. У него есть несколько преимуществ:
- Адаптивность. При правильном использовании вы будете иметь сразу адаптивный шаблон, его не придётся делать отдельно.
- Бибилиотека элементов. Содержит кнопки, формы, иконки, табы для страниц и многое другое другое.
- Расширяемость. Хотите добавить свои стили? Сделать кнопку не округлой, а квадратной? Нет проблем! У вас почти отстутствуют ограничения!
Именно поэтому огромное количество веб-мастеров сегодня выбирают именно этот фреймворк.
Есть несколько особенностей работы с Bootstrap:
- В Bootstrap применяют только современные наработки из области HTML и CSS, поддержка старых устройств есть, но не очень большая. Поэтому необходимо внимательно отнестись к поддержке очень старых старых браузеров.
- Bootstrap в целом не требователен к навыку верстальщиков, работающих с ними, но если вы недавно начали работать с HTML то рекомендуем сначала пройти импровизированное собеседование по HTML, например здесь что бы понять свой уровень, и, если это необходимо, подтянуть его.
Главные инструменты:
- Шаблон – это фиксированный или не фиксированный шаблон документа.
- Сетки – это установленные заранее размеры колонок. Использовать их можно сразу. К примеру, колонка с шириной 140 px будет отнесена к типу span2. Этот класс можно применять в описании CSS документов.
- Медиа – с помощью этого инструмента осуществляется управление видео и изображениями.
- Типографика – это шрифты и их описание, а также определение кодов, цитат и прочих классов шрифтов.
- Формы – с их помощью можно оформить не только сами формы, но и некоторые элементы, которые с ними связаны.
- Таблицы – инструмент для оформления таблиц. Сюда входит сортировка таблиц и добавление их функциональности.
- Алерты – работа с диалоговыми окнами, подсказками и всплывающими окнами;
- Навигация – это оформление вкладок, табов, меню, страниц, а также тулбара.
Шаблоны бутстрап построены на 12-колонной динамической сетке, которая может иметь фиксированную или плавающую ширину. Это незаменимые шаблоны для создания сайтов на основе всемирно известного фреймворка Bootstrap от Twitter.
В bootstrap применяются CSS свойства и HTML элементы, при работе с которыми нужен HTML 5 doctype. Этот шаблон предъявляет глобальные и основные значения для ссылок, шрифтов и бекграунда. Во второй версии шаблона (bootstrap 2) обычный сброс браузерных дефолтов осуществляется благодаря Normalize. В третьей и четвёртой версии от этого отказались. Для большей совместимости многое было изменено, а сброс дефолтных стилей можно найти в reset.less.
Динамический дизайн и его использование
Для того чтобы активировать responsive-дизайн необходимо добавить мета-тег и CSS файл в «head» страницы сайта. Но в случае, когда осуществлялась компиляция шаблона со страницы «изменить и скачать», то нужно лишь включить мета-тег.
Важно то, что Bootstrap шаблоны по умолчанию не содержат в себе responsive файл, потому что далеко не всем элементам и страницам это необходимо. Поэтому, для того чтобы разработчики не обременялись процессами удаления элементов responsive дизайна, его по умолчанию нет, но можно включить.