Bootstrap 4 Начало работы
Что такое бутстрап?
- Bootstrap — это бесплатный интерфейсный фреймворк для более быстрой и простой веб-разработки.
- Bootstrap включает шаблоны дизайна на основе HTML и CSS для типографики, форм, кнопок, таблиц, навигации, модальных окон, каруселей изображений и многого другого, а также дополнительные плагины JavaScript.
- Bootstrap также дает вам возможность легко создавать адаптивные дизайны.
Что такое адаптивный веб-дизайн?
Отзывчивый веб-дизайн — это создание веб-сайтов, которые автоматически настраиваются, чтобы хорошо выглядеть на всех устройствах, от маленьких телефонов до больших настольных компьютеров.
Пример начальной загрузки 4
<div class="jumbotron text-center">
<h1>My First Bootstrap
Page</h1>
<p>Resize this responsive page to see the effect!</p>
</div>
<div class="container">
<div class="row">
<div class="col-sm-4">
<h3>Column 1</h3>
<p>Lorem ipsum
dolor..</p>
</div>
<div class="col-sm-4">
<h3>Column 2</h3>
<p>Lorem ipsum
dolor..</p>
</div>
<div class="col-sm-4">
<h3>Column 3</h3>
<p>Lorem ipsum
dolor..</p>
</div>
</div>
</div>
Версии начальной загрузки
Это руководство следует за Bootstrap 4 , который был выпущен в 2018 году как обновление до Bootstrap 3 , с новыми компонентами, более быстрой таблицей стилейc, большей отзывчивостью и т. д.
Bootstrap 5 (выпущен в 2021 г.) — новейшая версия Bootstrap ; Он поддерживает последние стабильные версии всех основных браузеров и платформ. Однако Internet Explorer 11 и более ранние версии не поддерживаются.
Основное различие между Bootstrap 5 и Bootstrap 3 и 4 заключается в том, что Bootstrap 5 переключился на JavaScript вместо jQuery .
Примечание. Bootstrap 3 и Bootstrap 4 по-прежнему поддерживаются командой для исправления критических ошибок и изменений в документации, и продолжать их использовать совершенно безопасно. Однако к ним НЕ будут добавлены новые функции.
Зачем использовать Bootstrap?
Преимущества бутстрапа:
- Простота в использовании: любой, у кого есть только базовые знания HTML и CSS, может начать использовать Bootstrap.
- Адаптивные функции: отзывчивый CSS Bootstrap адаптируется к телефонам, планшетам и настольным компьютерам.
- Подход, ориентированный на мобильные устройства: в Bootstrap стили, ориентированные на мобильные устройства, являются частью базовой структуры.
- Совместимость с браузерами: Bootstrap 4 совместим со всеми современными браузерами (Chrome, Firefox, Internet Explorer 10+, Edge, Safari и Opera) .
Где взять Bootstrap 4?
Есть два способа начать использовать Bootstrap 4 на своем веб-сайте.
Ты сможешь:
- Включить Bootstrap 4 из CDN
- Загрузите Bootstrap 4 с сайта getbootstrap.com.
Bootstrap 4 CDN
Если вы не хотите загружать и размещать Bootstrap 4 самостоятельно, вы можете подключить его из CDN (сети доставки контента).
jsDelivr обеспечивает поддержку CDN для CSS и JavaScript Bootstrap. Вы также должны включить jQuery:
jsDelivr:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<!-- jQuery library -->
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>
<!-- Popper JS -->
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
Одно из преимуществ использования CDN Bootstrap 4:
многие пользователи уже загрузили Bootstrap 4 с jsDelivr при посещении другого сайта. В результате он будет загружаться из кеша при посещении вашего сайта, что приводит к ускорению загрузки. Кроме того, большинство CDN позаботятся о том, чтобы после того, как пользователь запросил у них файл, он был доставлен с ближайшего к ним сервера, что также приводит к более быстрому времени загрузки.
jQuery и Поппер?
Bootstrap 4 использует jQuery и Popper.js для компонентов JavaScript (таких как модальные окна, всплывающие подсказки, всплывающие окна и т. д.). Однако, если вы просто используете CSS-часть Bootstrap, они вам не нужны.
- Закрываемые оповещения
- Кнопки и флажки/переключатели для переключения состояний
- Карусель для слайдов, элементов управления и индикаторов
- Свернуть для переключения содержимого
- Dropdowns (also requires Popper.js for perfect positioning)
- Modals (open and close)
- Navbar (for collapsible menus)
- Tooltips and popovers (also requires Popper.js for perfect positioning)
- Scrollspy for scroll behavior and navigation updates
Загрузка Bootstrap 4
Если вы хотите загрузить и разместить Bootstrap 4 самостоятельно, перейдите на https://getbootstrap.com/ и следуйте приведенным там инструкциям.
Создайте первую веб-страницу с помощью Bootstrap 4
1. Добавьте тип документа HTML5
Bootstrap 4 использует элементы HTML и свойства CSS, для которых требуется тип документа HTML5.
Всегда указывайте тип документа HTML5 в начале страницы вместе с атрибутом lang и правильным набором символов:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
</html>
2. Bootstrap 4 ориентирован на мобильные устройства
Bootstrap 4 предназначен для работы с мобильными устройствами. Стили, ориентированные на мобильные устройства, являются частью основной структуры.
Чтобы обеспечить правильную визуализацию и сенсорное масштабирование, добавьте <meta>внутри
<head>элемента следующий тег:
<meta name="viewport" content="width=device-width, initial-scale=1">
Эта width=device-widthчасть устанавливает ширину страницы в соответствии с шириной экрана устройства (которая будет варьироваться в зависимости от устройства).
Эта initial-scale=1часть устанавливает начальный уровень масштабирования при первой загрузке страницы браузером.
3. Контейнеры
Bootstrap 4 также требует наличия содержащего элемента для переноса содержимого сайта.
На выбор предлагается два класса контейнеров:
- Класс
.containerпредоставляет отзывчивый контейнер с фиксированной шириной . - Класс
.container-fluidпредоставляет контейнер полной ширины , охватывающий всю ширину окна просмотра.
Две основные страницы Bootstrap 4
В следующем примере показан код базовой страницы Bootstrap 4 (с отзывчивым контейнером фиксированной ширины):
Пример контейнера
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap
4 Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
</body>
</html>
В следующем примере показан код базовой страницы Bootstrap 4 (с контейнером полной ширины):
Пример контейнера с жидкостью
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap
4 Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
</body>
</html>