2.6 KiB
2.6 KiB
title | localeTitle |
---|---|
Grid Examples | Примеры гридов |
Примеры гридов
Три равных столбца
<div class="container">
<div class="row">
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
</div>
</div>
Вышеприведенный пример создает три столбца равной ширины на малых, средних, больших и дополнительных больших устройствах с использованием наших предопределенных классов сетки. Эти столбцы располагаются на странице с родительским .container
.
Три неравных столбца
<div class="row">
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-6">.col-sm-6</div>
<div class="col-sm-3">.col-sm-3</div>
</div>
Два неравных столбца
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-8">.col-sm-8</div>
</div>
Два столбца с двумя вложенными столбцами
<div class="row">
<div class="col-sm-8">
.col-sm-8
<div class="row">
<div class="col-sm-6">.col-sm-6</div>
<div class="col-sm-6">.col-sm-6</div>
</div>
</div>
<div class="col-sm-4">.col-sm-4</div>
</div>
Смешанный мобильный и рабочий стол
`` `` HTML
.col-xs-7 .col-sm-6 .col-lg-8
.col-xs-5 .col-sm-6 .col-lg-4
.col-xs-6 .col-sm-8 .col-lg-10
.col-xs-6 .col-sm-4 .col-lg-2
#### Clear Floats
Clear floats (with the `.clearfix` class) at specific breakpoints to prevent strange wrapping with uneven content:
HTML
Столбец 1 Измените размер окна браузера, чтобы увидеть эффект.
Столбец 2
Столбец 3
Столбец 4
#### Offsetting Columns
Move columns to the right using `.col-md-offset-*` classes. These classes increase the left margin of a column by * columns:
HTML
.col-sm-5 .col-md-6
.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0
#### Push And Pull - Change Column Ordering
Change the order of the grid columns with `.col-md-push-*` and `.col-md-pull-*` classes:
HTML
.col-sm-4 .col-sm-push-8
.col-sm-8 .col-sm-pull-4
`` `