Коротко О Boostrap 3: Переход с Версии 2 на Версию 3

Сложно-ли перейти с Bootstrap2 на Bootstrap3? На самом деле, вовсе нет.

Не смотря на множество изменений, вам не придётся многое менять, в основном вам необходимо поменять называния классов в нужных местах.

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

Это довольно легко сделать, но не рекомендуется.

Добиться этого можно следующим образом:

• Не добавляйте meta тэг содержащий информацию о ширине устройства и изначальных размерах в шапку вашего документа.
• Измените ширину (width) всех элементов с классом container и добавьте следующие стили для них style='width: xxx !important'.
• Убедитесь, что все стили, которые модифицируют Bootstrap, будут написаны после стилей самой библиотеки Bootstrap.
• Уберите все свойства отвечающие за адаптивный navbar в вашем документе.
• Измените классы имеющие отношение к сетке, для этого вам нужно будет использовать только col-xs-* и забыть про остальные четыре класса адаптивной сетки.

Если вам нужна поддержка IE8 и IE9, вам по прежнему придется использовать respond.js, даже если отключили адаптивность, способами описанными выше.

Изменение Имён Классов

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

Одна вещь которая должна измениться, к большому удивлению (и уже изменилась если вы взгляните на Stack Overflow), это отказ от классов для ширины на весь экран (fluid width).

В версии 2, если вы хотели использовать контейнер занимающий всю ширину экрана, вам нужно было добавить следующую разметку:

1

<div class="container-fluid" id="myParentContainer">

2

  <div class="row-fluid" id="mycontentrow">

3

    <h1>A headline</h1>

4

    <p>Some paragraph text</p>

5

  </div>

6

</div>

В версии 3 container и row-fluid классы больше не существуют.

Так как же вам получить контейнер с шириной на весь экран? Очень просто:

Вместо того, чтобы оборачивать контент в элемент с классом container, а затем в row, вы просто не оборачиваете их ни в какие элементы.

Вы всё ещё можете использовать систему сеток, чтобы воспользоваться отдельными контейнерами для вашего контента, всё это хорошо реализовано в Bootstrap, но нет никакой необходимости оборачивать набор <div> элементов в контейнер перед тем как вы захотите их использовать. 

По факту, container и row (не полно-экранная версия всё ещё существует) весь ваш контент будет занимать ширину 1024 пикселя, колонки будут центрироваться автоматически, а также вы сможете использовать всю ширину страницы.

Переход На Новую Сетку

Далее нас ждёт одно большое нововведение в классах отвечающих за сетку.

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

1

<div class="container">

2

  <div class="span2">Content here</div>

3

  <div class="span10">Content here</div>

4

</div>

Этот код предоставит вам два контейнера, заполненных сеткой из 12 квадратов, расположенных горизонтально, обычно данный лэйаут будет иметь сайдбар.

В версии 3, классы отвечающие за средние размеры экранов, аналогичны классам span версии 2, для того, чтобы переписать код выше под версию 3, просто сделайте следующее:

1

<div class="container">

2

  <div class="col-md-2">Content here</div>

3

  <div class="col-md-10">Content here</div>

4

</div>

Однако, в то время как версия 2 обладает только одним уровнем сетки, в версии 3 этих уровня четыре. Каждый уровень предназначен для определённой ширины экрана устройства, на котором вы хотели-бы, чтобы запускался ваш веб-сайт.

Классы сетки теперь должны называться следующим образом:

• Для очень маленьких устройств: col-xs-*
• Для маленьких устройств: col-sm-*
• Для устройств средних размеров: col-md-*
• Для больших устройств: col-lg-*

Медиа запросы в BS3 работают в зависимости от указанных классов сетки и отвечают за различную ширину экрана:

• Очень маленький: экран ширина, которого меньше 768 пикселей
• Маленький: экран ширина, которого больше или равна 768 пикселям и меньше 992 пикселей
• Средний: экран больше или равный 992 пикселям и меньше 1200 пикселей
• Большой: экран с шириной больше или равный 1200 пикселей

Вы можете написать код нескольких версий сетки BS3 и использовать ту или иную в зависимости от устройства. К примеру если вы сделаете следующее:

1

<div class="container">

2

  <div class="col-xs-2">Content here</div>

3

  <div class="col-xs-10">Content here</div>

4

  <div class="col-sm-2">Content here</div>

5

  <div class="col-sm-10">Content here</div>

6

  <div class="col-md-2">Content here</div>

7

  <div class="col-md-10">Content here</div>

8

  <div class="col-lg-2">Content here</div>

9

  <div class="col-lg-10">Content here</div>

10

</div>

BS3 будет показывать и убирать контейнер, в зависимости от ширины экрана устройства и соответствующих медиа запросов.

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

Ширина колонок однако меняется, так что вам стоит планировать расположение контента, чтобы воспользоваться всеми преимуществами сетки для разных размеров экрана. Размер для каждый из них, следующий:

• col-xs-* = автоматический, нет фиксированного размера
• col-sm-* = 60 пикселей
• col-md-* = 78 пикселей
• col-lg-* = 95 пикселей

С каждой стороны колонок будет расстояние в 15 пикселей, в итоге расстояние между колонками будет 30 пикселей. Этот промежуток не меняется, вне зависимости от медиа запросов и для какого устройства показывается сетка в данный момент.

Вложенность и смещение (offset) работают как раньше, но как и в случае с сеткой, изменились названия классов.

Воспользоваться смешением колонки можно применив col-md-offset-*, при этом не забывайте заменить md на xs, sm или lg, если это требуется, в зависимости от размера экрана и соответствующей сетки.

Для вложенности делать ничего не надо, просто добавьте колонки внутрь другой колонки не забывая о классах col-xx-*, в этом случае они будут менять размер и вести себя также, как это было в предыдущей версии BS.

Следующие примеры показывают, как применить обе техники:

1

<div class="col-md-9">

2

  Level 1: .col-md-9

3

  <br/>

4

  <div class="col-md-6">

5

    Level 2: .col-md-6

6

  </div>

7

  <div class="col-md-6">

8

    Level 2: .col-md-6

9

  </div>

10

</div>

С этим примером ваша сетка будет выглядеть вот так:

1

<div class="col-md-4">

2

  .col-md-4

3

</div>

4

<div class="col-md-4 col-md-offset-4">

5

  .col-md-4 .col-md-offset-4

6

</div>

7

<div class="col-md-3 col-md-offset-3">

8

  .col-md-3 .col-md-offset-3

9

</div>

10

<div class="col-md-3 col-md-offset-3">

11

  .col-md-3 .col-md-offset-3

12

</div>

13

<div class="col-md-6 col-md-offset-3">

14

  .col-md-6 .col-md-offset-3

15

</div>

С этим примером, так:

В BS3 также есть некоторые нововведения, когда дело касается смещений и вложенности, и это что-то называется порядок колонок (column ordering). 

Если вы хотите, чтобы ваши колонки располагались в другом порядке нежели они идут в HTML документе, вы можете воспользоваться новыми col-xx-pull-* и col-xx-push-* классами, чтобы "вытолкнуть" либо "затянуть" ваш лэйаут, в том порядке, который вам понадобится. К примеру:

1

<div class="col-md-8">8 columns of content</div>

2

<div class="col-md-4">4 columns of content</div>

Как и предполагалось этот пример будет отображаться следующим образом:

Однако если вы добавите push и pull модификаторы:

1

<div class="col-md-8 col-md-push-4">8 columns of content</div>

2

<div class="col-md-4 col-md-pull-8">4 columns of content</div>

Вы получите следующий результат:

Ну и наконец, вы можете контролировать размер сетки поменяв значение следующих переменных в Less исходниках Bootstrap:

• @grid-columns: отвечает за количество колонок (по умолчанию значение равно 12)
• @grid-gutter-width: общий отступ между колонками (по умолчанию 30 пикселей)
• @grid-float-breakpoint: брейкпоинт отвечающий за минимальный размер - “очень маленькие (extra small)” устройства (по умолчанию 768 пикселей)

Теперь когда нам стали известны все нюансы новой сетки, есть-ли что-либо ещё, что нам следует знать?

Некоторые из вас возможно подумают, “Но это безумие—со всеми этими <div> элементами, смещениями с col-xx-xx классами, с разными размерами экранов, я бы мог просто сделать четыре разных сайта, думая о четырёх разных разрешениях, при этом!” По правде говоря, я вас не виню, за исключением одного: каждый из этих размеров лэйаута создан для работы с одной и той же разметкой, одновременно и занимает тоже пространство.

Давайте возьмём код из предыдущего примера и перепишем его, как нам рекомендует документация Bootstrap:

1

<div class="container">

2

  <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">Content here</div>

3

  <div class="col-xs-10 col-sm-10 col-md-10 col-lg-10">Content here</div>

4

</div>

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

Такой же принцип работает для различных смещений, вложенности и изменений порядка элементов.

Другие Изменения

В дополнение к тем изменениям, которые мы уже обсудили, следующие имена классов тоже нужно будет изменить если вы переходите с версии 2 на версию 3 (Обратите внимание: таблица ниже была взята прямиком из документации к Bootstrap 3, и была актуальна на момент написания статьи,  однако, поскольку Bootstrap постоянно развивается, есть вероятность, что эти данные окажутся устаревшими).

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

Мы разберёмся с деталями в предстоящих туториалах этой серии, но пока, если вы переносите веб-сайт с версии 2 на версию 3, таблица 2 придётся вам как нельзя кстати.

Вероятно вы захотите воспользоваться Grunt.js, для создания таска, который будет вносить эти изменения автоматически, во время сборки проекта. Тем самым ваши разработчики смогут продуктивно работать, используя версию 2, в то время, как итоговый код будет представлять из себя Bootstrap 3.

Так что же в действительности было добавлено нового в Bootstrap и что было убрано?

Мы начнём с того, что было убрано и разберём что было добавлено, подробнее, в туторале “Новые ОсобенностиCSS". На данный момент нас больше интересует, что было убрано, так как скорее всего вы будете использовать эту статью, как путеводитель при переносе вашего лэйаута от версии к версии.

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

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

Продолжаем обсуждать формы, основной класс controls, предназначенный для обёртывания элементов форм также был убран, вместе с controls-row. Вместо них, нам рекомендуют использовать row и новый form-group класс. Формы также потеряли большинство классов, отвечающих за размеры; классы с фиксированным размером, такие как input-mini, input-small, input-medium, input-large, input-xlarge и input-xxlarge, всех их больше нет, также как и input-block-level. Вам предлагается управлять размерами элементов используя from-control в комбинации с новыми размерами и структурами доступными в системе сеток.

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

Для табов, классы  tabs-left, tabs-right и tabs-below больше не существуют, это значит, что теперь мы можем расположить табы на верху контента, выравненные по левому краю.

Далее касательно табов, класс отвечающий за создание табов похожих на пилюли (pill-based) также был убран, pill-pane и pill-content теперь должны использовать tab-content и tab-pane классы.

Ну и наконец, различные классы navbar - navbar-inner, navbar divider-vertical, nav-list, and nav-header тоже не являются больше частью фреймворка.

В большинстве случаев в версии 3 нет аналогичных классов, однако можно найти некое сходство если приглядеться к другим классам. К примеру, nav-list и nav-header могут быть воссозданы используя группы List.

Вот ссылка со списком всех этих изменений на сайте Bootstrap 3.

Этот туториал представляет из себя часть из серии Коротко о Bootstrap 3, бесплатная электронная книга от команды с Syncfusion.