приклад

Перемикається контекстне меню для відображення списків посилань. Зроблено інтерактивним за допомогою спадного плагіна JavaScript .

<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu" >   
  <li><a tabindex = "-1" href = "#" > Дія </a></li>  
  <li><a tabindex = "-1" href = "#" > Інша дія </a></li>  
  <li><a tabindex = "-1" href = "#" > Тут ще щось </a></li>  
  <li class = "divider" ></li> 
  <li><a tabindex = "-1" href = "#" > Окреме посилання </a></li>  
</ul>

Розмітка

Дивлячись лише на спадне меню, ось необхідний HTML. Вам потрібно обернути тригер спадного списку та спадне меню всередині .dropdownабо іншого елемента, який оголошує position: relative;. Потім просто створіть меню.

<div class = "dropdown" > 
  <!-- Посилання або кнопка для перемикання спадного меню -->
  <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >   
    <li><a tabindex = "-1" href = "#" > Дія </a></li>  
    <li><a tabindex = "-1" href = "#" > Інша дія </a></li>  
    <li><a tabindex = "-1" href = "#" > Тут ще щось </a></li>  
    <li class = "divider" ></li> 
    <li><a tabindex = "-1" href = "#" > Окреме посилання </a></li>  
  </ul>
</div>

Опції

Вирівняйте меню праворуч і додайте додаткові рівні спадних меню.

Вирівнювання меню

Додайте .pull-rightдо a, .dropdown-menuщоб вирівняти спадне меню праворуч.

<ul class = "dropdown-menu pull-right" role = "menu" aria-labelledby = "dLabel" >   
  ...
</ul>

Вимкнені параметри меню

Додайте .disabledв <li>спадне меню, щоб вимкнути посилання.

<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu" >   
  <li><a tabindex = "-1" href = "#" > Звичайне посилання </a></li>  
  <li class = "disabled" ><a tabindex = "-1" href = "#" > Вимкнене посилання </a></li>   
  <li><a tabindex = "-1" href = "#" > Ще одне посилання </a></li>  
</ul>

Підменю в спадних меню

Додайте додатковий рівень спадних меню, що з’являються під час наведення курсора, як у OS X, з деякими простими доповненнями до розмітки. Додайте .dropdown-submenuдо будь-якого liв наявному спадному меню для автоматичного стилю.

<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >   
  ...
  <li class = "dropdown-submenu" > 
    <a tabindex = "-1" href = "#" > Додаткові параметри </a>  
    <ul class = "dropdown-menu" > 
      ...
    </ul>
  </li>
</ul>

Приклади

Два основних варіанти разом із двома більш специфічними варіантами.

Одна група кнопок

Загорніть ряд ґудзиків .btnу .btn-group.

<div class = "btn-group" > 
  <button class = "btn" > Ліворуч </button> 
  <button class = "btn" > Середній </button> 
  <button class = "btn" > Праворуч </button> 
</div>

Кілька груп кнопок

Об’єднайте набори <div class="btn-group">в <div class="btn-toolbar">складніші компоненти.

<div class = "btn-toolbar" > 
  <div class = "btn-group" > 
    ...
  </div>
</div>

Вертикальні групи кнопок

Зробіть так, щоб набір кнопок виглядав вертикально, а не горизонтально.

<div class = "btn-group btn-group-vertical" > 
  ...
</div>

Прапорець і радіо аромати

Групи кнопок також можуть функціонувати як радіо, де може бути активна лише одна кнопка, або як прапорці, де може бути активна будь-яка кількість кнопок. Перегляньте для цього документи JavaScript .

Випадаючі списки в групах кнопок

Голови вгору!Для належного відтворення кнопки зі спадними меню мають бути окремо упаковані .btn-groupу власні ..btn-toolbar

Огляд і приклади

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

<div class = "btn-group" > 
  <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >   
    Дія
    <span class = "caret" ></span> 
  </a>
  <ul class = "dropdown-menu" > 
    <!-- посилання спадного меню -->
  </ul>
</div>

Працює з усіма розмірами кнопок

Розкривні списки кнопок працюють будь-якого розміру: .btn-large, .btn-smallабо .btn-mini.

Потрібен JavaScript

Для роботи спадних меню кнопок потрібен плагін Bootstrap .

У деяких випадках, наприклад у мобільних, спадні меню виходять за межі області перегляду. Вам потрібно вирішити вирівнювання вручну або за допомогою спеціального JavaScript.

Розділені кнопки, що випадають

Спираючись на стилі групи кнопок і розмітку, ми можемо легко створити розділену кнопку. Розділені кнопки мають стандартну дію ліворуч і розкривне меню праворуч із контекстними посиланнями.

<div class = "btn-group" > 
  <button class = "btn" > Дія </button> 
  <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "caret" ></span> 
  </button>
  <ul class = "dropdown-menu" > 
    <!-- посилання спадного меню -->
  </ul>
</div>

Розміри

Використовуйте додаткові класи кнопок .btn-mini, .btn-smallабо .btn-largeдля визначення розміру.

<div class = "btn-group" > 
  <button class = "btn btn-mini" > Дія </button> 
  <button class = "btn btn-mini dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "caret" ></span> 
  </button>
  <ul class = "dropdown-menu" > 
    <!-- посилання спадного меню -->
  </ul>
</div>

Випадаючі меню

Випадаючі меню також можна перемикати знизу вгору, додаючи один клас до безпосереднього батька .dropdown-menu. Це переверне напрямок .caretі перемістить саме меню, щоб рухатися знизу вгору, а не зверху вниз.

<div class = "btn-group dropup" > 
  <button class = "btn" > Випадання </button> 
  <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "caret" ></span> 
  </button>
  <ul class = "dropdown-menu" > 
    <!-- посилання спадного меню -->
  </ul>
</div>

Спрощені параметри за замовчуванням . Та сама розмітка, різні класи

Усі навігаційні компоненти тут — вкладки, таблетки та списки — мають однакову базову розмітку та стилі в .navкласі.

Основні вкладки

Візьміть рядок <ul>посилань і додайте .nav-tabs:

<ul class = "nav nav-tabs" > 
  <li class = "active" > 
    <a href = "#" > Домашня сторінка </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

Основні таблетки

Візьміть той самий HTML, але використовуйте .nav-pillsзамість нього:

<ul class = "nav nav-pills" > 
  <li class = "active" > 
    <a href = "#" > Домашня сторінка </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

Відключений стан

Для будь-якого компонента навігації (вкладок, таблеток або списку) додайте .disabledсірі посилання та відсутність ефектів наведення . Однак посилання залишатимуться доступними для натискання, якщо ви не видалите hrefатрибут. Крім того, ви можете застосувати власний JavaScript, щоб запобігти таким клікам.

<ul class = "nav nav-pills" > 
  ...
  <li class = "disabled" ><a href = "#" > Домашня сторінка </a></li>  
  ...
</ul>

Вирівнювання компонентів

Щоб вирівняти навігаційні посилання, використовуйте службові класи .pull-leftабо . .pull-rightОбидва класи додадуть CSS float у вказаному напрямку.

Штабельні

Оскільки вкладки та таблетки горизонтальні за замовчуванням, просто додайте другий клас, .nav-stackedщоб вони виглядали вертикально.

Складені вкладки

<ul class = "nav nav-tabs nav-stacked" > 
  ...
</ul>

Складені таблетки

<ul class = "nav nav-pills nav-stacked" > 
  ...
</ul>

Випадаючі списки

Додайте спадні меню з додатковим кодом HTML і плагіном JavaScript для спадних меню .

Вкладки з розкривними меню

<ul class = "nav nav-tabs" > 
  <li class = "dropdown" > 
    <a class = "dropdown-toggle" 
       data-toggle = "випадаюче меню"
       href = "#" >
        спадний список
        <b class = "caret" ></b> 
      </a>
    <ul class = "dropdown-menu" > 
      <!-- посилання -->
    </ul>
  </li>
</ul>

Таблетки з випадаючими

<ul class = "nav nav-pills" > 
  <li class = "dropdown" > 
    <a class = "dropdown-toggle" 
       data-toggle = "випадаюче меню"
       href = "#" >
        спадний список
        <b class = "caret" ></b> 
      </a>
    <ul class = "dropdown-menu" > 
      <!-- посилання -->
    </ul>
  </li>
</ul>

Навігаційні списки

Простий і легкий спосіб створення груп навігаційних посилань із додатковими заголовками. Їх найкраще використовувати на бічних панелях, як-от Finder в OS X.

Приклад списку навігацій

Візьміть список посилань і додайте class="nav nav-list":

<ul class = "nav nav-list" > 
  <li class = "nav-header" > Заголовок списку </li> 
  <li class = "active" ><a href = "#" > Домашня сторінка </a></li>  
  <li><a href = "#" > Бібліотека </a></li> 
  ...
</ul>

ПриміткаДля вкладеності в навігаційний список включіть class="nav nav-list"будь-який вкладений <ul>.

Горизонтальні роздільники

Додайте горизонтальний роздільник, створивши порожній елемент списку з класом .divider, наприклад:

<ul class = "nav nav-list" > 
  ...
  <li class = "divider" ></li> 
  ...
</ul>

Навігація з вкладками

Оживіть свої вкладки за допомогою простого плагіна для перемикання між вмістом за допомогою вкладок. Bootstrap інтегрує вкладки з можливістю вкладок у чотирьох стилях: зверху (за замовчуванням), справа, знизу та зліва.

Приклад із вкладками

Щоб зробити вкладки доступними для вкладок, створіть .tab-paneунікальний ідентифікатор для кожної вкладки та оберніть їх у .tab-content.

<div class = "tabbable" > <!-- Потрібно лише для лівих/правих вкладок -->  
  <ul class = "nav nav-tabs" > 
    <li class = "active" ><a href = "#tab1" data-toggle = "tab" > Розділ 1 </a></li>   
    <li><a href = "#tab2" data-toggle = "tab" > Розділ 2 </a></li>  
  </ul>
  <div class = "tab-content" > 
    <div class = "активна панель вкладок" id = "tab1" >  
      <p> Я в розділі 1. </p>
    </div>
    <div class = "tab-pane" id = "tab2" >  
      <p> Привіт, я в розділі 2. </p>
    </div>
  </div>
</div>

Зникнення у вкладках

Щоб вкладки зникали, додайте .fadeдо кожної .tab-pane.

Потрібен плагін jQuery

Усі вкладки з можливістю вкладок працюють на основі нашого легкого плагіна jQuery. Дізнайтеся більше про те, як оживити вкладки з можливістю вкладок, на сторінці документів JavaScript .

Вкладки в будь-якому напрямку

Вкладки внизу

Переверніть порядок HTML і додайте клас, щоб розмістити вкладки внизу.

<div class = "tabbable tabs-below" > 
  <div class = "tab-content" > 
    ...
  </div>
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
</div>

Вкладки зліва

Поміняйте клас, щоб поставити вкладки ліворуч.

<div class = "tabbable tabs-left" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "tab-content" > 
    ...
  </div>
</div>

Вкладки праворуч

Поміняйте клас, щоб поставити вкладки праворуч.

<div class = "tabbable tabs-right" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "tab-content" > 
    ...
  </div>
</div>

Основна панель навігації

Для початку навігаційні панелі є статичними (не закріплені вгорі) і містять підтримку назви проекту та базової навігації. Розмістіть будь-де в межах .container, що встановлює ширину вашого сайту та вмісту.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <a class = "brand" href = "#" > Назва </a>  
    <ul class = "nav" > 
      <li class = "active" ><a href = "#" > Домашня сторінка </a></li>  
      <li><a href = "#" > Посилання </a></li> 
      <li><a href = "#" > Посилання </a></li> 
    </ul>
  </div>
</div>

Компоненти панелі навігації

Бренд

Для простого посилання, щоб показати назву вашого бренду чи проекту, потрібен лише тег прив’язки.

<a class = "brand" href = "#" > Назва проекту </a>  

Навігаційні посилання

Елементи навігації легко додавати за допомогою невпорядкованих списків.

<ul class = "nav" > 
  <li class = "active" > 
    <a href = "#" > Домашня сторінка </a> 
  </li>
  <li><a href = "#" > Посилання </a></li> 
  <li><a href = "#" > Посилання </a></li> 
</ul>

Ви можете легко додати роздільники до своїх навігаційних посилань за допомогою порожнього елемента списку та простого класу. Просто додайте це між посиланнями:

<ul class = "nav" > 
  ...
  <li class = "divider-vertical" ></li> 
  ...
</ul>

Форми

Щоб належним чином оформити та розташувати форму на навігаційній панелі, додайте відповідні класи, як показано нижче. Для форми за замовчуванням додайте .navbar-formабо .pull-leftабо .pull-right, щоб правильно вирівняти її.

<form class = "navbar-form pull-left" > 
  <input type = "text" class = "span2" >  
  <button type = "submit" class = "btn" > Надіслати </button>  
</form>

Форма пошуку

Щоб отримати більш налаштовану форму пошуку, додайте .navbar-searchдо formта .search-queryдо введення спеціалізованих стилів на панелі навігації.

<form class = "navbar-search pull-left" > 
  <input type = "text" class = "search-query" placeholder = "Search" >   
</form>

Вирівнювання компонентів

Вирівняйте навігаційні посилання, форму пошуку чи текст, скористайтеся службовими класами .pull-leftабо . .pull-rightОбидва класи додадуть CSS float у вказаному напрямку.

Використання спадних меню

Додайте розкривні та випадаючі меню до навігації за допомогою невеликої розмітки та плагіна JavaScript для випадаючих меню .

<ul class = "nav" > 
  <li class = "dropdown" > 
    <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown" >   
      Обліковий запис
      <b class = "caret" ></b> 
    </a>
    <ul class = "dropdown-menu" > 
      ...
    </ul>
  </li>
</ul>

Відвідайте документацію щодо спадних меню JavaScript , щоб отримати більше розмітки та інформацію про виклик спадних меню.

текст

Обгортання рядків тексту в елементі з .navbar-text, як правило, на <p>тегу для правильного інтервенію та кольору.

Додаткові варіанти відображення

Зафіксуйте навігаційну панель у верхній або нижній частині вікна перегляду за допомогою додаткового класу на зовнішньому div, .navbar.

Фіксується до верху

Додайте .navbar-fixed-topта не забудьте врахувати приховану область під ним, додавши принаймні 40 пікселів paddingдо <body>. Обов’язково додайте це після основного CSS Bootstrap і перед необов’язковим адаптивним CSS.

<div class = "navbar navbar-fixed-top" > 
  ...
</div>

Фіксується до дна

Додати .navbar-fixed-bottomнатомість.

<div class = "navbar navbar-fixed-bottom" > 
  ...
</div>

Статична верхня панель навігації

Створіть панель навігації на всю ширину, яка прокручується разом із сторінкою, додавши .navbar-static-top. На відміну від .navbar-fixed-topкласу, вам не потрібно змінювати відступи на body.

<div class = "navbar navbar-static-top" > 
  ...
</div>

Чуйна навігаційна панель

Щоб реалізувати адаптивну навігаційну панель, що згортається, оберніть вміст навігаційної панелі в контейнер div, .nav-collapse.collapseі додайте кнопку перемикання навігаційної панелі, .btn-navbar.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <div class = "container" > 
 
      <!-- .btn-navbar використовується як перемикач для згорнутого вмісту панелі навігації -->
      <a class = "btn btn-navbar" data-toggle = "collapse" data-target = ".nav-collapse" >   
        <span class = "icon-bar" ></span> 
        <span class = "icon-bar" ></span> 
        <span class = "icon-bar" ></span> 
      </a>
 
      <!-- Обов’язково залиште бренд, якщо хочете, щоб він був показаний -->
      <a class = "brand" href = "#" > Назва проекту </a>  
 
      <!-- Усе, що ви хочете приховати на 940 пікселів або менше, розмістіть тут -->
      <div class = "nav-collapse collapse" > 
        <!-- .nav, .navbar-search, .navbar-form тощо -->
      </div>
 
    </div>
  </div>
</div>

Перевернута варіація

Змініть вигляд навігаційної панелі, додавши .navbar-inverse.

<div class = "navbar navbar-inverse" > 
  ...
</div>

Приклади

Показано один приклад, оскільки він може відображатися на кількох сторінках.

<ul class = "breadcrumb" > 
  <li><a href = "#" > Домашня сторінка </a> <span class = "divider" > / </span></li>   
  <li><a href = "#" > Бібліотека </a> <span class = "divider" > / </span></li>   
  <li class = "active" > Дан�� </li> 
</ul>

Стандартна пагінація

Просте розбиття сторінок на основі Rdio, чудове для додатків і результатів пошуку. Великий блок важко помітити, він легко масштабується та забезпечує великі області натискання.

<div class = "pagination" > 
  <ul>
    <li><a href = "#" > Попередня </a></li> 
    <li><a href = "#" > 1 </a></li> 
    <li><a href = "#" > 2 </a></li> 
    <li><a href = "#" > 3 </a></li> 
    <li><a href = "#" > 4 ​​</a></li> 
    <li><a href = "#" > 5 </a></li> 
    <li><a href = "#" > Далі </a></li> 
  </ul>
</div>

Опції

Відключений і активний стани

Посилання можна налаштувати для різних обставин. Використовуйте .disabledдля неактивних посилань і .activeдля позначення поточної сторінки.

<div class = "pagination" > 
  <ul>
    <li class = "disabled" ><a href = "#" > « </a></li>  
    <li class = "active" ><a href = "#" > 1 </a></li>  
    ...
  </ul>
</div>

За бажанням ви можете замінити активні або вимкнені прив’язки на проміжки, щоб усунути функцію клацання, зберігаючи призначені стилі.

<div class = "pagination" > 
  <ul>
    <li class = "disabled" ><span> « </span></li> 
    <li class = "active" ><span> 1  </span></li>
    ...
  </ul>
</div>

Розміри

Бажаєте збільшити чи зменшити сторінки? Додайте .pagination-large, .pagination-smallабо .pagination-miniдля додаткових розмірів.

<div class = "pagination pagination-large" > 
  <ul>
    ...
  </ul>
</div>
<div class = "pagination" > 
  <ul>
    ...
  </ul>
</div>
<div class = "pagination pagination-small" > 
  <ul>
    ...
  </ul>
</div>
<div class = "pagination pagination-mini" > 
  <ul>
    ...
  </ul>
</div>

Вирівнювання

Додайте один із двох додаткових класів, щоб змінити вирівнювання посилань на сторінки: .pagination-centeredі .pagination-right.

<div class = "pagination pagination-centered" > 
  ...
</div>

<div class = "pagination pagination-right" > 
  ...
</div>

Пейджер

Швидкі попередні та наступні посилання для простого розбиття на сторінки з легкою розміткою та стилями. Це чудово підходить для простих сайтів, таких як блоги чи журнали.

Приклад за замовчуванням

За замовчуванням пейджер центрує посилання.

<ul class = "pager" > 
  <li><a href = "#" > Попередній </a></li> 
  <li><a href = "#" > Далі </a></li> 
</ul>

Вирівняні посилання

Крім того, ви можете вирівняти кожне посилання по сторонах:

<ul class = "pager" > 
  <li class = "попередній" > 
    <a href = "#" > ← Старший </a> 
  </li>
  <li class = "наступний" > 
    <a href = "#" > Новіший → </a> 
  </li>
</ul>

Додатковий вимкнений стан

Посилання на пейджер також використовують загальний .disabledкорисний клас із пагінації.

<ul class = "pager" > 
  <li class = "previous disabled" > 
    <a href = "#" > ← Старший </a> 
  </li>
  ...
</ul>

етикетки

Значки

Легко розбірний

Для простоти впровадження мітки та значки просто згорнуться (через :emptyселектор CSS), якщо в них немає вмісту.

Одиниця героя

Легкий, гнучкий компонент для демонстрації основного вмісту на вашому сайті. Він добре працює на маркетингових сайтах і сайтах із великим вмістом.

<div class = "hero-unit" > 
  <h1> Заголовок </h1>
  <p> Слоган </p>
  <p>
    <a class = "btn btn-primary btn-large" > 
      Вивчайте більше
    </a>
  </p>
</div>

Верхній колонтитул сторінки

Проста оболонка для h1відповідного розподілу та сегментації розділів вмісту на сторінці. Він може використовувати елемент h1за замовчуванням small, а також більшість інших компонентів (з додатковими стилями).

<div class = "page-header" > 
  <h1> Приклад заголовка сторінки <small> Підтекст для заголовка </small></h1>
</div>

Ескізи за замовчуванням

За замовчуванням мініатюри Bootstrap створені для демонстрації пов’язаних зображень із мінімальною необхідною розміткою.

Висока можливість налаштування

За допомогою додаткової розмітки можна додавати до мініатюр будь-який вміст HTML, як-от заголовки, абзаци чи кнопки.

Навіщо використовувати мініатюри

Мініатюри (раніше .media-gridдо версії 1.4) чудово підходять для сіток фотографій або відео, результатів пошуку зображень, роздрібних товарів, портфоліо та багато іншого. Це можуть бути посилання або статичний вміст.

Проста, гнучка розмітка

Розмітка ескізів проста — все, що потрібно, — a ulз будь-якою кількістю елементів. liВін також є надзвичайно гнучким, дозволяючи будь-який тип вмісту лише з трохи більшою розміткою для обгортання вашого вмісту.

Використовує розміри стовпців сітки

Нарешті, компонент ескізів використовує існуючі класи системи сіток, наприклад .span2або.span3 — для керування розмірами ескізів.

Розмітка

Як згадувалося раніше, необхідна розмітка для мініатюр легка та зрозуміла. Ось погляд на налаштування за замовчуванням для пов’язаних зображень :

<ul class = "thumbnails" > 
  <li class = "span4" > 
    <a href = "#" class = "thumbnail" >  
      <img data-src = "holder.js/300x200" alt = "" >  
    </a>
  </li>
  ...
</ul>

Для спеціального HTML-вмісту в мініатюрах розмітка дещо змінюється. Щоб дозволити вміст на рівні блоку будь-де, ми замінюємо на <a>такий <div>:

<ul class = "thumbnails" > 
  <li class = "span4" > 
    <div class = "thumbnail" > 
      <img data-src = "holder.js/300x200" alt = "" >  
      <h3> Мітка мініатюри </h3>
      <p> Ескіз підпису... </p>
    </div>
  </li>
  ...
</ul>

Більше прикладів

Досліджуйте всі ваші можливості з різними класами сітки, доступними для вас. Ви також можете комбінувати різні розміри.

Сповіщення за замовчуванням

Обгортання будь-яким текстом і додатковою кнопкою відхилення .alertдля основного попереджувального повідомлення.

<div class = "alert" > 
  <button type = "button" class = "close" data-dismiss = "alert" > × </button>   
  <strong> Попередження! </strong> Краще перевірте себе, ви виглядаєте не дуже добре.
</div>

Кнопки відхилення

Браузери Mobile Safari та Mobile Opera, окрім data-dismiss="alert"атрибута, вимагають href="#"відхилення сповіщень під час використання <a>тегу.

<a href = "#" class = "close" data-dismiss = "alert" > × </a>   

Крім того, ви можете використовувати <button>елемент з атрибутом data, який ми вирішили зробити для наших документів. Використовуючи <button>, ви повинні включити, type="button"інакше ваші форми можуть не надсилатися.

<button type = "button" class = "close" data-dismiss = "alert" > × </button>   

Відхилення сповіщень через JavaScript

Використовуйте плагін jQuery для швидкого та легкого відхилення сповіщень.

Опції

Для довших повідомлень збільште відступ у верхній і нижній частині оболонки сповіщень, додавши .alert-block.

<div class = "alert alert-block" > 
  <button type = "button" class = "close" data-dismiss = "alert" > × </button>   
  <h4> Увага! </h4>
  Найкраще перевірте себе, ви не...
</div>

Контекстні альтернативи

Додайте додаткові класи, щоб змінити конотацію сповіщення.

Помилка або небезпека

<div class = "alert alert-error" > 
  ...
</div>

Успіх

<div class = "alert alert-success" > 
  ...
</div>

Інформація

<div class = "alert alert-info" > 
  ...
</div>

Приклади та розмітка

Базовий

Індикатор прогресу за умовчанням із вертикальним градієнтом.

<div class = "progress" > 
  <div class = "bar" style = " width : 60 %; " ></div>   
</div>

Смугастий

Використовує градієнт для створення смугастого ефекту. Недоступно в IE7-8.

<div class = "progress progress-striped" > 
  <div class = "bar" style = " width : 20 %; " ></div>   
</div>

Анімований

Додайте .activeдля .progress-stripedанімації смуг справа наліво. Доступно не в усіх версіях IE.

<div class = "progress progress-striped active" > 
  <div class = "bar" style = " width : 40 %; " ></div>   
</div>

Складені

Помістіть кілька брусків в одне .progressціле, щоб скласти їх.

<div class = "progress" > 
  <div class = "bar bar-success" style = " width : 35 %; " ></div>   
  <div class = "bar bar-warning" style = " width : 20 %; " ></div>   
  <div class = "bar bar-danger" style = " width : 10 %; " ></div>   
</div>

Опції

Додаткові кольори

Індикатори виконання використовують деякі з однакових класів кнопок і сповіщень для узгоджених стилів.

<div class = "progress progress-info" > 
  <div class = "bar" style = " width : 20 % " ></div>   
</div>
<div class = "progress progress-success" > 
  <div class = "bar" style = " width : 40 % " ></div>   
</div>
<div class = "progress progress-warning" > 
  <div class = "bar" style = " width : 60 % " ></div>   
</div>
<div class = "progress progress-danger" > 
  <div class = "bar" style = " width : 80 % " ></div>   
</div>

Смугасті штанги

Подібно до суцільних кольорів, у нас є різноманітні смугасті індикатори прогресу.

<div class = "progress progress-info progress-striped" > 
  <div class = "bar" style = " width : 20 % " ></div>   
</div>
<div class = "progress progress-success progress-striped" > 
  <div class = "bar" style = " width : 40 % " ></div>   
</div>
<div class = "progress progress-warning progress-striped" > 
  <div class = "bar" style = " width : 60 % " ></div>   
</div>
<div class = "progress progress-danger progress-striped" > 
  <div class = "bar" style = " width : 80 % " ></div>   
</div>

Підтримка браузера

Індикатори прогресу використовують градієнти, переходи та анімацію CSS3 для досягнення всіх своїх ефектів. Ці функції не підтримуються в IE7-9 або старіших версіях Firefox.

Версії, раніші за Internet Explorer 10 і Opera 12, не підтримують анімацію.

Стилі абстрактних об’єктів для створення різних типів компонентів (наприклад, коментарів до блогу, твітів тощо), які містять зображення, вирівняне за лівим або правим краєм, поряд з текстовим вмістом.

Приклад за замовчуванням

Медіа за замовчуванням дозволяє розміщувати медіа-об’єкт (зображення, відео, аудіо) ліворуч або праворуч від блоку вмісту.

Заголовок ЗМІ

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Заголовок ЗМІ

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Заголовок ЗМІ

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

<div class = "media" > 
  <a class = "pull-left" href = "#" >  
    <img class = "media-object" data-src = "holder.js/64x64" >  
  </a>
  <div class = "media-body" > 
    <h4 class = "media-heading" > Медіа-заголовок </h4> 
    ...
 
    <!-- Вкладений медіа-об’єкт -->
    <div class = "media" > 
      ...
    </div>
  </div>
</div>

Список медіа

Додавши трохи додаткової розмітки, ви можете використовувати медіа-внутрішній список (корисно для потоків коментарів або списків статей).

<ul class = "media-list" > 
  <li class = "media" > 
    <a class = "pull-left" href = "#" >  
      <img class = "media-object" data-src = "holder.js/64x64" >  
    </a>
    <div class = "media-body" > 
      <h4 class = "media-heading" > Медіа-заголовок </h4> 
      ...
 
      <!-- Вкладений медіа-об’єкт -->
      <div class = "media" > 
        ...
     </div>
    </div>
  </li>
</ul>

Велс

Використовуйте свердловину як простий ефект на елементі, щоб надати йому ефекту вставки.

<div class = "well" > 
  ...
</div>

Факультативні заняття

Керуйте відступами та закругленими кутами за допомогою двох додаткових класів модифікаторів.

<div class = "добре добре-великий" > 
  ...
</div>

<div class = "well well-small" > 
  ...
</div>

Закрити значок

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

<button class = "close" > × </button> 

Для пристроїв iOS потрібна href="#"подія for click, якщо ви віддаєте перевагу використанню прив’язки.

<a class = "close" href = "#" > × </a>  

Допоміжні заняття

Прості, цілеспрямовані класи для невеликих налаштувань дисплея або поведінки.

.тягнути вліво

Перемістити елемент ліворуч

class = "pull-left"

. тягнути вліво { _
  float : ліворуч ;
}

.тягнути вправо

Перемістити елемент праворуч

class = "тягнути праворуч"

. потягнути вправо { _
  float : праворуч ;
}

.muted

Змінити колір елемента на#999

class = "muted"

. приглушений {
  колір : #999; 
}

.clearfix

Очистіть floatбудь-який елемент

class = "clearfix"

. clearfix {
  * масштаб : 1 ; 
  &: до ,
  &: після {
    дисплей : таблиця ;
    зміст : "" ; 
  }
  &: після {
    ясно : обидва ;
  }
}