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

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

Панели

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

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

Пример

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

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

Panel Heading

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>

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

Переключайте видимость контента в вашем проекте несколькими классами, нашим плагином переключения видимости и JavaScript.

Как работает

Плагин свертывания JavaScript используется для показа\скрытия контента. Кнопки или ссылки используются как триггеры, «нацеленные» на определенные элементы, которые надо скрыть\показать. Изменение состояния элемента происходит с помощью height — изменением его с текущего до 0. В связи с тем, как CSS обрабатывает анимации, мы не можете использовать padding в элементе класса .collapse. Вместо padding используйте независимый «оборачивающий» элемент.

Примеры

Кликните по кнопке внизу, чтобы показать и скрыть элемент с помощью изменения его класса:

• .collapse скрывает содержимое
• .collapsing применяется во время переходов
• .collapse.show показывает содержимое

Вы можете использовать ссылку с атрибутом href или кнопку с атрибутом data-target. В обоих случаях требуется атрибут data-toggle="collapse".

Ссылка с href


Кнопка с data-target

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.

<p>
  <a data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
    Ссылка с href
  </a>
  <button type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Кнопка с data-target
  </button>
</p>
<div>
  <div>
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  </div>
</div>

Взаимодействие со множественными объектами

Кнопки и ссылки <button> и <a> могут показывать и прятать сразу несколько элементов, обращаясь к их атрибутам href или data-target через селектор jQuery. Несколько <button> или <a> могут показывать или прятать один элемент, если каждый из них обращается к элементу через свои атрибуты href или data-target.

Переключить 1-ый элемент
Переключить 2-ой элемент
Переключить оба элемента

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.

<p>
  <a data-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Переключить 1-ый элемент</a>
  <button type="button" data-toggle="collapse" data-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Переключить 2-ой элемент</button>
  <button type="button" data-toggle="collapse" data-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Переключить оба элемента</button>
</p>
<div>
  <div>
    <div>
      <div>
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
      </div>
    </div>
  </div>
  <div>
    <div>
      <div>
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
      </div>
    </div>
  </div>
</div>

Разворачиваемые панели

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

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven’t heard of them accusamus labore sustainable VHS.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven’t heard of them accusamus labore sustainable VHS.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven’t heard of them accusamus labore sustainable VHS.

<div>
  <div>
    <div>
      <h5>
        <button type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Разворачиваемая панель #1
        </button>
      </h5>
    </div>

    <div aria-labelledby="headingOne" data-parent="#accordionExample">
      <div>
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div>
    <div>
      <h5>
        <button type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Разворачиваемая панель #2
        </button>
      </h5>
    </div>
    <div aria-labelledby="headingTwo" data-parent="#accordionExample">
      <div>
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div>
    <div>
      <h5>
        <button type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Разворачиваемая панель #3
        </button>
      </h5>
    </div>
    <div aria-labelledby="headingThree" data-parent="#accordionExample">
      <div>
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>

Доступность

Добавьте aria-expanded к «контролирующему» элементу. Этот атрибут явно передает текущее состояние скрываемого элемента, привязанного к «контролирующему» элементу, «экранным читалкам» и прочим вспомогательным технологиям. Если скрываемый элемент скрыт по умолчанию, его aria-expanded должен быть «false» aria-expanded="false". Если раньше вы определяли скрываемый элемент показываемым по умолчанию через класс show, теперь используйте вместо этого класса aria-expanded="true" в «контролирующем» элементе. Основываясь на том, показан или скрыт элемент, плагин будет автоматически переключать этот атрибут (через JavaScript либо через отслеживание клика по другому «контролирующему» элементу, связанному с данным скрываемым элементом). If the control element’s HTML element is not a button (e.g., an <a> or <div>), the attribute role="button" should be added to the element.

Дополнение: если ваш «контролирующий» элемент взаимодействует с одним скрываемым элементом – т.е. атрибут data-target указывает на #id – вы можете добавить дополнительный атрибут aria-controls к «контролирующему» элементу, содержащему #id этого скрываемого элемента.

Заметим, что текущая версия Bootstrap не работает с различными событиями взаимодействия с клавиатурой, описанными в WAI-ARIA Authoring Practices 1.1 accordion pattern — и вам потребуется подключить эти события с помощью обычного JavaScript.

Использование

Плагин «скрытия\показа» использует несколько классов для работы c даже «тяжелыми» элементами:

• .collapse прячет содержимое
• .collapse.show показывает содержимое
• .collapsing добавляется, когда переход начинается и удаляется с его завершением

Эти классы можно найти в _transitions.scss.

Через атрибуты

Добавьте в элемент атрибуты data-toggle="collapse" и data-target для автоматического контроля одного или более скрываемых элементов. Атрибут data-target принимает CSS-селектор для применения к нему поведения toggle’a. Удостоверьтесь, что добавили в скрываемый элемент класс collapse. Если он должен быть показан по умолчанию, добавьте в него класс show.

Для добавления компактно расположенной (см. Разворачиваемые панели для экономии места) группы «контролирующих» элементов добавьте атрибут data-parent="#selector". Обратитесь к демо для просмотра в действии.

Через JavaScript

Активируйте вручную:

$('.collapse').collapse()

Параметры

Параметры можно передавать через атрибуты или JavaScript. Чтобы сделать это через атрибуты, добавьте имя параметра к data-, например data-parent="".

Методы

Асинхронные методы и переходы

Все методы API асинхронны и запускают переход. Они возвращаются функции, вызвавшей их, с началом перехода, но до его конца. Плюс, вызов метода к компоненту, выполняющему переход, будет проигнорирован.

Смотрите документацию по JavaScript.

.collapse(options)

Задействует ваше содержимое как скрываемый элемент. Принимает object дополнительных опций.

$('#myCollapsible').collapse({
  toggle: false
})

.collapse('toggle')

Задействует на скрываемом элементе функциональность toggle’а (hide\show). Возвращается к функции-вызову до того, как элемент показан или скрыт (т.е. до отработки событий shown.bs.collapse или hidden.bs.collapse event occurs).

.collapse('show')

Показывает скрываемый элемент. Возвращается к функции-вызову до того, как элемент показан или скрыт (т.е. до отработки события shown.bs.collapse).

.collapse('hide')

Прячет скрываемый элемент. Возвращается к функции-вызову до того, как элемент показан или скрыт (т.е. до отработки события hidden.bs.collapse).

.collapse('dispose')

Уничтожает «коллпас» элемента.

События

Класс «коллапса» в Bootstrap содержит несколько событий для вовлечения, взаимодействия и связи иных событий JS с функциональностью «коллапса».

$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})

Навигационная панель · 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>

Web-разработка • HTML и CSS

Для удобного выделения блоков с текстом предусмотрен компонент «Панель». Чтобы создать панель, необходимо заключить текст в блочный элемент div с классом panel-body. Который, в свою очередь, заключить в ещё один блочный элемент div с классами panel и panel-default.

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

Чтобы добавить заголовок:

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

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

Чтобы добавить подвал:

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

К панелям, как и к большинству других компонентов, можно применять дополнительные классы, которые выделяют её с помощью цвета:

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

В панелях можно размещать таблицы:

<div>
    <div>Заголовок панели</div>
    <div>
        <p>...</p>
    </div>
    <table>
        ...
    </table>
</div>

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

<div>
    <div>Заголовок панели</div>
    <table>
        ...
    </table>
</div>

Внутри панели можно размещать групповые списки:

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

Поиск:
Bootstrap • CSS • HTML • Web-разработка • Верстка • Фреймворк

Примеры · Bootstrap v5.0

Фрагменты

Общие шаблоны для создания сайтов и приложений, основанных на существующих компонентах и утилитах с настраиваемым CSS и т.д.

Заголовки

Отобразите свой брендинг, навигацию, поиск и многое другое с помощью этих компонентов заголовка.

Герои

Создайте сцену на своей домашней странице с помощью героев с четкими призывами к действию.

Функции

Объясните особенности, преимущества или другие детали Вашего маркетингового контента.

Боковые панели

Общие шаблоны навигации идеально подходят для макетов вне холста или нескольких столбцов.

Пользовательские компоненты

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

Альбом

Простой одностраничный шаблон для фотогалереи, портфолио и т.д.

Ценообразование

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

Оформление заказа

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

Продукт

Экономичная маркетинговая страница, ориентированная на продукт, с обширной сеткой и изображениями.

Обложка

Одностраничный шаблон для создания простых и красивых домашних страниц.

Карусель

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

Блог

Журнал как шаблон блога с заголовком, навигацией, избранным контентом.

Панель

Базовая оболочка панели администратора с фиксированной боковой панелью и навигационной панелью.

Форма входа

Индивидуальный макет и дизайн формы для простой формы входа.

Закрепленный футер

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

Джамботрон

Используйте утилиты для воссоздания и улучшения jumbotron Bootstrap 4.

Фреймворк

Примеры, которые сосредоточены на реализации использования встроенных компонентов, предоставляемых Bootstrap.

Сетка

Несколько примеров макетов сетки со всеми четырьмя уровнями, вложенностью и т.д.

Панели навигации

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

Панели навигации

Демонстрация всех адаптивных и контейнерных опций для навигационной панели.

Панель навигации вне холста

Превратите расширяемую панель навигации в скользящее меню вне холста (не использует наш компонент вне холста).

RTL

Посмотрите, как работает RTL-версия Bootstrap с этими модифицированными примерами пользовательских компонентов.

Функция RTL все еще является экспериментальной и, вероятно, будет развиваться в соответствии с отзывами пользователей. Заметили что-то или хотите предложить улучшение? Откройте вопрос, мы будем рады узнать Ваше мнение.

Альбом RTL

Простой одностраничный шаблон для фотогалерей, портфолио и т.д.

Оформление заказа RTL

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

Карусель RTL

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

Блог RTL

Журнал как шаблон блога с заголовком, навигацией, избранным контентом.

Панель RTL

Базовая оболочка панели администратора с фиксированной боковой панелью и навигационной панелью.

Интеграции

Интеграции с внешними библиотеками.

Masonry

Объедините возможности сетки Bootstrap и макета Masonry.

В будущее с темами Bootstrap

Вам нужно нечто большее, чем эти примеры? Поднимите Bootstrap на новый уровень с премиальными темами из официальной торговой площадки Bootstrap Themes. Они созданы как собственные расширенные фреймворки, богатые новыми компонентами и плагинами, документацией и мощными инструментами сборки.

Обзор тем

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

Панели

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

Панели

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

Пример

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

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

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

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

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

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

Пример

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

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

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

Пример

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

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

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

  

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

  

  
    Падать
     
  
  

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

  

  
    Dropup
     
  
  

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

  

  ...
  

  

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

  

  ...
  
 
  ...
  

  

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

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

  

  
 ... 
  
 ... 
  
 ... 
  

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

  

   1 
   2 

  

    
      Падать
       
    
    

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

  

  ...
  

  

  
    Действие  
  
  

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

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

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

  

   Действие 
  
     
     Переключить раскрывающийся список 
  
  

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

Размер

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

  

  
    Большая кнопка  
  
  

    ...
  




  
    Маленькая кнопка  
  
  

    ...
  




  
    Очень маленькая кнопка  
  
  

    ...
  
  

Выпадающий вариант

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

  

   Выпадающее 
  
     
     Переключить раскрывающийся список 
  
  

    
  
  

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

Текстовый

только s

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

Избегайте использования здесь элементов </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-describeby = "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%BD%D0%B0%D0%B4%D1%81%D1%82%D1%80%D0%BE%D0%B9%D0%BA%D0%B8"></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="#"> <img class="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> (текущий) </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-3"></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 в </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"></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> Mark </td> <td> Otto </td> <td> @mdo </td> </tr> <p> 916 916 916 916 916 916 916 916 Thin </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>161625 916 932 916 916 916 916 Thin Якоба 916 932 916 Thu </p> <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="Bootstrap_4_Panels_-_%D0%BF%D1%80%D0%B8%D0%BC%D0%B5%D1%80%D1%8B_%D0%B8_%D1%80%D1%83%D0%BA%D0%BE%D0%B2%D0%BE%D0%B4%D1%81%D1%82%D0%B2%D0%BE_%D0%91%D0%B0%D0%B7%D0%BE%D0%B2%D0%BE%D0%B5_%D0%B8_%D1%80%D0%B0%D1%81%D1%88%D0%B8%D1%80%D0%B5%D0%BD%D0%BD%D0%BE%D0%B5_%D0%B8%D1%81%D0%BF%D0%BE%D0%BB%D1%8C%D0%B7%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5"></span> Bootstrap 4 Panels - примеры и руководство. Базовое и расширенное использование <span class="ez-toc-section-end"></span></h2> <h3><span class="ez-toc-section" id="%D0%9A%D0%BE%D0%BC%D0%BF%D0%B8%D0%BB%D1%8F%D1%86%D0%B8%D1%8F_%D0%B8_%D0%BD%D0%B0%D1%81%D1%82%D1%80%D0%BE%D0%B9%D0%BA%D0%B0"></span> Компиляция и настройка<br /> <span class="ez-toc-section-end"></span></h3> <p> Чтобы еще больше уменьшить вес пакета MDBootstrap, вы можете скомпилировать свой собственный пакет, содержащий только<br /> эти компоненты и<br /> функции, которые вам нужны. </p> <p> Если вам нужна дополнительная помощь в компиляции вашего пользовательского пакета, воспользуйтесь нашим руководством по компиляции и настройке.</p> <p> Руководство по компиляции и настройке</p> <p> Карта зависимостей файлов SCSS в MDBootstrap: </p><pre> <code> Легенда: '->' означает 'требуется' Все бесплатные и профессиональные файлы требуют файлов из каталога 'core' 'none' означает 'этот компонент не требует ничего, кроме файлов ядра' Файл, заключенный в ``, означает, что этот файл делает базовый компонент красивее, но это не обязательно для правильной работы. Для всех компонентов PRO требуется файл pro / _variables.scss. scss / | | - ядро ​​/ | | | | - бутстрап / | | | - _функции.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 -> нет | | - _вход-группа.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 | | - _степеры.scss -> бесплатно / _buttons.scss | | - _blog.scss -> нет | | - _toasts.scss -> бесплатно / _buttons.scss | | - _animations.scss -> нет | | - _charts.scss -> нет | | - _progress.scss -> нет | | - _scrollbar.scss -> нет | | - _skins.scss -> нет | | - _depreciated.scss | `- _custom-skin.scss `- _custom-styles.scss `- _custom-variables.scss `- mdb.scss </code> </pre><p> Карта зависимостей модулей JavaScript в MDBootstrap: </p><pre> <code> Легенда: '->' означает 'требуется' Все файлы требуют jQuery и начальной загрузки.js js / ├── dist / │ ├── buttons.js │ ├── cards.js │ ├── character-counter.js │ ├── chip.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 -> поставщик / velocity.js, vendor / hammer.js, vendor / jquery.hammer.js │ └── smooth-scroll.js ├── _intro-mdb-pro.js ├── modules.js ├── src / │ ├── buttons.js │ ├── cards.js │ ├── character-counter.js │ ├── chip.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 │ ├── предварительная нагрузка.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 </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> <</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> name </code> <code> </code> </code> <code> </code> </code> </code> </code> </code> </code> <code> = </code> <code> "ширина = ширина устройства, начальный масштаб = 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>000 </code>000 <code> </p> <p> </code>000 <code> </p> <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>0009000 </code>000 </code>000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 </code>000 </code>000 </code>000 </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> дел </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> класс </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> <p> </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="twitter-bootstrap_Tutorial_-_%D0%9F%D0%B0%D0%BD%D0%B5%D0%BB%D0%B8"></span> twitter-bootstrap Tutorial - Панели <span class="ez-toc-section-end"></span></h2> <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-6"></span> Базовый пример <span class="ez-toc-section-end"></span></h3> <p> По умолчанию все, что делает <code> .panel </code>, это применяет некоторую базовую рамку и отступы для содержания некоторого содержимого.</p><pre> <code> <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> .panel-heading </code>. Вы также можете включить любые <code> </p> <h2><span class="ez-toc-section" id="i"></span> - <span class="ez-toc-section-end"></span></h2> <h6> </h6> <p></code> с классом <code> .panel-title </code>, чтобы добавить предварительно стилизованный заголовок. Однако размеры шрифта <code> </p> <h2><span class="ez-toc-section" id="i-2"></span> - <span class="ez-toc-section-end"></span></h2> <h6> </h6> <p></code> заменяются на <code>.панельная товарная позиция </code>. </p> <p> Для правильной раскраски ссылок обязательно размещайте ссылки в заголовках в пределах <code> .panel-title </code>. </p><pre> <code> <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-3"></span> Заголовок панели <span class="ez-toc-section-end"></span></h4> </div> <div> Содержание панели </div> </div> </code> </pre><p> Перенос кнопок или вторичного текста в <code>.нижний колонтитул </code>. Обратите внимание, что нижние колонтитулы <strong> панели </strong> не наследуют цвета и границы при использовании контекстных вариаций, поскольку они не предназначены для размещения на переднем плане. </p><pre> <code> <div> <div> Содержание панели </div> <div> Нижний колонтитул панели </div> </div> </code> </pre><h2><span class="ez-toc-section" id="%D0%9F%D0%B0%D0%BD%D0%B5%D0%BB%D1%8C_%D0%BD%D0%B0%D1%87%D0%B0%D0%BB%D1%8C%D0%BD%D0%BE%D0%B9_%D0%B7%D0%B0%D0%B3%D1%80%D1%83%D0%B7%D0%BA%D0%B8"></span> Панель начальной загрузки <span class="ez-toc-section-end"></span></h2> <h3><span class="ez-toc-section" id="%D0%9E%D0%B1%D0%B7%D0%BE%D1%80"></span> Обзор <span class="ez-toc-section-end"></span></h3> <p> Часто нам нужно разделить несколько коротких (или не очень) частей информации, чтобы заставить их встать и привлечь внимание посетителя - например, перечислить некоторые полезные функции, представить список статей с кратким резюме и одним мощным изображение и так далее и так далее.Поэтому нам нужен удобный инструмент, чтобы красиво обернуть наш контент красивым и отзывчивым способом, чтобы он был красиво и аккуратно представлен на наших страницах. В последней версии самого популярного адаптивного фреймворка - Bootstrap 3 мы использовали в основном элементы панели, эскиза и колодца, предоставляя нам контейнеры-коробки с тонкой рамкой, слегка закругленными углами и, в конечном итоге, легким 3D-эффектом. В последней версии Bootstrap 4 их больше нет. Их полностью заменяет элемент карты, утверждающий, что он способен почти на все, что могут сделать ветераны, но только лучше.Пришло время узнать это получше. </p> <h3><span class="ez-toc-section" id="%D0%A1%D0%BF%D0%BE%D1%81%D0%BE%D0%B1%D1%8B_%D0%BF%D1%80%D0%B8%D0%BC%D0%B5%D0%BD%D0%B5%D0%BD%D0%B8%D1%8F_%D0%BF%D0%B0%D0%BD%D0%B5%D0%BB%D0%B8_%D0%BD%D0%B0%D1%87%D0%B0%D0%BB%D1%8C%D0%BD%D0%BE%D0%B9_%D0%B7%D0%B0%D0%B3%D1%80%D1%83%D0%B7%D0%BA%D0%B8"></span> Способы применения панели начальной загрузки: <span class="ez-toc-section-end"></span></h3> <p> Карточки представляют собой контейнеры с легким стилем, способные нести практически любой HTML-контент, а также иметь множество предопределенных вариантов стилей для правильной демонстрации его содержимого. Он также может иметь верхний и нижний колонтитулы. </p> <p> Чтобы создать карту, нам сначала понадобится элемент <code> .card </code>, чтобы обернуть все это. Внутри него отдельные обертки для заголовка <code>.card-header </code>, фактическое содержимое карты <code> .card-block </code> и нижний колонтитул <code> .card-footer </code> должны иметь место, а верхний и нижний колонтитулы являются необязательными и могут быть опущены, если они вам не нужны, <code>. card-block </code> является важной частью - он красиво обертывает ваш контент, обеспечивая небольшое отступление. </p> <p> Внутри элемента <code> .card-block </code> у вас может быть заголовок, несущий класс <code> .card-title </code>, который может быть назначен элементам <code> h2 – h6 </code>, а также обычному <code> </p> <div> </code> и, конечно, - приходит текст, заключенный в абзац с <code>.карточка-текст </code> кл. Если вы решили вставить несколько ссылок - присвойте им класс <code> .card-link </code>, чтобы они были четко разделены для лучшего взаимодействия с пользователем. </p> <p> Контекстные классы цветов можно использовать для дальнейшего упрощения стиля целых элементов карты - просто назначьте <code> .card- ~ один из контекстных цветов здесь, например, основной, успех, информация или опасность ~ </code>, для основной оболочки <code> .card </code> и если фон становится слишком темным для того, чтобы текст был достаточно разборчивым - также добавьте <code>.card-inverse </code>, чтобы инвертировать цвет текста. Вы также можете стилизовать только цвет границы с помощью контекстной палитры - это достигается путем назначения класса <code> .card-outline- ~ необходимого цвета ~ </code> снова основному элементу <code> .card </code>. </p> <p> Как упоминалось выше, <code> .card-block </code> предназначен для обертывания содержимого, оставляя вокруг него красивое заполнение. Но когда дело доходит до изображений, этого можно избежать и распределить изображение по всей ширине элемента. Чтобы получить появление хитов, просто поместите тег <code> </p> <div> <img> </div> <p> </code> за пределами <code>.card-block </code>, чтобы избежать отступов, в конечном итоге добавив <code> style = ”width: 100%; </code>, чтобы убедиться, что он будет правильно изменять размер, всегда заполняя контейнер. Есть несколько весьма полезных классов выравнивания, таких как <code> .card-img-top </code> и <code> .card-img-bottom </code>, выравнивающих изображение вверху или внизу карты. И если вы хотите разместить его где-то между текстом, просто сломайте <code> .card-block </code>, вставьте изображение и начните новый <code> .card-block </code>, чтобы вставить контент, который вам нужно разместить после изображения - несколько блоков карты поддерживается.В конце концов, вы также можете добавить текст поверх изображения - оберните его внутри <code> </p> <div> </code>, содержащего класс <code> .img-overlay </code>. </p> <p> Несколько слов о макете - карточки будут заполнять все горизонтальное пространство, доступное по умолчанию, поэтому рекомендуется ограничить это, разместив их внутри некоторых элементов сетки. Таким образом, вы можете добиться их предсказуемого поведения. </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. </p> <p> Ниже приведена иллюстрация основной карточки с комбинированным содержимым и указанной шириной. У карточек нет определенной ширины для начала, поэтому они естественным образом заполняют всю ширину своего родительского элемента. Это плавно модифицируется с множеством возможностей калибровки. </p><pre> <code> <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> <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%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%92%D0%B8%D0%B4%D1%8B_%D0%B2%D0%B5%D0%B1-%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> <h3><span class="ez-toc-section" id="%D0%91%D0%BB%D0%BE%D0%BA%D0%B8"></span> Блоки <span class="ez-toc-section-end"></span></h3> <p> Строительным блоком карты является <code> .card-block </code>. Используйте его всякий раз, когда вам нужен мягкий раздел на карточке. </p><pre> <code> <div> <div> Это какое-то сообщение в карточном блоке.</div> </div> </code> </pre><h3><span class="ez-toc-section" id="%D0%98%D0%BC%D0%B5%D0%BD%D0%B0_%D1%81%D0%BE%D0%BE%D0%B1%D1%89%D0%B5%D0%BD%D0%B8%D1%8F_%D0%B8_%D1%81%D1%81%D1%8B%D0%BB%D0%BA%D0%B8"></span> Имена, сообщения и ссылки <span class="ez-toc-section-end"></span></h3> <p> Субтитры используются путем помещения <code> .card-subtitle </code> в тег <code> <h *> </code>. Если элементы <code> .card-title </code> и <code> .card-subtitle </code> вставлены в элемент <code> .card-block </code>, заголовок карты и подзаголовок хорошо выровнены. </p><pre> <code> <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"></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><h3><span class="ez-toc-section" id="%D0%98%D0%BB%D0%BB%D1%8E%D1%81%D1%82%D1%80%D0%B0%D1%86%D0%B8%D0%B8"></span> Иллюстрации <span class="ez-toc-section-end"></span></h3> <p> <code> .card-img-top </code> помещает картинку в верхнюю часть карточки. С <code> .card-text </code> текст помещается на карту. Текст внутри <code> .card-text </code> также может быть стилизован с помощью стандартных тегов HTML. </p><pre> <code> <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> Небольшой пример сообщения, которое будет основано на названии карточки, а также составляет основную часть веб-содержимого карточки.</p> </div> </div> </code> </pre><h3><span class="ez-toc-section" id="%D0%9B%D0%B8%D1%81%D1%82%D0%B8%D0%BD%D0%B3%D0%BE%D0%B2%D1%8B%D0%B5_%D0%B3%D1%80%D1%83%D0%BF%D0%BF%D1%8B"></span> Листинговые группы <span class="ez-toc-section-end"></span></h3> <p> Создание списков содержимого карточки с помощью группы списков очистки. </p><pre> <code> <div> <ul> <li> Cras justo odio </li> <li> Dapibus ac facilisis в </li> <li> Вестибулум на Эросе </li> </ul> </div> </code> </pre><p> Комбинируйте и сопоставляйте различные типы контента, чтобы создать желаемую карту, или бросьте туда все. Здесь отображаются форматы изображений, блоки, стили сообщений и группа списков - все они заключены в карточку фиксированной ширины.</p><pre> <code> <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> <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> <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><h3><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></h3> <p> Добавьте дополнительный верхний и / или нижний колонтитул внутри карточки.</p><pre> <code> <div> <div> Рекомендуемые </div> <div> <h5><span class="ez-toc-section" id="%D0%A2%D0%B5%D1%80%D0%B0%D0%BF%D0%B8%D1%8F_%D1%83%D0%BD%D0%B8%D0%BA%D0%B0%D0%BB%D1%8C%D0%BD%D1%8B%D0%BC%D0%B8_%D0%BD%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D1%8F%D0%BC%D0%B8"></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><pre> <code> <div> <h4><span class="ez-toc-section" id="%D0%A0%D0%B5%D0%BA%D0%BE%D0%BC%D0%B5%D0%BD%D0%B4%D1%83%D0%B5%D0%BC%D0%BE%D0%B5"></span> Рекомендуемое <span class="ez-toc-section-end"></span></h4> <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><pre> <code> <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><pre> <code> <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-2"></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> <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%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></h3> <p> Используя сетку, расположите карточки по столбцам и рядам по мере необходимости. </p><pre> <code> <div> <div> <div> <div> <h4><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></h4> <p> С вспомогательным текстом ниже в качестве естественного перехода к дополнительному содержанию.</p> <a href="#"> куда-нибудь </a> </div> </div> </div> <div> <div> <div> <h4><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></h4> <p> С вспомогательным текстом ниже в качестве естественного перехода к дополнительному содержанию. </p> <a href="#"> куда-нибудь </a> </div> </div> </div> </div> </code> </pre><h3><span class="ez-toc-section" id="%D0%9A%D0%BE%D0%BC%D0%BC%D1%83%D0%BD%D0%B0%D0%BB%D1%8C%D0%BD%D1%8B%D0%B5_%D1%83%D1%81%D0%BB%D1%83%D0%B3%D0%B8"></span> Коммунальные услуги <span class="ez-toc-section-end"></span></h3> <p> Используйте несколько доступных утилит для определения размера карты, чтобы быстро определить размер карты.</p><pre> <code> <div> <div> <h4><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></h4> <p> С вспомогательным текстом ниже в качестве естественного перехода к дополнительному содержанию. </p> <a href="#"> Кнопка </a> </div> </div> <div> <div> <h4><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></h4> <p> С поддерживающим посланием, перечисленным ниже, как естественным началом к ​​дополнительному веб-контенту. </p> <a href="#"> Кнопка </a> </div> </div> </code> </pre><pre> <code> <div> <div> <h4><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></h4> <p> С вспомогательным текстом ниже в качестве естественного вступления к добавленному материалу.</p> <a href="#"> куда-нибудь </a> </div> </div> </code> </pre><h3><span class="ez-toc-section" id="%D0%A0%D0%B0%D0%B7%D0%BC%D0%B5%D1%89%D0%B5%D0%BD%D0%B8%D0%B5_%D1%81%D0%BE%D0%BE%D0%B1%D1%89%D0%B5%D0%BD%D0%B8%D0%B9"></span> Размещение сообщений <span class="ez-toc-section-end"></span></h3> <p> Вы можете быстро изменить расположение сообщения любого типа карты - в целом или в отдельных компонентах - с помощью классов выравнивания текста. </p><pre> <code> <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> <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> </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_%D0%BF%D0%BE_%D1%81%D0%B0%D0%B9%D1%82%D1%83"></span> Навигация по сайту <span class="ez-toc-section-end"></span></h3> <p> Добавьте навигацию в заголовок (или блок) карточки с помощью элементов навигации Bootstrap. </p><pre> <code> <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-9"></span> Особые титулы <span class="ez-toc-section-end"></span></h5> <p> С вспомогательным текстом ниже в качестве естественного перехода к дополнительному содержанию.</p> <a href="#"> куда-нибудь </a> </div> </div> </code> </pre><pre> <code> <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><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"></span> Изображения <span class="ez-toc-section-end"></span></h3> <p> Карты </p> <p> включают несколько вариантов работы с изображениями. Выберите из добавления «колпачков изображений», возможно, в конце карточки, закрытия изображений содержимым карточки или просто встраивания изображения в карточку. </p> <h3><span class="ez-toc-section" id="%D0%97%D0%B0%D0%B3%D0%BE%D0%BB%D0%BE%D0%B2%D0%BA%D0%B8_%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></h3> <p> Как и нижние колонтитулы и верхние колонтитулы, карточки могут иметь верхнюю и нижнюю «колонтитулы» - изображения вверху или внизу карточки. </p><pre> <code> <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> <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> <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-6"></span> Название карточки <span class="ez-toc-section-end"></span></h5> <p> Это более широкая карточка с вспомогательным текстом ниже, который естественным образом ведет к дополнительному содержанию.Этот контент немного длиннее. </p> <p> <small> Последнее обновление 3 мин. назад </small> </p> </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> </code> </pre><h3><span class="ez-toc-section" id="%D0%9E%D0%B1%D0%BB%D0%BE%D0%B6%D0%BA%D0%B0_%D1%81_%D0%B8%D0%BB%D0%BB%D1%8E%D1%81%D1%82%D1%80%D0%B0%D1%86%D0%B8%D0%B5%D0%B9"></span> Обложка с иллюстрацией <span class="ez-toc-section-end"></span></h3> <p> Превратите иллюстрацию в фон карты и наложите ее текст. Судя по рисунку, вам может потребоваться или не потребоваться <code> .card-inverse </code> (см. Ниже). </p><pre> <code> <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> <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> </div> </code> </pre><h3><span class="ez-toc-section" id="%D0%A0%D0%B0%D0%B7%D0%BD%D0%BE%D0%B2%D0%B8%D0%B4%D0%BD%D0%BE%D1%81%D1%82%D0%B8_%D0%BA%D0%B0%D1%80%D1%82"></span> Разновидности карт <span class="ez-toc-section-end"></span></h3> <p> Карты </p> <p> предоставляют различные возможности для персонализации фона, границ и цвета. </p> <h3><span class="ez-toc-section" id="%D0%9F%D0%B5%D1%80%D0%B5%D0%B2%D0%B5%D1%80%D0%BD%D1%83%D1%82%D1%8B%D0%B9_%D1%82%D0%B5%D0%BA%D1%81%D1%82"></span> Перевернутый текст <span class="ez-toc-section-end"></span></h3> <p> По умолчанию в карточках используется темный текст и предполагается светлый фон. Вы можете изменить это, переключив цвет текста внутри, в дополнение к цвету подкомпонентов карты, с помощью <code>.карта-инверсия. </code> Затем укажите темный <code> background-color </code> и <code> border-color </code> для этого. </p> <p> Вы также можете использовать <code> .card-inverse </code> с версиями контекстного фона. </p><pre> <code> <div> <div> <h4><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></h4> <p> С вспомогательным текстом ниже в качестве естественного перехода к дополнительному содержанию. </p> <a href="#"> куда-нибудь </a> </div> </div> </code> </pre><h3><span class="ez-toc-section" id="%D0%92%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B_%D1%84%D0%BE%D0%BD%D0%B0"></span> Варианты фона <span class="ez-toc-section-end"></span></h3> <p> Карты </p> <p> включают в себя собственные классы вариантов для быстрого изменения <code> background-color </code> и <code> border-color </code> карты.Более темные цвета требуют использования <code>. Card-inverse </code>. </p><pre> <code> <div> <div> <цитата> <p> Lorem ipsum dolor sit amet, conctetur adipiscing elit. Целое число означает анте. </p> <footer> Кто-то, известный в <cite title = "Source Title"> Source Title </cite> </footer> </blockquote> </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> <div> <div> <цитата> <p> Lorem ipsum dolor sit amet, conctetur adipiscing elit. Целое число означает анте. </p> <footer> Кто-то, известный в <cite title = "Source Title"> Source Title </cite> </footer> </blockquote> </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> <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><h4><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_%D1%81%D0%BE%D0%B2%D1%80%D0%B5%D0%BC%D0%B5%D0%BD%D0%BD%D1%8B%D0%BC_%D0%B0%D1%81%D1%81%D0%B8%D1%81%D1%82%D0%B8%D0%B2%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></h4> <p> Использование цвета для включения значения обеспечивает только визуальную индикацию, которая не будет передана пользователям вспомогательных технологий, например программ чтения с экрана.Убедитесь, что информация, обозначенная цветом, либо очевидна из самого материала (например, видимый текст), либо представлена ​​с помощью альтернативных средств, включая дополнительное сообщение, скрытое с помощью класса <code> .sr-only </code>. </p> <h3><span class="ez-toc-section" id="%D0%9A%D0%BE%D0%BD%D1%82%D1%83%D1%80%D0%BD%D1%8B%D0%B5_%D0%BA%D0%B0%D1%80%D1%82%D1%8B"></span> Контурные карты <span class="ez-toc-section-end"></span></h3> <p> Ищете цветную карточку, но не нуждаетесь в ярких цветах фона? Замените классы модификаторов по умолчанию на классы <code> .card-outline- * </code>, чтобы стилизовать только <code> border-color </code> карты. </p><pre> <code> <div> <div> <цитата> <p> Lorem ipsum dolor sit amet, conctetur adipiscing elit.Целое число означает анте. </p> <footer> Кто-то, известный в <cite title = "Source Title"> Source Title </cite> </footer> </blockquote> </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> <div> <div> <цитата> <p> Lorem ipsum dolor sit amet, conctetur adipiscing elit.Целое число означает анте. </p> <footer> Кто-то, известный в <cite title = "Source Title"> Source Title </cite> </footer> </blockquote> </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> <div> <div> <цитата> <p> Lorem ipsum dolor sit amet, conctetur adipiscing elit.Целое число означает анте. </p> <footer> Кто-то, известный в <cite title = "Source Title"> Source Title </cite> </footer> </blockquote> </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><h3><span class="ez-toc-section" id="%D0%A0%D0%B0%D1%81%D1%81%D1%82%D0%B0%D0%BD%D0%BE%D0%B2%D0%BA%D0%B0_%D0%BA%D0%B0%D1%80%D1%82"></span> Расстановка карт <span class="ez-toc-section-end"></span></h3> <p> Наряду со стилизацией содержимого карточек Bootstrap содержит ряд альтернатив для размещения коллекций карточек.В настоящее время такие варианты макета еще не работают. </p> <h3><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></h3> <p> Используйте группы карточек для визуализации карточек как одного связанного элемента с равными столбцами ширины и высоты. Группы карт работают с дисплеем <code>: гибкий; </code>, чтобы добиться их единообразной калибровки. </p><pre> <code> <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> <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> <small> Последнее обновление 3 мин. назад </small> </p> </div> </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> <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> <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> <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> </code> </pre><p> При использовании групп карточек с нижними колонтитулами их содержимое будет автоматически выровнено.</p><pre> <code> <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> <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> </div> <div> <small> Последнее обновление 3 мин. назад </small> </div> </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> <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> <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> <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> </code> </pre><h3><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></h3> <p> Нужен набор карточек одинаковой ширины и высоты, которые обычно не прикрепляются друг к другу? Используйте колоды карт.</p><pre> <code> <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> <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> <p> <small> Последнее обновление 3 мин. назад </small> </p> </div> </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> <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> <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> <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> </code> </pre><p> Как и в случае с группами карт, нижние колонтитулы карт в колодах автоматически выстраиваются в линию.</p><pre> <code> <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> <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> </div> <div> <small> Последнее обновление 3 мин. назад </small> </div> </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> <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> <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> <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> </code> </pre><h3><span class="ez-toc-section" id="%D0%A1%D1%82%D0%BE%D0%BB%D0%B1%D1%86%D1%8B_%D0%BA%D0%B0%D1%80%D1%82"></span> Столбцы карт <span class="ez-toc-section-end"></span></h3> <p> Карточки можно расположить в столбцы, подобные масонству, вместе с CSS, заключив их в <code>.карточки-столбцы </code>. Карточки создаются с использованием свойств CSS <code> column </code> вместо flexbox для упрощения позиционирования. Карты располагаются сверху вниз и слева направо. </p> <p> Внимание! Ваше расстояние до столбцов карточек может быть разным. Чтобы карточки не разбивались о столбцы, установите для них <code> display: inline-block </code> как <code> column-break-inside: избегайте </code> еще не является пуленепробиваемым решением. </p><pre> <code> <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> <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> <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> <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> <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-21"></span> Название карточки <span class="ez-toc-section-end"></span></h5> <p> Эта подсказка содержит вспомогательный текст ниже, который естественным образом ведет к дополнительному содержанию.</p> <p> <small> Последнее обновление 3 мин. назад </small> </p> </div> </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> <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> </code> </pre><p> Столбцы карты могут быть дополнительно расширены и персонализированы с помощью дополнительного кода. Ниже показано расширение курса <code> .card-columns </code>, использующее тот же CSS - столбцы CSS - для создания набора адаптивных уровней для изменения разнообразия столбцов.</p><pre> <code> .карта-столбцы @include только для точки останова (lg) количество столбцов: 4; @include только для точки останова (xl) количество столбцов: 5; </code> </pre><h3><span class="ez-toc-section" id="%D0%97%D0%B0%D0%BA%D0%BB%D1%8E%D1%87%D0%B8%D1%82%D0%B5%D0%BB%D1%8C%D0%BD%D1%8B%D0%B5_%D0%BC%D1%8B%D1%81%D0%BB%D0%B8"></span> Заключительные мысли <span class="ez-toc-section-end"></span></h3> <p> Таким образом, в основном это простой способ настройки яркого нового для Bootstrap 4 элемента карты. Как всегда, стремясь к простоте и простоте, новая версия фреймворка объединяет функциональность нескольких элементов в один мощный. Теперь вам нужно подобрать те особенности, которые вам нужны, изложенные в некоторых карточках.</p> <h3><span class="ez-toc-section" id="%D0%92%D0%B7%D0%B3%D0%BB%D1%8F%D0%BD%D0%B8%D1%82%D0%B5_%D0%BD%D0%B0_%D0%BD%D0%B5%D1%81%D0%BA%D0%BE%D0%BB%D1%8C%D0%BA%D0%BE_%D0%BA%D0%BE%D1%80%D0%BE%D1%82%D0%BA%D0%B8%D1%85_%D0%BE%D0%B1%D1%83%D1%87%D0%B0%D1%8E%D1%89%D0%B8%D1%85_%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE_%D0%BF%D0%BE_Bootstrap_Panel"></span> Взгляните на несколько коротких обучающих видео по Bootstrap Panel: <span class="ez-toc-section-end"></span></h3> <p> <iframe src="https://www.youtube.com/embed/CysFkdY18MI?rel=0&amp;showinfo=0&autoplay=1&loop=1" frameborder="0" allowfullscreen=""/> </iframe><br /> <iframe src="https://www.youtube.com/embed/HqGLXDjw3TA?rel=0&amp;showinfo=0&amp" frameborder="0" allowfullscreen=""/> </iframe></p> <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%82%D0%B5%D0%BC%D1%8B"></span> Связанные темы: <span class="ez-toc-section-end"></span></h3> <h4><span class="ez-toc-section" id="Bootstrap_Panel-Cards_%D1%83%D1%82%D0%B2%D0%B5%D1%80%D0%B6%D0%B4%D0%B5%D0%BD%D0%BD%D1%8B%D0%B5_%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D1%8B"></span> Bootstrap Panel-Cards: утвержденные документы <span class="ez-toc-section-end"></span></h4> <h4><span class="ez-toc-section" id="%D0%9F%D0%BE%D0%BD%D0%B8%D0%BC%D0%B0%D0%BD%D0%B8%D0%B5_%D1%82%D0%BE%D0%B3%D0%BE_%D0%BA%D0%B0%D0%BA_%D0%BC%D1%8B_%D0%BC%D0%BE%D0%B6%D0%B5%D0%BC_%D1%81%D1%84%D0%BE%D1%80%D0%BC%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D1%82%D1%8C_Bootstrap_4_%D0%BA%D0%B0%D1%80%D1%82%D1%8B_%D1%82%D0%B0%D0%BA%D0%BE%D0%B9_%D0%B6%D0%B5_%D0%B2%D1%8B%D1%81%D0%BE%D1%82%D1%8B"></span> Понимание того, как мы можем сформировать Bootstrap 4 карты такой же высоты? <span class="ez-toc-section-end"></span></h4> <h4><span class="ez-toc-section" id="%D0%9E%D1%82%D1%81%D1%83%D1%82%D1%81%D1%82%D0%B2%D0%B8%D0%B5_%D0%BF%D1%80%D0%BE%D1%88%D0%BB%D0%BE%D0%B9_%D0%BF%D0%B0%D0%BD%D0%B5%D0%BB%D0%B8_%D0%BF%D0%BE%D0%B8%D1%89%D0%B8%D1%82%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></h4> <p> .</p> </div> <footer class="entry-footer"> <span class="cat-links">Category <a href="https://pyobjc.ru/category/raznoe" rel="category tag">Разное</a></span> </footer> </article> <nav class="navigation post-navigation" aria-label="Записи"> <h2 class="screen-reader-text">Навигация по записям</h2> <div class="nav-links"><div class="nav-previous"><a href="https://pyobjc.ru/css/border-css3-border-width-css-mdn.html" rel="prev">Border css3: border-width — CSS | MDN</a></div><div class="nav-next"><a href="https://pyobjc.ru/raznoe/internet-proekty-dlya-zarabotka-deneg-35-luchshih-sposobov-zarabotat-onlajn-v-2021-godu.html" rel="next">Интернет проекты для заработка денег: 35+ Лучших Способов Заработать Онлайн в 2021 Году</a></div></div> </nav> <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://pyobjc.ru/wp-comments-post.php" method="post" id="commentform" class="comment-form" novalidate><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>

Имя *

Email *

Сайт