Почніть роботу з Bootstrap

Bootstrap — це потужний інтерфейсний інструментарій із багатим набором функцій. Створіть будь-що — від прототипу до виробництва — за лічені хвилини.

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

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

Розпочніть роботу, включивши готовий CSS і JavaScript Bootstrap через CDN без необхідності виконувати будь-які етапи створення. Перегляньте це на практиці за допомогою цієї демонстрації Bootstrap CodePen .

Створіть новий index.htmlфайл у корені вашого проекту. Також додайте <meta name="viewport">тег для відповідної поведінки мобільних пристроїв.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>

Додайте CSS і JS Bootstrap. Розмістіть <link>тег <head>для нашого CSS і <script>тег для нашого пакета JavaScript (включно з Popper для позиціонування розкривних списків, попперів і підказок) перед закриваючим </body>. Дізнайтеся більше про наші посилання CDN .

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
  </body>
</html>

Ви також можете включити Popper і наш JS окремо. Якщо ви не плануєте використовувати спадні списки, спливаючі вікна чи спливаючі підказки, заощадьте кілька кілобайтів, не включаючи Popper.

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz" crossorigin="anonymous"></script>

Привіт Світ! Відкрийте сторінку в обраному браузері, щоб переглянути сторінку Bootstrapped. Тепер ви можете почати будувати за допомогою Bootstrap, створивши власний макет , додавши десятки компонентів і використовуючи наші офіційні приклади .

CDN посилання

Для довідки ось наші основні посилання CDN.

опис	URL
CSS	`https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css`
JS	`https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js`

Ви також можете використовувати CDN для отримання будь-якої з наших додаткових збірок, перелічених на сторінці вмісту .

Наступні кроки

Прочитайте трохи більше про деякі важливі параметри глобального середовища, які використовує Bootstrap.
Прочитайте про те, що включено до Bootstrap, у нашому розділі вмісту та перелік компонентів, які потребують JavaScript, нижче.
Потрібно трохи більше енергії? Розгляньте можливість створення за допомогою Bootstrap, включивши вихідні файли через менеджер пакетів .
Хочете використовувати Bootstrap як модуль із <script type="module">? Будь ласка, зверніться до нашого розділу про використання Bootstrap як модуля .

Компоненти JS

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

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

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

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

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

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

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

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

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