вступ

Почніть роботу з Bootstrap, найпопулярнішим у світі фреймворком для створення адаптивних сайтів, орієнтованих на мобільні пристрої, з jsDelivr і шаблоном стартової сторінки.

На цій сторінці

Швидкий початок

Хочете швидко додати Bootstrap до свого проекту? Використовуйте jsDelivr, безкоштовний CDN з відкритим кодом. Користуєтесь менеджером пакунків чи потрібно завантажити вихідні файли? Перейдіть на сторінку завантажень .

CSS

Скопіюйте та вставте таблицю стилів <link>у свою <head>перед усіма іншими таблицями стилів, щоб завантажити наш CSS.

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

JS

Для роботи багатьох наших компонентів потрібне використання JavaScript. Зокрема, їм потрібні наші власні плагіни JavaScript і Popper . Розмістіть один із наведених нижче <script>символів у кінці сторінок, безпосередньо перед закриваючим </body>тегом, щоб увімкнути їх.

пучок

Додайте кожен плагін Bootstrap JavaScript і залежність до одного з наших двох пакетів. Обидва bootstrap.bundle.jsі bootstrap.bundle.min.jsвключають Popper для наших підказок і спливаючих вікон. Для отримання додаткової інформації про те, що включено до Bootstrap, перегляньте наш розділ змісту .

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

Окремий

Якщо ви вирішите скористатися рішенням із окремими сценаріями, спочатку має стояти Popper (якщо ви використовуєте спливаючі підказки чи спливні підказки), а потім наші плагіни JavaScript.

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>

Модулі

Якщо ви використовуєте <script type="module">, зверніться до нашого розділу про використання Bootstrap як модуля .

компоненти

Цікаво, для яких компонентів явно потрібні наш JavaScript і Popper? Натисніть посилання показати компоненти нижче. Якщо ви взагалі не впевнені щодо загальної структури сторінки, продовжуйте читати, щоб отримати приклад шаблону сторінки.

Показати компоненти, для яких потрібен JavaScript

Оповіщення про звільнення
Кнопки для перемикання станів і функції прапорців/радіо
Карусель для всіх режимів слайдів, елементів керування та індикаторів
Згорнути для перемикання видимості вмісту
Випадаючі списки для відображення та позиціонування (також вимагає Popper )
Моди для відображення, позиціонування та поведінки прокручування
Навігаційна панель для розширення нашого плагіна Collapse для впровадження адаптивної поведінки
Offcanvases для відображення, позиціонування та поведінки прокручування
Тости для показу та розпусти
Спливаючі підказки та спливні вікна для відображення та позиціонування (також вимагає Popper )
Scrollspy для оновлень поведінки прокручування та навігації

Початковий шаблон

Переконайтеся, що ваші сторінки налаштовані відповідно до найновіших стандартів дизайну та розробки. Це означає використання документа HTML5 і включення метатегу вікна перегляду для відповідної адаптивної поведінки. З’єднайте все разом, і ваші сторінки мають виглядати так:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
    -->
  </body>
</html>

Для наступних кроків відвідайте документи макета або наші офіційні приклади , щоб почати розміщувати вміст і компоненти вашого сайту.

Важливі глобали

Bootstrap використовує кілька важливих глобальних стилів і налаштувань, про які вам потрібно знати під час його використання, і всі вони майже виключно спрямовані на нормалізацію міжбраузерних стилів. Давайте зануримося.

Тип документа HTML5

Bootstrap вимагає використання HTML5 doctype. Без нього ви побачите якийсь дивний незавершений стиль, але його включення не повинно викликати значних проблем.

<!doctype html>
<html lang="en">
  ...
</html>

Адаптивний мета-тег

Bootstrap розроблено насамперед для мобільних пристроїв, це стратегія, у якій ми спочатку оптимізуємо код для мобільних пристроїв, а потім за потреби збільшуємо компоненти за допомогою медіа-запитів CSS. Щоб забезпечити правильну візуалізацію та сенсорне масштабування для всіх пристроїв, додайте метатег адаптивного вікна перегляду до свого <head>.

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

Ви можете побачити приклад цього в дії в стартовому шаблоні .

Розмір коробки

Для більш простого визначення розміру в CSS ми змінюємо глобальне box-sizingзначення з content-boxна border-box. Це гарантує padding, що остаточна обчислена ширина елемента не вплине, але може спричинити проблеми з деяким програмним забезпеченням сторонніх розробників, наприклад Google Maps і Google Custom Search Engine.

У рідкісних випадках вам потрібно змінити це, скористайтеся чимось на зразок наступного:

.selector-for-some-widget {
  box-sizing: content-box;
}

З наведеним вище фрагментом вкладені елементи, включно зі згенерованим вмістом через ::beforeі ::after, успадковуватимуть указаний box-sizingдля цього .selector-for-some-widget.

Дізнайтеся більше про модель коробки та розміри на CSS Tricks .

Перезавантаження

Для покращеного кросбраузерного рендерингу ми використовуємо Reboot , щоб виправити невідповідності між браузерами та пристроями, забезпечуючи при цьому дещо більш впевнені скидання типових елементів HTML.

Спільнота

Будьте в курсі розробок Bootstrap і зв’яжіться зі спільнотою за допомогою цих корисних ресурсів.

Прочитайте та підпишіться на офіційний блог Bootstrap .
Спілкуйтеся з іншими Bootstrappers в IRC. На irc.libera.chatсервері, в #bootstrapканалі.
Довідку щодо впровадження можна знайти на Stack Overflow (з тегом bootstrap-5).
Розробники повинні використовувати ключове слово bootstrapв пакетах, які змінюють або доповнюють функціональність Bootstrap під час розповсюдження через npm або подібні механізми доставки для максимальної видимості.

Ви також можете слідкувати за @getbootstrap у Twitter , щоб дізнаватися про останні плітки та дивовижні музичні відео.