MyTetra Share
Делитесь знаниями!
Краткая памятка по Bootstrap CSS - контейнеры, колонки, классы размеров
21.03.2019
11:46
Автор: Xintrea
Текстовые метки: css, bootstrap, верстка, адаптивная
Раздел: Компьютер - Программирование - HTML и CSS - Bootstrap

Стандартные блоки контейнеров


<div class="container"> - ширина блока 940px (для десктопа), блок размещается по центру. То есть, для десктопа, слева и справа от данного блока будут отступы от краев страницы. Этот же блок, будучи отображенным на экране мобильника, отступов иметь не будет, и будет отображаться на всю ширину страницы.


<div class="container-fluid"> - блок растягивается на всю ширину родительского элемента



Строки в блоках


В каждом блоке-контейнере следующим вложенным тегом обязательно должен быть блок с классом row, так называемая "строка блоков". Блок с классом row нужен для того, чтобы чтобы работала задание размеров для всех вложенных блоков.



Классы размеров


При написании классов, задающих размеры (в размерности "количество столбцов") используются следующие суффиксы:


  • xs - (eXtra Small) суффикс для очень маленьких экранов (мобильники)
  • sm - (SMall) суффикс для маленьких экранов (планшеты)
  • md - (MiDdle) суффикс для экранов ноутбуков
  • lg - (LarGe) суффикс для десктопов


Примеры написания классов: col-md-4, col-lg-5 и т.д.



Пример блока с разбивкой на столбцы


В следующем примере показывается использование сетки Bootstrap. Сетка имеет всегда 12 столбцов. Причем 12 столбцов в текущем обрамляющем блоке. В примере создаются блоки, каждый шириной 4 столбца. Эти блоки создаются в блоке с классом "container", ширина которого 940px для десктопа. Соответственно, ширина блоков получится по 313px.



<body>

<div class="container">

<div class="row">

<div class="col-md-4" style="background-color: #FF9999">Left</div>

<div class="col-md-4" style="background-color: #99CCFF">Center</div>

<div class="col-md-4" style="background-color: #00CC99">Right</div>

</div>

</div>

</body>



Ели окно будет меньше, чем 940px, то отступов у блока с классом "container" не будет. Если окно будет совсем узкое, то блоки выстроятся по вертикали, друг под другом.



Пример адаптивной верстки для разных устройств


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



<div class="row">

<div class="col-xs-12 col-sm-9 col-md-4 col-lg-6">Первый</div>

<div class="col-xs-12 col-sm-3 col-md-8 col-lg-6">Второй</div>

</div>



Здесь ширина блоков будет следующая:


  • Десктоп - оба блока будут шириной 6 столбцов,
  • Ноутбук - ширина 4 и 8 столбцов,
  • Планшет - ширина 9 и 3 столбца,
  • Мобильный - ширина 12 стобцов для каждого блока, т.е. блоки будут располагаться по вертикали, второй под первым.



Изменение порядка следования блоков


С этой темой надо разбираться отдельно... Кратко, что пока ясно - это возможность "засовывать" и "извлекать" блоки на определенных местах через механизм, похожий на стек.


Пример:



<div class="row">

<div class"col-lg-5 col-lg-push-7" style="background-color: #00DDFF">Первый</div>

<div class"col-lg-7 col-lg-push-5" style="background-color: #CC00FF">Второй</div>

</div>



В этом примере слева окажется блок Второй (шириной 7 столбцов), а справа - Первый (шириной 5 столбцов).


 
MyTetra Share v.0.52
Яндекс индекс цитирования