Групы кнопак

Выкарыстоўвайце групы кнопак, каб аб'яднаць некалькі кнопак у адзін састаўны кампанент. Пабудуйце іх з серыі <a>або <button>элементаў.

Лепшыя практыкі

Мы рэкамендуем наступныя рэкамендацыі па выкарыстанні груп кнопак і панэляў інструментаў:

• Заўсёды выкарыстоўвайце адзін і той жа элемент у адной групе кнопак <a>або <button>.
• Не змешвайце кнопкі розных колераў у адной групе кнопак.
• Выкарыстоўвайце значкі ў дадатак да тэксту або замест яго, але не забудзьцеся ўключыць альтэрнатыўны тэкст і тэкст загалоўка, дзе гэта неабходна.

Звязаныя групы кнопак з выпадаючымі спісамі (гл. ніжэй) трэба выклікаць асобна і заўсёды ўключаць у сябе выпадальны спіс, каб паказаць меркаваныя паводзіны.

Прыклад па змаўчанні

Вось як выглядае HTML для стандартнай групы кнопак, створанай з дапамогай кнопак тэгаў прывязкі:

<div class = "btn-group" > 
  <button class = "btn" > 1 </button> 
  <button class = "btn" > 2 </button> 
  <button class = "btn" > 3 </button> 
</div>

Прыклад панэлі інструментаў

Аб'яднайце наборы <div class="btn-group">ў <div class="btn-toolbar">больш складаныя кампаненты.

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

Сцяжок і радыё густы

Групы кнопак таксама могуць функцыянаваць як радыё, дзе актыўнай можа быць толькі адна кнопка, або як сцяжкі, дзе можа быць актыўная любая колькасць кнопак. Для гэтага праглядзіце дакументы Javascript .

Атрымаць javascript »

Выпадальныя меню ў групах кнопак

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

Агляд і прыклады

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

Прыклад разметкі

Падобна групе кнопак, наша разметка выкарыстоўвае звычайную разметку кнопак, але з некалькімі дапаўненнямі для ўдасканалення стылю і падтрымкі плагіна jQuery, які расчыняецца ў Bootstrap.

<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.

Агляд і прыклады

Грунтуючыся на стылях груп кнопак і разметцы, мы можам лёгка стварыць раздзельную кнопку. Раздзеленыя кнопкі маюць стандартнае дзеянне злева і выпадальны пераключальнік справа з кантэкстнымі спасылкамі.

Памеры

Выкарыстоўвайце дадатковыя класы кнопак .btn-mini, .btn-small, або .btn-largeдля памеру.

<div class = "btn-group" > 
  ...
  <ul class = "dropdown-menu pull-right" > 
    <!-- спасылкі на выпадальнае меню -->
  </ul>
</div>

Прыклад разметкі

Мы пашыраем звычайныя выпадальныя спісы кнопак, каб забяспечыць дзеянне другой кнопкі, якое працуе як асобны трыгер выпадальнага меню.

<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>

Выпадальныя меню

Выпадаючыя меню таксама можна пераключаць знізу ўверх, дадаючы адзін клас да непасрэднага бацькі .dropdown-menu. Ён пераверне кірунак .caretі змяніць становішча самога меню, каб рухацца знізу ўверх, а не зверху ўніз.

<div class = "btn-group dropup" > 
  <button class = "btn" > Dropup </button> 
  <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "caret" ></span> 
  </button>
  <ul class = "dropdown-menu" > 
    <!-- спасылкі на выпадальнае меню -->
  </ul>
</div>

Магутны базавы клас

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

Калі выкарыстоўваць

Укладкі і таблеткі выдатна падыходзяць для раздзелаў кантэнту або навігацыі паміж старонкамі падобнага кантэнту.

Выраўноўванне кампанентаў

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

Асноўныя ўкладкі

Вазьміце звычайныя <ul>спасылкі і дадайце .nav-tabs:

• дадому
• Профіль
• Паведамленні

<ul class = "nav nav-tabs" > 
  <li class = "актыўны" > 
    <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 = "актыўны" > 
    <a href = "#" > Галоўная </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

Як скласці іх

Паколькі ўкладкі і таблеткі гарызантальныя па змаўчанні, проста дадайце другі клас, .nav-stackedкаб яны выглядалі вертыкальна складзенымі.

Складаныя ўкладкі

• дадому
• Профіль
• Паведамленні

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

Складзеныя таблеткі

• дадому
• Профіль
• Паведамленні

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

Багатае меню стала простым

Выпадаючыя меню ва ўкладках і таблетках Bootstrap вельмі простыя і патрабуюць толькі крыху дадатковага HTML і лёгкага плагіна jQuery.

Перайдзіце на старонку Javascript, каб прачытаць дакументы па ініцыялізацыі выпадаючых меню ў Bootstrap.

Укладкі з выпадальным меню

• дадому
• Даведка
• Падаць
  • Дзеянне
  • Чарговая акцыя
  • Тут яшчэ нешта
  • Раздзельная спасылка

<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.

Структурна яны пабудаваны на тых жа асноўных стылях навігацыі, што і ўкладкі і таблеткі, таму выкарыстанне і налада простыя.

З абразамі

Навігацыйныя спісы таксама лёгка абсталяваць значкамі. Дадайце належны <i>тэг з класам, і ўсё гатова.

Гарызантальныя падзельнікі

Дадайце гарызантальны падзельнік, стварыўшы пусты элемент спісу з класам .divider, напрыклад:

<ul class = "nav nav-list" > 
  ...
  <li class = "падзельнік" ></li> 
  ...
</ul>

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

Вазьміце спіс спасылак і дадайце class="nav nav-list":

<ul class = "nav nav-list" > 
  <li class = "nav-header" > 
    Загаловак спісу
  </li>
  <li class = "актыўны" > 
    <a href = "#" > Галоўная </a> 
  </li>
  <li>
    <a href = "#" > Бібліятэка </a> 
  </li>
  ...
</ul>

Прыклад са значкамі

Той жа прыклад, але з <i>тэгамі для значкоў.

<ul class = "nav nav-list" > 
  ...
  <li>
    <a href = "#" > 
      <i class = "icon-book" ></i> 
      Бібліятэка
    </a>
  </li>
  ...
</ul>

Што ўваходзіць

Ажывіце свае ўкладкі з дапамогай простага плагіна для пераключэння паміж змесцівам праз укладкі. Bootstrap аб'ядноўвае ўкладкі ў чатырох стылях: зверху (па змаўчанні), справа, знізу і злева.

Пераключацца паміж імі лёгка і патрабуе змены вельмі невялікай разметкі.

Згасанне ва ўкладках

Каб укладкі знікалі, дадайце .fadeда кожнай .tab-pane.

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

Усе ўкладкі з магчымасцю ўкладак працуюць на аснове нашага лёгкага плагіна jQuery. Чытайце больш пра тое, як ажывіць укладкі з магчымасцю ўкладак, на старонцы дакументацыі javascript .

Атрымаць javascript →

Прыклад з укладкамі

Каб зрабіць укладкі даступнымі для ўкладак, стварыце .tab-paneз унікальным ідэнтыфікатарам для кожнай укладкі і загарніце іх у .tab-content.

Для табуляцый, выраўнаваных па правым або левым краі, абгарніце .nav-tabsі .tab-contentўнутр .tabbable.

Простая разметка

Выкарыстанне табуляцыйных укладак патрабуе абгорткі div, набору табуляцый і набору табуляцыйных панэляў кантэнту.

<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>

Язычкі ўнізе

Перавярніце парадак 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>

Навбар рыштаванні

Навігацыйная панэль патрабуе ўсяго некалькіх элементаў div, каб добра структураваць яе для статычнага або фіксаванага адлюстравання.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <div class = "кантэйнер" > 
      ...
    </div>
  </div>
</div>

Выпраўлена панэль навігацыі

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

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

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

Калі вы прымацоўваеце панэль навігацыі, не забывайце ўлічваць схаваную вобласць пад ёй. Дадайце 40 пікселяў або больш пракладкі ў <body>. Абавязкова дадайце гэта пасля асноўнага CSS Bootstrap і перад дадатковым спагадным CSS.

Назва брэнда

Простая спасылка, каб паказаць назву вашага брэнда або праекта, патрабуе толькі тэга якара.

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

Формы ў навігацыйнай панэлі

Каб правільна стылізаваць і размясціць форму ў панэлі навігацыі, дадайце адпаведныя класы, як паказана ніжэй. Для формы па змаўчанні ўключыце .navbar-formабо .pull-leftабо .pull-right, каб правільна выраўнаваць яе.

<form class = "navbar-form pull-left" > 
  <input type = "text" class = "span2" >  
</form>

Для больш наладжанай формы пошуку дадайце і .navbar-searchда ўводу спецыялізаваных стыляў на панэлі навігацыі.form.search-query

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

Дадатковы адаптыўны варыянт

У залежнасці ад колькасці змесціва ў вашай верхняй панэлі, вы можаце захацець укараніць адаптыўныя параметры. Каб зрабіць гэта, абгарніце ваш навігацыйны кантэнт у які змяшчае div, .nav-collapse.collapseі дадайце кнопку пераключэння навігацыйнай панэлі, .btn-navbar.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <div class = "кантэйнер" > 
 
      <!-- .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" > 
        <!-- .nav, .navbar-search, .navbar-form і г.д. -->
      </div>
 
    </div>
  </div>
</div>

Навігацыйныя спасылкі

Навігацыйныя элементы лёгка дадаваць з дапамогай неўпарадкаваных спісаў.

<ul class = "nav" > 
  <li class = "актыўны" > 
    <a href = "#" > Галоўная </a> 
  </li>
  <li><a href = "#" > Спасылка </a></li> 
  <li><a href = "#" > Спасылка </a></li> 
</ul>

Вы можаце лёгка дадаць падзельнікі да вашых навігацыйных спасылак з дапамогай пустога элемента спісу і простага класа. Проста дадайце гэта паміж спасылкамі:

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

Выраўноўванне кампанентаў

Каб выраўнаваць навігацыю, форму пошуку або тэкст, выкарыстоўвайце ўтыліты .pull-leftабо .pull-rightкласы. Абодва класы дададуць CSS float у паказаным кірунку.

Даданне выпадальных меню

Дадаваць выпадаючыя і выпадаючыя меню ў навігацыю вельмі проста, але для гэтага патрабуецца выкарыстанне нашага плагіна JavaScript .

<ul class = "nav" > 
  <li class = "dropdown" > 
    <a href = "#" 
          клас = "выпадальны спіс-пераключэнне"
          data-toggle = "выпадальны спіс" >
          Рахунак
          <b class = "caret" ></b> 
    </a>
    <ul class = "dropdown-menu" > 
      ...
    </ul>
  </li>
</ul>

Атрымаць javascript →

Тэкст у панэлі навігацыі

Абгарніце радкі тэксту ў <.navbar-text>, звычайна на <p>тэг для правільнага ініцыялізацыі і колеру.

Навошта іх выкарыстоўваць

Навігацыя па навігацыі выкарыстоўваецца як спосаб паказаць карыстальнікам, дзе яны знаходзяцца ў праграме або на сайце, але не для асноўнай навігацыі. Каб яны былі найбольш эфектыўнымі, выкарыстоўвайце іх разрэджана і лаканічна.

Прыклады

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

• дадому

• Галоўная /
• Бібліятэка

• Галоўная /
• Бібліятэка /
• даныя

Разметка

HTML - гэта ваш стандартны неўпарадкаваны спіс са спасылкамі.

<ul class = "хлебная дробка" > 
  <li>
    <a href = "#" > Галоўная </a> <span class = "divider" > / </span>   
  </li>
  <li>
    <a href = "#" > Бібліятэка </a> <span class = "divider" > / </span>   
  </li>
  <li class = "active" > Даныя </li> 
</ul>

Калі выкарыстоўваць

Вельмі спрошчаная і мінімальна аформленая пагінацыя, натхнёная Rdio, выдатна падыходзіць для праграм і вынікаў пошуку. Вялікі блок цяжка прапусціць, ён лёгка маштабуецца і забяспечвае вялікія вобласці націску.

Спасылкі на старонкі з захаваннем стану

Спасылкі можна наладзіць і працуюць у шэрагу абставінаў з правільным класам. .disabledдля спасылак, па якіх нельга націснуць, і .activeдля бягучай старонкі.

Гнуткае выраўноўванне

Дадайце любы з двух неабавязковых класаў, каб змяніць выраўноўванне спасылак на пагінацыю: .pagination-centeredі .pagination-right.

Прыклады

Кампанент пагінацыі па змаўчанні з'яўляецца гнуткім і працуе ў некалькіх варыяцыях.

Разметка

Загорнута ў <div>, пагінацыя - гэта проста <ul>.

<div class = "pagination" > 
  <ul>
    <li><a href = "#" > Папярэдняя </a></li> 
    <li class = "актыўны" > 
      <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 = "#" > Далей </a></li> 
  </ul>
</div>

Пра пэйджар

Кампанент пэйджара - гэта набор спасылак для простай пагінацыі з лёгкай разметкай і яшчэ больш лёгкімі стылямі. Гэта выдатна падыходзіць для простых сайтаў, такіх як блогі або часопісы.

Неабавязковы адключаны стан

Спасылкі на пэйджэр таксама выкарыстоўваюць агульны .disabledклас з пагінацыі.

Прыклад па змаўчанні

Па змаўчанні пэйджар цэнтруе спасылкі.

• Папярэдні
• Далей

<ul class = "пэйджар" > 
  <li>
    <a href = "#" > Папярэдняя </a> 
  </li>
  <li>
    <a href = "#" > Далей </a> 
  </li>
</ul>

Выраўнаваныя спасылкі

Акрамя таго, вы можаце выраўнаваць кожную спасылку па баках:

• ← Старэйшыя
• Навей →

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

Аб

Значкі - гэта невялікія простыя кампаненты для адлюстравання індыкатара або нейкага падліку. Яны звычайна сустракаюцца ў паштовых кліентах, такіх як Mail.app, або ў мабільных праграмах для push-апавяшчэнняў.

Даступныя класы

Bootstrap забяспечвае лёгкі, гнуткі кампанент, які называецца hero unit, для дэманстрацыі кантэнту на вашым сайце. Ён добра працуе на маркетынгавых і багатых кантэнтам сайтах.

Разметка

Абгарніце свой кантэнт divтакім чынам:

<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> Прыклад загалоўка старонкі </h1>
</div>

Эскізы па змаўчанні

Па змаўчанні мініяцюры Bootstrap прызначаны для дэманстрацыі звязаных малюнкаў з мінімальнай неабходнай разметкай.

Вельмі наладжвальны

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

• 

  Этыкетка мініяцюры

  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.

  Дзеянне Дзеянне

• 

  Этыкетка мініяцюры

  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.

  Дзеянне Дзеянне

Навошта выкарыстоўваць мініяцюры

Эскізы (раней .media-gridда версіі 1.4) выдатна падыходзяць для сетак фатаграфій і відэа, вынікаў пошуку малюнкаў, рознічных тавараў, партфоліо і шмат чаго іншага. Гэта могуць быць спасылкі або статычны кантэнт.

Простая, гнуткая разметка

Разметка мініяцюр простая - усё, што патрабуецца, - ulз любой колькасцю элементаў. liЁн таксама надзвычай гнуткі, дазваляе ахопліваць любы тып змесціва з крыху большай разметкай.

Выкарыстоўвае памеры слупкоў сеткі

І, нарэшце, кампанент мініяцюр выкарыстоўвае існуючыя класы сістэмы сеткі, такія як .span2або , .span3для кіравання памерамі мініяцюр.

Разметка

Як згадвалася раней, неабходная разметка для мініяцюр лёгкая і простая. Вось агляд налад па змаўчанні для звязаных малюнкаў :

<ul class = "мініяцюры" > 
  <li class = "span3" > 
    <a href = "#" class = "мініяцюра" >  
      <img src = "https://placehold.it/260x180" alt = "" >  
    </a>
  </li>
  ...
</ul>

Для карыстацкага змесціва HTML у эскізах разметка нязначна мяняецца. Каб дазволіць змесціва на ўзроўні блока дзе заўгодна, мы мяняем яго <a>на <div>такі:

<ul class = "мініяцюры" > 
  <li class = "span3" > 
    <div class = "мініяцюра" > 
      <img src = "https://placehold.it/260x180" alt = "" >  
      <h5> Пазнака мініяцюры </h5>
      <p> Мініяцюра подпісу тут... </p>
    </div>
  </li>
  ...
</ul>

Больш прыкладаў

Вывучыце ўсе свае варыянты з дапамогай розных даступных класаў сеткі. Вы таксама можаце спалучаць розныя памеры.

Перапісаны базавы клас

З дапамогай Bootstrap 2 мы спрасцілі базавы клас: .alertзамест .alert-message. Мы таксама скарацілі мінімальна неабходную разметку <p>— па змаўчанні не патрабуецца, толькі знешні <div>.

Адзінае папярэджанне

Каб атрымаць больш трывалы кампанент з меншай колькасцю кода, мы выдалілі дыферэнцыяльны выгляд для папярэджанняў аб блакіроўцы, паведамленняў, якія прыходзяць з большай запаўненнем і звычайна больш тэксту. Клас таксама змяніўся на .alert-block.

Выдатна спалучаецца з javascript

Bootstrap comes with a great jQuery plugin that supports alert messages, making dismissing them quick and easy.

Get the plugin »

Example alerts

Wrap your message and an optional close icon in a div with simple class.

<div class="alert">
  <button class="close" data-dismiss="alert">×</button>
  <strong>Warning!</strong> Best check yo self, you're not looking too good.
</div>

Heads up! iOS devices require an href="#" for the dismissal of alerts. Be sure to include it and the data attribute for anchor close icons. Alternatively, you may use a <button> element with the data attribute, which we have opted to do for our docs. When using <button>, you must include type="button" or your forms may not submit.

Easily extend the standard alert message with two optional classes: .alert-block for more padding and text controls and .alert-heading for a matching heading.

<div class="alert alert-block">
  <a class="close" data-dismiss="alert" href="#">×</a>
  <h4 class="alert-heading">Warning!</h4>
  Best check yo self, you're not...
</div>

Error or danger

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

Success

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

Information

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

Basic

Default progress bar with a vertical gradient.

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

Striped

Uses a gradient to create a striped effect (no IE).

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

Animated

Takes the striped example and animates it (no IE).

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

Additional colors

Progress bars use some of the same button and alert classes for consistent styles.

Striped bars

Similar to the solid colors, we have varied striped progress bars.

Behavior

Progress bars use CSS3 transitions, so if you dynamically adjust the width via javascript, it will smoothly resize.

If you use the .active class, your .progress-striped progress bars will animate the stripes left to right.

Browser support

Progress bars use CSS3 gradients, transitions, and animations to achieve all their effects. These features are not supported in IE7-9 or older versions of Firefox.

Opera and IE do not support animations at this time.

Wells

Use the well as a simple effect on an element to give it an inset effect.

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

Close icon

Use the generic close icon for dismissing content like modals and alerts.

×

<button class="close">&times;</button>

iOS devices require an href="#" for click events if you rather use an anchor.

<a class="close" href="#">&times;</a>