Скрипты

repairer-2-3-система-управления-мастерской Система управления мастерской по ремонту электроники и т.д. Это на самом деле инновационный, простой и мощный инструмент управления. Это просто Ваш...
cool-comments-ajax-system Ajax Cool coments это система для добавления комментариев очень легко на любой сайт или веб-страницу. Она была конструирована думая 100% о конечном...
stockpile-система-управления-запасами-и-заказами StockPile делает процесс управления инвентаризации на основе бизнеса гораздо проще. Все ваши запасы, заказы и клиенты управляются и учитываются в одном...

Для Photoshop

animation-glitch-photoshop-action Action для программы Photoshop, который генерирует видео ряд анимационных эффектов в виде помех на экране, из ваших изображений. Вы можете создать...
radiant-action-photoshop Экшен для программы Photoshop, создаёт эффект света и геометрических фигур, что поможет создать стильный модный вид вашему образу. Создавайте яркие и...
doomsday-action-экшен-для-photoshop Экшен для программы Photoshop, создаёт потрясающий эффект драматизма с глубокими тенями и световым контрактом. Отлично подойдёт при создании рекламных...

Создание макета страницы с Bootstrap 3 Часть-2

thumb Page layout with Bootstrap 3

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

Боковая панель

Для отображения боковой панели мы будем использовать компонент “panel”, а точнее изменённый вариант ‘main panel’ (panel-primary), который применялся для шапки.

Page layout with Bootstrap 1
Этот компонент содержит блок заголовка (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>

Мы уже установили цвет фона панели (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;
}
}

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

Цитата

Мы начнём расположения содержания, добавив цитату.

Page layout with Bootstrap 2

Этот элемент страницы наиболее похож на компонент 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: '';
}
}
}
}
}
}

Здесь мы убрали округления уколов и также добавляем наши стили шрифтов.
Основное содержание

Page layout with Bootstrap 3

Все необходимые стили для текста нашего контента мы уде добавили ранее.
Поэтому остаётся добавить только три абзаца текста.

<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;

Блок «Наша команда»

Page layout with Bootstrap

Во первых мы добавим заголовок для этого раздела:

<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-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%.
Нижний колонтитул Footer состоит из четырёх основных частей: твиттера, карты сайта, кнопок социальных сетей и логотип с авторским текстом.

Page layout with Bootstrap

Во первых мы создаём контейнер для колонтитула с этими блоками:

<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;
}
}

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

Page layout with Bootstrap

Разметка для блока Твиттера заключается в следующем:

<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;
}
}
}
}
}

Карта сайта

Карта сайта состоит из двух одинаковых столбцов с ссылками.

Page layout with Bootstrap

Спойлер.

Мы применяем цвет, шрифт и поля для ссылок:

Спойлер.
body {
…
footer {
…
.container  {
…
a {
color: #dbdbdb;
}
.sitemap a {
display: block;
font-size: 12px;
margin-bottom: 5px;
}
}
}
} 

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

Page layout with Bootstrap

Мы ставим набор кнопок социальных сетей в блоке классом 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="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 мы переместили фон, так что каждая ссылка будет отображать соответствующие изображение.

Авторские права

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

Page layout with Bootstrap

<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;
}
}
}
}
}
 


  1. Комментарии (0)

  2. Add Yours

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

Комментарии отсутствуют

Оставьте свой комментарий

Оставить комментарий в качестве гостя. Зарегистрироваться либо авторизоваться.
Вложения (0 / 3)
Поделиться вашим местоположением

Векторная графика

плашки-для-рекламных-текстов Набор ярких плашек для рекламных текстов в векторном формате, которые значительно выделят ваш текст на общем фоне. Формат файлов: AI / EPS /...
start-up-rockets-–-ракеты-в-векторе Набор векторных изображений, разного вида летящих ракет. Можно использовать при создании анимации и рекламных баннеров. Формат файлов:...
pop-art-man-векторные-мужчин-в-стиле-поп-арт Набор изображений в векторном формате, яркие иллюстрации мужчин в модном стиле поп арт, отлично подойдёт при создании рекламных баннеров. Формат...

Растовая графика

атлетика-и-бодибилдинг-–-фото-клипарт Набор из 32 изображений высокого качества на тему атлетики и бодибилдинга. Отлично подойдут для рекламных флаеров, баннеров и слайдеров на сайтах...
интернет-технологии,компьютер,гаджеты-–-фото-клипарт Набор из 25 изображений высокого качества, различные интернет технологии, компьютеры, гаджеты. Отлично подойдет для слайд-шоу. Размер 4800 на 3200 px....
бизнес-леди-–-набор-фото-клипарта Набор из 15 изображений высокого качества с красивой блондинкой, бизнес-леди. Эти изображения отлично подойдут для использования в презентациях,...