На прошлой неделе мы начали новый макет страницы с Bootstrap 3, сегодня мы собираемся закончить его. Сегодня мы рассмотрим создание следующих элементов: боковая панель, цитата, основной контент, блок «наша команда», нижний колонтитул, твиттер, карта сайта и кнопки социальных сетей. Как обычно, мы будем добавлять их шаг за шагом, стилизуя наши элементы.
Боковая панель
В боковой панели, кроме подменю, находится также изображение с расположением офисов.
Чтобы отобразить его, подойдем к компоненту «панель», точнее — к его варианту «основная панель» (panel-primary) для окраски заголовка. Этот компонент содержит блок заголовка (заголовок панели) и блок контента (тело панели). Затем мы добавляем класс 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>
Мы уже установили цвет фона панели (panel-bg) в атрибутах начальной загрузки, и теперь мы указываем, что у «основной» панели будет серая граница панели по умолчанию, а не синяя, как по умолчанию:
@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;
Блок «Наша команда»
Сначала мы добавим заголовок для этого раздела:
<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;
}
}
}
А затем добавьте блок с командой класса, который состоит из двух строк, содержащих карточки сотрудников. Каждая карта — это столбец. Каждая карта имеет ширину, равную четырем столбцам нашей сетки. Все карты, кроме первой строки, имеют поле слева, созданное с помощью класса col-sm-offset-1. Каждая карта состоит из изображения и описания:
<div class="team">
<div class="row">
<div class="col col-sm-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-sm-4 col-sm-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-sm-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-sm-4 col-sm-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-sm-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-sm-offset-1. Стандартная маржа была слишком большой, поэтому мы изменили ее до 3,7%.
нижний колонтитул
Нижний колонтитул состоит из четырех основных частей: канал Twitter, карта сайта, социальные ссылки и логотип с авторским текстом.
Сначала мы создаем контейнер для нижнего колонтитула с этими блоками:
<footer>
<div class="container">
<div class="row">
<div class="col-md-8 col-xs-12 twitter"></div>
<div class="col-md-4 col-xs-12 sitemap"></div>
<div class="clearfix visible-sm visible-xs"></div>
<div class="col-md-6 col-xs-12 social"></div>
<div class="col-md-6 col-xs-12 footer-logo"></div>
</div>
</div>
</footer>
тогда мы настраиваем это:
footer {
background: #7e7e7e;
color: #dbdbdb;
font-size: 11px;
overflow: hidden;
.container {
height: 110px;
padding: 10px 0;
}
}
Нижний колонтитул тега определяет серую область по ширине экрана, а внутренний контейнер отображает другую область, которая центрирована на больших экранах, и задает высоту и поле нижнего колонтитула. Для выравнивания блоков в нижнем колонтитуле мы используем столбцы.
Лента Твиттера
Разметка твиттера выглядит следующим образом:
<div class="col-md-8 col-xs-12 twitter"> <h3>Twitter feed</h3> <time datetime="2015-03-03"><a href="#">03 mar</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 col-xs-12 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 col-xs-12 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="https://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 col-xs-12 footer-logo"> <a href="/"><img src="images/footer-logo.png" alt="Whitesquare logo"></a> <p>Copyright © 2015 Whitesquare.</p> </div>
Стили аналогичны предыдущим блокам, с той лишь разницей, что блок выровнен по правой стороне и выровнен внутри него по правой стороне:
body {
…
.footer {
…
.container {
…
.footer-logo {
float: right;
margin-top: 20px;
font-size: 10px;
text-align: right;
a {
text-decoration: underline;
}
}
}
}
}