Grupuri de butoane

Utilizați grupuri de butoane pentru a uni mai multe butoane împreună ca o singură componentă compusă. Construiește-le cu o serie de <a>sau <button>elemente.

Cele mai bune practici

Vă recomandăm următoarele instrucțiuni pentru utilizarea grupurilor de butoane și a barelor de instrumente:

• Utilizați întotdeauna același element într-un singur grup de butoane <a>sau <button>.
• Nu amestecați butoane de culori diferite în același grup de butoane.
• Folosiți pictograme în plus sau în loc de text, dar asigurați-vă că includeți textul alt și titlul acolo unde este cazul.

Grupurile de butoane înrudite cu meniuri derulante (a se vedea mai jos) ar trebui să fie numite separat și să includă întotdeauna un simbol dropdown pentru a indica comportamentul dorit.

Exemplu implicit

Iată cum arată HTML-ul pentru un grup de butoane standard construit cu butoane de etichetă de ancorare:

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

Exemplu de bară de instrumente

Combinați seturi de <div class="btn-group">într-un <div class="btn-toolbar">pentru componente mai complexe.

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

Casetă de selectare și arome radio

Grupurile de butoane pot funcționa, de asemenea, ca radiouri, unde un singur buton poate fi activ, sau casete de selectare, unde orice număr de butoane pot fi active. Consultați documentele Javascript pentru asta.

Obțineți javascript »

Mențiuni derulante în grupuri de butoane

Atenție! Butoanele cu meniuri derulante trebuie să fie împachetate individual în propriile lor, pentru .btn-groupo .btn-toolbarrandare corectă.

Prezentare generală și exemple

Utilizați orice buton pentru a declanșa un meniu derulant, plasându-l într-un .btn-groupși oferind meniul de marcare adecvat.

Exemplu de marcare

Similar cu un grup de butoane, marcarea noastră folosește marcarea obișnuită a butoanelor, dar cu câteva completări pentru a rafina stilul și pentru a sprijini pluginul jQuery derulant al Bootstrap.

<div class = "btn-group" > 
  <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >   
    Acțiune
    <span class = "caret" ></span> 
  </a>
  <ul class = "meniu derulant" > 
    <!-- link-uri meniului drop-down -->
  </ul>
</div>

Funcționează cu toate dimensiunile de butoane

Butoanele derulante funcționează la orice dimensiune. dimensiunile butonului dvs. la .btn-large, .btn-small, sau .btn-mini.

Necesită javascript

Butoanele derulante necesită pluginul Bootstrap pentru a funcționa.

În unele cazuri, cum ar fi dispozitivele mobile, meniurile drop-down se vor extinde în afara ferestrei de vizualizare. Trebuie să rezolvați alinierea manual sau cu javascript personalizat.

Prezentare generală și exemple

Bazându-ne pe stilurile și marcajul grupului de butoane, putem crea cu ușurință un buton împărțit. Butoanele de împărțire au o acțiune standard în stânga și o comutare derulantă în dreapta cu linkuri contextuale.

Dimensiuni

Utilizați clasele suplimentare de butoane .btn-mini, .btn-smallsau .btn-largepentru dimensionare.

<div class = "btn-group" > 
  ...
  <ul class = "meniu derulant trage-dreapta" > 
    <!-- link-uri meniului drop-down -->
  </ul>
</div>

Exemplu de marcare

Extindem meniurile derulante normale ale butoanelor pentru a oferi o a doua acțiune de buton care funcționează ca un declanșator separat al meniului derulant.

<div class = "btn-group" > 
  <button class = "btn" > Acțiune </button> 
  <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "caret" ></span> 
  </button>
  <ul class = "meniu derulant" > 
    <!-- link-uri meniului drop-down -->
  </ul>
</div>

Meniuri drop-up

Meniurile drop-down pot fi, de asemenea, comutate de jos în sus prin adăugarea unei singure clase la părintele imediat al .dropdown-menu. Acesta va inversa direcția .caretși va repoziționa meniul în sine pentru a se deplasa de jos în sus în loc de sus în jos.

<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 = "meniu derulant" > 
    <!-- link-uri meniului drop-down -->
  </ul>
</div>

Clasă de bază puternică

Toate componentele de navigare de aici — file, pastile și liste — au același marcaj de bază și stiluri prin .navclasă.

Când să utilizați

Filele și pastilele sunt excelente pentru secțiuni de conținut sau pentru navigarea între paginile de conținut similar.

Alinierea componentelor

Pentru a alinia legăturile de navigare, utilizați clasele de utilitate .pull-leftsau . .pull-rightAmbele clase vor adăuga un float CSS în direcția specificată.

File de bază

Luați un obișnuit <ul>de link-uri și adăugați .nav-tabs:

• Acasă
• Profil
• Mesaje

<ul class = "nav nav-tabs" > 
  <li class = "activ" > 
    <a href = "#" > Acasă </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

Pastile de bază

Luați același HTML, dar folosiți .nav-pillsîn schimb:

• Acasă
• Profil
• Mesaje

<ul class = "nav nav-pills" > 
  <li class = "activ" > 
    <a href = "#" > Acasă </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

Cum să le stivuiți

Deoarece tabletele și pastilele sunt orizontale în mod implicit, trebuie doar să adăugați o a doua clasă, .nav-stacked, pentru a le face să apară stivuite vertical.

File stivuite

• Acasă
• Profil
• Mesaje

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

Pastile stivuite

• Acasă
• Profil
• Mesaje

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

Meniuri bogate ușor

Meniurile drop-down din filele și pastilele Bootstrap sunt super ușoare și necesită doar puțin HTML suplimentar și un plugin jQuery ușor.

Mergeți la pagina Javascript pentru a citi documentele despre inițializarea meniurilor derulante în Bootstrap.

File cu meniuri derulante

• Acasă
• Ajutor
• Scapă jos
  • Action
  • Another action
  • Something else here
  • Separated link

<ul class = "nav nav-tabs" > 
  <li class = „downdown” > 
    <a class = "dropdown-toggle" 
       data-toggle = „menu derulant”
       href = "#" >
        Scapă jos
        <b class = „caret” ></b> 
      </a>
    <ul class = "meniu derulant" > 
      <!-- linkuri -->
    </ul>
  </li>
</ul>

Pastile cu meniuri derulante

• Acasă
• Ajutor
• Scapă jos
  • Action
  • Another action
  • Something else here
  • Separated link

<ul class = "nav nav-pills" > 
  <li class = „downdown” > 
    <a class = "dropdown-toggle" 
       data-toggle = „menu derulant”
       href = "#" >
        Scapă jos
        <b class = „caret” ></b> 
      </a>
    <ul class = "meniu derulant" > 
      <!-- linkuri -->
    </ul>
  </li>
</ul>

Navigare în stilul aplicației

Listele de navigare oferă o modalitate simplă și ușoară de a construi grupuri de legături de navigare cu anteturi opționale. Sunt cel mai bine folosite în barele laterale precum Finder în OS X.

Din punct de vedere structural, acestea sunt construite pe aceleași stiluri de navigare de bază ca și tabletele și pastilele, astfel încât utilizarea și personalizarea sunt simple.

Cu icoane

Listele de navigare sunt, de asemenea, ușor de echipat cu pictograme. Adaugă <i>eticheta potrivită cu class și ești gata.

Divizoare orizontale

Adăugați un divizor orizontal creând un element de listă gol cu ​​clasa .divider, astfel:

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

Exemplu de listă de navigare

Luați o listă de link-uri și adăugați class="nav nav-list":

<ul class = "nav nav-list" > 
  <li class = "nav-header" > 
    Antetul listei
  </li>
  <li class = "activ" > 
    <a href = "#" > Acasă </a> 
  </li>
  <li>
    <a href = "#" > Bibliotecă </a> 
  </li>
  ...
</ul>

Exemplu cu pictograme

Același exemplu, dar cu <i>etichete pentru pictograme.

<ul class = "nav nav-list" > 
  ...
  <li>
    <a href = "#" > 
      <i class = „carte-icoană” ></i> 
      Bibliotecă
    </a>
  </li>
  ...
</ul>

Ce este inclus

Dați viață filelor dvs. cu un plugin simplu pentru a comuta între conținut prin file. Bootstrap integrează file tabulabile în patru stiluri: sus (implicit), dreapta, jos și stânga.

Schimbarea între ele este ușoară și necesită doar schimbarea foarte mică a markupului.

Fade in tabs

Pentru ca filele să dispară, adăugați .fadela fiecare .tab-pane.

Necesită pluginul jQuery

Toate filele tabulabile sunt alimentate de pluginul nostru ușor jQuery. Citiți mai multe despre cum să dați viață filelor tabulabile pe pagina de documente javascript .

Obțineți javascript →

Exemplu tabulabil

Pentru a face filele să poată fi tabulate, creați un .tab-paneID unic pentru fiecare filă și includeți-le în .tab-content.

Pentru file aliniate la dreapta sau la stânga, înfășurați .nav-tabsși .tab-contentîn .tabbable.

Markup simplu

Utilizarea filelor cu file necesită un div de împachetare, un set de file și un set de panouri de conținut cu file.

<div class = "tabbable" > <!-- Necesar doar pentru filele din stânga/dreapta -->  
  <ul class = "nav nav-tabs" > 
    <li class = "active" ><a href = "#tab1" data-toggle = "tab" > Secțiunea 1 </a></li>   
    <li><a href = "#tab2" data-toggle = "tab" > Secțiunea 2 </a></li>  
  </ul>
  <div class = "fil-conținut" > 
    <div class = "tab-pane active" id = "tab1" >  
      <p> Sunt în Secțiunea 1. </p>
    </div>
    <div class = "tab-pane" id = "tab2" >  
      <p> Bună, sunt în Secțiunea 2. </p>
    </div>
  </div>
</div>

File în partea de jos

Întoarceți ordinea HTML și adăugați o clasă pentru a pune file în partea de jos.

<div class = "tabable tabs-below" > 
  <div class = "fil-conținut" > 
    ...
  </div>
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
</div>

Filele din stânga

Schimbați clasa pentru a pune filele în stânga.

<div class = "tabable tabs-left" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "fil-conținut" > 
    ...
  </div>
</div>

Filele din dreapta

Schimbați clasa pentru a pune file în partea dreaptă.

<div class = "tabable tabs-right" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "fil-conținut" > 
    ...
  </div>
</div>

Navbar schele

Bara de navigare necesită doar câteva div-uri pentru a o structura bine pentru afișare statică sau fixă.

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

Bara de navigare fixată

Fixați bara de navigare în partea de sus sau de jos a ferestrei de vizualizare cu o clasă suplimentară pe div-ul cel mai exterior, .navbar.

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

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

Când fixați bara de navigare, nu uitați să luați în considerare zona ascunsă de dedesubt. Adăugați 40 px sau mai mult de umplutură la <body>. Asigurați-vă că adăugați acest lucru după CSS-ul de bază Bootstrap și înainte de CSS-ul opțional receptiv.

Nume de marcă

Un link simplu pentru a arăta marca sau numele proiectului necesită doar o etichetă de ancorare.

<a class = "brand" href = "#" >  
  Denumirea proiectului
</a>

Formulare în bara de navigare

Pentru a stila și poziționa corect un formular în bara de navigare, adăugați clasele corespunzătoare, așa cum se arată mai jos. Pentru un formular implicit, includeți .navbar-formși fie .pull-leftsau .pull-rightpentru a-l alinia corect.

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

Pentru un formular de căutare mai personalizat, adăugați .navbar-searchla formși .search-queryla intrarea pentru stiluri specializate din bara de navigare.

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

Variație opțională de răspuns

În funcție de cantitatea de conținut din bara de sus, este posibil să doriți să implementați opțiunile receptive. Pentru a face acest lucru, împachetați conținutul dvs. de navigare într-un div care conține .nav-collapse.collapse, și adăugați butonul de comutare a barei de navigare, .btn-navbar.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <div class = "container" > 
 
      <!-- .btn-navbar este folosit ca comutare pentru conținutul restrâns din bara de navigare -->
      <a class = "btn btn-navbar" data-toggle = "colapse" data-target = ".nav-collapse" >   
        <span class = "icon-bar" ></span> 
        <span class = "icon-bar" ></span> 
        <span class = "icon-bar" ></span> 
      </a>
 
      <!-- Asigurați-vă că lăsați marca acolo dacă doriți să fie afișată -->
      <a class = "brand" href = "#" > Numele proiectului </a>  
 
      <!-- Tot ceea ce doriți să fie ascuns la 940 px sau mai puțin, plasați aici -->
      <div class = "nav-collapse" > 
        <!-- .nav, .navbar-search, .navbar-form etc -->
      </div>
 
    </div>
  </div>
</div>

Legături de navigare

Elementele de navigare sunt ușor de adăugat prin liste neordonate.

<ul class = "nav" > 
  <li class = "activ" > 
    <a href = "#" > Acasă </a> 
  </li>
  <li><a href = "#" > Link </a></li> 
  <li><a href = "#" > Link </a></li> 
</ul>

Puteți adăuga cu ușurință separatoare la legăturile dvs. de navigare cu un element de listă gol și o clasă simplă. Doar adăugați asta între link-uri:

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

Alinierea componentelor

Pentru a alinia un navigator, un formular de căutare sau un text, utilizați clasele de utilitate .pull-leftsau . .pull-rightAmbele clase vor adăuga un float CSS în direcția specificată.

Adăugarea meniurilor drop-down

Adăugarea de meniuri derulante și drop-up la navigare este foarte simplă, dar necesită utilizarea pluginului nostru javascript .

<ul class = "nav" > 
  <li class = „downdown” > 
    <a href = "#" 
          clasa = "menu-menu-comutator"
          data-toggle = „menu derulant” >
          Cont
          <b class = „caret” ></b> 
    </a>
    <ul class = "meniu derulant" > 
      ...
    </ul>
  </li>
</ul>

Obțineți javascript →

Text în bara de navigare

Înfășurați șirurile de text într-un <.navbar-text>format , de obicei pe o <p>etichetă pentru a obține interfața și culoarea adecvate.

De ce să le folosești

Navigarea prin breadcrumb este folosită ca o modalitate de a arăta utilizatorilor unde se află într-o aplicație sau un site, dar nu pentru navigarea principală. Păstrați utilizarea lor rară și succintă pentru a fi cea mai eficientă.

Exemple

Un singur exemplu afișat, deoarece ar putea fi afișat pe mai multe pagini.

• Acasă

• Acasă /
• Bibliotecă

• Acasă /
• Biblioteca /
• Date

Markup

HTML este lista dvs. standard neordonată cu linkuri.

<ul class = "breadcrumb" > 
  <li>
    <a href = "#" > Acasă </a> <span class = "divider" > / </span>   
  </li>
  <li>
    <a href = "#" > Bibliotecă </a> <span class = "divider" > / </span>   
  </li>
  <li class = "active" > Date </li> 
</ul>

Când să utilizați

Paginare ultra simplistă și cu stil minimal inspirată de Rdio, excelentă pentru aplicații și rezultatele căutării. Blocul mare este greu de ratat, ușor de scalat și oferă zone mari de clic.

Link-uri de pagini cu state

Linkurile sunt personalizabile și funcționează într-o serie de circumstanțe cu clasa potrivită. .disabledpentru link-urile neclickabile și .activepentru pagina curentă.

Aliniere flexibilă

Adăugați oricare dintre cele două clase opționale pentru a modifica alinierea legăturilor de paginare: .pagination-centeredși .pagination-right.

Exemple

Componenta implicită de paginare este flexibilă și funcționează în mai multe variante.

Markup

Înfășurată într-un <div>, paginarea este doar un <ul>.

<div class = "paginare" > 
  <ul>
    <li><a href = "#" > Anterior </a></li> 
    <li class = "activ" > 
      <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 = "#" > Următorul </a></li> 
  </ul>
</div>

Despre pager

Componenta pager este un set de link-uri pentru implementări simple de paginare cu marcaj ușor și stiluri chiar mai ușoare. Este grozav pentru site-uri simple, cum ar fi bloguri sau reviste.

Stare opțională dezactivată

Link-urile pager folosesc, de asemenea, clasa generală .disableddin paginare.

Exemplu implicit

În mod implicit, paginatorul centrează linkurile.

• Anterior
• Următorul

<ul class = "pager" > 
  <li>
    <a href = "#" > Anterior </a> 
  </li>
  <li>
    <a href = "#" > Următorul </a> 
  </li>
</ul>

Legături aliniate

Alternativ, puteți alinia fiecare link pe părțile laterale:

• ← Mai vechi
• Mai nou →

<ul class = "pager" > 
  <li class = "anterior" > 
    <a href = "#" > ← Mai vechi </a> 
  </li>
  <li class = "next" > 
    <a href = "#" > Mai nou → </a> 
  </li>
</ul>

Despre

Insignele sunt componente mici, simple pentru afișarea unui indicator sau număr de vreun fel. Se găsesc de obicei în clienții de e-mail precum Mail.app sau în aplicațiile mobile pentru notificări push.

Clasele disponibile

Bootstrap oferă o componentă ușoară și flexibilă numită o unitate erou pentru a prezenta conținutul de pe site-ul dvs. Funcționează bine pe site-uri de marketing și cu conținut ridicat.

Markup

Încheiați conținutul dvs. într-un mod divsimilar:

<div class = „unitate-erou” > 
  <h1> Titlu </h1>
  <p> Slogan </p>
  <p>
    <a class = "btn btn-primary btn-large" > 
      Află mai multe
    </a>
  </p>
</div>

O carcasă simplă pentru h1a distanța și a segmenta în mod corespunzător secțiunile de conținut pe o pagină. Poate utiliza elementul h1implicit al lui small, precum și majoritatea celorlalte componente (cu stiluri suplimentare).

<div class = "page-header" > 
  <h1> Exemplu de antet de pagină </h1>
</div>

Miniaturi implicite

În mod implicit, miniaturile Bootstrap sunt concepute pentru a prezenta imaginile legate cu un marcaj minim necesar.

Extrem de personalizabil

Cu un pic de markup suplimentar, este posibil să adăugați orice tip de conținut HTML, cum ar fi titluri, paragrafe sau butoane în miniaturi.

• 

  Etichetă miniatură

  Cras justo odio, dapibus ac facilitis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

  Acțiune Acțiune

• 

  Etichetă miniatură

  Cras justo odio, dapibus ac facilitis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

  Acțiune Acțiune

De ce să folosiți miniaturile

Miniaturile (anterior .media-gridpână la v1.4) sunt excelente pentru grile de fotografii sau videoclipuri, rezultate de căutare de imagini, produse de vânzare cu amănuntul, portofolii și multe altele. Pot fi link-uri sau conținut static.

Markup simplu, flexibil

Marcarea miniaturilor este simplă – tot ce este necesar ulcu orice număr de elemente. liDe asemenea, este foarte flexibil, permițând orice tip de conținut cu doar puțin mai mult markup pentru a vă încheia conținutul.

Utilizează dimensiunile coloanelor de grilă

În cele din urmă, componenta miniaturi folosește clasele existente ale sistemului de grilă, cum ar fi .span2sau .span3, pentru controlul dimensiunilor miniaturii.

Markupul

După cum am menționat anterior, marcajul necesar pentru miniaturi este ușor și simplu. Iată o privire asupra configurației implicite pentru imaginile legate :

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

Pentru conținutul HTML personalizat în miniaturi, marcajul se modifică ușor. Pentru a permite conținut la nivel de bloc oriunde, schimbăm cu <a>așa <div>:

<ul class = "miniaturi" > 
  <li class = "span3" > 
    <div class = "miniatură" > 
      <img src = "https://placehold.it/260x180" alt = "" >  
      <h5> Etichetă miniatură </h5>
      <p> Legendă în miniatură chiar aici... </p>
    </div>
  </li>
  ...
</ul>

Mai multe exemple

Explorați toate opțiunile dvs. cu diferitele clase de grilă disponibile pentru dvs. De asemenea, puteți amesteca și potrivi diferite dimensiuni.

Clasa de bază rescrisă

Cu Bootstrap 2, am simplificat clasa de bază: .alertîn loc de .alert-message. Am redus, de asemenea, marcajul minim necesar - nu <p>este necesar în mod implicit, doar exteriorul <div>.

Un singur mesaj de alertă

Pentru o componentă mai durabilă, cu mai puțin cod, am eliminat aspectul diferențiator pentru alertele de blocare, mesajele care vin cu mai multă umplutură și, de obicei, mai mult text. De asemenea, clasa s-a schimbat în .alert-block.

Merge grozav cu javascript

Bootstrap vine cu un plugin jQuery grozav care acceptă mesaje de alertă, făcând eliminarea lor rapidă și ușoară.

Obțineți pluginul »

Exemple de alerte

Încheiați mesajul și o pictogramă opțională de închidere într-un div cu o clasă simplă.

<div class = "alertă" > 
  <button class = "close" data-dismiss = "alert" > × </button>  
  <strong> Atenție! </strong> Cel mai bine verifică-te, nu arăți prea bine.
</div>

Atenție! Dispozitivele iOS necesită un sistem href="#"pentru eliminarea alertelor. Asigurați-vă că îl includeți și atributul de date pentru pictogramele de închidere a ancora. În mod alternativ, puteți utiliza un <button>element cu atributul de date, ceea ce am optat să facem pentru documentele noastre. Când utilizați <button>, trebuie să includeți type="button"sau formularele dvs. s-ar putea să nu fie trimise.

Extindeți cu ușurință mesajul de alertă standard cu două clase opționale: .alert-blockpentru mai multe controale de umplutură și text și .alert-headingpentru un titlu potrivit.

<div class = "alert alert-block" > 
  <a class = "close" data-dismiss = "alert" href = "#" > × </a>   
  <h4 class = "alert-heading" > Atenție! </h4> 
  Cel mai bine verifică-te, nu ești...
</div>

Eroare sau pericol

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

Succes

<div class = "alerta alertă-succes" > 
  ...
</div>

informație

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

De bază

Bară de progres implicită cu un gradient vertical.

<div class = "progres" > 
  <div class = "bar" 
       stil = " lățime : 60 %; " ></div> 
</div>

In dungi

Utilizează un gradient pentru a crea un efect cu dungi (fără IE).

<div class = "progres progres-striped" > 
  <div class = "bar" 
       stil = " lățime : 20 %; " ></div> 
</div>

Animat

Ia exemplul cu dungi și îl animă (fără IE).

<div class = „progres progres-striped 
     activ" >
  <div class = "bar" 
       stil = " lățime : 40 %; " ></div> 
</div>

Culori suplimentare

Barele de progres folosesc unele dintre aceleași clase de butoane și alerte pentru stiluri consistente.

Bare cu dungi

Similar cu culorile solide, avem bare de progres cu dungi variate.

Comportament

Barele de progres folosesc tranziții CSS3, așa că dacă ajustați dinamic lățimea prin javascript, aceasta se va redimensiona fără probleme.

Dacă utilizați .activeclasa, .progress-stripedbarele de progres vor anima dungile de la stânga la dreapta.

Suport pentru browser

Barele de progres folosesc gradienți, tranziții și animații CSS3 pentru a obține toate efectele. Aceste caracteristici nu sunt acceptate în IE7-9 sau în versiunile mai vechi de Firefox.

Opera și IE nu acceptă animații în acest moment.

Wells

Utilizați puțul ca efect simplu asupra unui element pentru a-i da un efect de inserție.

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

Închide pictograma

Folosiți pictograma de închidere generică pentru a respinge conținut precum modal și alerte.

×

<button class = „închidere” > × </button> 

Dispozitivele iOS necesită un href="#" pentru evenimentele de clic dacă utilizați mai degrabă o ancoră.

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