Bootstrap — простая адаптивная верстка для новичков

У Верстальщиков и фронтендеров, есть блоки кода, которые используют в каждом проекте и поэтому часто задумываются о создании собственного фреймворка. Но обычно начинают пользоваться уже существующими, например bootstrap.

Что такое bootstrap

Это фреймворк из трёх языков HTML/CSS/JS. Благодаря большому функционалу верстать сайты становится легко и быстро, ну конечно если во всем разобраться.

Появился в стенах компании Twitter и назывался «Twitter Bootstrap». Но из-за того что его захотели сделать всемирным пришлось отказаться от слова Twitter в названии. По моему личному опыту в bootstrap есть ряд плюсов:

Быстрость верстки — большое количество готовых компонентов даёт возможность не останавливаться на обыденностях.

Адаптивность — возможность настраивать размеры блоков сайта в зависимости от ширины устройства, как для компьютера так и для телефона.

Популярность — из-за которой существует большое количество статей и уроков, а также форумов. Поэтому по любому пустяку, в котором вы сомневаетесь можете найти ответ на просторах интернета или задать вопрос на форуме.

Bootstrap можно использовать для создания сайтов с различными CMS — WordPress, Joomla, Opencart.

Как установить bootstrap

Есть два способа его подключения:

• Через скачивание файлов .

Формы

Также мы имеем стили для оформления:

• кнопок
• радиокнопок
• текстовых полей
• чекбоксов

При этом ещё можно указать горизонтальное или вертикальное положение элементов и названий, также изменять цвет формы тем самым уведомляя пользователя на возникновении ошибки или предупреждения.

Таблицы

Для создания такой простенькой таблицы нужно добавить к ней class = "table" .

Когда мы подробнее рассмотрим, как оформлять таблицы, то вы сможете:

Чередовать цвета колонок

Подсвечивать колонки при наведении

А также делать таблицы которые настраиваются в зависимости от расширения

Кнопки

Для создания красивой кнопки понадобится добавить только два класса. Кстати второй отвечает за цвет кнопки, так что можно сделать класс с вашим цветом и подключить его вместо стандартного.

А вот их конструкция.

Кнопка Обычная Отлично Инфо Обратите внимание Тревога Ссылка

JavaScript элементы

Bootstrap имеет множество фишек связанных с анимацией:

• Сворачивание и разворачивание окон
• Появление модальных окон
• Всплывающие подсказки
• Создания табов
• Слайдер

Все это будет у вас в руках при подключении одного файла bootstrap.js

Вывод

А если вы дошли до этого место, то у вас может возникнуть вопрос: «Нужно ли знать все компоненты bootstrap ?». Все зависит от ваших желаний, обычно пользуются только сеткой, но каждый верстальщик должен уметь пользоваться всем. Лично мне он нравится, простой, быстрый, удобный.

Переходите на следующий урок, если готовы быстро верстать сайты.

На этом уроке узнаем, как скачать и подключить фреймворк Bootstrap (версию 3 или 4) к сайту.

Набор инструментов для изучения Bootstrap

Минимальный набор инструментов (программ) для создания веб-проектов на фреймворке Bootstrap:

• текстовый редактор для работы с кодом ("Блокнот", "Brackets", "Notepad++" или др.);
• браузер (Google Chrome, Mozilla Firefox, Opera, Safari, Internet Explorer или др.).

Загрузка фреймворка Bootstrap

Создание веб-проекта, в основу дизайна которого положен фреймворк Bootstrap всегда начинают с его загрузки. Загрузить фреймворк Bootstrap можно различными способами . Например, посредством ссылки, расположенной на сайте getbootstrap.com или с помощью пакетного менеджера npm, Composer, Bower или др. Способ как это осуществить зависит от вашего опыта или конкретной ситуации .

Как установить фреймворк Bootstrap с помощью пакетных менеджеров, а также как осуществить его сборку посредством Grunt, можно почитать в этой статье .

Наиболее просто выполнить загрузку – это воспользоваться ссылкой . На сайте Bootstrap присутствуют 2 ссылки.

Первая ссылка содержит готовые к использованию файлы CSS и JavaScript . Эту сборку в основном используют для изучения фреймворка или для использования в проектах, дизайн которых может быть выполнен в стилях заложенных авторами по умолчанию.

Скачать Bootstrap 3.4.0 Скачать Bootstrap 4.2.1

Вторая ссылка содержит фреймворк в исходных кодах . Эта версия более удобна для разработки сайтов, т.к. позволяет очень просто изменить стили, цветовую гамму компонентов, выполнить их настройку и др. Но эти исходные файлы, перед тем как использовать на странице, нужно будет скомпилировать и минимизировать. Данный процесс обычно автоматизируют, например, с помощью Gulp.

Исходные коды Bootstrap 3.4.0 Исходные коды Bootstrap 4.2.1 Распаковка архива Bootstrap

После скачивания архива (с готовыми к применению CSS и JavaScript файлами), его необходимо распаковать в каталог вашего веб-проекта.

Если рассмотреть архив, то можно заметить, что он имеет следующее содержимое (на примере Bootstrap 3.4.0):

Bootstrap/ ├── css/ │ ├── bootstrap.css │ ├── bootstrap.min.css │ ├── bootstrap-theme.css │ └── bootstrap-theme.min.css ├── js/ │ ├── bootstrap.js │ └── bootstrap.min.js └── fonts/ ├── glyphicons-halflings-regular.eot ├── glyphicons-halflings-regular.svg ├── glyphicons-halflings-regular.ttf └── glyphicons-halflings-regular.woff

В каталоге css находятся стили фреймворка Bootstrap, а в js - плагины для обеспечения работы некоторых компонентов. Плагины написаны с использованием функций библиотеки jQuery. Поэтому перед Bootstrap JS необходимо подключить библиотеку jQuery.

Как вы можете заметить, в архиве есть 2 версии CSS и JavaScript файлов, т.е. с суффиксом min и без него. Версия файла с min ничем ни отличается от без min , она просто минимизирована (сжата).

В продакшене (на рабочем сайте) лучше использовать минимизированные версии файлов. Эти файлы имеют меньший размер, и, следовательно, обеспечивают более быструю загрузку страниц сайта.

Не минимизированные версии более удобно использовать при разработке, а также для изучения.

Кроме этих файлов, в данный архив ещё входит иконочный шрифт "Glyphicons" . Шрифт "Glyphicons" насчитывает более 250 иконок из набора "Glyphicon Halflings". Шрифт представлен с помощью 4 файлов: glyphicons-halflings-regular.eot , glyphicons-halflings-regular.svg , glyphicons-halflings-regular.ttf , glyphicons-halflings-regular.woff).

Такое разнообразие форматов одного и того же шрифта необходимо для того чтобы обеспечить его отображение во всех браузерах.

Про иконки в формате шрифта, а также, про то какие они имеют достоинства и недостатки, можно почитать в этой статье .

Архив фреймворка Bootstrap 4 практически ничем ни отличается от Bootstrap 3 . Основное его отличие в том, что он не содержит шрифт "Glyphicons" . Если вам нужны шрифтовые иконки, то их необходимо будет подключить самостоятельно. Например, воспользовавшись одним из следующих наборов: FontAwesome , Octicons, Glyphicons, IcoMoon или др. Если же вы не хотите использовать готовый шрифт, а создать свой, который будет состоять только из нужных значков, то воспользуйтесь этой информацией .

Кроме этого архив Bootstrap 4 содержит ещё файлы bootstrap-grid.css и bootstrap-reboot.css . Данные файлы необходимы только тем, кому нужен не целый фреймворк, а только его часть .

Первый файл (bootstrap-grid.css) содержит сетку Bootstrap , а второй (bootstrap-reboot.css) - нормализатор, который устанавливает базовые стили, для того чтобы они у всех HTML-элементов во всех браузерах были одинаковыми.

Подключение Bootstrap к HTML странице

Процесс установки фреймворка Bootstrap 3 состоит из подключения следующих файлов к HTML 5 странице:

Bootstrap CSS (bootstrap.min.css);

Последней версии библиотеки jQuery (необходима для работы JS плагинов Bootstrap);

Bootstrap JavaScript (bootstrap.min.js).

Примечание: Файлы JavaScript лучше подключать перед закрывающим тегом body (), так как это обеспечит более быструю загрузку и отображение основного контента веб-страницы.

...

Подключение фреймворка Bootstrap 4 осуществляется так:

...

Подключить Bootstrap 4 можно также с помощью CDN (при этом скачивать Bootstrap в проект не нужно):

Скопировано

...

CDN Bootstrap 3.4.0:

Скопировано

Для проверки работоспособности фреймворка, создадим кнопку, при поднесении к которой будет показываться всплывающая подсказка popover.

Поднеси ко мне курсор $(function () { $("").popover({trigger:"hover"}); });

В третьем уроке немного теории о построении шаблона и сетке Bootstrap.
Bootstrap видит шаблон сайта следующим образом

В построение шаблона с помощью Bootstrap используются три уровня вложенности

• Первый уровень это container — область в которой размещаются все блоки сайта.(Красная рама)
• Второй уровень это row — область в которую помещаются блоки для материала
• Третий уровень для разных устройств он разный. Это уже сам материал.

В целом Bootstrap чем-то схож с обычной таблицей. Есть общий каркас далее идут строки и ячейки. Если проводить аналогию с html-таблицей, то роль контейнера выполняет тег

, роль row отводится тегу и последний уровень это сама ячейка с материалом ).

Сетка Bootstrap

Сетка Bootstrap по-умолчанию состоит из 12 ячеек имеющих одинаковую ширину и в зависимости от разрешения экрана ширина ячеек может меняться. У ячеек Bootstrap есть интересная способность, которой вы можете воспользоваться это адаптация ячеек под ширину экрана.

Bootstrap 101 Template Hello, world! This is Photoshop"s version This is Photoshop"s version This is Photoshop"s version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh This is Photoshop"s version This is Photoshop"s version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh This is Photoshop"s version This is Photoshop"s version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh

Скачайте пример запустите файл index.html и потихоньку начинайте изменять размер браузера. Вы увидите три состояния которые прописаны в шаблоне.

В примере используется следующая конструкция

Hello, world! This is Photoshop"s version This is Photoshop"s version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh ....

col-sm -это класс для маленьких устройств (ниже будет приведена таблица ).

col-md предназначена для устройств с шириною 970px и выше. col-md имеет следующую структуру.
col-md -[дальше идет цифра, которая обозначает количество занимаемых ячеек всего их по умолчанию 12 ] я задал 3 поэтому изначально шаблон поделен на 4 столбца. Если задать 4-м div-ам значение col-md-6, то мы получим страницу в два столбца. Соотношение ячеек должно давать в сумме — 12. Попробуйте задать значение 8:4. Тогда в результате получите первую ячейку по ширине превышающую вторую в два раза.

В Bootstrap есть таблица для групп устройств, если вы хотите видоизменить отображения материала к примеру для телефонов вы можете просто прописать стили.

. С первым уровнем мы уже познакомились. Второй уровень вложенности выполняет функцию контейнера, но уже применительно к информационным блокам (аналогично тегу

Очень маленьких устройств
Телефоны( ... div >). В сумме выходит 12 (3+3+3+3).

Адаптивная верстка под гаджеты

Я до этого писал, что Twitter Bootstrap 3 знаменит своими сетками, которые подходят под различные пользовательские устройства, будь то телефон, планшет, монитор вашего домашнего/рабочего компьютера). И как раз пришло время до конца разобраться с этим.

В примере выше после слова col я ставил звездочку. И как раз вместо звездочки нужно указывать для какого устройска будет применяться заданный блок:

• – col-xs-* – применяется для создание сетки с маленькими экранами. Под это определение подходят телефоны;
• – col-sm-* – для устройств чуть большей ширины экрана, чем у телефона, например планшет;
• – col-md-* – средних размеры экранов, т.е. нетбуки;
• – col-lg-* – для больших экранов. Если верить яндекс.метрике , то на данный момент количество пользователей именно сидят на сайтах под этими экранами. Но этот показатель очень сильно зависит от тематики сайта.

В таблицы ниже приведены данные относительно этих классов: Вид системы сеток Twitter Bootstrap 3 Крошка-экран
Смартфоны
(Небольшой экран
Планшеты
(≥768px и Средний экран
Ноутбуки
(≥992px и Большой экран
Компьютеры
(≥1200px)

Фиксированный макет (class ="container" )	Соответствует 100% ширине веб-клиента	750px	970px	1170px
Резиновый макет (class ="container-fluid" )	Соответствует 100% ширине экрана веб-клиента
Префикс класса	class ="col-xs-*"	class ="col-sm-*"	class ="col-md-*"	class ="col-lg-*"
Максимальная ширина колонки Bootstrap для фиксированного макет (class ="container" )		62px (750px / 12)	81px (970px / 12)	97px (1170px / 12)
Максимальная ширина колонки для резинового макета (class ="container-fluid" )	Ширина веб клиента делится на 12
Внутренние отступы	15px по краям

Но будьте тут внимательнее! Например, если вы используете класс class ="col-sm-*" , то он будет применяться не только к планшетам, но и к нетбукам и большим экранам, но это дейтсвует в том случае, если вы не указали "col-md-*" и "col-lg-*" . Т.е. если у вашем ряду будет один блок для всех экранов, то достаточно написать div class ="col-xs-12" > ... div >, а не div class ="col-xs-12 col-sm-12 col-md-12 col-lg-12" > ... div >.

Пример адаптивной верстки на Twitter Bootstrap 3

В теории – вроде как все понятно, и одновременно ни чего не понятно. Чтобы хоть как-то разобраться и закрепить все эти блоки, ряды и понять смысл всей этой сетки рассмотрю небольшой кусок кода, при помощи которого все встанет на свои места.

Я не дизайнер, да и в этом уроке ни чего не нужно выдумывать супер красивого. Для общего представления будет достаточно и схемаческих изображений.

В качестве примера я сверстаю макет, состоящий из трех блоков, которые расположены в одном ряду, но по-разному будут отображаться на пользовательских устройствах. На рисунке ниже как раз все это показано. И, кстати, когда будете заказывать разработку макета , то заранее нужно говорить дизайнеру, что верстка будет делаться под фреймворк Twitter Bootstrap 3, т.к. дизайнер сразу будет изображать элементы в соответствии с сеткой.

Большая ширина экрана

Стили, применяемые к макету, будут подключаться, когда активная область окна браузера (ширина) больше и равна 1200px. Из картинки видно, что контейнеры занимают все пространство ряда и делят его на три равные части. Выходит, 12 блоков нужно разделить на 3 контейнера (т.к. они все одинаковые), получаем, что в одном таком контейнере 4 блока.

Итог для большой ширины экрана:

Контейнер №1

  

Контейнер №2

  

Контейнер №3

  Средняя ширина экрана

Стили, применяемые к макету, будут подключаться, когда активная область окна браузера (ширина) больше или равна 992px и меньше 1200px. Два контейнера расположены горизонтально и занимают ширину в 100% (каждый контейнер занимает 6 блоков), и один расположен с новой строки и также занимает 100% ширины (контейнер №12 занимает 12 блоков). Чтобы четко объяснить браузеру, что контейнер нужно разместить без обтекания к других контейнерам в twitter bootstrap предусмотрен css-класс class ="clearfix" . Но, еще один момент, т.к. этот класс должен распространяться на этот вид экранов нужно добавить еще один класс - class ="visible-md-block" (md – это название экрана, аналогично с классами для блока).

Итог для средней ширины экрана (будьте внимательны , я буду добавлять в уже написанный код новые классы и элементы):

Контейнер №1

  

Контейнер №2

     

Контейнер №3

  Маленькая ширина экрана и «крошка-экран» По этому же принципу нужно добавить классы и для оставшихся экранов. Не буду расписывать одно и тоже, просто приведу общий итог:

Контейнер №1

     

Контейнер №2

     

Контейнер №3

 

Для «крошка-экран» можно опустить css-класс class ="col-xs-12" , т.к. он занимает 100% ширины экрана автоматически и чтобы не загромождать код лишними символами можно их удалить.

Конечный код для этого шаблона будет выглядеть:

Контейнер №1

     

Контейнер №2

     

Контейнер №3

  Разные элементы на разных экранах До этого я использовал класс class ="visible-md-block" – который отображается на средний экранах. Более подробно о класс "visible" : Название класса Описание

class ="visible-xs-*"	Этот класс добавляет видимости на «крошка-экран», ширина которого меньше 768px. Если экран больше – элемент не будет виден.
class ="visible-sm-*"	Этот класс добавляет видимости только на гаджетах, которые имеют ширину экрана больше или равную 768px (т.е. ≥768px), но меньше 992px. Если под эти характеристики не подходит экран, то элемент не будет отображаться.
class ="visible-md-*"	Этот класс добавляет видимости только на гаджетах, которые имеют ширину экрана больше или равную 992px (т.е. ≥992px), но меньше 1200px. Если под эти характеристики не подходит экран, то элемент не будет отображаться.
class ="visible-lg-*"	Этот класс добавляет видимости только на гаджетах, которые имеют ширину экрана больше или равную 1200px (т.е. ≥1200px). Если под эти характеристики не подходит экран, то элемент не будет отображаться.
class ="visible-*-inline"	display :inline
class ="visible-*-block"	Часть макета приобретает css-свойство display :block
class ="visible-*-inline-block"	Часть макета приобретает css-свойство display :inline-block

Для того, чтобы скрывать элементы предназначен класс class ="hidden"

Название класса Описание

class ="hidden-xs"	Этот класс добавляет скрытность элементу только на гаджетах, которые имеют ширину экрана меньше 768px. На других экранах части макета будут видны.
class ="hidden-sm"	Этот класс добавляет скрытность элементу только на гаджетах, которые имеют ширину экрана больше или равную 768px (т.е. ≥768px), и меньше 992px. На других экранах части макета будут видны.
class ="hidden-md"	Этот класс добавляет скрытность элементу только на гаджетах, которые имеют ширину экрана больше или равную 992px (т.е. ≥992px), и меньше 1200px. На других экранах части макета будут видны.
class ="hidden-lg"	Этот класс добавляет скрытность элементу только на гаджетах, которые имеют ширину экрана больше или равную 1200px (т.е. ≥1200px). На других экранах части макета будут видны.

Так же можно одновременно применять к одному элементу несколько классов, например:

Этот элемент не будет отображаться на средних и больших пользовательских экранах

Разработчики Twitter Bootstrap 3 не забыли и про печать документов/веб-страниц и добавили несколько классов как раз предназначенных для этих целей:

Еще один пример Если у вас в одном ряде должен находиться элемент шириной в 6 блоков и по центру, то вам нужно указать смещение на 3 блока:

   ...   

     ...