Twitter Bootstrap – это проект с исходным кодом, разработанный в компании Twitter для внутреннего использования. Создание этого фреймворка началось, так как возникла необходимость стандартизировать наборы инструментов для внешнего интерфейса инженеров компании. В 2011 году он был открыт для общественности под названием Bootstrap.
С момента запуска, Bootstrap превратился из полностью CSS-ориентированного проекта в набор плагинов и значков символов JavaScript, которые идут рука об руку с формами и кнопками. В своей основе он обеспечивает адаптивный веб-дизайн и имеет надежную 12-колоночную сетку шириной 940 пикселей. Одним из важных преимуществ является инструмент для сборки на веб-сайте Bootstrap, где вы можете настроить сборку в соответствии со своими потребностями, выбирая, какие функции CSS и JavaScript вы хотите включить в свой сайт. Все это позволяет веб-разработке внешнего интерфейса значительно шагнуть вперед, опираясь на устойчивую основу перспективного дизайна и разработки.
Для тех, кто начинает новый проект, Bootstrap поставляется с несколькими полезными элементами. К примеру, вам просто нужно включить CSS-файл bootstrap.css и JavaScript-файл bootstrap.js (необязательно) на ваш сайт, и вы готовы к работе.
Файловая структура Twitter Bootstrap
Загрузка Bootstrap включает три папки: css, js и img. Для простоты добавьте их в корень вашего проекта. Миниатюрные версии CSS и JavaScript также включены. Нет необходимости включать как несжатую, так и минимизированную версии. Для краткости можно использовать несжатую версию во время разработки, а затем переключаюсь на сжатую версию в продакшене.
Стандартный HTML шаблон
Обычно веб-проект выглядит примерно так:
В Bootstrap мы включаем ссылку на таблицу стилей CSS и JavaScript:
Важно: Не забудьте про HTML5 Doctype. Включая <!DOCTYPE html>, все современные браузеры переводятся в режим стандартов.
Глобальные стили
С Bootstrap, несколько важных элементов поставляются заранее. Вместо того, чтобы использовать старый блок сброса, который был частью дерева Bootstrap 1.0, Bootstrap 2.0 использует Normalize.css, проект Николаса Галлахера, который является частью HTML5 Boilerplate. Все это включено в файл bootstrap.css.
В частности, следующие стили по умолчанию обеспечивают особую обработку типографики и ссылок:
- Поле было удалено из тела, и содержимое будет прилегать к краям окна браузера;
- Цвет фона: белый; применяется к телу;
- Bootstrap использует атрибуты @baseFontFamily, @baseFontSize и @baseLineHeight в качестве типографской базы. Это позволяет высоте заголовков и другого контента вокруг сайта поддерживать одинаковую высоту строки;
- Bootstrap устанавливает глобальный цвет ссылки через @linkColor и применяет подчеркивание ссылки только на :hover.
Примечание: если вам не нравятся цвета или вы хотите изменить настройки по умолчанию, это можно сделать, изменив глобальные переменные в любом из файлов .less. Для этого обновите файл scaffolding.less или замените цвета в своей собственной таблице стилей.
Стандартная система таблиц
Система таблицы Bootstrap по умолчанию (как на изображении ниже) использует 12 столбцов, что делает контейнер шириной 940 пикселей без включенных гибких функций. С добавлением гибкого CSS-файла сетка адаптируется к ширине 724 или 1170 пикселей, в зависимости от области просмотра. Под окнами просмотра размером 767 пикселей, такими как на планшетах и небольших устройствах, столбцы становятся резиновыми и располагаются вертикально. При ширине по умолчанию каждый столбец имеет ширину в 60 пикселей и смещение на 20 пикселей влево. Пример из 12 возможных столбцов приведен на данном изображении:
Основная сетка HTML
Чтобы создать простой макет, создайте контейнер с <div>, который имеет класс .row, и добавьте соответствующее количество столбцов .span*. Поскольку у нас есть сетка из 12 столбцов, нам просто нужно, чтобы количество столбцов .span* было равно 12. Мы могли бы использовать макет 3-6-3, 4-8, 3-5-4, 2-8-2… и продолжать, и продолжать, но суть вы и так уже наверное поняли.
Следующий код показывает .span8 и .span4, что в сумме составляет 12:
Система резиновой сетки
Резиновая сетка использует проценты вместо пикселей для ширины столбца. Она обладает теми же возможностями реагирования, что и наша система с фиксированной сеткой, обеспечивая надлежащие пропорции для ключевых разрешений экрана и устройств. Вы можете сделать любой ряд «резиновым», изменив .row на .row-liquid. Классы столбцов остаются одинаковыми, благодаря чему можно легко переходить от фиксированных к резиновым сеткам. Для получения смещения вы действуете так же, как и с системой с фиксированной сетки – добавьте .offset* к любому столбцу, чтобы сместить его на желаемое количество столбцов:
Поскольку мы используем проценты, каждый .row сбрасывает количество столбцов до 12. Например, если вы были в .span8, то вместо двух экземпляров .span4, вы бы использовали два div .span6 для разделения содержимого пополам. Это касается гибкого контента, так как мы хотим, чтобы контент заполнял все 100% контейнера:
Макеты контейнеров
Чтобы добавить на страницу макет с фиксированной шириной по центру, просто оберните содержимое в <div class="container">...</div>. Если вы хотите использовать разметку Fluid, но хотите обернуть все в контейнере, используйте следующее: <div class="container-fluid">...</div>. Использование гибкой компоновки удобно при создании приложений, экранов администрирования и других связанных проектов.
Гибкий дизайн
Чтобы включить гибкие функции Bootstrap, вам нужно добавить тег <meta> в <head> вашей веб-страницы. Если вы не загрузили скомпилированный исходный код, вам также необходимо добавить адаптивный файл CSS. Пример необходимых файлов выглядит следующим образом:
Важно: если в начале работы вы обнаруживаете, что гибкие функции Bootstrap не работают, убедитесь, что у вас есть необходимые теги. В настоящее время гибкие функции не добавляются по умолчанию, потому что не все должно быть адаптивным. Вместо того чтобы поощрять разработчиков удалять эту функцию, авторы Twitter Bootstrap решили, что лучше всего включать ее по мере необходимости.
Что такое гибкий дизайн?
Гибкий дизайн (адаптивный, отзывчивый) – это метод сбора всего существующего контента на странице и его оптимизации для устройства, которое его просматривает. Например, рабочий стол не только получает обычную версию веб-сайта, но также может иметь широкоэкранный макет, оптимизированный для больших дисплеев, которые многие люди подключают к своим компьютерам. Планшеты получают оптимизированную компоновку, используя их книжную или альбомную ориентацию. И затем с телефонами, вы можете ориентироваться на их гораздо более узкую ширину. Чтобы настроить таргетинг на эту ширину, Bootstrap использует медиазапросы CSS для измерения ширины области просмотра браузера, а затем, используя условные выражения, изменяет загружаемые части таблиц стилей. Используя ширину окна просмотра браузера, Bootstrap может затем оптимизировать контент, используя комбинацию соотношений или ширин, но в основном он опирается на свойства min-width и max-width.
По сути, Bootstrap поддерживает пять различных макетов, каждый из которых опирается на медиа-запросы CSS. Самый большой макет имеет столбцы шириной 70 пикселей, контрастирующие с 60 пикселями обычного макета. Компоновка планшета увеличивает ширину столбцов до 42 пикселей, и, если их уже, каждый столбец становится плавным, то есть столбцы располагаются вертикально, а каждый столбец соответствует полной ширине устройства.
Чтобы добавить пользовательский CSS на основе медиазапроса, вы можете либо включить все правила в один файл CSS с помощью медиазапросов, либо использовать совершенно другие файлы CSS:
Для более крупного сайта вы можете разделить каждый медиазапрос на отдельный файл CSS. В файле HTML вы можете вызывать их с тегом <link> в заголовке вашего документа. Это полезно для уменьшения размера файлов, но потенциально увеличивает количество HTTP-запросов, если сайт отзывчивый. Если вы используете LESS для компиляции CSS, вы можете обработать их все в один файл:
Bootstrap также включает несколько вспомогательных классов для гибкой разработки в целях экономии. Возможно, у вас есть действительно хороший заголовок на основном макете, но на мобильном вы хотите сократить его, оставив лишь несколько элементов. В этом сценарии вы можете использовать класс .hidden-phone, чтобы скрыть части или целые элементы dom из заголовка.
Есть два основных подхода к разработке веб-дизайна. Мантра, которую сейчас кричат многие, заключается в том, что вы должны начать с мобильных стандартов, перейти на эту платформу и подстраивать стандартны персональных компьютеров под нее. Twitter Bootstrap почти полностью противоположен: вы создадите полнофункциональный рабочий стол, который «просто работает».
Но Bootstrap прекрасно подойдет и в качестве чисто мобильного фреймворка.
JavaScrpit плагины для Bootstrap
Bootstrap может быть интегрирован в ваш сайт в двух формах: скомпилированных или необработанных. В Bootstrap размер несжатого файла составляет 59 КБ, а минимизированной версии – всего 32 КБ. Все плагины Bootstrap можно вызывать с помощью встроенного Data API. При этом вам не нужно включать какую-то конкретную строку JavaScript, чтобы вызвать какие-либо функции плагина.
Как правило, JavaScript находится в отдельном файле или в нижней части страницы перед закрывающим тегом </body>. Вы можете использовать атрибут src для ссылки на другой файл или записать содержимое файла между открывающим и закрывающим тегами:
Как правило, лучше включить все вызовы JavaScript в проверку, которая гарантирует, что DOM был загружен на страницу. Если у вас есть JavaScript, пытающийся запуститься ранее, он может пропустить элементы, когда браузер анализирует страницу. С помощью jQuery легко добавить проверку, выбрав документ или все содержимое страницы, а затем применив метод .ready():
Как упоминалось выше, Bootstrap имеет Data API, где вы можете записывать атрибуты данных в HTML-страницы. Если будет необходимость выключить Data API, вы можете отменить привязку атрибутов, добавив следующую строку JavaScript:
Если вам нужно отключить один плагин, вы можете сделать это программно, используя пространство имен плагина вместе с пространством имен data-api:
