Шаблоны са йтов для 1С-Битрикс, готовые решения, разработка сайтов
Профессиональное составление строительных смет
+7 (495) 646 02 52 8 (800) 100 67 79
ежедневно с 9:00 до 18:00

Сетка

Наше решение построено на 24 колоночной сетке, более подробно о применении можно почитать тут.
Отличие лишь в том, что framework bootstrap, который используется в нашем решении, построен на 12 колоночной сетке.


1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1

<div class="row demo-grid">
	<div class="col-md-1"><span class="grid-block">1</span></div>
	<div class="col-md-1"><span class="grid-block">1</span></div>
	<div class="col-md-1"><span class="grid-block">1</span></div>
	<div class="col-md-1"><span class="grid-block">1</span></div>
	<div class="col-md-1"><span class="grid-block">1</span></div>
	<div class="col-md-1"><span class="grid-block">1</span></div>
	<div class="col-md-1"><span class="grid-block">1</span></div>
	<div class="col-md-1"><span class="grid-block">1</span></div>
	<div class="col-md-1"><span class="grid-block">1</span></div>
	<div class="col-md-1"><span class="grid-block">1</span></div>
	<div class="col-md-1"><span class="grid-block">1</span></div>
	<div class="col-md-1"><span class="grid-block">1</span></div>
	<div class="col-md-1"><span class="grid-block">1</span></div>
	<div class="col-md-1"><span class="grid-block">1</span></div>
	<div class="col-md-1"><span class="grid-block">1</span></div>
	<div class="col-md-1"><span class="grid-block">1</span></div>
	<div class="col-md-1"><span class="grid-block">1</span></div>
	<div class="col-md-1"><span class="grid-block">1</span></div>
	<div class="col-md-1"><span class="grid-block">1</span></div>
	<div class="col-md-1"><span class="grid-block">1</span></div>
	<div class="col-md-1"><span class="grid-block">1</span></div>
	<div class="col-md-1"><span class="grid-block">1</span></div>
	<div class="col-md-1"><span class="grid-block">1</span></div>
	<div class="col-md-1"><span class="grid-block">1</span></div>
</div>

2
2
2
2
2
2
2
2
2
2
2
2

<div class="row demo-grid">
	<div class="col-sm-2"><span class="grid-block">2</span></div>
	<div class="col-sm-2"><span class="grid-block">2</span></div>
	<div class="col-sm-2"><span class="grid-block">2</span></div>
	<div class="col-sm-2"><span class="grid-block">2</span></div>
	<div class="col-sm-2"><span class="grid-block">2</span></div>
	<div class="col-sm-2"><span class="grid-block">2</span></div>
	<div class="col-sm-2"><span class="grid-block">2</span></div>
	<div class="col-sm-2"><span class="grid-block">2</span></div>
	<div class="col-sm-2"><span class="grid-block">2</span></div>
	<div class="col-sm-2"><span class="grid-block">2</span></div>
	<div class="col-sm-2"><span class="grid-block">2</span></div>
	<div class="col-sm-2"><span class="grid-block">2</span></div>
</div>

4
4
4
4
4
4

<div class="row demo-grid">
	<div class="col-xs-4"><span class="grid-block">4</span></div>
	<div class="col-xs-4"><span class="grid-block">4</span></div>
	<div class="col-xs-4"><span class="grid-block">4</span></div>
	<div class="col-xs-4"><span class="grid-block">4</span></div>
	<div class="col-xs-4"><span class="grid-block">4</span></div>
	<div class="col-xs-4"><span class="grid-block">4</span></div>
</div>

6
6
6
6

<div class="row demo-grid">
	<div class="col-xs-6"><span class="grid-block">6</span></div>
	<div class="col-xs-6"><span class="grid-block">6</span></div>
	<div class="col-xs-6"><span class="grid-block">6</span></div>
	<div class="col-xs-6"><span class="grid-block">6</span></div>
</div>

8
8
8

<div class="row demo-grid">
	<div class="col-xs-8"><span class="grid-block">8</span></div>
	<div class="col-xs-8"><span class="grid-block">8</span></div>
	<div class="col-xs-8"><span class="grid-block">8</span></div>
</div>

12
12

<div class="row demo-grid">
	<div class="col-xs-12"><span class="grid-block">12</span></div>
	<div class="col-xs-12"><span class="grid-block">12</span></div>
</div>

24

<div class="row demo-grid">
	<div class="col-xs-24"><span class="grid-block">24</span></div>
</div>

4
8
8
4

<div class="row demo-grid">
	<div class="col-xs-4"><span class="grid-block">4</span></div>
	<div class="col-xs-8"><span class="grid-block">8</span></div>
	<div class="col-xs-8"><span class="grid-block">8</span></div>
	<div class="col-xs-4"><span class="grid-block">4</span></div>
</div>

10
10

<div class="row demo-grid">
	<div class="col-xs-10 col-xs-offset-2"><span class="grid-block">10</span></div>
	<div class="col-xs-10"><span class="grid-block">10</span></div>
</div>

8

<div class="row demo-grid">
	<div class="col-xs-8 col-xs-offset-8"><span class="grid-block">8</span></div>
</div>

4
4
4
4

<div class="row demo-grid">
	<div class="col-xs-4"><span class="grid-block">4</span></div>
	<div class="col-xs-4 col-xs-offset-4"><span class="grid-block">4</span></div>
	<div class="col-xs-4"><span class="grid-block">4</span></div>
	<div class="col-xs-4 col-xs-offset-4"><span class="grid-block">4</span></div>
</div>