Bootstrap

Schele

Bootstrap este construit pe o grilă receptivă cu 12 coloane. Am inclus, de asemenea, aspecte cu lățime fixă ​​și fluidă bazate pe acel sistem.

Stiluri globale pentru resetarea CSS, tipografie și linkuri

Necesită HTML5 doctype

Bootstrap folosește elemente HTML și proprietăți CSS care necesită utilizarea doctype HTML5. Asigurați-vă că îl includeți la începutul fiecărei pagini Bootstrapped din proiectul dvs.

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

Tipografie și link-uri

În fișierul scaffolding.less , setăm stilurile de afișare globală de bază, tipografie și linkuri. Mai exact, noi:

  • Îndepărtați marginea de pe 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

Resetați prin Normalizare

Începând cu Bootstrap 2, resetarea CSS tradițională a evoluat pentru a utiliza elemente din Normalize.css , un proiect al lui Nicolas Gallagher care alimentează și HTML5 Boilerplate .

Noua resetare poate fi găsită în continuare în reset.less , dar cu multe elemente eliminate pentru concizie și acuratețe.

Sistem de grilă implicit 12 coloane cu o răsucire receptivă

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

Sistemul de grilă implicit furnizat ca parte a Bootstrap este o grilă de 940 de pixeli, cu 12 coloane .

Are, de asemenea, patru variante receptive pentru diferite dispozitive și rezoluții: telefon, portret tabletă, peisaj tabletă și desktopuri mici și desktopuri cu ecran lat mare.

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

După cum se arată aici, un aspect de bază poate fi creat cu două „coloane”, fiecare acoperind un număr dintre cele 12 coloane de bază pe care le-am definit ca parte a sistemului nostru de grilă.


Coloane compensate

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

Cuibări coloane

Cu sistemul de grilă static (non-fluid) din Bootstrap, imbricarea este ușoară. Pentru a-ți imbrica conținutul, trebuie doar să adaugi un nou .rowși un set de .span*coloane într-o .span*coloană existentă.

Exemplu

Rândurile imbricate ar trebui să includă un set de coloane care se adună la numărul de coloane ale părintelui său. De exemplu, două coloane imbricate .span3ar trebui plasate într-un .span6.

Nivelul 1 al coloanei
Nivelul 2
Nivelul 2 
  1. <div class = "rând" > 
  2.   <div class = "span12" > 
  3.     Nivelul 1 al coloanei
  4.     <div class = "rând" > 
  5.       <div class = "span6" > Nivelul 2 </div> 
  6.       <div class = "span6" > Nivelul 2 </div> 
  7.     </div>
  8.   </div>
  9. </div>

Sistem de rețea fluidă 12 coloane receptive, bazate pe procente

Coloane de fluide

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

Procente, nu pixeli

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

Rânduri fluide

Faceți orice rând fluid pur și simplu schimbând .rowla .row-fluid. Coloanele rămân exact aceleași, făcând foarte simplu să comutați între aspecte fixe și fluide.

Markup

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

Cuibări fluide

Imbricarea cu grile fluide este puțin diferită: numărul de coloane imbricate nu trebuie să se potrivească cu cel părinte. În schimb, coloanele dvs. sunt resetate la fiecare nivel, deoarece fiecare rând ocupă 100% din coloana părinte.

Lichidul 12
Lichidul 6
Lichidul 6 
  1. <div class = "row-fluid" > 
  2.   <div class = "span12" > 
  3.     Nivelul 1 al coloanei
  4.     <div class = "row-fluid" > 
  5.       <div class = "span6" > Nivelul 2 </div> 
  6.       <div class = "span6" > Nivelul 2 </div> 
  7.     </div>
  8.   </div>
  9. </div>

Personalizare grilă

Variabil Valoare implicită Descriere
@gridColumns 12 Numar de coloane
@gridColumnWidth 60px Lățimea fiecărei coloane
@gridGutterWidth 20px Spațiu negativ între coloane

Variabile în LESS

În Bootstrap sunt încorporate o mână de variabile pentru personalizarea sistemului de grilă implicit de 940px, documentat mai sus. Toate variabilele pentru grilă sunt stocate în variabile.mai puțin.

Cum să personalizezi

Modificarea grilei înseamnă schimbarea celor trei @grid*variabile și recompilarea Bootstrap. Schimbați variabilele grilei în variabile.less și utilizați una dintre cele patru moduri documentate pentru a recompila . Dacă adăugați mai multe coloane, asigurați-vă că adăugați CSS-ul pentru cele din grid.less.

Rămâi receptiv

Personalizarea grilei funcționează doar la nivelul implicit, grila de 940 px. Pentru a menține aspectele receptive ale Bootstrap, va trebui, de asemenea, să personalizați grilele în responsive.less.

Aspecte Șabloane de bază pentru a crea pagini web

Aspect fix

Aspectul prestabilit și simplu, lat de 940 px, centrat, pentru aproape orice site web sau pagină furnizată de un singur <div class="container">.

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

Dispunerea fluidului

<div class="container-fluid">oferă o structură flexibilă a paginii, lățimi minime și maxime și o bară laterală din stânga. Este grozav 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 responsive Interogări media pentru diverse dispozitive și rezoluții

Dispozitive receptive

Ce fac ei

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
Smartphone-uri 480px și mai jos Coloane fluide, fără lățimi fixe
De la smartphone la tablete 767 px și mai jos Coloane fluide, fără lățimi fixe
Tablete portret 768 px și mai sus 42px 20px
Mod implicit 980 px și mai mult 60px 20px
Display mare 1200px și mai mult 70px 30px

Necesită metaetichetă

Pentru a vă asigura că dispozitivele afișează corect paginile receptive, includeți metaeticheta de vizualizare.

  1. <meta name = "viewport" content = "width=device-width, initial-scale=1.0" >

Utilizarea interogărilor media

Bootstrap nu include automat aceste interogări media, dar înțelegerea și adăugarea lor este foarte ușoară și necesită o configurare minimă. Aveți câteva opțiuni pentru a include funcțiile de răspuns ale Bootstrap:

  1. Utilizați versiunea responsive compilată, bootstrap-responsive.css
  2. Adăugați @import „responsive.less” și recompilați Bootstrap
  3. Modificați și recompilați responsive.less ca fișier separat

De ce nu o includeți? Adevărul să fie spus, 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.

  1.   // Peisaj telefoane și jos
  2.   @media ( latime maxima : 480 px ) { ... }     
  3.  
  4.   // Telefon peisaj către tabletă portret
  5.   @media ( latime maxima : 767 px ) { ... }     
  6.  
  7.   // Tabletă portret către peisaj și desktop
  8.   @media ( lățime minimă : 768 px ) și ( lățime maximă : 979 px ) { ... }        
  9.  
  10.   // Desktop mare
  11.   @media ( min - lățime : 1200 px ) { ... }

Clase de utilitate receptive

Ce sunt ei

Pentru o dezvoltare mai rapidă pentru dispozitive mobile, utilizați aceste clase de utilitate de bază pentru afișarea și ascunderea conținutului pe dispozitiv.

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.

De exemplu, ați putea afișa un <select>element pentru navigare pe aspectele mobile, dar nu pe tablete sau desktop-uri.

Cursuri de sprijin

Afișat aici este un tabel cu clasele pe care le acceptăm ș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ă Telefoane480px și mai jos Tablete767 px și mai jos Desktop-uri768 px și mai sus
.visible-phone Vizibil
.visible-tablet Vizibil
.visible-desktop Vizibil
.hidden-phone Vizibil Vizibil
.hidden-tablet Vizibil Vizibil
.hidden-desktop Vizibil Vizibil

Caz de testare

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