Bootstrap

Schele

Bootstrap este construit pe grile, aspecte și componente receptive cu 12 coloane.

Setări globale

Necesită HTML5 doctype

Bootstrap folosește anumite elemente HTML și proprietăți CSS care necesită utilizarea doctype HTML5. Includeți-l la începutul tuturor proiectelor dvs.

  1. <!DOCTYPE html>
  2. <html lang = "ro" > 
  3.   ...
  4. </html>

Tipografie și link-uri

Bootstrap stabilește stilurile de afișare globală de bază, tipografie și linkuri. Mai exact, noi:

  • Îndepărtați marginpe corp
  • Asezat background-color: white;pebody
  • Utilizați atributele @baseFontFamily, @baseFontSizeși @baseLineHeightca bază tipografică
  • Setați culoarea globală a linkului prin @linkColorși aplicați sublinierea linkului numai pe:hover

Aceste stiluri pot fi găsite în cadrul schelelor.mai puțin .

Resetați prin Normalizare

Cu Bootstrap 2, vechiul bloc de resetare a fost abandonat în favoarea Normalize.css , un proiect al lui Nicolas Gallagher și Jonathan Neal care alimentează și HTML5 Boilerplate . Deși folosim o mare parte din Normalize în reset.less , am eliminat unele elemente special pentru Bootstrap.

Sistem de grilă implicit

Exemplu de grilă live

Sistemul implicit de grilă Bootstrap utilizează 12 coloane , ceea ce face un container lățime de 940 px fără funcțiile de răspuns activate. Cu fișierul CSS receptiv adăugat, grila se adaptează la 724 px și 1170 px lățime, în funcție de portul dvs. de vizualizare. Sub ferestrele de vizualizare de 767 px, coloanele devin fluide și se stivuiesc vertical.

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

HTML grilă de bază

Pentru un aspect simplu cu două coloane, creați un .rowși adăugați numărul corespunzător de .span*coloane. Deoarece aceasta este o grilă cu 12 coloane, fiecare .span*se întinde pe un număr din acele 12 coloane și ar trebui să adauge întotdeauna până la 12 pentru fiecare rând (sau numărul de coloane din părintele).

  1. <div class = "rând" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </div>

Având acest exemplu, avem .span4și .span8, ceea ce înseamnă 12 coloane în total și un rând complet.

Coloane compensate

Mutați coloanele la dreapta folosind .offset*clase. Fiecare clasă mărește marginea din stânga a unei coloane cu o coloană întreagă. De exemplu, .offset4se deplasează .span4pe patru coloane.

4
3 offset 2
3 offset 1
3 offset 2
6 offset 3 
  1. <div class = "rând" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span3 offset2" > ... </div> 
  4. </div>

Cuibări coloane

Pentru a vă îngloba conținutul cu grila implicită, adăugați un nou .rowși un set de .span*coloane într-o .span*coloană existentă. Rândurile imbricate ar trebui să includă un set de coloane care se adună la numărul de coloane ale părintelui său.

Coloana de nivel 1
Nivelul 2
Nivelul 2 
  1. <div class = "rând" > 
  2.   <div class = "span9" > 
  3.     Coloana de nivel 1
  4.     <div class = "rând" > 
  5.       <div class = "span6" > Nivelul 2 </div> 
  6.       <div class = "span3" > Nivelul 2 </div> 
  7.     </div>
  8.   </div>
  9. </div>

Sistem de rețea de fluide

Exemplu de rețea fluidă live

Sistemul de grilă fluidă folosește procente în loc de pixeli pentru lățimile coloanelor. Are aceleași capacități de răspuns ca și sistemul nostru de rețea fixă, asigurând proporții adecvate pentru rezoluțiile și dispozitivele cheie ale ecranului.

1
1
1
1
1
1
1
1
1
1
1
1
4
4
4
4
8
6
6
12

HTML de bază al rețelei fluide

Faceți orice rând „fluid” schimbând .rowîn .row-fluid. Clasele de coloane rămân exact aceleași, ceea ce face ușoară trecerea între grilele fixe și fluide.

  1. <div class = "row-fluid" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </div>

Compensarea fluidelor

Funcționează în același mod ca și compensarea sistemului de grilă fixă: adăugați .offset*la orice coloană pentru a compensa cu atâtea coloane.

4
4 offset 4
3 offset 3
3 offset 3
6 offset 6 
  1. <div class = "row-fluid" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span4 offset2" > ... </div> 
  4. </div>

Cuibări fluide

Grilele fluide utilizează imbricarea în mod diferit: fiecare nivel imbricat de coloane ar trebui să adauge până la 12 coloane. Acest lucru se datorează faptului că grila fluidă folosește procente, nu pixeli, pentru a seta lățimi.

Lichidul 12
Lichidul 6
Lichidul 6
Lichidul 6
Lichidul 6 
  1. <div class = "row-fluid" > 
  2.   <div class = "span12" > 
  3.     Lichidul 12
  4.     <div class = "row-fluid" > 
  5.       <div class = "span6" > 
  6.         Lichidul 6
  7.         <div class = "row-fluid" > 
  8.           <div class = "span6" > Fluid 6 </div> 
  9.           <div class = "span6" > Fluid 6 </div> 
  10.         </div>
  11.       </div>
  12.       <div class = "span6" > Fluid 6 </div> 
  13.     </div>
  14.   </div>
  15. </div>

Aspecte

Aspect fix

Oferă un aspect comun cu lățime fixă ​​(și opțional receptiv) doar cu <div class="container">necesar.

  1. <corp>
  2.   <div class = "container" > 
  3.     ...
  4.   </div>
  5. </corp>

Dispunerea fluidului

Creați o pagină fluidă, cu două coloane, cu <div class="container-fluid">— excelent pentru aplicații și documente.

  1. <div class = "container-fluid" > 
  2.   <div class = "row-fluid" > 
  3.     <div class = "span2" > 
  4.       <!--Conținut din bara laterală-->
  5.     </div>
  6.     <div class = "span10" > 
  7.       <!--Conținutul corpului-->
  8.     </div>
  9.   </div>
  10. </div>

Design receptiv

Activarea funcțiilor de răspuns

Activați CSS receptiv în proiectul dvs. incluzând metaeticheta adecvată și foaia de stil suplimentară în <head>documentul dvs. Dacă ați compilat Bootstrap din pagina Personalizare, trebuie să includeți doar metaeticheta.

  1. <meta name = "viewport" content = "width=device-width, initial-scale=1.0" >  
  2. <link href = "assets/css/bootstrap-responsive.css" rel = "foaia de stil" >

Atenție!Bootstrap nu include funcții receptive în mod implicit în acest moment, deoarece nu totul trebuie să fie receptiv. În loc să încurajăm dezvoltatorii să elimine această caracteristică, considerăm că este mai bine să o activăm după cum este necesar.

Despre Bootstrap responsive

Dispozitive receptive

Interogările media permit CSS personalizat bazat pe o serie de condiții — rapoarte, lățimi, tip de afișare etc. — dar se concentrează de obicei în jurul min-widthși max-width.

  • Modificați lățimea coloanei din grila noastră
  • Stivuiți elementele în loc de plutiți oriunde este necesar
  • Redimensionați titlurile și textul pentru a fi mai potrivite pentru dispozitive

Utilizați interogările media în mod responsabil și doar ca început pentru audiența dvs. mobilă. Pentru proiecte mai mari, luați în considerare bazele de cod dedicate și nu straturi de interogări media.

Dispozitive acceptate

Bootstrap acceptă o serie de interogări media într-un singur fișier pentru a vă ajuta să faceți proiectele mai adecvate pe diferite dispozitive și rezoluții de ecran. Iată ce este inclus:

Eticheta Lățimea aspectului Lățimea coloanei Latimea jgheabului
Display mare 1200px și mai mult 70px 30px
Mod implicit 980 px și mai mult 60px 20px
Tablete portret 768 px și mai sus 42px 20px
Telefoane la tablete 767 px și mai jos Coloane fluide, fără lățimi fixe
Telefoane 480px și mai jos Coloane fluide, fără lățimi fixe 
  1. /* Desktop mare */
  2. @media ( min - lățime : 1200 px ) { ... }     
  3.  
  4. /* Tabletă portret către peisaj și desktop */
  5. @media ( lățime minimă : 768 px ) și ( lățime maximă : 979 px ) { ... }        
  6.  
  7. /* Telefon peisaj către tabletă portret */
  8. @media ( latime maxima : 767 px ) { ... }     
  9.  
  10. /* Telefoane peisaj și în jos */
  11. @media ( latime maxima : 480 px ) { ... }

Clase de utilitate receptive

Pentru o dezvoltare mai rapidă pentru dispozitive mobile, utilizați aceste clase de utilitate pentru afișarea și ascunderea conținutului pe dispozitiv. Mai jos este un tabel cu clasele disponibile și efectul acestora asupra unui anumit aspect al interogării media (etichetat în funcție de dispozitiv). Ele pot fi găsite în responsive.less.

Clasă Telefoane767 px și mai jos Tablete979 px până la 768 px Desktop-uriMod implicit
.visible-phone Vizibil
.visible-tablet Vizibil
.visible-desktop Vizibil
.hidden-phone Vizibil Vizibil
.hidden-tablet Vizibil Vizibil
.hidden-desktop Vizibil Vizibil

Când să utilizați

Utilizați pe o bază limitată și evitați să creați versiuni complet diferite ale aceluiași site. În schimb, folosiți-le pentru a completa prezentarea fiecărui dispozitiv. Utilitarele responsive nu trebuie utilizate cu tabele și, ca atare, nu sunt acceptate.

Caz de testare utilități receptive

Redimensionați browserul sau încărcați-vă pe diferite dispozitive pentru a testa clasele de mai sus.

Vizibil pe...

Bifele verzi indică faptul că clasa este vizibilă în fereastra curentă.

  • Telefon✔ Telefon
  • Comprimat✔ Tabletă
  • Desktop✔ Desktop

Ascuns pe...

Aici, bifele verzi indică faptul că clasa este ascunsă în fereastra curentă.

  • Telefon✔ Telefon
  • Comprimat✔ Tabletă
  • Desktop✔ Desktop