bootstrap
Bootstrap — это набор инструментов для верстки. Он уже давно завоевал популярность и не зря. Самое главное преимущество и именно из-за него такая популярность — адаптивность для всех устройства. Именно сеточная структура, которая заложена в Bootstrap, позволяет с легкостью отображаться на разных устройствах корректно.

С помощью Bootstrap можно модифицировать как существующие сайты, так создавать «с нуля» полностью новые.

Установка.

Установка проста. Качаем дистрибутив с официального сайта. Есть возможность выбора модулей для загрузки. Рекомендую выбрать полную загрузку. Подгружаем это всё в папку сайта.

И подключаем через код в файле header:

1
2
<link rel="stylesheet" href="css/bootstrap.css">
<script src="js/bootstrap.min.js" type="text/javascript"></script>

Прописываем правильные пути к файликам Bootstrap. Это подключение действительно только для полной установки Bootstrap на WordPress.

Послу установки можно начинать корректировать любой модуль.
Начнем с самого главного — сетки. Bootstrap представляет собой 12-ячеечную сетку.
bootstrap-grid

То есть визуально делим «наше поле для работы» (шапка сайта, футер или «тело» страницы) на 12 частей и вычисляем, сколько ячеек занимает необходимый текстовый (и не только) блок. После необходимо продумать адаптивность (отображение на других девайсах).

Система сеток Bootstrap имеет 4 класса:
xs — мобильные телефоны (mobile)
sm — планшеты (tablet)
md — компьютеры (desktop)
lg — компьютеры с большим монитором (large desktop)

Указанные классы могут комбинироваться в одной строке для создания более динамичных и гибких макетов.

1
2
3
4
5
6
7
8
9
10
11
<div class="row">
  <div class="col-*-*"></div>
</div>
<div class="row">
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
</div>
<div class="row">
  ...
</div>

В классе col прописываем принадлежность к устройству и цифру-количества ячеек. Например, col-md-6. Это значит, что информация, находящаяся в этом классе будет занимать половину пространства. Следом добавляя следующий класс с цифрой «6» — заполняется другая половина. Все работает по примеру таблицы.

Пример отображения одновременно для нескольких устройств:

1
<div class="col-sm-3 col-md-6 col-lg-4">....</div>

В следующих постах разберем компоненты Bootstrap.

http://www.seovasikaru.com/wp-content/uploads/2015/12/bootstrap.jpghttp://www.seovasikaru.com/wp-content/uploads/2015/12/bootstrap-150x150.jpgvasikaruBootstrapНовостиBootstrap — это набор инструментов для верстки. Он уже давно завоевал популярность и не зря. Самое главное преимущество и именно из-за него такая популярность - адаптивность для всех устройства. Именно сеточная структура, которая заложена в Bootstrap, позволяет с легкостью отображаться на разных устройствах корректно. С помощью Bootstrap можно модифицировать как...Создание сайтов, продвижение сайтов, seo, юзабилити