Exemplu

Meniu contextual care poate fi comutat pentru afișarea listelor de linkuri. Făcut interactiv cu pluginul JavaScript derulant .

<ul class = "dropdown-menu" role = "meniu" aria-labelledby = "dropdownMenu" >   
  <li><a tabindex = "-1" href = "#" > Acțiune </a></li>  
  <li><a tabindex = "-1" href = "#" > O altă acțiune </a></li>  
  <li><a tabindex = "-1" href = "#" > Altceva aici </a></li>  
  <li class = "divider" ></li> 
  <li><a tabindex = "-1" href = "#" > Link separat </a></li>  
</ul>

Markup

Privind doar meniul drop-down, aici este HTML-ul necesar. Trebuie să includeți declanșatorul meniului drop-down și meniul drop-down în .dropdown, sau alt element care declară position: relative;. Apoi creați doar meniul.

<div class = „menu derulant” > 
  <!-- Link sau buton pentru a comuta în meniul drop-down -->
  <ul class = "dropdown-menu" role = "meniu" aria-labelledby = "dLabel" >   
    <li><a tabindex = "-1" href = "#" > Acțiune </a></li>  
    <li><a tabindex = "-1" href = "#" > O altă acțiune </a></li>  
    <li><a tabindex = "-1" href = "#" > Altceva aici </a></li>  
    <li class = "divider" ></li> 
    <li><a tabindex = "-1" href = "#" > Link separat </a></li>  
  </ul>
</div>

Opțiuni

Aliniați meniurile la dreapta și adăugați include niveluri suplimentare de meniuri derulante.

Alinierea meniurilor

Adăugați .pull-rightla .dropdown-menua aliniați la dreapta meniul drop-down.

<ul class = "meniu dropdown pull-right" rol = "meniu" aria-labelledby = "dLabel" >   
  ...
</ul>

Submeniuri în meniuri derulante

Adăugați un nivel suplimentar de meniuri drop-down, care apar la trecerea cursorului ca cele ale OS X, cu câteva adăugiri simple de marcare. Adăugați .dropdown-submenula oricare lidintr-un meniu derulant existent pentru stilare automată.

<ul class = "dropdown-menu" role = "meniu" aria-labelledby = "dLabel" >   
  ...
  <li class = "submeniu dropdown" > 
    <a tabindex = "-1" href = "#" > Mai multe opțiuni </a>  
    <ul class = "meniu derulant" > 
      ...
    </ul>
  </li>
</ul>

Exemple

Două opțiuni de bază, împreună cu două variante mai specifice.

Grup cu un singur buton

Înfășurați o serie de nasturi cu .btnîn .btn-group.

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

Mai multe grupuri de butoane

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>

Grupuri de butoane verticale

Faceți ca un set de butoane să apară stivuite pe verticală și nu pe orizontală.

<div class = "btn-group btn-group-vertical" > 
  ...
</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.

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.

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

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.

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

Dimensiuni

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

<div class = "btn-group" > 
  <button class = "btn btn-mini" > Acțiune </button> 
  <button class = "btn btn-mini 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>

Valori implicite ușoare Același marcaj, clase diferite

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

File de bază

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

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

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

Stare dezactivată

Pentru orice componentă de navigare (file, pastile sau listă), adăugați link- .disableduri gri și fără efecte de trecere . Linkurile vor rămâne totuși pe care se poate face clic, cu excepția cazului în care eliminați hrefatributul. Alternativ, puteți implementa JavaScript personalizat pentru a preveni aceste clicuri.

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

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

Stivuibil

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

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

Pastile stivuite

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

Mențiuni derulante

Adăugați meniuri derulante cu puțin HTML suplimentar și pluginul JavaScript pentru meniuri derulante .

File cu meniuri derulante

<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

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

Liste de navigare

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.

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" > Antet listă </li> 
  <li class = "active" ><a href = "#" > Acasă </a></li>  
  <li><a href = "#" > Bibliotecă </a></li> 
  ...
</ul>

NotăPentru imbricare într-o listă de navigare, includeți class="nav nav-list"în orice imbricat <ul>.

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>

Navigare tabulabilă

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.

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.

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

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 .

Tabulabil în orice direcție

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>

Bara de navigare de bază

Pentru început, barele de navigare sunt statice (nu sunt fixate în partea de sus) și includ suport pentru numele unui proiect și navigare de bază. Plasați unul oriunde în cadrul unui .container, care stabilește lățimea site-ului și conținutul dvs.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <a class = "brand" href = "#" > Titlu </a>  
    <ul class = "nav" > 
      <li class = "active" ><a href = "#" > Acasă </a></li>  
      <li><a href = "#" > Link </a></li> 
      <li><a href = "#" > Link </a></li> 
    </ul>
  </div>
</div>

Componentele Navbar

Marca

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

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

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>

Forme

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" >  
  <button type = "submit" class = "btn" > Trimiteți </button>  
</form>

Formular de căutare

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>

Alinierea componentelor

Aliniați linkurile de navigare, formularul de căutare sau textul, utilizați clasele .pull-leftsau utilitare. .pull-rightAmbele clase vor adăuga un float CSS în direcția specificată.

Folosind meniuri derulante

Adăugați meniuri derulante și drop-up la navigare cu un pic de marcare și plugin-ul JavaScript pentru meniuri derulante .

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

Vizitați documentația cu mențiunile derulante JavaScript pentru mai multe informații și informații despre apelarea meniurilor derulante.

Text

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

Variante opționale de afișare

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.

Fixat în partea de sus

Adăugați .navbar-fixed-topși nu uitați să luați în considerare zona ascunsă de sub ea adăugând cel puțin 40 de pixeli paddingla <body>. Asigurați-vă că adăugați acest lucru după CSS-ul de bază Bootstrap și înainte de CSS-ul opțional receptiv.

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

Fixat de jos

Adăugați .navbar-fixed-bottomîn schimb.

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

Bară de navigare superioară statică

Creați o bară de navigare cu lățime completă care se derulează cu pagina prin adăugarea .navbar-static-top. Spre deosebire de .navbar-fixed-topclasă, nu trebuie să modificați nicio umplutură pe body.

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

Bara de navigare receptivă

Pentru a implementa o bară de navigare receptivă care se restrânge, împachetați conținutul barei 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 collapse" > 
        <!-- .nav, .navbar-search, .navbar-form etc -->
      </div>
 
    </div>
  </div>
</div>

Variație inversată

Modificați aspectul barei de navigare adăugând .navbar-inverse.

<div class = "navbar navbar-inverse" > 
  ...
</div>

Exemple

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

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

Paginare standard

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

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

Opțiuni

Stări dezactivate și active

Linkurile sunt personalizabile pentru diferite circumstanțe. Utilizați .disabledpentru link-uri care nu se pot face clic și .activepentru a indica pagina curentă.

<div class = "paginare" > 
  <ul>
    <li class = "disabled" ><a href = "#" > Anterior </a></li>  
    <li class = "active" ><a href = "#" > 1 </a></li>  
    ...
  </ul>
</div>

Puteți schimba opțional ancorele active sau dezactivate pentru intervale pentru a elimina funcționalitatea de clic, păstrând în același timp stilurile dorite.

<div class = "paginare" > 
  <ul>
    <li class = "disabled" ><span> Anterior </span></li> 
    <li class = "activ" ><span> 1 </span></li> 
    ...
  </ul>
</div>

Dimensiuni

Vrei o paginare mai mare sau mai mică? Adăugați .pagination-large, .pagination-small, sau .pagination-minipentru dimensiuni suplimentare.

<div class = "pagination pagination-large" > 
  <ul>
    ...
  </ul>
</div>
<div class = "paginare" > 
  <ul>
    ...
  </ul>
</div>
<div class = "pagination pagination-small" > 
  <ul>
    ...
  </ul>
</div>
<div class = "pagination pagination-mini" > 
  <ul>
    ...
  </ul>
</div>

Aliniere

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

<div class = "paginare centrată pe paginație" > 
  ...
</div>

<div class = "pagination pagination-right" > 
  ...
</div>

Pager

Link-uri anterioare și următoare rapide pentru implementări simple de paginare cu markup și stiluri ușoare. Este grozav pentru site-uri simple, cum ar fi bloguri sau reviste.

Exemplu implicit

În mod implicit, paginatorul centrează linkurile.

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

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

Stare opțională dezactivată

Link-urile pager folosesc, de asemenea, .disabledclasa de utilitate generală din paginare.

<ul class = "pager" > 
  <li class = "dezactivat anterior" > 
    <a href = "#" > ← Mai vechi </a> 
  </li>
  ...
</ul>

Etichete

Ecusoane

Unitatea de erou

O componentă ușoară și flexibilă pentru a prezenta conținut cheie pe site-ul dvs. Funcționează bine pe site-uri de marketing și cu conținut ridicat.

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

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

<div class = "page-header" > 
  <h1> Exemplu de antet de pagină <small> Subtext pentru antet </small></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.

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.

Markup

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 = "span4" > 
    <a href = "#" class = "miniatură" >  
      <img src = "https://placehold.it/300x200" 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 = "span4" > 
    <div class = "miniatură" > 
      <img src = "https://placehold.it/300x200" alt = "" >  
      <h3> Etichetă miniatură </h3>
      <p> Legendă în miniatură... </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.

Alertă implicită

Închideți orice text și un buton opțional de respingere .alertpentru un mesaj de avertizare de bază.

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

Butoanele de respingere

Browserele Mobile Safari și Mobile Opera, pe lângă data-dismiss="alert"atribut, necesită un href="#"pentru eliminarea alertelor atunci când se utilizează o <a>etichetă.

<a href = "#" class = "close" data-dismiss = "alert" > × </a>   

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

<button type = "button" class = "close" data-dismiss = "alert" > × </button>   

Închideți alertele prin JavaScript

Utilizați pluginul alerts jQuery pentru eliminarea rapidă și ușoară a alertelor.

Opțiuni

Pentru mesaje mai lungi, măriți umplutura în partea de sus și de jos a pachetului de alerte adăugând .alert-block.

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

Alternative contextuale

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

Eroare sau pericol

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

Succes

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

informație

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

Exemple și markup

De bază

Bară de progres implicită cu un gradient vertical.

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

In dungi

Utilizează un gradient pentru a crea un efect de dungi. Nu este disponibil în IE7-8.

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

Animat

Adăugați .activela .progress-stripedpentru a anima dungile de la dreapta la stânga. Nu este disponibil în toate versiunile de IE.

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

Stivuite

Puneți mai multe bare în același .progresspentru a le stivui.

<div class = "progres" > 
  <div class = "bar bar-success" style = " lățime : 35 %; " ></div>   
  <div class = "bar bar-warning" style = " lățime : 20 %; " ></div>   
  <div class = "bar bar-danger" style = " lățime : 10 %; " ></div>   
</div>

Opțiuni

Culori suplimentare

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

<div class = "progres progres-informații" > 
  <div class = "bar" style = " lățime : 20 % " ></div>   
</div>
<div class = "progres progres-succes" > 
  <div class = "bar" style = " lățime : 40 % " ></div>   
</div>
<div class = "progres progres-avertisment" > 
  <div class = "bar" style = " lățime : 60 % " ></div>   
</div>
<div class = "progres progres-pericol" > 
  <div class = "bar" style = " lățime : 80 % " ></div>   
</div>

Bare cu dungi

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

<div class = "progres progres-informații progres-striped" > 
  <div class = "bar" style = " lățime : 20 % " ></div>   
</div>
<div class = "progres progres-succes progres-striped" > 
  <div class = "bar" style = " lățime : 40 % " ></div>   
</div>
<div class = "progres progres-avertisment progres-striped" > 
  <div class = "bar" style = " lățime : 60 % " ></div>   
</div>
<div class = "progres progres-pericol progres-striped" > 
  <div class = "bar" style = " lățime : 80 % " ></div>   
</div>

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.

Versiunile anterioare Internet Explorer 10 și Opera 12 nu acceptă animații.

Stiluri abstracte de obiecte pentru construirea diferitelor tipuri de componente (cum ar fi comentarii pe blog, Tweeturi etc.) care prezintă o imagine aliniată la stânga sau la dreapta alături de conținut textual.

Exemplu implicit

Media implicită permite flotarea unui obiect media (imagini, video, audio) la stânga sau la dreapta unui bloc de conținut.

Titlu media

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Titlu media

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Titlu media

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

<div class = "media" > 
  <a class = "pull-left" href = "#" >  
    <img class = "media-object" src = "https://placehold.it/64x64" >  
  </a>
  <div class = "media-body" > 
    <h4 class = "media-heading" > Titlu media </h4> 
    ...
 
    <!-- Obiect media imbricat -->
    <div class = "media" > 
      ...
    </div>
  </div>
</div>

Lista media

Cu un pic de markup suplimentar, puteți utiliza media din lista (utilă pentru firele de comentarii sau listele de articole).

<ul class = "lista-media" > 
  <li class = "media" > 
    <a class = "pull-left" href = "#" >  
      <img class = "media-object" src = "https://placehold.it/64x64" >  
    </a>
    <div class = "media-body" > 
      <h4 class = "media-heading" > Titlu media </h4> 
      ...
 
      <!-- Obiect media imbricat -->
      <div class = "media" > 
        ...
     </div>
    </div>
  </li>
</ul>

Wells

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

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

Clase optionale

Controlați umplutura și colțurile rotunjite cu două clase de modificatori opționale.

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

<div class = „bine bine-mic” > 
  ...
</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ă preferați să utilizați o ancoră.

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

Cursuri de ajutor

Cursuri simple și concentrate pentru mici modificări de afișare sau comportament.

.trage-stânga

Plutește un element la stânga

clasa = "trage-stânga"

. trage - stânga {
  plutire : stânga ;
}

.trage-dreapta

Plutește un element la dreapta

clasa = "trage-dreapta"

. trage - dreapta {
  plutire : dreapta ;
}

.dezactivat

Schimbați culoarea unui element în#999

clasa = "dezactivat"

. dezactivat {
  culoare : #999; 
}

.clearfix

Ștergeți floatpe orice element

clasa = "clearfix"

. clearfix {
  * zoom : 1 ; 
  &: înainte de ,
  &: după {
    afisare : tabel ;
    continut : "" ; 
  }
  &: după {
    clar : ambele ;
  }
}