Начните работу с Bootstrap, самой популярной в мире платформой для создания адаптивных сайтов, ориентированных на мобильные устройства, с jsDelivr и шаблонами страниц.
Быстрый старт
Хотите использовать Бутстрап в своем проекте? Используйте jsDelivr, бесплатную CDN с открытым исходным кодом. Нужна система управления пакетами или исходники Bootstrap? Перейдите на страницу загрузки.
Чтобы узнать о следующих шагах, посетите раздел Система сеток или наши официальные примеры для создания контента и компонентов вашего сайта.
Важные глобальные атрибуты
Bootstrap включает некоторые глобальные стили и настройки, о которых вам необходимо знать при работе с ним; все эти стили и настройки почти полностью имеют дело с и «заточены» под нормализацию кроссбраузерных стилей.
Тип текущего документа
Bootstrap требует использования doctype HTML5. Без него у вас возникнут некоторые проблемы со стилями, но его включение не должно вызывать каких-либо серьезных сбоев.
Мета-теги для адаптивной вёрстки
Bootstrap разрабатывался как mobile first, т.е. его настройки прежде всего оптимизированы под мобильные устройства, а уж потом с помощью медиа-запросов мы подгоняем масштаб компонентов как нам необходимо на прочих устройствах. Вставьте этот кусок кода в :
Вы можете увидеть пример этого в действии в стартовом шаблоне.
Размер ширины и высоты элемента (Box-sizing)
В том редком случае, когда вам понадобится переопределить его, делайте так:
Узнайте больше о блоковой модели и параметризации размеров на CSS Tricks.
«Ребут» (новая библиотека CSS, не использующая классов, обеспечивающая «модульный подход»)
Для улучшенной кроссбраузерной визуализации мы используем «Ребут», обеспечивающий более продвинутые «сбросы стилей» для элементов HTML для коррекции мелких багов в браузерах и девайсах.
Сообщество
Оставайтесь в курсе последних новостей Bootstrap и вливайтесь в сообщество Bootstrap с помощью этих ресурсов:
Вы также можете присоединиться к @getbootstrap on Twitter, чтобы следить за последними слухами и потрясающими музыкальными клипами.
Знакомство с Bootstrap: установка и подходящие сценарии использования
Bootstrap — бесплатный HTML/CSS/JavaScript фреймворк для быстрого создания адаптивного дизайна сайта. У разработчиков к нему неоднозначное отношение. С одной стороны, Bootstrap позволяет с минимальными знаниями создавать интерфейсы, которые работают во всех популярных браузерах и не ломаются при изменении разрешения экрана. С другой стороны, фреймворк тащит в проект кучу ненужного кода, который увеличивает вес сборки.
Что нужно знать о Bootstrap перед началом работы
У меня отношение к Bootstrap нейтральное. Он отлично подходит для прототипирования. Если нужно быстро проверить какую-то гипотезу или показать пример заказчику, то сборка во фреймворке — оптимальный вариант. Если вы делаете индивидуальный дизайн, то проще верстать с нуля, а не пытаться перебрать все стили и скрипты в Bootstrap.
Какую версию Bootstrap выбрать?
В третьей версии Bootstrap сетка построена на Float. Это устаревшая технология, которая не дает такой гибкости, как Flexbox. Зато на флоатах можно верстать для старых браузеров, вплоть до Internet Explorer 6. Если вашему проекту нужна такая поддержка (вряд ли), то используйте Bootstrap 3.4.1.
В июне 2020 года появилась новость о выпуске Bootstrap 5 alpha. Когда из нее сделают стабильную версию — непонятно. Но есть несколько моментов, о которых нужно знать всем, кто работает или собирается работать с фреймворком.
Радует, что фреймворк развивается. Разработчики обещают, что в пятой версии будет более быстрый JavaScript, меньшее количество зависимостей, улучшенные API. Но пока она находится на стадии альфа-тестирования, мы будем пользоваться последней стабильной сборкой — Bootstrap 4.5.1.
Узнайте, что включено в Bootstrap, включая наши перекомпилированные данные и исходные коды. Помните, что для плагинов JavaScript Bootstrap’у требуется jQuery.
Предварительно компилированный Bootstrap
Строение скачанного архива BS4 будет таким:
Это базовая форма Bootstrap: перекомпилированные файлы для быстрого подключения в почти любой веб-проект. Доступны: компилированные файлы CSS и JS ( bootstrap.* ), как и компилированные «облегченные» файлы ( bootstrap.min.* ). Карты исходного кода CSS ( bootstrap.*.map ) доступны для использования лишь с определенными инструментами разработчика в браузере. Связанные JS-файлы ( bootstrap.bundle.js и минимизированный bootstrap.bundle.min.js ) включают Popper, но не jQuery.
Кодовые карты дают независимый от языка способ показа соответствия рабочего кода и исходных кодов (sources), написанных вами при разработке.
Файлы СSS
Bootstrap включает несколько параметров для подключения всех ваших компилированных CSS.
CSS файлы
Разметка
Содержание
Компоненты
Утилиты
Файлы JS
Аналогично имеются параметры для подключения всех или некоторых компилированных файлов JavaScript.
JS-файлы
Popper
jQuery
Исходный код Bootstrap
Загрузка исходного кода Bootstrap включает, наряду с исходниками Sass, CSS и JS, перекомпилированные механизмы публикации ресурсов CSS и JS.
Механизм публикации ресурсов (asset) полезен в следующих случаях:
Уважаемый читатель, эта статья является второй частью цикла статей, посвященных вёрстке.
В первой части мы верстали шаблон Corporate Blue от студии Pcklaboratory с помощью стандартных средств на чистом HTML и CSS. В данной статье мы попробуем сверстать этот же шаблон, но с помощью CSS фреймворка Bootstrap 3.
Преимущество использования CSS фреймворков заключается в том, что верстальщику не нужно думать о многих нюансах верстки, которые за него уже продумали создатели фреймворков. К таким нюансам относятся кроссбраузерность, поддержка различных разрешений экранов и многое другое. Верстальщик лишь указывает, что, как и когда нужно показать, остальное фреймворк делает сам. Данный подход может сильно ускорить вёрстку сайта. К преимуществам Bootstrap относится и его популярность. Это означает, что другому верстальщику будет проще поддерживать ваш код.
Недостатком использования фреймворков является тот факт, что странице придется целиком «нести» за собой лишние стили фреймворка, даже если она использует лишь их малую часть. Фреймворк является отличным инструментом для прототипирования и создания страниц, для которых дизайн вторичен, например страницы администрирования. Если же у вас есть очень специфический дизайн, то сверстать его с помощью фреймворка может оказаться сложнее, чем нативными средствами. Тем не менее, и это возможно.
Об использовании Bootstrap
В настоящее время есть несколько способов работы со стилями Bootstrap.
Без использования LESS
Для новичков сам Bootstrap рекомендует следующий подход: нужно скачать с сайта скомпилированный Bootstrap и положить его в свой проект, ничего не изменяя. Затем нужно создать свой пустой CSS файл и подключить его после bootstrap.css.
После этого, для того чтобы изменить стили Bootstrap вам нужно перебить их в своем styles.css примерно в таком виде:
Очевидным минусом данного подхода является то, что вам придется вручную искать нужные стили, которые требуется перебить и не всегда это будет тривиально, т.к. некоторые параметры Bootstrap применяются ко многим селекторам в изменённом виде, например через формулы. Небольшую помощь здесь может оказать инструмент Customize, он поможет скомпилировать правильно ваши изменения, но только один раз. Если в будущем вы захотите изменить какой-то параметр, то придется заново вбивать изменненные значения для всех полей, чтобы скомпилировать свои стили.
С использованием LESS
Существует большое количество способов скомпилировать LESS файлы и Bootstrap оставляет это на усмотрение разработчика. Сам Bootstrap использует для компиляции Grunt, вы можете предпочесть плагин для продуктов JetBrains, а мы, поскольку статья ориентирована на новичков, посмотрим в сторону более простых решений. Такими решениями являются программы WinLess для Windows, SimpLESS для Mac или Koala для Linux. Все эти программы делают примерно одно и то же: получают на вход папку с LESS файлами и слушают изменения в них. Как только вы вносите изменения в любой файл – тут же он компилируется в указанный CSS файл. Таким образом вам нет необходимости запускать компиляцию руками после каждого изменения. Вы изменяете LESS файл, сохраняете его и тут же видите изменения на сайте в уже скомпилированном, сжатом виде.
Создание проекта
Предварительный осмотр
Общие изображения
На данном этапе нужно нарезать и сохранить только общие изображения, которые будут на всех страницах сайта и не относятся к контенту. В нашем случае это будет светло-серый фон страницы, фон заголовка, изображение карты, два логотипа и кнопки социальных сетей.
Сохраняем изображение карты:
Сохраним логотипы следующим образом:
Повторяющиеся фоновые изображения необходимо вырезать минимальным кусочком достаточным для образования полного изображения повторением по вертикали и горизонтали.
Иконки социальных сетей с одинаковыми размерами удобно сохранить в один файл и использовать как спрайты для более быстрой загрузки. Более подробно про склейку изображений описано в первой части. В итоге получится два файла:
Компоненты
Основное отличие вёрстки с помощью Bootstrap от вёрстки нативными средствами заключается в том, что Bootstrap вводит такое понятие, как компоненты. Компоненты представляют из себя часто используемые готовые HTML блоки с предопределенными стилями. Иногда компоненты используют JavaScript. Верстальщик может использовать как готовый компонент, так и определить свой внешний вид для него. Для этого часто нужно лишь поменять значение переменных в Bootstrap. Если нужны более гибкие изменения, верстальщик всегда может изменить HTML и CSS по своему усмотрению.
Основные стили
В Bootstrap все стили по умолчанию уже заданы, нам нужно только их перебить, если они отличаются от нашего дизайна. Сделаем это в файле src/less/variables.css.
В первую очередь нужно добавить переменные, которых нет в настройках Bootstrap для того, чтобы можно было их использовать в дальнейшем. У нас это только специфический шрифт дизайна.
Если вы хотите использовать шаблон для русских сайтов, то шрифт Oswald можно попробовать заменить на наиболее близкий Cuprum, который поддерживает кириллицу.
А теперь заменим настройки Bootstrap на свои:
Все переменные, которые есть в Bootstrap можно посмотреть на странице http://getbootstrap.com/customize/
После того, как мы закончили с переменными, давайте начнем прописывать стили нашего дизайна в файле styles.less. Сначала подключим сам Bootstrap и наши переменные:
Не все стили, заданные Bootstrap по умолчанию можно изменить переменными, давайте сделаем это вручную:
Здесь мы убрали тень у элементов формы, а текстам в кнопках указали специфический шрифт страницы.
Затем опишем фон страницы и верхнюю полоску:
Далее в тексте не будет указываться в какой файл пишутся стили. Просто запомните, что все переменные мы сохраняем в файл variables.less, а CSS стили будем хранить в styles.less.
Каркас HTML
Вёрстку сайта начинаем традиционно с каркаса HTML. Вставляем в файл index.html код простейшего шаблона со страницы Getting started, предварительно убрав всё лишнее:
В этом блоке создается HTML5 структура документа. В title указываем название нашей страницы – Whitesquare. Метатегом viewport указываем, что ширина страницы на мобильных устройствах будет равна ширине экрана и начальный масштаб будет 100%. Затем подключается файл стилей. И для версий Internet Explorer меньше девятой подключаем скрипты, позволяющие правильно отображать нашу верстку.
Макет
В данном случае, мы видим, что сайт состоит из двух частей: основного контейнера с содержимым, который центрируется на экране и тянущегося футера. Основной контейнер состоит из двух колонок: основного контента и сайдбара. Над ними находится шапка (header), навигация (nav) и название страницы (.heading).
Давайте добавим в body следующий код:
Здесь нам встречается первый компонент Bootstrap – колонки. Родительскому элементу колонок задается класс «row», а классы колонок начинаются с префикса «col-», затем идет размер экрана (xs, sm, md, lg), а заканчиваются относительной шириной колонки.
Колонке можно задавать одновременно различные классы со значениями для экранов, например col-md-8». Эти классы просто задают ширину колонке в процентах для определенного размера экрана. Если колонке не задан класс определенного экрана, то применится класс для минимально определенного экрана, а если и он не указан – то никакая ширина не применится и блок займет максимально возможную ширину.
У нас классы «col-md-7» и «col-md-17» указывают, что блоки представляют из себя колонки шириной 7 и 17 относительно родительского контейнера. По умолчанию сумма ширин колонок в Bootstrap равняется 12, однако мы увеличили это число вдвое для достижения нужной нам гибкости.
Далее опишем нужные нам отступы:
Данную конструкцию мы поместили внутрь body. Синтаксис LESS позволяет вкладывать правила друг в друга, которые потом скомпилируются в такие конструкции:
Такой подход позволяет видеть структуру HTML прямо внутри CSS и дает некую «область видимости» правилам.
Логотип
Вставляем логотип в тег header:
Дополнительных стилей не требуется.
Поиск
Для того чтобы создать поиск, нам понадобятся следующие компоненты Bootstrap: инлайновая форма, сгруппированные контролы и кнопка. В теге header создаем инлайновую форму, выровненную по правому краю. Поля такой формы обязательно должны иметь класс «form-control» и label.
В форму мы помещаем компонент «сгруппированные контролы». Группировка контролов позволяет убрать отступ между вводом текста и кнопкой и как бы слить их в единый элемент. Он представляет из себя div с классом «input-group» и полями, а кнопка такого компонента помещается в блок с классом «input-group-btn».
Поскольку нам не нужно показывать label для поля поиска — скроем его классом «sr-only». Это нужно для специальных устройств чтения с экрана.
Кнопке добавляется класс «btn-primary», означающий, что это первичная кнопка данной формы.
Всё, что нам осталось — это задать в стилях ширину форме поиска.
Для отображения меню возьмем компонент «навигационная панель» и поместим в него компонент «навигация», которая представляет из себя список со ссылками. Для навигации добавляется класс «navbar-nav», который применяет специальные стили навигации внутри навигационной панели.
Для того, чтобы привести это меню к нашему дизайну зададим следующие значения переменным:
Помимо настраиваемых параметров, опишем дополнительные в стилях – это текст в верхнем регистре и наш специфический шрифт:
Заголовок страницы
Заголовок страницы помещается в div с классом «heading».
И имеет следующие стили:
Здесь мы рисуем серую полоску фоном на div’e, и в нее вкладываем инлайновый h1 с нужным шрифтом и фоном цвета страницы, чтобы создалось впечатление прозрачного фона для h1.
Подменю
При создании подменю, мы не будем использовать компонент «навигация», так как по стилям он нам не очень подходит, гораздо больше нам подойдет компонент «группированный список». Каждый элемент такого компонента имеет класс «list-group-item».
Подменю нужно разместить в теге aside. Список ссылок создаем аналогично главному меню.
В настройках компонента укажем, что все группированные списки нужно показывать с фоном и рамкой компонента «панель»:
И применяем к подменю следующие стили:
Сначала возвращаем элементам списка стандартные стили, так как Bootstrap их перебил на свои. Добавляем отступ снизу. Для подменю применяется более тонкий шрифт и квадратные маркеры. А для ссылок задаем цвета, верхний регистр и убираем подчеркивание. Амперсанд в коде «&.active» по синтаксису LESS во время компиляции заменится на родительский селектор: «.submenu li.active».
Контент сайдбара
В контенте сайдбара помимо подменю располагается также изображение с расположением офисов.
Для его отображения нам подойдет компонент «панель», а точнее его вариация «основная панель» (panel-primary) для раскраски заголовка. Этот компонент содержит блок заголовка (panel-heading) и блок содержания панели (panel-body). Изображению карты добавляем класс «img-responsive», который позволит картинке уменьшаться при маленькой ширине экрана.
В переменных Bootstrap мы уже задали цвет для фона панели (panel-bg), а теперь укажем, что «primary» панель будет иметь серую рамку дефолтной панели, а не голубую, как задано по умолчанию:
Теперь в стилях сайта нужно изменить стандартные настройки панелей, которые не изменяются через переменные:
Здесь мы убрали тень у панелей, поставили свои отступы и задали свой шрифт заголовка.
Цитата
Вёрстку контента начнём с добавления цитаты.
Этот элемент страницы больше всего похож на компонент Jumbotron. Добавим его в колонку контента:
Через переменные для компонента jumbotron зададим белый цвет текста и брэндовый голубой фон:
И опишем наши стили:
В них мы убираем скругление углов, отступы компонента и декорации цитаты, заданные Bootstrap по умолчанию. Также добавим стили наших шрифтов.
Контент
Все стили для текста контента мы уже добавили. Поэтому остается добавить только три параграфа с самим текстом.
Следующим шагом нужно добавить два изображения, которые находятся в конце текста контента. Делается это с помощью двух колонок:
Класс «thumbnail» превращает изображения в компонент «миниатюра». Он сделает за нас всю работу по стилизации изображений. Единственное, что нам осталось — это установить свой отступ и цвет рамки в переменных для этого компонента:
Блок «Our team»
При верстке этого блока добавим сначала заголовок:
А затем добавим блок с классом «team», который состоит из двух строк, содержащих карточки сотрудников. Каждая карточка – это колонка. Карточка имеет ширину равную четырем колонкам нашей сетки. Все карточки кроме первой в строке имеют отступ слева, который создается классом «col-md-offset-1». Содержимое карточки состоит из изображения и описания (.caption)
После создания разметки зададим этим элементам следующие стили:
Помимо отступов и стилей шрифтов, которые тут задаются, мы изменили класс «col-md-offset-1». Ему пришлось задать отступ 3.7%, т.к. стандартный отступ был слишком большой.
Футер
Футер состоит из четырёх больших блоков: ленты Твиттера, карты сайта, социальных ссылок и логотипа с копирайтом.
Для начала создадим контейнер футера с этим блоками:
И применим к нему оформление:
Тег footer задает серую область по всей ширине экрана, а контейнер внутри него отображает область по центру на больших экранах и задает высоту и отступ футера. Для выравнивания блоков внутри футера мы используем колонки.
Лента Твиттера
Верстаем содержимое ленты Твиттера:
Для всех заголовков футера задаем шрифты и отступы, а также делаем подчеркивание через нижнюю рамку. Для параграфов указываем отступ. Ссылке, отображающую дату, задаем цвет и подчеркивание.
Карта сайта
Карта сайта представляет собой две равные колонки со ссылками:
Ссылкам задаем цвет, шрифт и отступ между ними.
Социальные ссылки
Вставляем набор ссылок в блок с классом «social».
Здесь мы применили технику спрайтов – когда один файл с изображением применяется для разных картинок. Все ссылки разделились на большие иконки (.social-icon) и маленькие (.social-icon-small). Мы задали этим классам отображение в виде инлайнового блока с фиксированными размерами и одинаковым фоном. А затем с помощью CSS сдвинули этот фон так, чтобы на каждой ссылке отобразилось соответствующее изображение.
Копирайт
Блок с копирайтом и логотипом – это картинка со ссылкой и параграф с текстом под ней.
Стили делают аналогично предыдущим блокам с той лишь разницей, что блок прибивается к правому краю и выравнивание внутри него так же по правому краю:
На этом вёрстка закончена. Готовый проект можно скачать здесь.
Начните работу с Bootstrap, самым популярным в мире фреймворком для создания быстродействующих мобильных сайтов с BootstrapCDN и шаблонами стартовой страницы.
Быстрый старт
Хотите использовать Бутстрап в своем проекте? Bootstrap – библиотека шаблонов CSS, распространяемая свободно командой сайта MaxCDN. Нужна система управления пакетами или исходники Bootstrap? Посетите страницу загрузок.
Поместите дин из следующих тегов
Отдельно
Если вы решите использовать отдельное решение для сценариев, сначала должен быть Popper.js, а затем наши плагины JavaScript.
Компоненты
Любопытно, какие компоненты явно требуют jQuery, наших JS и Popper.js? Нажмите ссылку «Показать компоненты» ниже. Если вы не уверены в том, как правильно написать «коренную» структуру страницы, можете использовать наши шаблоны.
Начальный шаблон страницы
Удостоверьтесь, что ваши страницы сверстаны по новейшим стандартам. Они должны включать и использовать HTML5 doctype и viewport meta tag для правильного «отзывчивого» поведения страниц. Вот как должен выглядеть «верхний», коренной код страницы:
Это все, что вам нужно из общих требований к странице. Посетите Обзорный раздел или наши официальные примеры для создания контента и компонентов вашего сайта.
Важные глобальные атрибуты
Бутстрап включает некоторые глобальные стили и настройки, о которых вам необходимо знать при работе с ним; все эти стили и настройки почти полностью имеют дело с и «заточены» под нормализацию кроссбраузерных стилей.
HTML5 doctype
Bootstrap требует использования doctype «HTML5». Без него у вас возникнут некоторые проблемы со стилями.
«Отзывчивый» мета-тэг
Bootstrap разрабатывался как mobile first, т.е. его настройки прежде всего оптимизированы под мобильные устройства, а уж потом с помощью медиа-запросов мы подгоняем масштаб компонентов как нам необходимо на прочих устройствах. Вставьте этот кусок кода в :
Вы можете посмотреть пример этого в действии на странице starter template.
Размер ширины и высоты элемента
В том редком случае, когда вам надо преодолеть эти возможные баги, делайте так:
Узнайте больше о блоковой модели и параметризации размеров на CSS Tricks.
«Ребут» (новая библиотека CSS, не использующая классов, обеспечивающая «модульный подход»)
Для улучшенной кроссбраузерной визуализации мы применили «Ребут», обеспечивающий более продвинутые «сбросы стилей» для элементов HTML для коррекции мелких багов в браузерах и девайсах.
Сообщество
Оставайтесь в курсе последних новостей Bootstrap и вливайтесь в сообщество Bootstrap с помощью этих ресурсов:
Вы также можете присоединиться @getbootstrap on Twitter для получения «свежайших» слухов и классных музыкальных клипов.
