English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Основной курс Bootstrap4

Установка и использование Bootstrap4

Мы можем установить Bootstrap4 двумя способами:

  • Используйте Bootstrap 4 CDN

  • с официального сайта getbootstrap.com Загрузите Bootstrap 4

Bootstrap 4 CDN

Рекомендуется использовать библиотеки на CDN Staticfile:

<!-- Новые файлы CSS ядра Bootstrap4 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　
<!-- Файл jQuery. Обязательно включите его перед bootstrap.min.js -->
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　
<!-- bootstrap.bundle.min.js используется для всплывающих окон, подсказок и выпадающих меню, включает popper.min.js -->
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　
<!-- Самый новый файл JavaScript ядра Bootstrap4 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

Внимание:popper.min.js используется для настройки всплывающих окон, подсказок и выпадающих меню, в настоящее время bootstrap.bundle.min.js уже включает popper.min.js.

Кроме того, вы можете использовать следующие CDN-сервисы:

Загрузите Bootstrap 4

Вы можете перейти на официальный сайт https://getbootstrap.com/ Загрузите библиотеку ресурсов Bootstrap4

Примечание:Кроме того, вы можете установить его с помощью пакетных менеджеров, таких как npm, gem, composer и т.д.:

npm install [email protected]
gem 'bootstrap', '~> 4.0.0.beta2'
composer require twbs/bootstrap:4.0.0-beta.2

Создание первой страницы с Bootstrap 4

1. Добавьте DOCTYPE HTML5

Bootstrap требует использования типа файла HTML5, поэтому необходимо добавить объявление DOCTYPE HTML5.

DOCTYPE HTML5 в документе в заголовке и установлены соответствующие кодировки:

<!DOCTYPE html>
<html>
　　<head>
　　　　<meta charset="utf-8">　
　　</head>
</html>

Преимущественно для мобильных устройств

Чтобы сайт, разработанный с использованием Bootstrap, был дружелюбен к мобильным устройствам, и для обеспечения соответствующего рисования и масштабирования сенсорного экрана, необходимо добавить тег meta viewport в head веб-страницы, как показано ниже:

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

width=device-width означает, что ширина равна ширине экрана устройства.

initial-scale=1 означает начальный масштаб.

shrink-to-fit=no автоматически адаптирует ширину экрана телефона.

Классы контейнера

Bootstrap 4 требует контейнерного элемента для обертывания содержимого сайта.

Мы можем использовать следующие два класса контейнера:

  • .container класс используется для фиксированной ширины и поддержки адаптивной вёрстки контейнера.

  • .container-fluid класс используется для 100% ширины, занимающего весь viewport контейнера.

Два Bootstrap 4 страницы

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap пример</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h1>Моя первая страница Bootstrap</h1>
　　<p>Это несколько текстов.</p>　
</div>
</body>
</html>
Проверьте, что ‹/›

Следующий пример показывает контейнер, занимающий весь viewport.

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap пример</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
　　<h1>Моя первая страница Bootstrap</h1>
　　<p>Использовалась .container-fluid, 100% ширина, занимающая весь viewport.</p>　
</div>
</body>
</html>
Проверьте, что ‹/›
Система сетки Bootstrap4Учебник Bootstrap4