Share
În acest tutorial vă vom arăta cum să construiți rapid machete cu utilitarele flexbox responsabile de Bootstraps 4. Pentru a înțelege mai bine aceste utilități, vom examina patru exemple diferite.
Notă: acest tutorial presupune că sunteți familiarizat cu Bootstrap 4, precum și cu flexbox. Uitați-vă la aceste cursuri pentru a vă ajuta să mergeți în direcția cea bună.
Înainte de a trece prin exemplele noastre, să aruncăm o privire mai întâi la interogările de la Bootstrap. Cadrul definește cinci puncte de întrerupere a pixelilor pentru coloanele rețelei, care sunt prezentate în tabelul următor:
| Ecran | Dimensiunea ferestrei de vizualizare | Prefix de clasă |
|---|---|---|
| Extra mic | < 576px | .izare * |
| Mic | ≥ 576 px | .-col * SM |
| Mediu | ≥ 768 px | .col-MD- * |
| Mare | ≥ 992 px | .col-lg- * |
| Foarte mare | ≥ 1200px | .col-XL- * |
Până la afaceri! În primul exemplu, obiectivul nostru este de a centura pe orizontală și pe verticală conținutul dintr-o secțiune, după cum urmează:
Iată HTML-ul nostru:
Observați că am folosit o serie de clase legate de flexbox de la Bootstrap. De exemplu, indicăm faptul că secțiune Elementul este un container flexibil, oferindu-i d-flex clasă. În plus, pentru a centra conținutul .rând element (care este, în mod implicit, un container flexibil) în ambele direcții, folosim aliniaza-elemente-centru și justifică-conținut-centru clase.
Iată CSS asociat:
sectiune min-inaltime: 70vh; fundal-culoare: rgba (86,61,124, .15);
Și demonstrația Codepen:
În cel de-al doilea exemplu, obiectivul nostru este de a construi următoarea structură cu blocuri care conțin text aliniat la partea inferioară și superioară a fiecăruia.
Acesta este aspectul dorit pentru ecrane mari (atunci când lățimea ferestrei de vedere ≥ 1200px). Verificați demo-ul și redimensionați fereastra browserului pentru a vedea cum se modifică aspectul la dimensiuni mai restrânse ale ecranului.
Începem cu acest marcaj tipic Bootstrap:
...............
Inițial, ne vom concentra pe marcajul care stabilește aspectul pentru conținutul coloanelor. În interiorul fiecărei coloane, adăugăm următoarea marcare:
......
Din nou, în codul de mai sus am folosit un număr de clase legate de flexbox încorporate de Bootstrap:
Accentsconagua
d-flex: pentru a crea un container flexibil, transformând elementele directe ale copiilor în elemente flexibileflex-coloană: Pentru a seta o direcție verticalăaliniaza-elemente-end: pentru a alinia elementele flexibile la capătul axei x (în acest caz datorită direcției coloanei)justifică-conținut între: pentru a justifica elementele cu distanțe egale întreCSS-ul necesar pentru aspectul nostru:
corp margin-top: 30px; a, a: hover culoare: # 212529; a: hover text-decorare: nimic; .block height: 350px; fundal: rgba (86,61,124, .15); margin-bottom: 30px; .label font-size: .85rem; font-weight: bold;
Demonstrația Codepen:
Doar pentru practică, să luăm un minut și să ne gândim la două modalități alternative flexbox pentru a obține același aspect pentru conținutul coloanelor.
În primul rând, eliminăm justifică-conținut între clasa de la link și adăugați MB-auto clasa elementului cu clasa lui .eticheta. Alternativ, am fi putut modifica .Descriere element, dându - i clasa mt-auto.
HTML actualizat:
......
Acum, să verificăm din nou demo-ul:
Rezultatul pare același, corect?
Pentru oa doua încercare, am putea înlocui câteva linii ale marcajului nostru cu acest nou cod:
......
În acest moment verificăm demo-ul actualizat:
Încă o dată aspectul generat este exact ceea ce vrem!
În cel de-al treilea exemplu, vom începe cu un aspect similar exemplului anterior. Scopul nostru este de a manipula ordinea coloanelor a treia și a patra, în funcție de mărimea ferestrei de vizualizare.
Atunci când portul de vizualizare are o lățime de cel puțin 1200 de pixeli, comanda coloanelor ar trebui să fie următoarea:
În orice alt caz, comanda coloanelor se modifică; al treilea element ar trebui să vină după al patrulea:
Marcajul care definește aspectul rețelei:
...............
Observați Ordin-* clase care apar în coloanele a treia, a patra și a cincea.
Rețineți că, chiar dacă dorim să modificăm ordinea coloanelor a treia și a patra, trebuie să specificăm și ordinea pentru a cincea coloană. Dacă nu facem acest lucru, ultima coloană va urma întotdeauna cea de-a doua.
În interiorul fiecărei coloane centralizăm conținutul în ambele direcții cu următoarele clase de utilitate familiare:
Iată CSS asociat:
corp margin-top: 30px; .block height: 250px; culoare: # 212529; fundal: rgba (86,61,124, .15); margin-bottom: 30px;
Și, bineînțeles, demonstrația Codepen:
În ultimul exemplu, obiectivul nostru este să construim un antet receptiv.
Când fereastra browserului are o lățime de cel puțin 768 pixeli, antetul ar trebui să arate astfel:
Pe ecrane mai mici, aspectul său se modifică după cum urmează:
Pentru a vedea meniul, faceți clic pe butonul situat în colțul din dreapta.
HTML-ul nostru arată astfel:
În acest caz, folosim o combinație de clase personalizate împreună cu clasele Bootstrap.
Mulțumită ml auto am mutat a doua listă în colțul din dreapta al containerului părinte.
O parte din CSS-ul cerut este prezentat mai jos:
.nav-top fundal: rgba (86, 61, 124, 0.15); .container-fluid max-width: 1200px; . list-top marginea-stânga: 50px; .list li: nu (: ultimul-copil) margin-right: 15px; .list li a culoare: rgba (0, 0, 0, 0,5); tranziție: culoarea 0,2 secunde; .list li a: hover culoare: rgba (0, 0, 0, 0.7); text-decoration: nici unul; ecranul @media și (max-width: 767px) .list-top position: absolute; top: 70px; stânga: 0; dreapta: 0; transformare: translateX (-100%); margin-stânga: 0; padding: 1rem; tranziție: transformare 0,3s; .nav-top.is-activ. list-top transform: none; . list-top li flex-creștere: 1;
Iată JavaScript responsabil pentru comutarea vizibilității meniului mobil:
const: toggleMenu = document.querySelector (".menu comutare"); const navTop = document.querySelector ("nav-top"); toggleMenu.addEventListener ( "clic", () => navTop.classList.toggle ( "este activ"););Și demo-ul final:
În acest tutorial aprofundat, am abordat patru exemple din lumea reală care profită de utilitățile flexbox responsabile ale Bootstrap 4. Sper că v-ați bucurat de ceea ce am construit aici și v-au motivat să aplicați ceea ce ați învățat în viitoarele dvs. proiecte Bootstrap.
Ca întotdeauna, dacă aveți întrebări, anunțați-ne în comentariile de mai jos.
