Бутстрап 3.0 Сетка Объяснение

Может ли кто-нибудь объяснить систему Bootstrap 3.0 Grid. Я использовал сетку Bootstrap v2, у которой был простой span1 до span12 для столбцов. Теперь Bootstrap 3.0 имеет разные типы столбцов, такие как .col-.col-sm-.col-lg -

Я нашел этот пример: http://examples.getbootstrap.com/grid/index.html, но у него много разных способов, например, я не мог понять "Смешанные: мобильные и настольные" сетка, где .col-12.col-lg-8 вместе.

Я надеюсь перенести мой сайт Bootstrap v2 на Bootstrap v3, но слишком много нахожу эти изменения.

Пожалуйста, объясните.

EDIT: Также появилась эта хорошая статья, объясняющая Bootstrap 3 Grid (эта статья появилась после того, как я задал свой вопрос здесь. Надеюсь, это поможет будущим читателям): http://blog.jetstrap.com/2013/08/bootstrap-3-grids-explained/

ОТВЕТЫ

Ответ 1

Основной смысл в том, что различные итерации класса .col позволяют указать поведение сетки для разных устройств (телефонов, планшетов, настольных компьютеров). Итак, в примере, который вы спрашиваете о .col-lg-8, указано, что div должен занимать 8 столбцов на рабочем столе, а .col-12 указывает, что div должен занимать 12 столбцов (вся строка) на мобильном устройстве. Этот уровень специфичности дает вам точный контроль над тем, как ваш контент будет размещаться на разных размерах экрана таким образом, который не был таким простым с помощью Bootstrap 2.

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

Кроме того, как указано в комментариях к вашему вопросу, идея перехода с Bootstrap 2 на 3 не обязательно является целью. Вы можете попытаться сделать это, обновив существующие классы .span* до новых классов .col-*, но есть и другие соображения, как то, что ваш существующий проект является фиксированной шириной или жидкостью, что может вызвать проблемы с этим. Есть много других изменений между двумя версиями вне макета сетки, которые также могут дать вам проблемы.