Primer

Preklopni kontekstualni meni za prikaz seznamov povezav. Interaktiven s spustnim vtičnikom JavaScript .

<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu" >   
  <li><a tabindex = "-1" href = "#" > Dejanje </a></li>  
  <li><a tabindex = "-1" href = "#" > Drugo dejanje </a></li>  
  <li><a tabindex = "-1" href = "#" > Tukaj je še nekaj </a></li>  
  <li class = "divider" ></li> 
  <li><a tabindex = "-1" href = "#" > Ločena povezava </a></li>  
</ul>

Markup

Če pogledamo samo spustni meni, je tukaj zahtevani HTML. Sprožilec spustnega menija in spustni meni morate zaviti v .dropdownali drug element, ki deklarira position: relative;. Nato samo ustvarite meni.

<div class = "dropdown" > 
  <!-- Povezava ali gumb za preklop spustnega menija -->
  <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >   
    <li><a tabindex = "-1" href = "#" > Dejanje </a></li>  
    <li><a tabindex = "-1" href = "#" > Drugo dejanje </a></li>  
    <li><a tabindex = "-1" href = "#" > Tukaj je še nekaj </a></li>  
    <li class = "divider" ></li> 
    <li><a tabindex = "-1" href = "#" > Ločena povezava </a></li>  
  </ul>
</div>

Opcije

Poravnajte menije na desno in dodajte dodatne ravni spustnih menijev.

Usklajevanje menijev

Dodajte .pull-righta .dropdown-menuza poravnavo spustnega menija v desno.

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

Onemogočene možnosti menija

Dodajte .disabledv <li>spustni meni, da onemogočite povezavo.

<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu" >   
  <li><a tabindex = "-1" href = "#" > Navadna povezava </a></li>  
  <li class = "disabled" ><a tabindex = "-1" href = "#" > Onemogočena povezava </a></li>   
  <li><a tabindex = "-1" href = "#" > Druga povezava </a></li>  
</ul>

Podmeniji v spustnih menijih

Dodajte dodatno raven spustnih menijev, ki se prikažejo ob lebdenju miške kot tisti v OS X, z nekaj preprostimi dodatki za označevanje. Dodajte .dropdown-submenukateremu koli liv obstoječem spustnem meniju za samodejno oblikovanje.

<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >   
  ...
  <li class = "dropdown-submenu" > 
    <a tabindex = "-1" href = "#" > Več možnosti </a>  
    <ul class = "dropdown-menu" > 
      ...
    </ul>
  </li>
</ul>

Primeri

Dve osnovni možnosti, skupaj z dvema bolj specifičnima različicama.

Skupina z enim gumbom

Zavijte niz gumbov .btnz .btn-group.

<div class = "btn-group" > 
  <button class = "btn" > Levo </button> 
  <button class = "btn" > Srednji </button> 
  <button class = "btn" > Desno </button> 
</div>

Več skupin gumbov

Združite nize <div class="btn-group">v <div class="btn-toolbar">za bolj zapletene komponente.

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

Navpične skupine gumbov

Naj bo niz gumbov videti navpično zložen namesto vodoravno.

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

Potrditveno polje in radijski okusi

Skupine gumbov lahko delujejo tudi kot radijski sprejemniki, kjer je lahko aktiven samo en gumb, ali potrditvena polja, kjer je lahko aktivnih poljubno število gumbov. Za to si oglejte dokumente JavaScript .

Spustni meniji v skupinah gumbov

Glavo pokonci!Za pravilno upodabljanje morajo biti gumbi s spustnimi meniji posamezno zaviti .btn-groupv svoje ..btn-toolbar

Pregled in primeri

Uporabite kateri koli gumb, da sprožite spustni meni, tako da ga postavite znotraj .btn-groupin zagotovite ustrezno oznako menija.

<div class = "btn-group" > 
  <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >   
    Akcija
    <span class = "caret" ></span> 
  </a>
  <ul class = "dropdown-menu" > 
    <!-- povezave do spustnega menija -->
  </ul>
</div>

Deluje z vsemi velikostmi gumbov

Spustni meniji gumbov delujejo v kateri koli velikosti: .btn-large, .btn-smallali .btn-mini.

Potreben je JavaScript

Za delovanje spustnih menijev gumbov je potreben spustni vtičnik Bootstrap .

V nekaterih primerih, na primer v mobilnih napravah, bodo spustni meniji segali izven vidnega polja. Poravnavo morate razrešiti ročno ali z JavaScriptom po meri.

Spustni meni razdeljenih gumbov

Na podlagi slogov in oznak skupine gumbov lahko preprosto ustvarimo razdeljen gumb. Razdeljeni gumbi imajo standardno dejanje na levi in ​​spustni preklop na desni s kontekstualnimi povezavami.

<div class = "btn-group" > 
  <button class = "btn" > Dejanje </button> 
  <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "caret" ></span> 
  </button>
  <ul class = "dropdown-menu" > 
    <!-- povezave do spustnega menija -->
  </ul>
</div>

Velikosti

Uporabite dodatne razrede gumbov .btn-mini, .btn-smallali .btn-largeza določanje velikosti.

<div class = "btn-group" > 
  <button class = "btn btn-mini" > Dejanje </button> 
  <button class = "btn btn-mini dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "caret" ></span> 
  </button>
  <ul class = "dropdown-menu" > 
    <!-- povezave do spustnega menija -->
  </ul>
</div>

Spustni meniji

Spustne menije lahko preklapljate tudi od spodaj navzgor z dodajanjem enega samega razreda neposrednemu nadrejenemu elementu .dropdown-menu. Obrnil bo smer .caretmenija in prestavil sam meni tako, da se premika od spodaj navzgor namesto od zgoraj navzdol.

<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" > 
    <!-- povezave do spustnega menija -->
  </ul>
</div>

Lahke privzete vrednosti . Ista oznaka, različni razredi

Vse navigacijske komponente tukaj – zavihki, pilule in seznami – imajo enake osnovne oznake in sloge skozi .navrazred.

Osnovni zavihki

Vzemite navadne <ul>povezave in dodajte .nav-tabs:

<ul class = "nav nav-tabs" > 
  <li class = "aktiven" > 
    <a href = "#" > Domov </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

Osnovne tablete

Vzemite isti HTML, vendar .nav-pillsnamesto tega uporabite:

<ul class = "nav nav-pills" > 
  <li class = "aktiven" > 
    <a href = "#" > Domov </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

Onemogočeno stanje

Za katero koli komponento navigacije (zavihke, tablete ali seznam) dodajte .disabledsive povezave in brez učinkov lebdenja . Povezave pa bo še naprej mogoče klikniti, razen če odstranite hrefatribut. Lahko pa implementirate JavaScript po meri, da preprečite te klike.

<ul class = "nav nav-pills" > 
  ...
  <li class = "disabled" ><a href = "#" > Domov </a></li>  
  ...
</ul>

Poravnava komponent

Za poravnavo povezav za krmarjenje uporabite pomožne razrede .pull-leftali . .pull-rightOba razreda bosta dodala lebdeči CSS v navedeni smeri.

Zložljiv

Ker so zavihki in tabletke privzeto vodoravni, preprosto dodajte drugi razred, .nav-stackedda bodo videti navpično zloženi.

Zloženi zavihki

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

Zložene tablete

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

Spustni meniji

Dodajte spustne menije z malo dodatnega HTML-ja in spustnega vtičnika JavaScript .

Zavihki s spustnimi meniji

<ul class = "nav nav-tabs" > 
  <li class = "dropdown" > 
    <a class = "dropdown-toggle" 
       data-toggle = "spustni meni"
       href = "#" >
        Spustni meni
        <b class = "caret" ></b> 
      </a>
    <ul class = "dropdown-menu" > 
      <!-- povezave -->
    </ul>
  </li>
</ul>

Tablete s spustnimi listi

<ul class = "nav nav-pills" > 
  <li class = "dropdown" > 
    <a class = "dropdown-toggle" 
       data-toggle = "spustni meni"
       href = "#" >
        Spustni meni
        <b class = "caret" ></b> 
      </a>
    <ul class = "dropdown-menu" > 
      <!-- povezave -->
    </ul>
  </li>
</ul>

Nav seznami

Preprost in enostaven način za ustvarjanje skupin navigacijskih povezav z neobveznimi glavami. Najbolje jih je uporabiti v stranskih vrsticah, kot je Finder v OS X.

Primer navigacijskega seznama

Vzemite seznam povezav in dodajte class="nav nav-list":

<ul class = "nav nav-list" > 
  <li class = "nav-header" > Glava seznama </li> 
  <li class = "active" ><a href = "#" > Domača stran </a></li>  
  <li><a href = "#" > Knjižnica </a></li> 
  ...
</ul>

OpombaZa gnezdenje znotraj navigacijskega seznama vključite class="nav nav-list"na kateri koli ugnezdeni <ul>.

Horizontalne pregrade

Dodajte vodoravni delilnik tako, da ustvarite prazen element seznama z razredom .divider, takole:

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

Krmarjenje z zavihki

Oživite svoje zavihke s preprostim vtičnikom za preklapljanje med vsebino prek zavihkov. Bootstrap integrira zavihke s tabulatorji v štirih slogih: zgoraj (privzeto), desno, spodaj in levo.

Primer z zavihki

Če želite zavihke narediti zavihke, ustvarite .tab-panez edinstvenim ID-jem za vsak zavihek in jih ovijte v .tab-content.

<div class = "tabbable" > <!-- Zahtevano samo za leve/desne zavihke -->  
  <ul class = "nav nav-tabs" > 
    <li class = "active" ><a href = "#tab1" data-toggle = "tab" > Razdelek 1 </a></li>   
    <li><a href = "#tab2" data-toggle = "tab" > Razdelek 2 </a></li>  
  </ul>
  <div class = "tab-content" > 
    <div class = "podokno z zavihki aktivno" id = "tab1" >  
      <p> Sem v oddelku 1. </p>
    </div>
    <div class = "tab-pane" id = "tab2" >  
      <p> Pozdravljeni, sem v oddelku 2. </p>
    </div>
  </div>
</div>

Zbledi v zavihkih

Če želite, da zavihki zbledijo, dodajte .fadevsakemu .tab-pane.

Zahteva vtičnik jQuery

Vse zavihke z možnostjo zavihkov poganja naš lahki vtičnik jQuery. Preberite več o tem, kako oživiti zavihke s tabulatorji na strani z dokumenti JavaScript .

Zavihki v kateri koli smeri

Zavihki na dnu

Obrnite vrstni red HTML in dodajte razred, da postavite zavihke na dno.

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

Zavihki na levi

Zamenjajte razred, da postavite zavihke na levo.

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

Zavihki na desni

Zamenjajte razred, da postavite zavihke na desno.

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

Osnovna vrstica za krmarjenje

Za začetek so vrstice za krmarjenje statične (niso pritrjene na vrh) in vključujejo podporo za ime projekta in osnovno navigacijo. Postavite ga kamor koli znotraj .container, ki nastavi širino vašega spletnega mesta in vsebine.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <a class = "brand" href = "#" > Naslov </a>  
    <ul class = "nav" > 
      <li class = "active" ><a href = "#" > Domača stran </a></li>  
      <li><a href = "#" > Povezava </a></li> 
      <li><a href = "#" > Povezava </a></li> 
    </ul>
  </div>
</div>

Komponente Navbar

Znamka

Preprosta povezava za prikaz imena vaše blagovne znamke ali projekta zahteva samo sidrno oznako.

<a class = "brand" href = "#" > Ime projekta </a>  

Nav povezave

Navigacijske elemente je preprosto dodati prek neurejenih seznamov.

<ul class = "nav" > 
  <li class = "aktiven" > 
    <a href = "#" > Domov </a> 
  </li>
  <li><a href = "#" > Povezava </a></li> 
  <li><a href = "#" > Povezava </a></li> 
</ul>

Svojim navigacijskim povezavam lahko enostavno dodate delilnike s praznim elementom seznama in preprostim razredom. Samo to dodajte med povezavami:

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

Obrazci

Če želite pravilno oblikovati in postaviti obrazec v navbar, dodajte ustrezne razrede, kot je prikazano spodaj. Za privzeti obrazec vključite .navbar-formali .pull-leftali .pull-right, da ga pravilno poravnate.

<form class = "navbar-form pull-left" > 
  <input type = "text" class = "span2" >  
  <button type = "submit" class = "btn" > Pošlji </button>  
</form>

Iskalni obrazec

Za bolj prilagojen iskalni obrazec dodajte .navbar-searchin formv .search-queryvnos za specializirane sloge v vrstici za krmarjenje.

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

Poravnava komponent

Poravnajte navigacijske povezave, obrazec za iskanje ali besedilo, uporabite razrede .pull-leftali .pull-rightpripomočke. Oba razreda bosta dodala lebdeči CSS v navedeni smeri.

Uporaba spustnih menijev

Dodajte spustne menije in spustne menije v navigacijo z malo oznak in vtičnikom JavaScript za spustne menije .

<ul class = "nav" > 
  <li class = "dropdown" > 
    <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown" >   
      račun
      <b class = "caret" ></b> 
    </a>
    <ul class = "dropdown-menu" > 
      ...
    </ul>
  </li>
</ul>

Obiščite dokumentacijo spustnih menijev JavaScript za več oznak in informacij o klicanju spustnih menijev.

Besedilo

Zavijte nize besedila v element z .navbar-text, običajno na <p>oznaki za pravilno vodilo in barvo.

Izbirne različice prikaza

Popravite vrstico za krmarjenje na vrh ali dno vidnega polja z dodatnim razredom na najbolj oddaljenem divu, .navbar.

Pritrjen na vrh

Dodajte .navbar-fixed-topin ne pozabite upoštevati skrite površine pod njim, tako da dodate vsaj 40 slikovnih pik paddingv <body>. Prepričajte se, da ste to dodali za osnovnim CSS Bootstrap in pred neobveznim odzivnim CSS.

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

Pritrjen na dno

Dodajte .navbar-fixed-bottomnamesto tega.

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

Statična zgornja vrstica za krmarjenje

Ustvarite navbar polne širine, ki se premika stran s stranjo, tako da dodate .navbar-static-top. Za razliko od .navbar-fixed-toprazreda vam ni treba spreminjati nobenih oblazinjenj na body.

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

Odzivna navigacijska vrstica

Če želite implementirati strnjeno odzivno vrstico za krmarjenje, zavijte vsebino vrstice za krmarjenje v vsebovalni element div, .nav-collapse.collapsein dodajte preklopni gumb vrstice za krmarjenje, .btn-navbar.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <div class = "container" > 
 
      <!-- .btn-navbar se uporablja kot preklop za strnjeno vsebino navbara -->
      <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>
 
      <!-- Ne pozabite pustiti blagovne znamke zunaj, če želite, da je prikazana -->
      <a class = "brand" href = "#" > Ime projekta </a>  
 
      <!-- Vse, kar želite skriti v velikosti 940 slikovnih pik ali manj, postavite tukaj -->
      <div class = "nav-collapse collapse" > 
        <!-- .nav, .navbar-search, .navbar-form itd -->
      </div>
 
    </div>
  </div>
</div>

Obrnjena variacija

Spremenite videz vrstice za krmarjenje tako, da dodate .navbar-inverse.

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

Primeri

Prikazan je en sam primer, saj je lahko prikazan na več straneh.

<ul class = "breadcrumb" > 
  <li><a href = "#" > Domov </a> <span class = "divider" > / </span></li>   
  <li><a href = "#" > Knjižnica </a> <span class = "divider" > / </span></li>   
  <li class = "active" > Podatki </li> 
</ul>

Standardna paginacija

Preprosto označevanje strani po navdihu Rdio, odlično za aplikacije in rezultate iskanja. Velik blok je težko zgrešiti, zlahka ga je mogoče povečati in nudi velika območja klikanja.

<div class = "pagination" > 
  <ul>
    <li><a href = "#" > Nazaj </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 = "#" > Naprej </a></li> 
  </ul>
</div>

Opcije

Onemogočeno in aktivno stanje

Povezave so prilagodljive različnim okoliščinam. Uporabite .disabledza povezave, ki jih ni mogoče klikniti, in .activeza označevanje trenutne strani.

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

Po želji lahko zamenjate aktivna ali onemogočena sidra za razpone, da odstranite funkcijo klikanja in hkrati ohranite predvidene sloge.

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

Velikosti

Želite večjo ali manjšo paginacijo? Dodajte .pagination-large, .pagination-smallali .pagination-miniza dodatne velikosti.

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

Poravnava

Dodajte enega od dveh neobveznih razredov, da spremenite poravnavo povezav za označevanje strani: .pagination-centeredin .pagination-right.

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

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

Pozivnik

Hitre prejšnje in naslednje povezave za preproste izvedbe označevanja strani z lahkimi oznakami in slogi. Odličen je za preprosta spletna mesta, kot so blogi ali revije.

Privzeti primer

Pozivnik privzeto centrira povezave.

<ul class = "pager" > 
  <li><a href = "#" > Prejšnji </a></li> 
  <li><a href = "#" > Naprej </a></li> 
</ul>

Poravnane povezave

Druga možnost je, da vsako povezavo poravnate ob straneh:

<ul class = "pager" > 
  <li class = "prejšnji" > 
    <a href = "#" > ← Starejši </a> 
  </li>
  <li class = "naslednji" > 
    <a href = "#" > Novejši → </a> 
  </li>
</ul>

Izbirno onemogočeno stanje

Povezave pozivnikov uporabljajo tudi splošni .disableduporabni razred iz paginacije.

<ul class = "pager" > 
  <li class = "previous disabled" > 
    <a href = "#" > ← Starejši </a> 
  </li>
  ...
</ul>

Etikete

Značke

Enostavno zložljiva

Za lažjo implementacijo se oznake in značke preprosto strnejo (prek :emptyizbirnika CSS), ko v njih ni nobene vsebine.

Herojska enota

Lahka, prilagodljiva komponenta za predstavitev ključne vsebine na vašem spletnem mestu. Dobro deluje na spletnih mestih s trženjem in vsebino.

<div class = "hero-unit" > 
  <h1> Naslov </h1>
  <p> Slogan </p>
  <p>
    <a class = "btn btn-primary btn-large" > 
      Nauči se več
    </a>
  </p>
</div>

Glava strani

Preprosta lupina za h1ustrezno razporeditev in segmentacijo delov vsebine na strani. Uporablja lahko h1privzeti smallelement , kot tudi večino drugih komponent (z dodatnimi slogi).

<div class = "page-header" > 
  <h1> Primer glave strani <small> Podbesedilo za glavo </small></h1>
</div>

Privzete sličice

Sličice Bootstrapa so privzeto oblikovane tako, da prikazujejo povezane slike z minimalno zahtevano oznako.

Zelo prilagodljiv

Z nekaj dodatnega označevanja je možno sličicam dodati kakršno koli vsebino HTML, kot so naslovi, odstavki ali gumbi.

Zakaj uporabljati sličice

Sličice (prej .media-griddo v1.4) so ​​odlične za mreže fotografij ali videoposnetkov, rezultate iskanja slik, maloprodajne izdelke, portfelje in še veliko več. Lahko so povezave ali statična vsebina.

Enostavno, prilagodljivo označevanje

Označevanje sličic je preprosto – vse, kar potrebujete, je a uls poljubnim številom lielementov. Prav tako je zelo prilagodljiv, saj omogoča vse vrste vsebine z le malo več oznak za zavijanje vaše vsebine.

Uporablja velikosti stolpcev mreže

Nazadnje, komponenta sličic uporablja obstoječe sistemske razrede mreže – kot je .span2ali .span3– za nadzor dimenzij sličic.

Markup

Kot smo že omenili, je zahtevana oznaka za sličice lahka in enostavna. Tukaj je pogled na privzeto nastavitev za povezane slike :

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

Za vsebino HTML po meri v sličicah se oznaka nekoliko spremeni. Da dovolimo vsebino na ravni bloka kjer koli, zamenjamo <a>za <div>všeček tako:

<ul class = "thumbnails" > 
  <li class = "span4" > 
    <div class = "thumbnail" > 
      <img data-src = "holder.js/300x200" alt = "" >  
      <h3> Oznaka sličice </h3>
      <p> Napis sličice ... </p>
    </div>
  </li>
  ...
</ul>

Več primerov

Raziščite vse svoje možnosti z različnimi razredi mreže, ki so vam na voljo. Lahko tudi mešate in kombinirate različne velikosti.

Privzeto opozorilo

Zavijte poljubno besedilo in izbirni gumb za opustitev .alertza osnovno opozorilno opozorilno sporočilo.

<div class = "alert" > 
  <button type = "button" class = "close" data-dismiss = "alert" > × </button>   
  <strong> Opozorilo! </strong> Najbolje, da preverite sami, niste videti preveč dobro.
</div>

Gumbi za opustitev

Brskalnika Mobile Safari in Mobile Opera poleg data-dismiss="alert"atributa zahtevata tudi href="#"za opustitev opozoril pri uporabi <a>oznake.

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

Lahko pa uporabite <button>element z atributom podatkov, kar smo izbrali za naše dokumente. Ko uporabljate <button>, morate vključiti, sicer type="button"vaši obrazci morda ne bodo oddani.

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

Opustitev opozoril prek JavaScripta

Uporabite vtičnik za opozorila jQuery za hitro in enostavno opustitev opozoril.

Opcije

Za daljša sporočila povečajte oblazinjenje na vrhu in dnu ovoja opozorila tako, da dodate .alert-block.

<div class = "alert alert-block" > 
  <button type = "button" class = "close" data-dismiss = "alert" > × </button>   
  <h4> Opozorilo! </h4>
  Najbolje, da preverite sami, niste ...
</div>

Kontekstualne alternative

Dodajte neobvezne razrede, da spremenite konotacijo opozorila.

Napaka ali nevarnost

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

Uspeh

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

Informacije

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

Primeri in oznake

Osnovno

Privzeta vrstica napredka z navpičnim gradientom.

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

Črtasto

Uporablja gradient za ustvarjanje črtastega učinka. Ni na voljo v IE7-8.

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

Animirano

Dodajte .activeza .progress-stripedanimacijo črt od desne proti levi. Ni na voljo v vseh različicah IE.

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

Zloženo

Postavite več palic v isto .progress, da jih zložite.

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

Opcije

Dodatne barve

Vrstice napredka uporabljajo nekaj istega gumba in razredov opozoril za dosledne sloge.

<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 = "opozorilo o napredku napredka" > 
  <div class = "bar" style = " width : 60 % " ></div>   
</div>
<div class = "progress progress-danger" > 
  <div class = "bar" style = " width : 80 % " ></div>   
</div>

Črtaste palice

Podobno kot pri enobarvnih barvah imamo raznolike črtaste vrstice napredka.

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

Podpora za brskalnik

Vrstice napredka uporabljajo prelive, prehode in animacije CSS3, da dosežejo vse svoje učinke. Te funkcije niso podprte v IE7-9 ali starejših različicah Firefoxa.

Različice, starejše od Internet Explorerja 10 in Opera 12, ne podpirajo animacij.

Abstraktni slogi predmetov za gradnjo različnih vrst komponent (kot so komentarji v spletnem dnevniku, tviti itd.), ki poleg besedilne vsebine prikazujejo levo ali desno poravnano sliko.

Privzeti primer

Privzeti medij omogoča lebdenje medijskega predmeta (slike, video, zvok) levo ali desno od bloka vsebine.

Medijski naslov

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.

Medijski naslov

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.

Medijski naslov

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" > Medijski naslov </h4> 
    ...
 
    <!-- Ugnezdeni medijski objekt -->
    <div class = "media" > 
      ...
    </div>
  </div>
</div>

Seznam medijev

Z nekaj dodatnega označevanja lahko uporabite notranji seznam medijev (uporabno za niti komentarjev ali sezname člankov).

<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" > Medijski naslov </h4> 
      ...
 
      <!-- Ugnezdeni medijski objekt -->
      <div class = "media" > 
        ...
     </div>
    </div>
  </li>
</ul>

Wells

Uporabite vodnjak kot preprost učinek na elementu, da mu zagotovite vstavljeni učinek.

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

Izbirni pouk

Kontrolirajte oblazinjenje in zaobljene vogale z dvema izbirnima razredoma modifikatorjev.

<div class = "dobro dobro-veliko" > 
  ...
</div>

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

Zapri ikono

Uporabite splošno ikono za zapiranje za opustitev vsebine, kot so modali in opozorila.

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

Naprave iOS zahtevajo href="#"dogodke za klik, če bi raje uporabili sidro.

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

Pomožni razredi

Preprosti, osredotočeni razredi za majhne nastavitve zaslona ali vedenja.

.povleci-levo

Lebdi element levo

razred = "povleci-levo"

. potegnite - levo {
  lebdi : levo ;
}

.povlecite desno

Lebdi element desno

class = "povleci desno"

. potegnite - desno {
  lebdi : desno ;
}

.utišan

Spremenite barvo elementa v#999

class = "utišan"

. utišan {
  barva : #999; 
}

.clearfix

Počistite floatna katerem koli elementu

class = "clearfix"

. clearfix {
  * povečava : 1 ; 
  &: prej ,
  &: po {
    prikaz : tabela ;
    vsebina : "" ; 
  }
  &: po {
    jasno : oboje ;
  }
}