Skupine gumbov

Uporabite skupine gumbov, da združite več gumbov v eno sestavljeno komponento. Zgradite jih s serijo <a>ali <button>elementi.

Najboljše prakse

Priporočamo naslednje smernice za uporabo skupin gumbov in orodnih vrstic:

• Vedno uporabite isti element v eni skupini gumbov <a>ali <button>.
• Ne mešajte gumbov različnih barv v isto skupino gumbov.
• Uporabite ikone poleg besedila ali namesto njega, vendar obvezno vključite nadomestno besedilo in besedilo naslova, kjer je to primerno.

Povezane skupine gumbov s spustnimi meniji (glejte spodaj) je treba priklicati ločeno in vedno vključiti spustno kazalko, ki označuje predvideno vedenje.

Privzeti primer

Takole je videti HTML za standardno skupino gumbov, zgrajeno z gumbi sidrnih oznak:

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

Primer orodne vrstice

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>

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 .

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

Primer oznake

Podobno kot skupina gumbov, naša oznaka uporablja običajne oznake gumbov, vendar s peščico dodatkov za izboljšanje sloga in podporo Bootstrapovega spustnega vtičnika jQuery.

<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. vaši gumbi so velikosti do .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 rešiti ročno ali z javascriptom po meri.

Pregled in primeri

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.

Velikosti

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

<div class = "btn-group" > 
  ...
  <ul class = "dropdown-menu pull-right" > 
    <!-- povezave do spustnega menija -->
  </ul>
</div>

Primer oznake

Razširimo običajne spustne menije gumbov, da zagotovimo dejanje drugega gumba, ki deluje kot ločen sprožilec spustnega menija.

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

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>

Zmogljiv osnovni razred

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

Kdaj uporabiti

Zavihki in tabletke so odlični za dele vsebine ali za krmarjenje med stranmi s sorodno vsebino.

Poravnava komponent

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

Osnovni zavihki

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

• domov
• Profil
• Sporočila

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

• domov
• Profil
• Sporočila

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

Kako jih zložiti

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

Zloženi zavihki

• domov
• Profil
• Sporočila

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

Zložene tablete

• domov
• Profil
• Sporočila

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

Bogati meniji so preprosti

Spustni meniji v zavihkih in tabletah Bootstrap so zelo enostavni in zahtevajo le malo dodatnega HTML-ja in lahek vtičnik jQuery.

Pojdite na stran Javascript in preberite dokumente o inicializaciji spustnih menijev v Bootstrapu.

Zavihki s spustnimi meniji

• domov
• pomoč
• Spustni meni
  • Akcija
  • Še ena akcija
  • Tukaj je nekaj drugega
  • Ločena povezava

<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

• domov
• pomoč
• Spustni meni
  • Akcija
  • Še ena akcija
  • Tukaj je nekaj drugega
  • Ločena povezava

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

Navigacija v slogu aplikacije

Navigacijski seznami zagotavljajo 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.

Strukturno so zgrajeni na istih osnovnih navigacijskih slogih kot zavihki in tablete, zato sta uporaba in prilagajanje enostavni.

Z ikonami

Navigacijske sezname je enostavno opremiti tudi z ikonami. Dodajte ustrezno <i>oznako z razredom in pripravljeni ste.

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>

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 = "aktiven" > 
    <a href = "#" > Domov </a> 
  </li>
  <li>
    <a href = "#" > Knjižnica </a> 
  </li>
  ...
</ul>

Primer z ikonami

Isti primer, vendar z <i>oznakami za ikone.

<ul class = "nav nav-list" > 
  ...
  <li>
    <a href = "#" > 
      <i class = "icon-book" ></i> 
      Knjižnica
    </a>
  </li>
  ...
</ul>

Kaj je vključeno

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.

Preklapljanje med njimi je enostavno in zahteva le zelo malo spreminjanja oznak.

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 z možnostjo zavihkov na strani z dokumenti javascript .

Pridobite javascript →

Primer z zavihki

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

Za desno ali levo poravnane zavihke zavijte .nav-tabsin .tab-contentv .tabbable.

Preprosta oznaka

Uporaba zavihkov z možnostjo zavihkov zahteva ovojni div, nabor zavihkov in nabor podoknov vsebine z možnostjo zavihkov.

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

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>

Navbar oder

Vrstica za krmarjenje potrebuje le nekaj elementov div, da jo dobro strukturirate za statični ali fiksni prikaz.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <div class = "container" > 
      ...
    </div>
  </div>
</div>

Popravljena vrstica za krmarjenje

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

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

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

Ko pritrdite navbar, upoštevajte skrito območje pod njim. Dodajte 40 slikovnih pik ali več oblazinjenja v <body>. Prepričajte se, da ste to dodali za osnovnim CSS Bootstrap in pred neobveznim odzivnim CSS.

Blagovna znamka

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

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

Obrazci v vrstici za krmarjenje

Č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" >  
</form>

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>

Izbirna odzivna različica

Odvisno od količine vsebine v zgornji vrstici boste morda želeli implementirati odzivne možnosti. Če želite to narediti, zavijte svojo navigacijsko vsebino v vsebujoči div, .nav-collapse.collapsein dodajte preklopni gumb na navbaru, .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" > 
        <!-- .nav, .navbar-search, .navbar-form itd -->
      </div>
 
    </div>
  </div>
</div>

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>

Poravnava komponent

Če želite poravnati krmarjenje, iskalni obrazec ali besedilo, uporabite pomožne razrede .pull-leftali . .pull-rightOba razreda bosta dodala lebdeči CSS v navedeni smeri.

Dodajanje spustnih menijev

Dodajanje spustnih menijev in spustnih menijev v navigacijo je izjemno preprosto, vendar zahteva uporabo našega vtičnika javascript .

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

Pridobite javascript →

Besedilo v vrstici za krmarjenje

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

Zakaj jih uporabljati

Krmarjenje po poti se uporablja kot način za prikaz uporabnikom, kje so v aplikaciji ali na spletnem mestu, vendar ne za primarno krmarjenje. Naj bo njihova uporaba redka in jedrnata, da bodo najbolj učinkovite.

Primeri

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

• domov

• Domov /
• Knjižnica

• Domov /
• Knjižnica /
• podatki

Markup

HTML je vaš standardni neurejen seznam s povezavami.

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

Kdaj uporabiti

Izjemno poenostavljeno in minimalistično oblikovano 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.

Povezave do strani s stanjem

Povezave so prilagodljive in delujejo v številnih okoliščinah s pravim razredom. .disabledza povezave, na katere ni mogoče klikniti, in .activeza trenutno stran.

Prilagodljiva poravnava

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

Primeri

Privzeta komponenta paginacije je prilagodljiva in deluje v številnih različicah.

Markup

Zavito v <div>, paginacija je samo <ul>.

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

O pozivniku

Komponenta pozivnika je nabor povezav za preproste izvedbe paginacije z lažjimi oznakami in še lažjimi slogi. Odličen je za preprosta spletna mesta, kot so blogi ali revije.

Izbirno onemogočeno stanje

Povezave na Pager uporabljajo tudi splošni .disabledrazred iz paginacije.

Privzeti primer

Pozivnik privzeto centrira povezave.

• Prejšnja
• Naslednji

<ul class = "pager" > 
  <li>
    <a href = "#" > Nazaj </a> 
  </li>
  <li>
    <a href = "#" > Naprej </a> 
  </li>
</ul>

Poravnane povezave

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

• ← Starejše
• Novejše →

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

O tem

Značke so majhne, ​​preproste komponente za prikaz indikatorja ali neke vrste števila. Običajno jih najdemo v e-poštnih odjemalcih, kot je Mail.app, ali v mobilnih aplikacijah za potisna obvestila.

Razpoložljivi razredi

Bootstrap ponuja lahko, prilagodljivo komponento, imenovano hero unit, za predstavitev vsebine na vašem spletnem mestu. Dobro deluje na spletnih mestih s trženjem in vsebino.

Markup

Zavijte svojo vsebino divtakole:

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

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

• 

  Oznaka sličice

  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.

  Akcija Akcija

• 

  Oznaka sličice

  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.

  Akcija Akcija

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.

Oznaka

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 = "span3" > 
    <a href = "#" class = "thumbnail" >  
      <img src = "https://placehold.it/260x180" 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 = "span3" > 
    <div class = "thumbnail" > 
      <img src = "https://placehold.it/260x180" alt = "" >  
      <h5> Oznaka sličice </h5>
      <p> Napis sličice tukaj ... </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.

Prepisan osnovni razred

Z Bootstrap 2 smo poenostavili osnovni razred: .alertnamesto .alert-message. Zmanjšali smo tudi minimalno zahtevano oznako – <p>privzeto ni zahtevana, samo zunanji <div>.

Eno opozorilno sporočilo

Za trajnejšo komponento z manj kode smo odstranili razlikovalni videz za blokovna opozorila, sporočila, ki imajo več oblazinjenja in običajno več besedila. Tudi razred se je spremenil v .alert-block.

Odlično se ujema z javascriptom

Bootstrap je opremljen z odličnim vtičnikom jQuery, ki podpira opozorilna sporočila, zaradi česar je njihovo opuščanje hitro in enostavno.

Prenesite vtičnik »

Primeri opozoril

Zavijte svoje sporočilo in izbirno ikono za zapiranje v div s preprostim razredom.

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

Glavo pokonci! Naprave iOS zahtevajo href="#"za opustitev opozoril. Ne pozabite vključiti tega in podatkovnega atributa za ikone za zapiranje sidra. Lahko pa uporabite buttonelement z atributom podatkov, kar smo izbrali za naše dokumente.

Preprosto razširite standardno opozorilno sporočilo z dvema izbirnima razredoma: .alert-blockza več oblazinjenja in kontrolnikov besedila ter .alert-headingza ujemajoči se naslov.

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

Napaka ali nevarnost

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

Uspeh

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

Informacije

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

Osnovno

Privzeta vrstica napredka z navpičnim gradientom.

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

Črtasto

Uporablja gradient za ustvarjanje črtastega učinka (brez IE).

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

Animirano

Vzame črtasti primer in ga animira (brez IE).

<div class = "napredek napredek-črtast 
     aktivno" >
  <div class = "bar" 
       style = " width : 40 %; " ></div> 
</div>

Dodatne barve

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

Črtaste palice

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

Vedenje

Vrstice napredka uporabljajo prehode CSS3, tako da če dinamično prilagodite širino prek javascripta, se bo gladko spremenila velikost.

Če uporabljate .activerazred, bodo vaše .progress-stripedvrstice napredka animirale črte od leve proti desni.

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.

Opera in IE trenutno ne podpirata animacij.

Wells

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

<div class = "well" > 
  ...
</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="#" za dogodke klikov, če raje uporabljate sidro.

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