Bootstrap Початок навчання
Що таке Bootstrap?
- Bootstrap — це безкоштовна інтерфейсна платформа для швидшої та легшої веб-розробки
- Bootstrap містить шаблони дизайну на основі HTML і CSS для типографіки, форм, кнопок, таблиць, навігації, модальних елементів, каруселей зображень і багато іншого, а також додаткові модулі JavaScript
- Bootstrap також дає вам можливість легко створювати адаптивний дизайн
Що таке адаптивний веб-дизайн?
Адаптивний веб-дизайн — це створення вебсайтів, які автоматично налаштовуються, щоб добре виглядати на всіх пристроях, від маленьких телефонів до великих комп’ютерів.
Bootstrap Приклад
<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 був розроблений Марком Отто і Джейкобом Торнтоном у Twitter і випущений як продукт з відкритим кодом у серпні 2011 року на GitHub.
У червні 2014 року Bootstrap став проектом №1 на GitHub!
Навіщо використовувати Bootstrap?
Переваги Bootstrap:
- Простий у використанні: Будь-хто, хто має лише базові знання HTML і CSS, може почати використовувати Bootstrap
- Адаптивні функції: адаптивний CSS Bootstrap адаптується до телефонів, планшетів і комп’ютерів
- Мобільний підхід: у Bootstrap 3 стилі, орієнтовані на мобільні пристрої, є частиною основної структури
- Сумісність із веб-браузерами: Bootstrap сумісний із усіма сучасними веб-браузерами (Chrome, Firefox, Internet Explorer, Edge, Safari та Opera)
Версії Bootstrap
У цьому підручнику описано Bootstrap 3, випущений у 2013 році. Однак ми також розглядаємо новіші версії; Bootstrap 4 (випущено 2018) і Bootstrap 5 (випущено 2021).
Bootstrap 5 є найновішою версією Bootstrap; з новими компонентами, швидшими таблицями стилів, більшою швидкістю реагування тощо. Він підтримує найновіші стабільні випуски всіх основних браузерів і платформ. Однак Internet Explorer 11 і старіші версії не підтримуються.
Основні відмінності між Bootstrap 5 і Bootstrap 3 & 4, полягає в тому, що Bootstrap 5 перейшов на JavaScript замість jQuery.
Примітка: Bootstrap 3 та Bootstrap 4 все ще підтримується командою щодо критичних виправлень помилок і змін документації, і продовжувати їх використання цілком безпечно. Однак до них НЕ буде додано нових функцій.
Де взяти Bootstrap?
Є два способи почати використовувати Bootstrap на власному вебсайті.
Ви можете:
- Завантажити Bootstrap із https://getbootstrap.com/
- Підключити Bootstrap із CDN
Завантажити Bootstrap
Якщо ви хочете самостійно завантажити та розмістити Bootstrap, перейдіть на сторінку https://getbootstrap.com/, і дотримуйтесь інструкцій там.
Bootstrap CDN
Якщо ви не хочете самостійно завантажувати та розміщувати Bootstrap, ви можете включити його з CDN (Content Delivery Network / Мережа доставки вмісту).
MaxCDN забезпечує підтримку CDN для CSS і JavaScript Bootstrap. Ви також повинні включити jQuery:
MaxCDN:
<!-- Останній скомпільований і зменшений CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<!-- jQuery бібліотека -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<!-- Остання компіляція JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
Одна з переваг використання Bootstrap CDN:
багато користувачів уже завантажили Bootstrap із MaxCDN під час відвідування іншого сайту. У результаті він завантажуватиметься з кешу, коли вони відвідуватимуть ваш сайт, що пришвидшить час завантаження. Крім того, більшість CDN переконаються, що коли користувач запитує файл у них, він буде обслуговуватися з найближчого до них сервера, що також призводить до швидшого часу завантаження.
jQuery
Bootstrap використовує jQuery для плагінів JavaScript (наприклад, модальних, спливаючих підказок тощо). Однак, якщо ви використовуєте лише частину CSS Bootstrap, вам не потрібен jQuery.
Створіть першу вебсторінку за допомогою Bootstrap
1. Додайте тип документа HTML5
Bootstrap використовує елементи HTML і властивості CSS, для яких потрібен тип документа HTML5.
Завжди включайте тип документа HTML5 на початку сторінки, а також атрибут lang і коректний набір символів (utf-8):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
</html>
2. Bootstrap 3 в першу чергу підходить для мобільних пристроїв
Bootstrap 3 розроблено таким чином, щоб реагувати на мобільні пристрої. Стилі для мобільних пристроїв є частиною основи фреймворка.
Щоб забезпечити належне відтворення та сенсорне масштабування, додайте наступний тег <meta> у елемент <head>:
<meta name="viewport" content="width=device-width, initial-scale=1">
Частина width=device-width встановлює ширину сторінки відповідно до ширини екрана пристрою (яка буде різною залежно від пристрою).
Частина initial-scale=1 встановлює початковий рівень масштабування, коли сторінка вперше завантажується браузером.
3. Контейнери
Bootstrap також вимагає вмісту, щоб обернути вміст сайту.
Є два класи контейнерів на вибір:
- Клас
.containerзабезпечує адаптивний контейнер фіксованої ширини - Клас
.container-fluidзабезпечує контейнер повної ширини, що охоплює всю ширину вікна перегляду
Дві базові сторінки Bootstrap
У наступному прикладі показано код базової сторінки Bootstrap (з адаптивним контейнером фіксованої ширини):
Приклад
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Приклад</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
</body>
</html>
Спробуйте самі »
У наступному прикладі показано код базової сторінки Bootstrap (з контейнером повної ширини):
Приклад
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Приклад</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
</body>
</html>
Спробуйте самі »
