Підключення та використання bootstrap - курс основи css від devionity

Підключення. Для підключення фреймворка необхідно або скачати пакет файлів і підключити їх в тезі . або підключити їх віддалено - там же. наприклад,

Для відображення контенту сторінки в фреймворку розроблена т.зв. система сітки (grid system), яка дозволяє створювати (за замовчуванням) до 12 колонок (і відповідних рядків) на сторінці, причому ця конструкція може залежати від пристрою, на якому проглядається сторінка.

Наприклад, для пристроїв середнього розміру (medium devices), можливо визначити стовпці наступним чином:

→ На повний екран

що буде означати два стовпці, в перший з яких має умовну довжину 8, а другий - 4 з 12. В сумі ці значення, очевидно, дають також 12. Фактично ширина стовпця задається пропорційно. Інший приклад:

означає, що буде 3 стовпці однакової ширини. Або ж

Чи означає 1 стовпець розтягнутий по всій ширині екрану.

Очевидно, що на мобільному пристрої не вміститься макет, призначений для ПК. Описані вище макети на мобільному пристрої будуть відображені не в вигляді стовпців, а один під іншим - оскільки їм не вистачить місця по горизонталі. У фреймворку були розроблені спеціальні класи для роботи з мобільними пристроями. Ці класи можна вказувати для альтернативного макета в разі мобільного пристрою (xs - mobile devices, sm - small devices). наприклад,

означає, що в макеті два осередки, але пропорція їх ширини буде різною при відображенні на ПК або на мобільному пристрої: 8 і 4 на ПК в один рядок, або 2 і 10 на мобільному пристрої. В сумі обидві пари значень дають 12, тому будуть розміщені в одному рядку.

Створення меню. Для створення меню використовують клас nav (в блок цього класу поміщають кнопки або посилання) і клас navbar в який поміщають готову навігацію. наприклад,

Navbar - адаптивний компонент, який використовують в якості блоку з навігацією сайту.

Адаптивність в даному випадку полягає в тому, що ці компоненти "згортаються" при відображенні з мобільних пристроїв, якщо пункти навігації не вміщаються по горизонталі.

→ На повний екран