Пример

Контекстуално мени за приказ на списоци со врски. Направено е интерактивно со паѓачкиот приклучок JavaScript .

<ul class = "dropdown-menu" role = "мени" 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 = „разделник“ ></li> 
  <li><a tabindex = "-1" href = "#" > Одделена врска </a></li>  
</ul>

Означување

Гледајќи го само паѓачкото мени, еве го потребниот HTML. Треба да го завиткате активирањето на паѓачкото мени и паѓачкото мени во .dropdown, или друг елемент што декларира position: relative;. Потоа само креирајте го менито.

<div class = „паѓачко долу“ > 
  <!-- Врска или копче за префрлување на паѓачкото мени -->
  <ul class = "dropdown-menu" role = "мени" 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 = „разделник“ ></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во a <li>во паѓачкото мени за да ја оневозможите врската.

<ul class = "dropdown-menu" role = "мени" 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 = "мени" aria-labelledby = "dLabel" >   
  ...
  <li class = „паѓачко-подмени“ > 
    <a tabindex = "-1" href = "#" > Повеќе опции </a>  
    <ul class = „паѓачко мени“ > 
      ...
    </ul>
  </li>
</ul>

Примери

Две основни опции, заедно со уште две специфични варијации.

Група со едно копче

Завиткајте серија копчиња со .btnво .btn-group.

<div class = "btn-група" > 
  <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-група" > 
    ...
  </div>
</div>

Групи со вертикални копчиња

Направете збир на копчиња да изгледаат вертикално наредени наместо хоризонтално.

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

Поле за избор и радио вкусови

Групите на копчиња можат да функционираат и како радија, каде што може да биде активно само едно копче, или полиња за избор, каде што може да биде активен кој било број на копчиња. Погледнете ги JavaScript документите за тоа.

Спуштање во групи на копчиња

Главите горе!Копчињата со паѓачки копчиња мора да бидат поединечно завиткани во нив .btn-groupза .btn-toolbarправилно прикажување.

Преглед и примери

Користете кое било копче за да активирате паѓачко мени со тоа што ќе го ставите во a .btn-groupи ќе обезбедите соодветна ознака на менито.

<div class = "btn-група" > 
  <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >   
    Акција
    <span class = "caret" ></span> 
  </a>
  <ul class = „паѓачко мени“ > 
    <!-- линкови од паѓачкото мени -->
  </ul>
</div>

Работи со сите големини на копчиња

Спуштањето на копчињата работи во која било големина: .btn-large, .btn-small, или .btn-mini.

Потребен е JavaScript

За паѓачкото копче потребно е да функционира паѓачкиот приклучок Bootstrap .

Во некои случаи - како мобилните - паѓачкото мени ќе се протега надвор од приказот. Порамнувањето треба да го решите рачно или со прилагоден JavaScript.

Спуштање на копчињата за поделување

Надоврзувајќи се на стиловите на групите на копчињата и обележувањето, лесно можеме да создадеме копче за поделба. Копчињата за поделба имаат стандардно дејство лево и паѓачко копче надесно со контекстуални врски.

<div class = "btn-група" > 
  <button class = "btn" > Дејство </button> 
  <button class = "btn dropdown-toggle" data-toggle = "паѓачко" >  
    <span class = "caret" ></span> 
  </button>
  <ul class = „паѓачко мени“ > 
    <!-- линкови од паѓачкото мени -->
  </ul>
</div>

Големини

Користете ги дополнителните класи на копчиња .btn-mini, .btn-small, или .btn-largeза димензионирање.

<div class = "btn-група" > 
  <button class = "btn btn-mini" > Дејство </button> 
  <button class = "btn btn-mini dropdown-toggle" data-toggle = "паѓачко" >  
    <span class = "caret" ></span> 
  </button>
  <ul class = „паѓачко мени“ > 
    <!-- линкови од паѓачкото мени -->
  </ul>
</div>

Испаѓачки менија

Паѓачките менија, исто така, може да се префрлаат од долу нагоре со додавање на една класа на непосредниот родител на .dropdown-menu. Ќе ја преврти насоката на .caretи ќе го препозиционира самото мени за да се движи од дното нагоре наместо од врвот надолу.

<div class = "отпаѓање на групата btn" > 
  <button class = "btn" > Испаѓање </button> 
  <button class = "btn dropdown-toggle" data-toggle = "паѓачко" >  
    <span class = "caret" ></span> 
  </button>
  <ul class = „паѓачко мени“ > 
    <!-- линкови од паѓачкото мени -->
  </ul>
</div>

Лесни поставки Иста ознака, различни класи

Сите компоненти за навигација овде - јазичиња, апчиња и списоци - споделуваат исти основни ознаки и стилови низ .navкласата.

Основни јазичиња

Земете редовни <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>

Состојба со инвалидитет

За која било компонента за навигација (јазичиња, апчиња или список), додајте .disabledза сиви врски и без ефекти на лебдење . Сепак, линковите ќе останат со кликнување, освен ако не го отстраните hrefатрибутот. Алтернативно, можете да имплементирате прилагоден JavaScript за да ги спречите тие кликови.

<ul class = "nav nav-pills" > 
  ...
  <li class = "disabled" ><a href = "#" > Дома </a></li>  
  ...
</ul>

Порамнување на компонентите

За да ги усогласите врските за навигација, користете ги .pull-leftили .pull-rightкласите на услужните програми. Двете класи ќе додадат CSS плови во наведената насока.

Складни

Бидејќи јазичињата и таблетите се стандардно хоризонтални, само додадете втора класа, .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 = „паѓачко долу“ > 
    <a class = "паѓачко-префрлање" 
       data-toggle = „паѓачко долу“
       href = "#" >
        Спуштање
        <b class = "caret" ></b> 
      </a>
    <ul class = „паѓачко мени“ > 
      <!-- врски -->
    </ul>
  </li>
</ul>

Апчиња со капки

<ul class = "nav nav-pills" > 
  <li class = „паѓачко долу“ > 
    <a class = "паѓачко-префрлање" 
       data-toggle = „паѓачко долу“
       href = "#" >
        Спуштање
        <b class = "caret" ></b> 
      </a>
    <ul class = „паѓачко мени“ > 
      <!-- врски -->
    </ul>
  </li>
</ul>

Nav списоци

Едноставен и лесен начин за создавање групи на навигациски врски со опционални заглавија. Најдобро се користат во страничните ленти како што е 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 = „разделник“ ></li> 
  ...
</ul>

Навигација со јазичиња

Оживувајте ги вашите јазичиња со едноставен приклучок за префрлање помеѓу содржината преку јазичиња. Bootstrap ги интегрира табовите со табли во четири стилови: горе (стандардно), десно, долу и лево.

Пример за таблици

За да ги направите картичките со таблички, креирајте .tab-paneуникатен ID за секоја картичка и завиткајте ги во .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 = „таб-содржина“ > 
    <div class = "tab-pane active" 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 = "јазичиња за јазичиња-подолу" > 
  <div class = „таб-содржина“ > 
    ...
  </div>
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
</div>

Јазичиња лево

Заменете ја класата за да ставите јазичиња лево.

<div class = "tabable tabs-left" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = „таб-содржина“ > 
    ...
  </div>
</div>

Јазичиња на десната страна

Заменете ја класата за да ставите јазичиња на десната страна.

<div class = "tabable tabs-right" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = „таб-содржина“ > 
    ...
  </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>

Компоненти на Navbar

Бренд

Едноставна врска за прикажување на вашиот бренд или име на проектот бара само ознака за сидро.

<a class = "brand" href = "#" > Име на проектот </a>  

Врски за навигација

Едноставно се додаваат ставките за Navig преку неуредени списоци.

<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 = "разделник-вертикално" </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 = "Барај" >   
</form>

Порамнување на компонентите

Порамнете ги врските за навигација, формуларот за пребарување или текстот, користете ги .pull-leftили .pull-rightкласите на услужните програми. Двете класи ќе додадат CSS плови во наведената насока.

Користење на паѓачки мени

Додајте паѓачки и паѓачки списоци во навивачот со малку означување и паѓачкиот приклучок JavaScript .

<ul class = "nav" > 
  <li class = „паѓачко долу“ > 
    <a href = "#" class = "dropdown-toggle" data-toggle = "паѓачко" >   
      Сметка
      <b class = "caret" ></b> 
    </a>
    <ul class = „паѓачко мени“ > 
      ...
    </ul>
  </li>
</ul>

Посетете ја паѓачката документација на JavaScript за повеќе ознаки и информации за паѓачкото мени за повикување.

Текст

Завиткајте низи од текст во елемент со .navbar-text, обично на <p>ознака за правилно водство и боја.

Изборни варијации на приказот

Поправете ја лентата за навигација на врвот или на дното на приказот со дополнителна класа на најоддалечениот дел, .navbar.

Фиксиран на врвот

Додајте .navbar-fixed-topи не заборавајте да ја земете предвид скриената област под неа со додавање најмалку 40 пиксели paddingна <body>. Не заборавајте да го додадете ова по основниот Bootstrap CSS и пред опционалниот одговорен 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>

Одговорна лента за навигација

За да се имплементира лентата за навигација која реагира на распаѓање, завиткајте ја содржината на вашата навигација во див .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 collapse" > 
        <!-- .nav, .navbar-пребарување, .navbar-form, итн -->
      </div>
 
    </div>
  </div>
</div>

Превртена варијација

Изменете го изгледот на лентата за навигација со додавање .navbar-inverse.

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

Примери

Еден пример прикажан како што може да биде прикажан на повеќе страници.

<ul class = „лебна трошка“ > 
  <li><a href = "#" > Почетна </a> <span class = "делител" > / </span></li>   
  <li><a href = "#" > Библиотека </a> <span class = "divider" > / </span></li>   
  <li class = "active" > Податоци </li> 
</ul>

Стандардна пагинација

Едноставна страница инспирирана од Rdio, одлична за апликации и резултати од пребарување. Големиот блок е тешко да се пропушти, лесно може да се скалира и обезбедува големи области за кликнување.

<div class = „страница“ > 
  <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 = „страница“ > 
  <ul>
    <li class = "оневозможено" ><a href = "#" > « </a></li>  
    <li class = "активен" ><a href = "#" > 1 </a></li>  
    ...
  </ul>
</div>

Можете опционално да ги замените активните или оневозможените сидра за распони за да ја отстраните функционалноста на кликнувањето додека ги задржувате наменетите стилови.

<div class = „страница“ > 
  <ul>
    <li class = "оневозможено" ><span> « </span></li> 
    <li class = "активен" ><span> 1 </span></li> 
    ...
  </ul>
</div>

Големини

Дали сакате поголема или помала страница? Додадете .pagination-large, .pagination-small, или .pagination-miniза дополнителни големини.

<div class = "pagination pagination-large" > 
  <ul>
    ...
  </ul>
</div>
<div class = „страница“ > 
  <ul>
    ...
  </ul>
</div>
<div class = „пагинација-мала“ > 
  <ul>
    ...
  </ul>
</div>
<div class = "pagination pagination-mini" > 
  <ul>
    ...
  </ul>
</div>

Порамнување

Додадете една од двете изборни класи за да го промените порамнувањето на врските за страници: .pagination-centeredи .pagination-right.

<div class = "пагинација-центрирана на страницата" > 
  ...
</div>

<div class = „пагинација-десно“ > 
  ...
</div>

Пејџер

Брзи претходни и следни врски за едноставни имплементации на страници со светло означување и стилови. Одлично е за едноставни сајтови како блогови или списанија.

Стандарден пример

Стандардно, пејџерот центрира врски.

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

Факултативна оневозможена состојба

Пејџер-врските исто така ја користат .disabledкласата за општа корист од страницата.

<ul class = „пејџер“ > 
  <li class = "претходно оневозможено" > 
    <a href = "#" > ← Постари </a> 
  </li>
  ...
</ul>

Етикети

Значки

Лесно се склопува

За лесна имплементација, етикетите и беџовите едноставно ќе се срушат (преку :emptyизбирачот на CSS) кога нема содржина.

Херојска единица

Лесна, флексибилна компонента за прикажување на клучните содржини на вашата страница. Работи добро на сајтови со маркетинг и содржина.

<div class = "херој-единица" > 
  <h1> Наслов </h1>
  <p> Таглин </p>
  <p>
    <a class = "btn btn-primary btn-large" > 
      Научи повеќе
    </a>
  </p>
</div>

Заглавие на страницата

Едноставна обвивка за h1соодветно распоредување и сегментирање на делови од содржината на страницата. Може да го користи h1стандардниот smallелемент, како и повеќето други компоненти (со дополнителни стилови).

<div class = „заглавие на страницата“ > 
  <h1> Пример заглавие на страницата <small> Подтекст за заглавие </small></h1>
</div>

Стандардни сликички

Стандардно, сликичките на Bootstrap се дизајнирани да прикажуваат поврзани слики со минимално потребно обележување.

Високо приспособлив

Со малку дополнително обележување, можно е да се додаде секаков вид HTML содржина како наслови, параграфи или копчиња во сликички.

Зошто да користите сликички

Сликичките (претходно .media-gridдо верзијата 1.4) се одлични за решетки од фотографии или видеа, резултати од пребарување слики, малопродажни производи, портфолија и многу повеќе. Тие можат да бидат врски или статична содржина.

Едноставно, флексибилно обележување

Означувањето на сликичките е едноставно - сè што е потребно е ulсо кој било број елементи. liТој е исто така супер флексибилен, овозможувајќи секаков тип на содржина со само малку повеќе обележување за да се завитка вашата содржина.

Користи големини на колони на мрежа

Конечно, компонентата за сликички ги користи постоечките мрежни системски класи - како .span2или .span3- за контрола на димензиите на сликичките.

Означување

Како што споменавме претходно, потребната ознака за сликички е лесна и јасна. Еве поглед на стандардното поставување за поврзани слики :

<ul class = „сликички“ > 
  <li class = "span4" > 
    <a href = "#" class = "слика" >  
      <img data-src = "holder.js/300x200" alt = "" >  
    </a>
  </li>
  ...
</ul>

За прилагодена содржина на HTML во сликички, ознаката малку се менува. За да дозволиме содржина на ниво на блок насекаде, ја заменуваме <a>со <div>вака:

<ul class = „сликички“ > 
  <li class = "span4" > 
    <div class = „слика“ > 
      <img data-src = "holder.js/300x200" alt = "" >  
      <h3> ознака за сликички </h3>
      <p> Наслов на сликичка... </p>
    </div>
  </li>
  ...
</ul>

Повеќе примери

Истражете ги сите ваши опции со различните класи на мрежа што ви се достапни. Можете исто така да мешате и поклопувате различни големини.

Стандардно предупредување

Завиткајте го секој текст и опционално копче за отфрлање .alertза основна предупредувачка порака за предупредување.

<div class = „аларм“ > 
  <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>елемент со атрибутот податоци, што се одлучивме да го направиме за нашите документи. Кога користите <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 = "предупредување-грешка за предупредување" > 
  ...
</div>

Успех

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

Информации

<div class = "информации за предупредување за предупредување" > 
  ...
</div>

Примери и обележување

Основни

Стандардна лента за напредок со вертикален градиент.

<div class = „напредок“ > 
  <div class = "bar" style = " ширина : 60 %; " </div>   
</div>

Пругасти

Користи градиент за да создаде ефект на риги. Не е достапно во IE7-8.

<div class = "напредок напредок-шарени" > 
  <div class = "bar" style = " ширина : 20 %; " </div>   
</div>

Анимирани

Додајте .activeво за да .progress-stripedги анимирате лентите од десно кон лево. Не е достапно во сите верзии на IE.

<div class = "progress progress-striped active" > 
  <div class = "bar" style = " ширина : 40 %; " </div>   
</div>

Наредени

Ставете повеќе ленти во истото .progressза да ги наредете.

<div class = „напредок“ > 
  <div class = "bar bar-success" style = " ширина : 35 %; " ></div>   
  <div class = "bar bar-warning" style = " ширина : 20 %; " </div>   
  <div class = "bar bar-danger" style = " ширина : 10 %; " </div>   
</div>

Опции

Дополнителни бои

Лентите за напредок користат некои од истите копчиња и класи на предупредување за конзистентни стилови.

<div class = "прогрес напредок-информации" > 
  <div class = "bar" style = " ширина : 20 % " ></div>   
</div>
<div class = „напредок напредок-успех“ > 
  <div class = "bar" style = " ширина : 40 % " ></div>   
</div>
<div class = „предупредување за напредок“ > 
  <div class = "bar" style = " ширина : 60 % " ></div>   
</div>
<div class = "прогрес напредок-опасност" > 
  <div class = "bar" style = " ширина : 80 % " ></div>   
</div>

Решетки со риги

Слично на цврстите бои, имаме разновидни ленти за напредок.

<div class = "progress progress-info progress-striped" > 
  <div class = "bar" style = " ширина : 20 % " ></div>   
</div>
<div class = "напредок напредок-успех напредок-шарени" > 
  <div class = "bar" style = " ширина : 40 % " ></div>   
</div>
<div class = "progress progress-warning progress-striped" > 
  <div class = "bar" style = " ширина : 60 % " ></div>   
</div>
<div class = "напредок напредок-опасност напредок-шарени" > 
  <div class = "bar" style = " ширина : 80 % " ></div>   
</div>

Поддршка на прелистувачот

Лентите за напредок користат градиенти, транзиции и анимации CSS3 за да ги постигнат сите нивни ефекти. Овие функции не се поддржани во IE7-9 или постари верзии на Firefox.

Верзиите порано од Internet Explorer 10 и Opera 12 не поддржуваат анимации.

Стилови на апстрактни објекти за градење на различни видови компоненти (како коментари на блог, твитови, итн.) кои имаат слика порамнета лево или десно заедно со текстуалната содржина.

Стандарден пример

Стандардните медиуми дозволуваат да лебдат медиумски објект (слики, видео, аудио) лево или десно од блок со содржина.

Медиумски наслов

Cras sit amet nibh libero, во gravida nulla. Нулта или метус скалериска пред да се соличитудин commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis во faucibus.

Медиумски наслов

Cras sit amet nibh libero, во gravida nulla. Нулта или метус скалериска пред да се соличитудин commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis во faucibus.

Медиумски наслов

Cras sit amet nibh libero, во gravida nulla. Нулта или метус скалериска пред да се соличитудин commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis во faucibus.

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

Медиумска листа

Со малку дополнително обележување, можете да користите медиуми во внатрешноста на списокот (корисно за теми за коментари или списоци на статии).

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

Велс

Користете го бунарот како едноставен ефект на елемент за да му дадете вметнат ефект.

<div class = „добро“ > 
  ...
</div>

Факултативни часови

Контролирајте ги облогите и заоблените агли со две опционални класи на модификатори.

<div class = „добро добро-голем“ > 
  ...
</div>

<div class = „добро добро-мал“ > 
  ...
</div>

Затвори икона

Користете ја генеричката икона за затворање за отфрлање содржини како модали и предупредувања.

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

Уредите со iOS бараат href="#"настани за кликнување ако повеќе би сакале да користите сидро.

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

Помошни часови

Едноставни, фокусирани часови за мали промени во приказот или однесувањето.

.повлече-лево

Плови елемент лево

класа = "повлече-лево"

. повлече - лево {
  плови : лево ;
}

.повлече-десно

Пловете елемент десно

класа = "повлече-десно"

. повлече - десно {
  плови : десно ;
}

.згаснат

Променете ја бојата на елементот во#999

класа = „исклучено“

. исклучен звук {
  боја : #999; 
}

.расчисти

Исчистете го floatна кој било елемент

класа = "чисто поправка"

. поправи {
  * зумирање : 1 ; 
  &: пред ,
  &: после {
    приказ : табела ;
    содржина : "" ; 
  }
  &: после {
    јасно : и двете ;
  }
}