Розклад
Розклад

Веб-технології та веб-дизайн

#8Бібліотека 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>

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

Порядок роботи

  1. Ознайомитися з документацією Bootstrap, завантажити дистрибутиви.
  2. Використовуючи відеоуроки створити тестову сторінку. Застосувати на сторінці типові елементи сторінки - верхня та нижня частини сторінки, навігація, форма та кнопки, ліва та центральна колонки, іконковий шрифт, випадний список тощо.
  3. Протестувати тестову сторінку на адаптивність при різних розмірах екрану та пристроїв.
  4. Ознайомитися з прикладами різних структур сторінок і з’ясувати особливості застосовних класів.
  5. Протестувати сторінку на різних браузерах та пристроях.
  6. Розмістити тестову сторінку на хостингу. Результат виконання демонструвати в Інтернеті.
  7. Під час виконання роботи робити скріншоти основних етапів роботи. Оформити звіт.

Зміст звіту

  1. Назва та мета виконання лабораторної роботи.
  2. Вказати доменну адресу, назву і короткий опис проведених дій.
  3. Скріншоти послідовності створення сторінки з коротким описом кожного з етапів.
  4. У висновку оцінити зручність використання фреймворка Bootstrap.

Контрольні питання

  1. Які основні переваги надає Bootstrap для веб-розробників?
  2. Які базові модулі складають фреймворк?
  3. Які якості притаманні шаблонам сторінок на базі Bootstrap?
  4. Яким чином Bootstrap пропонує зробити розподілення інформації по кількох колонках?
  5. Які класи Bootstrap надають змогу форматувати фрагменти тексту?
  6. Які візуальні акценти можна застосувати до фрагментів тексту?
  7. Які файли з бібліотеки Bootstrap є важливими та першочерговими для під’єднання?
  8. Назвіть динамічні елементи, які можна вирішувати скриптами бібліотеки.
  9. Яку зовнішню JS-бібліотеку обов’язково потрібно підключити до сайту Bootstrap? Чому?
  10. Чим відрізняються різні версії Bootstrap між собою?
TOP