Иконка листик: Векторная графика D0 bb d0 b8 d1 81 d1 82 d0 b8 d0 ba d0 b8 d0 ba d0 be d0 bd d0 ba d0 b0: картинки, рисунки

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

  

  
 ... 
  
 ... 
  
 ... 
  

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

  

   1 
   2 

  

    
      Падать
       
    
    

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

  

  ...
  

  

  
    Действие  
  
  

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

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

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

  

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

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

Размер

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

  

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

    ...
  




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

    ...
  




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

    ...
  
  

Вариант Dropup

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

  

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

    
  
  

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

Текстовый

Избегайте использования здесь элементов , поскольку они не могут быть полностью стилизованы в браузерах WebKit. Избегайте использования здесь элементов </code>, так как их атрибут </code> строк </code> не будет соблюдаться в некоторых случаях. </p> <h5><span class="ez-toc-section" id="i-69"> Всплывающие подсказки и всплывающие окна в группах ввода требуют специальной настройки </span></h5> <p> При использовании всплывающих подсказок или всплывающих окон на элементах в пределах <code>.input-group </code>, вам нужно будет указать опцию <code> container: 'body' </code>, чтобы избежать нежелательных побочных эффектов (таких как расширение элемента и / или потеря закругленных углов при срабатывании всплывающей подсказки или всплывающего окна). </p> <h5><span class="ez-toc-section" id="i-70"> Не смешивать с другими компонентами </span></h5> <p> Не смешивать группы форм или классы столбцов сетки напрямую с группами ввода. Вместо этого вложите группу ввода внутрь группы формы или связанного с сеткой элемента. </p> <h5><span class="ez-toc-section" id="i-71"> Всегда добавляйте метки </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> атрибутом заполнителя </code>), и то, какая дополнительная информация потребуется передать, будет зависеть от точного типа реализуемого вами интерфейсного виджета.Примеры в этом разделе представляют несколько предлагаемых подходов для конкретных случаев. </p> <h3><span class="ez-toc-section" id="i-72"> Базовый пример </span></h3> <p> Поместите одну надстройку или кнопку с обеих сторон от входа. Вы также можете разместить его по обе стороны от входа. </p> <p> <strong> Мы не поддерживаем несколько надстроек (<code> .input-group-addon </code> или <code> .input-group-btn </code>) на одной стороне. </strong> </p> <p> <strong> Мы не поддерживаем несколько элементов управления формой в одной группе ввода. </strong> </p><pre> <code data-lang="html"> <div> <span> @ </span> <input type = "text" placeholder = "Имя пользователя" aria-describeby = "basic-addon1"> </div> <div> <input type = "text" placeholder = "Имя пользователя получателя" aria-describeby = "basic-addon2"> <span> @example.com </span> </div> <div> <span> $ </span> <input type = "text" aria-label = "Сумма (с точностью до доллара)"> <span> 0,00 </span> </div> <label for = "basic-url"> Ваш персональный URL </label> <div> <span> https://example.com/users/ </span> <input type = "text" aria-descriptionby = "basic-addon3"> </div> </code> </pre><h3><span class="ez-toc-section" id="i-73"> Размер </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="i-74"> Флажки и радио-надстройки </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="i-75"> Дополнения кнопок </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="i-76"> Кнопки с раскрывающимися списками </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="i-77"> Сегментированные кнопки </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="i-78"> Несколько кнопок </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="_JavaScript"> Для использования навигации для панелей вкладок требуется плагин вкладок JavaScript. </span></h5> <p> Для вкладок с областями вкладок необходимо использовать плагин JavaScript вкладок.Для разметки также потребуются дополнительные атрибуты <code> role, </code> и ARIA — подробности см. В примере разметки плагина. </p> <h5><span class="ez-toc-section" id="i-79"> Сделайте навигацию доступной для навигации </span></h5> <p> Если вы используете навигацию для предоставления панели навигации, обязательно добавьте <code> role = "navigation" </code> в наиболее логичный родительский контейнер <code> <ul> </code> или оберните <code> <nav> </code> элемент по всей навигации. Не добавляйте роль к самому <code> <ul> </code>, так как это помешает тому, чтобы вспомогательные технологии объявили о нем как о фактическом списке.</p> <h3><span class="ez-toc-section" id="i-80"> Вкладки </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"> Pills </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="i-81"> По ширине </span></h3> <p> С легкостью сделайте вкладки или таблетки равной ширине их родительской на экранах шире 768 пикселей с <code>. </code> с выравниванием по nav. На экранах меньшего размера навигационные ссылки складываются. </p> <p> <strong> Обоснованные навигационные ссылки на панели навигации в настоящее время не поддерживаются. </strong> </p> <h5><span class="ez-toc-section" id="Safari"> Safari и адаптивная навигация по ширине </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="i-82"> Отключенные ссылки </span></h3> <p> Для любого компонента навигации (вкладки или таблетки) добавьте <code> .disabled </code> для <strong> серых ссылок и отсутствия эффектов наведения </strong>. </p> <h5><span class="ez-toc-section" id="i-83"> Не влияет на функциональность ссылки </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="i-84"> Использование раскрывающихся списков </span></h3> <p> Добавьте раскрывающиеся меню с небольшим дополнительным HTML и подключаемым модулем раскрывающегося списка JavaScript. </p> <h4><span class="ez-toc-section" id="i-85"> Вкладки с раскрывающимися списками </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="i-86"> Таблетки с раскрывающимися списками </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="i-87"> Панель навигации по умолчанию </span></h3> <p> Панели навигации — это адаптивные метакомпоненты, которые служат заголовками навигации для вашего приложения или сайта.Они начинают сворачиваться (и их можно переключать) в мобильных представлениях и становятся горизонтальными по мере увеличения доступной ширины области просмотра. </p> <p> <strong> Обоснованные навигационные ссылки на панели навигации в настоящее время не поддерживаются. </strong> </p> <h5><span class="ez-toc-section" id="i-88"> Переполнение содержимого </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="_JavaScript-2"> Требуется подключаемый модуль JavaScript </span></h5> <p> Если JavaScript отключен и область просмотра достаточно узкая, чтобы панель навигации сворачивалась, будет невозможно развернуть панель навигации и просмотреть содержимое в пределах <code> .navbar-collapse </code>. </p> <p> Для отзывчивой панели навигации требуется, чтобы в вашу версию Bootstrap был включен плагин свертывания.</p> <h5><span class="ez-toc-section" id="i-89"> Изменение свернутой точки останова мобильной панели навигации </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="i-90"> Сделайте панели навигации доступными </span></h5> <p> Обязательно используйте элемент <code> <nav> </code> или, если вы используете более общий элемент, такой как <code> <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="i-91"> Изображение бренда </span></h3> <p> Замените бренд панели навигации своим собственным изображением, заменив текст на <code> <img> </code>. Поскольку <code> .navbar-brand </code> имеет собственное заполнение и высоту, вам может потребоваться переопределить некоторый CSS в зависимости от вашего изображения. </p><pre> <code data-lang="html"> <nav> <div> <div> <a href="#"> <noscript><img class="lazy lazy-hidden" alt = "Бренд" src = "..."></noscript><img class="lazyload lazy lazy-hidden" alt = "Бренд" src = "..."><noscript><img alt = "Бренд" src = "..."></noscript> </a> </div> </div> </nav> </code> </pre><h3><span class="ez-toc-section" id="i-92"> Формы </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="i-93"> Предостережения для мобильных устройств </span></h5> <p> Есть некоторые предостережения относительно использования элементов управления формы в фиксированных элементах на мобильных устройствах.См. Дополнительную информацию в нашей документации по поддержке браузера. </p> <h5><span class="ez-toc-section" id="i-94"> Всегда добавляйте метки </span></h5> <p> Программы чтения с экрана будут иметь проблемы с вашими формами, если вы не добавите метку для каждого ввода. Для этих встроенных форм вы можете скрыть метки с помощью класса </code> <code> .sr-only. Существуют и другие альтернативные методы предоставления метки для вспомогательных технологий, такие как атрибут <code> aria-label </code>, <code> aria-labelledby </code> или <code> title </code>. Если ни один из них не присутствует, программы чтения с экрана могут прибегнуть к использованию атрибута </code> заполнителя <code>, если он присутствует, но обратите внимание, что использование заполнителя <code> </code> в качестве замены для других методов маркировки не рекомендуется.</p> <h3><span class="ez-toc-section" id="i-95"> Кнопки </span></h3> <p> Добавьте класс <code> .navbar-btn </code> к элементам <code> <button> </code>, не находящимся в <code> <form> </code>, чтобы центрировать их по вертикали на панели навигации. </p><pre> <code data-lang="html"> <button type = "button"> Войти </button> </code> </pre><h5><span class="ez-toc-section" id="i-96"> Использование в зависимости от контекста </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="i-97"> Текст </span></h3> <p> Оберните строки текста в элемент с <code> .navbar-text </code>, обычно в тег <code> <p> </code> для правильного интерлиньяжа и цвета. </p><pre> <code data-lang="html"> <p> Вы вошли как Марк Отто </p> </code> </pre><h3><span class="ez-toc-section" id="i-98"> Не навигационные ссылки </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="i-99"> Выравнивание компонентов </span></h3> <p> Выровняйте навигационные ссылки, формы, кнопки или текст, используя <code> .navbar -left </code> или <code> .navbar-right </code> служебные классы. Оба класса добавят поплавок CSS в указанном направлении. Например, чтобы выровнять навигационные ссылки, поместите их в отдельный <code> <ul> </code> с применением соответствующего служебного класса.</p> <p> Эти классы представляют собой смешанные версии <code> .pull-left </code> и <code> .pull-right </code>, но они ограничены медиа-запросами для упрощения работы с компонентами навигационной панели на разных устройствах. </p> <h5><span class="ez-toc-section" id="i-100"> Выравнивание нескольких компонентов по правому краю </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"> Fixed to top </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="i-101"> Требуется заполнение основного текста </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="i-102"> Фиксированный снизу </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="i-103"> Требуется заполнение основного текста </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"> Static top </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="i-104"> Перевернутая панель навигации </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="i-105"> Отключенное и активное состояния </span></h4> <p> Ссылки можно настроить для различных обстоятельств.Используйте <code> .disabled </code> для не кликабельных ссылок и <code> .active </code> для обозначения текущей страницы. </p><pre> <code data-lang="html"> <nav aria-label = "..."> <ul> <li> <a href="#" aria-label="Previous"> <span aria-hidden = "true"> & laquo; </span> </a> </li> <li> <a href="#"> 1 <span> (текущий) </span> </a> </li> ... </ul> </nav> </code> </pre><p> Мы рекомендуем вам заменить активные или отключенные привязки на <code> <span> </code> или опустить привязку в случае стрелок «предыдущий / следующий», чтобы удалить функциональность щелчка при сохранении заданных стилей.</p><pre> <code data-lang="html"> <nav aria-label = "..."> <ul> <li> <span> <span aria-hidden = "true"> & laquo; </span> </span> </li> <li> <span> 1 <span>(current)</span> </span> </li> ... </ul> </nav> </code> </pre><h4><span class="ez-toc-section" id="i-106"> Размер </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="i-107"> Пример по умолчанию </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="i-108"> Выровненные ссылки </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="i-109"> Необязательное отключенное состояние </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="i-110"> Пример </span></h3> <p> <h3><span class="ez-toc-section" id="i-111"> Пример заголовка Новый </span></h3> <h4><span class="ez-toc-section" id="i-112"> Пример заголовка Новый </span></h4> <h5><span class="ez-toc-section" id="i-113"> Пример заголовка Новый </span></h5> <h5><span class="ez-toc-section" id="i-114"> Пример заголовка Новый </span></h5> <h6><span class="ez-toc-section" id="i-115"> Пример заголовка Новый </span></h6> </p><pre> <code data-lang="html"> <h4><span class="ez-toc-section" id="i-116"> Пример заголовка </span></h4><span> Новый </ span > </h4> </code> </pre><h3><span class="ez-toc-section" id="i-117"> Доступные варианты </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="i-118"> Есть тонны этикеток? </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="i-119"> Самостоятельное сворачивание </span></h5> <p> Когда нет новых или непрочитанных элементов, значки просто сворачиваются (через CSS-селектор <code>: пустой </code>) при условии, что внутри нет содержимого.</p> <h5><span class="ez-toc-section" id="i-120"> Кроссбраузерная совместимость </span></h5> <p> Значки не сбрасываются автоматически в Internet Explorer 8, поскольку в нем отсутствует поддержка селектора <code>: пустой </code>. </p> <h5><span class="ez-toc-section" id="i-121"> Адаптируется к активным состояниям навигации </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="i-122"> Привет, мир! </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> h2 </code> по умолчанию, а также большинство других компонентов (с дополнительными стилями). </p><pre> <code data-lang="html"> <div> <h2><span class="ez-toc-section" id="i-123"> Пример заголовка страницы </span></h2><small> Подтекст для заголовка </small> </h2> </div> </code> </pre><p> Расширьте систему сеток Bootstrap с помощью компонента эскизов, чтобы легко отображать сетки изображений, видео, текста и т. д.</p> <p> Если вы ищете представление эскизов разной высоты и / или ширины в стиле Pinterest, вам потребуется сторонний плагин, например Masonry, Isotope или Salvattore. </p> <h3><span class="ez-toc-section" id="i-124"> Пример по умолчанию </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="i-125"> Пользовательское содержимое </span></h3> <p> С небольшой дополнительной разметкой можно добавить в эскизы любой вид HTML-содержимого, например заголовки, абзацы или кнопки.</p> <h4><span class="ez-toc-section" id="i-126"> Этикетка для миниатюр </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="i-127"> Этикетка для миниатюр </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="i-128"> Этикетка для миниатюр </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="i-129"> Ярлык эскиза </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="i-130"> Примеры </span></h3> <p> Оберните любой текст и дополнительную кнопку закрытия в <code> .alert </code> и один из четырех контекстных классов (например, <code> .alert-success </code>) для основных предупреждающих сообщений. </p> <h5><span class="ez-toc-section" id="i-131"> Нет класса по умолчанию </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="i-132"> Отключаемые оповещения </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="i-133"> Обеспечьте правильное поведение на всех устройствах </span></h5> <p> Обязательно используйте элемент <code> <button> </code> с атрибутом данных <code> data-dismiss = "alert" </code>.</p> <h3><span class="ez-toc-section" id="i-134"> Ссылки в предупреждениях </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="i-135"> Кроссбраузерная совместимость </span></h5> <p> Индикаторы выполнения используют переходы и анимацию CSS3 для достижения некоторых эффектов. Эти функции не поддерживаются в Internet Explorer 9 и ниже или более ранних версиях Firefox. Opera 12 не поддерживает анимацию. </p> <h5><span class="ez-toc-section" id="_CSP"> Совместимость с политикой безопасности контента (CSP) </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="i-136"> Базовый пример </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="i-137"> С этикеткой </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="i-138"> Контекстные альтернативы </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="i-139"> Полосатый </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="i-140"> Анимированный </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"> Stacked </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="i-141"> Медиа-заголовок </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="i-142"> Медиа с выравниванием по центру </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="i-143"> Медиа-заголовок </span></h5> ... </div> </li> </ul> </code> </pre><p> Группы списков — это гибкий и мощный компонент для отображения не только простых списков элементов, но и сложных с настраиваемым содержимым.</p> <h3><span class="ez-toc-section" id="i-144"> Базовый пример </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> Vestibulum at eros </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="i-145"> Значки </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="i-146"> Связанные элементы </span></h3> <p> Свяжите элементы группы списка, используя теги привязки вместо элементов списка (это также означает родительский <code> <div> </code> вместо <code> <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="i-147"> Элементы кнопок </span></h3> <p> Элементы группы списка могут быть кнопками вместо элементов списка (это также означает родительский элемент <code> <div> </code> вместо <code> <ul> </code>). Нет необходимости в отдельных родителях для каждого элемента.<strong> Не используйте здесь стандартные классы <code> .btn </code>. </strong> </p> <p> Cras justo odio Dapibus ac facilisis в 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="i-148"> Отключенные элементы </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="i-149"> Контекстные классы </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> Vestibulum at Eros </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="i-150"> Пользовательское содержимое </span></h3> <p> Добавьте практически любой HTML-код внутри, даже для связанных групп списков, подобных приведенной ниже.</p><pre> <code data-lang="html"> <div> <a href="#"> <h5><span class="ez-toc-section" id="i-151"> Заголовок элемента группы списка </span></h5> <p> ... </p> </a> </div> </code> </pre><p> Хотя это не всегда необходимо, иногда вам нужно поместить DOM в коробку. В таких ситуациях попробуйте компонент панели. </p> <h3><span class="ez-toc-section" id="i-152"> Базовый пример </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="i-153"> Панель с заголовком </span></h3> <p> С легкостью добавьте контейнер заголовка на свою панель с помощью <code>.панельная товарная позиция </code>. Вы также можете включить любой <code> <h2> </h2></code> — <code> <h6> </h6></code> с классом <code> .panel-title </code>, чтобы добавить предварительно стилизованный заголовок. Однако размеры шрифта <code> <h2> </h2></code> — <code> <h6> </h6></code> заменяются <code> .panel-heading </code>. </p> <p> Для правильной раскраски ссылок обязательно размещайте ссылки в заголовках в пределах <code> .panel-title </code>. </p> <p> Заголовок панели без названия </p> <p> Содержание панели </p> <p> <h4><span class="ez-toc-section" id="i-154"> Название панели </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="i-155"> Заголовок панели </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="i-156"> Контекстные альтернативы </span></h3> <p> Как и другие компоненты, легко сделать панель более значимой для конкретного контекста, добавив любой из классов контекстного состояния. </p> <p> <h4><span class="ez-toc-section" id="i-157"> Название панели </span></h4> </p> <p> Содержание панели </p> <p> <h4><span class="ez-toc-section" id="i-158"> Название панели </span></h4> </p> <p> Содержание панели </p> <p> <h4><span class="ez-toc-section" id="i-159"> Название панели </span></h4> </p> <p> Содержание панели </p> <p> <h4><span class="ez-toc-section" id="i-160"> Название панели </span></h4> </p> <p> Содержание панели </p> 9000 </code>0 </code>0 </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="i-161"> С таблицами </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 class="table table-hover"> <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> @mdo </td> </tr> </td> </td> <td> <td> 2 187 </td> </td> <td> Th1879 Th18 </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 class="table table-hover"> <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> <td> <td> <td> <td> Якоб <th scope="row"> <td> <td> <td> Якоб <td> <td> @fat </td> </tr> <tr> <th scope="row"> 3 </th> <td> Ларри </td> <td> Птица </td> <td> @twitter </td> </tr> </tbody> </table><pre> <code data-lang="html"> <div> <! - Содержимое панели по умолчанию -> <div> Заголовок панели </div> <! - Таблица -> <таблица> ... </table> </div> </code> </pre><h3><span class="ez-toc-section" id="i-162"> С группами списков </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 conctetur 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> Правила применяются непосредственно к элементам <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>, поскольку мы переопределяем это для вас. </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="i-163"> Лунка по умолчанию </span></h3> <p> Используйте лунку как простой эффект для элемента, чтобы придать ему эффект вставки. </p><pre> <code data-lang="html"> <div> ... </div> </code> </pre><h3><span class="ez-toc-section" id="i-164"> Дополнительные классы </span></h3> <p> Управляйте заполнением и закругленными углами с двумя дополнительными классами модификаторов. </p> <p> Смотри, я в большом колодце! </p><pre> <code data-lang="html"> <div>... </div> </code> </pre><p> Смотри, я в маленьком колодце! </p> <pre> <code data-lang="html"> <div> . </div> <div class="post-meta"> </div> </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://xn--80aahvkuapc1be.xn--p1ai/raznoe/nastrojka-novostej-v-yandekse-kak-nastroit-novosti-v-yandekse.html" rel="prev"><span class="meta-nav">Предыдущая запись</span> Настройка новостей в яндексе: Как настроить новости в яндексе</a></div><div class="nav-next"><a href="https://xn--80aahvkuapc1be.xn--p1ai/tem-2/temnyj-fon-dlya-vizitki-izobrazheniya-temnaya-vizitka-besplatnye-vektory-stokovye-foto-i-psd.html" rel="next"><span class="meta-nav">Следующая запись</span> Темный фон для визитки: Изображения Темная визитка | Бесплатные векторы, стоковые фото и PSD</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/ikonka-listik-vektornaya-grafika-d0-bb-d0-b8-d1-81-d1-82-d0-b8-d0-ba-d0-b8-d0-ba-d0-be-d0-bd-d0-ba-d0-b0-kartinki-risunki.html#respond" style="display:none;">Отменить ответ</a></small></h3><form action="https://xn--80aahvkuapc1be.xn--p1ai/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 *

Сайт