Conectarea și utilizarea bootstrap - Elementele de bază curs css de la devionity

Conexiune. Pentru a conecta cadrul necesar fie să descărcați un lot de fișiere și de a le conecta în tag-ul . sau de a le conecta la distanță - în același loc. De exemplu,

Pentru a afișa conținutul paginii în cadrul, a dezvoltat așa-numitul Sistem Grid (sistem grid), care permite crearea (implicit) până la 12 coloane și linii (asociate) pe pagina, iar această construcție poate depinde de dispozitivul pe care este accesat pagina.

De exemplu, pentru o dimensiune medie (dispozitive medii) dispozitive pot defini coloanele după cum urmează:

→ Pentru ecran complet

va însemna că două coloane, dintre care prima are o lungime convențională de 8, iar al doilea - 4 din 12. Suma acestor valori în mod evident ca da 12. De fapt, lățimea coloanei este stabilită în mod proporțional. Un alt exemplu:

Aceasta înseamnă că, coloana 3 este aceeași lățime. sau

Aceasta înseamnă 1 coloană se întinde pe întreaga lățime a ecranului.

Evident, dispozitivul mobil nu împreună aspect destinat pentru PC. Configurațiile de mai sus pe un dispozitiv mobil nu va fi afișat sub formă de coloane, și unul sub celălalt - deoarece acestea nu au suficient spațiu orizontal. În cadrul, au fost dezvoltate clase speciale pentru lucrul cu dispozitive mobile. Aceste clase pot fi specificate pentru un aspect alternativ, în cazul în care un dispozitiv mobil (xs - dispozitive mobile, sm - dispozitive mici). De exemplu,

Aceasta înseamnă că două celule în structura, dar proporția de lățimea lor va fi diferit când sunt afișate pe un PC sau un dispozitiv mobil 8 și PC 4 pe o singură linie, sau 2 și 10 pe dispozitivul mobil. In concluzie, cele două perechi de valori dau o deoarece 12 va fi plasat într-o singură linie.

Creați un meniu. Pentru a crea un meniu folosind clasa nav (în bloc din această clasă sunt plasate butoane sau link-uri) și clasa navbar în care este pus de navigare gata. De exemplu,

Navbar - componenta de adaptare, care este utilizat ca unitate cu navigarea pe site.

Adaptabilitatea în acest caz constă în faptul că aceste componente sunt „prăbușit“ atunci când sunt afișate pe dispozitive mobile, în cazul în care elementele de navigare nu se potrivesc orizontal.

→ Pentru ecran complet

articole similare