НАЙКРАЩИЙ САЙТ ДЛЯ ВЕБ-РОЗРОБНИКІВ
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP ЯК ЗРОБИТИ W3.CSS JQUERY XML JAVA GO БІЛЬШЕ 🔍 ◑ КНИГИ ДОВІДНИКИ ВПРАВИ

Bootstrap 4 Підручник

BS4 Головна BS4 Початок роботи BS4 Контейнери BS4 Базова сітка BS4 Типографіка BS4 Кольори BS4 Таблиці BS4 Зображення BS4 Джамботрон BS4 Оповіщення BS4 Кнопки BS4 Групи кнопок BS4 Бейджи BS4 Прогрес-бари BS4 Спінери BS4 Пагінація BS4 Список груп BS4 Карточки BS4 Випадаючи списки BS4 Згортання BS4 Навігація BS4 Навбари BS4 Форми BS4 Введення BS4 Групи введення BS4 Користувальницькі форми BS4 Карусель BS4 Модал BS4 Підказка BS4 Поповер BS4 Тост BS4 Прокрутка BS4 Утілити BS4 Flex BS4 Іконки BS4 Медіа об’єкти BS4 Фільтри

Bootstrap 4 Сітка

BS4 Система сіток BS4 Складений/Горизонтальний BS4 Сітка XSmall BS4 Сітка Small BS4 Сітка Medium BS4 Сітка Large BS4 Сітка XLarge BS4 Приклади Сітки

Bootstrap 4 Інше

BS4 Основний шаблон BS4 Вправи BS4 Вікторина BS4 Сертифікат

Bootstrap 4 Довідник

Всі класи JS Попередження JS Кнопка JS Карусель JS Згортання JS Випадаючи списки JS Модал JS Поповер JS Прокрутка JS Вкладка JS Тости JS Підказка

Уроки по Bootstrap для початківців. W3Schools українською

En

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

❮ Prev Next ❯

Що таке Bootstrap?

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

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

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

Bootstrap 4 Приклад

<div class="jumbotron text-center">
  <h1>My First Bootstrap Page</h1>
  <p>Resize this responsive page to see the effect!</p>
</div>

<div class="container">
  <div class="row">
    <div class="col-sm-4">
      <h3>Column 1</h3>
      <p>Lorem ipsum dolor..</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 2</h3>
      <p>Lorem ipsum dolor..</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 3</h3>
      <p>Lorem ipsum dolor..</p>
    </div>
  </div>
</div>
Спробуйте самі »

Bootstrap Версії

У цьому посібнику йдеться про Bootstrap 4, який було випущено в 2018 році як оновлення до Bootstrap 3, з новими компонентами, швидшою таблицею стилів, більшою швидкістю реагування тощо.

Bootstrap 5 (випущено у 2021 році) – це найновіша версія Bootstrap; Він підтримує найновіші стабільні версії всіх основних браузерів і платформ. Однак 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 4 сумісний із усіма сучасними веб-браузерами (Chrome, Firefox, Internet Explorer 10+, Edge, Safari та Opera)

Де взяти Bootstrap 4?

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

Ви можете:

  • Включіть Bootstrap 4 із CDN
  • Завантажте Bootstrap 4 із getbootstrap.com

Bootstrap 4 CDN

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

jsDelivr забезпечує підтримку CDN для CSS і JavaScript Bootstrap. Ви також повинні включити jQuery:

jsDelivr:

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

<!-- jQuery бібліотека -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.1/dist/jquery.slim.min.js"></script>

<!-- Popper JS -->
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>

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

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

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

  • Сповіщення, які можна закрити
  • Кнопки та прапорці/перемикачі для перемикання станів
  • Карусель для слайдів, елементів керування та індикаторів
  • Згорнути для перемикання вмісту
  • Спадні списки (також потрібен Popper.js для ідеального позиціонування)
  • Модальні (відкриті та закриті)
  • Навігаційна панель (для меню, що згортаються)
  • Спливаючі підказки та спливаючі вікна (також потрібен Popper.js для ідеального позиціонування)
  • Scrollspy для оновлень поведінки прокручування та навігації

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

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

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

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

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

Завжди включайте тип документа HTML5 на початку сторінки, а також атрибут lang і правильний набір символів (utf-8):

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
  </head>
</html>

2. Bootstrap 4 в першу чергу підходить для мобільних пристроїв

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

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

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

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

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

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

Для Bootstrap 4 також потрібен елемент-контейнер для обгортання вмісту сайту.

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

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

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

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

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

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.1/dist/jquery.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container">
  <h1>My First Bootstrap Page</h1>
  <p>This is some text.</p>
</div>

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

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

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

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

<div class="container-fluid">
  <h1>My First Bootstrap Page</h1>
  <p>This is some text.</p>
</div>

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