Componente

Zeci de componente reutilizabile sunt încorporate în Bootstrap pentru a oferi navigare, alerte, popovers și multe altele.

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:

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

Exemplu de bară de instrumente

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

  1. <div class = "btn-toolbar" >
  2. <div class = "btn-group" >
  3. ...
  4. </div>
  5. </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ă.

Butoane derulante

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.

  1. <div class = "btn-group" >
  2. <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >
  3. Acțiune
  4. <span class = "caret" ></span>
  5. </a>
  6. <ul class = "meniu derulant" >
  7. <!-- link-uri meniului drop-down -->
  8. </ul>
  9. </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.


Butoane derulante împărțite

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.

  1. <div class = "btn-group" >
  2. ...
  3. <ul class = "meniu derulant trage-dreapta" >
  4. <!-- link-uri meniului drop-down -->
  5. </ul>
  6. </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.

  1. <div class = "btn-group" >
  2. <button class = "btn" > Acțiune </button>
  3. <button class = "btn dropdown-toggle" data-toggle = "dropdown" >
  4. <span class = "caret" ></span>
  5. </button>
  6. <ul class = "meniu derulant" >
  7. <!-- link-uri meniului drop-down -->
  8. </ul>
  9. </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.

  1. <div class = "btn-group dropup" >
  2. <button class = "btn" > Dropup </button>
  3. <button class = "btn dropdown-toggle" data-toggle = "dropdown" >
  4. <span class = "caret" ></span>
  5. </button>
  6. <ul class = "meniu derulant" >
  7. <!-- link-uri meniului drop-down -->
  8. </ul>
  9. </div>

Paginare cu mai multe pagini

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

  1. <div class = "paginare" >
  2. <ul>
  3. <li><a href = "#" > Anterior </a></li>
  4. <li class = "activ" >
  5. <a href = "#" > 1 </a>
  6. </li>
  7. <li><a href = "#" > 2 </a></li>
  8. <li><a href = "#" > 3 </a></li>
  9. <li><a href = "#" > 4 ​​</a></li>
  10. <li><a href = "#" > Următorul </a></li>
  11. </ul>
  12. </div>

Pager Pentru link-uri anterioare și următoare rapide

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.

  1. <ul class = "pager" >
  2. <li>
  3. <a href = "#" > Anterior </a>
  4. </li>
  5. <li>
  6. <a href = "#" > Următorul </a>
  7. </li>
  8. </ul>

Legături aliniate

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

  1. <ul class = "pager" >
  2. <li class = "anterior" >
  3. <a href = "#" > Mai vechi </a>
  4. </li>
  5. <li class = "next" >
  6. <a href = "#" > Mai nou → </a>
  7. </li>
  8. </ul>
Etichete Markup
Mod implicit <span class="label">Default</span>
Succes <span class="label label-success">Success</span>
Avertizare <span class="label label-warning">Warning</span>
Important <span class="label label-important">Important</span>
Info <span class="label label-info">Info</span>
Invers <span class="label label-inverse">Inverse</span>

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

Nume Exemplu Markup
Mod implicit 1 <span class="badge">1</span>
Succes 2 <span class="badge badge-success">2</span>
Avertizare 4 <span class="badge badge-warning">4</span>
Important 6 <span class="badge badge-important">6</span>
Info 8 <span class="badge badge-info">8</span>
Invers 10 <span class="badge badge-inverse">10</span>

Unitatea de erou

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:

  1. <div class = „unitate-erou” >
  2. <h1> Titlu </h1>
  3. <p> Slogan </p>
  4. <p>
  5. <a class = "btn btn-primary btn-large" >
  6. Află mai multe
  7. </a>
  8. </p>
  9. </div>

Salut Lume!

Aceasta este o unitate eroică simplă, o componentă simplă în stil jumbotron pentru a atrage o atenție suplimentară asupra conținutului sau informațiilor prezentate.

Află mai multe

Antetul paginii

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

  1. <div class = "page-header" >
  2. <h1> Exemplu de antet de pagină </h1>
  3. </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 :

  1. <ul class = "miniaturi" >
  2. <li class = "span3" >
  3. <a href = "#" class = "miniatură" >
  4. <img src = "https://placehold.it/260x180" alt = "" >
  5. </a>
  6. </li>
  7. ...
  8. </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>:

  1. <ul class = "miniaturi" >
  2. <li class = "span3" >
  3. <div class = "miniatură" >
  4. <img src = "https://placehold.it/260x180" alt = "" >
  5. <h5> Etichetă miniatură </h5>
  6. <p> Legendă în miniatură chiar aici... </p>
  7. </div>
  8. </li>
  9. ...
  10. </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.

Valori implicite ușoare

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

Avertizare! Cel mai bine verifică-te, nu arăți prea bine.
  1. <div class = "alertă" >
  2. <button class = "close" data-dismiss = "alert" > × </button>
  3. <strong> Atenție! </strong> Cel mai bine verifică-te, nu arăți prea bine.
  4. </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.

Avertizare!

Cel mai bine verifică-te, nu arăți prea bine. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

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

Alternative contextuale Adăugați clase opționale pentru a schimba conotația unei alerte

Eroare sau pericol

O, snap! Schimbați câteva lucruri și încercați să trimiteți din nou.
  1. <div class = "alert alert-error" >
  2. ...
  3. </div>

Succes

Bine făcut! Ați citit cu succes acest mesaj de alertă important.
  1. <div class = "alerta alertă-succes" >
  2. ...
  3. </div>

informație

Atenție! Această alertă necesită atenția dvs., dar nu este super importantă.
  1. <div class = "alert alert-info" >
  2. ...
  3. </div>

Exemple și markup

De bază

Bară de progres implicită cu un gradient vertical.

  1. <div class = "progres" >
  2. <div class = "bar"
  3. stil = " lățime : 60 %; " ></div>
  4. </div>

In dungi

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

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

Animat

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

  1. <div class = „progres progres-striped
  2. activ" >
  3. <div class = "bar"
  4. stil = " lățime : 40 %; " ></div>
  5. </div>

Opțiuni și suport pentru browser

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.

Uite, sunt într-o fântână!
  1. <div class = "bine" >
  2. ...
  3. </div>

Închide pictograma

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

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

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

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