Bootstrap 4 пока находится в разработке. Домашняя страница находится по адресу http://getbootstrap.com/. На момент написания статьи была версия v4.0.0-beta.2
В конце декабря было объявлено, что Bootstrap 4 прекращает поддержку IE9 и полностью переходит на Flexbox.
Bootstrap 4 теперь по умолчанию использует Flexbox.
Подключаем CSS:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
Подключаем JavaScript-сценарии и плагины (обязательно в этом порядке) перед закрывающим тегом body:
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
Я столкнулся с случаем, когда один из моих сценариев перестал работать при использовании slim-версии. В этом случае можете подключить полную версию jQuery.
Минимальный HTML-шаблон
<!doctype html>
<html lang="en">
<head>
<title>Hello, world!</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
</head>
<body>
<h1>Hello, world!</h1>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
</body>
</html>
Вы можете тестировать страницу под разные устройства прямо в Google Chrome. Выберите Инструменты разработчика. У него есть функция переключения под мобильные устройства, найдите соответствующий значок смартфона. В появившемся экране можно выбрать нужную модель смартфона или планшета, а также переключаться в альбомный режим.
Содержание страницы желательно помещать в специальные контейнеры. Если этого не делать, то текст будет выводиться некрасиво. Данная страница использует Bootstrap и весь текст уже находится в контейнер.
Чтобы поместить текст в контейнер, используется класс container.
<div class="container">
Какой-то текст, который находится в контейнере
</div>
Класс container использует отступ 15 пикселей по краям и вы можете увидеть, что текст смещён.
Кроме стандартного контейнера существует ещё резиновый контейнер, за который отвечает класс container-fluid.
<div class="container-fluid">
Текст находится в резиновом контейнере. Чтобы увидеть поведение текста в этом контейнере, попробуйте изменить размеры браузера.
</div>
В разных ситуациях используются свои типы контейнеров в зависимости от ваших задач. Стандартный контейнер используется чаще резиновых.
В контейнерах контент можно разбить на колонки и ряды. Сейчас поговорим о рядах. Создадим два контейнера. Разобьём второй контейнер на две колонки.
Какой-то текст в первой колонке. Здесь должно быть много текста.
Какой-то текст во второй колонке. Здесь должно быть много текста.
Я специально добавил верхний контейнер, чтобы увидеть проблему. Две колонки внутри второго контейнера имеют свои отступы, которые портят картину. Чтобы исправить ситуацию, достаточно добавить новый div с классом row для используемых колонок.
Какой-то текст в первой колонке. Здесь должно быть много текста.
Какой-то текст во второй колонке. Здесь должно быть много текста.
Теперь колонки по ширине совпадают с верхним контейнером.
<div class="container" style="background-color: yellow">
Верхний контейнер
</div>
<div class="container">
<div class="row">
<div class="col-xl-6" style="background-color: blue">
<h1>Первая колонка</h1>
<p>Какой-то текст в первой колонке. Здесь должно быть много текста.</p>
</div>
<div class="col-xl-6" style="background-color: green">
<h1>Вторая колонка</h1>
<p>Какой-то текст во второй колонке. Здесь должно быть много текста.</p>
</div>
</div>
</div>
Размеры заголовков - display-# (1-4)
Выравнивание текстов - text-*-center, text-justify, text-*-left, text-*-right.
Списки без точек, горизонтальные списки - list-unstyled, list-inline.
Отзывчивые изображения - img-fluid. С закруглением - rounded, rounded-*, rounded-circle. Класс rounded-0 используется для сброса закруглений при создании собственных стилей с радиусами закрулений.
Выравнять изображение по левому или правому краю - float-right или float-left. Не используйте с ними класс img-fluid.
Подписи к картинкам - figure, figure-img, figure-caption.
Margin и padding - классы m-* (m-0, m-1, m-2, m-3, m-4, m-5) и p-* (p-0, p-1, p-2, p-3, p-4, p-5). Для отдельных сторон используются символы t (top), b (bottom), r (right), l (left): mb-1, pt-2 и т.д. Символы x и y для парных значений по горизонтали и вертикали - mx = ml + mr, py = pt + pb. Примеры: mx-1, py-5.
Bootstrap 4 Cheat Sheet - удобная таблица по классам Bootstrap 4. Обнаружил, что некоторых классов не хватает, отписал автору. Обещал поправить в следующем обновлении.
Home of free code snippets for Bootstrap | Bootsnipp.com - примеры для Bootstrap.