Категория: HTML5.
В прошлой статье мы начали создавать новый макет с использованием Bootstrap 3, в этой статье мы собираемся его закончить. Мы рассмотрим создание следующих элементов: боковая панель, цитаты, основное содержание, блоки наша команда, футер, карта, социальные кнопки. Как обычно мы будем добавлять их шаг за шагом.
Боковая панель
Для отображения боковой панели мы будем использовать компонент “panel”, а точнее изменённый вариант ‘main panel’ (panel-primary), который применялся для шапки.
Этот компонент содержит блок заголовка (panel-heading) и блок контента (panel-body).
Затем мы добавим класс img-responsive для отображения изображения, он будет уменьшать изображения для маленьких экранов (адаптивность).
… Our offices
Мы уже установили цвет фона панели (panel-bg) в атрибуты Bootstrap, а теперь отмечаем что ‘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.
Добавим его в колонке содержания.
«Quisque in enim velit, at dignissim est. nulla ul corper, dolor ac pellentesque placerat, justo tellus gravida erat, vel porttitor libero erat.»
John Doe, Lorem Ipsum
С помощью переменных компонента 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: '';
}
}
}
}
}
}
Здесь мы убрали округления уколов и также добавляем наши стили шрифтов.
Основное содержание
Все необходимые стили для текста нашего контента мы уде добавили ранее.
Поэтому остаётся добавить только три абзаца текста.
Lorem ipsum dolor sit amet...
Donec vel nisl nibh...
Donec vel nisl nibh...
Следующим шагом является добавление двух изображений, которые находятся ниже текста.
Это делается с помощью двух столбцов:
Класс thumbnail преобразует изображения в эскизы. Таким образом он делает большую работу за нас для стилизации изображений.
Нам только нужно установить отступы и цвет границы в переменных этого компонента.
@thumbnail-padding: 1px; @thumbnail-border: #c9c9c9;
Блок «Наша команда»
Во первых мы добавим заголовок для этого раздела:
Our team
Со следующими стилями
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-sm-offset-1.
Каждая карта состоит из изображения и описания.
John Doe
ceo
Saundra Pittsley
team leader …
Ericka Nobriga
art director
Cody Rousselle
senior ui designer …
После создания этой разметки, мы определяем следующие стили для этих элементов:
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%. Нижний колонтитул Footer состоит из четырёх основных частей: твиттера, карты сайта, кнопок социальных сетей и логотип с авторским текстом.
Во первых мы создаём контейнер для колонтитула с этими блоками:
И добавим стили:
footer {
background: #7e7e7e;
color: #dbdbdb;
font-size: 11px;
overflow: hidden;
.container {
height: 110px;
padding: 10px 0;
}
}
Тег footer определяет серую зону по всей ширине и высоте экрана и внутренний контейнер отображающий другую область.
Для выравнивания блоков мы используем столбцы.
Разметка для блока Твиттера заключается в следующем:
Twitter feed
03 mar
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
Теперь определим стили для этого раздела:
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;
}
}
}
}
}
Карта сайта
Карта сайта состоит из двух одинаковых столбцов с ссылками.
}
Мы применяем цвет, шрифт и поля для ссылок:
body {
…
footer {
…
.container {
…
a {
color: #dbdbdb;
}
.sitemap a {
display: block;
font-size: 12px;
margin-bottom: 5px;
}
}
}
}
Социальные кнопки
Мы ставим набор кнопок социальных сетей в блоке классом social.
Social networks
И переменяем стили к этой колонке:
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 мы переместили фон, так что каждая ссылка будет отображать соответствующие изображение.
Авторские права
Блок с авторским правом и логотипом – это картинка с ссылкой и абзац с текстом под ней.
Copyright © 2015 Whitesquare.
Стили похожи на предыдущие блоки с той лишь разницей, что блок выравнивается по правой стороне.
body {
…
.footer {
…
.container {
…
.footer-logo {
float: right;
margin-top: 20px;
font-size: 10px;
text-align: right;
a {
text-decoration: underline;
}
}
}
}
}