Scara tipografica

Întreaga grilă tipografică se bazează pe două variabile Less din fișierul nostru 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 ceva matematică pentru a crea marginile, umpluturile și înălțimile liniilor de toate tipurile noastre și altele.

Exemplu de corp de text

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.

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.

Folosind accentul

Fusce dapibus , tellus ac cursus commodo , torttor mauris condimentum nibh , ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Nulla vitae elit libero, a pharetra augue.

Notă: Simțiți-vă liber să utilizați <b>și <i>în HTML5, dar utilizarea lor s-a schimbat puțin. <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.

Exemple de adrese

Iată două exemple despre cum <address>poate fi utilizată eticheta:

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

Nume complet
[email protected]

Exemple de abrevieri

Abrevierile cu un titleatribut au un chenar de jos punctat ușor și un cursor de ajutor la hover. Acest lucru oferă utilizatorilor o indicație suplimentară că ceva va fi afișat la trecerea cursorului.

Adăugați initialismclasa la o abreviere pentru a crește armonia tipografică, oferindu-i o dimensiune de text puțin mai mică.

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

O abreviere a cuvântului atribut este attr .

Pentru a include un blockquote, include <blockquote>orice HTML ca citat. Pentru citate drepte vă recomandăm un <p>.

Includeți un element opțional <small>pentru a vă cita sursa și veți primi o liniuță —înaintea acestuia în scopuri de styling.

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

Citatele bloc implicite sunt stilate astfel:

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

Cineva celebru în Body of work

Pentru a vă muta citatul bloc la dreapta, adăugați class="pull-right":

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

Cineva celebru în Body of work

Neordonat

<ul>

• 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

Nestilat

<ul class="unstyled">

• 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

Ordonat

<ol>

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

Descriere

<dl>

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.

Descriere orizontală

<dl class="dl-horizontal">

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.

---

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 , secțiunea < code> </ 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>

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

Google Prettify

Luați același <pre>element și adăugați două clase opționale pentru randare îmbunătățită.

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

<pre class = "prettyprint 
     linenums" >
  <p>Exemplu de text aici...</p>
</pre>

Descărcați google-code-prettify și vedeți citiți-mă pentru modul de utilizare.

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 și de plasare) Trebuie utilizate într-un<thead>
<caption>	Descriere sau rezumat a ceea ce conține tabelul, util în special pentru cititorii de ecran

<tabel>
  <cap>
    <tr>
      <th> … </th>
      <th> … </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td> … </td>
      <td> … </td>
    </tr>
  </tbody>
</tabel>

Tabelele sunt stilate automat cu doar câteva chenare pentru a asigura lizibilitatea și menține structura. Cu 2.0, .tableclasa este necesară.

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

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

Fă-ți un pic de fantezie cu mesele adăugând dungi zebră - doar adaugă .table-stripedclasa.

Notă: Tabelele cu dungi folosesc :nth-childselectorul CSS și nu sunt disponibile în IE7-IE8.

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

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

Adăugați chenaruri în jurul întregii mese și colțuri rotunjite pentru scopuri estetice.

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

#	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

Faceți tabelele mai compacte adăugând .table-condensedclasa pentru a tăia umplutura celulelor tabelului la jumătate (de la 8px la 4px).

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

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

Simțiți-vă liber să combinați oricare dintre clasele de tabel pentru a obține aspecturi diferite utilizând oricare dintre clasele disponibile.

<table class = "tabel table-striped table-bordered table-condensed" > 
  ...
</tabel>

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

HTML și CSS flexibil

Cea mai bună parte a formularelor din Bootstrap este că toate intrările și controalele dvs. arată grozav, indiferent de modul în care le creați în markup. Nu este necesar HTML de prisos, dar oferim modele pentru cei care îl solicită.

Aspectele mai complicate vin cu clase succinte și scalabile pentru stilare ușoară și legare la evenimente, astfel încât să fiți acoperit la fiecare pas.

Patru machete incluse

Bootstrap vine cu suport pentru patru tipuri de aspecte de formulare:

• Vertical (implicit)
• Căutare
• In linie
• Orizontală

Diferite tipuri de aspecte de formular necesită unele modificări ale marcajului, dar controalele în sine rămân și se comportă la fel.

Controlează stările și nu numai

Formularele Bootstrap includ stiluri pentru toate controalele de bază ale formularului, cum ar fi intrarea, zona de text și selectarea la care v-ați aștepta. Dar vine și cu o serie de componente personalizate, cum ar fi intrări anexate și anexate și suport pentru liste de casete de selectare.

Stări precum eroarea, avertismentul și succesul sunt incluse pentru fiecare tip de control al formularului. Sunt incluse și stilurile pentru comenzile dezactivate.

Forma de bază

Setări implicite inteligente și ușoare, fără markup suplimentar.

Numele etichetei

Exemplu de text de ajutor la nivel de bloc aici.

Verifica-ma Trimite

<form class = „bine” > 
  <label> Numele etichetei </label>
  <input type = "text" class = "span3" placeholder = "Tastați ceva..." >   
  <span class = "help-block" > Exemplu de text de ajutor la nivel de bloc aici. </span> 
  <label class = "caseta de selectare" > 
    <input type = "checkbox" > Verificați-mă 
  </label>
  <button type = "submit" class = "btn" > Trimiteți </button>  
</form>

Formular de căutare

Adăugați .form-searchla formular și .search-queryla input.

Căutare

<form class = "bine 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 finețe alinierea verticală și spațierea controalelor de formular.

Amintește-ți de mine Loghează-te

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

În partea dreaptă sunt afișate toate controalele implicite ale formularelor pe care le acceptăm. Iată lista cu marcatori:

• introducerea textului (text, parolă, e-mail etc.)
• Caseta de bifat
• radio
• Selectați
• selectie multipla
• introducerea fișierului
• zona textului

Introducerea textului

Pe lângă textul cu formă liberă, orice intrare bazată pe text HTML5 apare astfel.

Caseta de bifat

Opțiunea unu este aceasta și aceea - asigurați-vă că includeți de ce este grozav

Selectați lista

ceva 2 3 4 5

Multicon-selectare

1 2 3 4 5

Fișier de intrare

Textarea

Salvează modificările Anulare

Exemplu de marcare

Având în vedere modelul de formular de mai sus, iată marcajul asociat cu primul grup de intrare și control. Clasele .control-group, .control-label, și .controlssunt toate necesare pentru coafare.

<form class = "form-horizontal" > 
  <set de câmpuri>
    <legenda> Textul legendei </legenda>
    <div class = "grup de control" > 
      <label class = "control-label" for = "input01" > Introducere text </label>  
      <div class = "controale" > 
        <input type = "text" class = "input-xlarge" id = "input01" >   
        <p class = "help-block" > Text de ajutor compatibil </p> 
      </div>
    </div>
  </fieldset>
</form>

Bootstrap oferă stiluri pentru disabledstate și concentrate acceptate de browser. Îndepărtăm Webkit-ul implicit outlineși aplicăm un box-shadowîn locul lui pentru :focus.

---

Validarea formularului

Include, de asemenea, stiluri de validare pentru erori, avertismente și succes. Pentru a utiliza, adăugați clasa de eroare la .control-group.

<set de câmpuri
  class = "eroare de grup de control" >
  …
</fieldset>

Intrare focalizată

Intrare needitabilă

O oarecare valoare aici

Intrare dezactivată

Caseta de selectare dezactivată

Aceasta este o casetă de selectare dezactivată

Intrare cu avertisment

Poate că ceva nu a mers prost

Intrare cu eroare

Vă rugăm să corectați eroarea

Intrare cu succes

Woo hoo!

Selectați cu succes

1 2 3 4 5 Woo hoo!

Salvează modificările Anulare

Adăugați și adăugați intrări

Grupurile de introducere - cu text adăugat sau anexat - oferă o modalitate ușoară de a oferi mai mult context pentru intrările dvs. Exemple excelente includ semnul @ pentru numele de utilizator Twitter sau $ pentru finanțe.

---

Casete de selectare și radiouri

Până la v1.4, Bootstrap necesita un marcaj suplimentar în jurul casetelor de selectare și a radiourilor pentru a le stivui. Acum, este o simplă chestiune de a repeta textul <label class="checkbox">care înfășoară <input type="checkbox">.

Casetele de selectare în linie și radiourile sunt, de asemenea, acceptate. Doar adăugați .inlinela oricare .checkboxsau .radioși gata.

---

Formulare în linie și adăugați/prevăzuți

Pentru a utiliza intrări de antecedente sau de adăugare într-un formular inline, asigurați-vă că plasați .add-onși inputpe aceeași linie, fără spații.

---

Formează text de ajutor

Pentru a adăuga text de ajutor pentru intrările din formular, includeți text de ajutor în linie cu <span class="help-inline">sau un bloc de text de ajutor <p class="help-block">după elementul de intrare.

Formează dimensiunile grilei

1 2 3 4 5 1 2 3 4 5 1 2 3 4 5

Utilizați aceleași .span*clase din sistemul de grilă pentru dimensiunile de intrare.

Mărimi alternative

De asemenea, puteți utiliza clase statice care nu se mapează la grilă, nu se adaptează la stilurile CSS receptive sau nu iau în considerare diferite tipuri de controale (de exemplu, inputvs. select).

Text anexat

@

Iată un text de ajutor

Text anexat

.00

Iată mai mult text de ajutor

Adăugați și adăugați înainte

$ .00

Adăugați cu butonul

Merge!

Anexă cu două butoane

Căutare Opțiuni

Casete de selectare în linie

1 2 3

Casete de selectare

Opțiunea unu este aceasta și aceea - asigurați-vă că includeți de ce este grozav Opțiunea a doua poate fi, de asemenea, verificată și inclusă în rezultatele formularului Opțiunea trei poate fi, de asemenea, verificată și inclusă în rezultatele formularului, da, ați ghicit

Notă: Etichetele înconjoară toate opțiunile pentru zone de clic mult mai mari și o formă mai utilizabilă.

Butoane radio

Opțiunea unu este aceasta și aceea - asigurați-vă că includeți de ce este grozav Opțiunea a doua poate fi altceva și selectarea acesteia va deselecta opțiunea unu

Salvează modificările Anulare

Butoane pentru acțiuni

Ca o convenție, butoanele ar trebui să fie folosite numai pentru acțiuni, în timp ce hyperlinkurile trebuie folosite pentru obiecte. De exemplu, „Descărcare” ar trebui să fie un buton, în timp ce „activitate recentă” ar trebui să fie un link.

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

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 multiple

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

Acțiune primară Acțiune

Acțiune primară Acțiune

Acțiune primară Acțiune

Stare dezactivată

Pentru butoanele dezactivate, adăugați .disabledclasa la linkuri și disabledatributul pentru <button>elemente.

Legătura principală Legătură

Butonul principal Buton

Atenție! Folosim .disabledaici ca o clasă de utilitate, similară cu .activeclasa comună, deci nu este necesar niciun prefix.

O clasă, mai multe etichete

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

Legătură Buton

<a class = "btn" href = "" > Link </a>  
<button class = "btn" type = "submit" >  
  Buton
</button>
<input class = "btn" type = "button"  
         valoare = "Intrare" >
<input class = "btn" type = "submit"  
         valoare = "Trimite" >

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.

• 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

Construit ca un sprite

În loc să facem din fiecare pictogramă o solicitare suplimentară, le-am compilat într-un sprite - o grămadă de imagini într-un singur fișier care utilizează CSS pentru a poziționa imaginile cu background-position. Aceasta este aceeași metodă pe care o folosim pe Twitter.com și a funcționat bine pentru noi.

Toate clasele de pictograme sunt prefixate cu .icon-pentru spații de nume și delimitare adecvate, la fel ca celelalte componente ale noastre. Acest lucru va ajuta la evitarea conflictelor cu alte instrumente.

Glyphicons ne-a permis să folosim setul Halflings din setul nostru de instrumente open-source, atâta timp cât oferim un link și un credit aici în documente. Vă rugăm să luați în considerare să faceți același lucru în proiectele dvs.

Cum se utilizează

Bootstrap folosește o <i>etichetă pentru toate pictogramele, dar nu au o clasă de majuscule - doar un prefix comun. 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ă:

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

Există 140 de clase din care puteți alege pentru pictogramele dvs. Doar adăugați o <i>etichetă cu clasele potrivite și sunteți gata. Puteți găsi lista completă în sprites.less sau chiar aici, în acest document.

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

Cazuri de utilizare

Pictogramele sunt grozave, dar unde le-ar folosi? Iată câteva idei:

• Ca elemente vizuale pentru navigarea în bara laterală
• Pentru o navigare pur bazată pe pictograme
• Pentru butoane pentru a ajuta la transmiterea sensului unei acțiuni
• Cu linkuri pentru a partaja context la destinația unui utilizator

În esență, oriunde poți pune o <i>etichetă, poți pune o pictogramă.

Reîmprospăta Verifică Șterge

cometariu Setări Mai multe informatii

Adresa de e-mail