Как с помощью Bootstrap 3 создать несколько адаптивных столбцов

Хотели бы вы улучшить адаптивность своего сайта с помощью Бутстрап? Важнейшим аспектом этого фреймворка является его базовая сетка с 12 колонками, которая используется для создания гибкого шаблона.

Мы создадим простой сайт с использованием Bootstrap и научимся использовать его сетку.

Перед выполнением руководства

Прежде чем следовать приведенному ниже руководству нужно:

  • Иметь общее понимание того, что такое Bootstrap;
  • Как работает система сеток Bootstrap;
  • Загрузить Bootstrap на жесткий диск;
  • Создать базовый файл Bootstrap index.html.

Что такое Bootstrap

Бутстрап 3 - это платформа для HTML, CSS и JavaScript разработчиков, создающих адаптивные сайты. Фреймворк состоит из созданных адаптивных CSS-стилей столбцов, списков, меню навигации, форм и других элементов.

Система сеток Bootstrap

  • Система сеток Bootstrap классифицирует размеры экрана по четырем типам: сверхмалые, малые, средние и большие;
  • Сверхмалые - это экраны смартфонов. Малые - планшетов, таких как iPad. Средние - стационарные мониторы и большие;
  • Чтобы помочь точно настроить адаптивные функции для этих типов экранов, Bootstrap делит ширину экрана на 12 столбцов;
  • Каждый из этих четырех типов сеток Бутстрап становится адаптивным, только если ему назначается отдельный класс CSS;
  • Например, чтобы сделать div адаптивным на небольших устройствах, этот div должен иметь собственный класс Bootstrap .col-xs-<количество_столбцов>, например <div class = "col-xs-6">.

Загрузка Bootstrap

Перейдите на сайт getboostrap.com и нажмите кнопку «Download Bootstrap»:

01_download_bootstrap

Вы увидите страницу «Начало работы». Нажмите кнопку «Загрузить Bootstrap»:

02_download_bootstrap_button_02

Сохраните файл на жестком диске. Его не нужно сохранять на сервере. Разархивируйте файл и переименуйте извлеченную папку в "bootstrap".

Подготовка базовой страницы Bootstrap index.html

Шаг 1. Создайте файл Bootstrap index.html

Вернитесь на страницу «Начало работы» и нажмите ссылку «Basic Template» в правой боковой панели:

03_basic_template_link

Вы увидите код Бутстрап шаблона. Нажмите кнопку «Копировать», чтобы скопировать код:

04_copy_button

Вставьте код «Basic Template» в текстовый редактор и сохраните его как файл index.html в той же папке, где находится папка «bootstrap». Теперь он станет главной страницей сайта Bootstrap.

Откройте вновь созданный файл index.html в браузере и просмотрите свой базовый сайт Bootstrap:

05_initial_bootstrap_page

Откройте файл index.html в текстовом редакторе и между тегами и <h1> добавьте <div class = "container">(1). Закройте этот новый div после тега (2) и сохраните файл:

06_container_div

Перезагрузите страницу в браузере и обратите внимание на то, что текст «Hello World!» больше не прилегает к краю страницы, а смещен немного вправо. Класс Бутстрап "container", который мы назначили div, добавил этот отступ:

07_hello_world_taking_container_class

Вернитесь к файлу index.html. Между тегами <h1> и замените «Hello World!» на «Trusthub». Сохраните файл и просмотрите сайт.

Шаг 2. Добавление контента и боковой панели

Вернитесь к файлу index.html и под строкой <h1>Trustub вставьте следующий код:

<div class="row">
 <div>
  <h2>What Trusthub can do for you</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.</p>
 </div>
 <div>
  <h2>Our Team</h2>
  <p>Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus.</p>
  </div>
</div>

Снова просмотрите сайт. Теперь вы должны увидеть контент и боковую панель "Our Team", но для нее еще не задан адаптивный шаблон:

08_content_and_sidebar_without_bootstrap_layout

Вернитесь на сайт getbootstrap.com, и в верхнем меню нажмите кнопку «CSS»:

09_css_button

В боковой панели нажмите кнопку «Grid System»:

10_grid-system_button

Прокрутите страницу вниз до раздела «Grid options» (1) и обратите внимание на 12-столбцовую систему сеток Бутстрап с четырьмя типами размеров экрана, их шириной и префиксами класса (2):

11_grid_options

Не беспокойтесь, все это станет понятно в считанные секунды, когда вы начнете создавать свой первый Bootstrap-проект.

Откройте еще раз файл index.html и сразу под строкой <div class="row"> для существующего <div> установите класс «col-md-9». Теперь он должен выглядеть, как <div class="col-md-9">:

12_first_col-md-9_class

Перейдите к div, расположенному над заголовком <h2> «Out Team» и присвойте ему класс CSS «col-md-3». Сохраните файл:

13_second_col-md-3_class

Вернитесь на сайт, чтобы увидеть внесенные изменения в действии. Нажмите клавишу F5 на клавиатуре, чтобы перезагрузить страницу. После этого вы увидите, что область контента и боковая панель расположены рядом.

Теперь div с контентом занимает 9 из доступных 12 столбцов Bootstrap (75% всей ширины экрана). А боковая панель занимает 3 из 12 столбцов Bootstrap (25% всей ширины экрана):

14_content_and_sidebar_side_by_side

Поздравляю! Вы научились создать адаптивный макет веб-страницы с несколькими столбцами, используя Бутстрап 3.

Перевод статьи «How to Create Multiple Responsive Columns with Bootstrap 3» дружной командой проекта Сайтостроение от А до Я.

15 мая 2017 в 12:31
Материалы по теме
{"url":"http://www.fastvps.ru/", "src":"/images/advbanners/fastvps.png", "alt":"Хостинг Fastvps.ru. Наш выбор!"}
Заработок