Понимание Bootstrap: как это работает и что нового

Приветствую всех, друзья!

Сегодня я бы хотел поговорить немного о CSS. А именно о новом CSS-фреймворке Bootstrap 4. Он официально вышел не давно, и я думаю что вам будет интересно узнать, что же нового туда засунули разработчики. Beta-версия уже давно доступна для скачивания, но полная версия вышла не так давно.

Так что я заполняю этот пробел и расскажу о нововведениях в Bootstrap.

Версия 4 Bootstrap является серьезным изменением всех предыдущих версий. Это мобильная платформа и может претендовать на то, чтобы быть одной из лучших CSS-фреймворков для создания адаптивных веб-сайтов.

Ко мне часто поступают вопросы про хостинг, которым я пользуюсь и поэтому решил указать хостинг в статье https://sprinthost.ru. Вы можете попробовать попользоваться хостингом 30 дней бесплатно. Чтобы понять, как будет работать Ваш сайт на этом хостинге просто перенести свой сайт (в этом поможет поддержка хостинга бесплатно) и и таким образом сможете понять подходит хостинг Вам или нет. На этом хостинге находятся сайты с 20 000 тысяч посещаемость и сайты чувствуют себя отлично. Рекомендую! Да, если делать оплату на 1 год то получаете скидку 25%. И что мне нравится - тех. поддержка всегда помогает в технических вопросах, за что им спасибо. Как Вы понимаете не всегда проходит всё гладко и нет желания, чтобы сайт не был доступен тем самым страдал трафик и доход.

Поскольку Bootstrap — это платформа для мобильных устройств, по умолчанию все, что вы планируете или создаете, будет совместимо с мобильными устройствами или будет реагировать на них. Разве это не круто?

Начинаем

Bootstrap имеет новый дизайн сайта, который сам построен с использованием последней версии системы Bootstrap (версия 4 на момент написания).

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

Как только вы распакуете архив, то увидите множество файлов и папок, которые не требуются для нашей статьи. Перейдите прямо в каталог «dist» и скопируйте все папки в новое место назначения, которое будет вашим проектом.

В предыдущих версиях среды загрузка включала дополнительную папку шрифтов. Теперь шрифты не включены, но мы можем легко взять некоторые приятные из Font Awesome например, или из вашего любимого ресурса для шрифтов-значков. В нашем случае у нас есть две директории, поэтому давайте посмотрим на каждую из них. Папка «css» содержит шесть CSS файлов:

  • bootstrap.css
  • bootstrap.min.css
  • bootstrap-grid.css
  • bootstrap-grid.min.css
  • bootstrap-reboot.css
  • bootstrap-reboot.min.css

Как вы можете видеть, последняя версия Bootstrap намного более модульная, чем предыдущая. Если вам просто нужен хороший сброс стилей CSS, просто используйте bootstrap-reboot.css (или его сокращенную версию bootstrap-reboot.min.css). Аналогично, если вы просто хотите использовать сетку, подключите bootstrap-grid.css (или сокращенную версию bootstrap-grid.min.css) в свой проект.

Для этой статьи наш основной файл CSS будет bootstrap.css, и мы должны подключить его во все наши HTML-страницы. Файл bootstrap.min.css — это тоже самое, только сокращенная версия bootstrap.css. Это необходимо, когда мы действительно будем развертывать наш сайт онлайн.

Перейдя к папке «js» — у нас есть следующие четыре файла:

  • bootstrap.bundle.js
  • bootstrap.bundle.min.js
  • bootstrap.js
  • bootstrap.min.js

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

Начиная с Bootstrap 4 beta 2, папка «js» включала две новые папки bootstrap-bundle.js (вместе со своей мини-версией), а также Popper.js — интеллектуальную библиотеку JavaScript для управления poppers в веб-приложениях.

Итак, что именно мы собираемся построить?

В этой статье я собираюсь создать статическую целевую страницу с помощью Bootstrap 4, которая будет называться «Сезонная аренда». Посмотрите на демо-страницу в первую очередь.

Измените размер окна браузера, и вы увидите некоторые удивительные преобразования в макете веб-страницы. Он настраивается на размер окна. Вы также заметите, что панель меню автоматически скрывается в приятном сенсорном меню.

Поэтому мы собираемся построить это! В восторге? Да, я тоже!

Структура

Bootstrap понимает элементы HTML5, поэтому нам нужно добавить соответствующий тег «doctype» на нашу веб-страницу. Давайте создадим новую HTML-страницу и добавим следующий тег «doctype».

	<!DOCTYPE html>

Теперь мы добавим основные теги, которые присутствуют в каждом документе HTML:

<html>
	<head>
		<title>Bootstrap 101 Template</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<!-- Bootstrap -->
		<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
	</head>
	<body>
		<h1>Hello, world!</h1>
		<script src="//code.jquery.com/jquery.js"></script>
		<script src="js/bootstrap.min.js"></script>
	</body>
</html>

Глядя внутрь <head>, у нас есть элемент «title», который достаточно легко понять: он дает название странице.

Также у нас есть элемент «meta», который очень важно понимать при использовании Bootstrap. Поскольку эта версия Bootstrap построена для совместимости с различными типами устройств (мобильные телефоны, планшеты, настольные компьютеры, дисплеи Retina и т. д.), вы должны сообщить браузеру, что он должен масштабировать вашу веб-страницу соответствующим образом на каждом устройстве.

Мета элемент «viewport» делает это: здесь мы установили начальную ширину устройства «content-width» и масштабировали его только один раз.

После установки мета-элемента «viewport» мы импортировали версию разработки файла bootstrap.css.

Перейдем к разделу «body» приведенного выше фрагмента HTML. Чтобы что-то вывести, мы написали «Hello, world» внутри тега «h1». Затем мы подлючили необходимые файлы JavaScript из папки «js». Убедитесь, что эти файлы JavaScript подлючены на каждой странице. Документация Bootstrap рекомендует включать все JavaScript в конце страницы.

Погружение в Bootstrap

Теперь, когда наша базовая структура готова, мы перейдем к добавлению разных компонентов на нашу веб-страницу. Эти компоненты на сегодняшний день являются наиболее важной частью каждого веб-сайта, поскольку мы их видим каждый день. Я собираюсь разделить демо-страницу на различные части, как показано ниже.

Раздел меню

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

Меню реагирует по умолчанию и получает новый вид на более мелких устройствах. Поскольку у нас есть весь CSS, готовый в нашем файле «bootstrap.css», нам просто нужно добавить правильную разметку и правильные классы для каждого элемента.

Начнем с <nav> элемента:

	<nav class="navbar navbar-expand-lg navbar-light bg-light">
  		/* navbar code here */
	</nav>

Поскольку Bootstrap совместим с HTML5, мы будем использовать элемент <nav> для нашего меню навигации. Давайте я расскажу про каждый класс, применяемый к нему.

  • «navbar» является классом обертки для «navbars».
  • «navbar-expand-lg» добавляет гибкую функциональность, беря на себя ответственность за расширение или свертывание навигации в зависимости от размера экрана. Вместо -lg, чтобы быть большим, вы также можете выбрать -md(средние экраны), -sm(маленькие экраны) и -xl(очень большие).
  • «navbar-light» — это класс цвета для навигации со светлым фоном.
  • «bg-light» далее настраивает цвет фона навигации. В этом случае навигация имеет светлый цвет. Если мы заменим «bg-light» на «bg-dark», цвет фона навигационной панели будет темным а цвет текста будет светлым.

Далее добавьте следующий фрагмент внутри элемента <nav>:

	<a class="navbar-brand" href="#">Vacation Rentals</a>
	<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
  		<span class="navbar-toggler-icon"></span>
	</button>

Класс «navbar-brand» используется для брендинга целей. В нашем случае отображается имя веб-сайта.

Затем обратите внимание на классы в элементе <button>. Эта кнопка видна только на маленьких экранах, и она используется для включения и выключения видимости меню data-target=»#navbarSupportedContent», что является ссылкой на значение идентификатора элемента «div», содержащего это меню. Давайте добавим этот элемент сейчас, чуть ниже предыдущего кода:

	<!-- div containing the toggable navigation -->
	<div class="collapse navbar-collapse" id="navbarSupportedContent">

	<!-- navigation menu -->
	   <ul class="navbar-nav mr-auto">
	    <!-- active link corresponding to the current page -->
	    <li class="nav-item active">
	      <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
	    </li>
	    <li class="nav-item">
	      <a class="nav-link" href="#">Trip Description</a>
	    <li class="nav-item">
	      <a class="nav-link disabled" href="#">About Us</a>
	    </li>
	    <li class="nav-item">
	      <a class="nav-link disabled" href="#">Book Travels</a>
	    </li>
	    <li class="nav-item">
	      <a class="nav-link disabled" href="#">Reservations</a>
	    </li>
	  </ul>
	  <!-- inline form inside the navbar -->
	  <form class="form-inline my-2 my-lg-0">
	    <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
	    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
	  </form>
	</div>

Вышеприведенный код является основным содержанием нашего меню. «navbar-collapse» применяется, чтобы сделать меню сенсорным, а также изменить его форму для небольших устройств. Содержимое внутри довольно легко понять. Мы использовали базовые элементы ul и li для перечисления пунктов меню. Также есть форма, которая классифицируется «form-inline» так, чтобы она отображалась правильно внутри панели навигации. И, наконец, я показал основную структуру, чтобы разместить раскрывающееся меню внутри навигации.

Здесь важны две вещи:

  • Использование utility classes, таких как mr-sm-2, mr-auto и т. д. Это довольно ново для Bootstrap, и их много.
  • Внимание к доступности с помощью класса «sr-only», который обрабатывает контент, предназначенный для чтения с экрана, и такие атрибуты, как «aria-controls» и «aria-expanded».

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

Итак, мы, наконец, закончили навигационное меню. Давайте перейдем к построению остальной части разметки внутри раздела <body>.

Область заголовка

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

	<div class="row">
	  <header class="col jumbotron jumbotron-fluid">
	    <div class="container-fluid">
	      <h1 class="display-4 text-light">
	        Best Vacation Rentals
	      </h1>
	      <p class="lead text-light">Sed placerat fringilla quam et.</p>
	      <button type="button" class="btn btn-primary btn-lg">Start Now!</button>
	    </div>
	  </header>
	</div>

Мы поставили «jumbotron» внутри div с классом «row» и дали самому «jumbotron» дополнительный класс «col». Это классы, которые использует Bootstrap для построения своей 12-колонной сетки.

Также обратите внимание на использование классов «container-fluid» и «jumbotron-fluid». Эти классы гарантируют, что «container» и «jumbotron» принимают 100% ширину родительского элемента контейнера или браузера, если родительский элемент отсутствует.

Внутри элемента div c классом «jumbotron» мы поместили элементы: h1, p и, наконец, причудливую кнопку.

Класс «display-4» является одним из последних дополнений в Bootstrap. Это класс отображения заголовка, который вы можете использовать, когда вам нужны заголовки, чтобы он действительно выделялся.

Класс «text-light» также является новым дополнением в Bootstrap. Это один из классов полезности цвета, позволяющий быстро контролировать цвет и цвет фона элементов.

Обновите браузер и посмотрите на область заголовка. Потрясающие!

Область содержимого

Теперь нам нужно разделить область содержимого на три равные области и разместить их рядом друг с другом. Благодаря сетке Bootstrap, это будет можно сделать быстро и легко.

Bootstrap обеспечивает 12-колонную сетку. Он делит экран на 12 равных частей, и нам нужно указать, какой элемент HTML занимает какие части сетки. Короче говоря, любой элемент будет занимать минимум одну сетку.

Давайте сначала посмотрим на разметку.

	<div class="row">
		<!-- first column -->
	  	<div class="col-sm pb-4">

		</div>

		<!-- second column -->
	  	<div class="col-sm pb-4">

		</div>

		<!-- third column -->
	  	<div class="col-sm pb-4">

		</div>
	</div>

Во-первых, есть три элемента div, которые содержатся внутри одной строки. Итак, мы начинаем новую строку, добавляя новый класс «row».

Строка теперь содержит еще три тега div с классом «col-sm». Перед выпуском Bootstrap 4 достижение этого результата потребовало бы добавления класса «col-md-4» к каждому из этих элементов. Число 4 в классе означало, что сетка состояла из четырех столбцов. Таким образом, три div с четырьмя столбцами занимали 12 столбцов.

Новая сетка Bootstrap использует силу Flexbox, чтобы сделать вещи способом менее сложным. Класс «col-sm» в каждой колонке div само по себе гарантирует, что содержание равномерно делится между тремя div-ами, пока размер экрана не станет 576px, это точка, где столбцы начнут складываться друг на друга.

Класс «pb-4» один из новых служебных классов, которые приходят с Bootstrap 4. Это создает некоторый отступ снизу внутри элемента на основе значения.

Поскольку у нас есть несколько подходящих div-ов, теперь настало время заполнить их некоторым контентом. В нашем случае содержимое уникально для каждого из них, с разными изображениями, но структура одна и та же. Вот пример содержимого в первом столбце:

	<!-- first column -->
	<div class="col-sm pb-4">

	<!-- column content here -->
	  <a href="#">
	    <img class="img-fluid mx-auto d-block mt-4 mb-2 rounded-circle" src="path/to/img" alt="">
	  </a>
	  <h3 class="text-center mb-2">Type 1</h3>
	  <p>
	    Lorem Ipsum...
	  </p>
	  <button class="btn btn-success">Book Now @ $599></button>

	</div>

Добавленное изображение имеет класс «img-fluid», который позволяет соответствовать размеру родителя независимо от его собственного размера. Изображение реагирует на размер каждого div. Также у нас есть нормальные теги h3 и p. Вы можете заполнить тег p любым контентом. На моей демо-странице я использовал автоматически генерируемый текст Lorem Ipsum. Затем, в конце, я добавил кнопку.

Класс «btn-success» используется, чтобы сделать кнопку зеленой. Есть другие классы как «btn-info», «btn-default», «btn-warning» и «btn-danger». Вы можете просмотреть страницу документации для всех цветов.

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

Футер (подвал сайта)

Область футера соответствует тем же принципам, что и область содержимого. Вот разметка:

	<footer class="row pt-4">

	<!-- first column -->
	  <div class="col-sm">
	    <small><p>© 2018</p></small>
	  </div>

	<!-- second column -->
	  <div class="col-sm">
	    <ul class="list-inline">
	      <li class="list-inline-item">
	        <a href="#">About Us</a>
	      </li>
	      <li class="list-inline-item">
	        <a href="#">Support 24x7</a>
	      </li>
	      <li class="list-inline-item">
	        <a href="#">Privacy Policy</a>
	      </li>
	    </ul>
	  </div>

	<!-- third column -->
	  <div class="col-sm">
	    <small><p class="text-right">Vacation Rentals</p></small>
	  </div>

	</footer>

Я использовал элемент HTML5 «footer» и создал еще одну строку одновременно. Затем я разделил всю область на три равные части, так же, как и в основной области содержимого выше. Затем я заполнил каждый столбец.

Некоторые дополнительные классы

Классы таблиц: если вы используете элемент <table>, вы можете использовать этот класс «.table», чтобы таблица выглядела немного более привлекательной, как это обозначено в стилях Bootstrap.

Обтекания (floats): вы можете использовать «.float-left» — помещает содержимое слева, а контент обтекает блок справа, «.float-right» — чтобы поместить содержимое справа, а контент обтекал блок слева и «float-none» — удаляет float из этого элемента.

Класс «clearfix»: этот класс используется для очистки float в любом элементе.

И в завершении

Итак, это было мое маленькое руководство «Как мне начать» для последней версии Bootstrap. Основной мотив состоял в том, чтобы вы поняли, как работает Bootstrap. Как вы могли видеть, я не написал больше нескольких строк кода CSS. Bootstrap обрабатывает все самостоятельно с помощью своего предопределенного набора файлов CSS и JS.

Одним из основных недостатков Bootstrap является то, что он не совместим со старой своей версией. Итак, если ваш сайт построен с помощью Bootstrap 3 и вы замените все файлы CSS и JS на файлы Bootstrap 4, ваш дизайн сломается. Создатели Bootstrap внесли огромные изменения в имена классов CSS и улучшили отзывчивость полученных веб-сайтов.

Вы также можете добавить свой CSS на сайт. Создайте свой собственный файл CSS с любым именем — например: customstyles.css — и импортируйте в него Bootstrap CSS. Затем определите свой собственный стиль, используя соответствующий класс элемента или идентификатор. В этой демонстрации я использовал бы свой файл customstyle.css, чтобы изменить фон элемента «jumbotron».

Вот демонстрационная страница того, что у нас с вами получилось.

Вышла не плохая познавательная статья для новичков. Я сам только недавно начал использовать в своих работах Bootstrap 4, и поэтому мне также интересно развиваться вместе с вами.

Но на сегодня это все. Не забывайте подписываться на обновления моего блога и до скорых встреч!


Обо мне
Юрич:
Занимаюсь созданием сайтов на WordPress более 6 лет. Ранее работал в нескольких веб-студиях и решил делиться своим опытом на данном сайте. Пишите комментарии, буду рад общению.

Заказать сайт