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

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

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

О нас seoexpert

продвижение сайта,seo оптимизация,поисковое продвижение,раскрутка сайтов,поисковая оптимизация,продвижение сайта в гугл,seo раскрутка,продвижение сайтов в яндексе,продвижение сайта в google,продвижение сайтов в топ 10,Оптимизация и продвижение сайтов,услуги продвижения сайта,заказать продвижение,продвижение сайтов в топ,сео раскрутка сайта

Смотрите также

Создание цветной рамки вокруг текста с помощью HTML и CSS

Рамка на HTML-страницах, созданная с помощью border color, помогает привлечь внимание к тексту или выделить ...