Фреймворк Bootstrap

Лабораторна робота #6

Фреймворк Bootstrap

Bootstrap - це відкритий і безкоштовний HTML, CSS і JS фреймворк, який використовується веб-розробниками для швидкої верстки адаптивних дизайнів сайтів та веб-додатків. Основна область його застосування - це розробка фронтенда сайтів і інтерфейсів адмінок. Bootstrap дозволяє верстати сайти в кілька разів швидше, ніж це можна виконати на «чистому» CSS і JavaScript. Початківець розробник може верстати досить якісні макети, які важко було б виконати без глибоких знань веб-технологій і достатньої практики.

Фреймворк Bootstrap містить набір CSS і JavaScript файлів, які потрібно підключити до сторінки. Після підключення стануть доступними інструменти даного фреймворка: сітка, класи і компоненти.

Переваги фреймворку Bootstrap

  • Висока швидкість створення якісної адаптивної верстки.
  • Кросбраузерність і кросплатформість (коректне відображення та робота сайту у різних браузерах і операційних системах).
  • Наявність великої кількості готових добре продуманих компонентівв єдиному стилі, протестованих величезним співтовариством веб-розробників на різних пристроях.
  • Можливість налаштування під власний проект: кількість колонок, кольору, радіуса заокруглень кутів елементів, відступи між колонками і багато іншого.
  • Для роботи з фреймворком не обов'язково мати глибокі знання з HTML, CSS, JavaScript і jQuery.
  • Наявність величезної спільноти, значної кількості статей, рецептів і відеоматеріалів.

Перші кроки з Bootstrap

Завантаження бібліотеки

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

На сторінці присутні три кнопки для завантаження

  • Compiled CSS and JS. Завантажити скомпільовані CSS та JS файли. Тут містяться лише базові стилі та скрипти, що готові до використання.
  • Source files. Містить фреймворк у вихідних кодах.
  • Examples. Містить приклади сторінок з різною структурною розміткою

Файлова структура сайту

Після завантаження бібліотеки потрібно створити базову файлову структуру, що на початку буде мати наступний вигляд:

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

Отже, в папці [css] мають міститися як мінімум 2 файли:

  • bootstrap.css
  • style.css (*.css)

В папці [js] розміщають плагіни для надання динамічності елементам сайту. Зазвичай, плагіни використовують функції бібліотеки jQuery, тому обов’язковим є наявність js-файлів jQuery та дотичних бібліотек. Також, розробник може створити власний js-файл, в який буде винесено ініціалізацію деяких методів чи властні аплети.

Отже, в папці [js] мають міститися як мінімум 3 файли:

Для розгортання веб-проекту, потрібно додати папки [images] та [fonts]. Там будуть міститися відповідно зображення, що відносяться до сайту проекту та використані шрифти, зокрема іконкові.

Під’єднання файлів на сторінці

Тепер, потрібно підключити ці файли до сторінки

Початковий шаблон HTML-сторінки виглядатиме так

	<!doctype html>  
	<html>    
		<head>
			<meta charset="utf-8">      
			<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">        
			<link rel="stylesheet" href="css/bootstrap.css">
			<link rel="stylesheet" href="css/style.css">
			<title>Hello, world!</title>    
		</head> 
		<body>  

			<h1>Hello, world!</h1>        

		<script src="js/jquery.js"></script>      
		<script src="js/popper.js></script>      
		<script src="js/bootstrap.js"></script>

		</body>  
	</html>

Корисні ресурси