2011. gadā Twitter ieviesa Bootstrap sistēmu. Kopš tā laika šī CSS sistēma ir piedzīvojusi divas lielas pārrakstīšanas, no kurām jaunākā (Bootstrap 3) tika izlaista 2013. gadā. Bootstrap 3 pārveidoja CSS bibliotēku, ieviešot pieeju mobilajām ierīcēm, kas atstāja ietvaru pilnībā atsaucīgu.
No 2022. gada Bootstrap ir piektā versija un ir viens no populārākajiem priekšgala ietvariem. Tam ir plašs iepriekš izveidoto komponentu saraksts un iespaidīga JavaScript spraudņu kolekcija. Šajā rakstā jūs uzzināsit, kā lietot Bootstrap un maksimāli izmantot tās funkcijas.
Bootstrap instalēšana jūsu projektā
Ir trīs veidi, kā savā projektā izmantojiet Bootstrap. Varat lejupielādēt un mitināt CSS un JavaScript failus, instalēt tos savā projektā, izmantojot npm, vai kopēt un ielīmēt atbilstošās cdn saites savā projektā.
Izmantojot cdn pieeju, HTML faila head tagā ir jāievieto Bootstrap saite pirms jebkuras citas CSS saites.
Dažiem Bootstrap komponentiem ir funkcionālas darbības, piemēram, pogu pārslēgšana un pozicionēšana, kas prasa JavaScript un Popper skripta importēšanu. Tātad, ja plānojat izmantot kādus funkcionālus komponentus, HTML failam būs jāpievieno arī skripta tags.
Pēdējā lieta, kas jums nepieciešama, lai sāktu lietot Bootstrap, ir skata logs tagu.
Tā kā Bootstrap ir mobilajām ierīcēm paredzēta tehnoloģija, skata logs tagu palīdzēs izveidot atsaucīgu dizainu. Vienkāršs veids, kā projektā izmantot bootstrap, ir vienkārši kopēt Bootstrap sākuma veidne.
Vietnes izveide, izmantojot Bootstrap
Veidojot jaunu vietni, viena no pirmajām lietām, kas jāņem vērā, ir izkārtojums. Pēc tam varat pāriet uz citiem komponentiem, piemēram, pogām un tipogrāfiju.
Bootstrap ir strukturālu komponentu kolekcija, ko varat izmantot, lai sakārtotu elementus tīmekļa lapā. Šīs izkārtojuma struktūras ietver:
- Konteineri
- Režģis
- Kolonnas
- Notekcaurules
- Pārtraukuma punkti
Izmantojot nedaudz mainītu sāknēšanas veidnes Bootstrap versiju, varat sākt ieskicēt savas tīmekļa lapas struktūru un pievienot jaunus komponentus.
Fails index.html
Nepieciešamie metatagiBootstrap CSS
Bootstrap
Atsevišķs Popper un Bootstrap JS
Bootstrap konteineru klase
Bootstrap konteiners klases spilventiņi, satur un izlīdzina elementus jūsu tīmekļa lapā. Ja plānojat izmantot Bootstrap noklusējuma režģis, tad jums būs jāizmanto arī Bootstrap konteiners klasē. Ir trīs veidu konteiners klases; konteiners, konteiners-šķidrums, un konteiners-{breakpoint}. Konteinera klase ir noklusējuma konteiners; tas ir atsaucīgs, un tam ir fiksēts platums katrā no Bootstraps sešiem pārtraukuma punktiem.
Bootstrap seši noklusējuma pārtraukuma punkti ietver:
- Īpaši mazs: Mazāk nekā 576 pikseļi.
- Mazs: Lielāks vai vienāds ar 576 pikseļiem.
- Vidēja: Lielāks vai vienāds ar 768 pikseļiem.
- Liels: Lielāks vai vienāds ar 992 pikseļiem.
- X liels: Lielāks vai vienāds ar 1200 pikseļiem.
- XX liels: Lielāks vai vienāds ar 1400 pikseļiem.
Lai izmantotu Bootstrap konteiners savā projektā varat vienkārši pievienot vajadzīgo konteinera klasi ārējam div savā tīmekļa lapā.
Bootstrap konteinera izmantošana
ievietojiet šeit vietnes elementus Iepriekš minētā koda ievietošana esošā HTML faila pamattekstā padarīs jūsu tīmekļa lapu adaptīvu, kā arī izveidos polsterējumu katrā tīmekļa lapas pusē.
Bootstrap režģa sistēma
Bootstrap režģis izmanto divpadsmit kolonnu sistēmu, kas balstās uz rinda un kol režģa klases, kā arī konteineru klases. Katrā rindā ir divpadsmit kolonnas, un jebkurš elements var aptvert vienu vai vairākas no šīm kolonnām. Kolonnu klase norādīs, cik kolonnu elementam vajadzētu aizņemt. Piemēram, elements, kas izmanto kolonna-2 klase aptvers divas kolonnas, elementu izmantojot kolonna-3 klase aptvers trīs kolonnas un tā tālāk.
Bootstrap režģa sistēma ir balstīta uz flexbox moduli. Ja rindu aizņem tikai divas kolonnas, tās sadalīs vietu savā starpā vienādi. The noteka klase ir viens no Bootstrap strukturālajiem elementiem, un tas kontrolē atstarpi starp katru kolonnu režģa sistēma. Katrs režģis kolonnā abās pusēs ir 12 pikseļu polsterējums.
Izmantojot Bootstrap režģa sistēmu
galvenais tīmekļa lapas saturs
Raksts
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.
Ievietojot iepriekš minēto kodu konteinera div, tiks izveidota Bootstrap režģa sistēma, kas sastāv no trim rindām un divām kolonnām. Pirmajā rindā augšpusē būs navigācijas josla, trešajā rindā būs vietnes kājene, bet otrajā rindā vidū būs tīmekļa lapas saturs. Otrajā rindā ir divas kolonnas — galvenais raksts un malā.
Vietējā CSS faila izveide un apmales pievienošana katrai režģa sadaļai ļaus to redzēt skaidrāk.
Fails style.css
.row{
apmale: 2 pikseļi zilā cietā krāsā;
}
.col, .col-sm-4{
apmale: 2px sarkans ciets;
}
Izveidojot saiti uz iepriekš minēto CSS failu, jūsu pārlūkprogrammā tiks izveidota šāda izvade:
Acīmredzama atšķirība attēlā iepriekš ir kolonnu izmērs. Parasti divas (vai vairākas) kolonnas rindā aizņem tikpat daudz vietas, ja vien nav skaidri norādīts citādi. The kol-sm-4 klase iepriekš minētajā HTML kodā nodrošina, ka otrā kolonna aptver tikai četras no divpadsmit rindas kolonnām. The sm iekš kol-sm-4 klase apzīmē mazo pārtraukuma punktu, tāpēc malā esošā sadaļa aizņems tikai četras kolonnas no mazā pārtraukuma punkta un augstāk.
Bootstrap komponenti
Kad esat izlēmis par savas tīmekļa lapas izkārtojumu, nākamais solis ir pievienot vietnes veidošanas elementus, kurus Bootstrap sauc par komponentiem. Bootstrap komponentu sarakstā ir:
- Navigbar
- Pogas
- Pogu grupa
- Saraksta grupa
- Kartes
- Sakļaut
- Nolaižamās izvēlnes
Bootstrap navigācijas joslas klase
Katrai Bootstrap navigācijas joslai ir nepieciešama navigācijas josla klasē. Tie arī prasa izmantot vai piešķirot Bootstrap atslēgvārdu “navigācija”. lomu atribūts navigācijas joslas vecākajā div. Lai navigācijas josla būtu atsaucīga, jums būs jāizmanto sakļaut JavaScript spraudni.
Bootstrap navigācijas josla klase izmanto an ārija-strāva atribūts, kas izmanto vērtību “lapa”, lai norādītu pašreizējo lapu, vai “true”, lai norādītu pašreizējo tīmekļa lapas sadaļu. Jūsu piešķirtā vērtība būs atkarīga no jūsu vietnes struktūras (viena lapa vai vairākas lapas). Jums vajadzētu arī izmantot aktīvā klase lai norādītu pašreizējo lapu vai sadaļu.
Izmantojot Bootstrap navigācijas joslu
Navigācijas nomaiņa rinda no Bootstrap režģis Izmantojot iepriekš minēto kodu, jūsu pārlūkprogrammā tiks izveidota šāda izvade:
Iepriekš minētajā kodā ir vairākas citas svarīgas klases un Bootstrap atribūti, piemēram, navbar-zīmols klasē, kuras mērķauditorija tiek atlasīta jūsu vietnes logotipa sadaļā navigācijas josla. The navigācijas josla ir arī pilnībā atsaucīgs, pateicoties sakļaut JavaScript spraudni.
Atsaucīga navigācijas josla
Varat atcerēties, ka Bootstrap ir seši noklusējuma iestatījumi pārtraukuma punkti un viens no šiem pārtraukuma punktiem ir liels (lg). The navbar-expand-lg klasē augšējais tiek izvērsts horizontālā navigācijas vienumu sarakstā lielajā pārtraukuma punktā un augstāk, un šis saraksts tiek atjaunots uz pogas jebkurā pārtraukuma punktā, kas ir zemāks par lielu.
Ja vēlaties uzzināt vairāk par adaptīvu vietņu izveidi, mēs esam izveidojuši aprakstu kā to izdarīt ar multivides vaicājumiem HTML un CSS.
Bootstrap pogas komponents
Bootstrap pogu komponents izmanto un jums ir jāiestata veids atribūts “pogai”.
Bootstrap ir vairāku veidu pogas. Lai izveidotu parastu pogu, izmantojiet btn klasē, bet, lai izveidotu hamburgera pogu, kā norādīts iepriekš minētajā kodā, izmantojiet Navigbar-toggle klasē.
Kad jums vajadzētu izmantot Bootstrap?
Bootstrap ir pazīstams kā viens no populārākajiem CSS ietvariem, jo tas ir celmlauzis. Ilgi pirms atsaucīgais dizains bija tik ierasts programmatūras izstrādē, Bootstrap pārveidoja sevi par pilnībā atsaucīgu sistēmu.
Gadu gaitā Bootstrap ir turpinājis attīstīties un uzlaboties, padarot to par labāko uzņēmumu, piemēram, Twitter un Spotify, izvēli. Tomēr tas ne vienmēr būs labākais risinājums jūsu programmatūras izstrādes vajadzībām. Piemēram, ja veidojat React lietojumprogrammu, ir izstrādāta dizaina sistēma ar nosaukumu MUI, kas ir pielāgota React lietojumprogrammām.
Material-UI ir jauns nosaukums, un tā mērķis ir izveidot jaunu dizaina sistēmu alternatīvu Material Design. Lūk, kā varat izmantot MUI ReactJS projektos.
Lasiet Tālāk
- Programmēšana
- Kodēšanas padomi
- Programmēšana
- Programmēšanas rīki
Kadeiša Kīna ir pilnas komplektācijas programmatūras izstrādātāja un tehnisko/tehnoloģiju rakstniece. Viņai ir izteikta spēja vienkāršot dažus no vissarežģītākajiem tehnoloģiskajiem jēdzieniem; ražo materiālu, ko var viegli saprast ikviens tehnoloģiju iesācējs. Viņa aizraujas ar rakstīšanu, interesantas programmatūras izstrādi un ceļošanu pa pasauli (izmantojot dokumentālās filmas).
Abonējiet mūsu biļetenu
Pievienojieties mūsu informatīvajam izdevumam, lai saņemtu tehniskos padomus, pārskatus, bezmaksas e-grāmatas un ekskluzīvus piedāvājumus!
Noklikšķiniet šeit, lai abonētu