Начальная загрузка
Что такое бутстрап?
- Bootstrap — это бесплатный интерфейсный фреймворк для более быстрой и простой веб-разработки.
- Bootstrap включает шаблоны дизайна на основе HTML и CSS для типографики, форм, кнопок, таблиц, навигации, модальных окон, каруселей изображений и многого другого, а также дополнительные плагины JavaScript.
- Bootstrap также дает вам возможность легко создавать адаптивные дизайны.
Что такое адаптивный веб-дизайн?
Отзывчивый веб-дизайн — это создание веб-сайтов, которые автоматически настраиваются, чтобы хорошо выглядеть на всех устройствах, от маленьких телефонов до больших настольных компьютеров.
Пример начальной загрузки
<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 был разработан Марком Отто и Джейкобом Торнтоном в Twitter и выпущен как продукт с открытым исходным кодом в августе 2011 года на GitHub.
В июне 2014 года Bootstrap был проектом №1 на GitHub!
Зачем использовать Bootstrap?
Преимущества бутстрапа:
- Простота в использовании: любой, у кого есть только базовые знания HTML и CSS, может начать использовать Bootstrap.
- Адаптивные функции: отзывчивый CSS Bootstrap адаптируется к телефонам, планшетам и настольным компьютерам.
- Подход, ориентированный на мобильные устройства: в Bootstrap 3 стили, ориентированные на мобильные устройства, являются частью основной структуры.
- Совместимость с браузерами: Bootstrap совместим со всеми современными браузерами (Chrome, Firefox, Internet Explorer, Edge, Safari и Opera) .
Версии начальной загрузки
Это руководство следует за Bootstrap 3 , выпущенным в 2013 году. Однако мы также охватываем более новые версии; Bootstrap 4 (выпущен в 2018 г.) и Bootstrap 5 (выпущен в 2021 г.) .
Bootstrap 5 — новейшая версия Bootstrap ; с новыми компонентами, более быстрыми таблицами стилей, большей отзывчивостью и т. д. Он поддерживает последние стабильные версии всех основных браузеров и платформ. Однако Internet Explorer 11 и более ранние версии не поддерживаются.
Основное различие между Bootstrap 5 и Bootstrap 3 и 4 заключается в том, что Bootstrap 5 переключился на JavaScript вместо jQuery .
Примечание. Bootstrap 3 и Bootstrap 4 по-прежнему поддерживаются командой для исправления критических ошибок и изменений в документации, и продолжать их использовать совершенно безопасно. Однако к ним НЕ будут добавлены новые функции.
Где взять бутстрап?
Есть два способа начать использовать Bootstrap на своем веб-сайте.
Ты сможешь:
- Загрузите Bootstrap с сайта getbootstrap.com.
- Включить Bootstrap из CDN
Загрузка Bootstrap
Если вы хотите загрузить и разместить Bootstrap самостоятельно, перейдите на сайт getbootstrap.com и следуйте приведенным там инструкциям.
Загрузочная CDN
Если вы не хотите загружать и размещать Bootstrap самостоятельно, вы можете подключить его из CDN (сети доставки контента).
MaxCDN обеспечивает поддержку CDN для CSS и JavaScript Bootstrap. Вы также должны включить jQuery:
Макс. CDN:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
Одно из преимуществ использования Bootstrap CDN:
многие пользователи уже скачали Bootstrap с MaxCDN при посещении другого сайта. В результате он будет загружаться из кеша при посещении вашего сайта, что приводит к ускорению загрузки. Кроме того, большинство CDN позаботятся о том, чтобы после того, как пользователь запросил у них файл, он был доставлен с ближайшего к ним сервера, что также приводит к более быстрому времени загрузки.
jQuery
Bootstrap использует плагины jQuery для JavaScript (например, модальные окна, всплывающие подсказки и т. д.). Однако, если вы просто используете CSS-часть Bootstrap, вам не нужен jQuery.
Создайте первую веб-страницу с помощью Bootstrap
1. Добавьте тип документа HTML5
Bootstrap использует элементы HTML и свойства CSS, для которых требуется тип документа HTML5.
Всегда указывайте тип документа HTML5 в начале страницы вместе с атрибутом lang и правильным набором символов:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
</html>
2. Bootstrap 3 ориентирован на мобильные устройства
Bootstrap 3 предназначен для работы с мобильными устройствами. Стили, ориентированные на мобильные устройства, являются частью основной структуры.
Чтобы обеспечить правильную визуализацию и сенсорное масштабирование, добавьте <meta>внутри
<head>элемента следующий тег:
<meta name="viewport" content="width=device-width, initial-scale=1">
Эта width=device-widthчасть устанавливает ширину страницы в соответствии с шириной экрана устройства (которая будет варьироваться в зависимости от устройства).
Эта initial-scale=1часть устанавливает начальный уровень масштабирования при первой загрузке страницы браузером.
3. Контейнеры
Bootstrap также требует наличия содержащего элемента для переноса содержимого сайта.
На выбор предлагается два класса контейнеров:
- Класс
.containerпредоставляет отзывчивый контейнер с фиксированной шириной . - Класс
.container-fluidпредоставляет контейнер полной ширины , охватывающий всю ширину области просмотра.
Две основные страницы Bootstrap
В следующем примере показан код базовой страницы Bootstrap (с отзывчивым контейнером фиксированной ширины):
Пример
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
</body>
</html>
В следующем примере показан код базовой страницы Bootstrap (с контейнером полной ширины):
Пример
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
</body>
</html>