Урок 6. Знакомство с Bootstrap. Часть 1
Один из самых популярных наборов инструментов для создания веб-страниц - Bootstrap. Это набор шаблонов HTML и CSS для оформления навигационной панели, кнопок, форм и других элементов.
Подключение Bootstrap
Для того, чтобы использовать наборы Bootstrap, необходимо их подключить. Это делается точно так же, как и обычные css- и js-файлы.
˂link rel="stylesheet" href=".../bootstrap.css"˃˂script src=".../bootstrap.js"˃˂/script˃
Необязательно добавлять файлы bootstrap к себе в проект, достаточно указать ссылки. На самую последнюю версию всегда можно найти ссылку здесь.
Старайтесь подключать скрипты в конце вашего кода, потому что это влияет на скорость загрузки сайтов. То есть если подключать их в "голове" (˂head˃), то браузер должен будет сначала подгружать эти файлы. Гораздо быстрее сайт загрузиться, если подключать скрипты перед закрытием "тела" (˂body˃).
Основные инструменты Bootstrap
Сетки - это сплошное преимущество Bootstrap. По умолчанию сетка состоит из 12 колонок с заранее заданной шириной. Вы можете очень просто с помощью сетки регулировать размеры ваших элементов на странице. Также это позволит делать сайт сразу адаптивным, таким, чтобы он везде, в любом браузере, на любом устройстве отображался красиво.
Для того, чтобы задать ширину для элемента, используются классы. Например, я хочу чтобы у меня в строку были расположены три элемента. Причем, один занимал половину экрана, а другие два были одинаковой ширины и вместе занимали вторую часть экрана, когда я открываю сайт на компьютере, с большим разрешением экрана, и чтобы, когда я открывала на телефоне - каждый элемент был на всю ширину - один в ряду. Для этого я задаю следующие классы:
˂div class="row"˃
˂div id="element1" class="col-lg-6" ˃˂/div˃
˂div id="element2" class="col-lg-3"˃˂/div˃
˂div id="element3" class="col-lg-3"˃˂/div˃
˂/div˃С помощью тега
˂div˃можно выделять раздел или секцию в документе. Таким образом, здесь мы выделили некую строку.row, в которой расположены три элемента:#element1, который в большом разрешении (.col-LG-6) займет 6 колонок из стандартных 12, т.е. половину,#element2и#element3, которые в большом разрешении займут по 3 колонки (.col-LG-3).Устройства / признаки Очень маленькие Телефоны (<768px)
Маленькие Планшеты (≥768px)
Средние (≥992px)
Большие (≥1200px)
Максимальная ширина контейнера Нет (auto) 750px 970px 1170px Префикс класса .col-xs- .col-sm- .col-md- .col-lg- Максимальная ширина колонки Auto ~62px ~81px ~97px Шаблоны. Есть два вида шаблонов документа: фиксированный и резиновый. Фиксированный (задается классом
˂div class="container"˃) - самый основной и простой макет с шириной в 940px и отцентрованным содержимым. А резиновый (˂div class="container-fluid"˃) - это шаблон с плавающей структурой документа, который будет занимать 100% ширины окна браузера и подстраиваться под его изменения.
Типографика. В описании стилей элементов Bootstrap уже заложены шрифты, цвета, размеры и т.д. для большинства случаев: цитат, заголовков, параграфов... Например, по умолчанию к элементу
˂body˃применяются правила о том, чтоfont-sizeравен 14px, аline-heightсоставляет 20px.Это была только первая часть. В следующий раз я расскажу о еще нескольких иструментах Bootstrap. Даю вам "домашнее задание": загляните на этот сайт, поизучайте, что там есть, подключите к своему сайту (или тому, что мы начали делать в первых занятиях) css- и js-файлы bootstrap и jquery последней версии. Добавьте все содержимое вашего сайта в контейнер:
˂div class="container"˃(не забудьте в конце поставить закрывающий тег˂/div˃). Посмотрите, как изменится ваш сайт. Ну и, конечно, поэкспериментируйте!Если у вас после этого урока остались какие-то вопросы, смело задавайте их в комментариях или в личных сообщениях в Telegram, я обязательно на все отвечу!
