Bootstrap 3 - navbar (горизонтальное меню)

Две базовые страницы начальной загрузки

В следующем примере показан код базовой страницы начальной загрузки (с контейнером с фиксированной шириной ответа):

Пример

<!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/3.3.1/jquery.min.js»></script>

<script src=»https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js»></script>
</head><body><div class=»container»> <h1>My First Bootstrap Page</h1> <p>This is some text.</p> </div></body></html>

В следующем примере показан код базовой начальной страницы (с контейнером с полной шириной):

Пример

<!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/3.3.1/jquery.min.js»></script>

<script src=»https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js»></script></head><body><div class=»container-fluid»> <h1>My First Bootstrap Page</h1> <p>This is some text.</p> </div></body></html>

❮ Назад
Дальше ❯

Как это устроено

Разберём как работает сеточная система:

Наша сетка поддерживает шесть отзывчивых контрольных точек. Контрольные точки основаны на медиа-запросах , то есть они влияют на эту точку останова и на все те, которые находятся над ней (например, и применяется к , , и ). Это означает, что вы можете контролировать размер контейнера и столбцов в каждой контрольной точке.
Контейнеры располагаются по центру и горизонтально дополняя ваш контент. Используйте при адаптивной ширине, для на всех экранах и устройствах или в адаптивном контейнере (например, ) для сочетания адаптивности и заданной ширины.
Строки являются обертками для столбцов. Каждый столбец имеет горизонтальный для создания отступов между отдельными колонками. Этот нейтрализует строки с отрицательной полями для обеспечения визуального выравнивания содержимого в столбцах по левой стороне. Строки также поддерживают классы-модификаторы для и изменения отступов вашего контента.
Невероятно гибкие столбцы. В каждой строке доступно 12 шаблонных столбцов, что позволяет создавать различные комбинации элементов, которые охватывают любое количество столбцов. Так, если вы хотите использовать четыре колонки одной ширины, используйте . Ширина задается в процентах, поэтому размер будет всегда одинаковый
Отступы также отзывчивы и настраиваемы. Классы отступов между столбцами доступны во всех точках останова, с такими же размерами, как наши классы полей и интервалы заполнения. Замените отступы с помощью классов , вертикальные отступы с помощью или все отступы с классами . Класс также доступен для удаления отступов.
Большие возможности Sass переменных, карт и миксинов для использования в ситеме сеток. Если вы не хотите использовать предопределенные классы сеток в Bootstrap, то вы можете использовать для создания своей собственной с более семантической разметкой. Мы также включили некоторые пользовательские свойства CSS, чтобы использовать эти переменные Sass для большей гибкости в ваших проектах.

Помните об ограничениях и ошибках ошибках flexbox, таких как .

Что такое Bootstrap?

Bootstrap — это открытый и бесплатный HTML, CSS и JS фреймворк, который используется веб-разработчиками для быстрой вёрстки адаптивных дизайнов сайтов и веб-приложений.

Фреймворк Bootstrap используется по всему миру не только независимыми разработчиками, но иногда и целыми компаниями. На Bootstrap создано очень много различных сайтов, посмотреть их можно на странице Bootstrap Expo.

Основная область его применения – это фронтенд разработка сайтов и интерфейсов админок. Среди аналогичных систем (Foundation, UIkit, Semantic UI, InK и др.) фреймворк Bootstrap является самым популярным.

Почему Bootstrap так популярен? Это связано с тем, что он позволяет верстать сайты в несколько раз быстрее, чем на «чистом» CSS и JavaScript. А в нашем мире, время – это очень ценный ресурс. Ещё один его аспект – доступность. Она сводится к тому, что предоставляет возможность даже начинающему веб-разработчику (без глубоких знаний и достаточной практики) создавать достаточно качественные макеты.

Фреймворк Bootstrap – это набор набор CSS и JavaScript файлов. Чтобы его использовать эти файлы необходимо просто подключить к странице. После этого вам станут доступны инструменты данного фреймворка: колоночная система (сетка Bootstrap), классы и компоненты.

Как он работает? Например, чтобы создать кнопку на странице с помощью Bootstrap, достаточно к ссылке или элементу добавить всего несколько классов.

Создание кнопки в Bootstrap 5:

Ну как? Сколько на это потребовалось времени? Да, всего несколько секунд.

А если, например, нужно создать вкладки. Для этого необходимо всего лишь скопировать готовый HTML фрагмент, и отредактировать его так, чтобы в нём остался код для определённого количества вкладок:

Всё, вкладки готовы. На это тоже ушли считанные секунды. Правда, потрясающая скорость. В этом сила Bootstrap.

Но, Bootstrap – это не просто набор готовых инструментов (HTML фрагментов, классов, компонентов и плагинов), а хорошо спроектированный фронтенд фреймворк, который довольно просто можно настроить под себя посредством редактирования Sass переменных и использования миксинов.

Процентное округления в Safari

Движок для отображения версий Safari до версии v7.1 для OS X и Safari для iOS В8.0 были некоторые проблемы с количеством десятичных знаков, используемых в нашем грид классов. Так что если у вас 12 индивидуальный грид столбцы, Вы заметите, что они придумали короткие по сравнению с другими рядами колонн. Помимо обновления сафари на iOS, у вас есть несколько вариантов решений:

Добавить в вашей последней колонки в разметке, чтобы получить жесткое выравнивание по правому краю.
Изменить проценты вручную, чтобы получить идеальное округления для Safari (более сложно, чем в первом варианте)

Валидаторы

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

Эти предупреждения не имеют значения в практике, поскольку не вымышленная часть нашей CSS делает полной проверки и богатство порциями не препятствовать нормальному функционированию, не ломаные части, поэтому мы намеренно игнорируют эти предупреждения.

Скрытые

Скрытие элементов в зависимости от размера экрана:

Пример

<h2>Example</h2><p>Resize this page to see how the text below changes:</p><h1 class=»hidden-xs bg-danger»>This text is hidden on an EXTRA SMALL screen.</h1><h1 class=»hidden-sm bg-info»>This text is hidden on a SMALL screen.</h1><h1 class=»hidden-md bg-warning»>This is text hidden on a MEDIUM screen.</h1><h1 class=»hidden-lg bg-success»>This is text hidden on a LARGE screen.</h1>

Result:

Пример

Resize this page to see how the text below changes:

This is text hidden on a LARGE screen.

По состоянию на v 3.2.0, классы для поставляются в трех вариациях, по одному для каждого значения свойства CSS:

Группа классов	CSS дисплей
visible-*-block	display: block;
.visible-*-inline	display: inline;
.visible-*-inline-block	display: inline-block;

Например, для малых ( ) экранов доступны следующие классы: , и .

Классы ,, и являются устаревшими по состоянию на v 3.2.0.

Пример

<h2>Example</h2><p>Resize this page to see how the text below changes:</p><h1 class=»visible-xs»>This text is shown only on an EXTRA SMALL screen.</h1><h1 class=»visible-sm»>This text is shown only on a SMALL screen.</h1><h1 class=»visible-md»>This text is shown only on a MEDIUM screen.</h1><h1 class=»visible-lg»>This text is shown only on a LARGE screen.</h1>

Result:

Пример

Resize this page to see how the text below changes:

Классы скрытия/отображения элементов для Bootstrap 5

Поскольку классы для размеров экранов были несколько изменены в Bootstrap 5, то и классы для скрытия/отображения элементов в 5-й версии этого фреймворка несколько расширились. Добавился учет размеров экрана ≥1400px с названием XX-Large и классами типа , и и т.п.

Размер экрана	Класс
Скрыт при всех
Скрыт только при xs
Скрыт только при sm
Скрыт только при md
Скрыт только при lg
Скрыт только при xl
Скрыт только при xxl
Виден при всех
Виден только при xs
Виден только при sm
Виден только при md
Виден только при lg
Виден только при xl
Виден только при xxl

Если сравнить 2 таблицы — для 4-й и 5-й версии Bootstrap, то становится заметно, что множество классов в 5-й версии наследуется из 4-й. Добавлены были только классы и . Поэтому в примере ниже вы увидите вариации использования только этих классов. Для того чтобы поэкспериментировать с разными разрешениями экрана, щелкните на ссылке или спрячьте на странице.

See the Pen Bootstrap 5-alpha additional display classes by Elen (@ambassador) on CodePen.dark

Navbar — Открытие dropdown меню при наведении

Сценарий JavaScript, с помощью которого можно изменить способ открытия выпадающих списков в десктопной версии меню Navbar (при наведении):

$(function() {
  function onNavbar() {
    if (window.innerWidth >= 768) {
      $('.navbar-default .dropdown').on('mouseover', function(){
        $('.dropdown-toggle', this).next('.dropdown-menu').show();
      }).on('mouseout', function(){
        $('.dropdown-toggle', this).next('.dropdown-menu').hide();
      });
      $('.dropdown-toggle').click(function() {
        if ($(this).next('.dropdown-menu').is(':visible')) {
          window.location = $(this).attr('href');
        }
      });
    } else {
      $('.navbar-default .dropdown').off('mouseover').off('mouseout');
    }
  }
  $(window).resize(function() {
    onNavbar();
  });
  onNavbar();
});

Контекстуальные фоны (цвета для установления фона)

Кроме классов, предназначенных для выделения текста цветом, в Twitter Bootstrap 3 есть ещё несколько классов, которые предназначены для установления цветного фона блочным элементам HTML.

Например:

<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>
<a class="bg-primary" href="#">Пример ссылки</a>
<a class="bg-success" href="#">Пример ссылки</a>
<a class="bg-info" href="#">Пример ссылки</a>
<a class="bg-warning" href="#">Пример ссылки</a>
<a class="bg-danger" href="#">Пример ссылки</a>

Абзацы с различным фоном:

Lorem ipsum dolor sit amet. Officiis debitis aut reiciendis voluptatibus maiores alias consequatur aut fugit.

Sint et dolorum fuga sit voluptatem accusantium. Cum soluta nobis est et dolorum fuga obcaecati cupiditate.

Delectus, ut aut perferendis doloribus asperiores repellat.. Excepturi sint, obcaecati cupiditate non provident, similique sunt.

Optio, cumque nihil impedit, quo minus. Similique sunt in culpa. Nam libero tempore, cum soluta.

Magni dolores et voluptates repudiandae. Voluptatem sequi nesciunt, neque porro quisquam est, omnis dolor repellendus quibusdam.

Ссылки:

Примечание: Иногда контекстуальные классы, предназначенные для задания фона некоторому элементу, могут не изменить его цвет в связи с тем, что на данный элемент могут оказывать стили других классов или селекторов. В большинстве случаев для решения подобной проблемы достаточно обернуть некоторый контент в элемент и добавить к нему класс для задания цветного фона.

Как работают варианты и акцентированные таблицы?

Для таблиц с акцентом (, и ) мы использовали некоторые методы, чтобы эти эффекты работали для всех наших :

Мы начинаем с установки фона ячейки таблицы с помощью настраиваемого свойства. Затем все варианты таблицы устанавливают это настраиваемое свойство для раскрашивания ячеек таблицы. Таким образом, у нас не будет проблем, если полупрозрачные цвета используются в качестве фона стола.
Затем мы добавляем градиент в ячейки таблицы, чтобы слой поверх любого указанного . Поскольку по умолчанию прозрачно, по умолчанию у нас есть невидимый прозрачный линейный градиент.
Когда добавляются классы либо , либо , устанавливается полупрозрачный цвет для раскрашивания фона.
Для каждого варианта таблицы мы генерируем цвет с наивысшим контрастом в зависимости от этого цвета. Например, цвет акцента для более темный, но имеет более светлый цвет акцента.
Цвета текста и границ генерируются одинаково, а их цвета наследуются по умолчанию.

За кадром это выглядит так:

Классы скрытия/отображения элементов для Bootstrap 3

На данный момент 3-я версия Bootstap уже отошла далеко в прошлое, но в сети еще есть ряд сайтов, сверстанные именно на этом варианте Bootstap . Поэтому в таблице ниже представлены классы, скрывающие/отображающие элементы для определенных разрешений экрана. В Bootstap-3 был несколько иной подход, чем в Bootstap-4 и 5, поэтому классы имеют приставки или .

Телефоны и планшеты до (<) 768px	Планшеты более (≥) 768px	Компьютеры, ноутбуки и планшеты более (≥)992px	Компьютеры, ноутбуки более(≥)1200px
Отображается	Скрыт	Скрыт	Скрыт
Скрыт	Отображается	Скрыт	Скрыт
Скрыт	Скрыт	Отображается	Скрыт
Скрыт	Скрыт	Скрыт	Отображается
Hidden	Отображается	Отображается	Отображается
Отображается	Скрыт	Отображается	Отображается
Отображается	Отображается	Скрыт	Отображается
Отображается	Отображается	Отображается	Скрыт

Ссылки:

Утилиты отображения Bootstrap-5 (англ)
Утилиты отображения Bootstrap-5 (рус)
Утилиты отображения Bootstrap-4 (рус)
Утилиты отображения Bootstrap-4 (англ)

Создание вкладок на фреймворке Bootstrap

Создание вкладок в Bootstrap 4 начинается с создания самих вкладок.

Для этого необходимо создать список с классами и . После этого в нужно поместить определённое количество элементов с классом . Их количество должно соответствовать количеству вкладок, которые мы хотим создать.

<ul class="nav nav-tabs">
  <li class="nav-item"></li>
  <li class="nav-item"></li>
</ul>

Затем в каждый элемент необходимо вложить ссылку с классом , атрибутом и . В следует указать ссылку на блок, который она будет показывать (связан с ней). Содержимое элемента будет являться названием вкладки. Кроме этого, к одной из ссылок следует добавить класс . Этот класс будет определять вкладку, которая должна быть выделенной (активной) по умолчанию.

<ul class="nav nav-tabs">
  <!-- Первая вкладка (активная) -->
  <li class="nav-item">
    <a class="nav-link active" data-toggle="tab" href="#description">Описание</a>
  </li>
  <!-- Вторая вкладка -->
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#characteristics">Характеристики</a>
  </li>
  ...
</ul>

После создания самих вкладок необходимо создать блоки с контентом, которые будут переключаться с помощью них.

Для этого нужно создать элемент с классом . Он будет являться контейнером. В нём необходимо создать блоки с классом и атрибутом . Значение должно определять вкладку, связанную с этим блоком. К блоку, содержимое которого необходимо отображать по умолчанию, необходимо добавить классы и . При желании к блокам также можно добавить класс . Это подключит к ним анимацию и сделает их переключение более плавным.

<!-- Сами вкладки -->
<ul class="nav nav-tabs">...</ul>
<!-- Блоки с контентом -->
<div class="tab-content">
  <!-- Первый блок (он отображается по умолчанию, т.к. имеет классы show и active) -->
  <div class="tab-pane fade show active" id="description">...</div>
  <!-- Второй блок -->
  <div class="tab-pane fade" id="characteristics">...</div>
  ...
</div>

После этого в каждый из этих блоков следует поместить определённый контент, который нужно будет отображать при активности той или иной вкладки.

В итоге:

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" data-toggle="tab" href="#description">Описание</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#characteristics">Характеристики</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#opinion">Отзывы</a>
  </li>
</ul>
<div class="tab-content">
  <div class="tab-pane fade show active" id="description">
    Описание товара...
  </div>
  <div class="tab-pane fade" id="characteristics">
    Характеристики товара...
  </div>
  <div class="tab-pane fade" id="opinion">
    Отзывы...
  </div>
</div>

В Bootstrap 3 HTML-разметка и вид вкладок немного отличается от 4 версии. Пример, приведённый выше, в Bootstrap 3 будет выглядеть следующим образом:

<ul class="nav nav-tabs">
  <li class="active">
    <a data-toggle="tab" href="#description">Описание</a>
  </li>
  <li>
    <a data-toggle="tab" href="#characteristics">Характеристики</a>
  </li>
  <li>
    <a data-toggle="tab" href="#opinion">Отзывы</a>
  </li>
</ul>
<div class="tab-content">
  <div class="tab-pane active" id="description">
    Описание товара...
  </div>
  <div class="tab-pane" id="characteristics">
    Характеристики товара...
  </div>
  <div class="tab-pane" id="opinion">
    Отзывы...
  </div>
</div>

В этих примерах активирование компонента Tabs (логики на JavaScript, применительно к этим элементам) выполнялось с помощью атрибута .

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

Ключевые отличия

Сравнение с сеткой по умолчанию:

Утилиты Flex не влияют на столбцы CSS Grid таким же образом.
Заменяет зазоры водосточные желоба. Свойство заменяет горизонтальный из нашей системы сетки по умолчанию и работает больше как .
Таким образом, в отличие от , не имеет отрицательного отступа, и утилиты отступа не могут использоваться для изменения промежутков сетки. Промежутки сетки по умолчанию применяются по горизонтали и вертикали. Смотрите для получения более подробной информации.
Встроенные и пользовательские стили следует рассматривать как замену для классов модификаторов (например, против ).
Вложение работает аналогично, но может потребовать от вас сбросить счетчик столбцов для каждого экземпляра вложенного файла . Смотрите для получения подробной информации.

Быстрое создания плавающих элементов (float)

Данные классы предназначены для создания плавающих элементов, которые смещаются насколько возможно влево (класс ) или вправо (). Кроме этого в данные классы добавлено правило , которое повышает приоритет свойства и предотвращает данные классы Bootstrap от возможных проблем.

<div class="pull-left">...</div>
<div class="pull-right">...</div>

Примечание: классы и нельзя использовать для выравнивания элементов в компоненте . Если вы хотите выровнять некоторые элементы в навигационном меню, то используйте специальные предназначенные для этого служебные классы и . Более подробно познакомиться с данными классами можно в статье, посвященной рассмотрению компонента navbar.

События компонента Tabs

При открытии и переключении вкладок данный компонент генерирует определённые виды событий.

Всего их 4 и генерируются они в следующем порядке (при переключении вкладок):

– перед скрытием текущей активной вкладки, которая через некоторое время будет не активной;
– перед отображением вкладки, которая через некоторое время будет активной;
– после скрытия предыдущей активной вкладки (т.е. той, которая была в событии );
– после отображения новой активной вкладки, которая сейчас будет отображаться пользователю.

Если ни одна из вкладок (tab) ещё не была активной, то события и генерироваться не будут.

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

Пример, в котором показано работа с событиями компонента Tabs:

// обработка события show.bs.tab
$('').on('show.bs.tab', function (e) {
  var
    activeTab = $(e.target), // активная вкладка
    previousTab = $(e.relatedTarget); // предыдущая вкладка, которая до этого была активной
  // выведем в консоль название активной вкладки
  console.log(activeTab.text());
  // выведем в консоль название предыдущей вкладки
  console.log(previousTab.text());
});
// обработка события shown.bs.tab
$('').on('shown.bs.tab', function (e) {
  var
    activeTab = $(e.target), // активная вкладка
    previousTab = $(e.relatedTarget); // предыдущая вкладка, которая до этого была активной
  // выведем в консоль название активной вкладки
  console.log(activeTab.text());
  // выведем в консоль название предыдущей вкладки
  console.log(previousTab.text());
});
// обработка события hide.bs.tab
$('').on('hide.bs.tab', function (e) {
  var
    activeTab = $(e.relatedTarget), // активная вкладка
    previousTab = $(e.target); // предыдущая вкладка, которая до этого была активной
  // выведем в консоль название активной вкладки
  console.log(activeTab.text());
  // выведем в консоль название предыдущей вкладки
  console.log(previousTab.text());
});
// обработка события hidden.bs.tab
$('').on('hidden.bs.tab', function (e) {
  var
    activeTab = $(e.relatedTarget), // активная вкладка
    previousTab = $(e.target); // предыдущая вкладка, которая до этого была активной
  // выведем в консоль название активной вкладки
  console.log(activeTab.text());
  // выведем в консоль название предыдущей вкладки
  console.log(previousTab.text());
});

Шаги для блокировки адаптивного просмотра

Опустите просмотр как об этом сказано в
Переопределить на Для каждого грид уровня, с одной ширины, например быть уверены, что это происходит после умолчанию Bootstrap CSS. Можно избежать с медиа запросы или какой-селектор-фу.
Если вы используете навигационное меню, удалите все меню, которые могут сворачиваться/разворачиваться.
Для макета разметки используйте классы как дополнение или вместо классов medium/large. Не волнуйтесь, для extra-small устройств разметка масштабируется для всех размеров экранов.

Вам еще нужно Respond.js для IE8 (так как наш медиа запросы еще есть и должны быть обработаны).
Это отключает «мобильный сайт» аспекта Bootstrap.

Параметры плагина Affix

Параметры могут быть установлены с помощью атрибутов Data или JavaScript. Для атрибутов Data добавьте имя параметра к (например: ).

Параметр	Описание
	Тип: . Значение по умолчанию: . Задаёт величину смещения элемента в пикселях от краёв экрана. Данное значение является контрольной точкой, при которой плагин переключает элемент веб-страницы из одного состояния в другое и наоборот, т.е. включает или выключает «прикрепление» элемента. Величина смещения вычисляется на основании позиции прокрутки. Если Вы зададите в качестве смещения одно значение, то оно будет применяться в обоих направлениях (верх и вниз). Например: или Если Вам необходимо динамически вычислить значение смещения, то используйте функцию.
	Тип: . Значение по умолчанию: объект . Этот параметр предназначен для указания элемента, к которому необходимо добавить плагин Affix.

Параметр

Описание

Тип: . Значение по умолчанию: . Задаёт величину смещения элемента в пикселях от краёв экрана. Данное значение является контрольной точкой, при которой плагин переключает элемент веб-страницы из одного состояния в другое и наоборот, т.е. включает или выключает «прикрепление» элемента. Величина смещения вычисляется на основании позиции прокрутки. Если Вы зададите в качестве смещения одно значение, то оно будет применяться в обоих направлениях (верх и вниз).
Например: или
Если Вам необходимо динамически вычислить значение смещения, то используйте функцию.

Тип: . Значение по умолчанию: объект . Этот параметр предназначен для указания элемента, к которому необходимо добавить плагин Affix.

Вложенность

Подобно нашей сетке по умолчанию, наша CSS Grid позволяет легко встраивать файлы . Однако, в отличие от значения по умолчанию, эта сетка наследует изменения в строках, столбцах и промежутках. Рассмотрим пример ниже:

Мы переопределяем количество столбцов по умолчанию с помощью локальной переменной CSS: .
В первом автоматическом столбце количество столбцов наследуется, и каждый столбец составляет одну треть доступной ширины.
Во втором автоматическом столбце мы сбросили счетчик столбцов во вложенном на 12 (наше значение по умолчанию).
В третьем автоколонке нет вложенного содержимого.

На практике это позволяет создавать более сложные и настраиваемые макеты по сравнению с нашей сеткой по умолчанию.

Первая автоколонка

Автоколонка
Автоколонка

Вторая автоколонка

6 of 12
4 of 12
2 of 12

Третья автоколонка

Позиционирование элементов

Данное руководство устарело. Актуальное руководство: Руководство по ASP.NET Core

Последнее обновление: 31.10.2015

При использовании Bootstrap очень удобно позиционировать интерфейс в виде таблицы или сетки, используя строки и столбцы. Так, если мы
посмотрим в браузере на стандартное представление Index.cshtml, которое идет по умолчанию, то мы увидим подобное позиционирование: элементы под заголовком
расположены как бы в три столбца и составляют одну строку:

Если мы откроем код представления, то мы можем увидеть использование классов bootstrap:

<div class="row">
    <div class="col-md-4">
        <h2>Getting started</h2>
        <p>.............</p>
    </div>
    <div class="col-md-4">
        <h2>Get more libraries</h2>
        <p>.............</p>
    </div>
    <div class="col-md-4">
        <h2>Web Hosting</h2>
        <p>.............</p>
    </div>
</div>

Класс row задает расположение отдельных блоков в виде одной строки. Строка в Bootstrap может иметь до 12 столбцов. Строк может быть сколько угодно,
но в данном случае у нас одна строка.

Для создания отдельного столбца строки используется класс . , как ясно из названия, обозначает столбец.

Дальше идет — идентификатор устройства. Как мы увидели в прошлой теме, bootstrap делит все устройства условно на четыре группы в зависимости от
ширины экрана. md, в частности, соотносится со средними устройствами (то есть которые имеют ширину от 992 пикселя и выше). А число 4 указывает, сколько условных
единиц в строке будет занимать данный блок. Таким образом, получается, что класс означает, что данный блок будет занимать 4 условных единицы из 12 в строке, то есть треть ширины
экрана устройства с экраном шириной от 992 пикселей.

И поскольку у нас есть четыре группы, то для каждой группы имеются свои классы. Например, для очень маленьких устройств с экраном меньше 768 пикселей (то есть мобильных телефонов),
подобный класс мог бы быть таким col-xs-4.

Все типы классов:

col-xs-*: для устройств с шириной экрана меньше 768 пикселей
col-sm-*: для устройств с шириной экрана от 768 пикселей и выше
col-md-*: для устройств с шириной экрана от 992 пикселя и выше
col-lg-*: для устройств с шириной экрана от 1200 пикселей и выше

Хотя даже на мобильных устройствах блок с классом будет выглядеть вполне неплохо, но мы можем установить сразу два класса,
чтобы еще больше детализировать отображение на различных устройствах, например:

<div class="col-xs-12 col-md-4">

И хотя в представлении Index.cshtml по умолчанию все три блока имеют относительную ширину в 4 единицы, составляя в целом 12 единиц, мы можем задать
любую другую ширину, позиционируя их по собственному усмотрению. Например:

Отступы

Специальные классы позволяют задать смещение относительно левого блока или начала строки в условных единицах.
Например, у нас есть такая строка:

<div class="row">
    <div class="col-md-4">
        <h2>Левый блок</h2>
        <p>................</p>
    </div>
    <div class="col-md-4 col-md-offset-4">
        <h2>Правый блок</h2>
        <p>................</p>
    </div>
</div>

Класс будет смещать правый блок на 4 условных единицы вправо:

Некоторые примеры по использованию смещения:

Порядок столбцов

С помощью классов и мы можем переопределить порядок блоков в строке.
Например, класс сдвигает блок на четыре единицы вправо от текущего положения. И наоборот, класс
сдвигает блок влево от текущей позиции. Так, предыдущий пример со смещением мы могли бы переписать следующим образом:

<div class="row">
    <div class="col-md-4">
        <h2>Левый блок</h2>
        <p>................</p>
    </div>
    <div class="col-md-4 col-md-push-4">
        <h2>Правый блок</h2>
        <p>................</p>
    </div>
</div>

И у нас был бы тот же эффект. Но мы можем также полностью переупорядочить порядок следования блоков:

<div class="row">
    <div class="col-md-4 col-md-push-8">
        <h2>Левый блок</h2>
        <p>................</p>
    </div>
    <div class="col-md-4 col-md-pull-4">
        <h2>Правый блок</h2>
        <p>................</p>
    </div>
</div>

Теперь правый блок сместится влево на четыре единицы, а левый блок — вправо на 8 единиц:

Таким образом, используя класс row и классы столбцов, мы можем задать общее расположение элементов, а адаптивность bootstrap гарантирует, что
на любых устройствах подобная сетка элементов будет выглядеть вполне нормально. Теперь рассмотрим некоторые компоненты, которые предлагает нам Bootstrap.

НазадВперед

Варианты

Используйте контекстные классы для раскрашивания таблиц, строк таблицы или отдельных ячеек.

Учебный класс	Заголовок	Заголовок
По умолчанию	Ячейка	Ячейка
Первичный	Ячейка	Ячейка
Вторичный	Ячейка	Ячейка
Успех	Ячейка	Ячейка
Опасность	Ячейка	Ячейка
Предупреждение	Ячейка	Ячейка
Информация	Ячейка	Ячейка
Свет	Ячейка	Ячейка
Темно	Ячейка	Ячейка

Передача смысла вспомогательным технологиям

Использование цвета для добавления смысла обеспечивает только визуальную индикацию, которая не будет передана пользователям вспомогательных технологий, таких как программы чтения с экрана. Убедитесь, что информация, обозначенная цветом, либо очевидна из самого контента (например, видимый текст), либо включена с помощью альтернативных средств, таких как дополнительный текст, скрытый с классом .

Доступные команды Grunt

(Просто собрать CSS и JavaScript)

Регенерирует каталог с скомпилированными и уменьшенными CSS и файлами JavaScript. Обычно для пользователя Bootstrap , это команда необходима.

(сборка и проверка документов активов)

Сборка и тестирование CSS, JavaScript, и прочих активов, которые используются при локальном использовании документации через .

(Построить абсолютно все и запустить тесты)

Компиляции and минифайлы CSS and JavaScript, строит сайт документаций, запускает HTML5 валидатор против документов, восстанавливает активы настройщика, и многое другое. Требует Jekyll. Обычно это необходимо, только если вы взломали сам загрузчик Bootstrap.