Grupe gumba

Koristite grupe gumba za spajanje više gumba u jednu složenu komponentu. Izgradite ih pomoću niza <a>ili <button>elemenata.

Najbolje prakse

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

• Uvijek koristite isti element u jednoj grupi gumba <a>ili <button>.
• Ne miješajte gumbe različitih boja u istoj grupi gumba.
• Koristite ikone uz ili umjesto teksta, ali svakako uključite alt i naslovni tekst gdje je to prikladno.

Povezane grupe gumba s padajućim izbornikom (pogledajte dolje) trebale bi se pozivati ​​zasebno i uvijek uključivati ​​padajući kursor za označavanje željenog ponašanja.

Zadani primjer

Evo kako HTML izgleda za standardnu ​​grupu gumba izgrađenu s gumbima oznake sidra:

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

Primjer alatne trake

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

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

Potvrdni okvir i radijski okusi

Grupe gumba također mogu funkcionirati kao radio, gdje može biti aktivan samo jedan gumb, ili okviri za potvrdu, gdje može biti aktivan bilo koji broj gumba. Pogledajte Javascript dokumente za to.

Preuzmite javascript »

Padajući izbornici u grupama gumba

Glavu gore! Gumbi s padajućim izbornikom moraju biti zasebno umotani u svoje .btn-groupunutar .btn-toolbarza ispravno prikazivanje.

Pregled i primjeri

Upotrijebite bilo koji gumb za pokretanje padajućeg izbornika tako da ga postavite unutar .btn-groupi date odgovarajuću oznaku izbornika.

Primjer označavanja

Slično grupi gumba, naše označavanje koristi uobičajeno označavanje gumba, ali s pregršt dodataka za pročišćavanje stila i podržavanje Bootstrapovog padajućeg jQuery dodatka.

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

Radi sa svim veličinama gumba

Padajući izbornik gumba radi u bilo kojoj veličini. veličina vašeg gumba je .btn-large, .btn-smallili .btn-mini.

Zahtijeva javascript

Za funkcioniranje padajućih gumba potreban je Bootstrap padajući dodatak .

U nekim slučajevima, poput mobilnih uređaja, padajući izbornici proširit će se izvan okvira za prikaz. Morate riješiti poravnanje ručno ili prilagođenim javascriptom.

Pregled i primjeri

Nadovezujući se na stilove i označavanje grupe gumba, možemo jednostavno stvoriti podijeljeni gumb. Podijeljeni gumbi imaju standardnu ​​radnju s lijeve strane i padajući izbornik s desne strane s kontekstualnim vezama.

Veličine

Iskoristite dodatne klase gumba .btn-mini, .btn-smallili .btn-largeza dimenzioniranje.

<div class = "btn-group" > 
  ...
  <ul class = "dropdown-menu pull-desno" > 
    <!-- veze padajućeg izbornika -->
  </ul>
</div>

Primjer označavanja

Proširujemo normalne padajuće izbornike gumba kako bismo pružili radnju drugog gumba koji funkcionira kao zasebni okidač padajućeg izbornika.

<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 izbornik" > 
    <!-- veze padajućeg izbornika -->
  </ul>
</div>

Padajući izbornici

Padajući izbornici također se mogu prebacivati ​​odozdo prema gore dodavanjem jedne klase neposrednom roditelju .dropdown-menu. Okrenut će smjer .careti promijeniti položaj samog izbornika da se kreće odozdo prema gore umjesto odozgo prema dolje.

<div class = "btn-group dropup" > 
  <button class = "btn" > Ispadanje </button> 
  <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "caret" ></span> 
  </button>
  <ul class = "padajući izbornik" > 
    <!-- veze padajućeg izbornika -->
  </ul>
</div>

Snažna osnovna klasa

Sve navigacijske komponente ovdje—kartice, pilule i popisi —dijele istu osnovnu oznaku i stilove kroz .navrazred.

Kada koristiti

Kartice i pilule izvrsne su za dijelove sadržaja ili kretanje između stranica povezanog sadržaja.

Poravnanje komponenti

Za poravnavanje navigacijskih veza upotrijebite klase pomoćnih programa .pull-leftili . .pull-rightObje klase će dodati CSS float u navedenom smjeru.

Osnovne kartice

Uzmite obične <ul>veze i dodajte .nav-tabs:

• Dom
• Profil
• Poruke

<ul class = "nav nav-tabs" > 
  <li class = "active" > 
    <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 njega upotrijebite:

• Dom
• Profil
• Poruke

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

Kako ih složiti

Kako su kartice i pilule prema zadanim postavkama vodoravne, samo dodajte drugu klasu, .nav-stackedkako bi izgledale okomito naslagane.

Naslagani jezičci

• Dom
• Profil
• Poruke

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

Naslagane tablete

• Dom
• Profil
• Poruke

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

Bogati jelovnici na jednostavan način

Padajući izbornici u Bootstrap karticama i pilulama su super jednostavni i zahtijevaju samo malo više HTML-a i lagani jQuery dodatak.

Idite na stranicu Javascripta kako biste pročitali dokumente o pokretanju padajućih izbornika u Bootstrapu.

Kartice s padajućim izbornikom

• Dom
• Pomozite
• Padajući izbornik
  • Action
  • Another action
  • Something else here
  • Separated link

<ul class = "nav nav-tabs" > 
  <li class = "dropdown" > 
    <a class = "dropdown-toggle" 
       data-toggle = "padajući"
       href = "#" >
        Padajući izbornik
        <b class = "caret" ></b> 
      </a>
    <ul class = "padajući izbornik" > 
      <!-- veze -->
    </ul>
  </li>
</ul>

Tablete s padajućim izbornikom

• Dom
• Pomozite
• Padajući izbornik
  • Action
  • Another action
  • Something else here
  • Separated link

<ul class = "nav nav-pills" > 
  <li class = "dropdown" > 
    <a class = "dropdown-toggle" 
       data-toggle = "padajući"
       href = "#" >
        Padajući izbornik
        <b class = "caret" ></b> 
      </a>
    <ul class = "padajući izbornik" > 
      <!-- veze -->
    </ul>
  </li>
</ul>

Navigacija u stilu aplikacije

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

Strukturno, izgrađeni su na istim osnovnim navigacijskim stilovima kao kartice i tablete, tako da su upotreba i prilagodba jednostavni.

Sa ikonama

Navigacijske liste također je lako opremiti ikonama. Dodajte odgovarajuću <i>oznaku s klasom i gotovi ste.

Horizontalni razdjelnici

Dodajte vodoravni razdjelnik stvaranjem prazne stavke popisa s klasom .divider, ovako:

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

Primjer navigacijske liste

Uzmite popis veza i dodajte class="nav nav-list":

<ul class = "nav nav-list" > 
  <li class = "nav-header" > 
    Zaglavlje popisa
  </li>
  <li class = "active" > 
    <a href = "#" > Početna </a> 
  </li>
  <li>
    <a href = "#" > Knjižnica </a> 
  </li>
  ...
</ul>

Primjer s ikonama

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

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

Što je uključeno

Oživite svoje kartice pomoću jednostavnog dodatka za prebacivanje između sadržaja putem kartica. Bootstrap integrira tabbable kartice u četiri stila: gore (zadano), desno, dolje i lijevo.

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

Blijeđenje u karticama

Da bi kartice blijedjele, dodajte .fadesvakoj .tab-pane.

Zahtijeva jQuery dodatak

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

Preuzmite javascript →

Primjer s karticama

Da bi kartice bile podložne karticama, stvorite .tab-panes jedinstvenim ID-om za svaku karticu i zamotajte ih u .tab-content.

Za desne ili lijeve poravnate kartice, omotajte .nav-tabsi .tab-contentu .tabbable.

Jednostavna oznaka

Korištenje kartica s mogućnošću kartice zahtijeva div za omatanje, skup kartica i skup okna sadržaja s mogućnošću kartice.

<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 = "aktivno okno kartice" id = "tab1" >  
      <p> Ja sam u odjeljku 1. </p>
    </div>
    <div class = "tab-pane" id = "tab2" >  
      <p> Bok, ja sam u Odjeljku 2. </p>
    </div>
  </div>
</div>

Jezici na dnu

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

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

Kartice s lijeve strane

Zamijenite klasu da biste stavili kartice s lijeve strane.

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

Kartice s desne strane

Zamijenite klasu da biste stavili kartice s desne strane.

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

Navbar skele

Navigacijska traka zahtijeva samo nekoliko divova da bi bila dobro strukturirana za statički ili fiksni prikaz.

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

Fiksna navigacijska traka

Fiksirajte navigacijsku traku na vrh ili dno prozora s dodatnom klasom na krajnjem vanjskom divu, .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 40 px ili više ispune u <body>. Obavezno dodajte ovo nakon temeljnog Bootstrap CSS-a i prije neobaveznog responzivnog CSS-a.

Naziv marke

Jednostavna poveznica za prikaz naziva vašeg brenda ili projekta zahtijeva samo oznaku sidra.

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

Obrasci u navigacijskoj traci

Za pravilan stil i položaj obrasca unutar navigacijske trake dodajte odgovarajuće klase kao što je prikazano u nastavku. Za zadani obrazac uključite .navbar-formili .pull-leftili .pull-rightkako biste ga pravilno poravnali.

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

Za prilagođeniji obrazac za pretraživanje, dodajte .navbar-searchi formu .search-queryunos za specijalizirane stilove na navigacijskoj traci.

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

Izborna responzivna varijacija

Ovisno o količini sadržaja na gornjoj traci, možda ćete htjeti implementirati responzivne opcije. Da biste to učinili, zamotajte svoj navigacijski sadržaj u div koji sadrži .nav-collapse.collapse, i dodajte gumb za uključivanje navigacijske trake, .btn-navbar.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <div class = "container" > 
 
      <!-- .btn-navbar koristi se kao prekidač za sadržaj sažete 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>
 
      <!-- Svakako ostavite marku ako želite da se prikaže -->
      <a class = "brand" href = "#" > Naziv projekta </a>  
 
      <!-- Sve što želite sakriti na 940px ili manje, smjestite ovdje -->
      <div class = "nav-collapse" > 
        <!-- .nav, .navbar-search, .navbar-form, itd -->
      </div>
 
    </div>
  </div>
</div>

Navigacijske veze

Navigacijske stavke jednostavno je dodati putem neuređenih popisa.

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

Možete jednostavno dodati razdjelnike svojim navigacijskim vezama pomoću prazne stavke popisa i jednostavne klase. Samo dodajte ovo između veza:

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

Poravnanje komponenti

Za poravnavanje navigacije, obrasca za pretraživanje ili teksta koristite klase pomoćnih programa .pull-leftili . .pull-rightObje klase će dodati CSS float u navedenom smjeru.

Dodavanje padajućih izbornika

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

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

Preuzmite javascript →

Tekst u navigacijskoj traci

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

Zašto ih koristiti

Navigacija putem puta koristi se kao način da se korisnicima pokaže gdje se nalaze unutar aplikacije ili web-mjesta, ali ne za primarnu navigaciju. Neka njihova upotreba bude rijetka i sažeta kako bi bile najučinkovitije.

Primjeri

Prikazan je jedan primjer jer se može prikazati na više stranica.

• Dom

• Početna /
• Knjižnica

• Početna /
• Knjižnica /
• Podaci

Markup

HTML je vaš standardni neuređeni popis s vezama.

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

Kada koristiti

Ultra jednostavno i minimalno stilizirano označavanje stranica inspirirano Rdioom, izvrsno za aplikacije i rezultate pretraživanja. Veliki blok teško je promašiti, lako ga je prilagoditi i pruža velika područja klika.

Veze na stranice s prikazom stanja

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

Fleksibilno poravnanje

Dodajte bilo koju od dvije opcijske klase za promjenu poravnanja veza na stranice: .pagination-centeredi .pagination-right.

Primjeri

Zadana komponenta paginacije je fleksibilna i radi u nizu varijacija.

Markup

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

<div class = "pagination" > 
  <ul>
    <li><a href = "#" > Prethodna </a></li> 
    <li class = "active" > 
      <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 = "#" > Dalje </a></li> 
  </ul>
</div>

O dojavljivaču

Komponenta straničnika skup je veza za jednostavne implementacije paginacije s laganim označavanjem i još lakšim stilovima. Izvrstan je za jednostavne stranice poput blogova ili časopisa.

Izborno onemogućeno stanje

Pager veze također koriste opću .disabledklasu iz paginacije.

Zadani primjer

Prema zadanim postavkama, dojavljivač centrira veze.

• Prethodno
• Sljedeći

<ul class = "pager" > 
  <li>
    <a href = "#" > Prethodno </a> 
  </li>
  <li>
    <a href = "#" > Dalje </a> 
  </li>
</ul>

Usklađene veze

Alternativno, svaku vezu možete poravnati sa strane:

• ← Starije
• Novije →

<ul class = "pager" > 
  <li klasa = "prethodna" > 
    <a href = "#" > ← Starije </a> 
  </li>
  <li class = "sljedeća" > 
    <a href = "#" > Novije → </a> 
  </li>
</ul>

Oko

Bedževi su male, jednostavne komponente za prikaz pokazatelja ili brojanja neke vrste. Obično se nalaze u klijentima e-pošte kao što je Mail.app ili u mobilnim aplikacijama za push obavijesti.

Dostupni razredi

Bootstrap pruža laganu, fleksibilnu komponentu koja se naziva jedinica heroja za prikazivanje sadržaja na vašoj web stranici. Dobro radi na marketinškim i sadržajnim stranicama.

Markup

Omotajte svoj sadržaj na sljedeći divnačin:

<div class = "hero-unit" > 
  <h1> Naslov </h1>
  <p> Slogan </p>
  <p>
    <a klasa = "btn btn-primarni btn-large" > 
      Saznajte više
    </a>
  </p>
</div>

Jednostavna ljuska za h1prikladno raspoređivanje i segmentiranje dijelova sadržaja na stranici. Može koristiti h1zadani small, element kao i većinu drugih komponenti (s dodatnim stilovima).

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

Zadane sličice

Prema zadanim postavkama, Bootstrapove sličice dizajnirane su za prikazivanje povezanih slika s minimalnim potrebnim oznakama.

Vrlo prilagodljiv

Uz malo dodatnog označavanja, moguće je sličicama dodati bilo koju vrstu HTML sadržaja poput naslova, odlomaka ili gumba.

• 

  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.

  Akcijski Akcijski

• 

  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.

  Akcijski Akcijski

Zašto koristiti sličice

Sličice (prethodno .media-griddo v1.4) izvrsne su za mreže fotografija ili videozapisa, rezultate pretraživanja slika, maloprodajne proizvode, portfelje i još mnogo toga. Mogu biti poveznice ili statični sadržaj.

Jednostavno, fleksibilno označavanje

Označavanje minijatura je jednostavno - sve što je potrebno je a uls bilo kojim brojem elemenata. liTakođer je super fleksibilan, dopuštajući bilo koju vrstu sadržaja sa samo malo više oznaka za omotavanje vašeg sadržaja.

Koristi veličine stupaca mreže

Na kraju, komponenta sličica koristi postojeće klase sustava rešetki—poput .span2ili — .span3za kontrolu dimenzija sličica.

Oznaka

Kao što je ranije spomenuto, potrebno označavanje za minijature je lagano i jednostavno. Evo pogleda na zadanu postavku za povezane slike :

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

Za prilagođeni HTML sadržaj u minijaturama, oznaka se malo mijenja. Kako bismo dopustili sadržaj na razini bloka bilo gdje, mijenjamo <a>za lajk <div>tako:

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

Više primjera

Istražite sve svoje mogućnosti s različitim klasama mreže koje su vam dostupne. Također možete kombinirati različite veličine.

Ponovno napisana osnovna klasa

S Bootstrapom 2 pojednostavili smo osnovnu klasu: .alertumjesto .alert-message. Također smo smanjili minimalno potrebno označavanje—nije <p>potrebno prema zadanim postavkama, samo vanjski <div>.

Jedna poruka upozorenja

Za trajniju komponentu s manje koda, uklonili smo razlikovni izgled za blok upozorenja, poruke koje dolaze s više ispuna i obično više teksta. Klasa se također promijenila u .alert-block.

Odlično ide s javascriptom

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

Nabavite dodatak »

Primjer upozorenja

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

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

Glavu gore! iOS uređaji zahtijevaju href="#"za odbacivanje upozorenja. Obavezno uključite to i atribut podataka za ikone zatvaranja sidra. Alternativno, možete koristiti buttonelement s atributom podataka, što smo odlučili učiniti za naše dokumente.

Jednostavno proširite standardnu ​​poruku upozorenja s dvije opcijske klase: .alert-blockza više podstava i kontrola teksta te .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 provjerite sami, niste...
</div>

Pogreška ili opasnost

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

Uspjeh

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

Informacija

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

Osnovni, temeljni

Zadana traka napretka s okomitim gradijentom.

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

Prugasta

Koristi gradijent za stvaranje prugastog efekta (bez IE).

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

Animirani

Uzima prugasti primjer i animira ga (bez IE).

<div class = "progress progress-striped 
     aktivan" >
  <div class = "bar" 
       stil = " š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 prijelaze, tako da ako dinamički prilagodite širinu putem javascripta, glatko će promijeniti veličinu.

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

Podrška za preglednik

Trake napretka koriste CSS3 gradijente, prijelaze i animacije za postizanje svih njihovih učinaka. Ove značajke nisu podržane u IE7-9 ili starijim verzijama Firefoxa.

Opera i IE trenutno ne podržavaju animacije.

Wells

Upotrijebite bušotinu kao jednostavan učinak na element kako biste mu dali umetnuti učinak.

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

Ikona za zatvaranje

Upotrijebite generičku ikonu za zatvaranje za odbacivanje sadržaja poput modala i upozorenja.

×

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

iOS uređaji zahtijevaju href="#" za klikove ako radije koristite sidro.

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