2011. aastal tutvustas Twitter Bootstrapi raamistikku. Sellest ajast alates on see CSS-i raamistik näinud kaks suurt ümberkirjutamist, millest viimane (Bootstrap 3) ilmus 2013. aastal. Bootstrap 3 muutis CSS-i teeki, rakendades mobiilipõhist lähenemisviisi, mis jättis raamistiku täielikult reageerivaks.
Alates 2022. aastast on Bootstrap viies versioon ja see on üks populaarsemaid esiosa raamistikke. Sellel on ulatuslik eelehitatud komponentide loend ja muljetavaldav JavaScripti pistikprogrammide kogu. Sellest artiklist saate teada, kuidas Bootstrapi kasutada ja selle funktsioone maksimaalselt ära kasutada.
Bootstrapi installimine teie projekti
Selleks on kolm võimalust kasutage oma projektis Bootstrapi. Saate alla laadida ja hostida CSS- ja JavaScript-faile, installida need oma projekti kasutades npm-i või kopeerida ja kleepida oma projekti sobivad cdn-lingid.
cdn-lähenemise korral peate meeles pidama, et Bootstrap link asetatakse HTML-faili head-märgendisse enne mis tahes muud CSS-i linki.
Mõnel Bootstrapi komponendil on funktsionaalsed tegevused, näiteks nuppude vahetamine ja positsioneerimine, mis nõuab JavaScripti ja Popperi skripti importimist. Seega, kui kavatsete kasutada funktsionaalseid komponente, peate oma HTML-failile lisama ka skriptimärgendi.
Viimane asi, mida Bootstrapi kasutama hakkate, on vaateava silt.
Kuna Bootstrap on mobiilipõhine tehnoloogia, vaateava silt aitab tundlikul disainil. Lihtne viis oma projektis alglaadimise kasutamiseks on lihtsalt kopeerida Bootstrapi käivitusmall.
Veebisaidi loomine Bootstrapiga
Kui loote uut veebisaiti, on üks esimesi asju, mida peate kaaluma, paigutus. Pärast seda saate liikuda muudele komponentidele, nagu nupud ja tüpograafia.
Bootstrapil on struktuurikomponentide kogu, mida saate kasutada veebilehe elementide korraldamiseks. Need paigutusstruktuurid hõlmavad järgmist:
- Konteinerid
- Võre
- Veerud
- Vihmaveerennid
- Katkestuspunktid
Kasutades Bootstrapi käivitusmalli veidi muudetud versiooni, saate hakata oma veebilehe struktuuri kirjeldama ja uusi komponente lisama.
Fail index.html
Nõutavad metasildidBootstrap CSS
Bootstrap
Eraldi Popper ja Bootstrap JS
Bootstrapi konteineriklass
Bootstrap konteiner klassi padjad, sisaldab ja joodab teie veebilehe elemente. Kui kavatsete kasutada Bootstrapi vaikevõrk, siis peate kasutama ka Bootstrapi konteiner klass. On kolme tüüpi konteiner klassid; konteiner, konteiner-vedelik, ja konteiner-{murdepunkt}. Konteinerklass on vaikemahuti; see on tundlik ja sellel on fikseeritud laius igas Bootstrapsi kuues katkestuspunktis.
Bootstrapi kuus vaikemurdepunkti hõlmavad järgmist:
- Eriti väike: Vähem kui 576 pikslit.
- Väike: Suurem kui 576 pikslit või sellega võrdne.
- Keskmine: Suurem kui 768 pikslit või sellega võrdne.
- Suur: Suurem kui 992 pikslit või sellega võrdne.
- X-Large: Suurem kui 1200 pikslit või sellega võrdne.
- XX-suur: Suurem kui 1400 pikslit või sellega võrdne.
Bootstrapi kasutamiseks konteiner oma projektis saate lihtsalt lisada soovitud konteineriklassi välisele div oma veebilehel.
Bootstrapi konteineri kasutamine
paigutage veebisaidi elemendid siia Ülaltoodud koodi sisestamine olemasoleva HTML-faili sisusse muudab teie veebilehe tundlikuks ja loob ka täidise teie veebilehe mõlemale küljele.
Bootstrap Grid System
Bootstrapi ruudustik kasutab kaheteistkümne veeruga süsteemi, mis tugineb rida ja kol võrguklassid, samuti konteinerklass. Igal real on kaksteist veergu ja mis tahes element võib ulatuda üle ühe või mitme veeru. Veeruklass näitab, mitu veergu üks element peaks hõivama. Näiteks element, mis kasutab kol-2 klass hõlmab kahte veergu, üks element kasutab kol-3 klass läbib kolme veeru ja nii edasi.
Bootstrap grid süsteem põhineb flexbox moodulil. Kui reas on ainult kaks veergu, jagavad nad ruumi omavahel võrdselt. The vihmaveerenn klass on üks Bootstrapi struktuurielemente ja see reguleerib iga veeru vahekaugust võrgusüsteem. Iga võre veerus on mõlemal küljel 12 pikslit täidis.
Bootstrapi võrgusüsteemi kasutamine
veebilehe põhisisu
Artikkel
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorem porro non quae
obcaecati illo laboriosam a, voluptate molestias eum velit, differentio impedit
ratione facere numquam, optio eligendi delectus cumque quos.
Ülaltoodud koodi sisestamine konteineri divisse loob kolmest reast ja kahest veerust koosneva Bootstrapi ruudustikusüsteemi. Ülemises esimeses reas on navigeerimisriba, allosas olevas kolmandas reas veebisaidi jalus ja teisele reale keskel veebilehe sisu. Teisel real on kaks veergu – põhiartikkel ja kõrval.
Kohaliku CSS-faili loomine ja ruudustiku igale jaotisele äärise lisamine võimaldab teil seda selgemalt näha.
Fail style.css
.row{
ääris: 2px sinine tahke;
}
.col, .col-sm-4{
ääris: 2px punane tahke;
}
Ülaltoodud CSS-failiga linkimine loob teie brauseris järgmise väljundi:
Ilmne erinevus ülaltoodud pildil on veergude suurus. Tavaliselt võtavad kaks (või enam) veergu reas sama palju ruumi, kui te ei ole sõnaselgelt teisiti öelnud. The kol-sm-4 klass ülaltoodud HTML-koodis tagab, et teine veerg hõlmab ainult nelja rea kaheteistkümnest veerust. The sm aastal kol-sm-4 klass tähistab väikest katkestuspunkti, nii et kõrvalosa hõivab väikesest murdepunktist ja kõrgemast ainult neli veergu.
Bootstrapi komponendid
Kui olete oma veebilehe paigutuse üle otsustanud, on järgmine samm lisada veebisaidi loomise elemendid, mida Bootstrap nimetab komponentideks. Bootstrapi komponentide loend sisaldab:
- Navibar
- Nupud
- Nupurühm
- Loendi rühm
- Kaardid
- Ahenda
- Rippmenüüd
Bootstrapi navigeerimisriba klass
Iga Bootstrapi navigeerimisriba nõuab navigeerimisriba klass. Need nõuavad ka või määrates Bootstrapile märksõna "navigeerimine". rolli atribuut navigeerimisriba vanemas div. Navigeerimisriba tundlikuks muutmiseks peate kasutama ahenda JavaScripti pistikprogramm.
Bootstrap navigeerimisriba klass kasutab an aaria-vool atribuut, mis võtab praeguse lehe tähistamiseks väärtuse „leht” või veebilehe praeguse jaotise tähistamiseks „tõene”. Määratav väärtus sõltub teie veebisaidi struktuurist (üks leht või mitu lehekülge). Samuti peaksite kasutama aktiivne klass praeguse lehe või jaotise näitamiseks.
Bootstrapi navigeerimisriba kasutamine
Navigeerimise asendamine rida Bootstrapist võre ülaltoodud koodiga loob teie brauseris järgmise väljundi:
Ülaltoodud koodis on veel mitmeid olulisi klasse ja Bootstrapi atribuute, näiteks navbar-bränd klass, mis sihib teie logo jaotist navigeerimisriba. The navigeerimisriba on ka täielikult reageeriv tänu ahenda JavaScripti pistikprogramm.
Tundlik Navbar
Võib-olla mäletate, et Bootstrapil on kuus vaikimisi murdepunktid ja üks neist murdepunktidest on suur (lg). The navbar-expand-lg klassis ülalolev laieneb navigeerimisüksuste horisontaalseks loendiks suures ja kõrgemas katkestuspunktis ning see loend taandub nupuks mis tahes allpool suures katkestuspunktis.
Kui soovite responsiivsete veebisaitide loomise kohta lisateavet, oleme koostanud ülevaate kuidas seda teha HTML-i ja CSS-i meediumipäringutega.
Alglaadimisnupu komponent
Bootstrap nuppu komponent kasutab ja nõuab, et määraksite tüüp atribuut "nupule".
Bootstrapil on mitut tüüpi nuppe. Tavapärasema nupu loomiseks kasutaksite nuppu btn klassis, kuid hamburgeri nupu loomiseks, nagu ülaltoodud koodis, peaksite kasutama navigeerimisriba-lüliti klass.
Millal peaksite Bootstrapi kasutama?
Bootstrap on tuntud kui üks populaarsemaid CSS-i raamistikke, kuna see on teerajaja. Ammu enne seda, kui tundlik disain oli tarkvaraarenduses nii tavaline, muutis Bootstrap end täielikult reageerivaks raamistikuks.
Aastate jooksul on Bootstrap jätkuvalt arenenud ja täiustatud, muutes selle tippettevõtete, nagu Twitter ja Spotify, valikuks number üks. Siiski ei ole see alati teie tarkvaraarenduse vajaduste jaoks parim valik. Näiteks kui loote Reacti rakendust, on olemas disainisüsteem nimega MUI, mis on kohandatud Reacti rakenduste jaoks.
Material-UI on saanud uue nime ja selle eesmärk on luua Material Designile uus disainisüsteem. Siit saate teada, kuidas saate ReactJS-i projektides MUI-d kasutada.
Loe edasi
- Programmeerimine
- Kodeerimise näpunäited
- Programmeerimine
- Programmeerimistööriistad
Kadeisha Kean on täisstacki tarkvaraarendaja ja tehniline/tehnoloogiakirjutaja. Tal on selge võime lihtsustada mõningaid kõige keerukamaid tehnoloogilisi kontseptsioone; Tootma materjali, mis on kergesti mõistetav igale tehnoloogiaalgajale. Ta on kirglik kirjutamise, huvitava tarkvara arendamise ja maailmas reisimise vastu (dokumentaalfilmide kaudu).
Liituge meie uudiskirjaga
Liituge meie uudiskirjaga tehniliste näpunäidete, arvustuste, tasuta e-raamatute ja eksklusiivsete pakkumiste saamiseks!
Tellimiseks klõpsake siin
