Настройки стиля Стиль по умолчанию

Тема сайта
Размеры макета
Основная цветовая схема
Задний фон макета ?
Шрифт для заголовков
Вид шапки сайта
Фон для шапки
Без текстуры
Радиус скругления блоков, px
Верхнее меню
Варианты расположения
Прикрепить меню при прокрутке
Фон выпадающего меню
Оформление кнопок
Атман «Корпоративный» Корпоративный сайт на 1С-Битрикс
+7 (495) 111 22 33 8 (800) 100 80 80
ежедневно с 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>