Делаем первый сайт на Bootstrap 4

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

Перевод статьи Building your first Bootstrap 4.0 site

👉Мой Твиттер — там много из мира фронтенда, да и вообще поговорим🖖. Подписывайтесь, будет интересно: ) ✈️

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

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

Что мы будем делать?

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

Navbar

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

<nav class="navbar navbar-light bg-light">
    <a href="#" class="navbar-brand">My portfolio</a>
</nav>

Что приводит к такому результату:

Класс bg-light делает фон светло-серым, в то время как navbar-light класс придает тексту темный цвет. По дефолту, цвет текста в панели навигации синий, тем не менее, я считаю, что она лучше выглядит с navbar-light классом.

Давайте добавим контент нашей панели навигации на один уровень с тегом бренда.

<ul class="navbar-nav">
  <li class="navbar-item">
    <a href="#" class="nav-link">Homepage</a>
  </li>
  <li class="navbar-item">
    <a href="#" class="nav-link">Blog</a>
  </li>
  <li class="navbar-item">
    <a href="#" class="nav-link">About</a>
  </li>
  <li class="navbar-item">
    <a href="#" class="nav-link">Contact Us</a>
  </li>
</ul>

Три класса на которые стоит обратить внимание — это navbar-nav, navbar-link и navbar-item. Вместе они выстраивают опционал навигации таким образом, каким вы хотите.

Вот, как это все дело теперь выглядит:

Тем не менее, нам понадобится сделать его адаптивным, так как мы хотим, чтобы опции навигации сворачивались в гамбургер на маленьких экранах. Для этого нам понадобится сделать две вещи:

1. Указать Bootstrap какие опции навигации должны сворачиваться в гамбургер.

2. Создать разметку для гамбургера.

Чтобы сделать ее сворачивающимся, мы добавим navbar-expand-md класс для nav элемента.

<nav class="navbar navbar-light bg-light navbar-expand-md">
...
</nav>

Это укажет Bootstrap, что мы хотим того, чтобы опции навигации переключались между открытым и свернутыми режимами на md, который срабатывает при разрешении от 769px и ниже.

Также нам нужно обернуть опции навигации в div с двумя классами, collapse и navbar-collapse, которые укажут Bootstrap, на то, что это именно та часть, которую мы собираемся сворачивать.

<div class="collapse navbar-collapse" id="navbarNav">
  <ul class="navbar-nav">
  ... 
  </ul>
</div>

Id navbarNav тут для связи этого элемента с data-target атрибутом в иконке гамбургера, которую мы создадим таким образом:

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
  <span class="navbar-toggler-icon"></span>
</button>

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

Этот блог бесплатный, в нём нет рекламы и ограничений paywall.
Вы можете его поддержать через Яндекс.Деньги. Спасибо.

Jumbotron

Следующим шагом будет создание приветствия пользователям сайта, сразу под навигационной панелью. Чтобы это сделать, мы применим компонент Jumbotron. Это вообще супер легко.

<div class="jumbotron jumbotron-fluid">
  <div class="container">
  <h1 class="display-3">Welcome to my website</h1>
  <p class="lead">I'm a developer and designer. Check my portfolio below</p>
</div>

Что приведет к такому результату:

Классы display-3 и lead это типографические классы, которые делают текст более видимым и вообще визуально доступнее.

Основной контент — сетки и карточки

Под нашим jumbotron`ом мы собираемся добавить основной контент нашего сайта, который будет состоять из четырех карточек. Карточка это совершенно новый компонент для Bootstrap 4 и он заменяет собой панели, велсы и миниатюры из Bootstrap 3.

Давайте сначала посмотрим на то, что мы хотим сделать.

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

Почитайте эту тему подробнее тут. Сетка в Bootstrap 4. Подробное руководство

Мы начнем с создания очень простой сетки без контента. В Bootstrap вы всегда сначала создаете ряды, а уже потом обёртываете в колонки внутри рядов. По дефолту, сетка может быть разделена на 12 колонок в ширину.

Все, что больше брейкпоинта sm, мы хотим, чтобы каждая карточка занимала половину ширины экрана, для этого мы выставим колонкам класс col-sm-6. А когда экран достигнет контрольной точки lg, нам нужно, чтобы было 4 карточки на одной ширине, для этого мы выставим col-lg-3.

<div class="container">
  <div class="row">
    <div class="col-sm-6 col-lg-3">column</div>
    <div class="col-sm-6 col-lg-3">column</div>
    <div class="col-sm-6 col-lg-3">column</div>
    <div class="col-sm-6 col-lg-3">column</div>
  </div>
</div>

Это даст нам следующий результат:

Теперь, чтобы создать карточку, нам нужно просто заменить текст колонки на компонент карточки. Вот разметка для нашей карточки.

<div class="card">
  <img class="card-img-top" alt="Card header image" src="img1.png">
  <div class="card-body">
    <h5 class="card-title">Project 1</h5>
    <p class="card-text">An awesome project</p>
    <a href="#" class="btn btn-info">See project</a>
  </div>
</div>

Чтобы превратить div в карточку, мы просто добавим ему класс card. Если мы хотим, чтобы у него показывалось изображение в заголовке карточки, то нам нужно будет добавить класс card-img-top. Для всего остального контента, мы будем использовать классы card-body, card-title и card-text.

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

В этом моменте вы узнаете о новой концепции выставления промежутков в Bootstrap 4, в которой вы можете добавлять классы, чтобы указывать внешние и внутренние отступы. Мы просто добавим класс mt-3 для дивов card.

<div class="card mt-3">
...
</div>

Класс mt означает margin-top, а число 3 выбирается по шкале от 1 до 5-ти. Вы также можете для примера попробовать класс pb-4, который означает padding-bottom c параметром 4. Возможно вы уже смекнули, что к чему. После того как мы добавим нужные классы отступов, у нас будет хорошая сетка с карточками для нашего сайта.

Форма связи

И наконец-то, давайте добавим форму связи. Это просто будет новая строка в нашей сетке. В этот раз, мы просто будем использовать класс offset, так как мы не хотим чтобы она была на всю ширину экрана, по крайне мере не выше контрольной точки для md.

Так что для md и выше, мы дадим ей ширину в 6 колонок и offset в 3:

<div class="row mt-5">
  <div class="col-sm-12 col-md-6 offset-md-3">
    <h3>Reach out!</h3>
    ...form goes here...
  </div>
</div>

Теперь давайте посмотрим на код самой формы:

<form>
  <div class="form-group">
    <input type="text" class="form-control" id="email" placeholder="Your email..">
  </div>
  <div class="form-group">
    <textarea class="form-control" placeholder="Your message..">            
    </textarea>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button></form>

Такие элементы, как <input> и <textarea> — стилизованы классом form-control. Это делает их вид как у классической формы Bootstrap.

Вот и всё! Только что вы создали ваш первый сайт на Bootstrap 4!