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

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

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

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

4

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

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

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

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

9

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

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

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

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

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

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

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

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

18

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

20