Image default
Bootstrap Front-end

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

Розробку веб-додатків можна розділити на два періоди, до і після появи Bootstrap. У 2011 році був випущений найбільший з усіх клієнтських фреймворків. У тому ж році значно розширилася сфера застосування фреймворка, охопивши майже всі сегменти ринку.

Причина проста: уявіть, наскільки складно було створити просто красиву кнопку. Для цього потрібно оголосити масу класів і стилів.

Тепер усім цим займається фреймворк Bootstrap, створений розробниками з Twitter. Він змінив саму парадигму розробки швидко мінливих веб-інтерфейсів.

Перевага Bootstrap грунтується на трьох аспектах

Перший – таблиця стилів, яка містить базову CSS-розмітку практично для кожного HTML-елемента, що забезпечує їм однаково привабливий вигляд.

Другий аспект – компоненти. Їх можна використовувати багаторазово простим копіюванням і вставкою коду.

І останній аспект – підключені модулі, або плагіни на JavaScript, що дозволяють створювати додаткові елементи, які більше ніде не можна знайти.

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

З появою і зростанням популярності мобільних пристроїв, розробники повинні були пристосуватися до вирішення нових проблем, таких як використання різних компоновок для різних дозволів, новий підхід до роботи з користувачем і оптимізація продуктивності для підтримки з’єднань з низькою пропускною здатністю.

При цьому, залишалася ще маса старих проблем, пов’язаних з сумісністю браузерів і відсутністю єдиних шаблонів проектування.

Вирішення цих проблем і було поставлено на чільне місце при проектуванні фреймворка Bootstrap. Основною метою розробників з Twitter було створення клієнтського фреймворка для адаптивної розробки, сумісного з основними браузерами. Результат вийшов чудовим! Веб-розробники взяли його з захопленням і негайно почали використовувати.

Існує кілька версій фреймворка, але ми будемо використовувати останню версію Bootstrap 4.

Отже, перейдіть на офіційній веб-сайт Bootsrap і клацніть на кнопці Download Bootstrap (Завантажити Bootstrap), яку можна бачити на малюнку

Перед вами відкриється інша сторінка з наступними кнопками:

  1. Download Bootstrap (Завантажити Bootstrap): для завантаження компільованою версії;
  2. Get started – для підключення файлів CSS/JS, а також інтеграції стартового шаблону.

Базовий шаблон дозволить відразу використовувати стилі та інші елементи Bootstrap, оскільки всі файли підтягуються через Інтернет.

Установка фреймворку

А тепер, після завантаження фреймворку і знайомства з його структурою, перейдемо до підключення Bootstrap в веб-сторінках.

Структура папок

Для початку, пояснимо структуру папок, яка буде виконуватисяВміст Bootstrap витягується в папку main_folder (при завантаженні вона має назву bootstrap-4.1.3-dist) і в ній же створимо файл hello_world.html.

Папки Bootstrap містять файли шрифтів, CSS і JavaScript. Структуру папок фреймворку показана на малюнку.

Приклад підключення стартового шаблону

А тепер, дотримуючись рекомендацій, підключимо фреймворк Bootstrap на сторінку hello_world.html. Відкрийте файл сторінки в текстовому редакторі і додайте в нього наступну розмітку HTML:

Для адекватної роботи фреймворка Bootstrap в початок тега <head> необхідно додати метатеги. Вони визначають кодування тексту і забезпечують відображення на мобільних пристроях:

viewport пов’язаний з філософією розробки в першу чергу для мобільних пристроїв. Він гарантує належне відображення в мобільних пристроях і масштабування дотиком.

Потім всередину тегу <head> додайте код для завантаження css-файлу:

І в кінці тега <body> завантажте JavaScript-файл:

Створення першого прикладу з використанням Bootstrap

На поточний момент ми підготували все необхідне для використання фреймворку. Замініть рядок Hello World! в тезі body наступним чином:

 

Результат відображення в браузері

Ви створили першу сторінку з використанням Bootstrap. Це дуже проста сторінка, але тут важливо було зрозуміти, як правильно налаштувати фреймворк.

Крім того, в цей приклад було додано кілька компонентів, які будуть розглянуті в подальшому.

Related posts

Початок роботи з HTML. Структура веб-документа

Admin_Black.Prince

HTML-атрибути

Just_Programmer

21 коментар

Leave a Comment