În 2011, Twitter a introdus cadrul Bootstrap. De atunci, acest cadru CSS a cunoscut două rescrieri majore, cea mai recentă (Bootstrap 3) lansată în 2013. Bootstrap 3 a transformat biblioteca CSS prin implementarea unei abordări mobile-first care a lăsat cadrul complet receptiv.
Începând cu 2022, Bootstrap se află la versiunea cinci și este unul dintre cele mai populare framework-uri frontend. Are o listă extinsă de componente prefabricate și o colecție impresionantă de pluginuri JavaScript. În acest articol, veți învăța cum să utilizați Bootstrap și să profitați la maximum de funcțiile sale.
Instalarea Bootstrap în proiectul dvs
Există trei moduri de a utilizați Bootstrap în proiectul dvs. Puteți descărca și găzdui fișierele CSS și JavaScript, le puteți instala în proiectul dvs. folosind npm sau puteți copia și lipi linkurile cdn corespunzătoare în proiectul dvs.
Cu abordarea cdn, trebuie să vă amintiți să plasați linkul Bootstrap înaintea oricărui alt link CSS în eticheta head a fișierului HTML.
Unele componente Bootstrap au activități funcționale, cum ar fi comutarea butoanelor și poziționarea, care necesită importarea JavaScript și a scriptului Popper. Deci, dacă intenționați să utilizați componente funcționale, va trebui să adăugați și eticheta de script în fișierul HTML.
Ultimul lucru de care aveți nevoie pentru a începe să utilizați Bootstrap este fereastra de vizualizare etichetă.
Având în vedere că Bootstrap este o tehnologie care are prioritate pe mobil, fereastra de vizualizare etichetă va ajuta la proiectarea receptivă. O modalitate simplă de a utiliza bootstrap în proiectul dvs. este să copiați Șablonul de pornire al Bootstrap.
Crearea unui site web cu Bootstrap
Când creați un site web nou, unul dintre primele lucruri pe care trebuie să le luați în considerare este aspectul. După aceea, puteți trece la alte componente, cum ar fi butoanele și tipografia.
Bootstrap are o colecție de componente structurale pe care le puteți folosi pentru a organiza elemente pe o pagină web. Aceste structuri de layout includ:
- Containere
- Grilă
- Coloane
- Jgheaburi
- Puncte de întrerupere
Folosind o versiune ușor modificată a șablonului de pornire Bootstrap, puteți începe să subliniați structura paginii dvs. web și să adăugați componente noi.
Fișierul index.html
Meta-etichete necesareBootstrap CSS
Bootstrap
Separați Popper și Bootstrap JS
Clasa de containere Bootstrap
Bootstrap-ul recipient class pads, conține și aliniază elementele de pe pagina dvs. web. Dacă intenționați să utilizați Bootstrap grila implicita, atunci va trebui să utilizați și Bootstrap recipient clasă. Există trei tipuri de recipient clase; recipient, recipient-fluid, și container-{punct de întrerupere}. Clasa container este containerul implicit; este receptiv și are o lățime fixă la fiecare dintre cele șase puncte de întrerupere Bootstraps.
Cele șase puncte de întrerupere implicite ale Bootstrap includ:
- Extra mic: Mai puțin de 576 px.
- Mic: Mai mare sau egală cu 576 px.
- Mediu: Mai mare sau egală cu 768 px.
- Mare: Mai mare sau egală cu 992 px.
- Extra larg: Mai mare sau egală cu 1200 px.
- XX-Mare: Mai mare sau egală cu 1400 px.
Pentru a utiliza Bootstrap recipient în proiectul dvs., puteți pur și simplu să adăugați clasa de container dorită la cea externă div pe pagina ta web.
Folosind containerul Bootstrap
plasați aici elementele site-ului Introducerea codului de mai sus în corpul fișierului dvs. HTML existent va face pagina dvs. web receptivă și, de asemenea, va crea umplutură pe fiecare parte a paginii dvs. web.
Sistemul de grilă Bootstrap
Grila Bootstrap folosește un sistem cu douăsprezece coloane care se bazează pe rând și col clase grid, precum și clasa container. Fiecare rând are douăsprezece coloane și orice element se poate întinde pe una sau mai multe dintre aceste coloane. Clasa de coloane va indica câte coloane ar trebui să ocupe un element. De exemplu, un element care utilizează col-2 clasa se va întinde pe două coloane, un element care utilizează col-3 clasa se va întinde pe trei coloane și așa mai departe.
Sistemul de grilă Bootstrap se bazează pe modulul flexbox. Dacă doar două coloane ocupă un rând, ele vor împărți spațiul în mod egal între ele. The jgheab clasa este unul dintre elementele structurale ale Bootstrap și controlează distanța dintre fiecare coloană din sistem grilă. Fiecare grilă coloana are 12px de umplutură pe ambele părți.
Folosind sistemul de grilă Bootstrap
conținutul principal pe o pagină web
Articol
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorem porro non quae
obcaecati illo laboriosam a, voluptate molestias eum velit, distinctio impedit
ratione facere numquam, optio eligendi delectus cumque quos.
Inserarea codului de mai sus în div-ul containerului va crea un sistem de grilă Bootstrap de trei rânduri și două coloane. Primul rând din partea de sus va conține bara de navigare, al treilea rând din partea de jos va conține subsolul site-ului, iar al doilea rând din mijloc va conține conținutul paginii web. Al doilea rând are două coloane - articolul principal și o parte.
Crearea unui fișier CSS local și adăugarea unui chenar la fiecare secțiune a grilei vă va permite să îl vedeți mai clar.
Fișierul style.css
.rând{
chenar: 2px albastru solid;
}
.col, .col-sm-4{
chenar: 2px roșu solid;
}
Conectarea la fișierul CSS de mai sus va crea următoarea ieșire în browser:
O diferență evidentă în imaginea de mai sus este dimensiunea coloanelor. De obicei, două (sau mai multe) coloane dintr-un rând ocupă aceeași cantitate de spațiu, cu excepția cazului în care declarați altfel în mod explicit. The col-sm-4 clasa din codul HTML de mai sus asigură că a doua coloană se întinde doar peste patru dintre cele douăsprezece coloane din rând. The sm în col-sm-4 clasa reprezintă punctul de întrerupere mic, deci, secțiunea deoparte va ocupa doar patru coloane de la punctul de întrerupere mic și mai sus.
Componente Bootstrap
După ce v-ați decis asupra aspectului paginii dvs. web, următorul pas este să adăugați elemente de construcție a site-ului web, pe care Bootstrap le numește componente. Lista de componente Bootstrap include:
- Bara de navigare
- Butoane
- Grup de butoane
- Lista grupului
- Carduri
- Colaps
- Meniuri derulante
Clasa Bootstrap Navbar
Fiecare bară de navigare Bootstrap necesită bara de navigare clasă. Ele necesită, de asemenea, utilizarea sau atribuirea cuvântului cheie „navigare” la Bootstrap rol atribut în părintele barei de navigare div. Pentru a face bara de navigare receptivă, va trebui să utilizați restrânge pluginul JavaScript.
Bootstrap-ul bara de navigare clasa foloseste an aria-curent atribut care ia valoarea „pagină” pentru a indica pagina curentă sau „adevărat” pentru a indica secțiunea curentă a unei pagini web. Valoarea pe care o atribui va depinde de structura site-ului dvs. (o singură pagină sau mai multe pagini). De asemenea, ar trebui să utilizați clasa activă pentru a indica pagina sau secțiunea curentă.
Folosind bara de navigare a Bootstrap
Înlocuirea navigației rând a Bootstrap-ului grilă cu codul de mai sus va crea următoarea ieșire în browser:
Există câteva alte clase importante și atribute Bootstrap în codul de mai sus, cum ar fi navbar-brand clasa, care vizează secțiunea logo-ului dvs bara de navigare. The bara de navigare este, de asemenea, complet receptiv datorită restrânge pluginul JavaScript.
Bara de navigare receptivă
Vă amintiți că Bootstrap are șase implicite puncte de întrerupere iar unul dintre aceste puncte de întrerupere este mare (lg). The navbar-expand-lg clasa în de mai sus se extinde într-o listă orizontală de elemente de navigare la punctul de întrerupere mare și mai sus, iar acea listă revine la un buton la orice punct de întrerupere sub mare.
Dacă doriți să aflați mai multe despre crearea de site-uri web responsive, am alcătuit o bucată de contur cum să faci asta cu interogări media în HTML și CSS.
Componenta butonului Bootstrap
Bootstrap-ul buton componenta foloseste și necesită să setați tip atributul „butonului”.
Bootstrap are mai multe tipuri de butoane. Pentru a crea butonul mai convențional, ați folosi btn clasa, dar pentru a crea un buton hamburger ca în codul de mai sus, ați folosi navbar-toggle clasă.
Când ar trebui să utilizați Bootstrap?
Bootstrap este cunoscut ca unul dintre cele mai populare cadre CSS, deoarece este un pionierat. Cu mult înainte ca designul responsive să fie atât de obișnuit în dezvoltarea de software, Bootstrap s-a transformat într-un cadru complet responsive.
De-a lungul anilor, Bootstrap a continuat să avanseze și să se îmbunătățească, făcându-l alegerea numărul unu pentru companii de top, cum ar fi Twitter și Spotify. Cu toate acestea, nu va fi întotdeauna cea mai bună opțiune pentru nevoile dvs. de dezvoltare software. De exemplu, dacă creați o aplicație React, există un sistem de design numit MUI care este personalizat pentru aplicațiile React.
Material-UI are un nou nume și își propune să creeze un nou sistem de design alternativ la Material Design. Iată cum puteți utiliza MUI în proiectele ReactJS.
Citiți în continuare
- Programare
- Stare de nervozitate
- Sfaturi de codare
- Programare
- Instrumente de programare
Kadeisha Kean este un dezvoltator de software Full-Stack și un scriitor tehnic/tehnologic. Are capacitatea distinctă de a simplifica unele dintre cele mai complexe concepte tehnologice; producând material care poate fi ușor de înțeles de orice novice în tehnologie. Este pasionată de scris, de dezvoltare de software interesant și de călătorie prin lume (prin documentare).
Aboneaza-te la newsletter-ul nostru
Alăturați-vă buletinului nostru informativ pentru sfaturi tehnice, recenzii, cărți electronice gratuite și oferte exclusive!
Click aici pentru a te abona