Titluri

<h1>Toate titlurile HTML <h6>sunt disponibile.

h1. Titlul 1

h2. Titlul 2

h3. Titlul 3

h4. Titlul 4

h5. Titlul 5

h6. Titlul 6

Copie a corpului

Valoarea implicită globală a Bootstrap font-sizeeste 14px , cu o dimensiune line-heightde 20px . Acest lucru se aplică <body>tuturor paragrafelor. În plus, <p>(paragrafele) primesc o marjă inferioară de jumătate din înălțimea liniei lor (10px în mod implicit).

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

<p> ... </p>

Copia corpului principal

Faceți un paragraf în evidență adăugând .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

<p class = „lead” > ... </p>

Construit cu Mai puțin

Scara tipografică se bazează pe două variabile LESS în variabile.less : @baseFontSizeși @baseLineHeight. Prima este dimensiunea fontului de bază folosită pe tot parcursul, iar a doua este înălțimea liniei de bază. Folosim acele variabile și câteva calcule simple pentru a crea marginile, umpluturile și înălțimile liniilor de toate tipurile noastre și altele. Personalizează-le și Bootstrap se adaptează.

Accent

Utilizați etichetele de accentuare implicite ale HTML cu stiluri ușoare.

`<small>`

Pentru a desublinia inline sau blocuri de text, utilizați eticheta mică.

Această linie de text este menită să fie tratată ca litere mici.

<p> <small> Această linie de text este menită să fie tratată ca litere mici. </small> </p>

Îndrăzneţ

Pentru a sublinia un fragment de text cu o greutate mai mare a fontului.

Următorul fragment de text este redat ca text aldine .

<strong> redat ca text aldine </strong>

Cursive

Pentru sublinierea unui fragment de text cu caractere cursive.

Următorul fragment de text este redat ca text cu caractere italice .

<em> redat ca text italic </em>

Atenție!Simțiți-vă liber să utilizați <b>și <i>în HTML5. <b>este menit să evidențieze cuvinte sau expresii fără a transmite o importanță suplimentară, în timp ce <i>este mai ales pentru voce, termeni tehnici etc.

Clasele de aliniere

Realliniați cu ușurință textul la componente cu clase de aliniere a textului.

Text aliniat la stânga.

Text aliniat la centru.

Text aliniat la dreapta.

<p class = "text-left" > Text aliniat la stânga. </p> 
<p class = "text-center" > Text aliniat la centru. </p> 
<p class = "text-right" > Text aliniat la dreapta. </p>

Clasele de accentuare

Transmite semnificația prin culoare cu o mână de clase de utilitate de accent.

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

<p class = "muted" > Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh. </p> 
<p class = "text-warning" > Etiam porta sem malesuada magna mollis euismod. </p> 
<p class = "text-error" > Donec ullamcorper nulla non metus auctor fringilla. </p> 
<p class = "text-info" > Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis. </p> 
<p class = "text-success" > Duis mollis, est non commodo luctus, nisi erat porttitor ligula. </p>

Abrevieri

Implementare stilizată a <abbr>elementului HTML pentru abrevieri și acronime pentru a afișa versiunea extinsă la trecerea cursorului. Abrevierile cu un titleatribut au un chenar de jos punctat ușor și un cursor de ajutor la trecerea cu mouse-ul, oferind context suplimentar la trecerea cu mouse-ul.

`<abbr>`

Pentru textul extins la trecerea cu mouse-ul lung a unei abrevieri, includeți titleatributul.

O abreviere a cuvântului atribut este attr .

<abbr title = "atribut" > attr </abbr>

`<abbr class="initialism">`

Adaugă .initialismla o abreviere pentru o dimensiune puțin mai mică a fontului.

HTML este cel mai bun lucru de la feliile de pâine.

<abbr title = "HyperText Markup Language" class = "initialism" > HTML </abbr>

Adrese

Prezentați informații de contact pentru cel mai apropiat strămoș sau pentru întregul corp de lucru.

`<address>`

Păstrați formatarea terminând toate liniile cu <br>.

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890

Nume complet
[email protected]

<adresa>
  <strong> Twitter, Inc. </strong><br>
  795 Folsom Ave, Suite 600 <br>
  San Francisco, CA 94107 <br>
  <abbr title = „Telefon” > P: </abbr> (123) 456-7890 
</adresă>
 
<adresa>
  <strong> Nume complet </strong><br>
  <a href = "mailto:#" > [email protected] </a> 
</adresă>

Citate bloc

Pentru a cita blocuri de conținut dintr-o altă sursă în documentul dvs.

Citat bloc implicit

Înfășurați <blockquote>orice HTML ca citat. Pentru citate drepte vă recomandăm un <p>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

<blockquote>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. </p>
</blockquote>

Opțiuni pentru citate blocate

Schimbări de stil și conținut pentru variații simple ale unui cota standard standard.

Denumirea unei surse

Adăugați <small>etichetă pentru identificarea sursei. Înveliți numele lucrării sursă în <cite>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Cineva faimos în Source Title

<blockquote>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. </p>
  <small> Cineva celebru <cite title = "Source Title" > Source Title </cite></small> 
</blockquote>

Afișări alternative

Utilizați .pull-rightpentru o citată bloc flotată, aliniată la dreapta.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Cineva faimos în Source Title

<blockquote class = „trage-dreapta” > 
  ...
</blockquote>

Liste

Neordonat

O listă de articole în care ordinea nu contează în mod explicit.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

<ul>
  <li> ... </li>
</ul>

Ordonat

O listă de articole în care ordinea contează în mod explicit.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

<ol>
  <li> ... </li>
</ol>

Nestilat

Eliminați list-styleumplutura implicită și din stânga pentru elementele din listă (doar copiii imediati).

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

<ul class = „unstyled” > 
  <li> ... </li>
</ul>

In linie

Așezați toate elementele din listă pe o singură linie cu inline-blocko ușoară umplutură.

Lorem ipsum
Phasellus iaculis
Nulla volutpat

<ul class = "inline" > 
  <li> ... </li>
</ul>

Descriere

O listă de termeni cu descrierile asociate acestora.

Liste de descriere: O listă de descriere este perfectă pentru definirea termenilor.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.; Donec id elit non mi porta gravida at eget metus.
Malesuada porta: Etiam porta sem malesuada magna mollis euismod.

<dl>
  <dt> ... </dt>
  <dd> ... </dd>
</dl>

Descriere orizontală

Faceți termeni și descrieri <dl>aliniați unul lângă altul.

Liste de descriere: O listă de descriere este perfectă pentru definirea termenilor.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.; Donec id elit non mi porta gravida at eget metus.
Malesuada porta: Etiam porta sem malesuada magna mollis euismod.
Felis euismod semper eget lacinia: Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

<dl class = "dl-horizontal" > 
  <dt> ... </dt>
  <dd> ... </dd>
</dl>

Atenție!Listele de descriere orizontale vor trunchia termenii care sunt prea lungi pentru a se potrivi în corecția coloanei din stânga text-overflow. În ferestrele de vizualizare mai înguste, acestea se vor schimba la aspectul implicit stivuit.

In linie

Înfășurați fragmente de cod inline cu <code>.

De exemplu, <section>ar trebui să fie înfășurat ca inline.

De exemplu , <cod> & lt ; secțiunea & gt ;</ code > ar trebui să fie înfășurată ca inline .

Bloc de bază

Utilizați <pre>pentru mai multe linii de cod. Asigurați-vă că scăpați de orice paranteze unghiulare din cod pentru o randare corectă.

<p>Exemplu de text aici...</p>

<pre>
  <p>Exemplu de text aici...</p>
</pre>

Atenție!Asigurați-vă că păstrați codul în <pre>etichete cât mai aproape de stânga posibil; va reda toate filele.

Puteți adăuga opțional .pre-scrollableclasa care va seta o înălțime maximă de 350 px și va oferi o bară de derulare pe axa y.

Stiluri implicite

Pentru stilul de bază - căptușeală ușoară și numai separatoare orizontale - adăugați clasa de bază .tablela orice <table>.

#	Nume	Numele de familie	Nume de utilizator
1	marcă	Otto	@mdo
2	Iacov	Thornton	@gras
3	Larry	Pasarea	@stare de nervozitate

< clasa tabel = „tabel” > 
  …
</tabel>

Clase optionale

Adăugați oricare dintre următoarele clase la .tableclasa de bază.

`.table-striped`

Adaugă zebra-striping oricărui rând din tabel <tbody>prin :nth-childselectorul CSS (nu este disponibil în IE7-8).

#	Nume	Numele de familie	Nume de utilizator
1	marcă	Otto	@mdo
2	Iacov	Thornton	@gras
3	Larry	Pasarea	@stare de nervozitate

<table class = "table table-striped" > 
  …
</tabel>

`.table-bordered`

Adăugați margini și colțuri rotunjite la masă.

#	Nume	Numele de familie	Nume de utilizator
1	marcă	Otto	@mdo
1	marcă	Otto	@getbootstrap
2	Iacov	Thornton	@gras
3	Larry pasărea		@stare de nervozitate

<table class = "table table-bordered" > 
  …
</tabel>

`.table-hover`

Activați o stare de trecere cu mouse-ul pe rândurile de tabel dintr-un <tbody>.

#	Nume	Numele de familie	Nume de utilizator
1	marcă	Otto	@mdo
2	Iacov	Thornton	@gras
3	Larry pasărea		@stare de nervozitate

<table class = "table table-hover" > 
  …
</tabel>

`.table-condensed`

Face mesele mai compacte prin tăierea celulelor în jumătate.

#	Nume	Numele de familie	Nume de utilizator
1	marcă	Otto	@mdo
2	Iacov	Thornton	@gras
3	Larry pasărea		@stare de nervozitate

<table class = "table table-condensed" > 
  …
</tabel>

Clase de rânduri opționale

Utilizați clase contextuale pentru a colora rândurile din tabel.

Clasă	Descriere
`.success`	Indică o acțiune reușită sau pozitivă.
`.error`	Indică o acțiune periculoasă sau potențial negativă.
`.warning`	Indică un avertisment care ar putea necesita atenție.
`.info`	Folosit ca alternativă la stilurile implicite.

#	Produs	Plata luată	stare
1	TB - Lunar	01/04/2012	Aprobat
2	TB - Lunar	02/04/2012	A refuzat
3	TB - Lunar	03/04/2012	In asteptarea
4	TB - Lunar	04.04.2012	Sună pentru a confirma

...
  < tr class = "succes" >
    <td> 1 < /td>
    <td>TB - Lunar</ td >
    <td> 01 / 04 / 2012 < /td>
    <td>Aprobat</ td >
  </ tr >
...

Markup acceptat pentru tabel

Lista elementelor HTML de tabel acceptate și cum ar trebui utilizate.

Etichetă	Descriere
`<table>`	Element de împachetare pentru afișarea datelor în format tabelar
`<thead>`	Element container pentru rândurile antetului tabelului ( `<tr>`) pentru a eticheta coloanele din tabel
`<tbody>`	Element container pentru rândurile de tabel ( `<tr>`) din corpul tabelului
`<tr>`	Element container pentru un set de celule de tabel ( `<td>`sau `<th>`) care apare pe un singur rând
`<td>`	Celula implicită de tabel
`<th>`	Celulă specială de tabel pentru etichetele de coloană (sau rând, în funcție de domeniul de aplicare și de plasare).
`<caption>`	Descriere sau rezumat a ceea ce conține tabelul, util în special pentru cititorii de ecran

<tabel>
  <caption> ... </caption>
  <cap>
    <tr>
      <th> ... </th>
      <th> ... </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td> ... </td>
      <td> ... </td>
    </tr>
  </tbody>
</tabel>

Stiluri implicite

Controalele individuale ale formularelor primesc stil, dar fără nicio clasă de bază necesară <form>sau modificări mari ale marcajului. Rezultă etichete stivuite, aliniate la stânga deasupra controalelor de formular.

<form>
  <set de câmpuri>
    <legendă> Legendă </legendă>
    <label> Numele etichetei </label>
    <input type = "text" placeholder = "Tastați ceva..." >  
    <span class = "help-block" > Exemplu de text de ajutor la nivel de bloc aici. </span> 
    <label class = „căsuță de selectare” > 
      <input type = "checkbox" > Verificați-mă 
    </label>
    <button type = "submit" class = "btn" > Trimiteți </button>  
  </fieldset>
</form>

Aspecte opționale

Cu Bootstrap sunt incluse trei forme de formulare opționale pentru cazuri de utilizare obișnuite.

Formular de căutare

Adăugați .form-searchla formular și .search-queryla <input>pentru o introducere de text extra-rotunjită.

<form class = "form-search" > 
  < tip de intrare = „text” class = „interogare de căutare-mediu de intrare” >  
  <button type = "submit" class = "btn" > Căutare </button>  
</form>

Formular inline

Adăugați .form-inlinepentru etichete aliniate la stânga și comenzi pentru blocuri inline pentru un aspect compact.

<form class = "form-inline" > 
  <input type = "text" class = "input-small" substituent = "E-mail" >   
  <input type = "parolă" class = "input-small" placeholder = "Parolă" >   
  <label class = „căsuță de selectare” > 
    <input type = "checkbox" > Ține-mă minte 
  </label>
  <button type = "submit" class = "btn" > Conectați-vă </button>  
</form>

Forma orizontală

Aliniați etichetele la dreapta și mutați-le spre stânga pentru a le face să apară pe aceeași linie cu controalele. Necesită cele mai multe modificări de markup dintr-un formular implicit:

Adăugați .form-horizontalla formular
Înfășurați etichetele și comenzile.control-group
Adăugați .control-labella etichetă
Înfășurați toate controalele asociate .controlspentru o aliniere adecvată

<form class = "form-horizontal" > 
  <div class = "grup de control" > 
    <label class = "control-label" for = "inputEmail" > E-mail </label>  
    <div class = "controale" > 
      <input type = "text" id = "inputEmail" placeholder = "E-mail" >   
    </div>
  </div>
  <div class = "grup de control" > 
    <label class = "control-label" for = "inputPassword" > Parolă </label>  
    <div class = "controale" > 
      <input type = "parolă" id = "inputPassword" placeholder = "Parolă" >   
    </div>
  </div>
  <div class = "grup de control" > 
    <div class = "controale" > 
      <label class = „căsuță de selectare” > 
        <input type = "checkbox" > Ține-mă minte 
      </label>
      <button type = "submit" class = "btn" > Conectați-vă </button>  
    </div>
  </div>
</form>

Controale de formular acceptate

Exemple de controale de formular standard acceptate într-un exemplu de aspect de formular.

Intrări

Cel mai comun control al formularelor, câmpuri de introducere bazate pe text. Include suport pentru toate tipurile de HTML5: text, parolă, datetime, datetime-local, dată, lună, oră, săptămână, număr, e-mail, url, căutare, tel și culoare.

Necesită utilizarea unui specificat typeîn orice moment.

<input type = "text" placeholder = "Text input" >

Textarea

Controlul formularelor care acceptă mai multe linii de text. Schimbați rowsatributul după cum este necesar.

<textarea rows = "3" ></textarea>

Casete de selectare și radiouri

Casetele de selectare sunt pentru a selecta una sau mai multe opțiuni dintr-o listă, în timp ce radiourile sunt pentru a selecta o opțiune din mai multe.

Implicit (stivuit)

<label class = „căsuță de selectare” > 
  <input type = "checkbox" value = "" >  
  Opțiunea unu este aceasta și aceea - asigurați-vă că includeți de ce este grozav
</label>
 
<label class = "radio" > 
  <input type = "radio" name = "optionsRadios" id = "optionsRadios1" value = "option1" bifat >     
  Opțiunea unu este aceasta și aceea - asigurați-vă că includeți de ce este grozav
</label>
<label class = "radio" > 
  <input type = "radio" name = "optionsRadios" id = "optionsRadios2" value = "option2" >    
  Opțiunea a doua poate fi altceva și selectarea acesteia va deselecta opțiunea unu
</label>

Casete de selectare în linie

Adăugați .inlineclasa la o serie de casete de selectare sau radiouri pentru controale care apar pe aceeași linie.

<label class = "caseta de selectare inline" > 
  <input type = "checkbox" id = "inlineCheckbox1" value = "option1" > 1   
</label>
<label class = "caseta de selectare inline" > 
  <input type = "checkbox" id = "inlineCheckbox2" value = "option2" > 2   
</label>
<label class = "caseta de selectare inline" > 
  <input type = "checkbox" id = "inlineCheckbox3" value = "option3" > 3   
</label>

Selectează

Utilizați opțiunea implicită sau specificați a multiple="multiple"pentru a afișa mai multe opțiuni simultan.

<selectați>
  <option> 1 </option>
  <option> 2 </option>
  <option> 3 </option>
  <opțiune> 4 </opțiune>
  <opțiune> 5 </opțiune>
</select>
 
<select multiple = „multiple” > 
  <option> 1 </option>
  <option> 2 </option>
  <option> 3 </option>
  <opțiune> 4 </opțiune>
  <opțiune> 5 </opțiune>
</select>

Extinderea controalelor de formular

Adăugând pe deasupra controalelor existente ale browserului, Bootstrap include și alte componente de formular utile.

Intrări anexate și anexate

Adăugați text sau butoane înainte sau după orice introducere bazată pe text. Rețineți că selectelementele nu sunt acceptate aici.

Opțiuni implicite

Încadrați un .add-onși un inputcu una dintre cele două clase pentru a adăuga sau a adăuga text la o intrare.

<div class = "input-prepend" > 
  <span class = "supliment" > @ </span> 
  <input class = "span2" id = "prependedInput" type = "text" substituent = "Username" >    
</div>
<div class = "input-append" > 
  <input class = "span2" id = "appendedInput" type = "text" >   
  <span class = "add-on" > .00 </span> 
</div>

Combinate

Folosiți ambele clase și două instanțe de .add-onpentru a adăuga și a adăuga o intrare.

<div class = "input-prepend input-append" > 
  <span class = "add-on" > $ </span> 
  <input class = "span2" id = "appendedPrependedInput" type = "text" >   
  <span class = "add-on" > .00 </span> 
</div>

Butoane în loc de text

În loc de a <span>cu text, utilizați a .btnpentru a atașa un buton (sau două) la o intrare.

<div class = "input-append" > 
  <input class = "span2" id = "appendedInputButton" type = "text" >   
  <button class = "btn" type = "button" > Du-te! </button>  
</div>

<div class = "input-append" > 
  <input class = "span2" id = "appendedInputButtons" type = "text" >   
  <button class = "btn" type = "button" > Căutați </button>  
  <button class = "btn" type = "button" > Opțiuni </button>  
</div>

Butoane derulante

<div class = "input-append" > 
  <input class = "span2" id = "appendedDropdownButton" type = "text" >   
  <div class = "btn-group" > 
    <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
      Acțiune
      <span class = "caret" ></span> 
    </button>
    <ul class = "meniu derulant" > 
      ...
    </ul>
  </div>
</div>

<div class = "input-prepend" > 
  <div class = "btn-group" > 
    <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
      Acțiune
      <span class = "caret" ></span> 
    </button>
    <ul class = "meniu derulant" > 
      ...
    </ul>
  </div>
  <input class = "span2" id = "prependedDropdownButton" type = "text" >   
</div>

<div class = "input-prepend input-append" > 
  <div class = "btn-group" > 
    <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
      Acțiune
      <span class = "caret" ></span> 
    </button>
    <ul class = "meniu derulant" > 
      ...
    </ul>
  </div>
  <input class = "span2" id = "appendedPrependedDropdownButton" type = "text" >   
  <div class = "btn-group" > 
    <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
      Acțiune
      <span class = "caret" ></span> 
    </button>
    <ul class = "meniu derulant" > 
      ...
    </ul>
  </div>
</div>

Grupuri derulante segmentate

<form>
  <div class = "input-prepend" > 
    <div class = "btn-group" > ... </div> 
    < tip de intrare = „text” > 
  </div>
  <div class = "input-append" > 
    < tip de intrare = „text” > 
    <div class = "btn-group" > ... </div> 
  </div>
</form>

Formular de căutare

<form class = "form-search" > 
  <div class = "input-append" > 
    <input type = „text” class = „span2 search-query” >  
    <button type = "submit" class = "btn" > Căutare </button>  
  </div>
  <div class = "input-prepend" > 
    <button type = "submit" class = "btn" > Căutare </button>  
    <input type = „text” class = „span2 search-query” >  
  </div>
</form>

Control dimensionarea

Utilizați clase de dimensionare relativă, cum ar fi .input-largesau potriviți intrările cu dimensiunile coloanei de grilă folosind .span*clase.

Intrări la nivel de bloc

Faceți orice element <input>sau <textarea>element să se comporte ca un element la nivel de bloc.

<input class = "input-block-level" type = "text" substituent = ".input-block-level" >

Dimensiunea relativă

<input class = "input-mini" type = "text" substituent = ".input-mini" >   
<input class = "input-small" type = "text" substituent = ".input-small" >   
<input class = "input-medium" type = "text" substituent = ".input-medium" >   
<input class = "input-large" type = "text" placeholder = ".input-large" >   
<input class = "input-xlarge" type = "text" substituent = ".input-xlarge" >   
<input class = "input-xxlarge" type = "text" substituent = ".input-xxlarge" >

Atenție!În versiunile viitoare, vom modifica utilizarea acestor clase de intrare relative pentru a se potrivi cu dimensiunile butoanelor noastre. De exemplu, .input-largeva crește umplutura și dimensiunea fontului unei intrări.

Dimensiunea grilei

Utilizați .span1pentru .span12pentru intrări care se potrivesc cu aceleași dimensiuni ale coloanelor grilei.

<input class = "span1" type = "text" substituent = ".span1" >   
<input class = "span2" type = "text" substituent = ".span2" >   
<input class = "span3" type = "text" substituent = ".span3" >   
<select class = "span1" > 
  ...
</select>
<select class = "span2" > 
  ...
</select>
<select class = "span3" > 
  ...
</select>

Pentru mai multe intrări de grilă pe linie, utilizați .controls-rowclasa modificatoare pentru spațierea adecvată . Flotează intrările pentru a restrânge spațiile albe, setează marginile adecvate și șterge flotantul.

<div class = "controale" > 
  <input class = "span5" type = "text" substituent = ".span5" >   
</div>
<div class = "controls controls-row" > 
  <input class = "span4" type = "text" substituent = ".span4" >   
  <input class = "span1" type = "text" substituent = ".span1" >   
</div>
...

Intrări needitabile

Prezentați datele într-un formular care nu poate fi editat fără a utiliza marcarea reală a formularului.

<span class = "input-xlarge uneditable-input" > O valoare aici </span>

Formează acțiuni

Încheiați un formular cu un grup de acțiuni (butoane). Când sunt plasate într-un .form-actions, butoanele se vor indenta automat pentru a se alinia cu controalele formularului.

<div class = "form-actions" > 
  <button type = "submit" class = "btn btn-primary" > Salvați modificările </button>  
  <button type = "button" class = "btn" > Anulați </button>  
</div>

Text de ajutor

Suport în linie și la nivel de bloc pentru textul de ajutor care apare în jurul controalelor de formular.

Ajutor inline

<input type = "text" ><span class = "help-inline" > Text de ajutor inline </span>

Blocare ajutor

<input type = "text" ><span class = "help-block" > Un bloc mai lung de text de ajutor care se întrerupe într-o linie nouă și se poate extinde dincolo de o linie. </span>

Stări de control al formularului

Oferiți feedback utilizatorilor sau vizitatorilor cu stări de bază de feedback privind comenzile și etichetele formularelor.

Focalizare de intrare

Înlăturăm stilurile implicite de outlinepe unele controale de formular și aplicăm a box-shadowîn locul său pentru :focus.

<input class = "input-xlarge" id = "focusedInput" type = "text" value = "Acesta este focalizat..." >

Intrări nevalide

Introduceți stil prin funcționalitatea implicită a browserului cu :invalid. Specificați un type, adăugați requiredatributul dacă câmpul nu este opțional și (dacă este cazul) specificați un pattern.

Acest lucru nu este disponibil în versiunile de Internet Explorer 7-9 din cauza lipsei de suport pentru pseudoselectorii CSS.

<input class = "span3" type = "email" required >

Intrări dezactivate

Adăugați disabledatributul pe o intrare pentru a preveni intrarea utilizatorului și pentru a declanșa un aspect ușor diferit.

<input class = "input-xlarge" id = "disabledInput" type = "text" placeholder = "Intrare dezactivată aici..." dezactivată >

Stări de validare

Bootstrap include stiluri de validare pentru mesaje de eroare, avertisment, informații și succes. Pentru a utiliza, adăugați clasa corespunzătoare la .control-group.

<div class = "avertisment grup de control" > 
  <label class = "control-label" for = "inputWarning" > Intrare cu avertisment </label>  
  <div class = "controale" > 
    <input type = "text" id = "inputWarning" >  
    <span class = "help-inline" > Este posibil ca ceva să fi mers prost </span> 
  </div>
</div>
 
<div class = "eroare de grup de control" > 
  <label class = "control-label" for = "inputError" > Intrare cu eroare </label>  
  <div class = "controale" > 
    <input type = "text" id = "inputError" >  
    <span class = "help-inline" > Corectați eroarea </span> 
  </div>
</div>
 
<div class = "informații despre grupul de control" > 
  <label class = "control-label" for = "inputInfo" > Introducere cu informații </label>  
  <div class = "controale" > 
    <input type = "text" id = "inputInfo" >  
    <span class = "help-inline" > Numele de utilizator este deja luat </span> 
  </div>
</div>
 
<div class = "succes grup de control" > 
  <label class = "control-label" for = "inputSuccess" > Intrare cu succes </label>  
  <div class = "controale" > 
    <input type = "text" id = "inputSuccess" >  
    <span class = "help-inline" > Woohoo! </span> 
  </div>
</div>

Butoane implicite

Stilurile de butoane pot fi aplicate oricărui lucru cu .btnclasa aplicată. Cu toate acestea, de obicei, veți dori să le aplicați numai la elemente <a>și <button>pentru cea mai bună randare.

Buton	clasa=""	Descriere
	`btn`	Buton gri standard cu gradient
	`btn btn-primary`	Oferă greutate vizuală suplimentară și identifică acțiunea principală într-un set de butoane
	`btn btn-info`	Folosit ca alternativă la stilurile implicite
	`btn btn-success`	Indică o acțiune reușită sau pozitivă
	`btn btn-warning`	Indică că trebuie luată precauție cu această acțiune
	`btn btn-danger`	Indică o acțiune periculoasă sau potențial negativă
	`btn btn-inverse`	Buton alternativ gri închis, care nu este legat de o acțiune sau utilizare semantică
	`btn btn-link`	Subliniază un buton făcându-l să arate ca un link, menținând în același timp comportamentul butonului

Compatibilitate între browsere

IE9 nu decupează degrade de fundal pe colțurile rotunjite, așa că îl eliminăm. Înrudit, IE9 dezactivează buttonelementele dezactivate, redând textul gri cu o umbră de text urâtă pe care nu o putem remedia.

Dimensiuni nasturi

Vrei nasturi mai mari sau mai mici? Adăugați .btn-large, .btn-small, sau .btn-minipentru dimensiuni suplimentare.

<p>
  <button class = "btn btn-large btn-primary" type = "button" > Buton mare </button>  
  <button class = "btn btn-large" type = "button" > Buton mare </button>  
</p>
<p>
  <button class = "btn btn-primary" type = "button" > Buton implicit </button>  
  <button class = "btn" type = "button" > Buton implicit </button>  
</p>
<p>
  <button class = "btn btn-small btn-primary" type = "button" > Buton mic </button>  
  <button class = "btn btn-small" type = "button" > Buton mic </button>  
</p>
<p>
  <button class = "btn btn-mini btn-primary" type = "button" > Mini buton </button>  
  <button class = "btn btn-mini" type = "button" > Mini buton </button>  
</p>

Creați butoane la nivel de bloc—cele care se întind pe toată lățimea unui părinte—adăugând .btn-block.

<button class = "btn btn-large btn-block btn-primary" type = "button" > Buton la nivel de bloc </button>  
<button class = "btn btn-large btn-block" type = "button" > Buton la nivel de bloc </button>

Stare dezactivată

Faceți ca butoanele să pară inaccesibile prin estomparea lor înapoi cu 50%.

Element de ancorare

Adăugați .disabledclasa la <a>butoane.

Legătura principală Legătură

<a href = "#" class = "btn btn-large btn-primary disabled" > Link principal </a>  
<a href = "#" class = "btn btn-large disabled" > Link </a>

Atenție!Folosim .disabledaici ca o clasă de utilitate, similară cu .activeclasa comună, deci nu este necesar niciun prefix. De asemenea, această clasă este doar pentru estetică; trebuie să utilizați JavaScript personalizat pentru a dezactiva link-urile aici.

Element buton

Adăugați disabledatributul la <button>butoane.

<button type = "button" class = "btn btn-large btn-primary disabled" disabled = "disabled" > Buton principal </button>   
<button type = "button" class = "btn btn-large" disabled > Buton </button>

O clasă, mai multe etichete

Utilizați .btnclasa pe un element <a>, <button>, sau <input>.

<a class = "btn" href = "" > Link </a>  
<button class = "btn" type = "submit" > Buton </button>  
<input class = "btn" type = "button" value = "Input" >   
<input class = "btn" type = "submit" value = "Submit" >

Ca cea mai bună practică, încercați să potriviți elementul pentru contextul dvs. pentru a asigura randarea pe mai multe browsere. Dacă aveți un input, utilizați un <input type="submit">pentru butonul dvs.

Adăugați clase la un <img>element pentru a stila cu ușurință imaginile în orice proiect.

<img src = "..." class = "img-rounded" >  
<img src = "..." class = "img-cercle" >  
<img src = "..." class = "img-polaroid" >

Atenție! .img-roundedși .img-circlenu funcționează în IE7-8 din cauza lipsei de border-radiussuport.

Pictograme pictograme

140 de pictograme în formă de sprite, disponibile în gri închis (implicit) și alb, furnizate de Glyphicons .

icoană-sticlă
icoană-muzică
icon-search
icoană-plic
icoana-inima
icoană-stea
pictogramă-stea-gol
pictogramă-utilizator
icoană-film
icon-th-mare
icoana-th
icon-a-lista
pictograma-ok
icon-eliminare
icon-zoom-in
icon-zoom-out
icon-off
icoană-semnal
pictogramă-cog
pictogramă-coș de gunoi
icon-acasă
icon-fișier
pictogramă-timp
icoană-drum
icon-download-alt
icon-descărcare
icon-upload
pictogramă-inbox
icon-play-cerc
pictogramă-repetare
icon-refresh
icon-list-alt
icon-lock
icoană-steag
pictogramă-căști
icon-volum-off
pictograma-volum-jos
pictogramă-creștere volum
pictogramă-qrcode
pictogramă-cod de bare
pictogramă-etichetă
pictograme-etichete
carte-icoană
pictogramă-marcaj
pictogramă-imprimare
pictogramă-camera
pictogramă-font
pictogramă-bold
pictogramă-italic
pictogramă-text-înălțime
pictogramă-text-lățime
icon-align-stânga
icon-align-center
icon-align-dreapta
icon-align-justify
lista de pictograme
pictogramă-indentare-stânga
pictograma-indentare-dreapta
icon-facetime-video
pictogramă-imagine
pictogramă-creion
pictogramă-hartă-marker
pictogramă-reglare
pictogramă-tentă
icon-edit
icon-share
pictogramă-verificare
pictogramă-mutare
pictogramă-pas-înapoi
pictogramă-rapid-înapoi
pictogramă-înapoi
icon-play
pictogramă-pauză
pictogramă-oprire
pictogramă-înainte
pictogramă-înainte rapidă
pictogramă-pas-înainte
icon-eject
pictogramă-chevron-stânga
pictograma-chevron-dreapta
pictogramă-plus-semn
pictogramă-semn-minus
pictogramă-elimină-semn
pictograma-ok-semn
pictogramă-întrebare-semn
pictogramă-semn-info
icon-captură de ecran
pictogramă-elimină-cerc
pictogramă-ok-cerc
pictogramă-ban-cerc
pictogramă-săgeată-stânga
pictogramă-săgeată-dreapta
pictogramă-săgeată-sus
pictogramă-săgeată-jos
icon-share-alt
icon-resize-full
icon-redimensionare-mic
icon-plus
pictogramă-minus
pictogramă-asterisc
pictogramă-semn-exclamație
icoană-cadou
icoană-frunză
icoana-foc
pictogramă-ochi-deschis
pictogramă-ochi-închis
pictogramă-semn-avertisment
icoană-plan
icoana-calendar
pictogramă-aleatorie
pictogramă-comentar
pictogramă-magnet
icon-chevron-up
pictogramă-chevron-jos
pictogramă-retweet
pictogramă-coș de cumpărături
icon-folder-close
icon-folder-deschide
icon-resize-vertical
pictogramă-redimensionare-orizontală
pictogramă-hdd
icoană-bulhorn
icoana-clopot
icon-certificat
pictogramă-degetul mare în sus
pictogramă-degetele în jos
pictograma-mana-dreapta
pictograma-mana-stânga
pictograma-mana sus
pictograma-mana-jos
pictogramă-cerc-săgeată-dreapta
pictogramă-cerc-săgeată-stânga
pictogramă-cerc-săgeată-sus
pictogramă-cerc-săgeată-jos
icoană-glob
icoană-cheie
pictograme-sarcini
pictogramă-filtru
icoană-servietă
pictogramă-ecran complet

Atribuire glificonuri

În mod normal, Glyphicons Halflings nu sunt disponibile gratuit, dar un aranjament între Bootstrap și creatorii Glyphicons a făcut acest lucru posibil fără niciun cost pentru voi, ca dezvoltatori. Ca mulțumire, vă rugăm să includeți un link opțional înapoi la Glyphicons ori de câte ori este posibil.

Cum se utilizează

Toate pictogramele necesită o <i>etichetă cu o clasă unică, prefixată cu icon-. Pentru a utiliza, plasați următorul cod aproape oriunde:

<i class = "icon-search" ></i>

Există, de asemenea, stiluri disponibile pentru pictogramele inversate (albe), pregătite cu o clasă suplimentară. Vom impune această clasă în mod special pentru stările de trecere și active pentru linkurile de navigare și dropdown.

<i class = „icoană-căutare pictogramă-albă” ></i>

Atenție!Când utilizați lângă șiruri de text, ca în butoane sau link-uri de navigare, asigurați-vă că lăsați un spațiu după <i>etichetă pentru o spațiere adecvată.

Exemple de pictograme

Folosiți-le în butoane, grupuri de butoane pentru o bară de instrumente, navigare sau intrări de formulare anexate.

Butoane

Grup de butoane într-o bară de instrumente pentru butoane

<div class = "btn-toolbar" > 
  <div class = "btn-group" > 
    <a class = "btn" href = "#" ><i class = "icon-align-left" ></i></a>   
    <a class = "btn" href = "#" ><i class = "icon-align-center" ></i></a>   
    <a class = "btn" href = "#" ><i class = "icon-align-right" ></i></a>   
    <a class = "btn" href = "#" ><i class = "icon-align-justify" ></i></a>   
  </div>
</div>

Meniu derulant într-un grup de butoane

Utilizator

<div class = "btn-group" > 
  <a class = "btn btn-primary" href = "#" ><i class = "icon-user icon-white" ></i> Utilizator </a>   
  <a class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown" href = "#" ><span class = "caret" ></span></a>    
  <ul class = "meniu derulant" > 
    <li><a href = "#" ><i class = "icon-pencil" ></i> Editare </a></li>  
    <li><a href = "#" ><i class = "icon-trash" ></i> Ștergeți </a></li>  
    <li><a href = "#" ><i class = "icon-ban-circle" ></i> Ban </a></li>  
    <li class = "divider" ></li> 
    <li><a href = "#" ><i class = "i" ></i> Faceți administrator </a></li>  
  </ul>
</div>

Dimensiuni nasturi

Stea Stea Stea

<a class = "btn btn-large" href = "#" ><i class = "icon-star" ></i> Steaua </a>   
<a class = "btn btn-small" href = "#" ><i class = "icon-star" ></i> Steaua </a>   
<a class = "btn btn-mini" href = "#" ><i class = "icon-star" ></i> Steaua </a>

Navigare

<ul class = "nav nav-list" > 
  <li class = "active" ><a href = "#" ><i class = "icon-home icon-white" ></i> Acasă </a></li>   
  <li><a href = "#" ><i class = "icon-book" ></i> Bibliotecă </a></li>  
  <li><a href = "#" ><i class = "icon-pencil" ></i> Aplicații </a></li>  
  <li><a href = "#" ><i class = "i" ></i> Diverse </a></li>  
</ul>

Câmpuri formular

<div class = "grup de control" > 
  <label class = "control-label" for = "inputIcon" > Adresă de e-mail </label>  
  <div class = "controale" > 
    <div class = "input-prepend" > 
      <span class = „supliment” ><i class = „pictogramă-plic” ></i></span>  
      <input class = "span2" id = "inputIcon" type = "text" >   
    </div>
  </div>
</div>

Tipografie

Titluri

h1. Titlul 1

h2. Titlul 2

h3. Titlul 3

h4. Titlul 4

h5. Titlul 5

h6. Titlul 6

Copie a corpului

Copia corpului principal

Construit cu Mai puțin

Accent

<small>

Îndrăzneţ

Cursive

Clasele de aliniere

Clasele de accentuare

Abrevieri

<abbr>

<abbr class="initialism">

Adrese

<address>

Citate bloc

Citat bloc implicit

Opțiuni pentru citate blocate

Denumirea unei surse

Afișări alternative

Liste

Neordonat

Ordonat

Nestilat

In linie

Descriere

Descriere orizontală

Cod

In linie

Bloc de bază

Mese

Stiluri implicite

Clase optionale

.table-striped

.table-bordered

.table-hover

.table-condensed

Clase de rânduri opționale

Markup acceptat pentru tabel

Forme

Stiluri implicite

Aspecte opționale

Formular de căutare

Formular inline

Forma orizontală

Controale de formular acceptate

Intrări

Textarea

Casete de selectare și radiouri

Implicit (stivuit)

Casete de selectare în linie

Selectează

Extinderea controalelor de formular

Intrări anexate și anexate

Opțiuni implicite

Combinate

Butoane în loc de text

Butoane derulante

Grupuri derulante segmentate

Formular de căutare

Control dimensionarea

Intrări la nivel de bloc

Dimensiunea relativă

Dimensiunea grilei

Intrări needitabile

Formează acțiuni

Text de ajutor

Ajutor inline

Blocare ajutor

Stări de control al formularului

Focalizare de intrare

Intrări nevalide

Intrări dezactivate

`<small>`

`<abbr>`

`<abbr class="initialism">`

`<address>`

`.table-striped`

`.table-bordered`

`.table-hover`

`.table-condensed`