Приветствую всех желающих досконально изучить Bootstrap 3! В текущей публикации я затрону тему, касающуюся выравнивания объектов и текста в соответствии с вашими потребностями. Другое ее название – это Bootstrap центрирование.
Данная тематика востребована при верстке сайтов и, следовательно, очень важно разбираться в этой области. Поэтому я расскажу вам, как производится центрирование по вертикали, горизонтали, каким способом можно выровнять изображения в блоках и переместить панель меню. Вперед за обучение!
Горизонтальное центрирования
Начнем с самого простого – горизонтального выравнивания контента. Для этого во фреймворке были предусмотрены специальные встроенные классы, благодаря которым можно указывать тип выравнивания объектов. Все они перечислены в таблице, прикрепленной ниже.
| Класс | Тип размещения |
| .text-left | Все элементы ровняются по левому краю. |
| .text-right | Весь контент выравнивается по правому боку. |
| .text-center | Содержимое сайта располагается по центру веб-страницы. |
| .text-justify | Выравнивание производится по ширине контейнера или блока. |
| .text-nowrap | Все объекты сервиса распределяются без отступов. |
Для сравнения работы названных классов выполните пример.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
p{ color: blue; font-size: 27px;}
</style>
</head>
<body>
<div class="container">
<p class="text-nowrap">Абрикосы</p>
<p class="text-left">Мандарины</p>
<p class="text-center">Апельсины</p>
<p class="text-right">Арбузы</p>
<p class="text-justify">Персики</p>
</div>
</body>
</html> |
Также существуют и другие элементы для описываемого вида выравнивания. Это pull-left и pull-right. Их работу можно сравнить со свойством float в каскадных таблицах стилей css.
Помимо этого, можно воспользоваться знакомой вам системой сеток. Эта технология очень гибкая и востребованная. Так что думаю вы уже знакомы с ней (если нет, то можете прочитать соответствующие статьи на моем блоге). Используя ее, у разработчика появляется возможность без лишних усилий располагать текст, видео, img внутри колонок с любой стороны.
Вертикальное центрирование
Реализация такого вида выравнивая выполняется несколько сложнее, чем предыдущего, так как ни в языке html, ни в Бутстрапе нет готовых встроенных механизмов. Поэтому девелоперы используют персональные решения проблемы. Однако на сегодняшний день существует несколько наиболее популярных вариантов, которые мы с вами и обсудим.
Grid System и padding
Начну с очевидного – Grid System и указание внутренних отступов. Это наиболее простой и легкий способ решения вертикального центрирования информации. Таким образом выравнивать можно предложения, видео и фото. Для лучшего понимания проанализируйте пример. В нем я создал блок посреди страницы и выровнял его содержимое.
1 2 3 4 5 6 7 8 | <div class="container-fluid text-center">
<div class="row">
<div class="col-xs-offset-2 col-xs-8 col-xs-offset-2 main">
<h2 >Третье чудо света!</h2>
<img class="img-responsive" src="http://www.votpusk.ru/story/edit/foto/large/32086.jpg" alt="Photo">
</div>
</div>
</div> |
А теперь добавьте в хедере документа описание стилей css:
<style>
.main {
background-color: #A52A2A;
padding: 35px;
}
</style>
Табличное представление
Второй популярный вариант центрирования по вертикали – это использование табличных представлений. Только не думайте, что я предлагаю вам сейчас создать простую таблицу и внести в нее информацию! Данный механизм достигается при помощи свойств стилевых таблиц.
Для этого вам нужно родительскому элементу прописать тип отображения display: table. А дочерние объекты поместить в ячейки этой таблицы, т.е. указать им значение одноименного свойства равным table- cell. И теперь после проделанных махинаций появляется возможность использовать такой параметр, как vertical-align. Пропишите его вместе со значением «middle».
Итак, код внутри тега <body> будет выглядеть следующим образом:
1 2 3 4 5 6 | <div class="container-fluid text-center parent">
<div class="child">
<h2 >Третье чудо света!</h2>
<p><img src="http://www.votpusk.ru/story/edit/foto/large/32086.jpg" alt="Photo"></p>
</div>
</div> |
А для стилевого оформления укажите:
1 2 3 4 5 6 7 8 9 10 11 12 13 | <style>
.parent {
height: 560px;
background-color: #A52A2A;
width:100%;
display: table;
}
.child {
display: table-cell;
vertical-align: middle;
}
img { width: 690px; height: auto;}
</style> |
Редактирование отображения навигации
И напоследок, как и обещал, разберем, как перемещать панель меню.
Для структурированного размещения навигационной панели в основном используется, не поверите, опять система сеток. Если вам нужно, чтобы меню располагалось в шапке сайта, то и в коде этот элемент располагается первым.
Однако бывают такие ситуации, когда вкладки меню находятся под, к примеру, баннером. Для этого изначально создают разметку рекламы, а после вставляют код навигации. Таким образом, вы можете разместить Navbar в любом месте веб-страницы.
Другой вариант – использование внешних (margin) и внутренних (padding) отступов.
Однако есть и встроенные классы выравнивания описываемого объекта. Это .navbar-fixed-top и .navbar-fixed-bottom, которые закрепляют навигационный блок сверху или снизу страницы соответственно. А также есть класс .navbar-right, который выравнивает пункты меню по правой стороне. Напомню, что по умолчанию они размещаются слева.
Спасибо за ваше внимание. Если вам понравилась публикация, то подписывайтесь на обновления моего блога и рассказывайте о нем друзьям. Пока-пока!
С уважением, Роман Чуешов
