CSS de bază

Elemente HTML fundamentale stilate și îmbunătățite cu clase extensibile.

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.

  1. <p class = "text-left" > Text aliniat la stânga. </p>
  2. <p class = "text-center" > Text aliniat la centru. </p>
  3. <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.

  1. <p class = "muted" > Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh. </p>
  2. <p class = "text-warning" > Etiam porta sem malesuada magna mollis euismod. </p>
  3. <p class = "text-error" > Donec ullamcorper nulla non metus auctor fringilla. </p>
  4. <p class = "text-info" > Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis. </p>
  5. <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]
  1. <adresa>
  2. <strong> Twitter, Inc. </strong><br>
  3. 795 Folsom Ave, Suite 600 <br>
  4. San Francisco, CA 94107 <br>
  5. <abbr title = „Telefon” > P: </abbr> (123) 456-7890
  6. </adresă>
  7.  
  8. <adresa>
  9. <strong> Nume complet </strong><br>
  10. <a href = "mailto:#" > [email protected] </a>
  11. </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.

  1. <blockquote>
  2. <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. </p>
  3. </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
  1. <blockquote>
  2. <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. </p>
  3. <small> Cineva celebru <cite title = "Source Title" > Source Title </cite></small>
  4. </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
  1. <blockquote class = „trage-dreapta” >
  2. ...
  3. </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
  1. <ul>
  2. <li> ... </li>
  3. </ul>

Ordonat

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

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem
  1. <ol>
  2. <li> ... </li>
  3. </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
  1. <ul class = „unstyled” >
  2. <li> ... </li>
  3. </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
  1. <ul class = "inline" >
  2. <li> ... </li>
  3. </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.
  1. <dl>
  2. <dt> ... </dt>
  3. <dd> ... </dd>
  4. </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.
  1. <dl class = "dl-horizontal" >
  2. <dt> ... </dt>
  3. <dd> ... </dd>
  4. </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.
  1. 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>
  1. <pre>
  2. <p>Exemplu de text aici...</p>
  3. </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
  1. < clasa tabel = „tabel” >
  2. </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
  1. <table class = "table table-striped" >
  2. </tabel>

.table-bordered

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

# Nume Numele de familie Nume de utilizator
1 marcă Otto @mdo
marcă Otto @getbootstrap
2 Iacov Thornton @gras
3 Larry pasărea @stare de nervozitate
  1. <table class = "table table-bordered" >
  2. </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
  1. <table class = "table table-hover" >
  2. </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
  1. <table class = "table table-condensed" >
  2. </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
  1. ...
  2. < tr class = "succes" >
  3. <td> 1 < /td>
  4. <td>TB - Lunar</ td >
  5. <td> 01 / 04 / 2012 < /td>
  6. <td>Aprobat</ td >
  7. </ tr >
  8. ...

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
  1. <tabel>
  2. <caption> ... </caption>
  3. <cap>
  4. <tr>
  5. <th> ... </th>
  6. <th> ... </th>
  7. </tr>
  8. </thead>
  9. <tbody>
  10. <tr>
  11. <td> ... </td>
  12. <td> ... </td>
  13. </tr>
  14. </tbody>
  15. </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.

Legendă Exemplu de text de ajutor la nivel de bloc aici.
  1. <form>
  2. <set de câmpuri>
  3. <legendă> Legendă </legendă>
  4. <label> Numele etichetei </label>
  5. <input type = "text" placeholder = "Tastați ceva..." >
  6. <span class = "help-block" > Exemplu de text de ajutor la nivel de bloc aici. </span>
  7. <label class = „căsuță de selectare” >
  8. <input type = "checkbox" > Verificați-mă
  9. </label>
  10. <button type = "submit" class = "btn" > Trimiteți </button>
  11. </fieldset>
  12. </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ă.

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

Formular inline

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

  1. <form class = "form-inline" >
  2. <input type = "text" class = "input-small" substituent = "E-mail" >
  3. <input type = "parolă" class = "input-small" placeholder = "Parolă" >
  4. <label class = „căsuță de selectare” >
  5. <input type = "checkbox" > Ține-mă minte
  6. </label>
  7. <button type = "submit" class = "btn" > Conectați-vă </button>
  8. </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ă
  1. <form class = "form-horizontal" >
  2. <div class = "grup de control" >
  3. <label class = "control-label" for = "inputEmail" > E-mail </label>
  4. <div class = "controale" >
  5. <input type = "text" id = "inputEmail" placeholder = "E-mail" >
  6. </div>
  7. </div>
  8. <div class = "grup de control" >
  9. <label class = "control-label" for = "inputPassword" > Parolă </label>
  10. <div class = "controale" >
  11. <input type = "parolă" id = "inputPassword" placeholder = "Parolă" >
  12. </div>
  13. </div>
  14. <div class = "grup de control" >
  15. <div class = "controale" >
  16. <label class = „căsuță de selectare” >
  17. <input type = "checkbox" > Ține-mă minte
  18. </label>
  19. <button type = "submit" class = "btn" > Conectați-vă </button>
  20. </div>
  21. </div>
  22. </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.

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

Textarea

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

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


  1. <label class = „căsuță de selectare” >
  2. <input type = "checkbox" value = "" >
  3. Opțiunea unu este aceasta și aceea - asigurați-vă că includeți de ce este grozav
  4. </label>
  5.  
  6. <label class = "radio" >
  7. <input type = "radio" name = "optionsRadios" id = "optionsRadios1" value = "option1" bifat >
  8. Opțiunea unu este aceasta și aceea - asigurați-vă că includeți de ce este grozav
  9. </label>
  10. <label class = "radio" >
  11. <input type = "radio" name = "optionsRadios" id = "optionsRadios2" value = "option2" >
  12. Opțiunea a doua poate fi altceva și selectarea acesteia va deselecta opțiunea unu
  13. </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.

  1. <label class = "caseta de selectare inline" >
  2. <input type = "checkbox" id = "inlineCheckbox1" value = "option1" > 1
  3. </label>
  4. <label class = "caseta de selectare inline" >
  5. <input type = "checkbox" id = "inlineCheckbox2" value = "option2" > 2
  6. </label>
  7. <label class = "caseta de selectare inline" >
  8. <input type = "checkbox" id = "inlineCheckbox3" value = "option3" > 3
  9. </label>

Selectează

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


  1. <selectați>
  2. <option> 1 </option>
  3. <option> 2 </option>
  4. <option> 3 </option>
  5. <opțiune> 4 </opțiune>
  6. <opțiune> 5 </opțiune>
  7. </select>
  8.  
  9. <select multiple = „multiple” >
  10. <option> 1 </option>
  11. <option> 2 </option>
  12. <option> 3 </option>
  13. <opțiune> 4 </opțiune>
  14. <opțiune> 5 </opțiune>
  15. </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.

@

.00
  1. <div class = "input-prepend" >
  2. <span class = "supliment" > @ </span>
  3. <input class = "span2" id = "prependedInput" type = "text" substituent = "Username" >
  4. </div>
  5. <div class = "input-append" >
  6. <input class = "span2" id = "appendedInput" type = "text" >
  7. <span class = "add-on" > .00 </span>
  8. </div>

Combinate

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

$ .00
  1. <div class = "input-prepend input-append" >
  2. <span class = "add-on" > $ </span>
  3. <input class = "span2" id = "appendedPrependedInput" type = "text" >
  4. <span class = "add-on" > .00 </span>
  5. </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.

  1. <div class = "input-append" >
  2. <input class = "span2" id = "appendedInputButton" type = "text" >
  3. <button class = "btn" type = "button" > Du-te! </button>
  4. </div>
  1. <div class = "input-append" >
  2. <input class = "span2" id = "appendedInputButtons" type = "text" >
  3. <button class = "btn" type = "button" > Căutați </button>
  4. <button class = "btn" type = "button" > Opțiuni </button>
  5. </div>

Butoane derulante

  1. <div class = "input-append" >
  2. <input class = "span2" id = "appendedDropdownButton" type = "text" >
  3. <div class = "btn-group" >
  4. <button class = "btn dropdown-toggle" data-toggle = "dropdown" >
  5. Acțiune
  6. <span class = "caret" ></span>
  7. </button>
  8. <ul class = "meniu derulant" >
  9. ...
  10. </ul>
  11. </div>
  12. </div>
  1. <div class = "input-prepend" >
  2. <div class = "btn-group" >
  3. <button class = "btn dropdown-toggle" data-toggle = "dropdown" >
  4. Acțiune
  5. <span class = "caret" ></span>
  6. </button>
  7. <ul class = "meniu derulant" >
  8. ...
  9. </ul>
  10. </div>
  11. <input class = "span2" id = "prependedDropdownButton" type = "text" >
  12. </div>
  1. <div class = "input-prepend input-append" >
  2. <div class = "btn-group" >
  3. <button class = "btn dropdown-toggle" data-toggle = "dropdown" >
  4. Acțiune
  5. <span class = "caret" ></span>
  6. </button>
  7. <ul class = "meniu derulant" >
  8. ...
  9. </ul>
  10. </div>
  11. <input class = "span2" id = "appendedPrependedDropdownButton" type = "text" >
  12. <div class = "btn-group" >
  13. <button class = "btn dropdown-toggle" data-toggle = "dropdown" >
  14. Acțiune
  15. <span class = "caret" ></span>
  16. </button>
  17. <ul class = "meniu derulant" >
  18. ...
  19. </ul>
  20. </div>
  21. </div>

Grupuri derulante segmentate

  1. <form>
  2. <div class = "input-prepend" >
  3. <div class = "btn-group" > ... </div>
  4. < tip de intrare = „text” >
  5. </div>
  6. <div class = "input-append" >
  7. < tip de intrare = „text” >
  8. <div class = "btn-group" > ... </div>
  9. </div>
  10. </form>

Formular de căutare

  1. <form class = "form-search" >
  2. <div class = "input-append" >
  3. <input type = „text” class = „span2 search-query” >
  4. <button type = "submit" class = "btn" > Căutare </button>
  5. </div>
  6. <div class = "input-prepend" >
  7. <button type = "submit" class = "btn" > Căutare </button>
  8. <input type = „text” class = „span2 search-query” >
  9. </div>
  10. </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.

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

Dimensiunea relativă

  1. <input class = "input-mini" type = "text" substituent = ".input-mini" >
  2. <input class = "input-small" type = "text" substituent = ".input-small" >
  3. <input class = "input-medium" type = "text" substituent = ".input-medium" >
  4. <input class = "input-large" type = "text" placeholder = ".input-large" >
  5. <input class = "input-xlarge" type = "text" substituent = ".input-xlarge" >
  6. <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.

  1. <input class = "span1" type = "text" substituent = ".span1" >
  2. <input class = "span2" type = "text" substituent = ".span2" >
  3. <input class = "span3" type = "text" substituent = ".span3" >
  4. <select class = "span1" >
  5. ...
  6. </select>
  7. <select class = "span2" >
  8. ...
  9. </select>
  10. <select class = "span3" >
  11. ...
  12. </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.

  1. <div class = "controale" >
  2. <input class = "span5" type = "text" substituent = ".span5" >
  3. </div>
  4. <div class = "controls controls-row" >
  5. <input class = "span4" type = "text" substituent = ".span4" >
  6. <input class = "span1" type = "text" substituent = ".span1" >
  7. </div>
  8. ...

Intrări needitabile

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

O oarecare valoare aici
  1. <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.

  1. <div class = "form-actions" >
  2. <button type = "submit" class = "btn btn-primary" > Salvați modificările </button>
  3. <button type = "button" class = "btn" > Anulați </button>
  4. </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

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

Blocare ajutor

Un bloc mai lung de text de ajutor care se întrerupe într-o nouă linie și se poate extinde dincolo de o linie.
  1. <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.

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

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

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

Poate că ceva nu a mers prost
Vă rugăm să corectați eroarea
Numele de utilizator este luat
Woo hoo!
  1. <div class = "avertisment grup de control" >
  2. <label class = "control-label" for = "inputWarning" > Intrare cu avertisment </label>
  3. <div class = "controale" >
  4. <input type = "text" id = "inputWarning" >
  5. <span class = "help-inline" > Este posibil ca ceva să fi mers prost </span>
  6. </div>
  7. </div>
  8.  
  9. <div class = "eroare de grup de control" >
  10. <label class = "control-label" for = "inputError" > Intrare cu eroare </label>
  11. <div class = "controale" >
  12. <input type = "text" id = "inputError" >
  13. <span class = "help-inline" > Corectați eroarea </span>
  14. </div>
  15. </div>
  16.  
  17. <div class = "informații despre grupul de control" >
  18. <label class = "control-label" for = "inputInfo" > Introducere cu informații </label>
  19. <div class = "controale" >
  20. <input type = "text" id = "inputInfo" >
  21. <span class = "help-inline" > Numele de utilizator este deja luat </span>
  22. </div>
  23. </div>
  24.  
  25. <div class = "succes grup de control" >
  26. <label class = "control-label" for = "inputSuccess" > Intrare cu succes </label>
  27. <div class = "controale" >
  28. <input type = "text" id = "inputSuccess" >
  29. <span class = "help-inline" > Woohoo! </span>
  30. </div>
  31. </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.

  1. <p>
  2. <button class = "btn btn-large btn-primary" type = "button" > Buton mare </button>
  3. <button class = "btn btn-large" type = "button" > Buton mare </button>
  4. </p>
  5. <p>
  6. <button class = "btn btn-primary" type = "button" > Buton implicit </button>
  7. <button class = "btn" type = "button" > Buton implicit </button>
  8. </p>
  9. <p>
  10. <button class = "btn btn-small btn-primary" type = "button" > Buton mic </button>
  11. <button class = "btn btn-small" type = "button" > Buton mic </button>
  12. </p>
  13. <p>
  14. <button class = "btn btn-mini btn-primary" type = "button" > Mini buton </button>
  15. <button class = "btn btn-mini" type = "button" > Mini buton </button>
  16. </p>

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

  1. <button class = "btn btn-large btn-block btn-primary" type = "button" > Buton la nivel de bloc </button>
  2. <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ă

  1. <a href = "#" class = "btn btn-large btn-primary disabled" > Link principal </a>
  2. <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.

  1. <button type = "button" class = "btn btn-large btn-primary disabled" disabled = "disabled" > Buton principal </button>
  2. <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>.

Legătură
  1. <a class = "btn" href = "" > Link </a>
  2. <button class = "btn" type = "submit" > Buton </button>
  3. <input class = "btn" type = "button" value = "Input" >
  4. <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.

140x140 140x140 140x140
  1. <img src = "..." class = "img-rounded" >
  2. <img src = "..." class = "img-cercle" >
  3. <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:

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

  1. <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
  1. <div class = "btn-toolbar" >
  2. <div class = "btn-group" >
  3. <a class = "btn" href = "#" ><i class = "icon-align-left" ></i></a>
  4. <a class = "btn" href = "#" ><i class = "icon-align-center" ></i></a>
  5. <a class = "btn" href = "#" ><i class = "icon-align-right" ></i></a>
  6. <a class = "btn" href = "#" ><i class = "icon-align-justify" ></i></a>
  7. </div>
  8. </div>
Meniu derulant într-un grup de butoane
  1. <div class = "btn-group" >
  2. <a class = "btn btn-primary" href = "#" ><i class = "icon-user icon-white" ></i> Utilizator </a>
  3. <a class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown" href = "#" ><span class = "caret" ></span></a>
  4. <ul class = "meniu derulant" >
  5. <li><a href = "#" ><i class = "icon-pencil" ></i> Editare </a></li>
  6. <li><a href = "#" ><i class = "icon-trash" ></i> Ștergeți </a></li>
  7. <li><a href = "#" ><i class = "icon-ban-circle" ></i> Ban </a></li>
  8. <li class = "divider" ></li>
  9. <li><a href = "#" ><i class = "i" ></i> Faceți administrator </a></li>
  10. </ul>
  11. </div>
Dimensiuni nasturi
  1. <a class = "btn btn-large" href = "#" ><i class = "icon-star" ></i> Steaua </a>
  2. <a class = "btn btn-small" href = "#" ><i class = "icon-star" ></i> Steaua </a>
  3. <a class = "btn btn-mini" href = "#" ><i class = "icon-star" ></i> Steaua </a>

Navigare

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

Câmpuri formular

  1. <div class = "grup de control" >
  2. <label class = "control-label" for = "inputIcon" > Adresă de e-mail </label>
  3. <div class = "controale" >
  4. <div class = "input-prepend" >
  5. <span class = „supliment” ><i class = „pictogramă-plic” ></i></span>
  6. <input class = "span2" id = "inputIcon" type = "text" >
  7. </div>
  8. </div>
  9. </div>