Как с помощью 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»:

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

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

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

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

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

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

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

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

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

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

Вернитесь к файлу 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", но для нее еще не задан адаптивный шаблон:

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

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

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

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

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

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

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

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

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