Коротко о главном: основные возможности фреймворка Bootstrap

Коротко о главном: основные возможности фреймворка Bootstrap изображение поста

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

Bootstrap

Смещение между колонками в Bootstrap через Offset

Когда вы создаете пустое пространство, необходимое для восприятия информации должным образом, есть смысл позаботиться о создании этого пространства еще и между колонками. В нашем текущем примере необходимости что-то менять нет – все и так воспринимается хорошо.

ktonanovenkogo

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

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

<!— строка 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>

Вот что у нас получилось:

ktonanovenkogo

Чтобы немного раздвинуть две колонки, предлагаем создать между ними третью, которая не имеет содержания. Проще всего это сделать с помощью класса 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>

Общий вид макета при этом стал более юзабилен:

ktonanovenkogo

Меняем порядок колонок с помощью 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>

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

ktonanovenkogo

Используя 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>

Промежуточный результат работы выглядит вот так:

ktonanovenkogo

Теперь нам нужно сдвинуть влево второстепенный блок (тот, который про Директ)

<!— строка 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>

Теперь все встало на свои места:

ktonanovenkogo

Создание центрального блока в Bootstrap

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

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

<div class=»jumbotron»>

      <img src=»http://ktonanovenkogo.ru/image/444dmin.png»>

      <h1>KtoNaNovenkogo.ru — быстро, просто и понятно</h1>

      <p>Все о создании сайтов, блогов, форумов, интернет-магазинов, их продвижении в поисковых системах и заработке на сайте </p>

  </div>

Если добавить его в рассмотренный выше пример, получится следующий результат:

ktonanovenkogo

Можно добавить обтекание картинки текстом – для этого в Бутстрапе также припасены свои инструменты:

<div class=»jumbotron»>

      <img src=»http://ktonanovenkogo.ru/image/444dmin.png»class=»pull-right»>

      <h1>KtoNaNovenkogo.ru — быстро, просто и понятно</h1>

      <p>Все о создании сайтов, блогов, форумов, интернет-магазинов, их продвижении в поисковых системах и заработке на сайте </p>

  </div>

Теперь получилась еще более привлекательная картинка:

ktonanovenkogo

На этом мы заканчиваем знакомство с сеточной системой Bootstrap 3. Всем спасибо за внимание – надеемся, вы взяли для себя максимум полезной информации!

Комментарии
Adblock detector