Как задать смещение между колонками в Bootstrap 3, поменять их местами, вложить друг в друга и создать большой центральный блок

22 Август, 2014

Здравствуйте, уважаемые читатели блога KtoNaNovenkogo.ru. Продолжаем обсуждать возможности замечательного фреймворка Bootstrap. Во вступительной статье мы поговорили за отзывчивый дизайн и отличия Бутстрапа 3 от версии 2. Во второй статьей мы уже вплотную приступили к освоению этого инструмента, начав с изучения сеточной системы Bootstrap, и рассмотрели несколько практических примеров ее использования.

Сегодня мы продолжим знакомство с сеточной системой этого фреймворка и рассмотрим некоторые нюансы, которые могут пригодиться в реальной работе над макетом сайта на основе Bootstrap. В частности, мы посмотрим как задать отступ между колонками с помощью смещения (класс Offset), как поменять колонки местами (классы Push и Pull), а также как вложить строку с колонками внутрь другой колонки. Ну и про большой центральный блок (Jumbotron) тоже постараемся не забыть поговорить.

Нюансы верстки макета веб-страницы в Bootstrap 3


Итак, последний пример иллюстрировал реальную работу с типичной веб-страницей и остановились мы на том, что создали отступы по краям видимой области с помощью класса class="container" и пообещали сделать картинки используемые в анонсах отзывчивыми.

Если предыдущую статью не читали, то советую это сделать, ибо дальше вам может быть не понятно, о чем идет речь. Там же вы сможете скачать заготовку вебстраницы (файл sait.html и архив с графикой img.zip), которую мы сейчас и терзаем с помощью классов из арсенала Бутстрапа. На данный момент макет нашей тестовой веб-страницы выглядит примерно так:

Как задать смещение между колонками в Бутстрап через Offset

Создав необходимое для комфортного восприятия информации пустое пространство по краям области просмотра с помощью заключения всего содержимое вебстраницы (между открывающим и закрывающих тегами Body) в контейнер Div с классом class="container", теперь имеет смысл озаботиться созданием этого самого комфортного пустого пространства и между колонками.

Правда, в нашем текущем примере этого не требуется, ибо все и так воспринимается довольно-таки хорошо. Но вот если бы у нас была бы только пара колонок на всю ширину страницы, то для лучшего восприятия их было бы здорово слегка отодвинуть друг от друга.

Симулируем данную ситуации, просто убрав парочку колонок в нашем среднем ряду макета (третьей строке), и используем для оставшихся две сеточных системы (большую и малую), чтобы при уменьшении размера экрана все красиво складывалось вплоть до вертикального сложения при ширине экрана меньше 768 пикселей.

<!-- строка 3 -->
<div class="row">
	<div class="col-lg-3 col-sm-4">

		<p><img src="img/direkt-teoriia-300x180.jpg" alt=""></p>
		<h4>Яндекс Директ — основы создания кампании</h4>
		<p>Текст</p>

	</div>
	<div class="col-lg-9 col-sm-8">

		<p><img src="img/virtuemart-2-300x180.jpg" alt=""></p>
		<h4>Установка VirtueMart 2</h4>
		<p>Текст</p>
		<p>Текст/p>
		<p>Текст</p> 

	</div>
</div>

Исходный файл можете взять отсюда: Sait-2.html (для этого кликните по ссылке правой кнопкой мыши и выберите из контекстного меню пункт «Сохранить как...»). Его нужно будет поместить в папку Bootstrap на тот же уровень, что и созданный нами в первой статье файлик index.html (и site.html, с которым мы работали чуть выше). В исходном варианте этот макет будет выглядеть так.

Очевидно, что было бы неплохо немного раздвинуть эти две колонки. Данную проблему можно решить внесением изменений в саму сеточную систему, но в этом случае данные изменения отразятся и на других веб-страницах, что может быть не желательно.

Поэтому гораздо лучшим вариантом будет создать между колонками дополнительную колонку, не имеющую содержания с помощью класса Offset, задающего смещение слева. Собственно, пустую колонку как таковую создавать не потребуется — нужно лишь добавить этот класс в контейнер той колонки, что будет стоять справа от пустой колонки задающей смещение. Выглядеть это будет как col-lg-offset-1 для крупной сетки или col-sm-offset-1 для мелкой (если смещение нужно сделать на две или три ячейки, то нужно будет так и писать — col-sm-offset-2).

Ну и цифры нужно будет уменьшить в col-lg- на число равное общему числу пустых (дополнительных) колонок, чтобы в сумме с ними получилось 12 (именно столько ячеек по ширине помещается в сеточной системе Bootstrap 3). В нашем примере мы по сути уменьшаем ширину второй колонки на одну ячейку сетки, жертвуя ее для создания отступа от первой колонки, поэтому вместо col-lg-9 нужно будет написать col-lg-8. В результате получим 8 ячеек второй колонки плюс 3 ячейки из первой, и 1 ячейка отданная под смещение (col-lg-offset-1), что в сумме как раз и дадут 12.

Если вы используете несколько сеток одновременно (в нашем примере их две), то нужно добавлять смещение к каждой из них, либо можно будет использовать его только с отдельными размерами сеток — все зависит от того, что вы хотите получить в результате. Мы добавим для обоих типов сетки Offset-1, что позволит создать левее той колонки, где этот Offset приписан, еще одну пустую колонку, которая создаст требуемый отступ. В результате приведенный чуть выше код будет выглядеть уже так:

<!-- строка 3 -->
<div class="row">
	<div class="col-lg-3 col-sm-4">

		<p><img src="img/direkt-teoriia-300x180.jpg" alt=""></p>
		<h4>Яндекс Директ — основы создания кампании</h4>
		<p>Текст</p>

	</div>
	<div class="col-lg-8 col-lg-offset-1 col-sm-7 col-sm-offset-1">

		<p><img src="img/virtuemart-2-300x180.jpg" alt=""></p>
		<h4>Установка VirtueMart 2</h4>
		<p>Текст</p>
		<p>Текст/p>
		<p>Текст</p> 

	</div>
</div>

А общий вид макета со смещением станет несколько более юзабилен (при уменьшении размера экрана или окна браузера, что одно и тоже, также будет наблюдаться смещение и для малой сетки):

В принципе, для большой сетки можно было бы задать смещение равное двум ячейкам, а для малой оставить равное одной ячейки (с помощью такого вот класса class="col-lg-7 col-lg-offset-2 col-sm-7 col-sm-offset-1"), чтобы более плавно происходило сложение при уменьшении размера экрана. Но это уже нюансы и все зависит от ваших предпочтений. Однако, еще раз напомню, что смещение через Offset появится слева от той колонки, где вы его задали.

Как менять порядок следования колонок с помощью Push и Pull


Давайте еще придумаем себе проблему на ровном месте, чтобы затем ее с успехом решить средствами Bootstrap. Допустим, что в нашем предыдущем примере первая колонка (про Яндекс Директ) не несла бы в себе особой смысловой нагрузки, а являлась бы лишь побочным дополнение ко второй колонке (про Виртуемарт). Такая ситуация может встречаться на отдельных страницах, и на первый взгляд в этом нет ничего плохого.

Но есть два нюанса, которые могут вас сподвигнуть к использованию классов push и pull, позволяющих нам поменять колонки местами (изменить порядок их следования).

  1. Во-первых, с точки зрения SEO, более высокое положение в исходном Html коде должен занимать текст основной статьи, а не второстепенная информация (читайте про Сео оптимизацию текстов). Это особенно становится важно, когда ваш сайт борется за попадание в Топ 10 с сотнями или даже тысячами конкурентов. Тогда уже любая мелочь может повлиять на ранжирование ваших веб-страниц поисковыми системами. В то же время, менять колонки местами (для поднятия в исходном коде текста основной статьи) может оказаться вредным с точки зрения юзабилити.
  2. Во-вторых, если вы будете уменьшать ширину окна браузера, то при прохождении точки слома в 768 пикселей вы увидите, что колонки сложатся вертикально. Однако, при этом первая слева колонка окажется сверху, тогда как основное содержание заключено во второй колонке.

    Логично было бы сначала читателю предлагать основной текст, а уже потом второстепенный.

Вот именно для решения этих и многих других (которые и в голову сразу не приходят) проблем можно использовать новую возможность Бутсрап 3. Делается это с помощью упомянутых классов push и pull. Как это работает? Ну, сначала мы в исходном коде поменяем местами контейнеры с содержимым колонок (в нашем случае используются Div) местами. Получится примерно так.

<!-- строка 3 -->
<div class="row">
	<div class="col-lg-8 col-lg-offset-1 col-sm-7 col-sm-offset-1">

		<p><img src="img/virtuemart-2-300x180.jpg" alt=""></p>
		<h4>Установка VirtueMart 2</h4>
		<p>Текст</p>
		<p>Текст/p>
		<p>Текст</p> 

	</div>

	<div class="col-lg-3 col-sm-4">

		<p><img src="img/direkt-teoriia-300x180.jpg" alt=""></p>
		<h4>Яндекс Директ — основы создания кампании</h4>
		<p>Текст</p>

	</div>	
</div>

Этим мы решим обозначенные выше проблемы — оптимизируем страницу с точки зрения SEO, и при уменьшении ширины экрана, вплоть до вертикального построения колонок, вверху окажется наиболее значимый контент. Однако, на веб-странице теперь слева будет отображаться основная информация, а справа — второстепенная. Иногда по соображениям юзабилити (или еще каким-то) это может быть неприемлемо.

С помощью push и pull можно будет сделать так, чтобы в браузере пользователя по-прежнему слева отображалась первая колонка (с второстепенной информацией, которая в исходном коде будет уже находиться ниже второй). Т.е. создать своеобразный оптический обман. Как это сделать?

Итак, основной блок (про Виртуемарт с классом class="col-lg-8 col-lg-offset-1 col-sm-7 col-sm-offset-1") нам нужно будет сдвинуть вправо на столько ячеек (клеточек), чтобы на его месте поместился бы блок второстепенный (про Директ с классом class="col-lg-3 col-sm-4"). Для этого мы используем класс Push (толкать вправо) из арсенала Бутсрапа, а именно для большой сетки — col-lg-push-3, а для малой — col-sm-push-4. Цифры я взял из класса второстепенного блока, ибо именно его нужно будет поместить на то место, откуда мы сдвинем вправо основной блок.

<!-- строка 3 -->
<div class="row">
	<div class="col-lg-8 col-lg-offset-1 col-sm-7 col-sm-offset-1 col-lg-push-3 col-sm-push-4">

		<p><img src="img/virtuemart-2-300x180.jpg" alt=""></p>
		<h4>Установка VirtueMart 2</h4>
		<p>Текст</p>
		<p>Текст/p>
		<p>Текст</p> 

	</div>

В итоге получили вот такой вот промежуточный результат:

Очевидно, что теперь второстепенный блок (про Директ) нужно будет сдвинуть влево на такое количество ячеек (клеточек), сколько занимает по ширине основной блок, чтобы они друг на друга не накладывались. Путем несложных подсчетов получаем, что нужно использовать класс Pull (тянуть влево) из арсенала Bootstrap со значениями:

  1. Для большой сетки col-lg-8 (ширина содержимого) плюс col-lg-offset-1 (ширина сдвига), т.е. в сумме 9. Значит прописываем класс col-lg-pull-9
  2. Для малой col-sm-7 плюс col-sm-offset-1, итого — 8. Прописываем для нее класс col-sm-pull-8
<!-- строка 3 -->
<div class="row">
	<div class="col-lg-8 col-lg-offset-1 col-sm-7 col-sm-offset-1 col-lg-push-3 col-sm-push-4">

		<p><img src="img/virtuemart-2-300x180.jpg" alt=""></p>
		<h4>Установка VirtueMart 2</h4>
		<p>Текст</p>
		<p>Текст/p>
		<p>Текст</p> 

	</div>

	<div class="col-lg-3 col-sm-4 col-lg-pull-9 col-sm-pull-8">

		<p><img src="img/direkt-teoriia-300x180.jpg" alt=""></p>
		<h4>Яндекс Директ — основы создания кампании</h4>
		<p>Текст</p>

	</div>	
</div>

Вот, теперь все встало на свои места, хотя в исходном коде левая колонка (с второстепенным содержимым) стоит ниже, чем правая. Что и требовалось доказать (реализовать).

Как в Bootstrap вложить строку с колонками в колонку из другой строки

Замысловатый заголовок, не правда ли? Других не держим. Дело в том, что при верстке макета вам может пригодиться прием, позволяющий вкладывать ячейки (колонки) друг в друга. Точнее говоря, мы можем запросто вложить ряд (строку, содержащую несколько колонок) внутрь какой-либо колонки из другого ряда. Понятно? Нет? Ну, тогда на примере.

Давайте в наш последний пример добавим еще одну строку (с помощью контейнера с классом row, если вы еще не забыли). Пусть она состоит из четырех столбцов, которые мы создали в последнем примере предыдущей статьи (картинки я из них удалил, дабы не загромождать). Макет веб-страницы в этом случае будет выглядеть примерно так (уже готовый файл вы можете взять отсюда — sait-3.html):

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

Для этого достаточно вырезать код всей строки с четырьмя колонками (начиная с тега DIV с классом Row и заканчивая закрывающим его тегом DIV) и вставить в самый конец второй колонки из предыдущей строки. Она, если вы помните, в коде соответствует контейнеру DIV с классом class="col-lg-8 col-lg-offset-1 col-sm-7 col-sm-offset-1 col-lg-push-3 col-sm-push-4".

Собственно, после такой нехитрой рокировки мы достигнем желаемого результата (код не привожу, ибо слишком громоздкий — если не поняли, то просто посмотрите внимательно на результирующий вариант sait-4.html).

Как в Бутстрапе создать большой центральный блок


На буржуйских сайтах сейчас очень популярно использовать большой центральный блок, который иногда называют jumbotron. Обычно это крупный заголовок, немного текста, картинка и, возможно, кнопка. Все это дело занимает приличную часть «первого экрана». В Бутстрапе есть специальные классы, позволяющие быстро создать подобный блок буквально в два клика.

Для этого просто добавляем в нужно место контейнер с содержимым будущего центрального блока и прописываем для него вместо класса ROW другой класс — jumbotron. Код такого блока может выглядеть так:

  <div class="jumbotron">
        <img src="http://ktonanovenkogo.ru/image/444dmin.png">
        <h1>KtoNaNovenkogo.ru - быстро, просто и понятно</h1>
        <p>Все о создании сайтов, блогов, форумов, интернет-магазинов, их продвижении в поисковых системах и заработке на сайте </p>
    </div>

Добавив этот код в рассмотренный чуть выше пример (в верхнюю его часть), мы получим вот такой вот результат:

Тут еще было бы логичным задать обтекание картинки текстом. Для этого в Bootstrap тоже припасены инструменты. Например, для обтекания картинки текстом слева в тег Img достаточно добавить class="pull-right", ну, а если картинку нужно прижать к левому краю области Джамбатрона (этого самого большого центрального блока), то использовать уже нужно класс class="pull-left".

  <div class="jumbotron">
        <img src="http://ktonanovenkogo.ru/image/444dmin.png" class="pull-right">
        <h1>KtoNaNovenkogo.ru - быстро, просто и понятно</h1>
        <p>Все о создании сайтов, блогов, форумов, интернет-магазинов, их продвижении в поисковых системах и заработке на сайте </p>
    </div>

В результате получим такую вот уже более приглядную картину:

При уменьшении размера экрана данный блок будет успешно адаптироваться. По сути, это срока, состоящая из одной колонки шириной во все 12 ячеек.

Думаю, что на этом со знакомством с сеточной системой Bootstrap 3 можно заканчивать. В следующих статьях мы будем говорить о типографике, кнопках, галереях, таблицах, выпадающих меню и прочих вещах, которые можно довольно просто реализовывать с помощью этого замечательного фреймворка. Спасибо за внимание и не переключайтесь.

Продолжение следует >>> (Тут можно подписаться на почтовую рассылку с анонсами новых статей)

Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru

Еще:

Рубрики :Отзывчивый дизайн (Bootstrap)

Комментарии и отзывы

Данте

А как в bootstrape сделать фиксированный блок, для той же рекламы 240×400? Странно ведь смотрится когда банер начинается резаться при смени разрешения.

Stas

Опечатка в тексте « При уменьшении размера экрана данный блок будет успешно адаптироваться. По сути, это срока, состоящая из одной колонки шириной во все 12 ячеек.»

Вместо слова строка, написано — срока.

Naolo

ОГРОМНОЕ спасибо за такое объяснение все очень подробно и понятно написано без пафоса и выпендрежа как это делается на других сайтах. Коментарии правда к статье оставляют желать лучшего :). С нетерпением буду ждать ваших новых статей, а пока почитаю на официальном сайте.

viktoria

Дмитрий, спасибо за три статьи про бутстрап! Я уже больше недели пыталась освоить хотя бы азы — ничего не получалось — везде какая-то разрозненная информация и даже официальный сайт Бутстрапа не особо помог.

Так вот ))), а продолжение в Вашем исполнении будет или оно где-то здесь есть? я уже подписалась, но пока нового ничего нет.

Max_Muse

Спасибо за статьи! Ждем продолжения!

Андрей

Спасибо за объяснение, очень понятно. В документации разбирался бы неделю, наверное, пока в голове все правила CSS выстроились бы в логичную цепочку. А тут за 15 минут полное понимание разметки в Bootstrap.

Евеліна

Дякую за урок! Дуже гарно і доступно поданий матеріал! Легко читається і запам'ятовується!

Подписаться не комментируя