Bootstrap Grid — небольшие устройства
Пример Bootstrap Grid: небольшие устройства
| Extra small | Small | Medium | Large | |
|---|---|---|---|---|
| Class prefix | .col-xs |
.col-sm |
.col-md |
.col-lg |
| Screen width | <768px | >=768px | >=992px | >=1200px |
Предположим, у нас есть простой макет с двумя столбцами. Мы хотим, чтобы столбцы были разделены на 25%/75% для небольших устройств.
Совет. Под малыми устройствами понимаются устройства с шириной экрана от 768 до 991 пикселя .
Для небольших устройств мы будем использовать .col-sm-*классы.
Мы добавим следующие классы к нашим двум столбцам:
<div class="col-sm-3">....</div>
<div class="col-sm-9">....</div>
Теперь Bootstrap скажет: «При небольшом размере ищите классы с -sm- и используйте их».
Следующий пример приведет к разделению 25%/75% на малых (средних и больших) устройствах. На очень маленьких устройствах он будет автоматически складываться (100%):
Пример
<div class="container-fluid">
<h1>Hello World!</h1>
<div class="row">
<div class="col-sm-3" style="background-color:yellow;">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-9" style="background-color:pink;">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
Примечание. Убедитесь, что сумма всегда равна 12.
Для разделения 33,3%/66,6% вы должны использовать .col-sm-4and .col-sm-8:
Пример
<div class="container-fluid">
<h1>Hello World!</h1>
<div class="row">
<div class="col-sm-4" style="background-color:yellow;">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-8" style="background-color:pink;">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
В следующей главе показано, как добавить другой процент разделения для средних устройств.