Grupe dugmadi

Koristite grupe dugmadi da spojite više dugmadi zajedno kao jednu kompozitnu komponentu. Izgradite ih sa nizom <a>ili <button>elemenata.

Najbolje prakse

Preporučujemo sljedeće smjernice za korištenje grupa dugmadi i alatnih traka:

• Uvijek koristite isti element u jednoj grupi gumba <a>ili <button>.
• Nemojte miješati dugmad različitih boja u istoj grupi dugmadi.
• Koristite ikone uz ili umjesto teksta, ali obavezno uključite alt i naslov teksta gdje je to prikladno.

Povezane grupe dugmadi sa padajućim menijima (pogledajte dole) treba da se pozivaju odvojeno i uvek uključuju padajući kursor za označavanje planiranog ponašanja.

Zadani primjer

Evo kako HTML izgleda za standardnu ​​grupu dugmadi izgrađenu sa dugmadima za oznake sidra:

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

Primjer trake s alatima

Kombinirajte skupove <div class="btn-group">u a <div class="btn-toolbar">za složenije komponente.

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

Potvrdni okvir i radio okusi

Grupe dugmadi takođe mogu funkcionisati kao radio uređaji, gde samo jedno dugme može biti aktivno, ili potvrdni okviri, gde može biti aktivan bilo koji broj dugmadi. Pogledajte Javascript dokumente za to.

Preuzmite javascript »

Padajući meni u grupama dugmadi

Glavu gore! Dugmad s padajućim izbornikom moraju biti pojedinačno umotana u svoje .btn-groupunutar a .btn-toolbarradi pravilnog prikazivanja.

Pregled i primjeri

Koristite bilo koje dugme da pokrenete padajući meni tako što ćete ga postaviti unutar a .btn-groupi obezbediti odgovarajuću oznaku menija.

Primjer označavanja

Slično grupi dugmadi, naše označavanje koristi uobičajeno označavanje dugmadi, ali sa pregršt dodataka za preciziranje stila i podršku Bootstrap-ovom padajućem jQuery dodatku.

<div class = "btn-group" > 
  <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >   
    Akcija
    <span class = "caret" ></span> 
  </a>
  <ul class = "padajući meni" > 
    <!-- veze padajućeg menija -->
  </ul>
</div>

Radi sa svim veličinama dugmadi

Padajući meni gumba funkcionira u bilo kojoj veličini. vaše veličine dugmadi su .btn-large, .btn-small, ili .btn-mini.

Zahtijeva javascript

Padajući meni s gumbima zahtijeva da funkcionišu dodaci za padajući meni Bootstrap .

U nekim slučajevima – poput mobilnih – padajući meniji će se proširiti izvan okvira za prikaz. Poravnanje morate riješiti ručno ili pomoću prilagođenog javascripta.

Pregled i primjeri

Nadovezujući se na stilove grupe dugmadi i oznake, lako možemo kreirati podijeljeno dugme. Dugmad za razdvajanje karakteriše standardna radnja sa leve strane i padajući prekidač na desnoj strani sa kontekstualnim vezama.

Veličine

Koristite dodatne klase dugmadi .btn-mini, .btn-smallili .btn-largeza određivanje veličine.

<div class = "btn-group" > 
  ...
  <ul class = "padajući meni povlačenje-desno" > 
    <!-- veze padajućeg menija -->
  </ul>
</div>

Primjer označavanja

Proširujemo obične padajuće menije za dugme kako bismo obezbedili drugu radnju dugmeta koja radi kao poseban okidač padajućeg menija.

<div class = "btn-group" > 
  <button class = "btn" > Akcija </button> 
  <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "caret" ></span> 
  </button>
  <ul class = "padajući meni" > 
    <!-- veze padajućeg menija -->
  </ul>
</div>

Dropup meniji

Padajući meniji se takođe mogu prebacivati ​​odozdo prema gore dodavanjem jedne klase neposrednom roditelju .dropdown-menu. Preokrenut će smjer .careti pozicionirati sam meni tako da se kreće odozdo prema gore umjesto odozgo prema dolje.

<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 = "padajući meni" > 
    <!-- veze padajućeg menija -->
  </ul>
</div>

Snažna bazna klasa

Sve navigacijske komponente ovdje – kartice, tablete i liste – dijele istu osnovnu oznaku i stilove kroz .navklasu.

Kada koristiti

Kartice i tablete su odlične za dijelove sadržaja ili navigaciju između stranica povezanog sadržaja.

Poravnanje komponenti

Da biste poravnali navigacijske veze, koristite .pull-leftili .pull-rightuslužne klase. Obje klase će dodati CSS float u navedenom smjeru.

Osnovne kartice

Uzmite redovne <ul>linkove i dodajte .nav-tabs:

• Dom
• Profil
• Poruke

<ul class = "nav nav-tabs" > 
  <li class = "aktivan" > 
    <a href = "#" > Početna </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

Osnovne tablete

Uzmite isti HTML, ali .nav-pillsumjesto toga koristite:

• Dom
• Profil
• Poruke

<ul class = "nav nav-pills" > 
  <li class = "aktivan" > 
    <a href = "#" > Početna </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

Kako ih složiti

Kako su tabovi i tablete prema zadanim postavkama horizontalni, samo dodajte drugu klasu, .nav-stacked, kako bi izgledali okomito naslagani.

Naslagane kartice

• Dom
• Profil
• Poruke

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

Naslagane tablete

• Dom
• Profil
• Poruke

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

Bogati meniji su olakšani

Padajući meniji u Bootstrap karticama i tabletama su super laki i zahtijevaju samo malo dodatnog HTML-a i lagani jQuery dodatak.

Pređite na stranicu Javascript da pročitate dokumente o inicijalizaciji padajućih menija u Bootstrapu.

Kartice sa padajućim menijima

• Dom
• Upomoć
• Ispustiti
  • Akcija
  • Još jedna akcija
  • Nešto drugo ovdje
  • Odvojena veza

<ul class = "nav nav-tabs" > 
  <li class = "padajući" > 
    <a class = "dropdown-toggle" 
       data-toggle = "padajući meni"
       href = "#" >
        Ispustiti
        <b class = "caret" ></b> 
      </a>
    <ul class = "padajući meni" > 
      <!-- linkovi -->
    </ul>
  </li>
</ul>

Tablete sa padajućim menijima

• Dom
• Upomoć
• Ispustiti
  • Akcija
  • Još jedna akcija
  • Nešto drugo ovdje
  • Odvojena veza

<ul class = "nav nav-pills" > 
  <li class = "padajući" > 
    <a class = "dropdown-toggle" 
       data-toggle = "padajući meni"
       href = "#" >
        Ispustiti
        <b class = "caret" ></b> 
      </a>
    <ul class = "padajući meni" > 
      <!-- linkovi -->
    </ul>
  </li>
</ul>

Navigacija u stilu aplikacije

Nav liste pružaju jednostavan i lak način za izgradnju grupa navigacijskih veza s opcijskim zaglavljima. Najbolje ih je koristiti u bočnim trakama kao što je Finder u OS X.

Strukturno, oni su izgrađeni na istim osnovnim navigacijskim stilovima kao tabulatori i tablete, tako da su upotreba i prilagođavanje jednostavni.

Sa ikonama

Nav liste je takođe lako opremiti ikonama. Dodajte odgovarajuću <i>oznaku sa klasom i spremni ste.

Horizontalni razdjelnici

Dodajte horizontalni razdjelnik kreiranjem prazne stavke liste s klasom .divider, na sljedeći način:

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

Primjer navigacijske liste

Uzmite listu linkova i dodajte class="nav nav-list":

<ul class = "nav nav-list" > 
  <li class = "nav-header" > 
    Zaglavlje liste
  </li>
  <li class = "aktivan" > 
    <a href = "#" > Početna </a> 
  </li>
  <li>
    <a href = "#" > Biblioteka </a> 
  </li>
  ...
</ul>

Primjer sa ikonama

Isti primjer, ali sa <i>oznakama za ikone.

<ul class = "nav nav-list" > 
  ...
  <li>
    <a href = "#" > 
      <i class = "knjiga ikona" ></i> 
      Biblioteka
    </a>
  </li>
  ...
</ul>

Šta je uključeno

Oživite svoje kartice pomoću jednostavnog dodatka za prebacivanje između sadržaja putem kartica. Bootstrap integriše kartice sa karticama u četiri stila: gornji (podrazumevani), desni, donji i levi.

Promjena između njih je jednostavna i zahtijeva samo promjenu vrlo malo oznaka.

Fade in tabs

Da biste učinili da kartice nestaju, dodajte .fadesvakom .tab-pane.

Zahtijeva jQuery dodatak

Sve kartice sa tabulatorima pokreću naš lagani jQuery dodatak. Pročitajte više o tome kako oživjeti kartice s tabulatorima na stranici javascript dokumenata .

Preuzmite javascript →

Tabable primjer

Da biste tabulatore učinili karticama, kreirajte .tab-panes jedinstvenim ID-om za svaku karticu i umotajte ih u .tab-content.

Za desno ili lijevo poravnate kartice, omotajte .nav-tabsi .tab-contentu .tabbable.

Jasno označavanje

Korištenje kartica s tabulatorima zahtijeva premotavanje div, skup kartica i skup okna sadržaja sa tabovima.

<div class = "tabbable" > <!-- Potrebno samo za lijeve/desne kartice -->  
  <ul class = "nav nav-tabs" > 
    <li class = "active" ><a href = "#tab1" data-toggle = "tab" > Odjeljak 1 </a></li>   
    <li><a href = "#tab2" data-toggle = "tab" > Odjeljak 2 </a></li>  
  </ul>
  <div class = "tab-content" > 
    <div class = "tab-pane active" id = "tab1" >  
      <p> Ja sam u Odjeljku 1. </p>
    </div>
    <div class = "tab-pane" id = "tab2" >  
      <p> Zdravo, ja sam u Odjeljku 2. </p>
    </div>
  </div>
</div>

Kartice na dnu

Okrenite redoslijed HTML-a i dodajte klasu da stavite kartice na dno.

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

Kartice na lijevoj strani

Zamijenite klasu da stavite tabove s lijeve strane.

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

Kartice sa desne strane

Zamijenite klasu da stavite tabove s desne strane.

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

Navbar skele

Navbaru je potrebno samo nekoliko divova da bi bila dobro strukturirana za statički ili fiksni prikaz.

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

Fiksna navigaciona traka

Popravite navigacijsku traku na vrh ili dno okvira za prikaz s dodatnom klasom na krajnjem div, .navbar.

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

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

Kada pričvrstite navigacijsku traku, ne zaboravite uzeti u obzir skriveno područje ispod. Dodajte 40px ili više ispuna u <body>. Obavezno dodajte ovo iza osnovnog Bootstrap CSS-a i prije opcionog responzivnog CSS-a.

Brand name

Jednostavna veza za prikaz imena vašeg brenda ili projekta zahtijeva samo oznaku sidra.

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

Obrasci u navigacijskoj traci

Da biste pravilno stilizirali i pozicionirali obrazac unutar navigacijske trake, dodajte odgovarajuće klase kao što je prikazano ispod. Za zadani obrazac, uključite .navbar-formi ili .pull-leftili .pull-rightda ga pravilno poravnate.

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

Za prilagođeniji obrazac za pretragu, dodajte .navbar-searchi formna .search-queryulaz za specijalizirane stilove na navigacijskoj traci.

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

Opciona prilagodljiva varijacija

Ovisno o količini sadržaja na gornjoj traci, možda ćete htjeti implementirati responsive opcije. Da biste to učinili, umotajte svoj navigacijski sadržaj u div koji sadrži .nav-collapse.collapse, i dodajte dugme za prebacivanje na navigacijskoj traci, .btn-navbar.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <div class = "kontejner" > 
 
      <!-- .btn-navbar se koristi kao prekidač za skupljeni sadržaj navigacijske trake -->
      <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>
 
      <!-- Obavezno ostavite marku ako želite da se prikaže -->
      <a class = "brand" href = "#" > Naziv projekta </a>  
 
      <!-- Sve što želite da bude skriveno na 940px ili manje, postavite ovde -->
      <div class = "nav-collapse" > 
        <!-- .nav, .navbar-search, .navbar-form, itd -->
      </div>
 
    </div>
  </div>
</div>

Nav linkovi

Nav stavke se jednostavno dodaju preko neuređenih lista.

<ul class = "nav" > 
  <li class = "aktivan" > 
    <a href = "#" > Početna </a> 
  </li>
  <li><a href = "#" > Veza </a></li> 
  <li><a href = "#" > Veza </a></li> 
</ul>

Možete jednostavno dodati razdjelnike vašim navigacijskim vezama s praznom stavkom liste i jednostavnom klasom. Samo dodajte ovo između linkova:

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

Poravnanje komponenti

Da biste poravnali navigaciju, obrazac za pretragu ili tekst, koristite .pull-leftili .pull-rightuslužne klase. Obje klase će dodati CSS float u navedenom smjeru.

Dodavanje padajućih menija

Dodavanje padajućih i padajućih prozora u navigaciju je super jednostavno, ali zahtijeva korištenje našeg javascript dodatka .

<ul class = "nav" > 
  <li class = "padajući" > 
    <a href = "#" 
          class = "padajući preklopnik"
          data-toggle = "padajući meni" >
          Račun
          <b class = "caret" ></b> 
    </a>
    <ul class = "padajući meni" > 
      ...
    </ul>
  </li>
</ul>

Preuzmite javascript →

Tekst u navigacionoj traci

Umotajte nizove teksta u <.navbar-text>, obično na <p>oznaku za ispravan početak i boju.

Zašto ih koristiti

Breadcrumb navigacija se koristi kao način da se korisnicima pokaže gdje se nalaze unutar aplikacije ili web lokacije, ali ne i za primarnu navigaciju. Neka njihova upotreba bude rijetka i sažeta kako bi bila najefikasnija.

Primjeri

Prikazan jedan primjer kako bi se mogao prikazati na više stranica.

• Dom

• Početna /
• Biblioteka

• Početna /
• biblioteka /
• Podaci

Markup

HTML je vaša standardna neuređena lista sa vezama.

<ul class = "breadcrumb" > 
  <li>
    <a href = "#" > Početna </a> <span class = "divider" > / </span>   
  </li>
  <li>
    <a href = "#" > Biblioteka </a> <span class = "divider" > / </span>   
  </li>
  <li class = "active" > Podaci </li> 
</ul>

Kada koristiti

Ultra pojednostavljena i minimalno stilizirana paginacija inspirirana Rdio-om, odlična za aplikacije i rezultate pretraživanja. Veliki blok je teško promašiti, lako je skalabilan i pruža velike površine klikova.

Linkovi stranica sa statusom

Veze su prilagodljive i rade u brojnim okolnostima sa pravom klasom. .disabledza linkove na koje se ne može kliknuti i .activeza trenutnu stranicu.

Fleksibilno poravnanje

Dodajte bilo koju od dvije neobavezne klase da promijenite poravnanje veza za paginaciju: .pagination-centeredi .pagination-right.

Primjeri

Zadana komponenta paginacije je fleksibilna i radi u brojnim varijantama.

Markup

Umotano u <div>, paginacija je samo <ul>.

<div class = "paginacija" > 
  <ul>
    <li><a href = "#" > Prethodno </a></li> 
    <li class = "aktivan" > 
      <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 = "#" > Sljedeće </a></li> 
  </ul>
</div>

O pejdžeru

Komponenta pagera je skup veza za jednostavne implementacije paginacije s laganim oznakama i još lakšim stilovima. Odličan je za jednostavne stranice poput blogova ili časopisa.

Opciono onemogućeno stanje

Linkovi pejdžera takođe koriste opštu .disabledklasu iz paginacije.

Zadani primjer

Podrazumevano, pejdžer centrira veze.

• Prethodno
• Sljedeći

<ul class = "pager" > 
  <li>
    <a href = "#" > Prethodno </a> 
  </li>
  <li>
    <a href = "#" > Sljedeće </a> 
  </li>
</ul>

Poravnane veze

Alternativno, svaku vezu možete poravnati sa strane:

• ← Starije
• Novije →

<ul class = "pager" > 
  <li class = "prethodni" > 
    <a href = "#" > ← Stariji </a> 
  </li>
  <li class = "sljedeća" > 
    <a href = "#" > Noviji → </a> 
  </li>
</ul>

O

Značke su male, jednostavne komponente za prikazivanje indikatora ili neke vrste brojanja. Obično se nalaze u klijentima e-pošte kao što je Mail.app ili u mobilnim aplikacijama za push obavijesti.

Dostupni časovi

Bootstrap pruža laganu, fleksibilnu komponentu koja se zove heroj jedinica za izlaganje sadržaja na vašoj web lokaciji. Dobro radi na marketingu i web lokacijama s velikim sadržajem.

Markup

Umotajte svoj sadržaj u divovako:

<div class = "heroj-jedinica" > 
  <h1> Naslov </h1>
  <p> Tagline </p>
  <p>
    <a class = "btn btn-primary btn-large" > 
      Nauči više
    </a>
  </p>
</div>

Jednostavna ljuska za h1odgovarajući prostor i segmentiranje dijelova sadržaja na stranici. Može koristiti h1zadani smallelement, kao i većinu drugih komponenti (sa dodatnim stilovima).

<div class = "page-header" > 
  <h1> Primjer zaglavlja stranice </h1>
</div>

Zadane sličice

Prema zadanim postavkama, sličice Bootstrapa su dizajnirane da prikazuju povezane slike sa minimalnim potrebnim oznakama.

Vrlo prilagodljiv

Uz malo dodatne oznake, moguće je dodati bilo koju vrstu HTML sadržaja poput naslova, pasusa ili dugmadi u sličice.

• 

  Thumbnail label

  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

• 

  Thumbnail label

  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

Zašto koristiti sličice

Sličice (ranije .media-griddo v1.4) su odlične za mreže fotografija ili video zapisa, rezultate pretraživanja slika, maloprodajne proizvode, portfelje i još mnogo toga. To mogu biti linkovi ili statični sadržaj.

Jednostavna, fleksibilna oznaka

Označavanje sličica je jednostavno – sve što je potrebno je ulsa bilo kojim brojem elemenata. liTakođe je super fleksibilan, omogućavajući bilo koju vrstu sadržaja sa samo malo više oznaka za umotavanje vašeg sadržaja.

Koristi veličine stupaca mreže

Konačno, komponenta sličica koristi postojeće klase sistema mreže—kao .span2ili .span3—za kontrolu dimenzija sličica.

Markup

Kao što je ranije spomenuto, potrebne oznake za sličice su lagane i jednostavne. Evo pogleda na zadanu postavku za povezane slike :

<ul class = "sličice" > 
  <li class = "span3" > 
    <a href = "#" class = "thumbnail" >  
      <img src = "https://placehold.it/260x180" alt = "" >  
    </a>
  </li>
  ...
</ul>

Za prilagođeni HTML sadržaj u sličicama, oznake se neznatno mijenjaju. Da bismo dozvolili sadržaj na nivou bloka bilo gdje, mijenjamo <a>za nešto <div>slično:

<ul class = "sličice" > 
  <li class = "span3" > 
    <div class = "sličica" > 
      <img src = "https://placehold.it/260x180" alt = "" >  
      <h5> Oznaka sličice </h5>
      <p> Natpis sličice upravo ovdje... </p>
    </div>
  </li>
  ...
</ul>

Više primjera

Istražite sve svoje mogućnosti s različitim mrežnim klasama koje su vam dostupne. Također možete miješati i spajati različite veličine.

Prepisana osnovna klasa

Uz Bootstrap 2, pojednostavili smo osnovnu klasu: .alertumjesto .alert-message. Također smo smanjili minimalno potrebnu oznaku—no <p>nije potrebno po defaultu, samo vanjski <div>.

Pojedinačna poruka upozorenja

Za trajniju komponentu sa manje koda, uklonili smo diferencirajući izgled za blokada upozorenja, poruke koje dolaze s više dopuna i obično više teksta. Klasa je također promijenjena u .alert-block.

Odlično ide uz javascript

Bootstrap dolazi sa odličnim jQuery dodatkom koji podržava poruke upozorenja, čineći njihovo odbacivanje brzim i lakim.

Nabavite dodatak »

Primjer upozorenja

Zamotajte svoju poruku i opcionalnu ikonu za zatvaranje u div s jednostavnom klasom.

<div class = "alert" > 
  <button class = "close" data-dismiss = "alert" > × </button>  
  <strong> Upozorenje! </strong> Najbolje provjerite sami, ne izgledate baš dobro.
</div>

Glavu gore! iOS uređaji zahtijevaju an href="#"za odbacivanje upozorenja. Obavezno ga uključite i atribut podataka za ikone zatvaranja sidra. Alternativno, možete koristiti <button>element s atributom podataka, što smo odlučili učiniti za naše dokumente. Kada koristite <button>, morate uključiti type="button"ili se vaši obrasci možda neće poslati.

Lako proširite standardnu ​​poruku upozorenja s dvije opcione klase: .alert-blockza više kontrola i kontrola teksta i .alert-headingza odgovarajući naslov.

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

Greška ili opasnost

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

Uspjeh

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

Informacije

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

Basic

Zadana traka napretka s vertikalnim gradijentom.

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

Prugasta

Koristi gradijent za stvaranje prugastog efekta (bez IE).

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

Animirani

Uzima prugasti primjer i animira ga (bez IE).

<div class = "progres napredak-prugasti 
     aktivan" >
  <div class = "bar" 
       style = " širina : 40 %; " ></div> 
</div>

Dodatne boje

Trake napretka koriste neke od istih tipki i klasa upozorenja za dosljedne stilove.

Prugaste šipke

Slično jednobojnim bojama, imamo različite prugaste trake napretka.

Ponašanje

Trake napretka koriste CSS3 tranzicije, tako da ako dinamički podešavate širinu putem javascripta, ona će glatko mijenjati veličinu.

Ako koristite .activeklasu, vaše .progress-stripedtrake napretka će animirati pruge slijeva nadesno.

Podrška za pretraživač

Trake napretka koriste CSS3 gradijente, prijelaze i animacije kako bi postigli sve svoje efekte. Ove funkcije nisu podržane u IE7-9 ili starijim verzijama Firefoxa.

Opera i IE trenutno ne podržavaju animacije.

Wells

Koristite bunar kao jednostavan efekat na elementu da mu date umetnuti efekat.

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

Zatvori ikona

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>