Source

вступ

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

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

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

CSS

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

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

JS

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

Ми використовуємо тонку збірку jQuery , але також підтримується повна версія.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

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

Наші bootstrap.bundle.jsвключають Popperbootstrap.bundle.min.js , але не jQuery . Для отримання додаткової інформації про те, що включено до Bootstrap, перегляньте наш розділ змісту .

Показати компоненти, для яких потрібен JavaScript
  • Оповіщення про звільнення
  • Кнопки для перемикання станів і функції прапорців/радіо
  • Карусель для всіх режимів слайдів, елементів керування та індикаторів
  • Згорнути для перемикання видимості вмісту
  • Випадаючі списки для відображення та позиціонування (також потрібен Popper.js )
  • Моди для відображення, позиціонування та поведінки прокручування
  • Панель навігації для розширення нашого плагіна Collapse для впровадження адаптивної поведінки
  • Спливаючі підказки та спливаючі елементи для відображення та позиціонування (також потрібен Popper.js )
  • 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, shrink-to-fit=no">

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

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

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 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 і зв’яжіться зі спільнотою за допомогою цих корисних ресурсів.

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

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