Великий Путь Вебмастера от идеи до интернет бизнеса
Блог Романа Чуешова
Начни зарабатывать на создании сайтов, лендингов, мобильных приложениях и новейших интернет технологиях

Рассмотрим bootstrap центрирование: горизонтальное, вертикальное, табличное и навигационное

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

Спасибо за ваше внимание. Если вам понравилась публикация, то подписывайтесь на обновления моего блога и рассказывайте о нем друзьям. Пока-пока!

С уважением, Роман Чуешов


Прочитано: 214 раз
Этот блог уже читают
читай и ты!
Оставить коментарий
:p :-p 8) 8-) :lol: =( :( :-( :8 ;) ;-) :(( :o: