вступ

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

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

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

CSS

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

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

JS

Для роботи багатьох наших компонентів потрібне використання JavaScript. Зокрема, їм потрібні jQuery , Popper і наші власні плагіни JavaScript. Ми використовуємо тонку збірку jQuery , але також підтримується повна версія.

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

пучок

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

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

Окремий

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

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>

компоненти

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

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

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

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

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

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

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

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

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

    <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>
    -->
  </body>
</html>

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

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

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

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

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

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

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

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

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

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

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

Для більш простого визначення розміру в 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-4).
Розробники повинні використовувати ключове слово bootstrapв пакетах, які змінюють або доповнюють функціональність Bootstrap під час розповсюдження через npm або подібні механізми доставки для максимальної видимості.

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

CSP та вбудовані SVG

Декілька компонентів Bootstrap включають вбудовані SVG у наш CSS для узгодженого й легкого стилізації компонентів у різних браузерах і пристроях. Для організацій із більш суворими конфігураціями CSP ми задокументували всі екземпляри наших вбудованих SVG (усі вони застосовуються через background-image), щоб ви могли детальніше переглянути свої варіанти.

Кнопка "Закрити" (використовується в сповіщеннях і режимах)
Спеціальні прапорці та перемикачі
Перемикачі форм
Піктограми перевірки форми
Спеціальне меню вибору
Елементи керування каруселі
Кнопки перемикання панелі навігації

Виходячи з обговорення спільноти , деякі варіанти вирішення цього питання у вашій власній кодовій базі включають заміну URL-адрес на локально розміщені ресурси, видалення зображень і використання вбудованих зображень (можливо не в усіх компонентах), а також зміну вашого CSP. Наша рекомендація полягає в тому, щоб уважно переглянути власні політики безпеки та вибрати найкращий шлях, якщо це необхідно.