Коротко о главном: основные возможности фреймворка Bootstrap
Обещаем, что до конца статьи вы научитесь менять местами колонки в Bootstrap 3, создавать большой центральный блок, задавать смещение между колонками и пр.
Смещение между колонками в Bootstrap через Offset
Когда вы создаете пустое пространство, необходимое для восприятия информации должным образом, есть смысл позаботиться о создании этого пространства еще и между колонками. В нашем текущем примере необходимости что-то менять нет – все и так воспринимается хорошо.
Между тем, если бы у нас была только пара колонок на всю ширину страницы, было бы здорово отодвинуть их друг от друга для лучшего восприятия.
Для симуляции данной проблемы предлагаем убрать парочку колонок в среднем ряду макета (это третья строка), а для оставшихся используем большую и малую сеточные системы.
<!— строка 3 —>
<div class=»row»>
<div class=»col-lg-3 col-sm-4″>
<p><img src=»/img/direkt-teoriia-300×180.jpg»alt=»»></p>
<h4>Яндекс Директ — основы создания кампании</h4>
<p>Текст</p>
</div>
<div class=»col-lg-9 col-sm-8″>
<p><img src=»/img/virtuemart-2-300×180.jpg»alt=»»></p>
<h4>Установка VirtueMart 2</h4>
<p>Текст</p>
<p>Текст/p>
<p>Текст</p>
</div>
</div>
Вот что у нас получилось:
Чтобы немного раздвинуть две колонки, предлагаем создать между ними третью, которая не имеет содержания. Проще всего это сделать с помощью класса Offset, которое задает смещение слева. В результате, указанные выше код будет выглядеть немного по-другому:
<!— строка 3 —>
<div class=»row»>
<div class=»col-lg-3 col-sm-4″>
<p><img src=»/img/direkt-teoriia-300×180.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-300×180.jpg»alt=»»></p>
<h4>Установка VirtueMart 2</h4>
<p>Текст</p>
<p>Текст/p>
<p>Текст</p>
</div>
</div>
Общий вид макета при этом стал более юзабилен:
Меняем порядок колонок с помощью Push и Pull
Предлагаем придумать себе еще одну проблему, чтобы успешно решить ее с помощью Bootstrap. Допустим, первая колонка про Яндекс Директ в предыдущем примере не несет в себе никакой смысловой нагрузки, а лишь дополняет вторую колонку.
Для решения этой и некоторых других проблем можно задействовать возможность Bootstrap. Задействуем классы push и pull, но для начала поменяем местами контейнеры с содержимым колонок в исходном коде. Получится вот что:
<!— строка 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-300×180.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-300×180.jpg»alt=»»></p>
<h4>Яндекс Директ — основы создания кампании</h4>
<p>Текст</p>
</div>
</div>
Мы достигли первоначальной цели, но теперь слева отображается основная информация, а справа – уже второстепенная. В некоторых случаях из соображений юзабилити это может быть неприемлемо:
Используя push и pull, можно добиться, чтобы в браузере посетителя по-прежнему отображалась первая колонка. На помощь придет следующий код:
<!— строка 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-300×180.jpg»alt=»»></p>
<h4>Установка VirtueMart 2</h4>
<p>Текст</p>
<p>Текст/p>
<p>Текст</p>
</div>
Промежуточный результат работы выглядит вот так:
Теперь нам нужно сдвинуть влево второстепенный блок (тот, который про Директ)
<!— строка 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-300×180.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-300×180.jpg»alt=»»></p>
<h4>Яндекс Директ — основы создания кампании</h4>
<p>Текст</p>
</div>
</div>
Теперь все встало на свои места:
Создание центрального блока в Bootstrap
Наверное, вы не раз видели большой центральный блок на зарубежных сайтах. Он называется jumbotron. Представляет собой крупный заголовок, текст, картинку и, возможно, кнопку. В Бутстрапе предусмотрено несколько специальных классов, позволяющих создать такой блок буквально в два клика.
Чтобы сделать это, добавьте в нужное место контейнер с содержимым будущего центрального блока и пропишите для него класс jumbotron вместо ROW. Код этого блока выглядит примерно так:
<div class=»jumbotron»>
<img src=»http://ktonanovenkogo.ru/image/444dmin.png»>
<h1>KtoNaNovenkogo.ru — быстро, просто и понятно</h1>
<p>Все о создании сайтов, блогов, форумов, интернет-магазинов, их продвижении в поисковых системах и заработке на сайте </p>
</div>
Если добавить его в рассмотренный выше пример, получится следующий результат:
Можно добавить обтекание картинки текстом – для этого в Бутстрапе также припасены свои инструменты:
<div class=»jumbotron»>
<img src=»http://ktonanovenkogo.ru/image/444dmin.png»class=»pull-right»>
<h1>KtoNaNovenkogo.ru — быстро, просто и понятно</h1>
<p>Все о создании сайтов, блогов, форумов, интернет-магазинов, их продвижении в поисковых системах и заработке на сайте </p>
</div>
Теперь получилась еще более привлекательная картинка:
На этом мы заканчиваем знакомство с сеточной системой Bootstrap 3. Всем спасибо за внимание – надеемся, вы взяли для себя максимум полезной информации!