Панели bootstrap: Bootstrap Бутстрап Панели

Содержание

Bootstrap Бутстрап Панели

Панели

Панель в Bootstrap представляет собой рамку с некоторой обивкой вокруг ее содержимого:

Панели создаются с помощью .panel класса, а содержимое внутри панели имеет .panel-body класс:

Пример

<div>
<div>A Basic Panel</div>
</div>

.panel-default класс используется для стиля цвета панели. Смотрите последний пример на этой странице для более контекстуальных классов.

Panel Heading

Panel Content

.panel-heading класс добавляет заголовок на панель:

Пример

<div>
<div>Panel Heading</div>
<div>Panel Content</div>
</div>

Нижний колонтитул панели

.panel-footer класс добавляет нижний колонтитул на панель:

Пример

<div>
<div>Panel Content</div>
<div>Panel Footer</div>
</div>

Группа панелей

Чтобы сгруппировать много панелей вместе, оберните <div> с классом . panel-group вокруг них.

.panel-group класс очищает нижний край каждой панели:

Пример

<div>
<div>
<div>Panel Content</div>
</div>
<div>
<div>Panel Content</div>
</div>
</div>

Панели с контекстными классами

Чтобы раскрасить панель, используйте контекстные классы (.panel-default, .panel-primary, .panel-success, .panel-info, .panel-warning или .panel-danger):

Пример

Panel with panel-default class

Panel Content

Panel with panel-primary class

Panel Content

Panel with panel-success class

Panel Content

Panel with panel-info class

Panel Content

Panel with panel-warning class

Panel Content

Panel with panel-danger class

Panel Content

Bootstrap 3 — Панели — ИТ Шеф

В этой статье вы узнаете, как создать панели с помощью Twitter Bootstrap.

Создание панели с помощью Twitter Bootstrap 3

Иногда, на сайте может потребоваться разместить некоторый логически связанный текст в рамке. Это можно сделать с помощью компонента Bootstrap панель.

Для создания панели необходимо заключить текст в блочный элемент <div> с классом .panel-body. Который в свою очередь заключить в ещё один блочный элемент <div> с классами .panel и .panel-default.


<div>
  <div>Пример простой панели</div>
</div>

Вышеприведенный пример будет выглядеть примерно так:

Bootstrap — Панель

Создание панели с заголовком

Чтобы добавить заголовок в панель, его необходимо поместить в контейнер <div> с классом .panel-heading.


<div>
  <div>Панель с заголовком</div>
  <div>
    Содержимое панели
  </div>
</div>

Bootstrap — Панель с заголовком

Вы также можете заключить текст заголовка в элементы от <h2> до <h6> и применить к нему стили с помощью класса . panel-title.


<div>
  <div>
    <h4>Панель с h4 заголовком</h4>
  </div>
  <div>
    Содержимое панели
  </div>
</div>

Bootstrap — Панель с h4 заголовком

Панель с футером

Подобно панелям с заголовком, Вы также можете добавить секцию подвала для ваших панелей, используя класс .panel-footer. Футер панели может использоваться для размещения кнопок или дополнительного текста.


<div>
  <div>
    Содержимое панели
  </div>
  <div>Панель подвала</div>
</div>

Bootstrap — Панель с футером

Классы, акцентирующие состояние контекста панели

К панелям, как и к большинству других компонентов Bootstrap, можно применять дополнительные классы (.panel-primary, .panel-success, .panel-info, .panel-warning, .panel-danger), которые выделяют её с помощью цвета. Таким образом, можно привлечь внимание пользователей.


<div>
  <div>
    <h4>Заголовок панели</h4>
  </div>
  <div>
    Содержимое панели
  </div>
</div>
<div>
  <div>
    <h4>Заголовок панели</h4>
  </div>
  <div>
    Содержимое панели
  </div>
</div>
<div>
  <div>
    <h4>Заголовок панели</h4>
  </div>
  <div>
    Содержимое панели
  </div>
</div>
<div>
  <div>
    <h4>Заголовок панели</h4>
  </div>
  <div>
    Содержимое панели
  </div>
</div>
<div>
  <div>
    <h4>Заголовок панели</h4>
  </div>
  <div>
    Содержимое панели
  </div>
</div>

Bootstrap — Панели с акцентными классами

Размещение таблиц и групповых списков внутри панелей

В панелях Twitter Bootstrap 3 можно размещать любые таблицы следующим образом:


<!-- Панель 1 -->
<div>
  <div>Заголовок панели</div>
  <div>
    <p>. ..</p>
  </div>
  <!-- Таблица -->
  <table>
    ...
  </table>
</div>

Bootstrap — Панель, содержащая текст и таблицу

При отсутствии содержимого панели, таблица примыкает к заголовку без отступа.


<div>
  <!-- Обычное содержимое панели -->
  <div>Panel heading</div>

  <!-- Таблица -->
  <table>
    ...
  </table>
</div>

Bootstrap — Панель, содержащая таблицу

Групповые списки, тоже можно, аналогичным способом размещать внутри любой панели Bootstrap.


<div>
  <!-- Обычное содержимое панели -->
  <div>Товары</div>
  <div>
    Список наименований товаров, доступных в магазине.
  </div>
  <!-- Групповой список -->
  <div>
    <a href="#">Смартфоны <span>32</span></a>
    <a href="#">Ноутбуки <span>204</span></a>
    <a href="#">Планшеты <span>517</span></a>  
    <a href="#">Компьютеры <span>71</span></a>
  </div>
</div>

Bootstrap — Панель, содержащая список

Демострация компонента Panel

Навигационная панель.

Компоненты · Bootstrap. Версия v4.0.0

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

Как это работает

Вот что вам надо знать перед использованием навбара:

Навбары требуют «обертки» из классов .navbar и .navbar-expand{-sm|-md|-lg|-xl} для отзывчивости при «складывании»и классы , а также классы цветовых схем.

Навбары и их содержимое по умолчанию занимают 100% ширины. Используйте опциональные контейнеры для ограничения их горизонтальной ширины.

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

Навбары отзывчивы по умолчанию, но вы можете легко изменить это. Отзывчивое поведение зависит от нашего «плагина свертывания» JavaScript.

Навбары скрыты по умолчанию при печати. Сделайте их печатаемыми, добавив класс .d-print в .navbar. Смотри класс отображения.

Придайте им доступность использованием элемента <nav>, или, если используется менее специфический элемент – например <div>: добавьте role="navigation" в каждый навбар для придания ему большей доступности для пользователей вспомогательных технологий.

Дальше вы увидите примеры и список поддерживаемых под-компонентов.

Поддерживаемые типы содержимого

В навбарах присутствуют встроенная поддержка многих суб-компонентов. Выбирайте нужный:

.navbar-brand для названия вашей компании, продукта или имени проекта.

.navbar-nav для навигации полной высоты (включая выпадающие элементы).

.navbar-toggler для использования с нашим JS-«плагином свертывания» и других изменяющихся состояний навигации.

.form-inline для любых органов контроля форм и действий с ними.

.navbar-text для добавления вертикально центрированных строк текста.

.collapse.navbar-collapse для группирования и скрытия содержимого навбара на определенном брейкпойнте родителя.

Вот пример всех суб-компонентов, которые включены в отзывчивый светлый навбар с автоматическим сворачиванием на брейкпойнте lg (большой).

<nav>
  <a href="#">Navbar</a>
  <button type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span></span>
  </button>

  <div>
    <ul>
      <li>
        <a href="#">Home <span>(current)</span></a>
      </li>
      <li>
        <a href="#">Link</a>
      </li>
      <li>
        <a href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div aria-labelledby="navbarDropdown">
          <a href="#">Action</a>
          <a href="#">Another action</a>
          <div></div>
          <a href="#">Something else here</a>
        </div>
      </li>
      <li>
        <a href="#">Disabled</a>
      </li>
    </ul>
    <form>
      <input type="search" placeholder="Search" aria-label="Search">
      <button type="submit">Search</button>
    </form>
  </div>
</nav>

В этом примере использованы классы цвета bg-light и спейсинга my-2, my-lg-0, mr-sm-0, my-sm-0.

Бренд

.navbar-brand можно применять к большинству элементов, но лучше всего – к ссылке, т.к. некоторые элементы могут потребовать классы или стили.

<!-- As a link -->
<nav>
  <a href="#">Navbar</a>
</nav>

<!-- As a heading -->
<nav>
  <span>Navbar</span>
</nav>

Добавление изображений к .navbar-brand почти всегда потребует дополнительной стилизации CSS и классов.

<!-- Just an image -->
<nav>
  <a href="#">
    <img src="/assets/brand/bootstrap-solid.svg" alt="">
  </a>
</nav>

<!-- Image and text -->
<nav>
  <a href="#">
    <img src="/assets/brand/bootstrap-solid. svg" alt="">
    Bootstrap
  </a>
</nav>

Навбар

Ссылки в навигации навбара сделаны на параметрах класса .nav, с их собственными классами-модификаторами; и требуют использования классов тогглера для правильного «отзывчивого» поведения. Навигация в навбарах также займет максимально возможное количество горизонтального места, для правильного выравнивания элементов навбара.

Активные состояния – с классом .active – нужны для индикации возможности применения текущей страницы напрямую к .nav-link или их непосредственному «родителю» .nav-item.

<nav>
  <a href="#">Navbar</a>
  <button type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span></span>
  </button>
  <div>
    <ul>
      <li>
        <a href="#">Home <span>(current)</span></a>
      </li>
      <li>
        <a href="#">Features</a>
      </li>
      <li>
        <a href="#">Pricing</a>
      </li>
      <li>
        <a href="#">Disabled</a>
      </li>
    </ul>
  </div>
</nav>

И т. к. мы используем классы в наших навбарах, вы можете избегать «списочного» подхода к разметке, если вам надо.

<nav>
  <a href="#">Navbar</a>
  <button type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
    <span></span>
  </button>
  <div>
    <div>
      <a href="#">Home <span>(current)</span></a>
      <a href="#">Features</a>
      <a href="#">Pricing</a>
      <a href="#">Disabled</a>
    </div>
  </div>
</nav>

Выпадающие меню требуют оборачивающего элемента для позиционирования, так что удостоверьтесь в использовании раздельных и вложенных элементов для .nav-item и .nav-link, как в примере ниже.

<nav>
  <a href="#">Navbar</a>
  <button type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span></span>
  </button>
  <div>
    <ul>
      <li>
        <a href="#">Home <span>(current)</span></a>
      </li>
      <li>
        <a href="#">Features</a>
      </li>
      <li>
        <a href="#">Pricing</a>
      </li>
      <li>
        <a href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown link
        </a>
        <div aria-labelledby="navbarDropdownMenuLink">
          <a href="#">Action</a>
          <a href="#">Another action</a>
          <a href="#">Something else here</a>
        </div>
      </li>
    </ul>
  </div>
</nav>

Формы

Размещайте внутри навбара различные элементы контроля форм и компоненты, добавив в них класс . form-inline.

<nav>
  <form>
    <input type="search" placeholder="Search" aria-label="Search">
    <button type="submit">Search</button>
  </form>
</nav>

Выравнивайте содержимое ваших строчных форм классами-утилитами, как необходимо.

<nav>
  <a>Navbar</a>
  <form>
    <input type="search" placeholder="Search" aria-label="Search">
    <button type="submit">Search</button>
  </form>
</nav>

Работают и формы ввода, также:

<nav>
  <form>
    <div>
      <div>
        <span>@</span>
      </div>
      <input type="text" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
    </div>
  </form>
</nav>

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

Main button
Smaller button

<nav>
  <form>
    <button type="button">Main button</button>
    <button type="button">Smaller button</button>
  </form>
</nav>

Текст

Благодаря классу .navbar-text навбары могут содержать «крупицы» текста. Этот класс придает строкам текста вертикальное выравнивание и горизонтальный спейсинг.

Navbar text with an inline element

<nav>
  <span>
    Navbar text with an inline element
  </span>
</nav>

Смешивайте и добивайтесь необходимого соответствия с другими компонентами и утилитами, как вам надо.

<nav>
  <a href="#">Navbar w/ text</a>
  <button type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
    <span></span>
  </button>
  <div>
    <ul>
      <li>
        <a href="#">Home <span>(current)</span></a>
      </li>
      <li>
        <a href="#">Features</a>
      </li>
      <li>
        <a href="#">Pricing</a>
      </li>
    </ul>
    <span>
      Navbar text with an inline element
    </span>
  </div>
</nav>

Цветовые схемы

Настройка оформления навбаров в BS4 стала столь легкой благодаря сочетанию классов оформления и утилит background-color. Выбирайте .navbar-light для навбара со светлым фоном, или .navbar-dark для навбара с темным фоном. Далее настраивайте их классами .bg-*.

<nav>
  <!-- Navbar content -->
</nav>

<nav>
  <!-- Navbar content -->
</nav>

<nav>
  <!-- Navbar content -->
</nav>

Контейнеры

Хотя это и не требуется, вы можете обернуть навбар в .container для центрирования навбара на странице или добавить один навбар в .container лишь для центрирования содержимого навбара с фиксированной позицией “top”.

<div>
  <nav>
    <a href="#">Navbar</a>
  </nav>
</div>

Когда контейнер внутри вашего навбара, его горизонтальный паддинг удаляется на брейкпойнтах, меньших чем заданный вами . navbar-expand{-sm|-md|-lg|-xl}. Это гарантирует, что не произойдет ненужного удвоения паддинга на меньших вьюпортах, когда ваш навбар свернут.

<nav>
  <div>
    <a href="#">Navbar</a>
  </div>
</nav>

Размещение

Используйте наши утилиты позиционирования для размещения навбаров в нестатичных позициях. Выбирайте из фиксированного наверху, внизу или «приклеивающегося» (прокручивается со страницей, пока не достигнет верха, и остается там). Фиксированные навбары используют position: fixed, поэтому они «исключены» из нормального строения DOM и могут потребовать добавления CSS (например, padding-top в <body>).

Также обратите внимание, что .sticky-top использует position: sticky, которая не поддерживается полностью в каждом браузере.

<nav>
  <a href="#">Default</a>
</nav>

<nav>
  <a href="#">Fixed top</a>
</nav>

<nav>
  <a href="#">Fixed bottom</a>
</nav>

<nav>
  <a href="#">Sticky top</a>
</nav>

Отзывчивое поведение

Навбары могут использовать классы .navbar-toggler, .navbar-collapse и .navbar-expand{-sm|-md|-lg|-xl} для изменения, когда их содержимое «схлапывается» по нажатию кнопки. В сочетании с другими классами вы можете легко выбрать, когда показать или скрыть некие элементы.

Для навбаров, которые не скрываются, добавьте в навбар класс .navbar-expand. Для навбаров, которые всегда скрываются, не добавляйте его.

Тогглер (кнопка разворачивания меню)

Тогглеры по умолчанию выровнены по левому краю, но если они идут за дочерними элементами как .navbar-brand – они автоматически выровняются по правому краю. Зеркальное отражение вашей разметки переставит и тогглер.

Без показанного элемента класса .navbar-brand, на самых маленьких брейкпойнтах:

<nav>
  <button type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
    <span></span>
  </button>
  <div>
    <a href="#">Hidden brand</a>
    <ul>
      <li>
        <a href="#">Home <span>(current)</span></a>
      </li>
      <li>
        <a href="#">Link</a>
      </li>
      <li>
        <a href="#">Disabled</a>
      </li>
    </ul>
    <form>
      <input type="search" placeholder="Search" aria-label="Search">
      <button type="submit">Search</button>
    </form>
  </div>
</nav>

С «брендом», показанный слева, и тогглером — справа:

<nav>
  <a href="#">Navbar</a>
  <button type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
    <span></span>
  </button>

  <div>
    <ul>
      <li>
        <a href="#">Home <span>(current)</span></a>
      </li>
      <li>
        <a href="#">Link</a>
      </li>
      <li>
        <a href="#">Disabled</a>
      </li>
    </ul>
    <form>
      <input type="search" placeholder="Search">
      <button type="submit">Search</button>
    </form>
  </div>
</nav>

С тогглером слева и «брендом» справа:

<nav>
  <button type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
    <span></span>
  </button>
  <a href="#">Navbar</a>

  <div>
    <ul>
      <li>
        <a href="#">Home <span>(current)</span></a>
      </li>
      <li>
        <a href="#">Link</a>
      </li>
      <li>
        <a href="#">Disabled</a>
      </li>
    </ul>
    <form>
      <input type="search" placeholder="Search" aria-label="Search">
      <button type="submit">Search</button>
    </form>
  </div>
</nav>

Внешнее содержимое

Иногда надо использовать плагин коллапса для запуска скрытого содержимого на странице. Т.к. наш плагин работает через id и data-target – вам будет легко это сделать!

Collapsed content

Toggleable via the navbar brand.

<div>
  <div>
    <div>
      <h5>Collapsed content</h5>
      <span>Toggleable via the navbar brand.</span>
    </div>
  </div>
  <nav>
    <button type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
      <span></span>
    </button>
  </nav>
</div>

Навигационная панель · Bootstrap на русском

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

Содержание

Основы

Вот что вы должны знать перед началом работы с навигационной панелью:

Navbar’у требуется задать класс .navbar и указать цветовую схему.
По-умолчанию Navbars и его содержание могут изменяться. Используйте контейнеры для ограничения их ширины.
Используйте .pull-*-left и .pull-*-right чтобы быстро выровнять компоненты.
Обеспечить доступность с помощью <nav> элемент или, если использовать более общий элемент, например <div> добавить role="navigation" для каждой панели, чтобы однозначно идентифицировать его в качестве ориентира регион для пользователей вспомогательных технологий.

Поддерживает содержимоe

Navbars оснащены встроенной поддержкой для нескольких компонентов. Смешивать и сочетать из следующих настроек:

.navbar-brand для Вашей компании, продукта или название проекта
.navbar-nav для полной высоты и облегченная навигация (включая поддержку для раскрывающихся списков)
.navbar-toggler для использования с нашими плагина крах и других навигация переключение поведения.

Вот пример для всех вложенных компонентов, включенных по умолчанию, светлых панелей:

<nav>
  <a href="#">Navbar</a>
  <ul>
    <li>
      <a href="#">Home <span>(current)</span></a>
    </li>
    <li>
      <a href="#">Features</a>
    </li>
    <li>
      <a href="#">Pricing</a>
    </li>
    <li>
      <a href="#">About</a>
    </li>
  </ul>
  <form>
    <input type="text" placeholder="Search">
    <button type="submit">Search</button>
  </form>
</nav>

Бренд

.navbar-brand могут быть применены к большинству элементов, но якорь лучше всего работает в качестве некоторых элементов может потребоваться служебные классы и пользовательские стили.

<nav>
  <a href="#">Navbar</a>
</nav>

<nav>
  <h2>Navbar</h2>
</nav>

Nav

Навигации навигации похожа на наших регулярных навигация вариантов—использовать .nav базового класса с модификатором, чтобы достигнуть определенного взгляда. В данном случае вы хотите .nav.navbar-nav.

<nav>
  <ul>
    <li>
      <a href="#">Home <span>(current)</span></a>
    </li>
    <li>
      <a href="#">Features</a>
    </li>
    <li>
      <a href="#">Pricing</a>
    </li>
    <li>
      <a href="#">About</a>
    </li>
  </ul>
</nav>

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

<nav>
  <div>
    <a href="#">Home <span>(current)</span></a>
    <a href="#">Features</a>
    <a href="#">Pricing</a>
    <a href="#">About</a>
  </div>
</nav>

Цветовые схемы

Темы оформления панели навигации никогда не было проще благодаря сочетанию простого ссылке цвет модификатором класса и background-color утилиты. Иначе говоря, вы укажете светлый или темный и применить Цвет фона.

Вот некоторые примеры, чтобы показать что мы имеем в виду.

<nav>
  <!-- Навигационная панель содержимое -->
</nav>

<nav>
  <!-- Навигационная панель содержимое -->
</nav>

<nav>
  <!-- Навигационная панель содержимое -->
</nav>

Контейнеры

Хотя это не требуется, вы можете обернуть навигации в .container, чтобы центр его на странице или добавить в один только центр Содержание фиксированный или статический топ navbar.

<div>
  <nav>
    <a href="#">Navbar</a>
  </nav>
</div>

<nav>
  <div>
    <a href="#">Navbar</a>
  </div>
</nav>

Размещение

Navbars можно статически (поведение по умолчанию), статический без скругленных углов или крепится к верхней или нижней части области просмотра.

<nav>
  <a href="#">Full width</a>
</nav>

<nav>
  <a href="#">Fixed top</a>
</nav>

<nav>
  <a href="#">Fixed bottom</a>
</nav>

Складной содержания

Наш плагин развал позволяет использовать <button> или <a> для переключения скрытый контент.

☰

Collapsed content

Toggleable via the navbar brand.

<nav>
  <button type="button" data-toggle="collapse" data-target="#exCollapsingNavbar" aria-controls="exCollapsingNavbar" aria-expanded="false" aria-label="Toggle navigation">
    &#9776;
  </button>
  <div>
    <div>
      <h5>Collapsed content</h5>
      <span>Toggleable via the navbar brand.</span>
    </div>
  </div>
</nav>

Для более сложных моделей навигации, как те используемые в Bootstrap v3, используйте .navbar-toggleable-* классы в сочетании с .navbar-toggler. Эти классы пересилить aдаптивный утилит, чтобы показать навигацию только тогда, когда содержание должно быть показано.

<nav>
  <button type="button" data-toggle="collapse" data-target="#exCollapsingNavbar2" aria-controls="exCollapsingNavbar2" aria-expanded="false" aria-label="Toggle navigation">
    &#9776;
  </button>
  <div>
    <a href="#">Responsive navbar</a>
    <ul>
      <li>
        <a href="#">Home <span>(current)</span></a>
      </li>
      <li>
        <a href="#">Features</a>
      </li>
      <li>
        <a href="#">Pricing</a>
      </li>
      <li>
        <a href="#">About</a>
      </li>
    </ul>
  </div>
</nav>

Bootstrap — Панели — CoderLessons.com

В этой главе речь пойдет о панелях Bootstrap. Компоненты панели используются, когда вы хотите поместить свой компонент DOM в коробку. Чтобы получить базовую панель, просто добавьте класс .panel к элементу <div>. Также добавьте класс .panel-default к этому элементу, как показано в следующем примере —

<div class = "panel panel-default">
   <div class = "panel-body">
      This is a Basic panel
   </div>
</div>

Панель с заголовком

Есть два способа добавить заголовок панели:

Используйте класс .panel-heading, чтобы легко добавить контейнер заголовка на панель.
Используйте любой <h2> — <h6> с классом .panel-title, чтобы добавить предварительно стилизованный заголовок.

Используйте класс .panel-heading, чтобы легко добавить контейнер заголовка на панель.

Используйте любой <h2> — <h6> с классом .panel-title, чтобы добавить предварительно стилизованный заголовок.

Следующий пример демонстрирует оба способа —

<div class = "panel panel-default">
   <div class = "panel-heading">
      Panel heading without title
   </div>
   
   <div class = "panel-body">
      Panel content
   </div>
</div>

<div class = "panel panel-default">
   <div class = "panel-heading">
      <h4 class = "panel-title">
         Panel With title
      </h4>
   </div>
   
   <div class = "panel-body">
      Panel content
   </div>
</div>

Панель с нижним колонтитулом

Вы можете добавить нижние колонтитулы на панели, оборачивая кнопки или вторичный текст в <div>, содержащий класс .panel-footer . Следующий пример демонстрирует это.

<div class = "panel panel-default">
   <div class = "panel-body">
      This is a Basic panel
   </div>
   
   <div class = "panel-footer">Panel footer</div>
</div>

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

Панель Контекстные Альтернативы

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

<div class = "panel panel-primary">
   <div class = "panel-heading">
      <h4 class = "panel-title">Panel title</h4>
   </div>
   
   <div class = "panel-body">
      This is a Basic panel
   </div>
</div>

<div class = "panel panel-success">
   <div class = "panel-heading">
      <h4 class = "panel-title">Panel title</h4>
   </div>
   
   <div class = "panel-body">
      This is a Basic panel
   </div>
</div>

<div class = "panel panel-info">
   <div class = "panel-heading">
      <h4 class = "panel-title">Panel title</h4>
   </div>
   
   <div class = "panel-body">
      This is a Basic panel
   </div>
</div>

<div class = "panel panel-warning">
   <div class = "panel-heading">
      <h4 class = "panel-title">Panel title</h4>
   </div>
   
   <div class = "panel-body">
      This is a Basic panel
   </div>
</div>

<div class = "panel panel-danger">
   <div class = "panel-heading">
      <h4 class = "panel-title">Panel title</h4>
   </div>
   
   <div class = "panel-body">
      This is a Basic panel
   </div>
</div>

Панель со столами

Чтобы получить таблицу без границ на панели, используйте класс .table на панели. Предположим, что есть <div>, содержащий .panel-body , и мы добавляем дополнительную границу к верхней части таблицы для разделения. Если <div> не содержит .panel-body , то компонент перемещается из заголовка панели в таблицу без прерывания.

Следующий пример демонстрирует это —

<div class = "panel panel-default">
   <div class = "panel-heading">
      <h4 class = "panel-title">Panel title</h4>
   </div>
   
   <div class = "panel-body">
      This is a Basic panel
   </div>
   
   <table class = "table">
      <tr>
         <th>Product</th>
         <th>Price </th>
      </tr>
      
      <tr>
         <td>Product A</td>
         <td>200</td>
      </tr>
      
      <tr>
         <td>Product B</td>
         <td>400</td>
      </tr>
   </table>
   
</div>

<div class = "panel panel-default">
   <div class = "panel-heading">Panel Heading</div>
   
   <table class = "table">
      <tr>
         <th>Product</th>
         <th>Price </th>
      </tr>
      
      <tr>
         <td>Product A</td>
         <td>200</td>
      </tr>
      
      <tr>
         <td>Product B</td>
         <td>400</td>
      </tr>
   </table>
   
</div>

Панель с списком групп

Вы можете включить группы списков в любую панель. Создайте панель, добавив класс .panel к элементу <div>. Также добавьте класс .panel-default к этому элементу. Теперь в этой панели включить ваш список групп. Вы можете научиться создавать группы списков из главы Группы списков .

Bootstrap панели

В этой главе мы обсудим Bootstrap панели, монтажная панель для вставки в компонент DOM.

Вам просто нужно , чтобы получить базовую панель и добавьте.panel .panel-класспоумолчаниюв <div> элемент.

Ниже показано:

<div>
   <div>
      This is a Basic panel
   </div>
</div>

Просмотр онлайн — примеры

Приведенные выше примеры показывают эффект следующим образом:

название панели

Мы два больших способа добавить заголовок панели:

Используйте класс.panel-заголовок можно просто добавить название вашего контейнера панели
Используйте <h2> — элементы <H6> и использует.panel-название вашего класса , чтобы добавить заголовок заранее стиля.

Следующие примеры демонстрируют два различных подхода:

<div>
   <div>
      Panel heading without title
   </div>
   <div>
      Panel content
   </div>
</div>

<div>
   <div>
      <h4>
         Panel With title
      </h4>
   </div>
   <div>
      Panel content
   </div>
</div>

Просмотр онлайн — примеры

Приведенные выше примеры показывают эффект следующим образом:

Панель Сноска

Вы можете добавить сноски в панели, вам нужно только добавить.panel-колонтитуле в <div> элемент.Примерами могут служить следующие:

<div>
   <div>
      This is a Basic panel
   </div>
   <div>Panel footer</div>
</div>

Просмотр онлайн — примеры

Приведенные выше примеры показывают эффект следующим образом:

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

Предупреждение панели с цветом

Вы можете использовать панель первичной, панель-успеха, панель-инфо, панель предупреждения, классы панельного опасности для установки панели с сигнальными цветами. Примерами могут служить следующие:

<div>
   <div>
      <h4>Panel title</h4>
   </div>
   <div>
      This is a Basic panel
   </div>
</div>
<div>
   <div>
      <h4>Panel title</h4>
   </div>
   <div>
      This is a Basic panel
   </div>
</div>
<div>
   <div>
      <h4>Panel title</h4>
   </div>
   <div>
      This is a Basic panel
   </div>
</div>
<div>
   <div>
      <h4>Panel title</h4>
   </div>
   <div>
      This is a Basic panel
   </div>
</div>
<div>
   <div>
      <h4>Panel title</h4>
   </div>
   <div>
      This is a Basic panel
   </div>
</div>

Просмотр онлайн — примеры

Приведенные выше примеры показывают эффект следующим образом:

С помощью панели стола

Мы можем использовать .table класс на панели, чтобы установить таблицу без границ. Вы можете определить текстовое содержание общего количества внешних таблиц по классам .panel тела. Примерами могут служить следующие:

<div>
   <div>
      <h4>Panel title</h4>
   </div>
   <div>
      This is a Basic panel
   </div>
   <table>
      <th>Product</th><th>Price </th>
      <tr><td>Product A</td><td>200</td></tr>
      <tr><td>Product B</td><td>400</td></tr>
   </table>
</div>
<div>
   <div>Panel Heading</div>
   <table>
      <th>Product</th><th>Price </th>
      <tr><td>Product A</td><td>200</td></tr>
      <tr><td>Product B</td><td>400</td></tr>
   </table>
</div>

Просмотр онлайн — примеры

Приведенные выше примеры показывают эффект следующим образом:

Со списком групп панели

Мы можем быть включены в любой список группы панели путем добавления.panel и .panel-класспоумолчаниюв <div> элемент для создания панели, а также добавить список в панели, примеры являются следующие:

<div>
   <div>Panel heading</div>
      <div>
         <p>This is a Basic panel content. This is a Basic panel content.
         This is a Basic panel content.This is a Basic panel content.
         This is a Basic panel content.This is a Basic panel content.
         This is a Basic panel content.
         </p>
   </div>
   <ul>
      <li>Free Domain Name Registration</li>
      <li>Free Window Space hosting</li>
      <li>Number of Images</li>
      <li>24*7 support</li>
      <li>Renewal cost per year</li>
   </ul>
</div>

Просмотр онлайн — примеры

Приведенные выше примеры показывают эффект следующим образом:

Компоненты Bootstrap

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

Bootstrap имеет ряд компонентов, которые не сводятся к стандартным кнопкам или текстовым полям, а представляют более сложные элементы.
Полный список компонентов Bootstrap можно найти на официальной странице проекта http://getbootstrap.com/components/.
Рассмотрим вкратце некоторые из них.

Навигационные панели

Первый компонент Bootstrap, с которым мы сталкиваемся в проекте, это навигационная панель. Данный компонент располагается на мастер-странице
_Layout:


<div>
        <div>
            <div>
                <button type="button" data-toggle="collapse" data-target=".navbar-collapse">
                    <span></span>
                    <span></span>
                    <span></span>
                </button>
                @Html.ActionLink("Application name", "Index", "Home", null, new { @class = "navbar-brand" })
            </div>
            <div>
                <ul>
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("About", "About", "Home")</li>
                    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                </ul>
            </div>
        </div>
    </div>

И даже если мы сузим границы веб-браузера или запустим сайт на мобильном устройстве, то мы увидим, что панель навигации остается достаточно функциональной:

Компонент представляет класс navbar. Чтобы панель была фиксирована по верху страницы, используется также класс navbar-fixed-top.
Если бы мы, наоборот, захотели фиксировать панель по низу, то в этом случае использовали бы класс navbar-fixed-bottom

И также в объявлении блока навигации используется класс navbar-inverse, который инвертирует цвета по умолчанию. Вместо этого класса
мы могли бы использовать navbar-default, тогда в этом случае у нас бы было меню стандартных светлых тонов.

Для создания ссылок навигации применяется класс nav. Bootstrap представляет несколько классов для оформления ссылок навигации.
По умолчанию используется класс navbar-nav, но мы можем использовать и другие возможности.

Для создания навигации по типу вкладок применяется класс nav-tabs. Так, например следующее меню:


<ul>
    <li class ="active">@Html.ActionLink("Home", "Index", "Home")</li>
    <li>@Html.ActionLink("About", "About", "Home")</li>
    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>

даст такой эффект:

Еще один вариант создания панели ссылок представляет класс nav-pills:


<ul>
    <li class ="active">@Html.ActionLink("Home", "Index", "Home")</li>
    <li>@Html.ActionLink("About", "About", "Home")</li>
    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>

А комбинируя классы nav-pills и nav-stacked, мы можем создать вертикальное меню:


<ul>
	...............................
</ul>

Пагинация

Класс pagination позволяет создать панель ссылок в виде постраничной навигации:


<ul>
  <li><a href="#">«</a></li>
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
  <li><a href="#">»</a></li>
</ul>

Заглавия

Для создания ссылок заголовков применяется класс breadcrumb:


<ul>
    <li class ="active">@Html.ActionLink("Home", "Index", "Home")</li>
    <li>@Html.ActionLink("About", "About", "Home")</li>
    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>

Кнопки

Для создания кнопок Bootstrap имеет класс btn. Как правило, кнопки офрмляются в группу с помощью класса btn-group:


<div role="group">
  <button type="button">Left</button>
  <button type="button">Middle</button>
  <button type="button">Right</button>
</div>

Кнопка с выпадающим списком

Для создания выпадающего списка по примеру элемента нам надо использовать кнопку вместе со списком, который должен иметь класс dropdown-menu:


<div>
    <button type="button" data-toggle="dropdown">
        Язык программирования <span></span>
    </button>
    <ul role="menu">
        <li><a href="#">JavaScript</a></li>
        <li><a href="#">C#</a></li>
        <li><a href="#">VB.NET</a></li>
        <li></li>
        <li><a href="#">Java</a></li>
    </ul>
</div>

Метки

Для оформления кусков текста в качестве меток мы можем использовать класс label. Также мы можем использовать
дополнительные классы меток, чтобы конкретизировать тип сообщения:


<span>Default</span>
<span>Primary</span>
<span>Success</span>
<span>Info</span>
<span>Warning</span>
<span>Danger</span>

Похожую функциональность предлагает класс alert:


<div>Задача успешно завершена</div>
<div>Дополнительная информация</div>
<div>Внимание!</div>
<div>Опасно!</div>

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

Загрузочные панели

Панели

Панель в bootstrap — это рамка с рамкой и некоторым отступом вокруг ее содержимого:

Панели создаются с помощью класса .panel , а содержимое внутри панели имеет
.панель-кузов класс:

Пример

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

Попробуй сам »

Класс .panel-default используется для стилизации цвета
панель.См. Последний пример на этой странице для получения дополнительных контекстных классов.

Заголовок панели

Содержание панели

Класс .panel-heading добавляет заголовок к панели:

Пример

Заголовок панели

Содержимое панели

Попробуй сам »

Нижний колонтитул панели

Модель .Panel-footer класс добавляет нижний колонтитул к панели:

Пример

Содержимое панели

Нижний колонтитул панели

Попробуй сам »

Группа панелей

Чтобы сгруппировать несколько панелей вместе, оберните

с классом


 .panel-group

вокруг них.

Класс .panel-group очищает нижнее поле каждой панели:

Пример

Содержимое панели

Попробуй сам »

Панели с контекстными классами

Чтобы раскрасить панель, используйте контекстные классы (.Panel-default , .panel-primary , .panel-success , .panel-info , .panel-warning или .panel-dangerous ):

Пример

Панель с классом по умолчанию

Содержание панели

Панель с панелью первичного класса

Содержание панели

Панель с панелью класса успешности

Содержание панели

Панель с классом информации панели

Содержание панели

Панель с панелью-предупреждением класса

Содержание панели

Панель с панелью класса опасности

Содержание панели

Попробуй сам »

Bootstrap 4 Panels — примеры и руководство.Базовое и расширенное использование

Компиляция и настройка

Чтобы еще больше уменьшить вес пакета MDBootstrap, вы можете скомпилировать свой собственный пакет, содержащий только
эти компоненты и
функции, которые вам нужны.

Если вам нужна дополнительная помощь в компиляции вашего пользовательского пакета, воспользуйтесь нашим руководством по компиляции и настройке.

Руководство по компиляции и настройке

Карта зависимостей файлов SCSS в MDBootstrap:

 
    Легенда:

    '->' означает 'требуется'

    Все бесплатные и профессиональные файлы требуют файлов из каталога 'core'

    'none' означает 'этот компонент не требует ничего, кроме файлов ядра'

    Файл, завернутый в ``, означает, что этот файл делает базовый компонент красивее, но это не обязательно для правильной работы.

    Все компоненты PRO требуют 'pro / _variables.scss 'файл

    scss /
    |
    | - ядро /
    | |
    | | - бутстрап /
    | | | - _functions.scss
    | | | - _variables.scss
    | |
    | | - _colors.scss
    | | - _global.scss
    | | - _helpers.scss
    | | - _masks.scss
    | | - _mixins.scss
    | | - _typography.scss
    | | - _variables.scss
    | | - _waves.scss
    |
    | - бесплатно /
    | | - _animations-basic.scss -> нет
    | | - _animations-extended.scss -> _animations-basic.scss
    | | - _buttons.scss -> нет
    | | - _cards.scss -> нет
    | | - _dropdowns.scss -> нет
    | | - _input-group.scss -> _forms.scss, _buttons.scss, _dropdowns.scss
    | | - _navbars.scss -> нет
    | | - _pagination.scss -> нет
    | | - _badges.scss -> нет
    | | - _modals.scss -> _buttons.scss, _forms.scss (PRO -> _tabs.scss)
    | | - _carousels.scss ->
    | | - _forms.scss -> нет
    | | - _msc.scss -> нет
    | | - _footers.scss нет (PRO :)
    | | - _list-group.scss -> нет
    | | - _tables.scss -> нет (PRO: _material-select.scss, pro / _forms.scss, _checkbox.scss, pro / _buttons.scss, pro / _cards.scss, _pagination.scss, pro / _msc.scss )
    | | - _depreciated.scss
    |
    | - pro /
    | |
    | | - сборщик /
    | | | - _default.scss -> нет
    | | | - _default-time.scss -> _default.scss, free / _forms.scss, free / _buttons.scss, pro / _buttons.scss, free / _cards.scss
    | | | - _default-date.scss -> _default.scss, бесплатно / _forms.scss
    | |
    | | - разделы /
    | | | - _templates.scss -> _sidenav.scss
    | | | - _social.scss -> бесплатно / _cards.scss, бесплатно / _forms.scss, бесплатно / _buttons.scss, pro / _buttons.scss,
    | | | - _team.scss -> бесплатно / _buttons.scss, pro / _buttons.scss, free / _cards.scss, pro / _cards.scss
    | | | - _testimonials.scss -> бесплатно / _carousels.scss, pro / _carousels.scss, бесплатно / _buttons.scss, pro / _buttons.scss
    | | | - _magazine.scss -> _badges.scss
    | | | - _pricing.scss -> бесплатно / _buttons.scss, pro / _buttons.scss
    | | | - _contacts.scss -> бесплатно / _forms.scss, pro / _forms.scss, бесплатно / _buttons.scss, pro / _buttons.scss
    | |
    | | - _variables.scss
    | | - _buttons.scss -> бесплатно / _buttons.scss, pro / _msc.scss, _checkbox.scss, _radio.scss
    | | - _social-buttons.scss -> бесплатно / _buttons.scss, pro / _buttons.scss
    | | - _tabs.scss -> _cards.scss
    | | - _cards.scss -> бесплатно / _cards.scss
    | | - _dropdowns.scss -> бесплатно / _dropdowns.scss, бесплатно / _buttons.scss
    | | - _navbars.scss -> бесплатно / _navbars.scss (PRO :)
    | | - _scrollspy.scss -> нет
    | | - _lightbox.scss -> нет
    | | - _chips.scss -> нет
    | | - _msc.scss -> нет
    | | - _forms.scss -> нет
    | | - _radio.scss -> нет
    | | - _checkbox.scss -> нет
    | | - _material-select.scss -> нет
    | | - _switch.scss -> нет
    | | - _file-input.scss -> бесплатно / _forms.scss, бесплатно / _buttons.scss
    | | - _range.scss -> нет
    | | - _input-group.scss -> free / _input-group.scss и то же, что и свободная группа ввода, _checkbox.scss, _radio.scss
    | | - _autocomplete.scss -> бесплатно / _forms.scss
    | | - _accordion.scss -> pro / _animations.scss, бесплатно / _cards.scss
    | | - _parallax.scss -> нет
    | | - _sidenav.scss -> бесплатно / _forms.scss, pro / _animations.scss, разделы / _templates.scss
    | | - _ecommerce.scss -> бесплатно / _cards.scss, pro / _cards.scss, бесплатно / _buttons.scss, pro / _buttons.scss, pro / _msc.scss
    | | - _carousels.scss -> бесплатно / _carousels.scss, бесплатно / _cards.scss, бесплатно / _buttons.scss
    | | - _steppers.scss -> бесплатно / _buttons.scss
    | | - _blog.scss -> нет
    | | - _toasts.scss -> бесплатно / _buttons.scss
    | | - _animations.scss -> нет
    | | - _charts.scss -> нет
    | | - _progress.scss -> нет
    | | - _scrollbar.scss -> нет
    | | - _skins.scss -> нет
    | | - _устарело.scss
    |
    `- _custom-skin.scss
    `- _custom-styles.scss
    `- _custom-variables.scss
    `- mdb.scss

Карта зависимостей модулей JavaScript в MDBootstrap:

 
    Легенда:

    '->' означает 'требуется'

    Все файлы требуют jQuery и bootstrap.js

    js /
    ├── dist /
    │ ├── buttons.js
    │ ├── cards.js
    │ ├── character-counter.js
    │ ├── Chips.js
    │ ├── collapsible.js -> vendor / velocity.js
    │ ├── раскрывающийся список.js -> Popper.js, jquery.easing.js
    │ ├── file-input.js
    │ ├── forms-free.js
    │ ├── material-select.js -> dropdown.js
    │ ├── mdb-autocomplete.js
    │ ├── preloading.js
    │ ├── range-input.js -> vendor / velocity.js
    │ ├── scrolling-navbar.js
    │ ├── sidenav.js -> vendor / velocity.js, vendor / hammer.js, vendor / jquery.hammer.js
    │ └── smooth-scroll.js
    ├── _intro-mdb-pro.js
    ├── modules.js
    ├── src /
    │ ├── buttons.js
    │ ├── карты.js
    │ ├── character-counter.js
    │ ├── Chips.js
    │ ├── collapsible.js -> vendor / velocity.js
    │ ├── dropdown.js -> Popper.js, jquery.easing.js
    │ ├── file-input.js
    │ ├── forms-free.js
    │ ├── material-select.js -> dropdown.js
    │ ├── mdb-autocomplete.js
    │ ├── preloading.js
    │ ├── range-input.js -> vendor / velocity.js
    │ ├── scrolling-navbar.js
    │ ├── sidenav.js -> vendor / velocity.js, vendor / hammer.js, vendor / jquery.hammer.js
    │ └── smooth-scroll.js
    └── продавец /
        ├── аддоны /
        │ ├── datatables.js
        │ └── datatables.min.js
        ├── chart.js
        ├── extended-modals.js
        ├── hammer.js
        ├── jarallax.js
        ├── jarallax-video.js -> vendor / jarallax.js
        ├── jquery.easing.js
        ├── jquery.easypiechart.js
        ├── jquery.hammer.js -> vendor / hammer.js
        ├── jquery.sticky.js
        ├── lightbox.js
        ├── picker-date.js -> vendor / picker.js
        ├── picker.js
        ├── picker-time.js -> vendor / picker.js
        ├── scrollbar.js
        ├── scrolling-navbar.js
        ├── toastr.js
        ├── velocity.js
        ├── waves.js
        └── wow.js

Компоненты

· Bootstrap

Доступные глифы

Включает более 250 глифов в формате шрифта из набора Glyphicon Halflings. Глификоны Халфлинги обычно не доступны бесплатно, но их создатель сделал их доступными для Bootstrap бесплатно.В качестве благодарности мы просим вас по возможности включать обратную ссылку на Glyphicons.

Как использовать

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

Не смешивать с другими компонентами

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

Только для использования с пустыми элементами

Классы значков следует использовать только для элементов, которые не содержат текстового содержимого и не имеют дочерних элементов.

Изменение расположения шрифта значка

Bootstrap предполагает, что файлы шрифтов значка будут расположены в каталоге ../fonts/ относительно скомпилированных файлов CSS. Перемещение или переименование этих файлов шрифтов означает обновление CSS одним из трех способов:

Измените переменные @ icon-font-path и / или @ icon-font-name в исходных файлах Less.
Используйте параметр относительных URL-адресов, предоставляемый компилятором Less.
Измените пути url () в скомпилированном CSS.

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

Доступные значки

Современные версии вспомогательных технологий объявляют контент, созданный с помощью CSS, а также определенные символы Unicode. Чтобы избежать непреднамеренного и сбивающего с толку вывода в программах чтения с экрана (особенно когда значки используются исключительно для украшения), мы скрываем их с помощью атрибута aria-hidden = "true" .

Если вы используете значок для передачи смысла (а не только как декоративный элемент), убедитесь, что это значение также передается вспомогательным технологиям — например, добавьте дополнительный контент, визуально скрытый с помощью .sr-only класс.

Если вы создаете элементы управления без другого текста (например,

Значок, используемый в предупреждении, чтобы указать, что это сообщение об ошибке, с дополнительным .sr-only текст, чтобы передать эту подсказку пользователям вспомогательных технологий.

Ошибка: введите действительный адрес электронной почты

  
   
   Ошибка: 
  Введите действительный адрес электронной почты

Переключаемое контекстное меню для отображения списков ссылок. Сделано интерактивным с помощью выпадающего плагина JavaScript.

Пример

Оберните триггер раскрывающегося списка и раскрывающееся меню в .раскрывающийся список или другой элемент, объявляющий position: relative; . Затем добавьте HTML-код меню.

  
  
  
      Действие  
      Другое действие  
      Здесь что-то еще  
     
      Отдельная ссылка

Раскрывающиеся меню можно изменить, чтобы развернуть вверх (а не вниз), добавив .dropup к родителю.

  
  
  
      Действие  
      Другое действие  
      Здесь что-то еще  
     
      Отдельная ссылка

Выравнивание

По умолчанию раскрывающееся меню автоматически располагается на 100% сверху и слева от своего родителя.Добавьте .dropdown-menu-right к .dropdown-menu , чтобы выровнять раскрывающееся меню по правому краю.

Может потребоваться дополнительное позиционирование

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

Устарело

.pull-right alignment

Начиная с v3.1.0 мы устарели .pull-right в раскрывающихся меню. Чтобы выровнять меню по правому краю, используйте .dropdown-menu-right . Компоненты навигации с выравниванием по правому краю на панели навигации используют версию этого класса для автоматического выравнивания меню. Чтобы переопределить его, используйте .dropdown-menu-left .

...

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

  
  ...
   Раскрывающийся заголовок 
  ...

Разделитель

Добавьте разделитель для разделения последовательностей ссылок в раскрывающемся меню.

  
  ...
   
  ...

Отключенные пункты меню

Добавьте .disabled к

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

  
    Обычная ссылка  
    Отключенная ссылка  
    Другая ссылка

Сгруппируйте серию кнопок вместе в одну строку с группой кнопок.Добавьте необязательное поведение переключателя JavaScript и стиля флажка с помощью нашего плагина кнопок.

Обеспечьте правильную роль

и предоставьте метку

Чтобы вспомогательные технологии, такие как программы чтения с экрана, передавали, что последовательность кнопок сгруппирована, необходимо предоставить соответствующий атрибут роли . Для групп кнопок это будет role = "group" , а панели инструментов должны иметь role = "toolbar" .

Единственным исключением являются группы, которые содержат только один элемент управления (например, группы кнопок с выравниванием по ширине с элементами

Объедините наборы из

для более сложных компонентов.

  
   ... 
   ... 
   ...

Размер

Вместо применения классов размеров кнопок к каждой кнопке в группе просто добавьте .btn-group- * к каждой .btn-group , в том числе при вложении нескольких групп.

Левый Средний Правый

   ... 
 ... 
 ... 
 ...

Nesting

Поместите .btn-group в другую .btn-group , когда вам нужно раскрывающееся меню. меню смешано с рядом кнопок.

  
  
  

  
    
    
        Раскрывающаяся ссылка  
        Раскрывающаяся ссылка

Вертикальное изменение

Сделать так, чтобы набор кнопок отображался вертикально, а не горизонтально. Выпадающие меню с разделенными кнопками здесь не поддерживаются.

Кнопка Кнопка Кнопка Кнопка

...

Группы кнопок по ширине

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

Обработка границ

Из-за специфического HTML и CSS, используемых для выравнивания кнопок (а именно display: table-cell ), границы между ними удваиваются.В обычных группах кнопок margin-left: -1px используется для наложения границ вместо их удаления. Однако поле не работает с display: table-cell . В результате, в зависимости от ваших настроек Bootstrap, вы можете удалить или перекрасить границы.

IE8 и границы

Internet Explorer 8 не отображает границы на кнопках в группе кнопок по ширине, будь то элементы или

Используйте любую кнопку, чтобы вызвать раскрывающееся меню, поместив его в .btn-group и обеспечение правильной разметки меню.

Зависимость подключаемого модуля

Для раскрывающегося списка кнопок требуется, чтобы подключаемый модуль раскрывающегося меню был включен в вашу версию Bootstrap.

Выпадающие списки с одной кнопкой

Превратите кнопку в раскрывающийся список с некоторыми базовыми изменениями разметки.

  

  
  
      Действие  
      Другое действие  
      Здесь что-то еще  
     
      Отдельная ссылка

Раскрывающиеся списки с разделенными кнопками

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

  

  
  
  
      Действие  
      Другое действие  
      Здесь что-то еще  
     
      Отдельная ссылка

Размер

Выпадающие кнопки работают с кнопками любого размера.

Вариант Dropup

Запуск раскрывающихся меню над элементами путем добавления .dropup к родительскому элементу.

Расширьте элементы управления формой, добавив текст или кнопки до, после или с обеих сторон любого текстового .Используйте .input-group с .input-group-addon или .input-group-btn для добавления или добавления элементов к одному .form-control .

Текстовый

только s

Избегайте использования здесь элементов </code>, поскольку их атрибут <code> строк </code> в некоторых случаях не будет соблюдаться. </p> <h5><span class="ez-toc-section" id="%D0%92%D1%81%D0%BF%D0%BB%D1%8B%D0%B2%D0%B0%D1%8E%D1%89%D0%B8%D0%B5_%D0%BF%D0%BE%D0%B4%D1%81%D0%BA%D0%B0%D0%B7%D0%BA%D0%B8_%D0%B8_%D0%B2%D1%81%D0%BF%D0%BB%D1%8B%D0%B2%D0%B0%D1%8E%D1%89%D0%B8%D0%B5_%D0%BE%D0%BA%D0%BD%D0%B0_%D0%B2_%D0%B3%D1%80%D1%83%D0%BF%D0%BF%D0%B0%D1%85_%D0%B2%D0%B2%D0%BE%D0%B4%D0%B0_%D1%82%D1%80%D0%B5%D0%B1%D1%83%D1%8E%D1%82_%D1%81%D0%BF%D0%B5%D1%86%D0%B8%D0%B0%D0%BB%D1%8C%D0%BD%D0%BE%D0%B9_%D0%BD%D0%B0%D1%81%D1%82%D1%80%D0%BE%D0%B9%D0%BA%D0%B8"></span> Всплывающие подсказки и всплывающие окна в группах ввода требуют специальной настройки <span class="ez-toc-section-end"></span></h5> <p> При использовании всплывающих подсказок или всплывающих окон на элементах в пределах <code>.input-group </code>, вам нужно будет указать контейнер option <code>: 'body' </code>, чтобы избежать нежелательных побочных эффектов (таких как расширение элемента и / или потеря закругленных углов при срабатывании всплывающей подсказки или всплывающего окна). </p> <h5><span class="ez-toc-section" id="%D0%9D%D0%B5_%D1%81%D0%BC%D0%B5%D1%88%D0%B8%D0%B2%D0%B0%D1%82%D1%8C_%D1%81_%D0%B4%D1%80%D1%83%D0%B3%D0%B8%D0%BC%D0%B8_%D0%BA%D0%BE%D0%BC%D0%BF%D0%BE%D0%BD%D0%B5%D0%BD%D1%82%D0%B0%D0%BC%D0%B8-2"></span> Не смешивать с другими компонентами <span class="ez-toc-section-end"></span></h5> <p> Не смешивать группы форм или классы столбцов сетки напрямую с группами ввода. Вместо этого вложите группу ввода внутрь группы формы или связанного с сеткой элемента. </p> <h5><span class="ez-toc-section" id="%D0%92%D1%81%D0%B5%D0%B3%D0%B4%D0%B0_%D0%B4%D0%BE%D0%B1%D0%B0%D0%B2%D0%BB%D1%8F%D0%B9%D1%82%D0%B5_%D0%BC%D0%B5%D1%82%D0%BA%D0%B8"></span> Всегда добавляйте метки <span class="ez-toc-section-end"></span></h5> <p> Программы чтения с экрана будут иметь проблемы с вашими формами, если вы не добавите метку для каждого ввода.Для этих групп ввода убедитесь, что любые дополнительные метки или функции передаются вспомогательным технологиям. </p> <p> Точный метод, который будет использоваться (видимые элементы <code> <label> </code>, <code> <label> </code> элементов, скрытые с использованием класса <code> .sr-only </code>, или использование <code> aria-label </code>, <code> aria-labelledby </code>, <code> aria, описанный </code>, <code> title </code> или <code> placeholder </code> attribute), и то, какая дополнительная информация потребуется передать, будет зависеть от точного типа реализуемого вами интерфейсного виджета.Примеры в этом разделе представляют несколько предлагаемых подходов для конкретных случаев. </p> <h3><span class="ez-toc-section" id="%D0%91%D0%B0%D0%B7%D0%BE%D0%B2%D1%8B%D0%B9_%D0%BF%D1%80%D0%B8%D0%BC%D0%B5%D1%80-2"></span> Базовый пример <span class="ez-toc-section-end"></span></h3> <p> Разместите одну надстройку или кнопку с обеих сторон от входа. Вы также можете разместить его по обе стороны от входа. </p> <p> <strong> Мы не поддерживаем несколько надстроек (<code> .input-group-addon </code> или <code> .input-group-btn </code>) на одной стороне. </strong> </p> <p> <strong> Мы не поддерживаем несколько элементов управления формой в одной группе ввода. </strong> </p><pre> <code data-lang="html"> <div> <span> @ </span> <input type = "text" placeholder = "Имя пользователя" aria-describeby = "basic-addon1"> </div> <div> <input type = "text" placeholder = "Имя пользователя получателя" aria-describeby = "basic-addon2"> <span> @example.com </span> </div> <div> <span> $ </span> <input type = "text" aria-label = "Сумма (с точностью до доллара)"> <span> 0,00 </span> </div> <label for = "basic-url"> Ваш персональный URL </label> <div> <span> https://example.com/users/ </span> <input type = "text" aria-descriptionby = "basic-addon3"> </div> </code> </pre><h3><span class="ez-toc-section" id="%D0%A0%D0%B0%D0%B7%D0%BC%D0%B5%D1%80-3"></span> Размер <span class="ez-toc-section-end"></span></h3> <p> Добавьте классы относительного размера формы в саму <code> .input-group </code>, и содержимое внутри автоматически изменит размер — нет необходимости повторять классы размеров элемента управления формы для каждого элемента.</p><pre> <code data-lang="html"> <div> <span> @ </span> <input type = "text" placeholder = "Имя пользователя" aria-describeby = "sizing-addon1"> </div> <div> <span> @ </span> <input type = "text" placeholder = "Имя пользователя" aria-describeby = "sizing-addon2"> </div> <div> <span> @ </span> <input type = "text" placeholder = "Имя пользователя" aria-describeby = "sizing-addon3"> </div> </code> </pre><h3><span class="ez-toc-section" id="%D0%A4%D0%BB%D0%B0%D0%B6%D0%BA%D0%B8_%D0%B8_%D1%80%D0%B0%D0%B4%D0%B8%D0%BE%D0%B0%D0%B4%D0%B4%D0%BE%D0%BD%D1%8B"></span> Флажки и радиоаддоны <span class="ez-toc-section-end"></span></h3> <p> Поместите любой чекбокс или переключатель в аддон группы ввода вместо текста.</p><pre> <code data-lang="html"> <div> <div> <div> <span> <input type = "checkbox" aria-label = "..."> </span> <input type = "text" aria-label = "..."> </div> <! - / input-group -> </div> <! - /.col-lg-6 -> <div> <div> <span> <input type = "radio" aria-label = "..."> </span> <input type = "text" aria-label = "..."> </div> <! - / input-group -> </div> <! - /.col-lg-6 -> </div> <! - /.row -> </code> </pre><h3><span class="ez-toc-section" id="%D0%94%D0%BE%D0%BF%D0%BE%D0%BB%D0%BD%D0%B5%D0%BD%D0%B8%D1%8F_%D0%BA%D0%BD%D0%BE%D0%BF%D0%BE%D0%BA"></span> Дополнения кнопок <span class="ez-toc-section-end"></span></h3> <p> Кнопки в группах ввода немного отличаются и требуют одного дополнительного уровня вложенности. Вместо <code> .input-group-addon </code> вам нужно будет использовать <code> .input-group-btn </code> для переноса кнопок. Это необходимо из-за стилей браузера по умолчанию, которые нельзя переопределить. </p><pre> <code data-lang="html"> <div> <div> <div> <span> <button type = "button"> Вперед! </button> </span> <input type = "text" placeholder = "Искать... "> </div> <! - / input-group -> </div> <! - /.col-lg-6 -> <div> <div> <input type = "text" placeholder = "Искать ..."> <span> <button type = "button"> Вперед! </button> </span> </div> <! - / input-group -> </div> <! - /.col-lg-6 -> </div> <! - /.row -> </code> </pre><h3><span class="ez-toc-section" id="%D0%9A%D0%BD%D0%BE%D0%BF%D0%BA%D0%B8_%D1%81_%D1%80%D0%B0%D1%81%D0%BA%D1%80%D1%8B%D0%B2%D0%B0%D1%8E%D1%89%D0%B8%D0%BC%D0%B8%D1%81%D1%8F_%D1%81%D0%BF%D0%B8%D1%81%D0%BA%D0%B0%D0%BC%D0%B8"></span> Кнопки с раскрывающимися списками <span class="ez-toc-section-end"></span></h3><pre> <code data-lang="html"> <div> <div> <div> <div> <button type = "button" data-toggle = "dropdown" aria-haspopup = "true" aria-extended = "false"> Действие <span></span> </button> <ul> <li> <a href="#"> Действие </a> </li> <li> <a href="#"> Другое действие </a> </li> <li> <a href="#"> Здесь что-то еще </a> </li> <li role = "separator"> </li> <li> <a href="#"> Отдельная ссылка </a> </li> </ul> </div> <! - / btn-group -> <input type = "text" aria-label = "... "> </div> <! - / input-group -> </div> <! - /.col-lg-6 -> <div> <div> <input type = "text" aria-label = "..."> <div> <button type = "button" data-toggle = "dropdown" aria-haspopup = "true" aria-extended = "false"> Действие <span></span> </button> <ul> <li> <a href="#"> Действие </a> </li> <li> <a href="#"> Другое действие </a> </li> <li> <a href="#"> Здесь что-то еще </a> </li> <li role = "separator"> </li> <li> <a href="#"> Отдельная ссылка </a> </li> </ul> </div> <! - / btn-group -> </div> <! - / input-group -> </div> <! - /.col-lg-6 -> </div> <! - /.row -> </code> </pre><h3><span class="ez-toc-section" id="%D0%A1%D0%B5%D0%B3%D0%BC%D0%B5%D0%BD%D1%82%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%BD%D1%8B%D0%B5_%D0%BA%D0%BD%D0%BE%D0%BF%D0%BA%D0%B8"></span> Сегментированные кнопки <span class="ez-toc-section-end"></span></h3><pre> <code data-lang="html"> <div> <div> <! - Кнопка и раскрывающееся меню -> </div> <input type = "text" aria-label = "..."> </div> <div> <input type = "text" aria-label = "..."> <div> <! - Кнопка и раскрывающееся меню -> </div> </div> </code> </pre><h3><span class="ez-toc-section" id="%D0%9D%D0%B5%D1%81%D0%BA%D0%BE%D0%BB%D1%8C%D0%BA%D0%BE_%D0%BA%D0%BD%D0%BE%D0%BF%D0%BE%D0%BA"></span> Несколько кнопок <span class="ez-toc-section-end"></span></h3> <p> Хотя у вас может быть только одна надстройка на каждой стороне, у вас может быть несколько кнопок внутри одного <code>.Вход-группа-БТН </code>. </p><pre> <code data-lang="html"> <div> <div> <! - Кнопки -> </div> <input type = "text" aria-label = "..."> </div> <div> <input type = "text" aria-label = "..."> <div> <! - Кнопки -> </div> </div> </code> </pre><p> Навигационные системы, доступные в Bootstrap, имеют общую разметку, начиная с базового класса <code> .nav </code>, а также общие состояния. Поменяйте местами классы модификаторов для переключения между стилями. </p> <h5><span class="ez-toc-section" id="%D0%94%D0%BB%D1%8F_%D0%B8%D1%81%D0%BF%D0%BE%D0%BB%D1%8C%D0%B7%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D1%8F_%D0%BD%D0%B0%D0%B2%D0%B8%D0%B3%D0%B0%D1%86%D0%B8%D0%B8_%D0%B4%D0%BB%D1%8F_%D0%BF%D0%B0%D0%BD%D0%B5%D0%BB%D0%B5%D0%B9_%D0%B2%D0%BA%D0%BB%D0%B0%D0%B4%D0%BE%D0%BA_%D1%82%D1%80%D0%B5%D0%B1%D1%83%D0%B5%D1%82%D1%81%D1%8F_%D0%BF%D0%BB%D0%B0%D0%B3%D0%B8%D0%BD_%D0%B2%D0%BA%D0%BB%D0%B0%D0%B4%D0%BE%D0%BA_JavaScript"></span> Для использования навигации для панелей вкладок требуется плагин вкладок JavaScript <span class="ez-toc-section-end"></span></h5> <p> Для вкладок с областями вкладок необходимо использовать плагин JavaScript вкладок.Для разметки также потребуются дополнительные атрибуты <code>, роль, </code> и ARIA — подробности см. В примере разметки плагина. </p> <h5><span class="ez-toc-section" id="%D0%A1%D0%B4%D0%B5%D0%BB%D0%B0%D0%B9%D1%82%D0%B5_%D0%BD%D0%B0%D0%B2%D0%B8%D0%B3%D0%B0%D1%86%D0%B8%D1%8E_%D0%B4%D0%BE%D1%81%D1%82%D1%83%D0%BF%D0%BD%D0%BE%D0%B9_%D0%B4%D0%BB%D1%8F_%D0%BD%D0%B0%D0%B2%D0%B8%D0%B3%D0%B0%D1%86%D0%B8%D0%B8"></span> Сделайте навигацию доступной для навигации <span class="ez-toc-section-end"></span></h5> <p> Если вы используете навигацию для предоставления панели навигации, обязательно добавьте <code> role = "navigation" </code> в наиболее логичный родительский контейнер <code> </p> <ul> </code> или оберните <code> </p> <nav> </code> элемент по всей навигации. Не добавляйте роль к самому <code> </p> <ul> </code>, так как это помешает ассистивным технологиям объявить его реальным списком.</p> <h3><span class="ez-toc-section" id="Tabs"></span> Tabs <span class="ez-toc-section-end"></span></h3> <p> Обратите внимание, что для класса <code> .nav-tabs </code> требуется базовый класс <code> .nav </code>. </p><pre> <code data-lang="html"> <ul> <li role = "presentation"> <a href="#"> Главная страница </a> </li> <li role = "presentation"> <a href="#"> Профиль </a> </li> <li role = "presentation"> <a href="#"> Сообщения </a> </li> </ul> </code> </pre><h3><span class="ez-toc-section" id="Pills"></span> Pills <span class="ez-toc-section-end"></span></h3> <p> Возьмите тот же HTML, но используйте вместо него <code> .nav-pills </code>: </p><pre> <code data-lang="html"> <ul> <li role = "presentation"> <a href="#"> Главная страница </a> </li> <li role = "presentation"> <a href="#"> Профиль </a> </li> <li role = "presentation"> <a href="#"> Сообщения </a> </li> </ul> </code> </pre><p> Таблетки также можно штабелировать вертикально.Просто добавьте <code> .nav-stacked </code>. </p><pre> <code data-lang="html"> <ul> ... </ul> </code> </pre><h3><span class="ez-toc-section" id="%D0%9F%D0%BE_%D1%88%D0%B8%D1%80%D0%B8%D0%BD%D0%B5"></span> По ширине <span class="ez-toc-section-end"></span></h3> <p> С легкостью делайте вкладки или таблетки равной ширине их родительской на экранах шире 768 пикселей с <code>. </code> с выравниванием по nav. На экранах меньшего размера навигационные ссылки складываются. </p> <p> <strong> Обоснованные навигационные ссылки на панели навигации в настоящее время не поддерживаются. </strong> </p> <h5><span class="ez-toc-section" id="Safari_%D0%B8_%D0%B0%D0%B4%D0%B0%D0%BF%D1%82%D0%B8%D0%B2%D0%BD%D0%B0%D1%8F_%D0%BD%D0%B0%D0%B2%D0%B8%D0%B3%D0%B0%D1%86%D0%B8%D1%8F_%D0%BF%D0%BE_%D1%88%D0%B8%D1%80%D0%B8%D0%BD%D0%B5"></span> Safari и адаптивная навигация по ширине <span class="ez-toc-section-end"></span></h5> <p> Начиная с версии 9.1.2, в Safari обнаружена ошибка, из-за которой изменение размера браузера по горизонтали вызывает ошибки рендеринга в обоснованной навигации, которые очищаются при обновлении.Эта ошибка также проявляется в примере обоснованной навигации. </p><pre> <code data-lang="html"> <ul> ... </ul> <ul> ... </ul> </code> </pre><h3><span class="ez-toc-section" id="%D0%9E%D1%82%D0%BA%D0%BB%D1%8E%D1%87%D0%B5%D0%BD%D0%BD%D1%8B%D0%B5_%D1%81%D1%81%D1%8B%D0%BB%D0%BA%D0%B8"></span> Отключенные ссылки <span class="ez-toc-section-end"></span></h3> <p> Для любого компонента навигации (вкладки или таблетки) добавьте <code> .disabled </code> для <strong> серых ссылок и отсутствия эффектов наведения </strong>. </p> <h5><span class="ez-toc-section" id="%D0%9D%D0%B5_%D0%B2%D0%BB%D0%B8%D1%8F%D0%B5%D1%82_%D0%BD%D0%B0_%D1%84%D1%83%D0%BD%D0%BA%D1%86%D0%B8%D0%BE%D0%BD%D0%B0%D0%BB%D1%8C%D0%BD%D0%BE%D1%81%D1%82%D1%8C_%D1%81%D1%81%D1%8B%D0%BB%D0%BA%D0%B8"></span> Не влияет на функциональность ссылки <span class="ez-toc-section-end"></span></h5> <p> Этот класс изменяет только внешний вид <code> <a> </code>, но не его функциональность. Используйте собственный JavaScript, чтобы отключить ссылки здесь. </p><pre> <code data-lang="html"> <ul> ... <li role = "presentation"> <a href="#"> Отключенная ссылка </a> </li> ... </ul> </code> </pre><h3><span class="ez-toc-section" id="%D0%98%D1%81%D0%BF%D0%BE%D0%BB%D1%8C%D0%B7%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D1%80%D0%B0%D1%81%D0%BA%D1%80%D1%8B%D0%B2%D0%B0%D1%8E%D1%89%D0%B8%D1%85%D1%81%D1%8F_%D1%81%D0%BF%D0%B8%D1%81%D0%BA%D0%BE%D0%B2"></span> Использование раскрывающихся списков <span class="ez-toc-section-end"></span></h3> <p> Добавьте раскрывающиеся меню с небольшим дополнительным HTML и подключаемым модулем раскрывающегося списка JavaScript. </p> <h4><span class="ez-toc-section" id="%D0%92%D0%BA%D0%BB%D0%B0%D0%B4%D0%BA%D0%B8_%D1%81_%D1%80%D0%B0%D1%81%D0%BA%D1%80%D1%8B%D0%B2%D0%B0%D1%8E%D1%89%D0%B8%D0%BC%D0%B8%D1%81%D1%8F_%D1%81%D0%BF%D0%B8%D1%81%D0%BA%D0%B0%D0%BC%D0%B8"></span> Вкладки с раскрывающимися списками <span class="ez-toc-section-end"></span></h4><pre> <code data-lang="html"> <ul> ... <li role = "presentation"> <a data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false"> Раскрывающееся меню <span> </span> </a> <ul> ... </ul> </li> ... </ul> </code> </pre><h4><span class="ez-toc-section" id="%D0%A2%D0%B0%D0%B1%D0%BB%D0%B5%D1%82%D0%BA%D0%B8_%D1%81_%D0%B2%D1%8B%D0%BF%D0%B0%D0%B4%D0%B0%D1%8E%D1%89%D0%B8%D0%BC%D0%B8_%D1%81%D0%BF%D0%B8%D1%81%D0%BA%D0%B0%D0%BC%D0%B8"></span> Таблетки с выпадающими списками <span class="ez-toc-section-end"></span></h4><pre> <code data-lang="html"> <ul> ... <li role = "presentation"> <a data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false"> Раскрывающееся меню <span> </span> </a> <ul> ... </ul> </li> ... </ul> </code> </pre><h3><span class="ez-toc-section" id="%D0%9F%D0%B0%D0%BD%D0%B5%D0%BB%D1%8C_%D0%BD%D0%B0%D0%B2%D0%B8%D0%B3%D0%B0%D1%86%D0%B8%D0%B8_%D0%BF%D0%BE_%D1%83%D0%BC%D0%BE%D0%BB%D1%87%D0%B0%D0%BD%D0%B8%D1%8E"></span> Панель навигации по умолчанию <span class="ez-toc-section-end"></span></h3> <p> Панели навигации — это адаптивные метакомпоненты, которые служат заголовками навигации для вашего приложения или сайта.Они начинают сворачиваться (и их можно переключать) в мобильных представлениях и становятся горизонтальными по мере увеличения доступной ширины области просмотра. </p> <p> <strong> Обоснованные навигационные ссылки на панели навигации в настоящее время не поддерживаются. </strong> </p> <h5><span class="ez-toc-section" id="%D0%9F%D0%B5%D1%80%D0%B5%D0%BF%D0%BE%D0%BB%D0%BD%D0%B5%D0%BD%D0%B8%D0%B5_%D1%81%D0%BE%D0%B4%D0%B5%D1%80%D0%B6%D0%B8%D0%BC%D0%BE%D0%B3%D0%BE"></span> Переполнение содержимого <span class="ez-toc-section-end"></span></h5> <p> Поскольку Bootstrap не знает, сколько места требуется содержимому на панели навигации, у вас могут возникнуть проблемы с переносом содержимого во вторую строку. Чтобы решить эту проблему, вы можете: </p> <ol type="a"> <li> Уменьшить количество или ширину элементов навигационной панели. </li> <li> Скрыть определенные элементы навигационной панели при определенных размерах экрана с помощью гибких служебных классов.</li> <li> Измените точку, в которой панель навигации переключается между свернутым и горизонтальным режимами. Настройте переменную <code> @ grid-float-breakpoint </code> или добавьте свой собственный медиа-запрос. </li> </ol> <h5><span class="ez-toc-section" id="%D0%A2%D1%80%D0%B5%D0%B1%D1%83%D0%B5%D1%82%D1%81%D1%8F_%D0%BF%D0%BE%D0%B4%D0%BA%D0%BB%D1%8E%D1%87%D0%B0%D0%B5%D0%BC%D1%8B%D0%B9_%D0%BC%D0%BE%D0%B4%D1%83%D0%BB%D1%8C_JavaScript"></span> Требуется подключаемый модуль JavaScript <span class="ez-toc-section-end"></span></h5> <p> Если JavaScript отключен и область просмотра достаточно узкая, чтобы панель навигации сворачивалась, будет невозможно развернуть панель навигации и просмотреть содержимое в пределах <code> .navbar-collapse </code>. </p> <p> Для отзывчивой панели навигации требуется, чтобы в вашу версию Bootstrap был включен плагин свертывания.</p> <h5><span class="ez-toc-section" id="%D0%98%D0%B7%D0%BC%D0%B5%D0%BD%D0%B5%D0%BD%D0%B8%D0%B5_%D1%81%D0%B2%D0%B5%D1%80%D0%BD%D1%83%D1%82%D0%BE%D0%B9_%D1%82%D0%BE%D1%87%D0%BA%D0%B8_%D0%BE%D1%81%D1%82%D0%B0%D0%BD%D0%BE%D0%B2%D0%B0_%D0%BC%D0%BE%D0%B1%D0%B8%D0%BB%D1%8C%D0%BD%D0%BE%D0%B9_%D0%BD%D0%B0%D0%B2%D0%B8%D0%B3%D0%B0%D1%86%D0%B8%D0%BE%D0%BD%D0%BD%D0%BE%D0%B9_%D0%BF%D0%B0%D0%BD%D0%B5%D0%BB%D0%B8"></span> Изменение свернутой точки останова мобильной навигационной панели <span class="ez-toc-section-end"></span></h5> <p> Навигационная панель сворачивается в вертикальное мобильное представление, когда область просмотра уже <code> @ grid-float-breakpoint </code>, и расширяется в горизонтальное немобильное представление, когда область просмотра составляет не менее <code> @ grid-float-breakpoint </code> шириной. Отрегулируйте эту переменную в источнике Less, чтобы контролировать, когда панель навигации сворачивается / разворачивается. Значение по умолчанию — <code> 768 пикселей </code> (самый маленький «маленький» или «планшетный» экран). </p> <h5><span class="ez-toc-section" id="%D0%A1%D0%B4%D0%B5%D0%BB%D0%B0%D0%B9%D1%82%D0%B5_%D0%BF%D0%B0%D0%BD%D0%B5%D0%BB%D0%B8_%D0%BD%D0%B0%D0%B2%D0%B8%D0%B3%D0%B0%D1%86%D0%B8%D0%B8_%D0%B4%D0%BE%D1%81%D1%82%D1%83%D0%BF%D0%BD%D1%8B%D0%BC%D0%B8"></span> Сделайте панели навигации доступными <span class="ez-toc-section-end"></span></h5> <p> Обязательно используйте элемент <code> </p> <nav> </code> или, если вы используете более общий элемент, например <code> </p> <div> </code>, добавьте <code> role = "navigation" </code> к каждой панели навигации, чтобы явно идентифицировать это знаковый регион для пользователей вспомогательных технологий.</p><pre> <code data-lang="html"> <nav> <div> <! - Бренд и переключатель сгруппированы для лучшего отображения на мобильных устройствах -> <div> <button type = "button" data-toggle = "collapse" data-target = "# bs-example-navbar-collapse-1" aria-extended = "false"> <span> Переключить навигацию </span> <span> </span> <span> </span> <span> </span> </button> <a href="#"> Бренд </a> </div> <! - Соберите навигационные ссылки, формы и другой контент для переключения -> <div> <ul> <li> <a href="#"> Ссылка <span> (текущая) </span> </a> </li> <li> <a href="#"> Ссылка </a> </li> <li> <a href="#" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> Раскрывающийся список <span> </span> </a> <ul> <li> <a href="#"> Действие </a> </li> <li> <a href="#"> Другое действие </a> </li> <li> <a href="#"> Здесь что-то еще </a> </li> <li role = "separator"> </li> <li> <a href="#"> Отдельная ссылка </a> </li> <li role = "separator"> </li> <li> <a href="#"> Еще одна отдельная ссылка </a> </li> </ul> </li> </ul> <форма> <div> <input type = "text" placeholder = "Search"> </div> <button type = "submit"> Отправить </button> </form> <ul> <li> <a href="#"> Ссылка </a> </li> <li> <a href="#" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> Раскрывающийся список <span> </span> </a> <ul> <li> <a href="#"> Действие </a> </li> <li> <a href="#"> Другое действие </a> </li> <li> <a href="#"> Здесь что-то еще </a> </li> <li role = "separator"> </li> <li> <a href="#"> Отдельная ссылка </a> </li> </ul> </li> </ul> </div> <! - /.navbar-collapse -> </div> <! - /.container-fluid -> </nav> </code> </pre><h3><span class="ez-toc-section" id="%D0%98%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B1%D1%80%D0%B5%D0%BD%D0%B4%D0%B0"></span> Изображение бренда <span class="ez-toc-section-end"></span></h3> <p> Замените бренд панели навигации своим собственным изображением, заменив текст на <code> <img> </code>. Поскольку <code> .navbar-brand </code> имеет собственное заполнение и высоту, вам может потребоваться переопределить некоторые CSS в зависимости от вашего изображения. </p><pre> <code data-lang="html"> <nav> <div> <div> <a href="#"> <noscript><img class="lazy lazy-hidden" alt = "Бренд" src = "..."></noscript><img class="lazyload lazy lazy-hidden" alt = "Бренд" src = "..."><noscript><img alt = "Бренд" src = "..."></noscript> </a> </div> </div> </nav> </code> </pre><h3><span class="ez-toc-section" id="Forms"></span> Forms <span class="ez-toc-section-end"></span></h3> <p> Разместите содержимое формы в пределах <code>.navbar-form </code> для правильного вертикального выравнивания и сворачивания в узких окнах просмотра. Используйте параметры выравнивания, чтобы решить, где он находится в содержимом панели навигации. </p> <p> Напомним, что <code> .navbar-form </code> разделяет большую часть своего кода с <code> .form-inline </code> через mixin. <strong> Некоторым элементам управления формы, например группам ввода, может потребоваться фиксированная ширина для правильного отображения на панели навигации. </strong> </p><pre> <code data-lang="html"> <form role = "search"> <div> <input type = "text" placeholder = "Search"> </div> <button type = "submit"> Отправить </button> </form> </code> </pre><h5><span class="ez-toc-section" id="%D0%9F%D1%80%D0%B5%D0%B4%D0%BE%D1%81%D1%82%D0%B5%D1%80%D0%B5%D0%B6%D0%B5%D0%BD%D0%B8%D1%8F_%D0%B4%D0%BB%D1%8F_%D0%BC%D0%BE%D0%B1%D0%B8%D0%BB%D1%8C%D0%BD%D1%8B%D1%85_%D1%83%D1%81%D1%82%D1%80%D0%BE%D0%B9%D1%81%D1%82%D0%B2"></span> Предостережения для мобильных устройств <span class="ez-toc-section-end"></span></h5> <p> Есть некоторые предостережения относительно использования элементов управления формой в фиксированных элементах на мобильных устройствах.См. Дополнительную информацию в нашей документации по поддержке браузера. </p> <h5><span class="ez-toc-section" id="%D0%92%D1%81%D0%B5%D0%B3%D0%B4%D0%B0_%D0%B4%D0%BE%D0%B1%D0%B0%D0%B2%D0%BB%D1%8F%D0%B9%D1%82%D0%B5_%D0%BC%D0%B5%D1%82%D0%BA%D0%B8-2"></span> Всегда добавляйте метки <span class="ez-toc-section-end"></span></h5> <p> Программы чтения с экрана будут иметь проблемы с вашими формами, если вы не добавите метку для каждого ввода. Для этих встроенных форм вы можете скрыть метки с помощью класса <code> .sr-only </code>. Существуют и другие альтернативные методы предоставления метки для вспомогательных технологий, такие как <code> aria-label </code>, <code> aria-labelledby </code> или <code> title </code> attribute. Если ни один из них отсутствует, программы чтения с экрана могут прибегнуть к использованию атрибута <code> заполнителя </code>, если он присутствует, но обратите внимание, что использование заполнителя <code> </code> в качестве замены для других методов маркировки не рекомендуется.</p> <h3><span class="ez-toc-section" id="Buttons"></span> Buttons <span class="ez-toc-section-end"></span></h3> <p> Добавьте класс <code> .navbar-btn </code> к элементам <code> <button> </code>, не находящимся в <code> </p> <form> </code>, чтобы центрировать их по вертикали на панели навигации. </p><pre> <code data-lang="html"> <button type = "button"> Войти </button> </code> </pre><h5><span class="ez-toc-section" id="%D0%98%D1%81%D0%BF%D0%BE%D0%BB%D1%8C%D0%B7%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%B2_%D0%B7%D0%B0%D0%B2%D0%B8%D1%81%D0%B8%D0%BC%D0%BE%D1%81%D1%82%D0%B8_%D0%BE%D1%82_%D0%BA%D0%BE%D0%BD%D1%82%D0%B5%D0%BA%D1%81%D1%82%D0%B0"></span> Использование в зависимости от контекста <span class="ez-toc-section-end"></span></h5> <p> Как и стандартные классы кнопок, <code> .navbar-btn </code> можно использовать на <code> <a> </code> и <code> < input> </code> элементов. Однако ни <code>.navbar-btn </code> и стандартные классы кнопок не должны использоваться в элементах <code> <a> </code> внутри <code> .navbar-nav </code>. </p> <h3><span class="ez-toc-section" id="%D0%A2%D0%B5%D0%BA%D1%81%D1%82-2"></span> Текст <span class="ez-toc-section-end"></span></h3> <p> Обернуть строки текста в элемент с <code> .navbar-text </code>, обычно в тег <code> </p> <p> </code> для правильного интерлиньяжа и цвета. </p><pre> <code data-lang="html"> <p> Вы вошли как Марк Отто </p> </code> </pre><h3><span class="ez-toc-section" id="%D0%9D%D0%B5-%D0%BD%D0%B0%D0%B2%D0%B8%D0%B3%D0%B0%D1%86%D0%B8%D0%BE%D0%BD%D0%BD%D1%8B%D0%B5_%D1%81%D1%81%D1%8B%D0%BB%D0%BA%D0%B8"></span> Не-навигационные ссылки <span class="ez-toc-section-end"></span></h3> <p> Для людей, использующих стандартные ссылки, не входящие в стандартный компонент навигации навигационной панели, используйте <code>.navbar-link </code>, чтобы добавить правильные цвета для параметров по умолчанию и инвертированных параметров навигационной панели. </p><pre> <code data-lang="html"> <p> Вы вошли как <a href="#"> Марк Отто </a> </p> </code> </pre><h3><span class="ez-toc-section" id="%D0%92%D1%8B%D1%80%D0%B0%D0%B2%D0%BD%D0%B8%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BA%D0%BE%D0%BC%D0%BF%D0%BE%D0%BD%D0%B5%D0%BD%D1%82%D0%BE%D0%B2"></span> Выравнивание компонентов <span class="ez-toc-section-end"></span></h3> <p> Выровняйте навигационные ссылки, формы, кнопки или текст с помощью панели навигации <code>. -left </code> или <code> .navbar-right </code> служебных классов. Оба класса добавят поплавок CSS в указанном направлении. Например, чтобы выровнять навигационные ссылки, поместите их в отдельный <code> </p> <ul> </code> с применением соответствующего служебного класса.</p> <p> Эти классы представляют собой смешанные версии <code> .pull-left </code> и <code> .pull-right </code>, но они ограничены медиа-запросами для упрощения работы с компонентами навигационной панели для устройств разных размеров. </p> <h5><span class="ez-toc-section" id="%D0%92%D1%8B%D1%80%D0%B0%D0%B2%D0%BD%D0%B8%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BD%D0%B5%D1%81%D0%BA%D0%BE%D0%BB%D1%8C%D0%BA%D0%B8%D1%85_%D0%BA%D0%BE%D0%BC%D0%BF%D0%BE%D0%BD%D0%B5%D0%BD%D1%82%D0%BE%D0%B2_%D0%BF%D0%BE_%D0%BF%D1%80%D0%B0%D0%B2%D0%BE%D0%BC%D1%83_%D0%BA%D1%80%D0%B0%D1%8E"></span> Выравнивание нескольких компонентов по правому краю <span class="ez-toc-section-end"></span></h5> <p> Навигационные панели в настоящее время имеют ограничение на несколько классов <code> .navbar-right </code>. Чтобы правильно разместить содержимое, мы используем отрицательное поле на последнем элементе <code> .navbar-right </code>. Когда есть несколько элементов, использующих этот класс, эти поля не работают должным образом.</p> <p> Мы вернемся к этому, когда сможем переписать этот компонент в v4. </p> <h3><span class="ez-toc-section" id="Fixed_to_top"></span> Fixed to top <span class="ez-toc-section-end"></span></h3> <p> Добавьте <code> .navbar-fixed-top </code> и включите <code> .container </code> или <code> .container-fluid </code> для центрирования и заполнения содержимого навигационной панели. </p><pre> <code data-lang="html"> <nav> <div> ... </div> </nav> </code> </pre><h5><span class="ez-toc-section" id="%D0%A2%D1%80%D0%B5%D0%B1%D1%83%D0%B5%D1%82%D1%81%D1%8F_%D0%B7%D0%B0%D0%BF%D0%BE%D0%BB%D0%BD%D0%B5%D0%BD%D0%B8%D0%B5_%D0%BE%D1%81%D0%BD%D0%BE%D0%B2%D0%BD%D0%BE%D0%B3%D0%BE_%D1%82%D0%B5%D0%BA%D1%81%D1%82%D0%B0"></span> Требуется заполнение основного текста <span class="ez-toc-section-end"></span></h5> <p> Фиксированная панель навигации будет перекрывать другое содержимое, если вы не добавите заполнение <code> </code> в верхнюю часть <code> <body> </code>.Попробуйте свои собственные значения или воспользуйтесь приведенным ниже фрагментом. Совет: по умолчанию высота панели навигации составляет 50 пикселей. </p><pre> <code data-lang="scss"> body {padding-top: 70px; } </code> </pre><p> Не забудьте включить этот <strong> после </strong> в основной CSS Bootstrap. </p> <h3><span class="ez-toc-section" id="Fixed_to_bottom"></span> Fixed to bottom <span class="ez-toc-section-end"></span></h3> <p> Добавьте <code> .navbar-fixed-bottom </code> и включите <code> .container </code> или <code> .container-fluid </code> для центрирования и заполнения содержимого навигационной панели. </p><pre> <code data-lang="html"> <nav> <div> ... </div> </nav> </code> </pre><h5><span class="ez-toc-section" id="%D0%A2%D1%80%D0%B5%D0%B1%D1%83%D0%B5%D1%82%D1%81%D1%8F_%D0%B7%D0%B0%D0%BF%D0%BE%D0%BB%D0%BD%D0%B5%D0%BD%D0%B8%D0%B5_%D0%BE%D1%81%D0%BD%D0%BE%D0%B2%D0%BD%D0%BE%D0%B3%D0%BE_%D1%82%D0%B5%D0%BA%D1%81%D1%82%D0%B0-2"></span> Требуется заполнение основного текста <span class="ez-toc-section-end"></span></h5> <p> Фиксированная панель навигации будет перекрывать другое содержимое, если вы не добавите заполнение <code> </code> в нижнюю часть <code> <body> </code>.Попробуйте свои собственные значения или воспользуйтесь приведенным ниже фрагментом. Совет: по умолчанию высота панели навигации составляет 50 пикселей. </p><pre> <code data-lang="scss"> body {padding-bottom: 70px; } </code> </pre><p> Не забудьте включить этот <strong> после </strong> в основной CSS Bootstrap. </p> <h3><span class="ez-toc-section" id="Static_top"></span> Static top <span class="ez-toc-section-end"></span></h3> <p> Создайте полноразмерную панель навигации, которая прокручивается вместе со страницей, добавив <code> .navbar-static-top </code> и включив <code> .container </code> или <code> .container-fluid </code> для центрирования и заполнения содержимого навигационной панели. </p> <p> В отличие от <code>.navbar-fixed- * </code>, вам не нужно изменять какие-либо отступы в теле <code> </code>. </p><pre> <code data-lang="html"> <nav> <div> ... </div> </nav> </code> </pre><h3><span class="ez-toc-section" id="Inverted_navbar"></span> Inverted navbar <span class="ez-toc-section-end"></span></h3> <p> Измените внешний вид навигационной панели, добавив <code> .navbar-inverse </code>. </p><pre> <code data-lang="html"> <nav> ... </nav> </code> </pre><p> Указывает расположение текущей страницы в иерархии навигации. </p> <p> Разделители автоматически добавляются в CSS через <code>: до </code> и <code>, содержимое </code>.</p><pre> <code data-lang="html"> <ol> <li> <a href="#"> На главную </a> </li> <li> <a href="#"> Библиотека </a> </li> <li> Данные </li> </ol> </code> </pre><p> Предоставьте ссылки для разбивки на страницы для вашего сайта или приложения с помощью компонента многостраничной разбивки на страницы или более простой альтернативы пейджеру. </p> <p> Простая разбивка на страницы, вдохновленная Rdio, отлично подходит для приложений и результатов поиска. Большой блок трудно пропустить, он легко масштабируется и обеспечивает большие области щелчка.</p><pre> <code data-lang="html"> <nav aria-label = "Навигация по странице"> <ul> <li> <a href="#" aria-label="Previous"> <span aria-hidden = "true"> & laquo; </span> </a> </li> <li> <a href="#"> 1 </a> </li> <li> <a href="#"> 2 </a> </li> <li> <a href="#"> 3 </a> </li> <li> <a href="#"> 4 </a> </li> <li> <a href="#"> 5 </a> </li> <li> <a href="#" aria-label="Next"> <span aria-hidden = "true"> & raquo; </span> </a> </li> </ul> </nav> </code> </pre><h4><span class="ez-toc-section" id="%D0%9E%D1%82%D0%BA%D0%BB%D1%8E%D1%87%D0%B5%D0%BD%D0%BD%D0%BE%D0%B5_%D0%B8_%D0%B0%D0%BA%D1%82%D0%B8%D0%B2%D0%BD%D0%BE%D0%B5_%D1%81%D0%BE%D1%81%D1%82%D0%BE%D1%8F%D0%BD%D0%B8%D1%8F"></span> Отключенное и активное состояния <span class="ez-toc-section-end"></span></h4> <p> Ссылки можно настроить для различных обстоятельств.Используйте <code> .disabled </code> для не кликабельных ссылок и <code> .active </code> для обозначения текущей страницы. </p><pre> <code data-lang="html"> <nav aria-label = "..."> <ul> <li> <a href="#" aria-label="Previous"> <span aria-hidden = "true"> & laquo; </span> </a> </li> <li> <a href="#"> 1 <span> (текущий) </span> </a> </li> ... </ul> </nav> </code> </pre><p> Мы рекомендуем вам заменить активные или отключенные привязки на <code> <span> </code> или опустить привязку в случае стрелок «предыдущий / следующий», чтобы удалить функцию щелчка при сохранении заданных стилей.</p><pre> <code data-lang="html"> <nav aria-label = "..."> <ul> <li> <span> <span aria-hidden = "true"> & laquo; </span> </span> </li> <li> <span> 1 <span>(current)</span> </span> </li> ... </ul> </nav> </code> </pre><h4><span class="ez-toc-section" id="%D0%A0%D0%B0%D0%B7%D0%BC%D0%B5%D1%80-4"></span> Размер <span class="ez-toc-section-end"></span></h4> <p> Хотите больше или меньше страниц? Добавьте <code> .pagination-lg </code> или <code> .pagination-sm </code> для дополнительных размеров. </p><pre> <code data-lang="html"> <nav aria-label = "... "> <ul> ... </ul> </nav> <nav aria-label = "..."> <ul> ... </ul> </nav> <nav aria-label = "..."> <ul> ... </ul> </nav> </code> </pre><p> Быстрые предыдущие и следующие ссылки для простых реализаций разбивки на страницы с легкой разметкой и стилями. Он отлично подходит для простых сайтов, таких как блоги или журналы. </p> <h4><span class="ez-toc-section" id="%D0%9F%D1%80%D0%B8%D0%BC%D0%B5%D1%80_%D0%BF%D0%BE_%D1%83%D0%BC%D0%BE%D0%BB%D1%87%D0%B0%D0%BD%D0%B8%D1%8E"></span> Пример по умолчанию <span class="ez-toc-section-end"></span></h4> <p> По умолчанию пейджер размещает ссылки по центру. </p><pre> <code data-lang="html"> <nav aria-label = "..."> <ul> <li> <a href="#"> Предыдущий </a> </li> <li> <a href="#"> Далее </a> </li> </ul> </nav> </code> </pre><h4><span class="ez-toc-section" id="%D0%92%D1%8B%D1%80%D0%BE%D0%B2%D0%BD%D0%B5%D0%BD%D0%BD%D1%8B%D0%B5_%D1%81%D1%81%D1%8B%D0%BB%D0%BA%D0%B8"></span> Выровненные ссылки <span class="ez-toc-section-end"></span></h4> <p> В качестве альтернативы вы можете выровнять каждую ссылку по сторонам: </p><pre> <code data-lang="html"> <nav aria-label = "... "> <ul> <li> <a href="#"> <span aria-hidden = "true"> & larr; </span> Раньше </a> </li> <li> <a href="#"> Более новая <span aria-hidden = "true"> & rarr; </span> </a> </li> </ul> </nav> </code> </pre><h4><span class="ez-toc-section" id="%D0%9D%D0%B5%D0%BE%D0%B1%D1%8F%D0%B7%D0%B0%D1%82%D0%B5%D0%BB%D1%8C%D0%BD%D0%BE%D0%B5_%D0%BE%D1%82%D0%BA%D0%BB%D1%8E%D1%87%D0%B5%D0%BD%D0%BD%D0%BE%D0%B5_%D1%81%D0%BE%D1%81%D1%82%D0%BE%D1%8F%D0%BD%D0%B8%D0%B5"></span> Необязательное отключенное состояние <span class="ez-toc-section-end"></span></h4> <p> Ссылки на пейджер также используют общий служебный класс <code> .disabled </code> из разбивки на страницы. </p><pre> <code data-lang="html"> <nav aria-label = "..."> <ul> <li> <a href="#"> <span aria-hidden = "true"> & larr; </span> Раньше </a> </li> <li> <a href="#"> Более новая <span aria-hidden = "true"> & rarr; </span> </a> </li> </ul> </nav> </code> </pre><h3><span class="ez-toc-section" id="%D0%9F%D1%80%D0%B8%D0%BC%D0%B5%D1%80-12"></span> Пример <span class="ez-toc-section-end"></span></h3> <p><h3><span class="ez-toc-section" id="%D0%9F%D1%80%D0%B8%D0%BC%D0%B5%D1%80_%D0%B7%D0%B0%D0%B3%D0%BE%D0%BB%D0%BE%D0%B2%D0%BA%D0%B0_%D0%9D%D0%BE%D0%B2%D1%8B%D0%B9"></span> Пример заголовка Новый <span class="ez-toc-section-end"></span></h3> <h4><span class="ez-toc-section" id="%D0%9F%D1%80%D0%B8%D0%BC%D0%B5%D1%80_%D0%B7%D0%B0%D0%B3%D0%BE%D0%BB%D0%BE%D0%B2%D0%BA%D0%B0_%D0%9D%D0%BE%D0%B2%D1%8B%D0%B9-2"></span> Пример заголовка Новый <span class="ez-toc-section-end"></span></h4> <h5><span class="ez-toc-section" id="%D0%9F%D1%80%D0%B8%D0%BC%D0%B5%D1%80_%D0%B7%D0%B0%D0%B3%D0%BE%D0%BB%D0%BE%D0%B2%D0%BA%D0%B0_%D0%9D%D0%BE%D0%B2%D1%8B%D0%B9-3"></span> Пример заголовка Новый <span class="ez-toc-section-end"></span></h5> <h5><span class="ez-toc-section" id="%D0%9F%D1%80%D0%B8%D0%BC%D0%B5%D1%80_%D0%B7%D0%B0%D0%B3%D0%BE%D0%BB%D0%BE%D0%B2%D0%BA%D0%B0_%D0%9D%D0%BE%D0%B2%D1%8B%D0%B9-4"></span> Пример заголовка Новый <span class="ez-toc-section-end"></span></h5> <h6><span class="ez-toc-section" id="%D0%9F%D1%80%D0%B8%D0%BC%D0%B5%D1%80_%D0%B7%D0%B0%D0%B3%D0%BE%D0%BB%D0%BE%D0%B2%D0%BA%D0%B0_%D0%9D%D0%BE%D0%B2%D1%8B%D0%B9-5"></span> Пример заголовка Новый <span class="ez-toc-section-end"></span></h6> </p><pre> <code data-lang="html"> <h4><span class="ez-toc-section" id="%D0%9F%D1%80%D0%B8%D0%BC%D0%B5%D1%80_%D0%B7%D0%B0%D0%B3%D0%BE%D0%BB%D0%BE%D0%B2%D0%BA%D0%B0"></span> Пример заголовка <span class="ez-toc-section-end"></span></h4><span> Новый </ span > </h4> </code> </pre><h3><span class="ez-toc-section" id="%D0%94%D0%BE%D1%81%D1%82%D1%83%D0%BF%D0%BD%D1%8B%D0%B5_%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B"></span> Доступные варианты <span class="ez-toc-section-end"></span></h3> <p> Добавьте любой из перечисленных ниже классов модификаторов, чтобы изменить внешний вид метки.</p> <p> По умолчанию Первичная информация об успехе Предупреждение Опасность </p><pre> <code data-lang="html"> <span> По умолчанию </span> <span> Первичный </span> <span> Успех </span> <span> Информация </span> <span> Предупреждение </span> <span> Опасно </span> </code> </pre><h5><span class="ez-toc-section" id="%D0%95%D1%81%D1%82%D1%8C_%D1%82%D0%BE%D0%BD%D0%BD%D1%8B_%D1%8D%D1%82%D0%B8%D0%BA%D0%B5%D1%82%D0%BE%D0%BA"></span> Есть тонны этикеток? <span class="ez-toc-section-end"></span></h5> <p> Проблемы с отображением могут возникнуть, когда у вас есть десятки встроенных меток в узком контейнере, каждая из которых содержит свой собственный элемент <code> inline-block </code> (например, значок). Чтобы решить эту проблему, установите <code> display: inline-block; </code>.Для контекста и примера см. №13219. </p> <p> Легко выделяйте новые или непрочитанные элементы, добавляя <code> <span> </code> к ссылкам, навигации Bootstrap и т. Д. </p><pre> <code data-lang="html"> <a href="#"> Входящие <span> 42 </span> </a> <button type = "button"> Сообщения <span> 4 </span> </button> </code> </pre><h5><span class="ez-toc-section" id="%D0%A1%D0%B0%D0%BC%D0%BE%D1%81%D1%82%D0%BE%D1%8F%D1%82%D0%B5%D0%BB%D1%8C%D0%BD%D0%BE%D0%B5_%D1%81%D0%B2%D0%BE%D1%80%D0%B0%D1%87%D0%B8%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5"></span> Самостоятельное сворачивание <span class="ez-toc-section-end"></span></h5> <p> Когда нет новых или непрочитанных элементов, значки просто сворачиваются (с помощью CSS-селектора <code>: пустой </code>), если в них нет содержимого.</p> <h5><span class="ez-toc-section" id="%D0%9A%D1%80%D0%BE%D1%81%D1%81%D0%B1%D1%80%D0%B0%D1%83%D0%B7%D0%B5%D1%80%D0%BD%D0%B0%D1%8F_%D1%81%D0%BE%D0%B2%D0%BC%D0%B5%D1%81%D1%82%D0%B8%D0%BC%D0%BE%D1%81%D1%82%D1%8C"></span> Кроссбраузерная совместимость <span class="ez-toc-section-end"></span></h5> <p> Значки не сбрасываются автоматически в Internet Explorer 8, поскольку в нем отсутствует поддержка селектора <code>: пустой </code>. </p> <h5><span class="ez-toc-section" id="%D0%90%D0%B4%D0%B0%D0%BF%D1%82%D0%B8%D1%80%D1%83%D0%B5%D1%82%D1%81%D1%8F_%D0%BA_%D0%B0%D0%BA%D1%82%D0%B8%D0%B2%D0%BD%D1%8B%D0%BC_%D1%81%D0%BE%D1%81%D1%82%D0%BE%D1%8F%D0%BD%D0%B8%D1%8F%D0%BC_%D0%BD%D0%B0%D0%B2%D0%B8%D0%B3%D0%B0%D1%86%D0%B8%D0%B8"></span> Адаптируется к активным состояниям навигации <span class="ez-toc-section-end"></span></h5> <p> Включены встроенные стили для размещения значков в активных состояниях при навигации по таблетке. </p><pre> <code data-lang="html"> <ul role = "tablist"> <li role = "presentation"> <a href="#"> Домашняя страница <span> 42 </span> </a> </li> <li role = "presentation"> <a href="#"> Профиль </a> </li> <li role = "presentation"> <a href="#"> Сообщения <span> 3 </span> </a> </li> </ul> </code> </pre><p> Легкий, гибкий компонент, который при желании может расширить всю область просмотра для демонстрации ключевого контента на вашем сайте.</p> <p> Это простой отряд-герой, простой компонент в стиле jumbotron для привлечения дополнительного внимания к избранному контенту или информации. </p> <p> Узнать больше </p><pre> <code data-lang="html"> <div> <h2><span class="ez-toc-section" id="%D0%9F%D1%80%D0%B8%D0%B2%D0%B5%D1%82_%D0%BC%D0%B8%D1%80"></span> Привет, мир! <span class="ez-toc-section-end"></span></h2> <p> ... </p> <p> <a href="#" role="button"> Подробнее… </a> </p> </div> </code> </pre><p> Чтобы сделать jumbotron полной ширины и без закругленных углов, поместите его за пределами всех <code> .container </code> s и вместо этого добавьте <code>.контейнер </code> внутри. </p><pre> <code data-lang="html"> <div> <div> ... </div> </div> </code> </pre><p> Простая оболочка для <code> h2 </code>, позволяющая соответствующим образом разделять и сегментировать разделы содержимого на странице. Он может использовать небольшой элемент <code> <code> по умолчанию <code> h2 </code>, а также большинство других компонентов (с дополнительными стилями). </p><pre> <code data-lang="html"> <div> <h2><span class="ez-toc-section" id="%D0%9F%D1%80%D0%B8%D0%BC%D0%B5%D1%80_%D0%B7%D0%B0%D0%B3%D0%BE%D0%BB%D0%BE%D0%B2%D0%BA%D0%B0_%D1%81%D1%82%D1%80%D0%B0%D0%BD%D0%B8%D1%86%D1%8B"></span> Пример заголовка страницы <span class="ez-toc-section-end"></span></h2><small> Подтекст для заголовка </small> </h2> </div> </code> </pre><p> Расширьте систему сеток Bootstrap с помощью компонента эскизов, чтобы легко отображать сетки изображений, видео, текста и т. д.</p> <p> Если вы ищете представление эскизов разной высоты и / или ширины в стиле Pinterest, вам потребуется сторонний плагин, например Masonry, Isotope или Salvattore. </p> <h3><span class="ez-toc-section" id="%D0%9F%D1%80%D0%B8%D0%BC%D0%B5%D1%80_%D0%BF%D0%BE_%D1%83%D0%BC%D0%BE%D0%BB%D1%87%D0%B0%D0%BD%D0%B8%D1%8E-2"></span> Пример по умолчанию <span class="ez-toc-section-end"></span></h3> <p> По умолчанию эскизы Bootstrap предназначены для демонстрации связанных изображений с минимальной необходимой разметкой. </p><pre> <code data-lang="html"> <div> <div> <a href="#"> <noscript><img class="lazy lazy-hidden" src = "..." alt = "..."></noscript><img class="lazyload lazy lazy-hidden" src = "..." alt = "..."><noscript><img src = "..." alt = "..."></noscript> </a> </div> ... </div> </code> </pre><h3><span class="ez-toc-section" id="%D0%9F%D0%BE%D0%BB%D1%8C%D0%B7%D0%BE%D0%B2%D0%B0%D1%82%D0%B5%D0%BB%D1%8C%D1%81%D0%BA%D0%BE%D0%B5_%D1%81%D0%BE%D0%B4%D0%B5%D1%80%D0%B6%D0%B8%D0%BC%D0%BE%D0%B5"></span> Пользовательское содержимое <span class="ez-toc-section-end"></span></h3> <p> С небольшой дополнительной разметкой можно добавить в эскизы любой тип HTML-содержимого, например заголовки, абзацы или кнопки.</p> <h4><span class="ez-toc-section" id="%D0%AD%D1%82%D0%B8%D0%BA%D0%B5%D1%82%D0%BA%D0%B0_%D0%B4%D0%BB%D1%8F_%D0%BC%D0%B8%D0%BD%D0%B8%D0%B0%D1%82%D1%8E%D1%80"></span> Этикетка для миниатюр <span class="ez-toc-section-end"></span></h4> <p> Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies Vehicula ut id elit. </p> <p> Кнопка Кнопка </p> <h4><span class="ez-toc-section" id="%D0%AD%D1%82%D0%B8%D0%BA%D0%B5%D1%82%D0%BA%D0%B0_%D1%8D%D1%81%D0%BA%D0%B8%D0%B7%D0%B0"></span> Этикетка эскиза <span class="ez-toc-section-end"></span></h4> <p> Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies Vehicula ut id elit. </p> <p> Кнопка Кнопка </p> <h4><span class="ez-toc-section" id="%D0%AD%D1%82%D0%B8%D0%BA%D0%B5%D1%82%D0%BA%D0%B0_%D1%8D%D1%81%D0%BA%D0%B8%D0%B7%D0%B0-2"></span> Этикетка эскиза <span class="ez-toc-section-end"></span></h4> <p> Cras justo odio, dapibus ac facilisis in, egestas eget quam.Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies Vehicula ut id elit. </p> <p> Кнопка Кнопка </p><pre> <code data-lang="html"> <div> <div> <div> <noscript><img class="lazy lazy-hidden" src = "..." alt = "..."></noscript><img class="lazyload lazy lazy-hidden" src = "..." alt = "..."><noscript><img src = "..." alt = "..."></noscript> <div> <h4><span class="ez-toc-section" id="%D0%AF%D1%80%D0%BB%D1%8B%D0%BA_%D1%8D%D1%81%D0%BA%D0%B8%D0%B7%D0%B0"></span> Ярлык эскиза <span class="ez-toc-section-end"></span></h4> <p> ... </p> <p> <a href="#" role="button"> Button </a> <a href="#" role="button"> Button </a> </p> </div> </div> </div> </div> </code> </pre><p> Предоставляйте контекстные сообщения обратной связи для типичных действий пользователя с помощью нескольких доступных и гибких предупреждающих сообщений.</p> <h3><span class="ez-toc-section" id="%D0%9F%D1%80%D0%B8%D0%BC%D0%B5%D1%80%D1%8B-2"></span> Примеры <span class="ez-toc-section-end"></span></h3> <p> Оберните любой текст и дополнительную кнопку закрытия в <code> .alert </code> и один из четырех контекстных классов (например, <code> .alert-success </code>) для основных предупреждающих сообщений. </p> <h5><span class="ez-toc-section" id="%D0%9D%D0%B5%D1%82_%D0%BA%D0%BB%D0%B0%D1%81%D1%81%D0%B0_%D0%BF%D0%BE_%D1%83%D0%BC%D0%BE%D0%BB%D1%87%D0%B0%D0%BD%D0%B8%D1%8E"></span> Нет класса по умолчанию <span class="ez-toc-section-end"></span></h5> <p> Предупреждения не имеют классов по умолчанию, только базовые классы и классы-модификаторы. Серое предупреждение по умолчанию не имеет особого смысла, поэтому вам необходимо указать тип через контекстный класс. Выбирайте из успеха, информации, предупреждения или опасности. </p> <p> <strong> Молодец! </strong> Вы успешно прочитали это важное предупреждающее сообщение.</p> <p> <strong> Внимание! </strong> Это предупреждение требует вашего внимания, но оно не особо важно. </p> <p> <strong> Внимание! </strong> Лучше проверьте себя, вы не очень хорошо выглядите. </p> <p> <strong> Ах да, хватит! </strong> Измените кое-что и попробуйте отправить еще раз. </p><pre> <code data-lang="html"> <div role = "alert"> ... </div> <div role = "alert"> ... </div> <div role = "alert"> ... </div> <div role = "alert"> ... </div> </code> </pre><h3><span class="ez-toc-section" id="%D0%9E%D1%82%D0%BA%D0%BB%D1%8E%D1%87%D0%B0%D0%B5%D0%BC%D1%8B%D0%B5_%D0%BE%D0%BF%D0%BE%D0%B2%D0%B5%D1%89%D0%B5%D0%BD%D0%B8%D1%8F"></span> Отключаемые оповещения <span class="ez-toc-section-end"></span></h3> <p> Создайте любое оповещение, добавив необязательный <code>.предупреждение-отключение </code> и кнопка закрытия. </p> <p> × <strong> Внимание! </strong> Лучше проверьте себя, вы не очень хорошо выглядите. </p><pre> <code data-lang="html"> <div role = "alert"> <button type = "button" data-dismiss = "alert" aria-label = "Close"> <span aria-hidden = "true"> & times; </span> </button> <strong> Предупреждение! </strong> Лучше проверьте себя, вы не очень хорошо выглядите. </div> </code> </pre><h5><span class="ez-toc-section" id="%D0%9E%D0%B1%D0%B5%D1%81%D0%BF%D0%B5%D1%87%D1%8C%D1%82%D0%B5_%D0%BF%D1%80%D0%B0%D0%B2%D0%B8%D0%BB%D1%8C%D0%BD%D0%BE%D0%B5_%D0%BF%D0%BE%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%BD%D0%B0_%D0%B2%D1%81%D0%B5%D1%85_%D1%83%D1%81%D1%82%D1%80%D0%BE%D0%B9%D1%81%D1%82%D0%B2%D0%B0%D1%85"></span> Обеспечьте правильное поведение на всех устройствах <span class="ez-toc-section-end"></span></h5> <p> Обязательно используйте элемент <code> <button> </code> с атрибутом данных <code> data-dismiss = "alert" </code>.</p> <h3><span class="ez-toc-section" id="%D0%A1%D1%81%D1%8B%D0%BB%D0%BA%D0%B8_%D0%B2_%D0%BF%D1%80%D0%B5%D0%B4%D1%83%D0%BF%D1%80%D0%B5%D0%B6%D0%B4%D0%B5%D0%BD%D0%B8%D1%8F%D1%85"></span> Ссылки в предупреждениях <span class="ez-toc-section-end"></span></h3> <p> Используйте служебный класс <code> .alert-link </code>, чтобы быстро предоставлять соответствующие цветные ссылки в любом предупреждении. </p><pre> <code data-lang="html"> <div role = "alert"> <a href="#"> ... </a> </div> <div role = "alert"> <a href="#"> ... </a> </div> <div role = "alert"> <a href="#"> ... </a> </div> <div role = "alert"> <a href="#"> ... </a> </div> </code> </pre><p> Обеспечивайте актуальную обратную связь о ходе рабочего процесса или действия с помощью простых, но гибких индикаторов выполнения.</p> <h5><span class="ez-toc-section" id="%D0%9A%D1%80%D0%BE%D1%81%D1%81%D0%B1%D1%80%D0%B0%D1%83%D0%B7%D0%B5%D1%80%D0%BD%D0%B0%D1%8F_%D1%81%D0%BE%D0%B2%D0%BC%D0%B5%D1%81%D1%82%D0%B8%D0%BC%D0%BE%D1%81%D1%82%D1%8C-2"></span> Кроссбраузерная совместимость <span class="ez-toc-section-end"></span></h5> <p> Индикаторы выполнения используют переходы и анимацию CSS3 для достижения некоторых эффектов. Эти функции не поддерживаются в Internet Explorer 9 и ниже или более ранних версиях Firefox. Opera 12 не поддерживает анимацию. </p> <h5><span class="ez-toc-section" id="%D0%A1%D0%BE%D0%B2%D0%BC%D0%B5%D1%81%D1%82%D0%B8%D0%BC%D0%BE%D1%81%D1%82%D1%8C_%D1%81_%D0%BF%D0%BE%D0%BB%D0%B8%D1%82%D0%B8%D0%BA%D0%BE%D0%B9_%D0%B1%D0%B5%D0%B7%D0%BE%D0%BF%D0%B0%D1%81%D0%BD%D0%BE%D1%81%D1%82%D0%B8_%D0%BA%D0%BE%D0%BD%D1%82%D0%B5%D0%BD%D1%82%D0%B0_CSP"></span> Совместимость с политикой безопасности контента (CSP) <span class="ez-toc-section-end"></span></h5> <p> Если на вашем веб-сайте есть политика безопасности контента (CSP), которая не разрешает <code> style-src 'unsafe-inline' </code>, то вы не сможете использовать встроенный стиль <code> </code> для установки ширины индикатора выполнения, как показано в наших примерах ниже.Альтернативные методы установки ширины, совместимые со строгими CSP, включают использование небольшого пользовательского JavaScript (который устанавливает <code> element.style.width </code>) или использование пользовательских классов CSS. </p> <h3><span class="ez-toc-section" id="%D0%91%D0%B0%D0%B7%D0%BE%D0%B2%D1%8B%D0%B9_%D0%BF%D1%80%D0%B8%D0%BC%D0%B5%D1%80-3"></span> Базовый пример <span class="ez-toc-section-end"></span></h3> <p> Индикатор выполнения по умолчанию. </p><pre> <code data-lang="html"> <div> <div role = "progressbar" aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100"> <span> Выполнено на 60% </span> </div> </div> </code> </pre><h3><span class="ez-toc-section" id="%D0%A1_%D1%8D%D1%82%D0%B8%D0%BA%D0%B5%D1%82%D0%BA%D0%BE%D0%B9"></span> С этикеткой <span class="ez-toc-section-end"></span></h3> <p> Удалите <code> <span> </code> с <code>.sr-only </code> внутри индикатора выполнения, чтобы показать видимый процент. </p><pre> <code data-lang="html"> <div> <div role = "progressbar" aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100"> 60% </div> </div> </code> </pre><p> Чтобы текст метки оставался разборчивым даже для малых процентов, рассмотрите возможность добавления <code> минимальной ширины </code> к индикатору выполнения. </p><pre> <code data-lang="html"> <div> <div role = "progressbar" aria-valuenow = "0" aria-valuemin = "0" aria-valuemax = "100"> 0% </div> </div> <div> <div role = "progressbar" aria-valuenow = "2" aria-valuemin = "0" aria-valuemax = "100"> 2% </div> </div> </code> </pre><h3><span class="ez-toc-section" id="%D0%9A%D0%BE%D0%BD%D1%82%D0%B5%D0%BA%D1%81%D1%82%D0%BD%D1%8B%D0%B5_%D0%B0%D0%BB%D1%8C%D1%82%D0%B5%D1%80%D0%BD%D0%B0%D1%82%D0%B8%D0%B2%D1%8B"></span> Контекстные альтернативы <span class="ez-toc-section-end"></span></h3> <p> Индикаторы выполнения используют одни и те же кнопки и классы предупреждений для согласованных стилей.</p><pre> <code data-lang="html"> <div> <div role = "progressbar" aria-valuenow = "40" aria-valuemin = "0" aria-valuemax = "100"> <span> Выполнено на 40% (успешно) </span> </div> </div> <div> <div role = "progressbar" aria-valuenow = "20" aria-valuemin = "0" aria-valuemax = "100"> <span> Готово на 20% </span> </div> </div> <div> <div role = "progressbar" aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100"> <span> Готово на 60% (предупреждение) </span> </div> </div> <div> <div role = "progressbar" aria-valuenow = "80" aria-valuemin = "0" aria-valuemax = "100"> <span> Выполнено на 80% (опасность) </span> </div> </div> </code> </pre><h3><span class="ez-toc-section" id="%D0%9F%D0%BE%D0%BB%D0%BE%D1%81%D0%B0%D1%82%D1%8B%D0%B9"></span> Полосатый <span class="ez-toc-section-end"></span></h3> <p> Использует градиент для создания эффекта полос.Недоступно в IE9 и ниже. </p><pre> <code data-lang="html"> <div> <div role = "progressbar" aria-valuenow = "40" aria-valuemin = "0" aria-valuemax = "100"> <span> Выполнено на 40% (успешно) </span> </div> </div> <div> <div role = "progressbar" aria-valuenow = "20" aria-valuemin = "0" aria-valuemax = "100"> <span> Готово на 20% </span> </div> </div> <div> <div role = "progressbar" aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100"> <span> Готово на 60% (предупреждение) </span> </div> </div> <div> <div role = "progressbar" aria-valuenow = "80" aria-valuemin = "0" aria-valuemax = "100"> <span> Выполнено на 80% (опасность) </span> </div> </div> </code> </pre><h3><span class="ez-toc-section" id="%D0%90%D0%BD%D0%B8%D0%BC%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%BD%D1%8B%D0%B5"></span> Анимированные <span class="ez-toc-section-end"></span></h3> <p> Добавить <code>.active </code>–<code> .progress-bar-striped </code> для анимации полос справа налево. Недоступно в IE9 и ниже. </p><pre> <code data-lang="html"> <div> <div role = "progressbar" aria-valuenow = "45" aria-valuemin = "0" aria-valuemax = "100"> <span> Выполнено на 45% </span> </div> </div> </code> </pre><h3><span class="ez-toc-section" id="Stacked"></span> Stacked <span class="ez-toc-section-end"></span></h3> <p> Поместите несколько полос в один <code> .progress </code>, чтобы сложить их. </p> <p> 35% Завершено (успешно) </p> <p> 20% Завершено (предупреждение) </p> <p> 10% Завершено (опасность) </p><pre> <code data-lang="html"> <div> <div> <span> Выполнено на 35% (успешно) </span> </div> <div> <span> Готово на 20% (предупреждение) </span> </div> <div> <span> Выполнено на 10% (опасность) </span> </div> </div> </code> </pre><p> Стили абстрактных объектов для создания различных типов компонентов (например, комментариев в блогах, твитов и т. д.), которые содержат выровненное по левому или правому краю изображение рядом с текстовым содержимым.</p> <p> Мультимедиа по умолчанию отображает мультимедийный объект (изображения, видео, аудио) слева или справа от блока содержимого. </p><pre> <code data-lang="html"> <div> <div> <a href="#"> <noscript><img class="lazy lazy-hidden" src = "..." alt = "..."></noscript><img class="lazyload lazy lazy-hidden" src = "..." alt = "..."><noscript><img src = "..." alt = "..."></noscript> </a> </div> <div> <h5><span class="ez-toc-section" id="%D0%9C%D0%B5%D0%B4%D0%B8%D0%B0-%D0%B7%D0%B0%D0%B3%D0%BE%D0%BB%D0%BE%D0%B2%D0%BE%D0%BA"></span> Медиа-заголовок <span class="ez-toc-section-end"></span></h5> ... </div> </div> </code> </pre><p> Классы <code> .pull-left </code> и <code> .pull-right </code> также существуют и ранее использовались как часть медиа-компонента, но не рекомендуются для этого использования с версии v3.3.0. Они примерно эквивалентны <code> .media-left </code> и <code> .media-right </code>, за исключением того, что <code> .media-right </code> следует помещать после <code> .media-body </code> в html. </p> <p> Изображения или другой носитель можно выровнять по верхнему, среднему или нижнему краю. По умолчанию выравнивается по верхнему краю. </p><pre> <code data-lang="html"> <div> <div> <a href="#"> <noscript><img class="lazy lazy-hidden" src = "..." alt = "..."></noscript><img class="lazyload lazy lazy-hidden" src = "..." alt = "..."><noscript><img src = "..." alt = "..."></noscript> </a> </div> <div> <h5><span class="ez-toc-section" id="%D0%9C%D0%B5%D0%B4%D0%B8%D0%B0_%D1%81_%D0%B2%D1%8B%D1%80%D0%B0%D0%B2%D0%BD%D0%B8%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5%D0%BC_%D0%BF%D0%BE_%D1%86%D0%B5%D0%BD%D1%82%D1%80%D1%83"></span> Медиа с выравниванием по центру <span class="ez-toc-section-end"></span></h5> ... </div> </div> </code> </pre><p> С небольшой дополнительной разметкой вы можете использовать медиа внутри списка (полезно для цепочек комментариев или списков статей). </p><pre> <code data-lang="html"> <ul> <li> <div> <a href="#"> <noscript><img class="lazy lazy-hidden" src = "..." alt = "..."></noscript><img class="lazyload lazy lazy-hidden" src = "..." alt = "..."><noscript><img src = "..." alt = "..."></noscript> </a> </div> <div> <h5><span class="ez-toc-section" id="%D0%9C%D0%B5%D0%B4%D0%B8%D0%B0-%D0%B7%D0%B0%D0%B3%D0%BE%D0%BB%D0%BE%D0%B2%D0%BE%D0%BA-2"></span> Медиа-заголовок <span class="ez-toc-section-end"></span></h5> ... </div> </li> </ul> </code> </pre><p> Группы списков - это гибкий и мощный компонент для отображения не только простых списков элементов, но и сложных с настраиваемым содержимым.</p> <h3><span class="ez-toc-section" id="%D0%91%D0%B0%D0%B7%D0%BE%D0%B2%D1%8B%D0%B9_%D0%BF%D1%80%D0%B8%D0%BC%D0%B5%D1%80-4"></span> Базовый пример <span class="ez-toc-section-end"></span></h3> <p> Самая основная группа списков - это просто неупорядоченный список с элементами списка и соответствующими классами. Развивайте его, используя следующие параметры или свой собственный CSS по мере необходимости. </p> <ul> <li> Cras justo odio </li> <li> Dapibus ac facilisis in </li> <li> Morbi leo risus </li> <li> Porta ac Concectetur ac </li> <li> Вестибулум на Эросе </li> </ul><pre> <code data-lang="html"> <ul> <li> Cras justo odio </li> <li> Dapibus ac facilisis в </li> <li> Morbi leo risus </li> <li> Porta ac Concectetur AC </li> <li> Вестибулум на Эросе. </li> </ul> </code> </pre><h3><span class="ez-toc-section" id="%D0%97%D0%BD%D0%B0%D1%87%D0%BA%D0%B8"></span> Значки <span class="ez-toc-section-end"></span></h3> <p> Добавьте компонент значков к любому элементу группы списка, и он будет автоматически расположен справа.</p> <ul> <li> 14 Cras justo odio </li> <li> 2 Dapibus ac facilisis in </li> <li> 1 Morbi leo risus </li> </ul><pre> <code data-lang="html"> <ul> <li> <span> 14 </span> Cras Justo Odio </li> </ul> </code> </pre><h3><span class="ez-toc-section" id="%D0%A1%D0%B2%D1%8F%D0%B7%D0%B0%D0%BD%D0%BD%D1%8B%D0%B5_%D1%8D%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D1%8B"></span> Связанные элементы <span class="ez-toc-section-end"></span></h3> <p> Свяжите элементы группы списка, используя теги привязки вместо элементов списка (это также означает родительский <code> </p> <div> </code> вместо <code> </p> <ul> </code>). Нет необходимости в отдельных родителях для каждого элемента.</p><pre> <code data-lang="html"> <div> <a href="#"> Cras Justo Odio </a> <a href="#"> Dapibus ac facilisis в </a> <a href="#"> Morbi leo risus </a> <a href="#"> Porta ac Concectetur ac </a> <a href="#"> Вестибулум на эросе </a> </div> </code> </pre><h3><span class="ez-toc-section" id="%D0%AD%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D1%8B_%D0%BA%D0%BD%D0%BE%D0%BF%D0%BE%D0%BA"></span> Элементы кнопок <span class="ez-toc-section-end"></span></h3> <p> Элементы группы списка могут быть кнопками вместо элементов списка (это также означает родительский <code> </p> <div> </code> вместо <code> </p> <ul> </code>). Нет необходимости в отдельных родителях для каждого элемента.<strong> Не используйте здесь стандартные классы <code> .btn </code>. </strong> </p> <p> Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consctetur ac Vestibulum at eros </p><pre> <code data-lang="html"> <div> <button type = "button"> Cras justo odio </button> <button type = "button"> Dapibus ac facilisis в </button> <button type = "button"> Morbi leo risus </button> <button type = "button"> Порт для переменного тока </button> <button type = "button"> Вестибулум на эросе </button> </div> </code> </pre><h3><span class="ez-toc-section" id="%D0%9D%D0%B5%D0%B0%D0%BA%D1%82%D0%B8%D0%B2%D0%BD%D1%8B%D0%B5_%D1%8D%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D1%8B"></span> Неактивные элементы <span class="ez-toc-section-end"></span></h3> <p> Добавьте <code>.отключил </code> до <code> .list-group-item </code>, чтобы он стал серым, чтобы он выглядел отключенным. </p><pre> <code data-lang="html"> <div> <a href="#"> Cras Justo Odio </a> <a href="#"> Dapibus ac facilisis в </a> <a href="#"> Morbi leo risus </a> <a href="#"> Porta ac Concectetur ac </a> <a href="#"> Вестибулум на эросе </a> </div> </code> </pre><h3><span class="ez-toc-section" id="%D0%9A%D0%BE%D0%BD%D1%82%D0%B5%D0%BA%D1%81%D1%82%D0%BD%D1%8B%D0%B5_%D0%BA%D0%BB%D0%B0%D1%81%D1%81%D1%8B"></span> Контекстные классы <span class="ez-toc-section-end"></span></h3> <p> Используйте контекстные классы для стилизации элементов списка, по умолчанию или связанных.Также включает <code> .активное состояние </code>. </p> <ul> <li> Dapibus ac facilisis в </li> <li> Cras sit amet nibh libero </li> <li> Porta ac Concectetur ac </li> <li> Вестибулум на Эросе </li> </ul><pre> <code data-lang="html"> <ul> <li> Dapibus ac facilisis в </li> <li> Cras sit amet nibh libero </li> <li> Porta ac Concectetur AC </li> <li> Вестибулум на Эросе. </li> </ul> <div> <a href="#"> Dapibus ac facilisis в </a> <a href="#"> Cras sit amet nibh libero </a> <a href="#"> Porta ac Concectetur ac </a> <a href="#"> Вестибулум на эросе </a> </div> </code> </pre><h3><span class="ez-toc-section" id="%D0%9F%D0%BE%D0%BB%D1%8C%D0%B7%D0%BE%D0%B2%D0%B0%D1%82%D0%B5%D0%BB%D1%8C%D1%81%D0%BA%D0%BE%D0%B5_%D1%81%D0%BE%D0%B4%D0%B5%D1%80%D0%B6%D0%B8%D0%BC%D0%BE%D0%B5-2"></span> Пользовательское содержимое <span class="ez-toc-section-end"></span></h3> <p> Добавьте практически любой HTML-код внутри, даже для связанных групп списков, подобных приведенной ниже.</p><pre> <code data-lang="html"> <div> <a href="#"> <h5><span class="ez-toc-section" id="%D0%97%D0%B0%D0%B3%D0%BE%D0%BB%D0%BE%D0%B2%D0%BE%D0%BA_%D1%8D%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D0%B0_%D0%B3%D1%80%D1%83%D0%BF%D0%BF%D1%8B_%D1%81%D0%BF%D0%B8%D1%81%D0%BA%D0%B0"></span> Заголовок элемента группы списка <span class="ez-toc-section-end"></span></h5> <p> ... </p> </a> </div> </code> </pre><p> Хотя это не всегда необходимо, иногда вам нужно поместить DOM в коробку. В таких ситуациях попробуйте компонент панели. </p> <h3><span class="ez-toc-section" id="%D0%91%D0%B0%D0%B7%D0%BE%D0%B2%D1%8B%D0%B9_%D0%BF%D1%80%D0%B8%D0%BC%D0%B5%D1%80-5"></span> Базовый пример <span class="ez-toc-section-end"></span></h3> <p> По умолчанию все, что делает <code> .panel </code>, это применяет некоторую базовую границу и отступы для содержания некоторого содержимого. </p><pre> <code data-lang="html"> <div> <div> Пример базовой панели </div> </div> </code> </pre><h3><span class="ez-toc-section" id="%D0%9F%D0%B0%D0%BD%D0%B5%D0%BB%D1%8C_%D1%81_%D0%B7%D0%B0%D0%B3%D0%BE%D0%BB%D0%BE%D0%B2%D0%BA%D0%BE%D0%BC-2"></span> Панель с заголовком <span class="ez-toc-section-end"></span></h3> <p> С легкостью добавьте контейнер заголовка на свою панель с помощью <code>.панель-заголовок </code>. Вы также можете включить любые <code> </p> <h2> </h2> <p></code>–<code> </p> <h6> </h6> <p></code> с классом <code> .panel-title </code>, чтобы добавить предварительно стилизованный заголовок. Однако размеры шрифта <code> </p> <h2> </h2> <p></code> - <code> </p> <h6> </h6> <p></code> заменяются <code> .panel-heading </code>. </p> <p> Для правильной раскраски ссылок обязательно размещайте ссылки в заголовках в пределах <code> .panel-title </code>. </p> <p> Заголовок панели без названия </p> <p> Содержание панели </p> <p><h4><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BF%D0%B0%D0%BD%D0%B5%D0%BB%D0%B8"></span> Название панели <span class="ez-toc-section-end"></span></h4> </p> <p> Содержание панели </p><pre> <code data-lang="html"> <div> <div> Заголовок панели без заголовка </div> <div> Содержание панели </div> </div> <div> <div> <h4><span class="ez-toc-section" id="%D0%97%D0%B0%D0%B3%D0%BE%D0%BB%D0%BE%D0%B2%D0%BE%D0%BA_%D0%BF%D0%B0%D0%BD%D0%B5%D0%BB%D0%B8-2"></span> Заголовок панели <span class="ez-toc-section-end"></span></h4> </div> <div> Содержание панели </div> </div> </code> </pre><p> Перенести кнопки или дополнительный текст в <code>.нижний колонтитул </code>. Обратите внимание, что нижние колонтитулы <strong> панели </strong> не наследуют цвета и границы при использовании контекстных вариаций, поскольку они не предназначены для размещения на переднем плане. </p><pre> <code data-lang="html"> <div> <div> Содержание панели </div> <div> Нижний колонтитул панели </div> </div> </code> </pre><h3><span class="ez-toc-section" id="%D0%9A%D0%BE%D0%BD%D1%82%D0%B5%D0%BA%D1%81%D1%82%D0%BD%D1%8B%D0%B5_%D0%B0%D0%BB%D1%8C%D1%82%D0%B5%D1%80%D0%BD%D0%B0%D1%82%D0%B8%D0%B2%D1%8B-2"></span> Контекстные альтернативы <span class="ez-toc-section-end"></span></h3> <p> Как и другие компоненты, легко сделать панель более значимой для конкретного контекста, добавив любой из классов контекстного состояния. </p> <p><h4><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BF%D0%B0%D0%BD%D0%B5%D0%BB%D0%B8-2"></span> Название панели <span class="ez-toc-section-end"></span></h4> </p> <p> Содержание панели </p> <p><h4><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BF%D0%B0%D0%BD%D0%B5%D0%BB%D0%B8-3"></span> Название панели <span class="ez-toc-section-end"></span></h4> </p> <p> Содержание панели </p> <p><h4><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BF%D0%B0%D0%BD%D0%B5%D0%BB%D0%B8-4"></span> Название панели <span class="ez-toc-section-end"></span></h4> </p> <p> Содержание панели </p> <p><h4><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BF%D0%B0%D0%BD%D0%B5%D0%BB%D0%B8-5"></span> Название панели <span class="ez-toc-section-end"></span></h4> </p> <p> Содержание панели </p> <p><h4><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BF%D0%B0%D0%BD%D0%B5%D0%BB%D0%B8-6"></span> Название панели <span class="ez-toc-section-end"></span></h4> </p> </p><pre> <code data-lang="html"> <div>... </div> <div> ... </div> <div> ... </div> <div> ... </div> <div> ... </div> </code> </pre><h3><span class="ez-toc-section" id="%D0%A1_%D1%82%D0%B0%D0%B1%D0%BB%D0%B8%D1%86%D0%B0%D0%BC%D0%B8"></span> С таблицами <span class="ez-toc-section-end"></span></h3> <p> Добавьте любые <code> .table </code> без полей внутри панели для создания бесшовного дизайна. Если есть <code> .panel-body </code>, мы добавляем дополнительную границу в верхнюю часть таблицы для разделения. </p> <p> Заголовок панели </p> <p> Здесь некое содержимое панели по умолчанию. Nulla vitae elit libero, pharetra augue. Aenean lacinia bibendum nulla sed Conctetur.Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies Vehicula ut id elit. </p> <table> <thead> <tr> <th> # </th> <th> Имя </th> <th> Фамилия </th> <th> Имя пользователя </th> </tr> </thead> <tbody> <tr> <th scope="row"> 1 </th> <td> Марк </td> <td> Отто </td> <td> @mdo </td> </tr> <th>6 </td> </td> </td> </tr> <th>6 </td> </td> </td> </tr> <th>6 </td> </tr> <tr> <th scope="row"> 3 </th> <td> Ларри </td> <td> Птица </td> <td> @twitter </td> </tr> </tbody> </table><pre> <code data-lang="html"> <div> <! - Содержимое панели по умолчанию -> <div> Заголовок панели </div> <div> <p>... </p> </div> <! - Таблица -> <таблица> ... </table> </div> </code> </pre><p> Если тело панели отсутствует, компонент перемещается из заголовка панели в таблицу без прерывания. </p> <p> Заголовок панели </p> <table> <thead> <tr> <th> # </th> <th> Имя </th> <th> Фамилия </th> <th> Имя пользователя </th> </tr> </thead> <tbody> <tr> <th scope="row"> 1 </th> <td> Марк </td> <td> Otto </td> <td>1651 </td> </td> </td> </td> <td>65 </td> </td> </td> <td> @fat </td> </tr> <tr> <th scope="row"> 3 </th> <td> Ларри </td> <td> Птица </td> <td> @twitter </td> </tr> </tbody> </table><pre> <code data-lang="html"> <div> <! - Содержимое панели по умолчанию -> <div> Заголовок панели </div> <! - Таблица -> <таблица> ... </table> </div> </code> </pre><h3><span class="ez-toc-section" id="%D0%A1_%D0%B3%D1%80%D1%83%D0%BF%D0%BF%D0%B0%D0%BC%D0%B8_%D1%81%D0%BF%D0%B8%D1%81%D0%BA%D0%BE%D0%B2"></span> С группами списков <span class="ez-toc-section-end"></span></h3> <p> Простое добавление полноразмерных групп списков в любую панель. </p> <p> Заголовок панели </p> <p> Здесь некое содержимое панели по умолчанию. Nulla vitae elit libero, pharetra augue. Aenean lacinia bibendum nulla sed Conctetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies Vehicula ut id elit. </p> <ul> <li> Cras justo odio </li> <li> Dapibus ac facilisis in </li> <li> Morbi leo risus </li> <li> Porta ac Concectetur ac </li> <li> Vestibulum at Eros </li> </ul><pre> <code data-lang="html"> <div> <! - Содержимое панели по умолчанию -> <div> Заголовок панели </div> <div> <p>... </p> </div> <! - Группа списка -> <ul> <li> Cras justo odio </li> <li> Dapibus ac facilisis в </li> <li> Morbi leo risus </li> <li> Porta ac Concectetur AC </li> <li> Вестибулум на Эросе. </li> </ul> </div> </code> </pre><p> Разрешить браузерам определять размеры видео или слайд-шоу на основе ширины содержащего их блока путем создания внутреннего соотношения, которое будет правильно масштабироваться на любом устройстве.</p> <p> Правила </p> <p> применяются непосредственно к элементам <code> <iframe> </code>, <code> <embed> </code>, <code> <video> </code> и <code> <object> </code>; при необходимости используйте явный класс-потомок <code> .embed-responseive-item </code>, если вы хотите согласовать стиль для других атрибутов. </p> <p> <strong> Pro-Tip! </strong> Вам не нужно включать <code> frameborder = "0" </code> в ваши <code> <iframe> </code> s, поскольку мы переопределяем это для вас. </p> <p> <iframe src="//www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen=""/> </iframe> </p><pre> <code data-lang="html"> <! - Соотношение сторон 16: 9 -> <div> <iframe src = "... "> </iframe> </div> <! - Соотношение сторон 4: 3 -> <div> <iframe src = "..."> </iframe> </div> </code> </pre><h3><span class="ez-toc-section" id="%D0%9B%D1%83%D0%BD%D0%BA%D0%B0_%D0%BF%D0%BE_%D1%83%D0%BC%D0%BE%D0%BB%D1%87%D0%B0%D0%BD%D0%B8%D1%8E"></span> Лунка по умолчанию <span class="ez-toc-section-end"></span></h3> <p> Используйте лунку как простой эффект для элемента, чтобы придать ему эффект вставки. </p><pre> <code data-lang="html"> <div> ... </div> </code> </pre><h3><span class="ez-toc-section" id="%D0%94%D0%BE%D0%BF%D0%BE%D0%BB%D0%BD%D0%B8%D1%82%D0%B5%D0%BB%D1%8C%D0%BD%D1%8B%D0%B5_%D0%BA%D0%BB%D0%B0%D1%81%D1%81%D1%8B"></span> Дополнительные классы <span class="ez-toc-section-end"></span></h3> <p> Управляйте заполнением и закругленными углами с двумя дополнительными классами модификаторов. </p> <p> Смотри, я в большом колодце! </p><pre> <code data-lang="html"> <div>... </div> </code> </pre><p> Смотри, я в маленьком колодце! </p><pre> <code data-lang="html"> <div> ... </div> </code> </pre><h2><span class="ez-toc-section" id="%D0%BA%D0%B0%D1%80%D1%82_%C2%B7_Bootstrap"></span> карт · Bootstrap <span class="ez-toc-section-end"></span></h2> <p> Карты </p> <p> Bootstrap предоставляют гибкий и расширяемый контейнер контента с множеством вариантов и опций. </p> <h3><span class="ez-toc-section" id="%D0%9E%D0%BA%D0%BE%D0%BB%D0%BE"></span> Около <span class="ez-toc-section-end"></span></h3> <p> Карта <strong> </strong> - это гибкий и расширяемый контейнер содержимого. Он включает в себя варианты верхних и нижних колонтитулов, широкий спектр содержимого, контекстные цвета фона и мощные параметры отображения.Если вы знакомы с Bootstrap 3, карточки заменяют наши старые панели, лунки и эскизы. Функциональность, аналогичная этим компонентам, доступна в виде классов-модификаторов для карточек. </p> <h3><span class="ez-toc-section" id="%D0%9F%D1%80%D0%B8%D0%BC%D0%B5%D1%80-13"></span> Пример <span class="ez-toc-section-end"></span></h3> <p> Карты </p> <p> построены с минимальным количеством разметки и стилей, но все же обеспечивают тонны контроля и настройки. Созданные с помощью flexbox, они легко выравниваются и хорошо сочетаются с другими компонентами Bootstrap. По умолчанию у них нет поля <code>, поля </code>, поэтому при необходимости используйте утилиты интервалов.</p> <p> Ниже приведен пример базовой карточки со смешанным содержимым и фиксированной шириной. У карточек нет фиксированной ширины для начала, поэтому они естественным образом заполняют всю ширину родительского элемента. Это легко настроить с помощью наших различных вариантов размеров. </p> <h5><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BA%D0%B0%D1%80%D1%82%D1%8B"></span> Название карты <span class="ez-toc-section-end"></span></h5> <p> Небольшой пример текста, который будет построен на названии карты и составляет основную часть содержимого карты. </p> <p> Иди куда-нибудь</p><pre> <code data-lang="html"> <div> <noscript><img class="lazy lazy-hidden" src = "..." alt = "Заголовок изображения карточки"></noscript><img class="lazyload lazy lazy-hidden" src = "..." alt = "Заголовок изображения карточки"><noscript><img src = "..." alt = "Заголовок изображения карточки"></noscript> <div> <h5><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BA%D0%B0%D1%80%D1%82%D0%BE%D1%87%D0%BA%D0%B8"></span> Название карточки <span class="ez-toc-section-end"></span></h5> <p> Небольшой пример текста, который должен основываться на названии карточки и составлять основную часть содержимого карточки.</p> <a href="#"> куда-нибудь </a> </div> </div> </code> </pre><h3><span class="ez-toc-section" id="%D0%A2%D0%B8%D0%BF%D1%8B_%D0%BA%D0%BE%D0%BD%D1%82%D0%B5%D0%BD%D1%82%D0%B0"></span> Типы контента <span class="ez-toc-section-end"></span></h3> <p> Карты </p> <p> поддерживают широкий спектр содержимого, включая изображения, текст, группы списков, ссылки и многое другое. Ниже приведены примеры того, что поддерживается. </p> <h4><span class="ez-toc-section" id="%D0%9A%D1%83%D0%B7%D0%BE%D0%B2"></span> Кузов <span class="ez-toc-section-end"></span></h4> <p> Строительным блоком карты является <code> .card-body </code>. Используйте его всякий раз, когда вам нужен раздел на карточке с мягкой подкладкой. </p> <p> Это текст в теле карты. </p><pre> <code data-lang="html"> <div> <div> Это текст в теле карты.</div> </div> </code> </pre><h4><span class="ez-toc-section" id="%D0%97%D0%B0%D0%B3%D0%BE%D0%BB%D0%BE%D0%B2%D0%BA%D0%B8_%D1%82%D0%B5%D0%BA%D1%81%D1%82_%D0%B8_%D1%81%D1%81%D1%8B%D0%BB%D0%BA%D0%B8"></span> Заголовки, текст и ссылки <span class="ez-toc-section-end"></span></h4> <p> Заголовки карточек используются путем добавления <code> .card-title </code> к тегу <code> <h *> </code>. Таким же образом ссылки добавляются и размещаются рядом друг с другом путем добавления <code> .card-link </code> к тегу <code> <a> </code>. </p> <p> Субтитры используются путем добавления <code> .card-subtitle </code> к тегу <code> <h *> </code>. Если <code> .card-title </code> и <code> .card-subtitle </code> элементы помещаются в <code>.card-body </code>, заголовок и подзаголовок карты хорошо выровнены. </p> <h5><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BA%D0%B0%D1%80%D1%82%D1%8B-2"></span> Название карты <span class="ez-toc-section-end"></span></h5> <h6><span class="ez-toc-section" id="%D0%9F%D0%BE%D0%B4%D0%B7%D0%B0%D0%B3%D0%BE%D0%BB%D0%BE%D0%B2%D0%BE%D0%BA_%D0%BA%D0%B0%D1%80%D1%82%D1%8B"></span> Подзаголовок карты <span class="ez-toc-section-end"></span></h6> <p> Небольшой пример текста, который будет построен на названии карты и составляет основную часть содержимого карты. </p> <p> Ссылка на карту<br /> Другая ссылка</p><pre> <code data-lang="html"> <div> <div> <h5><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BA%D0%B0%D1%80%D1%82%D0%BE%D1%87%D0%BA%D0%B8-2"></span> Название карточки <span class="ez-toc-section-end"></span></h5> <h6><span class="ez-toc-section" id="%D0%9F%D0%BE%D0%B4%D0%B7%D0%B0%D0%B3%D0%BE%D0%BB%D0%BE%D0%B2%D0%BE%D0%BA_%D0%BA%D0%B0%D1%80%D1%82%D0%BE%D1%87%D0%BA%D0%B8"></span> Подзаголовок карточки <span class="ez-toc-section-end"></span></h6> <p> Небольшой пример текста, который должен основываться на названии карточки и составлять основную часть содержимого карточки.</p> <a href="#"> Ссылка на карту </a> <a href="#"> Другая ссылка </a> </div> </div> </code> </pre><h4><span class="ez-toc-section" id="%D0%98%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D1%8F"></span> Изображения <span class="ez-toc-section-end"></span></h4> <p> <code> .card-img-top </code> помещает изображение в верхнюю часть карточки. С <code> .card-text </code>, текст может быть добавлен к карточке. Текст в пределах <code> .card-text </code> также можно стилизовать с помощью стандартных тегов HTML. </p> <p> Небольшой пример текста, который будет построен на названии карты и составляет основную часть содержимого карты.</p><pre> <code data-lang="html"> <div> <noscript><img class="lazy lazy-hidden" src = "..." alt = "Заголовок изображения карточки"></noscript><img class="lazyload lazy lazy-hidden" src = "..." alt = "Заголовок изображения карточки"><noscript><img src = "..." alt = "Заголовок изображения карточки"></noscript> <div> <p> Небольшой пример текста, который должен основываться на заголовке карточки и составлять основную часть содержимого карточки. </p> </div> </div> </code> </pre><h4><span class="ez-toc-section" id="%D0%93%D1%80%D1%83%D0%BF%D0%BF%D1%8B_%D1%81%D0%BF%D0%B8%D1%81%D0%BA%D0%BE%D0%B2"></span> Группы списков <span class="ez-toc-section-end"></span></h4> <p> Создайте списки содержимого на карточке с группой скрытого списка. </p> <ul> <li> Cras justo odio </li> <li> Dapibus ac facilisis in </li> <li> Вестибулум на Эросе </li> </ul><pre> <code data-lang="html"> <div> <ul> <li> Cras justo odio </li> <li> Dapibus ac facilisis в </li> <li> Вестибулум на Эросе. </li> </ul> </div> </code> </pre><ul> <li> Cras justo odio </li> <li> Dapibus ac facilisis in </li> <li> Вестибулум на Эросе </li> </ul><pre> <code data-lang="html"> <div> <div> Рекомендуемые </div> <ul> <li> Cras justo odio </li> <li> Dapibus ac facilisis в </li> <li> Вестибулум на Эросе. </li> </ul> </div> </code> </pre><h4><span class="ez-toc-section" id="%D0%9A%D1%83%D1%85%D0%BE%D0%BD%D0%BD%D0%B0%D1%8F_%D0%BC%D0%BE%D0%B9%D0%BA%D0%B0"></span> Кухонная мойка <span class="ez-toc-section-end"></span></h4> <p> Комбинируйте несколько типов контента, чтобы создать нужную вам карточку, или добавьте туда все.Ниже показаны стили изображений, блоки, стили текста и группа списков - все они заключены в карточку фиксированной ширины. </p> <h5><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BA%D0%B0%D1%80%D1%82%D1%8B-3"></span> Название карты <span class="ez-toc-section-end"></span></h5> <p> Небольшой пример текста, который будет построен на названии карты и составляет основную часть содержимого карты. </p> <ul> <li> Cras justo odio </li> <li> Dapibus ac facilisis in </li> <li> Вестибулум на Эросе </li> </ul><pre> <code data-lang="html"> <div> <noscript><img class="lazy lazy-hidden" src = "..." alt = "Заголовок изображения карточки"></noscript><img class="lazyload lazy lazy-hidden" src = "..." alt = "Заголовок изображения карточки"><noscript><img src = "..." alt = "Заголовок изображения карточки"></noscript> <div> <h5><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BA%D0%B0%D1%80%D1%82%D0%BE%D1%87%D0%BA%D0%B8-3"></span> Название карточки <span class="ez-toc-section-end"></span></h5> <p> Небольшой пример текста, который должен основываться на названии карточки и составлять основную часть содержимого карточки.</p> </div> <ul> <li> Cras justo odio </li> <li> Dapibus ac facilisis в </li> <li> Вестибулум на Эросе. </li> </ul> <div> <a href="#"> Ссылка на карту </a> <a href="#"> Другая ссылка </a> </div> </div> </code> </pre><h4><span class="ez-toc-section" id="%D0%92%D0%B5%D1%80%D1%85%D0%BD%D0%B8%D0%B9_%D0%B8_%D0%BD%D0%B8%D0%B6%D0%BD%D0%B8%D0%B9_%D0%BA%D0%BE%D0%BB%D0%BE%D0%BD%D1%82%D0%B8%D1%82%D1%83%D0%BB%D1%8B"></span> Верхний и нижний колонтитулы <span class="ez-toc-section-end"></span></h4> <p> Добавьте дополнительный верхний и / или нижний колонтитул в карточку. </p> <h5><span class="ez-toc-section" id="%D0%9E%D1%81%D0%BE%D0%B1%D1%8B%D0%B9_%D1%82%D0%B8%D1%82%D1%83%D0%BB"></span> Особый титул <span class="ez-toc-section-end"></span></h5> <p> С вспомогательным текстом ниже в качестве естественного перехода к дополнительному содержанию.</p> <p> Иди куда-нибудь</p><pre> <code data-lang="html"> <div> <div> Рекомендуемые </div> <div> <h5><span class="ez-toc-section" id="%D0%9E%D1%81%D0%BE%D0%B1%D1%8B%D0%B5_%D1%82%D0%B8%D1%82%D1%83%D0%BB%D1%8B"></span> Особые титулы <span class="ez-toc-section-end"></span></h5> <p> С вспомогательным текстом ниже в качестве естественного перехода к дополнительному содержанию. </p> <a href="#"> куда-нибудь </a> </div> </div> </code> </pre><p> Заголовки карточек можно стилизовать, добавив <code> .card-header </code> к <code> <h *> </code> элементам. </p> <h5><span class="ez-toc-section" id="%D0%9E%D1%81%D0%BE%D0%B1%D1%8B%D0%B9_%D1%82%D0%B8%D1%82%D1%83%D0%BB-2"></span> Особый титул <span class="ez-toc-section-end"></span></h5> <p> С вспомогательным текстом ниже в качестве естественного перехода к дополнительному содержанию.</p> <p> Иди куда-нибудь</p><pre> <code data-lang="html"> <div> <h5><span class="ez-toc-section" id="%D0%9B%D1%83%D1%87%D1%88%D0%B5%D0%B5"></span> Лучшее <span class="ez-toc-section-end"></span></h5> <div> <h5><span class="ez-toc-section" id="%D0%9E%D1%81%D0%BE%D0%B1%D1%8B%D0%B5_%D1%82%D0%B8%D1%82%D1%83%D0%BB%D1%8B-2"></span> Особые титулы <span class="ez-toc-section-end"></span></h5> <p> С вспомогательным текстом ниже в качестве естественного перехода к дополнительному содержанию. </p> <a href="#"> куда-нибудь </a> </div> </div> </code> </pre><blockquote> <p> Lorem ipsum dolor sit amet, conctetur adipiscing elit. Целое число посуере эрат анте. </p> </blockquote><pre> <code data-lang="html"> <div> <div> Цитировать </div> <div> <цитата> <p> Lorem ipsum dolor sit amet, conctetur adipiscing elit.Целое число - ставка анте. </p> <footer> Кто-то, известный в <cite title = "Source Title"> Source Title </cite> </footer> </blockquote> </div> </div> </code> </pre><h5><span class="ez-toc-section" id="%D0%9E%D1%81%D0%BE%D0%B1%D1%8B%D0%B9_%D1%82%D0%B8%D1%82%D1%83%D0%BB-3"></span> Особый титул <span class="ez-toc-section-end"></span></h5> <p> С вспомогательным текстом ниже в качестве естественного перехода к дополнительному содержанию. </p> <p> Иди куда-нибудь</p><pre> <code data-lang="html"> <div> <div> Рекомендуемые </div> <div> <h5><span class="ez-toc-section" id="%D0%9E%D1%81%D0%BE%D0%B1%D1%8B%D0%B5_%D1%82%D0%B8%D1%82%D1%83%D0%BB%D1%8B-3"></span> Особые титулы <span class="ez-toc-section-end"></span></h5> <p> С вспомогательным текстом ниже в качестве естественного перехода к дополнительному содержанию.</p> <a href="#"> куда-нибудь </a> </div> <div> 2 дня назад </div> </div> </code> </pre><h3><span class="ez-toc-section" id="%D0%9A%D0%B0%D0%BB%D0%B8%D0%B1%D1%80%D0%BE%D0%B2%D0%BA%D0%B0"></span> Калибровка <span class="ez-toc-section-end"></span></h3> <p> Карты не предполагают никакой определенной ширины <code> </code> для начала, поэтому они будут иметь ширину 100%, если не указано иное. Вы можете изменить это по мере необходимости с помощью настраиваемого CSS, классов сетки, миксинов Sass сетки или утилит. </p> <h4><span class="ez-toc-section" id="%D0%98%D1%81%D0%BF%D0%BE%D0%BB%D1%8C%D0%B7%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D1%80%D0%B0%D0%B7%D0%BC%D0%B5%D1%82%D0%BA%D0%B8_%D1%81%D0%B5%D1%82%D0%BA%D0%B8"></span> Использование разметки сетки <span class="ez-toc-section-end"></span></h4> <p> Используя сетку, расположите карточки по столбцам и рядам по мере необходимости. </p> <h5><span class="ez-toc-section" id="%D0%9E%D1%81%D0%BE%D0%B1%D1%8B%D0%B9_%D1%82%D0%B8%D1%82%D1%83%D0%BB-4"></span> Особый титул <span class="ez-toc-section-end"></span></h5> <p> С вспомогательным текстом ниже в качестве естественного перехода к дополнительному содержанию.</p> <p> Иди куда-нибудь</p> <h5><span class="ez-toc-section" id="%D0%9E%D1%81%D0%BE%D0%B1%D1%8B%D0%B9_%D1%82%D0%B8%D1%82%D1%83%D0%BB-5"></span> Особый титул <span class="ez-toc-section-end"></span></h5> <p> С вспомогательным текстом ниже в качестве естественного перехода к дополнительному содержанию. </p> <p> Иди куда-нибудь</p><pre> <code data-lang="html"> <div> <div> <div> <div> <h5><span class="ez-toc-section" id="%D0%9E%D1%81%D0%BE%D0%B1%D1%8B%D0%B5_%D1%82%D0%B8%D1%82%D1%83%D0%BB%D1%8B-4"></span> Особые титулы <span class="ez-toc-section-end"></span></h5> <p> С вспомогательным текстом ниже в качестве естественного перехода к дополнительному содержанию. </p> <a href="#"> куда-нибудь </a> </div> </div> </div> <div> <div> <div> <h5><span class="ez-toc-section" id="%D0%9E%D1%81%D0%BE%D0%B1%D1%8B%D0%B5_%D1%82%D0%B8%D1%82%D1%83%D0%BB%D1%8B-5"></span> Особые титулы <span class="ez-toc-section-end"></span></h5> <p> С вспомогательным текстом ниже в качестве естественного перехода к дополнительному содержанию.</p> <a href="#"> куда-нибудь </a> </div> </div> </div> </div> </code> </pre><h4><span class="ez-toc-section" id="%D0%98%D1%81%D0%BF%D0%BE%D0%BB%D1%8C%D0%B7%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D1%83%D1%82%D0%B8%D0%BB%D0%B8%D1%82"></span> Использование утилит <span class="ez-toc-section-end"></span></h4> <p> Воспользуйтесь нашей горсткой доступных утилит для изменения размера, чтобы быстро установить ширину карты. </p> <h5><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BA%D0%B0%D1%80%D1%82%D1%8B-4"></span> Название карты <span class="ez-toc-section-end"></span></h5> <p> С вспомогательным текстом ниже в качестве естественного перехода к дополнительному содержанию. </p> <p> Кнопка</p> <h5><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BA%D0%B0%D1%80%D1%82%D1%8B-5"></span> Название карты <span class="ez-toc-section-end"></span></h5> <p> С вспомогательным текстом ниже в качестве естественного перехода к дополнительному содержанию.</p> <p> Кнопка</p><pre> <code data-lang="html"> <div> <div> <h5><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BA%D0%B0%D1%80%D1%82%D0%BE%D1%87%D0%BA%D0%B8-4"></span> Название карточки <span class="ez-toc-section-end"></span></h5> <p> С вспомогательным текстом ниже в качестве естественного перехода к дополнительному содержанию. </p> <a href="#"> Кнопка </a> </div> </div> <div> <div> <h5><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BA%D0%B0%D1%80%D1%82%D0%BE%D1%87%D0%BA%D0%B8-5"></span> Название карточки <span class="ez-toc-section-end"></span></h5> <p> С вспомогательным текстом ниже в качестве естественного перехода к дополнительному содержанию. </p> <a href="#"> Кнопка </a> </div> </div> </code> </pre><h4><span class="ez-toc-section" id="%D0%98%D1%81%D0%BF%D0%BE%D0%BB%D1%8C%D0%B7%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D1%81%D0%BE%D0%B1%D1%81%D1%82%D0%B2%D0%B5%D0%BD%D0%BD%D0%BE%D0%B3%D0%BE_CSS"></span> Использование собственного CSS <span class="ez-toc-section-end"></span></h4> <p> Используйте собственный CSS в таблицах стилей или как встроенные стили для установки ширины.</p> <h5><span class="ez-toc-section" id="%D0%9E%D1%81%D0%BE%D0%B1%D1%8B%D0%B9_%D1%82%D0%B8%D1%82%D1%83%D0%BB-6"></span> Особый титул <span class="ez-toc-section-end"></span></h5> <p> С вспомогательным текстом ниже в качестве естественного перехода к дополнительному содержанию. </p> <p> Иди куда-нибудь</p><pre> <code data-lang="html"> <div> <div> <h5><span class="ez-toc-section" id="%D0%9E%D1%81%D0%BE%D0%B1%D1%8B%D0%B5_%D1%82%D0%B8%D1%82%D1%83%D0%BB%D1%8B-6"></span> Особые титулы <span class="ez-toc-section-end"></span></h5> <p> С вспомогательным текстом ниже в качестве естественного перехода к дополнительному содержанию. </p> <a href="#"> куда-нибудь </a> </div> </div> </code> </pre><h3><span class="ez-toc-section" id="%D0%92%D1%8B%D1%80%D0%B0%D0%B2%D0%BD%D0%B8%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D1%82%D0%B5%D0%BA%D1%81%D1%82%D0%B0"></span> Выравнивание текста <span class="ez-toc-section-end"></span></h3> <p> Вы можете быстро изменить выравнивание текста любой карточки - целиком или в отдельных частях - с помощью наших классов выравнивания текста.</p> <h5><span class="ez-toc-section" id="%D0%9E%D1%81%D0%BE%D0%B1%D1%8B%D0%B9_%D1%82%D0%B8%D1%82%D1%83%D0%BB-7"></span> Особый титул <span class="ez-toc-section-end"></span></h5> <p> С вспомогательным текстом ниже в качестве естественного перехода к дополнительному содержанию. </p> <p> Иди куда-нибудь</p> <h5><span class="ez-toc-section" id="%D0%9E%D1%81%D0%BE%D0%B1%D1%8B%D0%B9_%D1%82%D0%B8%D1%82%D1%83%D0%BB-8"></span> Особый титул <span class="ez-toc-section-end"></span></h5> <p> С вспомогательным текстом ниже в качестве естественного перехода к дополнительному содержанию. </p> <p> Иди куда-нибудь</p> <h5><span class="ez-toc-section" id="%D0%9E%D1%81%D0%BE%D0%B1%D1%8B%D0%B9_%D1%82%D0%B8%D1%82%D1%83%D0%BB-9"></span> Особый титул <span class="ez-toc-section-end"></span></h5> <p> С вспомогательным текстом ниже в качестве естественного перехода к дополнительному содержанию. </p> <p> Иди куда-нибудь</p><pre> <code data-lang="html"> <div> <div> <h5><span class="ez-toc-section" id="%D0%9E%D1%81%D0%BE%D0%B1%D1%8B%D0%B5_%D1%82%D0%B8%D1%82%D1%83%D0%BB%D1%8B-7"></span> Особые титулы <span class="ez-toc-section-end"></span></h5> <p> С вспомогательным текстом ниже в качестве естественного перехода к дополнительному содержанию.</p> <a href="#"> куда-нибудь </a> </div> </div> <div> <div> <h5><span class="ez-toc-section" id="%D0%9E%D1%81%D0%BE%D0%B1%D1%8B%D0%B5_%D1%82%D0%B8%D1%82%D1%83%D0%BB%D1%8B-8"></span> Особые титулы <span class="ez-toc-section-end"></span></h5> <p> С вспомогательным текстом ниже в качестве естественного перехода к дополнительному содержанию. </p> <a href="#"> куда-нибудь </a> </div> </div> <div> <div> <h5><span class="ez-toc-section" id="%D0%9E%D1%81%D0%BE%D0%B1%D1%8B%D0%B5_%D1%82%D0%B8%D1%82%D1%83%D0%BB%D1%8B-9"></span> Особые титулы <span class="ez-toc-section-end"></span></h5> <p> С вспомогательным текстом ниже в качестве естественного перехода к дополнительному содержанию. </p> <a href="#"> куда-нибудь </a> </div> </div> </code> </pre><h3><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B2%D0%B8%D0%B3%D0%B0%D1%86%D0%B8%D1%8F"></span> Навигация <span class="ez-toc-section-end"></span></h3> <p> Добавьте навигацию в заголовок (или блок) карточки с помощью компонентов навигации Bootstrap.</p> <h5><span class="ez-toc-section" id="%D0%9E%D1%81%D0%BE%D0%B1%D1%8B%D0%B9_%D1%82%D0%B8%D1%82%D1%83%D0%BB-10"></span> Особый титул <span class="ez-toc-section-end"></span></h5> <p> С вспомогательным текстом ниже в качестве естественного перехода к дополнительному содержанию. </p> <p> Иди куда-нибудь</p><pre> <code data-lang="html"> <div> <div> <ul> <li> <a href="#"> Активно </a> </li> <li> <a href="#"> Ссылка </a> </li> <li> <a href="#"> Отключено </a> </li> </ul> </div> <div> <h5><span class="ez-toc-section" id="%D0%9E%D1%81%D0%BE%D0%B1%D1%8B%D0%B5_%D1%82%D0%B8%D1%82%D1%83%D0%BB%D1%8B-10"></span> Особые титулы <span class="ez-toc-section-end"></span></h5> <p> С вспомогательным текстом ниже в качестве естественного перехода к дополнительному содержанию.</p> <a href="#"> куда-нибудь </a> </div> </div> </code> </pre><h5><span class="ez-toc-section" id="%D0%9E%D1%81%D0%BE%D0%B1%D1%8B%D0%B9_%D1%82%D0%B8%D1%82%D1%83%D0%BB-11"></span> Особый титул <span class="ez-toc-section-end"></span></h5> <p> С вспомогательным текстом ниже в качестве естественного перехода к дополнительному содержанию. </p> <p> Иди куда-нибудь</p><pre> <code data-lang="html"> <div> <div> <ul> <li> <a href="#"> Активно </a> </li> <li> <a href="#"> Ссылка </a> </li> <li> <a href="#"> Отключено </a> </li> </ul> </div> <div> <h5><span class="ez-toc-section" id="%D0%9E%D1%81%D0%BE%D0%B1%D1%8B%D0%B5_%D1%82%D0%B8%D1%82%D1%83%D0%BB%D1%8B-11"></span> Особые титулы <span class="ez-toc-section-end"></span></h5> <p> С вспомогательным текстом ниже в качестве естественного перехода к дополнительному содержанию.</p> <a href="#"> куда-нибудь </a> </div> </div> </code> </pre><h3><span class="ez-toc-section" id="%D0%98%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D1%8F-2"></span> Изображения <span class="ez-toc-section-end"></span></h3> <p> Карты </p> <p> включают несколько опций для работы с изображениями. Выберите добавление «колпачков изображений» на любом конце карточки, наложение изображений с содержимым карточки или просто встраивание изображения в карточку. </p> <h4><span class="ez-toc-section" id="%D0%98%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D1%8F_%D1%88%D0%B0%D0%BF%D0%BA%D0%B8"></span> Изображения шапки <span class="ez-toc-section-end"></span></h4> <p> Подобно верхним и нижним колонтитулам, карточки могут включать верхние и нижние «колонтитулы» - изображения вверху или внизу карточки. </p> <h5><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BA%D0%B0%D1%80%D1%82%D1%8B-6"></span> Название карты <span class="ez-toc-section-end"></span></h5> <p> Это более широкая карточка с вспомогательным текстом ниже в качестве естественного перехода к дополнительному содержанию.Этот контент немного длиннее. </p> <p> <small> Последнее обновление 3 мин. Назад </small> </p> <h5><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BA%D0%B0%D1%80%D1%82%D1%8B-7"></span> Название карты <span class="ez-toc-section-end"></span></h5> <p> Это более широкая карточка с вспомогательным текстом ниже в качестве естественного перехода к дополнительному содержанию. Этот контент немного длиннее. </p> <p> <small> Последнее обновление 3 мин. Назад </small> </p><pre> <code data-lang="html"> <div> <noscript><img class="lazy lazy-hidden" src = "..." alt = "Заголовок изображения карточки"></noscript><img class="lazyload lazy lazy-hidden" src = "..." alt = "Заголовок изображения карточки"><noscript><img src = "..." alt = "Заголовок изображения карточки"></noscript> <div> <h5><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BA%D0%B0%D1%80%D1%82%D0%BE%D1%87%D0%BA%D0%B8-6"></span> Название карточки <span class="ez-toc-section-end"></span></h5> <p> Это более широкая карточка с вспомогательным текстом ниже, который естественным образом ведет к дополнительному содержанию.Этот контент немного длиннее. </p> <p> <small> Последнее обновление 3 мин. назад </small> </p> </div> </div> <div> <div> <h5><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BA%D0%B0%D1%80%D1%82%D0%BE%D1%87%D0%BA%D0%B8-7"></span> Название карточки <span class="ez-toc-section-end"></span></h5> <p> Это более широкая карточка с вспомогательным текстом ниже, который естественным образом ведет к дополнительному содержанию. Этот контент немного длиннее. </p> <p> <small> Последнее обновление 3 мин. назад </small> </p> </div> <noscript><img class="lazy lazy-hidden" src = "..." alt = "Заголовок изображения карточки"></noscript><img class="lazyload lazy lazy-hidden" src = "..." alt = "Заголовок изображения карточки"><noscript><img src = "..." alt = "Заголовок изображения карточки"></noscript> </div> </code> </pre><h4><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%BB%D0%BE%D0%B6%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B8%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D0%B9"></span> Наложение изображений <span class="ez-toc-section-end"></span></h4> <p> Превратите изображение в фон карты и наложите на нее текст.В зависимости от изображения вам могут потребоваться дополнительные стили или утилиты, а могут и не потребоваться. </p> <h5><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BA%D0%B0%D1%80%D1%82%D1%8B-8"></span> Название карты <span class="ez-toc-section-end"></span></h5> <p> Это более широкая карточка с вспомогательным текстом ниже в качестве естественного перехода к дополнительному содержанию. Этот контент немного длиннее. </p> <p> Последнее обновление 3 мин. Назад </p><pre> <code data-lang="html"> <div> <noscript><img class="lazy lazy-hidden" src = "..." alt = "Изображение карточки"></noscript><img class="lazyload lazy lazy-hidden" src = "..." alt = "Изображение карточки"><noscript><img src = "..." alt = "Изображение карточки"></noscript> <div> <h5><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BA%D0%B0%D1%80%D1%82%D0%BE%D1%87%D0%BA%D0%B8-8"></span> Название карточки <span class="ez-toc-section-end"></span></h5> <p> Это более широкая карточка с вспомогательным текстом ниже, который естественным образом ведет к дополнительному содержанию.Этот контент немного длиннее. </p> <p> Последнее обновление 3 мин. назад </p> </div> </div> </code> </pre><h3><span class="ez-toc-section" id="%D0%A1%D1%82%D0%B8%D0%BB%D0%B8_%D0%BA%D0%B0%D1%80%D1%82"></span> Стили карт <span class="ez-toc-section-end"></span></h3> <p> Карты </p> <p> содержат различные параметры для настройки фона, границ и цвета. </p> <h4><span class="ez-toc-section" id="%D0%A4%D0%BE%D0%BD_%D0%B8_%D1%86%D0%B2%D0%B5%D1%82"></span> Фон и цвет <span class="ez-toc-section-end"></span></h4> <p> Используйте текстовые и фоновые утилиты, чтобы изменить внешний вид карты. </p> <h5><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BE%D1%81%D0%BD%D0%BE%D0%B2%D0%BD%D0%BE%D0%B9_%D0%BA%D0%B0%D1%80%D1%82%D1%8B"></span> Название основной карты <span class="ez-toc-section-end"></span></h5> <p> Небольшой пример текста, который будет построен на названии карты и составляет основную часть содержимого карты.</p> <h5><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%B4%D0%BE%D0%BF%D0%BE%D0%BB%D0%BD%D0%B8%D1%82%D0%B5%D0%BB%D1%8C%D0%BD%D0%BE%D0%B9_%D0%BA%D0%B0%D1%80%D1%82%D1%8B"></span> Название дополнительной карты <span class="ez-toc-section-end"></span></h5> <p> Небольшой пример текста, который будет построен на названии карты и составляет основную часть содержимого карты. </p> <h5><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BA%D0%B0%D1%80%D1%82%D1%8B_%D1%83%D1%81%D0%BF%D0%B5%D1%85%D0%B0"></span> Название карты успеха <span class="ez-toc-section-end"></span></h5> <p> Небольшой пример текста, который будет построен на названии карты и составляет основную часть содержимого карты. </p> <h5><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BA%D0%B0%D1%80%D1%82%D1%8B_%D0%BE%D0%BF%D0%B0%D1%81%D0%BD%D0%BE%D1%81%D1%82%D0%B8"></span> Название карты опасности <span class="ez-toc-section-end"></span></h5> <p> Небольшой пример текста, который будет построен на названии карты и составляет основную часть содержимого карты. </p> <h5><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BF%D1%80%D0%B5%D0%B4%D1%83%D0%BF%D1%80%D0%B5%D0%B6%D0%B4%D0%B0%D1%8E%D1%89%D0%B5%D0%B9_%D0%BA%D0%B0%D1%80%D1%82%D0%BE%D1%87%D0%BA%D0%B8"></span> Название предупреждающей карточки <span class="ez-toc-section-end"></span></h5> <p> Небольшой пример текста, который будет построен на названии карты и составляет основную часть содержимого карты.</p> <h5><span class="ez-toc-section" id="%D0%97%D0%B0%D0%B3%D0%BE%D0%BB%D0%BE%D0%B2%D0%BE%D0%BA_%D0%B8%D0%BD%D1%84%D0%BE%D0%BA%D0%B0%D1%80%D1%82%D1%8B"></span> Заголовок инфокарты <span class="ez-toc-section-end"></span></h5> <p> Небольшой пример текста, который будет построен на названии карты и составляет основную часть содержимого карты. </p> <h5><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D1%81%D0%B2%D0%B5%D1%82%D0%BE%D0%B2%D0%BE%D0%B9_%D0%BA%D0%B0%D1%80%D1%82%D1%8B"></span> Название световой карты <span class="ez-toc-section-end"></span></h5> <p> Небольшой пример текста, который будет построен на названии карты и составляет основную часть содержимого карты. </p> <h5><span class="ez-toc-section" id="%D0%97%D0%B0%D0%B3%D0%BE%D0%BB%D0%BE%D0%B2%D0%BE%D0%BA_%D1%82%D0%B5%D0%BC%D0%BD%D0%BE%D0%B9_%D0%BA%D0%B0%D1%80%D1%82%D1%8B"></span> Заголовок темной карты <span class="ez-toc-section-end"></span></h5> <p> Небольшой пример текста, который будет построен на названии карты и составляет основную часть содержимого карты. </p><pre> <code data-lang="html"> <div> <div> Заголовок </div> <div> <h5><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BE%D1%81%D0%BD%D0%BE%D0%B2%D0%BD%D0%BE%D0%B9_%D0%BA%D0%B0%D1%80%D1%82%D0%BE%D1%87%D0%BA%D0%B8"></span> Название основной карточки <span class="ez-toc-section-end"></span></h5> <p> Небольшой пример текста, который должен основываться на названии карточки и составлять основную часть содержимого карточки.</p> </div> </div> <div> <div> Заголовок </div> <div> <h5><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%B4%D0%BE%D0%BF%D0%BE%D0%BB%D0%BD%D0%B8%D1%82%D0%B5%D0%BB%D1%8C%D0%BD%D0%BE%D0%B9_%D0%BA%D0%B0%D1%80%D1%82%D0%BE%D1%87%D0%BA%D0%B8"></span> Название дополнительной карточки <span class="ez-toc-section-end"></span></h5> <p> Небольшой пример текста, который должен основываться на заголовке карточки и составлять основную часть содержимого карточки. </p> </div> </div> <div> <div> Заголовок </div> <div> <h5><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BA%D0%B0%D1%80%D1%82%D0%BE%D1%87%D0%BA%D0%B8_%D1%83%D1%81%D0%BF%D0%B5%D1%85%D0%B0"></span> Название карточки успеха <span class="ez-toc-section-end"></span></h5> <p> Небольшой пример текста, который должен основываться на заголовке карточки и составлять основную часть содержимого карточки. </p> </div> </div> <div> <div> Заголовок </div> <div> <h5><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BA%D0%B0%D1%80%D1%82%D1%8B_%D0%BE%D0%BF%D0%B0%D1%81%D0%BD%D0%BE%D1%81%D1%82%D0%B8-2"></span> Название карты опасности <span class="ez-toc-section-end"></span></h5> <p> Небольшой пример текста, который должен основываться на названии карточки и составлять основную часть содержимого карточки.</p> </div> </div> <div> <div> Заголовок </div> <div> <h5><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BA%D0%B0%D1%80%D1%82%D0%BE%D1%87%D0%BA%D0%B8_%D1%81_%D0%BF%D1%80%D0%B5%D0%B4%D1%83%D0%BF%D1%80%D0%B5%D0%B6%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5%D0%BC"></span> Название карточки с предупреждением <span class="ez-toc-section-end"></span></h5> <p> Небольшой пример текста, который должен основываться на заголовке карточки и составлять основную часть содержимого карточки. </p> </div> </div> <div> <div> Заголовок </div> <div> <h5><span class="ez-toc-section" id="%D0%97%D0%B0%D0%B3%D0%BE%D0%BB%D0%BE%D0%B2%D0%BE%D0%BA_%D0%B8%D0%BD%D1%84%D0%BE%D1%80%D0%BC%D0%B0%D1%86%D0%B8%D0%BE%D0%BD%D0%BD%D0%BE%D0%B9_%D0%BA%D0%B0%D1%80%D1%82%D0%BE%D1%87%D0%BA%D0%B8"></span> Заголовок информационной карточки <span class="ez-toc-section-end"></span></h5> <p> Небольшой пример текста, который должен основываться на заголовке карточки и составлять основную часть содержимого карточки. </p> </div> </div> <div> <div> Заголовок </div> <div> <h5><span class="ez-toc-section" id="%D0%A1%D0%B2%D0%B5%D1%82%D0%BB%D1%8B%D0%B9_%D0%B7%D0%B0%D0%B3%D0%BE%D0%BB%D0%BE%D0%B2%D0%BE%D0%BA_%D0%BA%D0%B0%D1%80%D1%82%D0%BE%D1%87%D0%BA%D0%B8"></span> Светлый заголовок карточки <span class="ez-toc-section-end"></span></h5> <p> Небольшой пример текста, который должен основываться на названии карточки и составлять основную часть содержимого карточки.</p> </div> </div> <div> <div> Заголовок </div> <div> <h5><span class="ez-toc-section" id="%D0%97%D0%B0%D0%B3%D0%BE%D0%BB%D0%BE%D0%B2%D0%BE%D0%BA_%D1%82%D0%B5%D0%BC%D0%BD%D0%BE%D0%B9_%D0%BA%D0%B0%D1%80%D1%82%D0%BE%D1%87%D0%BA%D0%B8"></span> Заголовок темной карточки <span class="ez-toc-section-end"></span></h5> <p> Небольшой пример текста, который должен основываться на заголовке карточки и составлять основную часть содержимого карточки. </p> </div> </div> </code> </pre><h5><span class="ez-toc-section" id="%D0%9F%D0%B5%D1%80%D0%B5%D0%B4%D0%B0%D1%87%D0%B0_%D1%81%D0%BC%D1%8B%D1%81%D0%BB%D0%B0_%D0%B2%D1%81%D0%BF%D0%BE%D0%BC%D0%BE%D0%B3%D0%B0%D1%82%D0%B5%D0%BB%D1%8C%D0%BD%D1%8B%D0%BC_%D1%82%D0%B5%D1%85%D0%BD%D0%BE%D0%BB%D0%BE%D0%B3%D0%B8%D1%8F%D0%BC"></span> Передача смысла вспомогательным технологиям <span class="ez-toc-section-end"></span></h5> <p> Использование цвета для добавления смысла обеспечивает только визуальную индикацию, которая не будет передана пользователям вспомогательных технологий, таких как программы чтения с экрана.Убедитесь, что информация, обозначенная цветом, либо очевидна из самого содержимого (например, видимый текст), либо включена с помощью альтернативных средств, таких как дополнительный текст, скрытый с помощью класса <code> .sr-only </code>. </p> <h4><span class="ez-toc-section" id="%D0%93%D1%80%D0%B0%D0%BD%D0%B8%D1%86%D0%B0"></span> Граница <span class="ez-toc-section-end"></span></h4> <p> Используйте утилиты рамки, чтобы изменить только <code> цвет рамки </code> карты. Обратите внимание, что вы можете поместить классы <code> .text- {color} </code> в родительский <code> .card </code> или подмножество содержимого карты, как показано ниже. </p> <h5><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BE%D1%81%D0%BD%D0%BE%D0%B2%D0%BD%D0%BE%D0%B9_%D0%BA%D0%B0%D1%80%D1%82%D1%8B-2"></span> Название основной карты <span class="ez-toc-section-end"></span></h5> <p> Небольшой пример текста, который будет построен на названии карты и составляет основную часть содержимого карты.</p> <h5><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%B4%D0%BE%D0%BF%D0%BE%D0%BB%D0%BD%D0%B8%D1%82%D0%B5%D0%BB%D1%8C%D0%BD%D0%BE%D0%B9_%D0%BA%D0%B0%D1%80%D1%82%D1%8B-2"></span> Название дополнительной карты <span class="ez-toc-section-end"></span></h5> <p> Небольшой пример текста, который будет построен на названии карты и составляет основную часть содержимого карты. </p> <h5><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BA%D0%B0%D1%80%D1%82%D1%8B_%D1%83%D1%81%D0%BF%D0%B5%D1%85%D0%B0-2"></span> Название карты успеха <span class="ez-toc-section-end"></span></h5> <p> Небольшой пример текста, который будет построен на названии карты и составляет основную часть содержимого карты. </p> <h5><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BA%D0%B0%D1%80%D1%82%D1%8B_%D0%BE%D0%BF%D0%B0%D1%81%D0%BD%D0%BE%D1%81%D1%82%D0%B8-3"></span> Название карты опасности <span class="ez-toc-section-end"></span></h5> <p> Небольшой пример текста, который будет построен на названии карты и составляет основную часть содержимого карты. </p> <h5><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BF%D1%80%D0%B5%D0%B4%D1%83%D0%BF%D1%80%D0%B5%D0%B6%D0%B4%D0%B0%D1%8E%D1%89%D0%B5%D0%B9_%D0%BA%D0%B0%D1%80%D1%82%D0%BE%D1%87%D0%BA%D0%B8-2"></span> Название предупреждающей карточки <span class="ez-toc-section-end"></span></h5> <p> Небольшой пример текста, который будет построен на названии карты и составляет основную часть содержимого карты.</p> <h5><span class="ez-toc-section" id="%D0%97%D0%B0%D0%B3%D0%BE%D0%BB%D0%BE%D0%B2%D0%BE%D0%BA_%D0%B8%D0%BD%D1%84%D0%BE%D0%BA%D0%B0%D1%80%D1%82%D1%8B-2"></span> Заголовок инфокарты <span class="ez-toc-section-end"></span></h5> <p> Небольшой пример текста, который будет построен на названии карты и составляет основную часть содержимого карты. </p> <h5><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D1%81%D0%B2%D0%B5%D1%82%D0%BE%D0%B2%D0%BE%D0%B9_%D0%BA%D0%B0%D1%80%D1%82%D1%8B-2"></span> Название световой карты <span class="ez-toc-section-end"></span></h5> <p> Небольшой пример текста, который будет построен на названии карты и составляет основную часть содержимого карты. </p> <h5><span class="ez-toc-section" id="%D0%97%D0%B0%D0%B3%D0%BE%D0%BB%D0%BE%D0%B2%D0%BE%D0%BA_%D1%82%D0%B5%D0%BC%D0%BD%D0%BE%D0%B9_%D0%BA%D0%B0%D1%80%D1%82%D1%8B-2"></span> Заголовок темной карты <span class="ez-toc-section-end"></span></h5> <p> Небольшой пример текста, который будет построен на названии карты и составляет основную часть содержимого карты. </p><pre> <code data-lang="html"> <div> <div> Заголовок </div> <div> <h5><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BE%D1%81%D0%BD%D0%BE%D0%B2%D0%BD%D0%BE%D0%B9_%D0%BA%D0%B0%D1%80%D1%82%D0%BE%D1%87%D0%BA%D0%B8-2"></span> Название основной карточки <span class="ez-toc-section-end"></span></h5> <p> Небольшой пример текста, который должен основываться на названии карточки и составлять основную часть содержимого карточки.</p> </div> </div> <div> <div> Заголовок </div> <div> <h5><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%B4%D0%BE%D0%BF%D0%BE%D0%BB%D0%BD%D0%B8%D1%82%D0%B5%D0%BB%D1%8C%D0%BD%D0%BE%D0%B9_%D0%BA%D0%B0%D1%80%D1%82%D0%BE%D1%87%D0%BA%D0%B8-2"></span> Название дополнительной карточки <span class="ez-toc-section-end"></span></h5> <p> Небольшой пример текста, который должен основываться на заголовке карточки и составлять основную часть содержимого карточки. </p> </div> </div> <div> <div> Заголовок </div> <div> <h5><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BA%D0%B0%D1%80%D1%82%D0%BE%D1%87%D0%BA%D0%B8_%D1%83%D1%81%D0%BF%D0%B5%D1%85%D0%B0-2"></span> Название карточки успеха <span class="ez-toc-section-end"></span></h5> <p> Небольшой пример текста, который должен основываться на заголовке карточки и составлять основную часть содержимого карточки. </p> </div> </div> <div> <div> Заголовок </div> <div> <h5><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BA%D0%B0%D1%80%D1%82%D1%8B_%D0%BE%D0%BF%D0%B0%D1%81%D0%BD%D0%BE%D1%81%D1%82%D0%B8-4"></span> Название карты опасности <span class="ez-toc-section-end"></span></h5> <p> Небольшой пример текста, который должен основываться на названии карточки и составлять основную часть содержимого карточки.</p> </div> </div> <div> <div> Заголовок </div> <div> <h5><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BA%D0%B0%D1%80%D1%82%D0%BE%D1%87%D0%BA%D0%B8_%D1%81_%D0%BF%D1%80%D0%B5%D0%B4%D1%83%D0%BF%D1%80%D0%B5%D0%B6%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5%D0%BC-2"></span> Название карточки с предупреждением <span class="ez-toc-section-end"></span></h5> <p> Небольшой пример текста, который должен основываться на заголовке карточки и составлять основную часть содержимого карточки. </p> </div> </div> <div> <div> Заголовок </div> <div> <h5><span class="ez-toc-section" id="%D0%97%D0%B0%D0%B3%D0%BE%D0%BB%D0%BE%D0%B2%D0%BE%D0%BA_%D0%B8%D0%BD%D1%84%D0%BE%D1%80%D0%BC%D0%B0%D1%86%D0%B8%D0%BE%D0%BD%D0%BD%D0%BE%D0%B9_%D0%BA%D0%B0%D1%80%D1%82%D0%BE%D1%87%D0%BA%D0%B8-2"></span> Заголовок информационной карточки <span class="ez-toc-section-end"></span></h5> <p> Небольшой пример текста, который должен основываться на заголовке карточки и составлять основную часть содержимого карточки. </p> </div> </div> <div> <div> Заголовок </div> <div> <h5><span class="ez-toc-section" id="%D0%A1%D0%B2%D0%B5%D1%82%D0%BB%D1%8B%D0%B9_%D0%B7%D0%B0%D0%B3%D0%BE%D0%BB%D0%BE%D0%B2%D0%BE%D0%BA_%D0%BA%D0%B0%D1%80%D1%82%D0%BE%D1%87%D0%BA%D0%B8-2"></span> Светлый заголовок карточки <span class="ez-toc-section-end"></span></h5> <p> Небольшой пример текста, который должен основываться на названии карточки и составлять основную часть содержимого карточки.</p> </div> </div> <div> <div> Заголовок </div> <div> <h5><span class="ez-toc-section" id="%D0%97%D0%B0%D0%B3%D0%BE%D0%BB%D0%BE%D0%B2%D0%BE%D0%BA_%D1%82%D0%B5%D0%BC%D0%BD%D0%BE%D0%B9_%D0%BA%D0%B0%D1%80%D1%82%D0%BE%D1%87%D0%BA%D0%B8-2"></span> Заголовок темной карточки <span class="ez-toc-section-end"></span></h5> <p> Небольшой пример текста, который должен основываться на заголовке карточки и составлять основную часть содержимого карточки. </p> </div> </div> </code> </pre><h4><span class="ez-toc-section" id="%D0%A1%D0%BC%D0%B5%D1%81%D0%B8_%D1%83%D1%82%D0%B8%D0%BB%D0%B8%D1%82%D1%8B"></span> Смеси утилиты <span class="ez-toc-section-end"></span></h4> <p> Вы также можете при необходимости изменить границы верхнего и нижнего колонтитула карточки и даже удалить их <code> background-color </code> с <code> .bg-transparent </code>. </p> <h5><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BA%D0%B0%D1%80%D1%82%D1%8B_%D1%83%D1%81%D0%BF%D0%B5%D1%85%D0%B0-3"></span> Название карты успеха <span class="ez-toc-section-end"></span></h5> <p> Небольшой пример текста, который будет построен на названии карты и составляет основную часть содержимого карты.</p><pre> <code data-lang="html"> <div> <div> Заголовок </div> <div> <h5><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BA%D0%B0%D1%80%D1%82%D0%BE%D1%87%D0%BA%D0%B8_%D1%83%D1%81%D0%BF%D0%B5%D1%85%D0%B0-3"></span> Название карточки успеха <span class="ez-toc-section-end"></span></h5> <p> Небольшой пример текста, который должен основываться на заголовке карточки и составлять основную часть содержимого карточки. </p> </div> <div> Нижний колонтитул </div> </div> </code> </pre><h3><span class="ez-toc-section" id="%D0%9C%D0%B0%D0%BA%D0%B5%D1%82_%D0%BA%D0%B0%D1%80%D1%82%D1%8B"></span> Макет карты <span class="ez-toc-section-end"></span></h3> <p> Помимо стилизации содержимого карточек, Bootstrap включает несколько опций для размещения серий карточек. В настоящее время <strong> эти параметры макета еще не работают </strong>.</p> <h4><span class="ez-toc-section" id="%D0%93%D1%80%D1%83%D0%BF%D0%BF%D1%8B_%D0%BA%D0%B0%D1%80%D1%82"></span> Группы карт <span class="ez-toc-section-end"></span></h4> <p> Используйте группы карточек для визуализации карточек как одного присоединенного элемента с столбцами одинаковой ширины и высоты. Группы карт используют <code> дисплей: гибкий; </code>, чтобы добиться их равномерной калибровки. </p> <h5><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BA%D0%B0%D1%80%D1%82%D1%8B-9"></span> Название карты <span class="ez-toc-section-end"></span></h5> <p> Это более широкая карточка с вспомогательным текстом ниже в качестве естественного перехода к дополнительному содержанию. Этот контент немного длиннее. </p> <p> <small> Последнее обновление 3 мин. Назад </small> </p> <h5><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BA%D0%B0%D1%80%D1%82%D1%8B-10"></span> Название карты <span class="ez-toc-section-end"></span></h5> <p> У этой карточки есть вспомогательный текст ниже, как естественный ввод к дополнительному содержанию.</p> <p> <small> Последнее обновление 3 мин. Назад </small> </p> <h5><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BA%D0%B0%D1%80%D1%82%D1%8B-11"></span> Название карты <span class="ez-toc-section-end"></span></h5> <p> Это более широкая карточка с вспомогательным текстом ниже в качестве естественного перехода к дополнительному содержанию. Эта карточка имеет даже более длинный контент, чем первая, чтобы показать действие одинаковой высоты. </p> <p> <small> Последнее обновление 3 мин. Назад </small> </p><pre> <code data-lang="html"> <div> <div> <noscript><img class="lazy lazy-hidden" src = "..." alt = "Заголовок изображения карточки"></noscript><img class="lazyload lazy lazy-hidden" src = "..." alt = "Заголовок изображения карточки"><noscript><img src = "..." alt = "Заголовок изображения карточки"></noscript> <div> <h5><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BA%D0%B0%D1%80%D1%82%D0%BE%D1%87%D0%BA%D0%B8-9"></span> Название карточки <span class="ez-toc-section-end"></span></h5> <p> Это более широкая карточка с вспомогательным текстом ниже, который естественным образом ведет к дополнительному содержанию.Этот контент немного длиннее. </p> <p> <small> Последнее обновление 3 мин. назад </small> </p> </div> </div> <div> <noscript><img class="lazy lazy-hidden" src = "..." alt = "Заголовок изображения карточки"></noscript><img class="lazyload lazy lazy-hidden" src = "..." alt = "Заголовок изображения карточки"><noscript><img src = "..." alt = "Заголовок изображения карточки"></noscript> <div> <h5><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BA%D0%B0%D1%80%D1%82%D0%BE%D1%87%D0%BA%D0%B8-10"></span> Название карточки <span class="ez-toc-section-end"></span></h5> <p> Под этой карточкой есть вспомогательный текст, который естественным образом ведет к дополнительному содержанию. </p> <p> <small> Последнее обновление 3 мин. назад </small> </p> </div> </div> <div> <noscript><img class="lazy lazy-hidden" src = "... "alt =" Крышка изображения карточки "></noscript><img class="lazyload lazy lazy-hidden" src = "... "alt =" Крышка изображения карточки "><noscript><img src = "... "alt =" Крышка изображения карточки "></noscript> <div> <h5><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BA%D0%B0%D1%80%D1%82%D0%BE%D1%87%D0%BA%D0%B8-11"></span> Название карточки <span class="ez-toc-section-end"></span></h5> <p> Это более широкая карточка с вспомогательным текстом ниже, который естественным образом ведет к дополнительному содержанию. Эта карточка имеет даже более длинное содержание, чем первая, чтобы показать действие одинаковой высоты. </p> <p> <small> Последнее обновление 3 мин. назад </small> </p> </div> </div> </div> </code> </pre><p> При использовании групп карточек с нижними колонтитулами их содержимое будет автоматически выровнено.</p> <h5><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BA%D0%B0%D1%80%D1%82%D1%8B-12"></span> Название карты <span class="ez-toc-section-end"></span></h5> <p> Это более широкая карточка с вспомогательным текстом ниже в качестве естественного перехода к дополнительному содержанию. Этот контент немного длиннее. </p> <h5><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BA%D0%B0%D1%80%D1%82%D1%8B-13"></span> Название карты <span class="ez-toc-section-end"></span></h5> <p> У этой карточки есть вспомогательный текст ниже, как естественный ввод к дополнительному содержанию. </p> <h5><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BA%D0%B0%D1%80%D1%82%D1%8B-14"></span> Название карты <span class="ez-toc-section-end"></span></h5> <p> Это более широкая карточка с вспомогательным текстом ниже в качестве естественного перехода к дополнительному содержанию.Эта карточка имеет даже более длинный контент, чем первая, чтобы показать действие одинаковой высоты. </p><pre> <code data-lang="html"> <div> <div> <noscript><img class="lazy lazy-hidden" src = "..." alt = "Заголовок изображения карточки"></noscript><img class="lazyload lazy lazy-hidden" src = "..." alt = "Заголовок изображения карточки"><noscript><img src = "..." alt = "Заголовок изображения карточки"></noscript> <div> <h5><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BA%D0%B0%D1%80%D1%82%D0%BE%D1%87%D0%BA%D0%B8-12"></span> Название карточки <span class="ez-toc-section-end"></span></h5> <p> Это более широкая карточка с вспомогательным текстом ниже, который естественным образом ведет к дополнительному содержанию. Этот контент немного длиннее. </p> </div> <div> <small> Последнее обновление 3 мин. назад </small> </div> </div> <div> <noscript><img class="lazy lazy-hidden" src = "... "alt =" Крышка изображения карточки "></noscript><img class="lazyload lazy lazy-hidden" src = "... "alt =" Крышка изображения карточки "><noscript><img src = "... "alt =" Крышка изображения карточки "></noscript> <div> <h5><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BA%D0%B0%D1%80%D1%82%D0%BE%D1%87%D0%BA%D0%B8-13"></span> Название карточки <span class="ez-toc-section-end"></span></h5> <p> Под этой карточкой есть вспомогательный текст, который естественным образом ведет к дополнительному содержанию. </p> </div> <div> <small> Последнее обновление 3 мин. назад </small> </div> </div> <div> <noscript><img class="lazy lazy-hidden" src = "..." alt = "Заголовок изображения карточки"></noscript><img class="lazyload lazy lazy-hidden" src = "..." alt = "Заголовок изображения карточки"><noscript><img src = "..." alt = "Заголовок изображения карточки"></noscript> <div> <h5><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BA%D0%B0%D1%80%D1%82%D0%BE%D1%87%D0%BA%D0%B8-14"></span> Название карточки <span class="ez-toc-section-end"></span></h5> <p> Это более широкая карточка с вспомогательным текстом ниже, который естественным образом ведет к дополнительному содержанию.Эта карточка имеет даже более длинное содержание, чем первая, чтобы показать действие одинаковой высоты. </p> </div> <div> <small> Последнее обновление 3 мин. назад </small> </div> </div> </div> </code> </pre><h4><span class="ez-toc-section" id="%D0%9A%D0%BE%D0%BB%D0%BE%D0%B4%D1%8B_%D0%BA%D0%B0%D1%80%D1%82"></span> Колоды карт <span class="ez-toc-section-end"></span></h4> <p> Нужен набор карточек одинаковой ширины и высоты, которые не прикреплены друг к другу? Используйте колоды карт. </p> <h5><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BA%D0%B0%D1%80%D1%82%D1%8B-15"></span> Название карты <span class="ez-toc-section-end"></span></h5> <p> Это более длинная карточка с вспомогательным текстом ниже как естественный ввод к дополнительному содержанию.Этот контент немного длиннее. </p> <p> <small> Последнее обновление 3 мин. Назад </small> </p> <h5><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BA%D0%B0%D1%80%D1%82%D1%8B-16"></span> Название карты <span class="ez-toc-section-end"></span></h5> <p> У этой карточки есть вспомогательный текст ниже, как естественный ввод к дополнительному содержанию. </p> <p> <small> Последнее обновление 3 мин. Назад </small> </p> <h5><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BA%D0%B0%D1%80%D1%82%D1%8B-17"></span> Название карты <span class="ez-toc-section-end"></span></h5> <p> Это более широкая карточка с вспомогательным текстом ниже в качестве естественного перехода к дополнительному содержанию. Эта карточка имеет даже более длинный контент, чем первая, чтобы показать действие одинаковой высоты.</p> <p> <small> Последнее обновление 3 мин. Назад </small> </p><pre> <code data-lang="html"> <div> <div> <noscript><img class="lazy lazy-hidden" src = "..." alt = "Заголовок изображения карточки"></noscript><img class="lazyload lazy lazy-hidden" src = "..." alt = "Заголовок изображения карточки"><noscript><img src = "..." alt = "Заголовок изображения карточки"></noscript> <div> <h5><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BA%D0%B0%D1%80%D1%82%D0%BE%D1%87%D0%BA%D0%B8-15"></span> Название карточки <span class="ez-toc-section-end"></span></h5> <p> Это более длинная карточка с вспомогательным текстом ниже, которая естественным образом ведет к дополнительному содержанию. Этот контент немного длиннее. </p> <p> <small> Последнее обновление 3 мин. назад </small> </p> </div> </div> <div> <noscript><img class="lazy lazy-hidden" src = "... "alt =" Крышка изображения карточки "></noscript><img class="lazyload lazy lazy-hidden" src = "... "alt =" Крышка изображения карточки "><noscript><img src = "... "alt =" Крышка изображения карточки "></noscript> <div> <h5><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BA%D0%B0%D1%80%D1%82%D0%BE%D1%87%D0%BA%D0%B8-16"></span> Название карточки <span class="ez-toc-section-end"></span></h5> <p> Под этой карточкой есть вспомогательный текст, который естественным образом ведет к дополнительному содержанию. </p> <p> <small> Последнее обновление 3 мин. назад </small> </p> </div> </div> <div> <noscript><img class="lazy lazy-hidden" src = "..." alt = "Заголовок изображения карточки"></noscript><img class="lazyload lazy lazy-hidden" src = "..." alt = "Заголовок изображения карточки"><noscript><img src = "..." alt = "Заголовок изображения карточки"></noscript> <div> <h5><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BA%D0%B0%D1%80%D1%82%D0%BE%D1%87%D0%BA%D0%B8-17"></span> Название карточки <span class="ez-toc-section-end"></span></h5> <p> Это более широкая карточка с вспомогательным текстом ниже, который естественным образом ведет к дополнительному содержанию.Эта карточка имеет даже более длинное содержание, чем первая, чтобы показать действие одинаковой высоты. </p> <p> <small> Последнее обновление 3 мин. назад </small> </p> </div> </div> </div> </code> </pre><p> Как и в случае с группами карт, нижние колонтитулы карт в колодах автоматически выстраиваются в линию. </p> <h5><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BA%D0%B0%D1%80%D1%82%D1%8B-18"></span> Название карты <span class="ez-toc-section-end"></span></h5> <p> Это более широкая карточка с вспомогательным текстом ниже в качестве естественного перехода к дополнительному содержанию. Этот контент немного длиннее.</p> <h5><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BA%D0%B0%D1%80%D1%82%D1%8B-19"></span> Название карты <span class="ez-toc-section-end"></span></h5> <p> У этой карточки есть вспомогательный текст ниже, как естественный ввод к дополнительному содержанию. </p> <h5><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BA%D0%B0%D1%80%D1%82%D1%8B-20"></span> Название карты <span class="ez-toc-section-end"></span></h5> <p> Это более широкая карточка с вспомогательным текстом ниже в качестве естественного перехода к дополнительному содержанию. Эта карточка имеет даже более длинный контент, чем первая, чтобы показать действие одинаковой высоты. </p><pre> <code data-lang="html"> <div> <div> <noscript><img class="lazy lazy-hidden" src = "..." alt = "Заголовок изображения карточки"></noscript><img class="lazyload lazy lazy-hidden" src = "..." alt = "Заголовок изображения карточки"><noscript><img src = "..." alt = "Заголовок изображения карточки"></noscript> <div> <h5><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BA%D0%B0%D1%80%D1%82%D0%BE%D1%87%D0%BA%D0%B8-18"></span> Название карточки <span class="ez-toc-section-end"></span></h5> <p> Это более широкая карточка с вспомогательным текстом ниже, который естественным образом ведет к дополнительному содержанию.Этот контент немного длиннее. </p> </div> <div> <small> Последнее обновление 3 мин. назад </small> </div> </div> <div> <noscript><img class="lazy lazy-hidden" src = "..." alt = "Заголовок изображения карточки"></noscript><img class="lazyload lazy lazy-hidden" src = "..." alt = "Заголовок изображения карточки"><noscript><img src = "..." alt = "Заголовок изображения карточки"></noscript> <div> <h5><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BA%D0%B0%D1%80%D1%82%D0%BE%D1%87%D0%BA%D0%B8-19"></span> Название карточки <span class="ez-toc-section-end"></span></h5> <p> Под этой карточкой есть вспомогательный текст, который естественным образом ведет к дополнительному содержанию. </p> </div> <div> <small> Последнее обновление 3 мин. назад </small> </div> </div> <div> <noscript><img class="lazy lazy-hidden" src = "... "alt =" Крышка изображения карточки "></noscript><img class="lazyload lazy lazy-hidden" src = "... "alt =" Крышка изображения карточки "><noscript><img src = "... "alt =" Крышка изображения карточки "></noscript> <div> <h5><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BA%D0%B0%D1%80%D1%82%D0%BE%D1%87%D0%BA%D0%B8-20"></span> Название карточки <span class="ez-toc-section-end"></span></h5> <p> Это более широкая карточка с вспомогательным текстом ниже, который естественным образом ведет к дополнительному содержанию. Эта карточка имеет даже более длинное содержание, чем первая, чтобы показать действие одинаковой высоты. </p> </div> <div> <small> Последнее обновление 3 мин. назад </small> </div> </div> </div> </code> </pre><h4><span class="ez-toc-section" id="%D0%A1%D1%82%D0%BE%D0%BB%D0%B1%D1%86%D1%8B_%D0%B4%D0%BB%D1%8F_%D0%BA%D0%B0%D1%80%D1%82%D0%BE%D1%87%D0%B5%D0%BA"></span> Столбцы для карточек <span class="ez-toc-section-end"></span></h4> <p> Карточки </p> <p> можно организовать в столбцы, подобные масонству, с помощью простого CSS, заключив их в <code>.карточки-столбцы </code>. Карточки построены с использованием свойств CSS <code> column </code> вместо flexbox для упрощения выравнивания. Карты располагаются сверху вниз и слева направо. </p> <p> <strong> Внимание! </strong> Ваш пробег с карточными столбцами может отличаться. Чтобы карточки не разбивались по столбцам, мы должны установить для них значение <code> display: inline-block </code> как <code> column-break-inside: избегайте </code> еще не является надежным решением. </p> <h5><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BA%D0%B0%D1%80%D1%82%D1%8B_%D0%BA%D0%BE%D1%82%D0%BE%D1%80%D0%BE%D0%B5_%D0%BF%D0%B5%D1%80%D0%B5%D0%BD%D0%BE%D1%81%D0%B8%D1%82%D1%81%D1%8F_%D0%BD%D0%B0_%D0%BD%D0%BE%D0%B2%D1%83%D1%8E_%D1%81%D1%82%D1%80%D0%BE%D0%BA%D1%83"></span> Название карты, которое переносится на новую строку <span class="ez-toc-section-end"></span></h5> <p> Это более длинная карточка с вспомогательным текстом ниже как естественный ввод к дополнительному содержанию.Этот контент немного длиннее. </p> <blockquote> <p> Lorem ipsum dolor sit amet, conctetur adipiscing elit. Целое число посуере эрат анте. </p> </blockquote> <h5><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BA%D0%B0%D1%80%D1%82%D1%8B-21"></span> Название карты <span class="ez-toc-section-end"></span></h5> <p> У этой карточки есть вспомогательный текст ниже, как естественный ввод к дополнительному содержанию. </p> <p> <small> Последнее обновление 3 мин. Назад </small> </p> <blockquote> <p> Lorem ipsum dolor sit amet, conctetur adipiscing elit. Целое число посуере эрат.</p> </blockquote> <h5><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BA%D0%B0%D1%80%D1%82%D1%8B-22"></span> Название карты <span class="ez-toc-section-end"></span></h5> <p> У этой карточки есть вспомогательный текст ниже, как естественный ввод к дополнительному содержанию. </p> <p> <small> Последнее обновление 3 мин. Назад </small> </p> <blockquote> <p> Lorem ipsum dolor sit amet, conctetur adipiscing elit. Целое число посуере эрат анте. </p> </blockquote> <h5><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BA%D0%B0%D1%80%D1%82%D1%8B-23"></span> Название карты <span class="ez-toc-section-end"></span></h5> <p> Это более широкая карточка с вспомогательным текстом ниже в качестве естественного перехода к дополнительному содержанию.Эта карточка имеет даже более длинный контент, чем первая, чтобы показать действие одинаковой высоты. </p> <p> <small> Последнее обновление 3 мин. Назад </small> </p><pre> <code data-lang="html"> <div> <div> <noscript><img class="lazy lazy-hidden" src = "..." alt = "Заголовок изображения карточки"></noscript><img class="lazyload lazy lazy-hidden" src = "..." alt = "Заголовок изображения карточки"><noscript><img src = "..." alt = "Заголовок изображения карточки"></noscript> <div> <h5><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BA%D0%B0%D1%80%D1%82%D0%BE%D1%87%D0%BA%D0%B8_%D0%BA%D0%BE%D1%82%D0%BE%D1%80%D0%BE%D0%B5_%D0%BF%D0%B5%D1%80%D0%B5%D0%BD%D0%BE%D1%81%D0%B8%D1%82%D1%81%D1%8F_%D0%BD%D0%B0_%D0%BD%D0%BE%D0%B2%D1%83%D1%8E_%D1%81%D1%82%D1%80%D0%BE%D0%BA%D1%83"></span> Название карточки, которое переносится на новую строку <span class="ez-toc-section-end"></span></h5> <p> Это более длинная карточка с вспомогательным текстом ниже, которая естественным образом ведет к дополнительному содержанию. Этот контент немного длиннее. </p> </div> </div> <div> <цитата> <p> Lorem ipsum dolor sit amet, conctetur adipiscing elit.Целое число - ставка анте. </p> <нижний колонтитул> <маленький> Кто-то, известный в <cite title = "Source Title"> Source Title </cite> </small> </footer> </blockquote> </div> <div> <noscript><img class="lazy lazy-hidden" src = "..." alt = "Заголовок изображения карточки"></noscript><img class="lazyload lazy lazy-hidden" src = "..." alt = "Заголовок изображения карточки"><noscript><img src = "..." alt = "Заголовок изображения карточки"></noscript> <div> <h5><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BA%D0%B0%D1%80%D1%82%D0%BE%D1%87%D0%BA%D0%B8-21"></span> Название карточки <span class="ez-toc-section-end"></span></h5> <p> Под этой карточкой есть вспомогательный текст, который естественным образом ведет к дополнительному содержанию. </p> <p> <small> Последнее обновление 3 мин. назад </small> </p> </div> </div> <div> <цитата> <p> Lorem ipsum dolor sit amet, conctetur adipiscing elit.Целое число посуере эрат. </p> <нижний колонтитул> <маленький> Кто-то, известный в <cite title = "Source Title"> Source Title </cite> </small> </footer> </blockquote> </div> <div> <div> <h5><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BA%D0%B0%D1%80%D1%82%D0%BE%D1%87%D0%BA%D0%B8-22"></span> Название карточки <span class="ez-toc-section-end"></span></h5> <p> Под этой карточкой есть вспомогательный текст, который естественным образом ведет к дополнительному содержанию. </p> <p> <small> Последнее обновление 3 мин. назад </small> </p> </div> </div> <div> <noscript><img class="lazy lazy-hidden" src = "... "alt =" Изображение карточки "></noscript><img class="lazyload lazy lazy-hidden" src = "... "alt =" Изображение карточки "><noscript><img src = "... "alt =" Изображение карточки "></noscript> </div> <div> <цитата> <p> Lorem ipsum dolor sit amet, conctetur adipiscing elit. Целое число - ставка анте. </p> <нижний колонтитул> <маленький> Кто-то, известный в <cite title = "Source Title"> Source Title </cite> </small> </footer> </blockquote> </div> <div> <div> <h5><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BA%D0%B0%D1%80%D1%82%D0%BE%D1%87%D0%BA%D0%B8-23"></span> Название карточки <span class="ez-toc-section-end"></span></h5> <p> Это более широкая карточка с вспомогательным текстом ниже, который естественным образом ведет к дополнительному содержанию.Эта карточка имеет даже более длинное содержание, чем первая, чтобы показать действие одинаковой высоты. </p> <p> <small> Последнее обновление 3 мин. назад </small> </p> </div> </div> </div> </code> </pre><p> Столбцы карты также могут быть расширены и настроены с помощью некоторого дополнительного кода. Ниже показано расширение класса <code> .card-columns </code>, использующее тот же CSS-код, который мы используем, - CSS-столбцы - для создания набора адаптивных уровней для изменения количества столбцов. </p><pre> <code data-lang="scss">.card-columns { @include media-breakpoint-only (lg) { количество столбцов: 4; } @include media-breakpoint-only (xl) { количество столбцов: 5; } } </code> </pre><h2><span class="ez-toc-section" id="Bootstrap_4_%D0%9F%D0%B0%D0%BD%D0%B5%D0%BB%D0%B8_-_GeeksforGeeks"></span> Bootstrap 4 | Панели - GeeksforGeeks <span class="ez-toc-section-end"></span></h2> <p> <code> <! DOCTYPE html> </code> </p> <p> <code> <</code> <code> html </code> <code> lang </code> <code> = </code> <code> «en» </code> <code>> </code> </p> <p> </code> <code> </code> </code> <code> </code> </code> <code> </code> </code> <code> </p> <p> <code> </code> <code> <</code> <code> meta </code> <code> charset </code> <code> = </code> <code> "UTF-8" </code> <code>> </code> </p> <p> <code> </code> <code> <</code> <code> meta </code> <code>000</code>000</code>000</code>000</code>000</code>000</code> <code> content </code> <code> = </code> <code> "width = device-width, initial-scale = 1.0 "</code> <code>> </code> </p> <p> <code> </code> <code> <</code> <code> title </code> <code>> Панели </ </code> <code> title </code> <code>> </code> </p> <p> <code> </code> <code> <</code> <code> ссылка </code> <code> <code> </code>000</code>000</code>000</code>000</code>000</code>000</code>0009000″ </code>000 </p> <p> <code> </code> <code> href </code> <code> = </code> </p> <p> <code> </code> <code> <</code> <code> скрипт </code> <code> src </code> <code> = </code> </p> <p> <code> </code> <code> </ </code> <code> скрипт </code> </code> </code> </code> </code> </code> </code> </code> </code> </code> <code> скрипт src </code> <code> = </code> </p> <p> <code> </code> <code> </ </code> <code> скрипт </code> <code>> </code> </p> <p> <code> </code> <code> <</code> <code> style </code> <code>> </code> </p> <p> <code> </code> <code>.панель {</code> </p> <p> <code> </code> <code>, поля: 5 пикселей; </code> </p> <p> <code> </code> <code>} </code> </p> <p> <code> </code> <code> </ </code> <code> стиль </code> <code>> </code> </p> <p> <code> </ </code> <code> головка </code> <code>> </code> </p> <p> </code> <code> <code> </code> </code> </code> <code> </code> </code> </code> <code> </code> </p> <p> <code> </code> <code> <</code> <code> h2 </code> <code> style </code> <code> = </code> <code> "цвет: зеленый; выравнивание текста: по центру;" </code> <code>> </code> </p> <p> <code> </code> <code> GeeksforGeeks </code> </p> <p> <code> </code> <code> </ </code> <code> h2 </code> <code>> </code> </p> <p> <code> </code> <code> <</code> <code> </code>000</code>000 </code>000 </code>000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 </code>000 </code>000 </code>000 </code> </p> <p> <code> </code> <code> <</code> <code> h3 </code> <code>> Панели с контекстными классами </ </code> <code> h3 </code> <code>> </code> </p> <p> <code> </code> <code> <</code> <code> div </code> <code> class </code> <code> = </code> "панель </code>-</code>" </p> <p> <code> </code> <code> <</code> <code> div </code> <code> class </code> <code> = </code> <code> "панель панель по умолчанию" </code> <code>> </code> </p> <p> <code> </code> <code> <</code> <code> div </code> <code> class </code> <code> "панель </code> <code>" панель <code>> панель по умолчанию </ </code> <code> дел </code> <code>> </code> </p> <p> <code> </code> <code> <</code> <code> дел </code> <code> класс </code> <code> = </code> <code> «панель-тело» </code> <code>> Содержимое </ </code> <code> div </code> <code>> </code> </p> <p> <code> </code> <code> </ </code> <code> div </code> <code>> </code> </p> <p> </code> <code> </code> </p> <p> </code> <code> </code> </code> <code> <code> <code> класс </code> <code> = </code> <code> "панель панель-основная" </code> <code>> </code> </p> <p> <code> </code> <code> <</code> <code> div </code> <code> класс </code> <code> = </code> <code> "панель-заголовок" </code> <code>> панель-<code>> панель-<code> </ <code> </code> <code>> </code> </p> <p> <code> </code> <code> <</code> <code> div </code> <code> класс </code> <code> = </code> <code> "панель-тело" </code> <code>> Content </ </code> <code> div </code> <code>> </code> </p> <p> </code> </code> <code> </code> </code>0009000<code> <code> </code> <code>> </code> </p> <p> <code> </code> <code> <</code> <code> дел </code> <code> класс </code> <code> = </code> <code> «панель панель-успех» </code> <code>> </code> </p> <p> <code> </code> <code> <</code> <code> div </code> <code> class </code> <code> = </code> <code> "панель-заголовок" </code> <code>> панель-успех </ </code> <code> div </code> <code>> </code> </p> <p> <code> </code> <code> <</code> <code> div <code> <code> div </code> <code> div </code> <code> "панель-тело" </code> <code>> Содержание </ </code> <code> div </code> <code>> </code> </p> <p> <code> </code> <code> </ </code> <code> div </code> <code>> </code> </p> <p> <code> </code> <code> <</code> <code> div </code> <code> div </code> <code> div <code> "панель информация о панели" </code> <code>> </code> </p> <p> <code> </code> <code> <</code> <code> div </code> <code> класс </code> <code> = </code> <code> "заголовок панели" </code> <code>> информация о панели </ </code> <code> div </code> </p> <p>> </code> <code>> </code> <code> </code> <code> <</code> <code> div </code> <code> class </code> <code> = </code> <code> "панель-тело" </code> <code>> Content </ </code> <code> div </code> <code>> </code> </p> <p> <code> </code> <code> </ </code> <code> div </code> <code>> </code> </p> <p> <code> </code> <code> <</code> <code> div </code> <code> class </code> <code> = </code> <code> «панель панель-предупреждение» </code> <code>> </code> <code> </code> </code> </code> </code> </code> </code> </code> </p> <p> </code> <code> class </code> <code> = </code> <code> "заголовок панели" </code> <code>> панель-предупреждение </ </code> <code> div </code> <code>> </code> </p> <p> <code> </code> <code> <</code> <code> div </code> <code> class </code> <code> = </code>-body <code> "панель <code>> Содержание </ </code> <code> div </code> <code>> </code> </p> <p> <code> </code> <code> </ </code> <code> div </code> <code>> </code> </p> <p> <code> </code> <code> <</code> <code> div </code> <code> class </code> <code> панель = панель <code>> </code> </p> <p> <code> </code> <code> <</code> <code> div </code> <code> class </code> <code> = </code> <code> "заголовок панели" </code> <code>> панель l-dangerous </ </code> <code> div </code> <code>> </code> </p> <p> <code> </code> <code> <</code> <code> div </code> <code> класс </code> <code> = </code> <code> «панель-корпус» </code> <code>> Содержание </ </code> <code> div </code> <code>> </code> <code>> </code> <code>> </code> <code> </code> <code> </ </code> <code> div </code> <code>> </code> </p> <p> <code> </code> <code> </ </code> <code> div </code> <code>> </code> </p> <p> <code> </ </code> <code> корпус </code> <code>> </code> </p> <p> </code>000</code>000</code>000<code> <code>> </code> </p> <h2><span class="ez-toc-section" id="%D0%9F%D0%B0%D0%BD%D0%B5%D0%BB%D0%B8_-_%D0%98%D1%81%D0%BF%D0%BE%D0%BB%D1%8C%D0%B7%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_Bootstrap_%D0%B2_LibGuides"></span> Панели - Использование Bootstrap в LibGuides <span class="ez-toc-section-end"></span></h2> <p> Многие из компонентов, обсуждаемых в этом LibGuide, используют цвет.При использовании цвета доступность должна быть проблемой. Таким образом, вам необходимо знать текущие проблемы контрастности Bootstrap (используемые SpringShare) и возможные исправления, прежде чем использовать некоторые стили на основе цвета в Bootstrap. </p> <h4><span class="ez-toc-section" id="%D0%A6%D0%B2%D0%B5%D1%82_%D0%9F%D0%B5%D1%80%D0%B5%D0%B4%D0%B0%D1%8E%D1%89%D0%B8%D0%B9_%D1%81%D0%BC%D1%8B%D1%81%D0%BB"></span> Цвет Передающий смысл <span class="ez-toc-section-end"></span></h4> <blockquote><p> 1.4.1. Использование цвета: цвет не используется в качестве единственного визуального средства передачи информации, указания действия, побуждения к ответу или выделения визуального элемента.</p> <p> <cite> WCAG 2.0 </cite> </p></blockquote> <p> В случае, когда значение передается только с помощью цвета, вам может потребоваться добавить <code> <span> </span> </code>, чтобы передать значение, для передачи которого предназначен цвет.Класс <code> sr-only </code> скрывает контент от визуальных пользователей, сохраняя его доступность для программ чтения с экрана. </p> <p> Для получения дополнительной информации по этому требованию WCAG 2.0, пожалуйста, ознакомьтесь с W3C's Use of Color: Understanding SC 1.4.1 </p> <h4><span class="ez-toc-section" id="%D0%A6%D0%B2%D0%B5%D1%82%D0%BE%D0%B2%D0%BE%D0%B9_%D0%BA%D0%BE%D0%BD%D1%82%D1%80%D0%B0%D1%81%D1%82"></span> Цветовой контраст <span class="ez-toc-section-end"></span></h4> <p> Еще одно соображение доступности, касающееся использования цвета, - это контраст. Проще говоря, цвет шрифта наиболее контрастирует с цветом фона, чтобы пользователи с ослабленным зрением могли читать текст. </p> <p> WCAG 2.0 устанавливает необходимый уровень контрастности для мелких и крупных шрифтов. Считается, что большие шрифты имеют размер 18,5 пикселей, а полужирные шрифты или чуть больше 24 пикселей. В следующей таблице описаны требования к контрастности для соответствия AA и AAA WCAG 2.0: </p> <table> <thead> <tr> <td> </td> <th> Обычный текст </th> <th> Крупный текст </th> </tr> </thead> <tbody> <tr> <th> AA </th> <td> 4,5: 1 </td> <td> 3: 1 </td> </tr> <tr> <th> AAA </th> <td> 7: 1 </td> <td> 4.5: 1 </td> </tr> </tbody> </table> <p> Говоря о раскраске Bootstrap с точки зрения контраста, я буду использовать термины «полное соответствие AA» и «полное соответствие AAA». С помощью этих терминов я говорю, что независимо от того, считается ли элемент обычным или крупным текстом, цвета будут соответствовать требованиям AA или AAA. Для простоты любые предложения CSS для компонентов Bootstrap будут соответствовать уровню, указанному для обычного и большого текста. </p> <p><h5><span class="ez-toc-section" id="%D0%92%D0%B0%D0%B6%D0%BD%D1%8B%D0%B5_%D1%80%D0%B5%D1%81%D1%83%D1%80%D1%81%D1%8B_%D0%BA%D0%B0%D1%81%D0%B0%D1%8E%D1%89%D0%B8%D0%B5%D1%81%D1%8F_%D0%BA%D0%BE%D0%BD%D1%82%D1%80%D0%B0%D1%81%D1%82%D0%BD%D0%BE%D1%81%D1%82%D0%B8"></span> Важные ресурсы, касающиеся контрастности <span class="ez-toc-section-end"></span></h5> </p> <dl> <dt> W3C: Техника G18 </dt> <dd> Помогает объяснить правила контраста и способы обеспечения соответствия.</dd> </dl> <h2><span class="ez-toc-section" id="%D0%BF%D1%80%D0%BE%D1%81%D1%82%D1%8B%D1%85_%D0%B8_%D1%80%D0%B0%D0%B7%D0%B1%D0%BE%D1%80%D0%BD%D1%8B%D1%85_5_%D0%B4%D0%B5%D0%BC%D0%BE%D0%BD%D1%81%D1%82%D1%80%D0%B0%D1%86%D0%B8%D0%B9"></span> простых и разборных 5 демонстраций <span class="ez-toc-section-end"></span></h2> <h4> </h4> <p><strong> Компонент панели в Bootstrap </strong> </h4> <p> Панель, которая является встроенным компонентом Bootstrap, может использоваться для представления содержимого в блоке. Вы можете указать разные стили для панелей, используя различные встроенные классы. </p> <p> Панель может содержать заголовок для поля содержимого, в то время как вы можете добавлять содержимое под ним в пределах этой панели. </p> <p> Используя код JavaScript / jQuery, вы даже можете создавать складные панели в Bootstrap.В этом уроке я покажу вам простые и складные демонстрации панелей. </p> <h4> </h4> <p><strong> Демонстрация создания простой панели </strong> </h4> <p> Панель может быть создана с использованием основной панели <em> <strong> класса </strong> </em>. Вы можете использовать это в элементе </p> <div>, где вы также можете указать стиль этой панели. См. Следующую демонстрацию, где div назначается классы панели и панели по умолчанию. Панель простая и не содержит другого содержимого, кроме заголовка: </p> </p> <h6> </h6> <p><strong> См. Онлайн-демонстрацию и код </strong> </h6> <p> Вам нужно только добавить ссылку CSS Bootstrap в раздел <head>.Ниже приведена разметка, использованная для создания этой базовой панели: </p> <table> <tr> <td data-settings="show"> </td> <td> <div> </p> <div> </p> <p> Демонстрация панели в Bootstrap </p> </p> </div> </p> </div> </p> </td> </tr> </table> <p></p> <p> Div с классом panel-body содержит заголовок этой панели. Если вам нужны другие стандартные цвета на панелях, тогда (например) используйте Panel-dangerous для красного, информацию о панели для голубого, панель-primary для синего, panel-success для зеленого и т.вместо классов панели по умолчанию. См. Демонстрацию этого ниже после примера панели с содержимым. </p> <h4> </h4> <p><strong> Демонстрация панели с заголовком и содержанием </strong> </h4> <p> В этом примере панель создается с заголовком и содержимым внутри. Для этого основной div содержит класс панели вместе с классом панели <em> </em>. Следующему элементу div присваивается класс заголовка панели, а за ним - класс тела панели в другом элементе div. Взглянуть: </p> </p> <h6> </h6> <p><strong> См. Онлайн-демонстрацию и код </strong> </h6> <p> <strong> В разметке: </strong> </p> <table> <tr> <td data-settings="show"> </td> <td> <div> </p> <p><div> Заголовок панели </div> </p> <div> </p> <p> Здесь отображается содержимое панели </p> </p> <p> Вы можете разместить простой текст , HTML-таблицы, списки и т. Д.здесь </p> </p> <p> Здесь вы также можете разместить изображения </p> </p> </div> </p> </div> </p> </td> </tr> </table> <p></p> <h4> </h4> <p><strong> Демонстрация различных цветных панелей </strong> </h4> <p> В этой демонстрации ряд панелей создается с использованием контекстных классов, таких как panel-danger, panel-info и т. Д. Посмотрите: </p> </p> <h6> </h6> <p><strong> См. Онлайн-демонстрацию и код </strong> </h6> <p> Ниже приведена разметка, используемая для создания контекстных панелей: </p> <table> <tr> <td data-settings="show"> <p> 1 </p> <p> 2 </p> <p> 3 </p> <p> 4 </p> <p> 5 </p> <p> 6 </p> <p> 7 </p> <p> 8 </p> <p> 9 </p> <p> 10 </p> <p> 11 </p> <p> 12 </p> <p> 13 </p> <p><p> 14 </p> <p> 14 </p> <p> 18 </p> <p> 19 </p> <p> 20 </p> <p> 21 </p> <p> 22 </p> <p> 23 </p> <p> 24 </p> <p> 25 </p> <p> 26 </p> <p> 27 </p> <p> 28 </p> <p> 29 </p> <p> 30 </p> </p> </p> </p> <p> 34 </p> <p> 35 </p> <p> 36 </p> <p> 37 </p> <p> 38 </p> <p> 39 </p> <p> 40 </p> <p> 41 </p> <p> 42 </p> <p> 43 </p> <p> 44 </p> <p> 45 </p> <p> 46 </p> <p> 47 </p> </p> </p> </p> <p> 51 </p> <p> 52 </p> <p> 53 </p> <p> 54 </p> <p> 55 </p> <p> 56 </p> <p> 57 </p> <p> 58 </p> <p> 59 </p> <p> 60 </p> <p> 61 </p> <p> 62 </p> <p> 63 </p> <p> 9 0005 64 </p> <p> 65 </p> <p> 66 </p> <p> 67 </p> <p> 68 </p> <p> 69 </p> </td> <td> <div> </p> <p><div> Заголовок панели </div> </p> <div> </p> <p> Основная панель синего цвета </p> </p> </div> </p> </p></div> </p> </p> <div> </p> <p><div> Заголовок панели </div> </p> <div> </p> <p> Панель-success зеленого цвета </p> </p> </div> </p> </div> </p> </p> </p> <div> </p> <p><div> Заголовок панели </div> </p> <p> > </p> </p> <p> Опасность панели красного цвета </p> </p> </div> </p> </div> </p> </p> <div> </p> <p><div> Заголовок панели </div> </p> <div> </p> <p> Панель-предупреждение оранжевого цвета </p> </p> </div> </p> </div> </p> </p> <div> </p> <p><div> Заголовок панели </div> </p> <div> </p> <p> Информация на панели голубого цвета </p> </p> </div> </p> </div> </p> </td> </tr> </table> <p></p> <h4> </h4> <p><strong> Демонстрация панели с группой списков </strong> </h4> <p> Как упоминалось ранее, вы можете использовать различный контент внутри панели.В этом примере панель создается с помощью списка групп. Посмотрите демонстрацию, щелкнув ссылку или изображение ниже: </p> </p> <h6> </h6> <p><strong> См. Онлайн-демонстрацию и код </strong> </h6> <p> <strong> В разметке: </strong> </p> <table> <tr> <td data-settings="show"> <p> 1 </p> <p> 2 </p> <p> 3 </p> <p> 4 </p> <p> 5 </p> <p> 6 </p> <p> 7 </p> <p> 8 </p> <p> 9 </p> <p> 10 </p> <p> 11 </p> <p> 12 </p> <p> 13 </p> <p><p> 14 </p> <p> 14 </p> <p> 18 </p> <p> 19 </p> <p> 20 </p> <p> 21 </p> <p> 22 </p> <p> 23 </p> <p> 24 </p> <p> 25 </p> <p> 26 </p> <p> 27 </p> <p> 28 </p> <p> 29 </p> </td> <td> <div> </p> <p><div> Заголовок </div> </p> <div> </p> <p> Здесь немного содержания </p> </p> </div> </p> <p> <! - Группа списка внутри панели -> </p> </p> <ul> </p> <li> Элемент группы списка 1 </li> </p> <li> Элемент группы списка 2 </li> </p> <li> Элемент группы списка 3 </li> </p> <li> Элемент группы списка 4 </li> </p> </p> </ul> </p> </p> </div> </p> </td> </tr> </table> <p></p> <h4> </h4> <p><strong> Демонстрация разборных панелей </strong> </h4> <p> В этой демонстрации складная панель Bootstrap создается с помощью CSS.Хотя, в отличие от приведенных выше примеров, вам необходимо включить библиотеки JS jQuery и Bootstrap. </p> <p> Значок глифа используется в правой части панели, который переключает текущее состояние панели. Таким образом, если он открыт, после щелчка по значку панель содержимого скроется, и наоборот. Взглянуть: </p> </p> <h6> </h6> <p><strong> См. Онлайн-демонстрацию и код </strong> </h6> </p> <p> <strong> CSS: </strong> </p> <table> <tr> <td data-settings="show"> <p> 1 </p> <p> 2 </p> <p> 3 </p> <p> 4 </p> <p> 5 </p> <p> 6 </p> <p> 7 </p> <p> 8 </p> <p> 9 </p> <p> 10 </p> <p> 11 </p> <p> 12 </p> <p> 13 </p> <p><p> 14 </p> <p> 14 </p> <p> 18 </p> <p> 19 </p> <p> 20 </p> <p> 21 </p> <p> 22 </p> <p> 23 </p> <p> 24 </p> <p> 25 </p> </td> <td> <p> body {</p> </p> <p> padding: 60 пикселей; </p> </p> <p>} </p> </p> <p>.заголовок панели .colpsible-panel: после {</p> </p> </p> <p> font-family: 'Glyphicons Halflings'; </p> </p> <p> содержание: «\ e114»; </p> </p> <p> поплавок: правый; </p> </p> <p> цвет: # 408080; </p> </p> <p>} </p> </p> <p> .panel-heading .colpsible-panel.collapsed: после {</p> </p> <p> content: "\ e080"; </p> </p> <p>} </p> </td> </tr> </table> <p></p> <p> <strong> В разметке: </strong> </p> <table> <tr> <td data-settings="show"> <p> 1 </p> <p> 2 </p> <p> 3 </p> <p> 4 </p> <p> 5 </p> <p> 6 </p> <p> 7 </p> <p> 8 </p> <p> 9 </p> <p> 10 </p> <p> 11 </p> <p> 12 </p> <p> 13 </p> <p><p> 14 </p> <p> 14 </p> <p> 18 </p> <p> 19 </p> <p> 20 </p> <p> 21 </p> <p> 22 </p> <p> 23 </p> <p> 24 </p> <p> 25 </p> <p> 26 </p> <p> 27 </p> <p> 28 </p> <p> 29 </p> <p> 30 </p> </p> </p> </p> <p> 34 </p> <p> 35 </p> <p> 36 </p> <p> 37 </p> <p> 38 </p> <p> 39 </p> <p> 40 </p> <p> 41 </p> <p> 42 </p> <p> 43 </p> <p> 44 </p> <p> 45 </p> <p> 46 </p> <p> 47 </p> </p> </p> </p> <p> 51 </p> <p> 52 </p> <p> 53 </p> <p> 54 </p> <p> 55 </p> <p> 56 </p> <p> 57 </p> <p> 58 </p> <p> 59 </p> <p> 60 </p> <p> 61 </p> <p> 62 </p> <p> 63 </p> <p> 9 0005 64 </p> <p> 65 </p> <p> 66 </p> <p> 67 </p> <p> 68 </p> <p> 69 </p> <p> 70 </p> <p> 71 </p> <p> 72 </p> <p> 73 </p> <p> 74 </p> <p> 75 </p> <p> 76 </p> <p> 79 </p> <p> 79 </p> <p> 81 </p> <p> 82 </p> <p> 83 </p> <p> 84 </p> <p> 85 </p> <p> 86 </p> <p> 87 </p> <p> 88 </p> <p> 89 </p> <p> 90 </p> <p> 91 </p> <p> 92 </p> <p> 94 </p> </p> </p> </p> <p> 94 </p> </p> </p> <p> 97 </p> <p> 98 </p> <p> 99 </p> </td> <td> <div class = "container"> </p> </p> </p> <div> </p> <div> </p> <div> <p> 9h0005> </p> <p> <p> <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> </p> </p> <p> Заголовок складного объекта </p> </p> <p> </a> </p> </p> </h5> </p> </div> </p> <div> </p> <div> </p> <p> Здесь появляется содержимое панели, где вы можете использовать текст, изображения и даже видео.Вы также можете разместить здесь HTML-таблицы, список и т. Д. </p> </p> </div> </p> </div> </p> </div> </p> <div> </p> <div> </p> <p> 9h5> a data-toggle = "collapse" data-parent = "# accordion" href = "# collapseTwo"> </p> </p> <p> Заголовок 2 для сворачиваемого элемента </p> </p> <p> </a> </p> </p> </h5> </p> </div> </p> <div> </p> <div> </p> <p> Здесь появляется содержимое панели, где вы можете использовать текст, изображения и даже видео.Вы также можете разместить здесь HTML-таблицы, список и т. Д. </p> </p> </div> </p> </div> </p> </div> </p> <div> </p> <div> </p> <p> 9h5> a data-toggle = "collapse" data-parent = "# accordion" href = "# collapseThree"> </p> </p> <p> Заголовок 3 для сворачиваемого элемента </p> </p> <p> </a> </p> </p> </h5> </p> </div> </p> <div> </p> <div> </p> <p> Здесь появляется содержимое панели, где вы можете использовать текст, изображения и даже видео.</p> <div id="comments" class="comments-area"> <div id="respond" class="comment-respond"> <h3 id="reply-title" class="comment-reply-title">Добавить комментарий <small><a rel="nofollow" id="cancel-comment-reply-link" href="/raznoe/paneli-bootstrap-bootstrap-butstrap-paneli.html#respond" style="display:none;">Отменить ответ</a></small></h3><form action="https://jumper.su/wp-comments-post.php" method="post" id="commentform" class="comment-form"><p class="comment-notes"><span id="email-notes">Ваш адрес email не будет опубликован.</span> <span class="required-field-message">Обязательные поля помечены <span class="required">*</span></span></p><p class="comment-form-comment"><label for="comment">Комментарий <span class="required">*</span></label> <textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required="required">

Имя *

Email *

Сайт