Как сделать сайдбар с помощью Bootstrap?
Верстаем шаблон страницы сайта с помощью BOOTSTRAP
В сегодняшнем уроке, я расскажу вам, как легко и просто создать сайдбар в шаблоне сайта, с помощью фреймворка bootstrap.
Для тех, кто не знает что такое bootstrap - объясню коротко:
Bootstrap - это популярный фреймворк, с помощью которого можно легко сверстать шаблон и добавить некий функционал на сайт - например всплывающие окна или подсказки при наведении на объект. Функционал достаточно обширный. Если вы занимаетесь разработкой сайтов, то знание этого фреймворка вам просто необходимо!
Лично для нашей веб-студии бутстрап является незаменимым помощником при верстке шаблонов.
Основное преимущество Bootstrap - это блочная верстка, которая позволяет использовать всего несколько страниц кода для верстки нескольких блоков по горизонтали. Например, вы хотите перечислить три тарифа в блоках по горизонтали. Bootstrap реализует это легко уже с адаптацией по ширине экрана, а также мобильной версией. У вас не будет необходимости подгонять блоки по ширине экрана, писать разные стили, использовать @media.
Как это делается?
Я напишу код, а дальше разберу его по частям:
<div class="row">
<div class="col-sm-4">
Первый блок
</div>
<div class="col-sm-4">
Второй блок
</div>
<div class="col-sm-4">
Третий блок
</div>
</div>
А вот так этот блок отобраться на странице:
Первый блок
Второй блок
Третий блок
Что такое ROW
Row переводится как ряд. Создавая блок с классом row вы обозначаете ряд, в котором будут отображаться элементы ряда в виде сетки (COL). Подробнее на рисунке:
Что такое Col?
Col - это колонка. В одном ряду может быть максимум 12 колонок.
Числа в классе col означают ширину колонок. Таким образом вы можете создать несколько колонок с разными размерами по горизонтали. Главное, чтобы общая ширина всех колонок не превысила число 12.
Переходим непосредственно к сайдбару...
Верстаете шаблон и возникла необходимость разместить адаптивный сайдбар? Легко!
Давайте напишем следующий код (скелет) шаблона.
<div class="row">
<div class="col-sm-8">
Основной контент
</div>
<div class="col-sm-4">
Сайдбар
</div>
</div>
Результатом данного кода будет шаблон вида:
Таким образом мы создали скелет шаблона, в котором ширина сайдбара будет равна 4 колонкам, а основного контента и всего что будет на сайте - 8. В общем 12 колонок. Нужен сайдбар пошире или поуже? Меняем значения колонок.
Плюс bootstrap'а в том, что он изначально адаптивный. В примере выше при просмотре сайта через мобильные устройства сайдбар переместиться вниз за блок с основным контентом, и выглядеть это будет следующим образом:
Обратите внимание, что вы можете создавать ряды в рядах, и колонки в колонках. В этом и есть вся прелесть фреймворка. Заполните контент и сайдбар так как вам удосужится, и он будет адаптивно отображаться на всех устройствах.
Не забывайте, чтобы bootstrap заработал у вас на сайте, его надо предварительно добавить на сервер.
Арсен Амбарцумян
Источник на материал: Как сделать сайдбар с помощью Bootstrap?
Поделиться записью
