Адаптивный дизайн с помощью Bootstrap 3 Grid System. Делаем макет сайта

Что касается основных блоков или областей сайта, то тут можно выделить следующие:
1. header - шапка сайта, верхняя область в которой находится логотип, главное меню (иногда), доп. инфа (контакты, доп. меню, переключатели языков) и т.д.
2. footer - подвал сайта, самая нижняя часть веб-страницы в которой могут находится дополнительные меню, блок с подпиской, блок с контактами, социальные иконки, копирайт и т.д.
3. основная часть - находится как правило сразу под шапкой сайта. В основной части содержимое варьируется в зависимости от тематики сайта, если это блок, то будет некий контент (пост, страница и т.д.), если это интернет магазин, то тут будет товар (страница товара, категория товаров и т.д.).
4. sidebar - боковая панель сайта, она бывает не во всех дизайнах, а в некоторых их может быть несколько. Сайдбар как правило находится слева или справа от основного контента и содержит в себе различные виджеты.

На этом я пожалуй остановлюсь, т.к. не вижу смысла расширять список выше перечисленных областей, которые присущи большинству сайтов.

Особенности верстки с применением сетки

Ниже представлен код разметки, для формирование четырех столбцов при помощи сетки:

<div class="container">
    <div class="row">
        <div class="col-md-3"><p>Column 1</p></div>
        <div class="col-md-3"><p>Column 2</p></div>
        <div class="col-md-3"><p>Column 3</p></div>
        <div class="col-md-3"><p>Column 4</p></div>
    </div>
</div>

Как видно из кода выше, для формирование структуры сайта используются три основных класса: .container, .row, .col-*.
.container - блок обертки всего содержимого, задает основную ширину сайта
.row - блок обертки для колонок, имеет отрицательный отступ
.col-* - непосредственно блок колонки

Теперь давайте немного подробнее поговорим об правил построения макета с применением сетки.

• Строки (.rows) должны быть размещены в пределах .container (фиксированной ширины) или .container-fluid (полной ширины) для правильного выравнивания и заполнения.
• Используйте строки (.rows) для создания горизонтальной группы столбцов.
• Содержание должно быть размещены в столбцах, и только колонны могут быть непосредственными потомками строк.
• Стандартные классы сетки, такие как .row и .col-xs-4 используются для быстрого создания сетки макетов.
• Колонны имеют внутренний отступ (padding), который для первой и последней колонны компенсируется отрицательным отступом margin в .row.
• Столбцы сетки создаются с учетом максимального количества столбцов - 12, т.е. чтобы создать три блока, то нужно использовать класс .col-md-4.
• Если в одном ряду размещено более 12 колон (суммарное значение ширины всех колонок), то каждая последующая колона будет перенесена на новый ряд.

Ниже приведена таблица css классов для элементов сетки (колонок):

Скачаем css grid bootdtrap 3 к себе на компьютер

Переходим на страницу настроек содержания вашего архива bootstrap 3 и снимаем все галочки, оставляем только на против Grid System
(это если вы хотите скачать только стили для формирования макета с помощью сетки)

Подключаем Bootstrap Grid Sysytem к себе на страницу:

<link rel="stylesheet" type="text/css" href="css/bootstrap.css">

Верстаем каркас сайта с помощью bootstrap3 grid system

Каркас мы будем делать без содержимого, т.е. будут только условные блоки.
Пример верстки я решил сделать для интернет магазина, т.к. в таком случае будем более наглядно отображено поведение блоков при изменении ширины браузера.

В моем макете будут следующие области:
1. шапка сайта в ней логотип и содержимое шапки
2. сайдбар
3. подвал, разделенный на верхнюю часть с 4 блоками меню и нижнюю часть с копирайтом и областью социальных иконок
4. основная область категории с 8 продуктами

Помимо основных классов сетки я ввел внутрь каждой колоны блок с классом .well который залил серым цветом (для наглядности). Так же все блоки .row имеют идентификаторы, сделал я это специально, чтобы показать, что использование сетки не создает особой глубины или вложенности в html верстке. Все блоки с колонок также имеют свои "семантические" классы.

Вот весь код сверстанного макета с применением bootstrap 3 grid system:

<div id="wrapper" class="container">
	<div id="header" class="row">
		<div id="logo" class="col-md-3"><div class="well">3<br>#logo</div></div>
		<div id="header-content" class="col-md-9"><div class="well">9<br>header-content</div></div>
	</div>
	<div id="category" class="row">
		<div id="featured" class="col-md-9">
			<div class="row">
				<div class="product col-sm-6 col-md-4 col-lg-3"><div class="well">3<br>product</div></div>
				<div class="product col-sm-6 col-md-4 col-lg-3"><div class="well">3<br>product</div></div>
				<div class="product col-sm-6 col-md-4 col-lg-3"><div class="well">3<br>product</div></div>
				<div class="product col-sm-6 col-md-4 col-lg-3"><div class="well">3<br>product</div></div>

				<div class="product col-sm-6 col-md-4 col-lg-3"><div class="well">3<br>product</div></div>
				<div class="product col-sm-6 col-md-4 col-lg-3"><div class="well">3<br>product</div></div>
				<div class="product col-sm-6 col-md-4 col-lg-3"><div class="well">3<br>product</div></div>
				<div class="product col-sm-6 col-md-4 col-lg-3"><div class="well">3<br>product</div></div>
			</div>
		</div>
		<div id="sidebar" class="col-md-3"><div class="well">3<br>#sidebar</div></div>
	</div>
	<div id="footer">
		<div class="footer-top row">
			<div class="menu-footer col-sm-6 col-md-3"><div class="well">3<br>.menu-footer</div></div>
			<div class="menu-footer col-sm-6 col-md-3"><div class="well">3<br>.menu-footer</div></div>
			<div class="menu-footer col-sm-6 col-md-3"><div class="well">3<br>.menu-footer</div></div>
			<div class="menu-footer col-sm-6 col-md-3"><div class="well">3<br>.menu-footer</div></div>
		</div>
		<div class="footer-bottom row">
			<div class="copyrights col-sm-6 col-md-6"><div class="well">6<br>.copyrights</div></div>
			<div class="social-icons col-sm-6 col-md-6"><div class="well">6<br>.social-icons</div></div>
	</div>
</div>

Как видно из верстки, для блока product используется сразу три класса колонок: col-sm-6 col-md-4 col-lg-3.
col-lg-3 отобразить наши товары по 4 вряд, для экранов шириной более 1200px
col-md-4 отобразить наши товары по 3 вряд, для экранов шириной более 992px
col-sm-6 отобразить наши товары по 2 вряд, для экранов шириной более 768px

Таким образом комбинируя классы со значением ширины блока для разного разрешения экрана пользовательского устройства, мы добиваемся адаптивности нашего дизайна и качественного и отзывчивого отображения самого сайта.

Применение сетки при создании сайта позволяет шаблонизировать рутинные подходы к однотипным проектам и создавать уже готовые макеты (решения) для разноплановых задач.

Подводим итоги: верстка с помощью сетки довольно проста и удобна, сказать, что из-за ее использования html структура слишком увеличивается и растет глубина вложенности элементов сайта, я не могу. Если подчистить под себя файл библиотеки стилей для bootstrap 3 сетки, то можно получить размер менее 10Kb, а то еще и меньше. Одним словом пробуйте, экспериментируйте и находите удобное для себя решение, которое ускорило бы вашу работу и качество.