Від автора: я вітаю вас. Використовуючи фреймворк Bootstrap адаптивна верстка сайту досягається дуже просто, адже вам не потрібно писати медіа-запити самостійно. Але все ж не можна просто взяти фреймворк, сказати йому “зроби мені адаптивний шаблон” і все буде готово. Від вас будуть потрібні теж зусилля, хоча б навичка читання документації. Що ж потрібно для адаптивної верстки на бутстрапе, розглянемо сьогодні.
До речі, рекомендую вам прочитати минулу статтю з нашої серії статей з цього фреймворку. Там я докладно показую приклад верстки нескладного макета. З тієї статті ви вже можете зрозуміти, як же реалізовується адаптивність.
Сітка
А вона реалізовується завдяки магічній сітці бутстрапа. Тут я рекомендую вам заглянути в документацію, вона знаходиться за цією адресою: getbootstrap.com
Російськомовну версію можна знайти, якщо перейти на сторінку Getting Started та прокрутити її в самий низ. Добре, тепер клацніть на пункт CSS, перед вами відкриється мануал по частині css фреймворка.
Зараз нас тут цікавить пункт Grid system. Ви можете його детально вивчити, хоча на це піде не 5 хвилин часу, але там наведені приклади дуже хороші, так що матеріал сприймається добре.
Власне, свій виклад того, як працює сітка я вже написав в одній з попередніх статей дуже докладно, тому не буду повторюватися. Знайти статтю про сітку можна в рубриці Bootstrap. У відеоформаті суть її роботи пояснює Андрій Кудлай в курсі від нашої команди, присвяченому якраз адаптивної верстці шаблонів за допомогою цього фреймворку.
Він платний, але зате в ньому верстаються дуже класні професійні сайти. Якщо ж вам таке навчання не потрібно і ви хотіли б спробувати отримати безкоштовну практику, можу запропонувати пройти серію уроків по Bootstrap, де верстається простий шаблон.
Власне, будь-яка практика допоможе вам швидко зрозуміти, як працювати з сіткою, тому приступайте до неї як можна швидше. Ну а далі в статті я розгляну ще кілька елементів на веб-сторінках, для яких може знадобитися адаптивність.
Зображення
За замовчуванням зображення в Bootstrap не адаптивні. Я не знаю, чому розробники так зробили, не заклавши правила адаптивності глобального селектору img, але в будь-якому разі проблема адаптивності картинок вирішується, просто знайте, що якщо ви спробуєте вставити велику картинку в маленький блок, нічого хорошого не вийде – зображення вилізе за межі блоку.
Але вирішити цю проблему дуже просто – додати до тегу img стильової клас img-responsive. Я думаю, що для кожного зображення додавати цей клас не дуже зручно, тому можна вчинити по-іншому – створити свій style.css, в якому вже для всіх картинок вказати такі правила, щоб вони були адаптивні. Які ж це правила? Клас img-responsive додає картинок наступні властивості:
img{
max-width: 100%;
height: auto;
display: block;
}
Відповідно, ви можете прописати їх не для класу, а просто для всіх зображень, це набагато розумніше і зручніше.
Таблиці
Будь-яка таблиця Bootstrap буде стискатися наскільки це для неї можливе, але коли вона буде максимально стиснута, подальше зменшення ширини вікна, врешті-решт, призведе до появи горизонтального скролла.
Фреймворк пропонує позбавлення від цієї проблеми. Просто помістіть всю таблицю div з класом table-responsive. Тобто це буде адаптивний контейнер для таблиці. Якщо вона сожметься до своїх максимальних розмірів, далі горизонтальний скрол буде відображатися у всієї сторінки, а тільки у блоку з таблицею. Ось таке цікаве рішення.
До речі, в деяких випадках такий прийом і не потрібен буде. Він підходить для великих таблицях, які на екранах 800 і менш пікселів в ширину ну ніяк не поміщаються.
Адаптивне відео
Зазвичай відео вставляється на сторінку в тег iframe, де вказується адреса до нього. Щоб адаптувати відео до перегляду на будь-яких екранах, оберніть його в div, якому вкажіть 2 класу. Перший – embed-responsive. Другий буде уточнюючим: embed-responsive-16by9 або embed-responsive-4by3.
Відповідно, вам потрібно визначити дозвіл відео, і потім вибрати, який клас підходить. В більшості випадків буде 16 на 9.
Як бачите, разом з Bootstrap адаптивна верстка сильно спрощується, хоча ми і розібрали досить прості приклади. Отримати хорошу практику адаптивної верстки ви зможете в курсі від нашої команди по практиці адаптивної верстки на Bootstrap, де зможете добре повторити теорію, а також зверстати 3 головні сторінки сайтів високої якості.
