Как с помощью 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 3 создать пару адаптивных столбцов Вы увидите страницу «Начало работы». Нажмите кнопку «Загрузить Bootstrap»:
Как при помощи Bootstrap 3 создать пару адаптивных столбцов Сохраните файл на жестком диске. Его не необходимо сохранять на сервере. Разархивируйте файл и переименуйте извлеченную папку в « bootstrap «.

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

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

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

Как при помощи Bootstrap 3 создать пару адаптивных столбцов Вы увидите код Бутстрап шаблона. Нажмите кнопку «Копировать», чтобы скопировать программный код:
Как при помощи Bootstrap 3 создать пару адаптивных столбцов Вставьте программный код «Basic Template» в текстовый редактор и сохраните его как файл index.html в той же папке, где находится папка «bootstrap». Сейчас он станет главной страницей веб-сайта Bootstrap.

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

Как при помощи Bootstrap 3 создать пару адаптивных столбцов Откройте файл index.html в текстовом редакторе и между тегами и <h1> добавьте <div class = «container»>(1). Закройте этот новый div после тега(2) и сохраните файл:
Как при помощи Bootstrap 3 создать пару адаптивных столбцов Перезагрузите страницу в браузере и обратите внимание на то, что текст «Hello World!» больше не прилегает к краю страницы, а смещен вправо. Класс Бутстрап «container«, который мы назначили div, добавил этот отступ:
Как при помощи Bootstrap 3 создать пару адаптивных столбцов Вернитесь к файлу 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«, но для нее ещё не задан адаптивный шаблон:

Как при помощи Bootstrap 3 создать пару адаптивных столбцов Вернитесь на веб-сайт getbootstrap.com, и в верхнем меню нажмите кнопку «CSS»:
Как при помощи Bootstrap 3 создать пару адаптивных столбцов В боковой панели нажмите кнопку «Grid System»:
Как при помощи Bootstrap 3 создать пару адаптивных столбцов Прокрутите страницу вниз до раздела «Grid options»(1) и обратите внимание на 12-столбцовую систему сеток Бутстрап с четырьмя типами размеров экрана, их шириной и префиксами класса(2):
Как при помощи Bootstrap 3 создать пару адаптивных столбцов Не беспокойтесь, все это станет понятно в считанные секунды, когда вы начнете создавать первый Bootstrap-проект.

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

Как при помощи Bootstrap 3 создать пару адаптивных столбцов Перейдите к div, расположенному над заголовком <h2> «Out Team» и присвойте ему класс CSS «col-md-3». Сохраните файл:
Как при помощи Bootstrap 3 создать пару адаптивных столбцов Вернитесь на веб-сайт, чтобы увидеть внесенные изменения в действии. Нажмите клавишу F5 на клавиатуре, чтобы перезагрузить страницу. После этого вы увидите, что область контента и боковая панель расположены рядом.

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

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *