Создание фиксированной разметки веб-страниц с помощью Twitter Bootstrap

Процесс создания фиксированного макета начинают с создания контейнера (блок div с классом.container). После этого переходят к созданию рядов (блоки div с классом.row), внутри которых располагают блоки div с помощью которых выполняют разметку макета для различных устройств. Такие блоки создаются с помощью стандартных классов Bootstrap:.col-xs-*,.col-sm-*,.col-md-* и.col-lg-*

.col-xs-*.col-sm-*.col-md-*.col-lg-* Очень маленький экран Маленький экран Средний экран Большой экран

При верстке макета важно указывать количество колонок в конкретном разрешении дисплея Очень маленький экран Маленький экран Средний экран Большой экран

Если необходимо сделать резиновый макет, то для этого нужно использовать класс container-fluid

Если необходимо сделать отступ (пропуск колонки), то для этого нужно использовать класс col-md-offset-

Создание макета из колонок разной ширины

Разметка для устройств с большим (lg) и средним (md) размерами экранов

Разметка для устройств с маленькими (sm) размерами экранов

Разметка для устройств с очень маленькими (xs) размерами экранов

Разработка макета для устройств с большим экраном (lg)

Основной каркас будет состоять из контейнера фиксированной ширины...

верхний блок, занимающий всю ширину контейнера...

ряд : блок с классом.row... который предназначен для размещения блоков с классами системы сеток и будет содержать основной блок (main) и правый блок (sidebar)

нижний блок...

по умолчанию блок состоит из 12 колонок Bootstrap. Основному блоку (main) установим ширину равную 9 колонкам Bootstrap … правому блоку (sidebar) 3 колонки, оставшиеся от 12 колонок Bootstrap …