Пользователь
0,0
рейтинг
1 февраля 2014 в 13:41

Разработка → Как сверстать веб-страницу. Часть 2 — Bootstrap tutorial

Введение


Уважаемый читатель, эта статья является второй частью цикла статей, посвященных вёрстке.

В первой части мы верстали шаблон Corporate Blue от студии Pcklaboratory с помощью стандартных средств на чистом HTML и CSS. В данной статье мы попробуем сверстать этот же шаблон, но с помощью CSS фреймворка Bootstrap 3.

image

Преимущество использования CSS фреймворков заключается в том, что верстальщику не нужно думать о многих нюансах верстки, которые за него уже продумали создатели фреймворков. К таким нюансам относятся кроссбраузерность, поддержка различных разрешений экранов и многое другое. Верстальщик лишь указывает, что, как и когда нужно показать, остальное фреймворк делает сам. Данный подход может сильно ускорить вёрстку сайта. К преимуществам Bootstrap относится и его популярность. Это означает, что другому верстальщику будет проще поддерживать ваш код.

Недостатком использования фреймворков является тот факт, что странице придется целиком «нести» за собой лишние стили фреймворка, даже если она использует лишь их малую часть. Фреймворк является отличным инструментом для прототипирования и создания страниц, для которых дизайн вторичен, например страницы администрирования. Если же у вас есть очень специфический дизайн, то сверстать его с помощью фреймворка может оказаться сложнее, чем нативными средствами. Тем не менее, и это возможно.

Об использовании Bootstrap


В настоящее время есть несколько способов работы со стилями Bootstrap.

Без использования LESS

Для новичков сам Bootstrap рекомендует следующий подход: нужно скачать с сайта скомпилированный Bootstrap и положить его в свой проект, ничего не изменяя. Затем нужно создать свой пустой CSS файл и подключить его после bootstrap.css.

<link href="css/bootstrap.min.css" rel="stylesheet"> 
<link href="css/styles.css" rel="stylesheet">

После этого, для того чтобы изменить стили Bootstrap вам нужно перебить их в своем styles.css примерно в таком виде:

a { color: #beceda; }

Очевидным минусом данного подхода является то, что вам придется вручную искать нужные стили, которые требуется перебить и не всегда это будет тривиально, т.к. некоторые параметры Bootstrap применяются ко многим селекторам в изменённом виде, например через формулы. Небольшую помощь здесь может оказать инструмент Customize, он поможет скомпилировать правильно ваши изменения, но только один раз. Если в будущем вы захотите изменить какой-то параметр, то придется заново вбивать изменненные значения для всех полей, чтобы скомпилировать свои стили.

С использованием LESS

Данный способ подразумевает, что все переменные Bootstrap хранятся в .less файлах. Разработчик работает с этими переменными и по необходимости вручную или автоматически компилирует их в CSS файлы, а сам HTML подключает только скомпилированные CSS файлы. Именно этот вариант и будет рассматриваться в статье, как самый гибкий.

Существует большое количество способов скомпилировать LESS файлы и Bootstrap оставляет это на усмотрение разработчика. Сам Bootstrap использует для компиляции Grunt, вы можете предпочесть плагин для продуктов JetBrains, а мы, поскольку статья ориентирована на новичков, посмотрим в сторону более простых решений. Такими решениями являются программы WinLess для Windows, SimpLESS для Mac или Koala для Linux. Все эти программы делают примерно одно и то же: получают на вход папку с LESS файлами и слушают изменения в них. Как только вы вносите изменения в любой файл – тут же он компилируется в указанный CSS файл. Таким образом вам нет необходимости запускать компиляцию руками после каждого изменения. Вы изменяете LESS файл, сохраняете его и тут же видите изменения на сайте в уже скомпилированном, сжатом виде.

Создание проекта


Первым шагом давайте создадим простую структуру файлов для нашего проекта.
  • Создаем папку с названием проекта, например whitesquare-bootstrap.
  • В ней нужно создать две вложенные папки: src – для исходных файлов и www – для файлов конечного сайта.
  • В папке www создаем пустую папку images и пустой файл index.html.
  • Затем нужно скачать сам Bootstrap и скопировать содержимое архива в папку www нашего проекта.
  • Поскольку мы решили использовать LESS в нашем проекте, то придется еще скачать исходники Bootstrap и скопировать оттуда папку less в папку src нашего проекта.
  • Рядом с появившейся папкой less/bootstrap создадим два пустых файла styles.less и variables.less. В них мы будем перебивать переменные Bootstrap и описывать свои стили. Такой подход позволит потом быстро обновить Bootstrap.



  • Затем нужно настроить компиляцию LESS файлов в CSS. Посмотрим, как это делается в WinLess. Сначала нажмите «Add folder» и укажите путь до папки с LESS файлами:
    C:\whitesquare-bootstrap\src\less
    Затем у вас появится список всех файлов этой папки. Можно убрать все галочки. Нас интересуют последние два файла styles.less и variables.less. Кликните на них правой кнопкой и выберите из контекстного меню «Select output file» и укажите путь, куда будут компилироваться CSS файлы:
    ..\..\www\css\styles.css
    ..\..\www\css\variables.css
    После этого любое изменение этих LESS файлов с сохранением будет приводить к перекомпиляции CSS файлов.




Предварительный осмотр


После создания структуры файлов открываем psd файл в Photoshop. Важно внимательно осмотреть шаблон и оценить его. Нам нужно понять следующие вещи:
  • Как будут нарезаться изображения?
  • Какие будут использоваться компоненты?
  • Какими будут основные стили?
  • Какой макет страницы у нас получится?

Только после того, как вы мысленно себе ответите на эти вопросы, можно переходить к вёрстке. Давайте рассмотрим эти вопросы по-порядку.

Общие изображения


На данном этапе нужно нарезать и сохранить только общие изображения, которые будут на всех страницах сайта и не относятся к контенту. В нашем случае это будет светло-серый фон страницы, фон заголовка, изображение карты, два логотипа и кнопки социальных сетей.

Сохраняем изображение карты:

images/map.png

Сохраним логотипы следующим образом:

images/logo.png
images/footer-logo.png

Повторяющиеся фоновые изображения необходимо вырезать минимальным кусочком достаточным для образования полного изображения повторением по вертикали и горизонтали.

/images/bg.png
/images/h1-bg.png

Иконки социальных сетей с одинаковыми размерами удобно сохранить в один файл и использовать как спрайты для более быстрой загрузки. Более подробно про склейку изображений описано в первой части. В итоге получится два файла:

/images/social.png
/images/social-small.png

Компоненты


Основное отличие вёрстки с помощью Bootstrap от вёрстки нативными средствами заключается в том, что Bootstrap вводит такое понятие, как компоненты. Компоненты представляют из себя часто используемые готовые HTML блоки с предопределенными стилями. Иногда компоненты используют JavaScript. Верстальщик может использовать как готовый компонент, так и определить свой внешний вид для него. Для этого часто нужно лишь поменять значение переменных в Bootstrap. Если нужны более гибкие изменения, верстальщик всегда может изменить HTML и CSS по своему усмотрению.

Если окинуть взглядом наш шаблон, то можно увидеть, что нам понадобятся следующие компоненты:
  1. Для верстки колонками — сеточная система (row, col)
  2. Для поиска – инлайновая форма (form-inline), сгруппированные контролы (input-group), кнопка (btn)
  3. Для навигации — навигационная панель (navbar) и сама навигация (nav)
  4. Для отображения подменю – группированный список (list-group)
  5. Для блока карты – визуальная панель (panel)
  6. Для отображения большого центрального блока – jumbotron
  7. Для отображения рамок фотографий – миниатюры (thumbnail)

Более подробно на каждом компоненте мы остановимся, когда он нам встретится в вёрстке.

Основные стили


В Bootstrap все стили по умолчанию уже заданы, нам нужно только их перебить, если они отличаются от нашего дизайна. Сделаем это в файле src/less/variables.css.

В первую очередь нужно добавить переменные, которых нет в настройках Bootstrap для того, чтобы можно было их использовать в дальнейшем. У нас это только специфический шрифт дизайна.

@brand-font: 'Oswald',sans-serif; 

Если вы хотите использовать шаблон для русских сайтов, то шрифт Oswald можно попробовать заменить на наиболее близкий Cuprum, который поддерживает кириллицу.

А теперь заменим настройки Bootstrap на свои:

/*серый фон страницы*/
@body-bg: #f8f8f8; 
/*специфический голубой фон данного дизайна*/
@ brand-primary: #29c5e6; 
/*фон панелей*/
@panel-bg: #f3f3f3;
/*цвет рамки панелей*/
@panel-inner-border: #e7e7e7;
/*убираем скругление у блоков*/
@border-radius-base: 0;
/*первичные кнопки имеют голубой фон*/
@btn-primary-bg: @brand-primary; 
/*если ширина экрана больше 992px, то ширина контейнера 960px*/
@container-md: 960px; 
/*если ширина экрана больше 1200px, то ширина контейнера так же 960px*/
@container-lg: @container-md; 
/*основным шрифтом будет Tahoma*/
@font-family-base: Tahoma, sans-serif;
/*задаем базовый размер*/
@font-size-base: 12px; 
/*основной цвет текста на странице*/
@text-color: #8f8f8f;
/*серый фон текстовых полей*/
@input-bg: @panel-bg;
/*серая рамка текстовых полей*/
@input-border: @panel-inner-border;
/*серый цвет текста в полях*/
@input-color: #b2b2b2;

Все переменные, которые есть в Bootstrap можно посмотреть на странице http://getbootstrap.com/customize/

После того, как мы закончили с переменными, давайте начнем прописывать стили нашего дизайна в файле styles.less. Сначала подключим сам Bootstrap и наши переменные:

@import "bootstrap/bootstrap.less";
@import "variables.less";

Не все стили, заданные Bootstrap по умолчанию можно изменить переменными, давайте сделаем это вручную:

p {
	margin: 20px 0;
}

.form-control {
	box-shadow: none;
}

.btn {
	font-family: @brand-font;
}

Здесь мы убрали тень у элементов формы, а текстам в кнопках указали специфический шрифт страницы.

Затем опишем фон страницы и верхнюю полоску:

body {
	border-top: 5px solid #7e7e7e;
	background-image: url(../images/bg.png);
}

Далее в тексте не будет указываться в какой файл пишутся стили. Просто запомните, что все переменные мы сохраняем в файл variables.less, а CSS стили будем хранить в styles.less.

Каркас HTML


Вёрстку сайта начинаем традиционно с каркаса HTML. Вставляем в файл index.html код простейшего шаблона со страницы Getting started, предварительно убрав всё лишнее:

<!DOCTYPE html>
<html>
	<head>
		<title>Whitesquare</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
		<link href="css/styles.css" rel="stylesheet">
		<!--[if lt IE 9]>
			<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
			<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
		<![endif]-->
	</head>
	<body>
	</body>
</html>

В этом блоке создается HTML5 структура документа. В title указываем название нашей страницы – Whitesquare. Метатегом viewport указываем, что ширина страницы на мобильных устройствах будет равна ширине экрана и начальный масштаб будет 100%. Затем подключается файл стилей. И для версий Internet Explorer меньше девятой подключаем скрипты, позволяющие правильно отображать нашу верстку.

Макет


В данном случае, мы видим, что сайт состоит из двух частей: основного контейнера с содержимым, который центрируется на экране и тянущегося футера. Основной контейнер состоит из двух колонок: основного контента и сайдбара. Над ними находится шапка (header), навигация (nav) и название страницы (.heading).



Давайте добавим в body следующий код:

<body>
	<div class="wrapper container">
		<header></header>
		<nav></nav>
		<div class="heading"></div>
		<div class="row">
			<aside class="col-md-7"></aside>
			<section class="col-md-17"></section>
		</div>
	</div>
	<footer></footer>

Здесь нам встречается первый компонент Bootstrap – колонки. Родительскому элементу колонок задается класс «row», а классы колонок начинаются с префикса «col-», затем идет размер экрана (xs, sm, md, lg), а заканчиваются относительной шириной колонки.

Колонке можно задавать одновременно различные классы со значениями для экранов, например class=«col-xs-12 col-md-8». Эти классы просто задают ширину колонке в процентах для определенного размера экрана. Если колонке не задан класс определенного экрана, то применится класс для минимально определенного экрана, а если и он не указан – то никакая ширина не применится и блок займет максимально возможную ширину.

У нас классы «col-md-7» и «col-md-17» указывают, что блоки представляют из себя колонки шириной 7 и 17 относительно родительского контейнера. По умолчанию сумма ширин колонок в Bootstrap равняется 12, однако мы увеличили это число вдвое для достижения нужной нам гибкости.

@grid-columns: 24;

Далее опишем нужные нам отступы:

body {
	…

	.wrapper {
		padding: 0 0 50px 0;
	}

	header {
		padding: 20px 0;
	}
}

Данную конструкцию мы поместили внутрь body. Синтаксис LESS позволяет вкладывать правила друг в друга, которые потом скомпилируются в такие конструкции:

body .wrapper {…}
body header {…}

Такой подход позволяет видеть структуру HTML прямо внутри CSS и дает некую «область видимости» правилам.

Логотип




Вставляем логотип в тег header:

<header>
	<a href="/"><img src="" alt="Whitesquare logo"></a>
</header>


Дополнительных стилей не требуется.

Поиск




Для того чтобы создать поиск, нам понадобятся следующие компоненты Bootstrap: инлайновая форма, сгруппированные контролы и кнопка.
В теге header создаем инлайновую форму, выровненную по правому краю. Поля такой формы обязательно должны иметь класс «form-control» и label.

В форму мы помещаем компонент «сгруппированные контролы». Группировка контролов позволяет убрать отступ между вводом текста и кнопкой и как бы слить их в единый элемент.
Он представляет из себя div с классом «input-group» и полями, а кнопка такого компонента помещается в блок с классом «input-group-btn».

Поскольку нам не нужно показывать label для поля поиска — скроем его классом «sr-only». Это нужно для специальных устройств чтения с экрана.

Кнопке добавляется класс «btn-primary», означающий, что это первичная кнопка данной формы.

<header>
…
<form name="search" action="#" method="get" class="form-inline form-search pull-right">
	<div class="input-group">
		<label class="sr-only" for="searchInput">Search</label>
		<input class="form-control" id="searchInput" type="text" name="search" placeholder="Search">
		<div class="input-group-btn">
			<button type="submit" class="btn btn-primary">GO</button>
		</div>
	</div>
</form>
</header>

Всё, что нам осталось — это задать в стилях ширину форме поиска.

body {
	…

	.wrapper {
		…

		header {
			…

			.form-search {
				width: 200px;
            		}
		}
	}
}

Меню




Для отображения меню возьмем компонент «навигационная панель» и поместим в него компонент «навигация», которая представляет из себя список со ссылками. Для навигации добавляется класс «navbar-nav», который применяет специальные стили навигации внутри навигационной панели.

<nav class="navbar navbar-default">
	<ul class="nav navbar-nav">
		<li><a href="/home/">Home</a></li>
		<li class="active"><a href="/about/">About us</a></li>
		<li><a href="/services/">Services</a></li>
		<li><a href="/partners/">Partners</a></li>
		<li><a href="/customers/">Customers</a></li>
		<li><a href="/projects/">Projects</a></li>
		<li><a href="/careers/">Careers</a></li>
		<li><a href="/contact/">Contact</a></li>			
	</ul>
</nav>

Для того, чтобы привести это меню к нашему дизайну зададим следующие значения переменным:

/*высота навигационного меню*/
@navbar-height: 37px;

/*задаем  побольше горизонтальный отступ*/
@nav-link-padding: 10px 30px;

/*фон для пунктов меню*/
@navbar-default-bg: @panel-bg;

/*цвет текста в пунктах меню*/
@navbar-default-link-color: #b2b2b2;

/*и при наведении мышки – такой же*/
@navbar-default-link-hover-color: @navbar-default-link-color;

/*фон активного пункта меню – наш специфический голубой цвет*/
@navbar-default-link-active-bg: @brand-primary;

/*цвет текста активного пункта меню*/
@navbar-default-link-active-color: #fff;

Помимо настраиваемых параметров, опишем дополнительные в стилях – это текст в верхнем регистре и наш специфический шрифт:

body {
	…
	.wrapper {
		…
		.navbar a {
			text-transform: uppercase;
			font: 14px @brand-font;
		}
	}
}

Заголовок страницы




Заголовок страницы помещается в div с классом «heading».

<div class="heading">
	<h1>About us</h1>
</div>

И имеет следующие стили:

body {
	…

	.wrapper {
		…

		.heading {
			height: 40px;
			background: transparent url(../images/h1-bg.png);
			margin: 30px 0;
			padding-left: 20px;

			h1 {
				display: inline-block;
				color: #7e7e7e;
				font: normal 40px/40px 'Oswald', sans-serif;
				background: url(../images/bg.png);
				margin: 0;
				padding: 0 10px;
				text-transform: uppercase;
			}
		}
	}
}

Здесь мы рисуем серую полоску фоном на div’e, и в нее вкладываем инлайновый h1 с нужным шрифтом и фоном цвета страницы, чтобы создалось впечатление прозрачного фона для h1.

Подменю




При создании подменю, мы не будем использовать компонент «навигация», так как по стилям он нам не очень подходит, гораздо больше нам подойдет компонент «группированный список». Каждый элемент такого компонента имеет класс «list-group-item».

Подменю нужно разместить в теге aside. Список ссылок создаем аналогично главному меню.

<aside class="col-md-7">
	<ul class="list-group submenu">
		<li class="list-group-item active">Lorem ipsum</li>
		<li class="list-group-item"><a href="/donec/">Donec tincidunt laoreet</a></li>
		<li class="list-group-item"><a href="/vestibulum/">Vestibulum elit</a></li>
		<li class="list-group-item"><a href="/etiam/">Etiam pharetra</a></li>
		<li class="list-group-item"><a href="/phasellus/">Phasellus placerat</a></li>
		<li class="list-group-item"><a href="/cras/">Cras et nisi vitae odio</a></li>
	</ul>
</aside>

В настройках компонента укажем, что все группированные списки нужно показывать с фоном и рамкой компонента «панель»:

@list-group-bg: @panel-bg;
@list-group-border: @panel-inner-border;

И применяем к подменю следующие стили:

body {
  	…

	.wrapper {
		…

		.submenu {
            		margin-bottom: 30px;

            		li {
                		display: list-item;
                		font: 300 14px @brand-font;
		             list-style-position: inside;
                		list-style-type: square;
                		padding: 10px;
                		text-transform: uppercase;

                		&.active {
                    		color: @brand-primary;
                		}

                		a {
                    		color: @text-color;
                    		text-decoration: none;

                    		&:hover {
                        			color: @text-color;
                    		}
                		}
            		}
	       }
	}
}

Сначала возвращаем элементам списка стандартные стили, так как Bootstrap их перебил на свои. Добавляем отступ снизу. Для подменю применяется более тонкий шрифт и квадратные маркеры. А для ссылок задаем цвета, верхний регистр и убираем подчеркивание. Амперсанд в коде «&.active» по синтаксису LESS во время компиляции заменится на родительский селектор: «.submenu li.active».

Контент сайдбара


В контенте сайдбара помимо подменю располагается также изображение с расположением офисов.



Для его отображения нам подойдет компонент «панель», а точнее его вариация «основная панель» (panel-primary) для раскраски заголовка. Этот компонент содержит блок заголовка (panel-heading) и блок содержания панели (panel-body). Изображению карты добавляем класс «img-responsive», который позволит картинке уменьшаться при маленькой ширине экрана.

<aside class="col-md-7">
	…
	<div class="panel panel-primary">
		<div class="panel-heading">Our offices</div>
		<div class="panel-body">
			<img src="/images/map.png" class="img-responsive" alt="Our offices">
		</div>
	</div>
</aside>

В переменных Bootstrap мы уже задали цвет для фона панели (panel-bg), а теперь укажем, что «primary» панель будет иметь серую рамку дефолтной панели, а не голубую, как задано по умолчанию:

@panel-primary-border: @panel-inner-border;

Теперь в стилях сайта нужно изменить стандартные настройки панелей, которые не изменяются через переменные:

.panel {
	box-shadow: none;
	.panel-heading {
		font: 14px @brand-font;
		text-transform: uppercase;
		padding: 10px;
	}

	.panel-body {
		padding: 10px;
	}
}

Здесь мы убрали тень у панелей, поставили свои отступы и задали свой шрифт заголовка.

Цитата


Вёрстку контента начнём с добавления цитаты.



Этот элемент страницы больше всего похож на компонент Jumbotron. Добавим его в колонку контента:

<section class="col-md-17">
	<div class="jumbotron">
		<blockquote>
			<p>
				“Quisque in enim velit, at dignissim est. nulla ul corper, dolor ac pellentesque placerat, justo tellus gravida erat, vel porttitor libero erat.” 
			</p>
			<small>John Doe, Lorem Ipsum</small>
		</blockquote>
	</div>
</section>

Через переменные для компонента jumbotron зададим белый цвет текста и брэндовый голубой фон:

@jumbotron-bg: @brand-primary;
@jumbotron-color: #fff;

И опишем наши стили:

body {
	…
	.wrapper {
		…
		.jumbotron {
			border-radius: 0;
		      	padding: 0;
			margin: 0;

			blockquote {
				border-left: none;

				p {
					font: 300 italic 33px @brand-font;
					text-transform: uppercase;
					margin-bottom: 0;
				}

				small {
					text-align: right;
					color: #1D8EA6;
					font: 300 20px @brand-font;

					&:before {
						content: '';
					}
				}
			}
		}
	}
}

В них мы убираем скругление углов, отступы компонента и декорации цитаты, заданные Bootstrap по умолчанию. Также добавим стили наших шрифтов.

Контент




Все стили для текста контента мы уже добавили. Поэтому остается добавить только три параграфа с самим текстом.

<p>Lorem ipsum dolor sit amet…</p>
<p>Donec vel nisl nibh…</p>
<p>Donec vel nisl nibh…</p>

Следующим шагом нужно добавить два изображения, которые находятся в конце текста контента. Делается это с помощью двух колонок:

<div class="row">
	<div class="col-md-12">
		<img src="/images/about-1.png" alt="" class="thumbnail">
	</div>
	<div class="col-md-12">
		<img src="/images/about-2.png" alt="" class="thumbnail">
	</div>
</div>

Класс «thumbnail» превращает изображения в компонент «миниатюра». Он сделает за нас всю работу по стилизации изображений. Единственное, что нам осталось — это установить свой отступ и цвет рамки в переменных для этого компонента:

@thumbnail-padding: 1px;
@thumbnail-border: #c9c9c9;

Блок «Our team»




При верстке этого блока добавим сначала заголовок:

<h2>Our team</h2>

со стилем:

body {
  	…

	.wrapper {
		…
	h2 {
           	 	background: none repeat scroll 0 0 #29C5E6;
          		color: #fff;
            		font: 300 30px @brand-font;
            		padding: 0 10px;
            		text-transform: uppercase;
        	}
	}
}

А затем добавим блок с классом «team», который состоит из двух строк, содержащих карточки сотрудников. Каждая карточка – это колонка. Карточка имеет ширину равную четырем колонкам нашей сетки. Все карточки кроме первой в строке имеют отступ слева, который создается классом «col-md-offset-1». Содержимое карточки состоит из изображения и описания (.caption)

<div class="team">
	<div class="row">
		<div class="col col-md-4">
			<img src="/images/team/Doe.jpg" alt="John Doe" class="thumbnail">
			<div class="caption">
				<h3>John Doe</h3>
				<p>ceo</p>
			</div>
		</div>
		<div class="col col-md-4 col-md-offset-1">
			<img src="/images/team/Pittsley.jpg" alt="Saundra Pittsley" class="thumbnail">
			<div class="caption">
				<h3>Saundra Pittsley</h3>
				<p>team leader</p>
			</div>
		</div>
		…
	</div>
	<div class="row">
		<div class="col col-md-4">
			<img src="/images/team/Nobriga.jpg" alt="Ericka Nobriga" class="thumbnail">
			<div class="caption">
				<h3>Ericka Nobriga</h3>
				<p>art director</p>
			</div>
		</div>
		<div class="col col-md-4 col-md-offset-1">
			<img src="/images/team/Rousselle.jpg" alt="Cody Rousselle" class="thumbnail">
			<div class="caption">
				<h3>Cody Rousselle</h3>
				<p>senior ui designer</p>
			</div>
		</div>
		…
	</div>
</div>

После создания разметки зададим этим элементам следующие стили:

body {
  	…
	.wrapper {
		…
	  	.team {
			.row {
			  	margin-top: 20px;

				.col {
				  	white-space:  nowrap;

				  	.thumbnail {
						margin-bottom: 5px;
				  	}
				}

				.col-md-offset-1 {
				  	margin-left: 3.7%;
				}

				.caption {
				  	h3 {
						font: 300 16px @brand-font;
						margin: 0;
				  	}

				  	p {
						font: 300 14px @brand-font;
						color: @brand-primary;
						margin: 0;
				  	}
				}
			}
		}
	}
}

Помимо отступов и стилей шрифтов, которые тут задаются, мы изменили класс «col-md-offset-1». Ему пришлось задать отступ 3.7%, т.к. стандартный отступ был слишком большой.

Футер


Футер состоит из четырёх больших блоков: ленты Твиттера, карты сайта, социальных ссылок и логотипа с копирайтом.



Для начала создадим контейнер футера с этим блоками:

<footer>
	<div class="container">
		<div class="row">
			<div class="col-md-8 twitter"></div>
			<div class="col-md-4 sitemap"></div>
			<div class="col-md-6 social"></div>
			<div class="col-md-6 footer-logo"></div>
		</div>
	</div>
</footer>

И применим к нему оформление:

footer {
  	background: #7e7e7e;
  	color: #dbdbdb;
  	font-size: 11px;

  	.container {			
		height: 110px;
		padding: 10px 0;
	}
}

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

Лента Твиттера


Верстаем содержимое ленты Твиттера:



<div class="col-md-8 twitter">
	<h3>Twitter feed</h3>
	<time datetime="2012-10-23"><a href="#">23 oct</a></time>
	<p>
In ultricies pellentesque massa a porta. Aliquam ipsum enim, hendrerit ut porta nec, ullamcorper et nulla. In eget mi dui, sit amet scelerisque nunc. Aenean aug
	</p>
</div>

Стили:

body {
	…
	footer {
		…

	  	.container {
			…
			h3 {
			  	border-bottom: 1px solid #919191;
			  	color: #ffffff;
			  	font-size: 14px;
			  	line-height: 21px;
			  	font-family: @brand-font;
			  	margin: 0 0 10px;
			  	text-transform: uppercase;
			}

			p {
			  	margin: 5px 0;
			}

			.twitter {
			  	p {
					padding-right: 15px;
				}

			  	time a {
					color: #b4aeae;
					text-decoration: underline;
			  	}
			}
		}
	}
}

Для всех заголовков футера задаем шрифты и отступы, а также делаем подчеркивание через нижнюю рамку. Для параграфов указываем отступ. Ссылке, отображающую дату, задаем цвет и подчеркивание.

Карта сайта


Карта сайта представляет собой две равные колонки со ссылками:



<div class="col-md-4 sitemap">
	<h3>Sitemap</h3>
	<div class="row">
		<div class="col-md-12">
			<a href="/home/">Home</a>
			<a href="/about/">About</a>
			<a href="/services/">Services</a>
		</div>
		<div class="col-md-12">
			<a href="/partners/">Partners</a>
			<a href="/customers/">Support</a>
			<a href="/contact/">Contact</a>
		</div>
	</div>
</div>

Ссылкам задаем цвет, шрифт и отступ между ними.

body {
	…
	footer {
		…
		.container  {
			…
			a {
			  	color: #dbdbdb;
			}

			.sitemap a {
			  	display: block;
			  	font-size: 12px;
			 	margin-bottom: 5px;
			}
		}
	}
} 

Социальные ссылки




Вставляем набор ссылок в блок с классом «social».

<div class="col-md-4 social">
	<h3>Social networks</h3>
	<a href="http://twitter.com/" class="social-icon twitter"></a>
	<a href="http://facebook.com/" class="social-icon facebook"></a>
	<a href="http://plus.google.com/" class="social-icon google-plus"></a>
	<a href="http://vimeo.com/" class="social-icon-small vimeo"></a>
	<a href="http://youtube.com/" class="social-icon-small youtube"></a>
	<a href="http://flickr.com/" class="social-icon-small flickr"></a>
	<a href="http://instagram.com/" class="social-icon-small instagram"></a>
	<a href="/rss/" class="social-icon-small rss"></a>
</div>

И стилизуем их:

body {
	…
	footer {
		…
		.container {
			…
			.social {
				.social-icon {
					width: 30px;
					height: 30px;
					background: url(../images/social.png) no-repeat;
					display: inline-block;
					margin-right: 10px;
			  	}

				.social-icon-small  {
					width: 16px;
					height: 16px;
					background: url(../images/social-small.png) no-repeat;
					display: inline-block;
					margin: 5px 6px 0 0;
			  	}

			  	.twitter { background-position: 0 0; }
			  	.facebook { background-position: -30px 0; }
			  	.google-plus { background-position: -60px 0; }
			  	.vimeo { background-position: 0 0; }
			  	.youtube { background-position: -16px 0; }
			  	.flickr { background-position: -32px 0; }
			  	.instagram { background-position: -48px 0; }
			  	.rss { background-position: -64px 0; }
			}
		}
	}
}

Здесь мы применили технику спрайтов – когда один файл с изображением применяется для разных картинок. Все ссылки разделились на большие иконки (.social-icon) и маленькие (.social-icon-small). Мы задали этим классам отображение в виде инлайнового блока с фиксированными размерами и одинаковым фоном. А затем с помощью CSS сдвинули этот фон так, чтобы на каждой ссылке отобразилось соответствующее изображение.

Копирайт


Блок с копирайтом и логотипом – это картинка со ссылкой и параграф с текстом под ней.



<div class="col-md-8 footer-logo">
	<a href="/"><img src="" alt="Whitesquare logo"></a>
	<p>
		Copyright © 2012 Whitesquare. A <a href="http://pcklab.com">pcklab</a> creation
	</p>
</div>

Стили делают аналогично предыдущим блокам с той лишь разницей, что блок прибивается к правому краю и выравнивание внутри него так же по правому краю:

body {
	…
	.footer {
		…
		.container {
			…
			.footer-logo {
			  	float: right;
			  	margin-top: 20px;
			  	font-size: 10px;
			  	text-align: right;

			  	a {
					text-decoration: underline;
				}
			}
		}
	}
}


На этом вёрстка закончена. Готовый проект можно скачать здесь.
Михаил @Mirantus
карма
46,0
рейтинг 0,0
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама

Самое читаемое Разработка

Комментарии (59)

  • 0
    А где же демка?..
  • +6
    >>Преимущество использования CSS фреймворков заключается в том, что верстальщику не нужно думать о многих нюансах верстки

    Это не так. Если верстальщик сам не будет продумывать разное поведение интерфейса, никакой фреймворк не поможет.

    >>Данный подход может сильно ускорить вёрстку сайта.

    Не соглашусь, наоборот использование фреймворков там, где это не нужно лишь, увеличивает время разработки. Часто обращаются заказчики, с тем чтобы переверстать проект который изначально был сверстан на Bootstrape. Смотришь код — там каша, часть Bootstrapа, часть писали сами, потом видать решили перейти на БЭМ… ужас :)

    Конечно, на вкус и цвет товарищей нет, но не вижу смысла использовать бутстрап, даже для прототипирования. Зачем, когда можно для того же прототипирования подключить БЭМ-компонент и вуаля. А диз потом нарисуют, компонент внутри обновлю, а хтмл-код и структура документа останется нетронутой :)
    • 0
      Тогда ваше мнение какое, для чего нужен бутстрап?
      • +4
        Если у вас нет уникального интерфейса и он не планируется — используйте бутстрап.

        Иначе (если будет уникальный интерфейс) — верстайте самостоятельно, без всяких сторонних фреймворков.
        • +2
          При чём тут вообще уникальный интерфейс? Основная идея Bootstrap — это построение сайтов, которые одинаково хорошо функционируют как на мобильных устройствах, так и на компьютерах. Bootstrap даёт в руки все необходимые инструменты для этого, а уж как они используются — это дело верстальщика.

          Можно, разумеется, пользоваться только встроенными компонентами и никак не менять их внешний вид. Тогда да, с уникальностью будут проблемы. Но никто не мешает настроить внешний вид под себя или сделать свои. Смотря на сайты, сделанные с помощью Bootstrap, как-то не похоже, чтобы у них с уникальностью интерфейса были какие-то проблемы.
          • 0
            >>Основная идея Bootstrap — это построение сайтов, которые одинаково хорошо функционируют
            >>как на мобильных устройствах, так и на компьютерах

            Это отлично делается и без бутстрапа.

            >>Но никто не мешает настроить внешний вид под себя или делать свои.

            Зачем что-то «настраивать», когда можно взять и написать, что именно нужно и как именно нужно.

            Конечно, если кто-то верстать не умеет, вот ему будет проще взять фреймворк.
            Для тех же кто этим профессионально занимается — вопрос даже не возникает, использовать эти наборы стилей или нет.

            >>Смотря на сайты, сделанные с помощью Bootstrap, как-то не похоже,
            >>чтобы у них с уникальностью интерфейса были какие-то проблемы.

            Вы уж извините, но они все как под одну копирку, похожи. Простенькие лендинги.
            Я уж не говорю про код, заглянул в первый попавшийся exosource.com и что там видим?
            id=«page» id=«header» id=«exo_logo» id=«main-content» — без комментариев
            • +2
              Делается. И самому можно писать. Только почему не воспользоваться уже готовым, чтобы сэкономить на своём времени? Какой-то странный спор.

              Сайт Grunt — это просто лендинг-страница? Или сайт Sentry? Или вот этот инструмент? Вот ещё одна коллекция сайтов, сделанных на Bootstrap. По-моему, очевидно, что на Bootstrap можно делать не только лендинг-страницы.

              Я уж не говорю про код, заглянул в первый попавшийся exosource.com

              Да, кто-то сделал кривой сайт. При чём тут сам Bootstrap?
      • +5
        Для админок идеально подходит.
    • 0
      Что такое БЭМ?
      • 0
        Это методология построения веб-приложений.
        Читайте подробности тут ru.bem.info/
  • +10
    Чем ближе к концу вашей статьи, тем больше вредных советов попадается. Особенно я бы не советовал использовать такую убер-вложенность
    body footer .container .footer-logo a {
    text-decoration: underline;
    }
    Такие стили — не есть гуд с любой точки зрения. Можно ограничиться чем-то вроде .footer-logo a {..}
  • +1
    А сейчас еще и Sass поддерживается! Жизнь налаживается! =)
    • –1
      Жизнь никогда и не было сложной, уже давно есть несколько хороших и актуальных sass-портов.
  • 0
    А расскажите, почему вы использвали winless? Просто я пытаюсь найти адекватную программу для компиляции less файлов, но ни winless, ни simpless меня не устраивают
    • 0
      Попробуйте prepros, до того как перешел на grunt я им пользовался.
    • 0
      На самом деле, на практике я использую плагин для phpStorm. Во время создания статьи я просмотрел несколько вариантов и мне показалось, что для новичка использование WinLess будет самым простым вариантом. Расскажите, чем они вас не устраивают и мы всем сообществом попробуем вам помочь.
      • 0
        simpless часто зависает, иногда добавляю 2 less файла, но компилится только один. в winless можно добавить только папку, а потом снимать галочки. у меня, например десятки less, которые включены в один основной и только его нужно компилить
    • 0
      А чем вас winless не устраивает? Я использую, отлично работает.
      Prepros, о коем говорили выше, тоже вполне себе.
    • 0
      Рекомендую gulp. Ну или grunt.

      Один раз на разобраться, и потом профит.
  • 0
    bootstrap хорошая вещь, но сколько же он несет с собой ненужных стилей… даже через firebug трудно инспектировать
    • 0
      простите мне мой нубский вопрос, но неужели нельзя вообще никак избавиться от этих стилей? потереть их как-нибудь, файлы поудалять?
  • +2
    В гуглохроме наблюдается следующий занятный косяк:

    Сразу после открытия страницы форма поиска выглядит так.

    Если, к примеру, вернуться назад и снова вперед (имею в виду хистори браузера) — форма возвращается на законное место.

    При нажатии «обновить страницу» — снова сползает.
    • +3
      Косяк из-за того, что внутри одного блока расположили и inline-level, и block-level элементы.

      Вот что происходит в таких случаях: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Visual_formatting_model#Anonymous_block_boxes

      Хотя почему хром себя так неоднозначно ведёт — вопрос. Вот наглядный пример, когда при первоначальной отрисовке получается одно, а при перерисовке — озвученная выше ситуация: http://thican.net/~camusensei/chromium_bug/floatProblem.html (надо дважды кнопку нажать)
      • 0
        Если не ошибаюсь, то в случае с формой достаточно поменять местами блоки в html (форму и лого)
  • +1
    Думаю, было бы неплохо написать еще про миксины для сетки. С ними можно обойтись без лишних, на мой взгляд, классов вроде .col-md-offset-1, что делает верстку семантичнее. Но это дело вкуса.
  • +1
    а теперь открываем страницу в ie 8…
  • +2
    Недостатком использования фреймворков является тот факт, что странице придется целиком «нести» за собой лишние стили фреймворка, даже если она использует лишь их малую часть.

    Bootstrap позволяет использовать отдельные компоненты фреймворка.
    • 0
      Конечно, именно по-этому написано «лишние», а не «все», так как все-равно в проекте окажутся некоторые ненужные стили.
      • 0
        Откуда они там возьмутся?
        Если я выберу только сетку, то и в css я получу только сетку и не более.
        • 0
          Допустим у вас есть html, в котором вы используете 2 раза только класс col-md-6 и все, однако, подключив компонент сетки к вам приедут классы col-md-1, col-md-2… col-md-12 и это не считая аналогичных классов других разрешений экранов.
          • 0
            Но зачем тянуть сетку ради одного класса? Стрельба из пушки по воробьям.
            Когда я подключаю сетку, мне нужна вся сетка, с почти всеми её фичами. Иначе я просто напишу свой собственный css.
            И случай, который привели вы, вполне реализуем. Я могу настроить переменные при кастомизации так, чтобы у меня было только две колонки в шаблоне.
  • 0
    По-хорошему если, такие вещи нужно продумывать на уровне самих веб-стандартов, чтоб люди не морочили голову написанием и использованием подобных средств. К примеру, по-моему ещё со времён третьего html можно было додуматься до необходимости тэга типа article. Про header вообще молчу…
  • +2
    Простите, но вы неправильно готовите LESS и бутстрап :)

    Про LESS:

    — Идея отображать структуру HTML в стилях не очень удачна, т.к. при изменении структуры придётся переписывать и сами стили. Взять те же социальные кнопки — они вполне могут быть расположены в шапке или в сайдбаре.

    Про бутстрап:

    — Если статья для новичков, с LESS бы я вообще не заморачивался. Идём в конструктор, отмечаем только нужные компоненты, тут же выставляем нужные значения переменных, забираем скомпилированную CSS-ку.

    — Собственно, одна из основных фишек играет против вас: макет разваливается при уменьшении размеров окна браузера. Если адаптивность не предполагается — надо отключать.

    PS: новичкам, которые познакомиться с бутстрапом (или с вёрсткой в целом, хотя начинать лучше без фреймворков), я бы посоветовал посмотреть примеры на сайте фреймворка, почитать документацию (она очень даже неплоха) и уже после этого пробовать верстать макеты.
  • +2
    <div class="row">
        <div class="col col-md-4">
            ...
        </div>
        <div class="col col-md-4 col-md-offset-1">
            ...
        </div>
        <div class="col col-md-4 col-md-offset-1">
            ...
        </div>
    </div>
    


    И далее повторяющиеся блоки.
    Вопрос 1: Для чего оборачивать это все в div.row? Для того кто будет интегрировать такой макет нужно просчитывать дополнительно каждый 5-й элемент и закрывать и открывать теги? Это не на столько серьезная проблема, но все же. Интересно. почему так?

    Вопрос 2: Каждый первый элемент имеет классы «col col-md-4», а все последующие «col col-md-4 col-md-offset-1». Это обусловлено фреймворком? Т.е. тут возникает снова проблема (ну ок, не такая уж и большая) при интеграции, высчитывать каждый первый элемент и назначать ему отличный от других класс.
    • +2
      1. Существует правило, по которому все элементы с float желательно оборачивать элементом с так называемым clearfix — это хак, который «очищает поток», искусственно выставляет у контейнера с плавающими элементами высоту, равную высоте самого крупного из них. Без него контейнер будет иметь нулевую высоту (т.к. в нем нет статического содержимого), а это может привести к тому, что последующие за ним элементы как бы «протекут» внутрь него:

        jsfiddle.net/h2k3q/

        В случае Bootstrap то же самое: сеточные «колонки» .col.col-md-4 делаются на float, а для .row задается «micro clearfix» вида

        .row:before, .row:after{
            display: table;
            content: " "
        }
        


        Кроме этого, для .row также задаются отрицательные горизонтальные отступы, равные постоянному «зазору» сетки — это необходимо для создания «full-width layout», а в некоторых css-фреймворках (например, Foundation) для .row задается также max-width, что ограничивает ширину всей сетки, и выравнивание по центру (margin: 0 auto) — по сути, то же самое, что делает .container у Bootstrap.
      2. Это обусловлено фреймворком?

        Скорее, это обусловлено структурой макета :) Но, как уже писал выше, от этих классов можно избавиться, используя миксины:

        {селектор для нужного "row"} > div{
            .make-md-column( 4 )
        }
        {селектор для нужного "row"} > div:not(:first-child){
            .make-md-column-offset( 1 )
        }
        


      • +1
        По п1. имелось ввиду: зачем группировать блоки по 5, а не использовать один общий блок с div.row и один clearfix?
        • 0
          А, прошу прощения, не так вас понял :) В принципе — незачем, можно использовать и один .row.

          В том же Foundation, кстати говоря, для таких вещей сделали Block grid. Не знаю, есть ли нечто подобное в Bootstrap.
  • +2
    Раз уж тут так много верстальщиков, объясните почему все делают так:
    <nav>
    	<ul>
    		<li>
    			<a href="#">Link 1</a>
    		</li>
    		<li>
    			<a href="#">Link 2</a>
    		</li>
    	</ul>
    </nav>
    

    а не так:
    <nav>
    	<a href="#">Link 1</a>
    	<a href="#">Link 2</a>
    </nav>
    

    Стилей меньше, мусора меньше, да и парсить анализатору — тоже проще.
    Ну и уже к автору статьи: зачем все в wrap`ер обернул? Например ту же навигацию можно было выровнять так:
    nav { 
    	display:block;
    	width: 60em;
    	margin: 0 auto;
    }
    
    • +1
      Спецификация W3C говорит, что

      A nav element doesn't have to contain a list

      но

      In cases where the content of a nav element represents a list of items, use list markup to aid understanding and navigation.

      А вообще, существует два мнения по этому вопросу:

      1. (в пользу списков) — списки внутри nav делают верстку более структурированной и семантичной. Если буквально, то мы видим перед собой «список ссылок», следовательно, и верстаем его как список ссылок. Кроме того, со списками можно легко делать навигацию, если в ней есть вложенные подразделы.
      2. (в пользу «listless» nav) — списки могут затруднять пользование сайтом людям с ограниченными возможностями, которые пользуются Screen Reader-ами (http://css-tricks.com/navigation-in-lists-to-be-or-not-to-be/).


      Однако, последнее утверждение достаточно спорное, если почитать комментарии к этой статье:

      css-tricks.com/navigation-in-lists-to-be-or-not-to-be/#comment-689246

      (...)

      (1) semantics: at the UL JAWS pauses and announces that I’ve entered a list, it tells me at least that the next items go together; NAV is better but a list of links is not necessarily a navigation, (2) JAWS understands li tags as separate items and stops after reading each item, (3) more semantics: hierarchy is clear if one list is nested inside another (subnav) – JAWS announces nesting. For nested navigation/links, I would lean towards nested lists. (4) Not sure how people use this exactly, but JAWS does have a shortcut key that detects any lists on the page. Lists are more discoverable.
    • 0
      Верстка в этой статье была сделана настолько близко к правилам, диктуемым фреймворком, насколько возможно. Многие блоки кода брались целиком из примеров, описанных в документации Bootstrap. По первому вопросу, могу предположить, что списки в меню сейчас используются для того, чтобы поисковикам было легче парсить и такой подход считается более семантичным.
    • НЛО прилетело и опубликовало эту надпись здесь
  • 0
    Ребят, а есть что-нибудь промежуточное между скелетоном и бутстрапом? одного мало, второго слишком много
    • +1
      А зачем использовать всё? Есть ведь раздел Customize, при помощи которого можно скомпилировать только то, что вам нужно. Обычно я изначально беру по минимуму компонентов. Если по ходу верстки оказалось, что чего-то не хватает, не проблема ведь взять необходимые стили/js из полной версии. Это лучше, чем взять все и большая часть кода будет просто висеть мертвым грузом.

      Этот комментарий можно считать и ответом на заявление автора статьи: «Недостатком использования фреймворков является тот факт, что странице придется целиком «нести» за собой лишние стили фреймворка, даже если она использует лишь их малую часть.» Не могу согласиться.

      Если использовать бездумно/не разобравшись, то любой, даже самый хороший инструмент может показаться плохим.
  • –1
    Bootstrap — это «не стандарт», всё что не стандарт -только запутывает разработчиков и еще много негативных моментов возникает.
    Особенно когда делала одна компания сайт на Bootstrap, а избавляла от ошибок первой другая.

    Как сказали бы в авиа сфере — стандарты написаны кровью, в прямом смысле слова. Если бы самолеты делали бы как угодно в стиле Bootstrap и не по стандартам, они падали бы как яблоки осенью.
    • –2
      Mirantus, можешь ставить минусов сколько захочешь, но bootstrap — это мода ведущая в некуда. Она совершенно запутывает всё что можно а не упрощает. Если в языках программирования можно понять FW и они там нужны, то в верстке — извините, это какое-то убожество и примитивизм разработчиков на нем.
      • 0
        Почему вы считаете, что я должен ставить вам минусы? Моя задача была описать как сейчас верстают сайты на самом популярном css фреймворке. Это отнюдь не означает, что я являюсь его евангелистом.
        • 0
          Я вам опишу ситуацию с opencart, наверно вы знакомы с этой e-commers cms.
          Разработчик её, Даниэль Керр (китаёза европейский, только китайцы и раскрутили это архитектурное недоразумение под названием opencart, поверьте на слово я знаю архитектуру от «а» до «я» opencart, а модули мои официально приобрели более чем 1000 интернет-магазинов)), решил сделать версию opencart 2.0 и перевел её на bootstrap.

          Итог — ничего в архитектуре не поменялось, ошибки он архитектурные так и не исправил (как были детские ляпы так и остались), а сама 2.0 версия уже более года «разрабатывается» (если можно назвать перевод opencart на bootstrap).
          Но… мало того 50% модулей всех разработчиков привязаны к «старой» сетке классов и id дизайна. И что будет далее. Всем все темы и модули по новой переделывать? Из-за чего! Из-за моды. Хотя там bootstrap и [censored] не нужен.

          Вот до чего доходит мода маразма с fw в верстке!

          Поэтому я и ответил, на основе опыта и анализа, правдиво, за что постоянно «получаю» не заслуженно имхо (с 250 карма уже до -12 дошла), без каких либо ответов и комментариев, мне то все равно она электронная, но очень неудобно что из-за неё не могу отвечать и комментировать могу всего раз в час, хотя как разработчику мне есть что ответить и поделиться опытом). Ну, правду не все любят :)
          • 0
            Я попробую ответить вам (сам я минусы не ставил).
            Я считаю, что верстка — это совершенно отдельная профессия, весьма далёкая от программирования.
            Вот я программист, и для меня вёрстка (чем иногда приходится заниматься) даётся сложно, гугл стонет от запросов в некоторых случаях. Для меня использование бутстрапа может стать чем-то вроде отдушины, ибо он (по крайней мере, для меня) приближает вёрстку к более формальному процессу из-за наличия компонентов.
            Я пока использовал бутстрап только в админках и прототипах своих проектиков (чтобы было хоть что-то). Благодаря этой статье, я разобрался, как его применить для чего-то более серьёзного, за что автору большое спасибо.
            Из комментов выше я понял, что профи вёрстки не используют бутстрап вообще, либо умеют его отлично готовить к месту, благодаря своему опыту. Я опыта не имею (и не так уж хочу получать, ибо не моё), и бутстрап для меня хороший инструмент, в некоторых применениях.
            Ваш скепсис тоже очень понятен, и минусуют вас не за ваш опыт (который только в третьем комменте и видно), а за категоричность. Хабр не любит категоричность, и всегда за него наказывает. Что, в принципе, и правильно.
            • 0
              В некоторых моментах категоричность должна быть. Особенно когда видишь много моментов «со стороны», особенно когда минусов гораздо больше чем плюсов. Можно сколько угодно спорить, но есть еще факты. А факты и дают категоричность.
              Хотите пользуйтесь, ваше дело, но с точки зрения профессионализма — bootstrap путь в никуда. fw для «домохозяек», которые никогда не хотят стать профессионалами
  • 0
    Нашел небольшой ляп: при мобильной версии «футер» не растягивается по вертикали, и все элементы, кроме первой колонки вылезают за пределы «футера». Решается проблемка добавлением одной строки:
    overflow:auto;
  • 0
    А вообще, автор, вам огромное СПАСИБО! Давно желал познакомиться с грамотной версткой на Бутстрапе. Неплохо было бы если бы вышел 3 урок — то же самое, только на Foundation
  • 0
    Очень смущает в footer
    <div class="row">
                <div class="col-md-8 twitter"></div>
                <div class="col-md-4 sitemap"></div>
                <div class="col-md-6 social"></div>
                <div class="col-md-6 footer-logo"></div>
            </div>
    

    ибо документация гласит что:
    Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases.
    • 0
      Нашел ответ почему так… сорри :-)

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