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

Bootstrap5 можно установить следующими двумя способами:

  • Используйте CDN Bootstrap5.

  • С официального сайтаgetbootstrap.comСкачайте Bootstrap 5.

CDN Bootstrap 5

CDNJS：

CDN Bootstrap5

<!--Новый основной CSS-файл Bootstrap5--> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.3/css/bootstrap.min.css"> <!--popper.min.js используется для всплывающих окон, подсказок и выпадающих меню--> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.11.2/umd/popper.min.js"></script> <!--Последний основной JavaScript-файл Bootstrap5--> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.3/js/bootstrap.min.js"></script>

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

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

Пример

<!-- Новый основной CSS-файл Bootstrap5 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.3/css/bootstrap.min.css">
 
<!-- Последний основной JavaScript-файл Bootstrap5 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.3/js/bootstrap.bundle.min.js"></script>

Bootstrap5 CDN（jsDelivr）

<!--Новый основной CSS-файл Bootstrap5--> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" crossorigin="anonymous"> <!--Последний основной JavaScript-файл Bootstrap5--> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>

Bootstrap5 CDN（Staticfile）

<!-- Новый основной CSS-файл Bootstrap5 -->
<link rel="stylesheet" href="https://cdn.staticfile.net/twitter-bootstrap/5.1.1/css/bootstrap.min.css">
 
<!-- Последний основной JavaScript-файл Bootstrap5 -->
<script src="https://cdn.staticfile.net/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>

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

Скачать Bootstrap 5

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

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

npm install bootstrap
yarn add bootstrap
gem install bootstrap -v 5.1.1
composer require twbs/bootstrap:5.1.1

Создайте свою первую страницу на Bootstrap 5

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

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

HTML5 doctype объявляется в верхней части документа вместе с соответствующей кодировкой символов:

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

Сначала мобильные

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

<meta name="viewport" content="width=device-width, initial-scale=1">

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

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

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

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

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

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

Две страницы Bootstrap 5

Пример использования .container в Bootstrap 5

<div class="container"> <h1>Моя первая страница Bootstrap</h1> <p>Это некоторый текст.</p> </div>

Попробуйте сами »

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

Пример .container-fluid в Bootstrap5

<div class="container-fluid"> <h1>Моя первая страница Bootstrap</h1> <p>Использован .container-fluid, ширина 100%, контейнер, занимающий всю область просмотра.</p> </div>

Попробуйте сами »
Другие расширения