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 ut id elit.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui.

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:

Exemple de abrevieri

Abrevierile sunt stilate cu text cu majuscule și un chenar de jos punctat ușor. De asemenea, au un cursor de ajutor la trecerea cu mouse-ul, astfel încât utilizatorii să aibă o indicație suplimentară că ceva va fi afișat la trecerea cu mouse-ul.

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.

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ă transformați orice marcaj în caracterele lor unicode 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.

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.

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

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

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

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

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

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

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>

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>

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.

Cu v2.0, avem valori implicite mai ușoare și mai inteligente pentru stilurile de formulare. Fără markup suplimentar, doar controale de formular.

Reflectând stilurile implicite WebKit, doar adăugați .form-searchpentru câmpuri de căutare suplimentare rotunjite.

Intrările sunt la nivel de bloc pentru a începe. Pentru .form-inlineși .form-horizontal, folosim inline-block.

Ce este inclus

În stânga 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

Noi valori implicite cu v2.0

Până la v1.4, stilurile implicite ale formularelor Bootstrap foloseau aspectul orizontal. Cu Bootstrap 2, am eliminat această constrângere pentru a avea valori implicite mai inteligente și mai scalabile pentru orice formă.

Stări reproiectate ale browserului

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>

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.

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.

Pentru ancore și forme

Stilurile de butoane pot fi aplicate la orice cu .btnaplicația. Cu toate acestea, de obicei, veți dori să le aplicați numai la elemente <a>și <button>.

Notă: Toate butoanele trebuie să includă .btnclasa. Stilurile de butoane trebuie aplicate <button>și <a>elemente pentru consecvență.

Dimensiuni multiple

Vrei nasturi mai mari sau mai mici? Ai de-a face!

Acțiune primară Acțiune

Acțiune primară Acțiune

Stare dezactivată

Pentru butoanele dezactivate, utilizați .btn-disabledpentru legături și :disabledpentru <button>elemente.

Acțiune primară Acțiune

Acțiune primară Acțiune

Compatibilitate între browsere

În IE9, aruncăm gradientul pe toate butoanele în favoarea colțurilor rotunjite, deoarece IE9 nu decupează degrade de fundal în colțuri.

Înrudit, IE9 dezactivează buttonelementele dezactivate, redând textul gri cu o umbră de text urâtă - din păcate, nu putem remedia acest lucru.

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ă

Cu v2.0.0, am optat să folosim o <i>etichetă pentru toate pictogramele noastre, dar acestea 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ă 120 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.

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