Урок 8. Знакомство с Bootstrap

И последний пост из серии "знакомство с Bootstrap". Загляните обязательно в первые два, если вы их пропустили. А сегодня расскажу про еще об одном инструменте волшебного набора фронтенд-разработчика Bootstrap.

Основные инструменты Bootstrap (продолжение №2)

Навигация

Ну вот, опять! Так и хочется, написать что-то, вроде "Это просто бомба!" 💣😂

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

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

Код стандартной самой простой навигационной панели будет выглядеть примерно так:
<nav class="navbar navbar-default"> <div class="container-fluid" > <div class= "navbar-header" > <a class= "navbar-brand" href="#" > <img alt="Brand" src="..." > </a> </div> </div> </nav>
Менять внешний вид навигационной панели можно всего лишь добавлением или изменением класса.

Подробнее мы к этому вернемся в следующих уроках.

Давайте закрепим материал по Bootstrap

Bootstrap - это способ сделать классно отображающийся на любом устройстве вебсайт. Когда вы делаете свой сайт, вы делаете, наверное, его на компьютере. Смотрите и всё выглядит отлично, но стоит открыть его на мобильном устройстве, к примеру, и вы понимаете, что что-то не так. Bootstrap позволяет избавиться от этой головной боли, именно поэтому этот набор фронтенд-разработчика сейчас настолько популярен.

Bootstrap - это не единственный подобный набор. Есть ещё, например, тоже популярные Foundation и Skeleton. Я обязательно как-нибудь сделаю сравнение основных наборов. Но учиться мы будем пока Bootstrap.

Если вы делали домашние задания предыдущих двух уроков, то вы должны были уже не раз побывать на сайт getbootstrap.com, где можно найти несколько вариантов демо-сайтов, сделанных с помощью Bootstrap. Это не реклама этого сайта, просто без него никуда.

Для того, чтобы использовать Bootstrap, необходимо включить некоторые файлы в ваш проект. Это можно сделать разными способами: просто скачать файлы прям с сайта, добавить их в директорию своего проекта и подключить, сделать это с помощью Bower (если90 вы знаете, как это делать в консоли, то это довольно просто) и подключить или просто подключить с помощью CDN (content delivery network, то есть “сеть доставки контента”).

Я советую последний вариант, актуальные ссылки всегда есть на getbootstrap.com/getting-started.

Содержимое вашей страницы лучше помещать в .container:

˂div class="container"˃˂/div˃

Контейнеры бывают двух типов. Какой выбрать? Зависит от того, хотите вы, чтобы ваш сайт был с фиксированной шириной, или резиновым (.container-fluid).

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

.col-...-2, где вместо ... стоит идентификатор размера экрана: xs - extra small - мобильные телефоны, sm - small - планшеты, md - medium - десктопы и lg - large - тоже десктопы, но с большим разрешением.

..., другой - 10 (.col-...-10. Если вы к этим двум элементам, в сумме добавите еще один, занимающий 6 столбцов (.col-...-6), он отобразится на следующей строке.

Подключая Bootstrap, мы получаем набор красивых украшений для текста в виде, например цитат ˂blockquote˃, заголовков ˂h1˃, ..., ˂h6˃, обычные параграфы с классами .text-danger, .bg-success.text-success и т.д.

С Bootstrap можно создавать красивыми даже самые простые таблицы. Просто добавьте стандартному тегу ˂table˃ класс .table.

Прикольные полезные штуки, вроде .alert помогут вам оформить необходимый материал и оповестить пользователя о чем-то. .alertы могут быть разными: .alert-success - секция с обводкой и зеленым фоном, .alert-info - с синим, .alert-danger - с красным фоном.