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.

De asemenea, puteți combina seturi de <div class="btn-group">într-un <div class="btn-toolbar">pentru proiecte mai complexe.

Exemplu de marcare

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

<div class = "btn-group" > 
  <a class = "btn" href = "#" > 1 </a>  
  <a class = "btn" href = "#" > 2 </a>  
  <a class = "btn" href = "#" > 3 </a>  
</div>

Și cu o bară de instrumente pentru mai multe grupuri:

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

Atenție

CSS pentru grupurile de butoane este într-un fișier separat, button-groups.less.

Butoane derulante

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

Butoane derulante împărțite

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.

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" > 
  <a class = "btn" href = "#" > Acțiune </a>  
  <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >   
    <span class = "caret" ></span> 
  </a>
  <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ă.

De ce tablete și pastile

Filele și pastilele din Bootstrap sunt construite pe <ul>o listă de link-uri cu același HTML de bază. Schimbați între comprimate sau pastile doar cu o clasă.

Ambele opțiuni sunt excelente pentru sub-secțiuni de conținut sau pentru navigarea între paginile de conținut similar.

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ă
• Profil
• Scapă jos
  • Acțiune
  • O altă acțiune
  • Altceva aici
  • Link separat

<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ă
• Profil
• Scapă jos
  • Acțiune
  • O altă acțiune
  • Altceva aici
  • Link separat

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

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.

Exemplu tabulabil

Pentru a face filele tabulabile, înfășurați-l .nav-tabsîntr-un alt div cu class .tabbable.

Plugin jQuery personalizat

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 →

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

Pentru a fixa bara de navigare în partea de sus a ferestrei de vizualizare, adăugați .navbar-fixed-topla div-ul cel mai exterior, .navbar. În CSS-ul dvs., va trebui, de asemenea, să luați în considerare suprapunerea pe care o provoacă adăugând padding-top: 40px;la <body>.

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

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>

Formular de căutare

Formularele de căutare primesc stiluri personalizate în bara de navigare cu .navbar-searchclasa. Includeți .pull-leftsau .pull-rightpe formpentru a-l alinia.

<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-colaps" > 
        <!-- .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>

Adăugarea meniurilor derulante

Adăugarea meniurilor derulante 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 →

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 = "activ" > 
    <a href = "#" > Date </a> 
  </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 markup ușor și stiluri chiar mai ușoare. Este grozav pentru site-uri simple, cum ar fi bloguri sau reviste.

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>

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 utilizează 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, ci doar <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ă" > 
  <a class = "close" > × </a> 
  <strong> Atenție! </strong> Cel mai bine verifică-te, nu arăți prea bine.
</div>

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" > × </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 de dungi.

<div class = "progres progres-informații 
     cu dungi de progres" >
  <div class = "bar" 
       stil = " lățime : 20 %; " ></div> 
</div>

Animat

Ia exemplul cu dungi și îl animă.

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

Culori suplimentare

Barele de progres utilizează unele dintre aceleași nume de clasă ca butoane și alerte pentru stil similar.

• .progress-info
• .progress-success
• .progress-danger

Alternativ, puteți personaliza fișierele LESS și puteți rula propriile culori și dimensiuni.

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-8 sau în versiunile mai vechi de Firefox.

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

Ecusoane

Utilizați o insignă pe un element pentru un număr necitit sau ca un simplu indicator.

<span class = "insignă" > 3 </div> 

Închide pictograma

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

×

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