Bootstrap використовує власні файли CSS та JavaScript, на які потрібно посилатися. Ви також повинні переконатися, що ваша сторінка містить кілька стандартних елементів, як описано нижче.
Файли CSS та JavaScript
Ви можете безпосередньо посилатися на файли через Bootstrap CDN (Content Delivery Network, Мережа) доставки контенту). Всі плагіни Bootstrap використовують jQuery, тому потрібно переконатися, що він також увімкнений.
Вставте наступний код всередину <head> документа.
><code data-language="html"><!--Останній скомпільований та мінімізований Bootstrap CSS--> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
Вставте наступні JavaScript-файли вниз документа (перед закриваючим тегом <body>) .
<code data-language="html"><!--Бібліотека jQuery--> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <!--Popper.js для підказок--> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <!--Останній скомпільований та мінімізований Bootstrap JavaScript--> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
Стандарти дизайну та розробки
Щоб отримати максимальну віддачу від Bootstrap 4, переконайтеся, що ваші сторінки включають в себе наступне.
<!DOCTYPE> HTML5
Ваші HTML-документи повинні починатися з оголошення <!DOCTYPE> HTML5. Ось так.
<code data-language="html"><!DOCTYPE html> <html lang="ru"> ... </html>
Додайте метатег viewport
Щоб забезпечити правильне відображення та масштабування на мобільних пристроях, додайте метатег viewport. На кшталт цього.
<code data-language="html"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
Ви можете (не обов'язково) відключити можливість масштабування на мобільних пристроях, додавши user-scalable=no до списку значень content. Однак це не рекомендується.
Швидкий старт: шаблон Bootstrap 4
Ви можете використовувати наступний шаблон як основу для веб-сторінок Bootstrap 4. Цей шаблон містить необхідний <!DOCTYPE> , посилання на файли CSS та JS, а також метатег viewport.
<code data-language="html"><!--Доктайп--> <!DOCTYPE html> <html lang="ru"> <head> <title>Приклад шаблону Bootstrap</title> <meta charset="utf-8"> <!--Метатег Viewport--> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!--Bootstrap CSS--> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> </head> <body> <!--Ваш вміст починається тут--> <!--Ваш вміст закінчується тут--> <!--JavaScript: розміщується в кінці документа, щоб сторінки завантажувалися швидше--> <!--Бібліотека jQuery--> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <!--Popper.js--> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <!--Останній скомпільований та мінімізований Bootstrap JavaScript--> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> </body> </html>