НАЙКРАЩИЙ САЙТ ДЛЯ ВЕБ-РОЗРОБНИКІВ
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP ЯК ЗРОБИТИ W3.CSS JQUERY XML JAVA GO БІЛЬШЕ 🔍 ◑ КНИГИ ДОВІДНИКИ ВПРАВИ
Уроки по Bootstrap для початківців. W3Schools українською

En

Bootstrap 5 Початок роботи

❮ Prev Next ❯

Що таке Bootstrap?

  • Bootstrap — це безкоштовна інтерфейсна платформа для швидшої та легшої веб-розробки;
  • Bootstrap містить шаблони дизайну на основі HTML і CSS для типографіки, форм, кнопок, таблиць, навігації, модальних елементів, каруселей зображень і багато іншого, а також додаткові модулі JavaScript;
  • Bootstrap також дає вам можливість легко створювати адаптивний веб-дизайн.

Що таке адаптивний веб-дизайн?

Адаптивний веб-дизайн — це створення вебсайтів, які автоматично налаштовуються, щоб добре відображаються на всіх пристроях, від маленьких телефонів до великих комп’ютерів.

Bootstrap 5 Приклад

<div class="container-fluid p-5 bg-primary text-white text-center">
  <h1>Моя перша Bootstrap сторінка</h1>
  <p>Змініть розмір цієї адаптивної сторінки, щоб побачити ефект!</p>
</div>

<div class="container mt-5">
  <div class="row">
    <div class="col-sm-4">
      <h3>Стовпець 1</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
    <div class="col-sm-4">
      <h3>Стовпець 2</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
    <div class="col-sm-4">
      <h3>Стовпець 3</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
  </div>
</div>
Спробуйте самі »

Версії Bootstrap

Bootstrap 5 (випущено у 2021 році) — це найновіша версія Bootstrap (випущено у 2013 році); з новими компонентами, швидшою таблицею стилів і більшою оперативністю.

Bootstrap 5 підтримує найновіші стабільні версії всіх основних браузерів і платформ. Однак Internet Explorer 11 і старіші версії не підтримуються.

Основні відмінності між Bootstrap 5 і Bootstrap 3 & 4, полягає в тому, що Bootstrap 5 перейшов на ванільний JavaScript замість jQuery.

Примітка: Bootstrap 3 та Bootstrap 4 все ще підтримується командою щодо критичних виправлень помилок і змін документації, і продовжувати їх використання цілком безпечно. Однак до них НЕ буде додано нових функцій.

Навіщо використовувати Bootstrap?

Переваги Bootstrap:

  • Простий у використанні: будь-хто, хто має лише базові знання HTML і CSS, може почати використовувати Bootstrap;
  • Адаптивні функції: адаптивний CSS Bootstrap адаптується до телефонів, планшетів і комп’ютерів;
  • Мобільний підхід: у Bootstrap стилі, орієнтовані на мобільні пристрої, є частиною основної структури;
  • Сумісність із веббраузерами: Bootstrap 5 сумісний із усіма сучасними веббраузерами (Chrome, Firefox, Edge, Safari та Opera). Зауважте, що якщо вам потрібна підтримка IE11 і старішої версії, ви повинні використовувати або BS4, або BS3.

Де взяти Bootstrap 5?

Є два способи почати використовувати Bootstrap 5 на власному вебсайті.

Ви можете:

  • Підключіть Bootstrap 5 із CDN
  • Завантажте Bootstrap 5 з офіційного сайту getbootstrap.com

Bootstrap 5 CDN

Якщо ви не хочете самостійно завантажувати та розміщувати Bootstrap 5, ви можете включити його з CDN (Content Delivery Network / Мережа доставки вмісту).

jsDelivr забезпечує підтримку CDN для CSS і JavaScript Bootstrap:

MaxCDN:

<!-- Останній скомпільований і зменшений CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- Останній скомпільований JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

Одна з переваг використання CDN Bootstrap 5:
багато користувачів уже завантажили Bootstrap 5 із jsDelivr під час відвідування іншого сайту. У результаті він завантажуватиметься з кешу, коли вони відвідуватимуть ваш сайт, що пришвидшить час завантаження. Крім того, більшість CDN переконаються, що коли користувач запитує файл у них, він буде обслуговуватися з найближчого до нього сервера, що також призводить до швидшого часу завантаження.

JavaScript?Bootstrap 5 використовує JavaScript для різних компонентів (наприклад, модалів, підказок, спливаючих вікон тощо). Однак, якщо ви просто використовуєте частину CSS Bootstrap, вони вам не потрібні.

Завантаження Bootstrap 5

Якщо ви хочете самостійно завантажити та розмістити Bootstrap 5, перейдіть на сторінку https://getbootstrap.com/, і дотримуйтесь інструкцій.

Створіть свою першу вебсторінку за допомогою Bootstrap 5

1. Додайте тип документа HTML5

Bootstrap 5 використовує елементи HTML і властивості CSS, для яких потрібен тип документа HTML5.

Завжди включайте тип документа HTML5 на початку сторінки разом з атрибутом lang і правильною назвою та набором символів:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap 5 Приклад</title>
    <meta charset="utf-8">
  </head>
</html>

2. Bootstrap 5 насамперед мобільний

Bootstrap 5 розроблено таким чином, щоб реагувати на мобільні пристрої. Стилі для мобільних пристроїв є частиною базового фреймворка.

Щоб забезпечити належне відтворення та сенсорне масштабування, додайте такий тег <meta> у елемент <head>:

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

Частина width=device-width встановлює ширину сторінки відповідно до ширини екрана пристрою (яка буде різною залежно від пристрою).

Частина initial-scale=1 встановлює початковий рівень масштабування, коли сторінка вперше завантажується браузером.

3. Контейнери

Bootstrap 5 також вимагає вмісту, щоб обернути вміст сайту.

Є два класи контейнерів на вибір:

  1. Клас .container надає адаптивний контейнер фіксованої ширини
  2. Клас .container-fluid забезпечує контейнер повної ширини, що охоплює всю ширину вікна перегляду
.container
.container-fluid

Дві базові сторінки Bootstrap 5

У наступному прикладі показано код базової сторінки Bootstrap 5 (з адаптивним контейнером фіксованої ширини):

Container Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Приклад</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container">
  <h1>Моя перша Bootstrap сторінка</h1>
  <p>Ця частина знаходиться всередині класу .container.</p>
  <p>Клас .container забезпечує адаптивний контейнер фіксованої ширини.</p>
</div>

</body>
</html>
Спробуйте самі »

У наступному прикладі показано код базової сторінки Bootstrap 5 (з контейнером повної ширини):

Приклад гнучкого контейнера

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Приклад</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container-fluid">
  <h1>Моя перша Bootstrap сторінка</h1>
  <p>Ця частина знаходиться всередині класу .container-fluid.</p>
  <p>Клас .container-fluid забезпечує контейнер повної ширини, що охоплює всю ширину вікна перегляду.</p>
</div>

</body>
</html>
Спробуйте самі »
❮ Prev Next ❯