От автора: я приветствую вас. Используя фреймворк Bootstrap адаптивная верстка сайта достигается очень просто, ведь вам не нужно писать медиа-запросы самостоятельно. Но все же нельзя просто взять фреймворк, сказать ему “сделай мне адаптивный шаблон” и все будет готово. От вас потребуются тоже усилия, хотя бы навык чтения документации. Что же нужно для адаптивной верстки на бутстрапе, рассмотрим сегодня.
Кстати, рекомендую вам прочитать прошлую статью из нашей серии статей по этому фреймворку. Там я подробно показываю пример верстки несложного макета. Из той статьи вы уже можете немного понять, как же реализовывается адаптивность.
Сетка
А реализовывается она благодаря магической сетке бутстрапа. Тут я рекомендую вам заглянуть в документацию, она находится по этому адресу: getbootstrap.com
Русскоязычную версию можно найти, если перейти на страницу Getting Started и прокрутить ее в самый низ. Хорошо, теперь кликните на пункт CSS, перед вами откроется мануал по части css фреймворка.
Сейчас нас здесь интересует пункт Grid system. Вы можете его подробно изучить, хотя на это и уйдет не 5 минут времени, но примеры там приведены очень хорошие, так что материал воспринимается хорошо.
Собственно, свое изложение того, как работает сетка я уже написал в одной из предыдущих статей очень подробно, поэтому не буду повторяться. Найти статью про сетку можно в рубрике Bootstrap. В видеоформате суть ее работы объясняет Андрей Кудлай в курсе от нашей команды, посвященном как раз адаптивной верстке шаблонов с помощью этого фреймворка.
Он платный, но зато в нем верстаются очень классные профессиональные сайты. Если же вам пока такое обучение не нужно и вы хотели бы попробовать получить бесплатную практику, могу предложить пройти серию уроков по Bootstrap, где верстается простой шаблон.
Собственно, любая практика поможет вам быстро понять, как работать с сеткой, поэтому приступайте к ней как можно скорее. Ну а далее в статье я рассмотрю еще несколько элементов на веб-страницах, для которых может потребоваться адаптивность.
Изображения
По умолчанию изображения в Bootstrap не адаптивны. Я не знаю, почему разработчики так сделали, не заложив правила адаптивности глобальному селектору img, но в любом случае проблема адаптивности картинок решается, просто знайте, что если вы попробуете вставить большую картинку в маленький блок, ничего хорошего не выйдет – изображение вылезет за пределы блока.
Но решить эту проблему крайне просто – добавить к тегу img стилевой класс img-responsive. Я думаю, что для каждого изображения добавлять этот класс не очень удобно, поэтому можно поступить по-другому – создать свой style.css, в котором уже для всех картинок указать такие правила, чтобы они были адаптивны. Какие же это правила? Класс img-responsive добавляет картинкам следующие свойства:
|
1 2 3 4 5 |
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 главных странички сайтов высокого качества.
