Leta 2011 je Twitter predstavil okvir Bootstrap. Od takrat je bil ta okvir CSS doživel dve večji prenovi, pri čemer je bila najnovejša (Bootstrap 3) izdana leta 2013. Bootstrap 3 je preoblikoval knjižnico CSS z uvedbo pristopa, ki je usmerjen v mobilne naprave, zaradi česar se je okvir popolnoma odzival.
Od leta 2022 je Bootstrap v različici pet in je eden najbolj priljubljenih ogrodij frontend. Ima obsežen seznam vnaprej izdelanih komponent in impresivno zbirko vtičnikov JavaScript. V tem članku se boste naučili uporabljati Bootstrap in kar najbolje izkoristiti njegove funkcije.
Namestitev Bootstrapa v vaš projekt
Obstajajo trije načini za uporabite Bootstrap v svojem projektu. Lahko prenesete in gostite datoteke CSS in JavaScript, jih namestite v svoj projekt z uporabo npm ali kopirate in prilepite ustrezne povezave cdn v svoj projekt.
Pri pristopu cdn ne pozabite postaviti povezave Bootstrap pred katero koli drugo povezavo CSS v oznako head vaše datoteke HTML.
Nekatere komponente Bootstrapa imajo funkcionalne dejavnosti, kot sta preklapljanje gumbov in pozicioniranje, ki zahteva uvoz JavaScript in Popper skripta. Torej, če nameravate uporabiti kakršne koli funkcionalne komponente, boste morali v datoteko HTML dodati tudi oznako skripta.
Zadnja stvar, ki jo potrebujete, da začnete uporabljati Bootstrap, je vidno polje oznaka.
Ker je Bootstrap tehnologija, ki je usmerjena v mobilne naprave, je vidno polje oznaka bo pomagal pri odzivnem oblikovanju. Enostaven način za uporabo bootstrapa v vašem projektu je samo kopiranje Začetna predloga Bootstrapa.
Ustvarjanje spletnega mesta z Bootstrapom
Ko ustvarjate novo spletno mesto, je ena prvih stvari, ki jih morate upoštevati, postavitev. Po tem se lahko premaknete na druge komponente, kot so gumbi in tipografija.
Bootstrap ima zbirko strukturnih komponent, ki jih lahko uporabite za organiziranje elementov na spletni strani. Te strukture postavitve vključujejo:
- Kontejnerji
- Mreža
- Stolpci
- Žlebovi
- Prelomne točke
Z nekoliko spremenjeno različico začetne predloge Bootstrap lahko začnete orisati strukturo svoje spletne strani in dodate nove komponente.
Datoteka index.html
Obvezne meta oznakeBootstrap CSS
Bootstrap
Ločite Popper in Bootstrap JS
Razred Bootstrap Container
Bootstrap posoda razred blazinice, vsebuje in poravna elemente na vaši spletni strani. Če nameravate uporabiti Bootstrap's privzeta mreža, potem boste morali uporabiti tudi Bootstrap posoda razredu. Obstajajo tri vrste posoda razredi; posoda, posoda-tekočina, in kontejner-{prekinitvena točka}. Razred vsebnika je privzeti vsebnik; je odziven in ima fiksno širino na vsaki od šestih prelomnih točk Bootstrapsa.
Šest privzetih prelomnih točk Bootstrapa vključuje:
- Zelo majhna: Manj kot 576 slikovnih pik.
- majhna: Večje ali enako 576 slikovnih pik.
- srednje: Večje ali enako 768 slikovnih pik.
- velika: Večje ali enako 992 slikovnih pik.
- X-Large: Večje ali enako 1200 slikovnih pik.
- XX-velika: Večje ali enako 1400 slikovnih pik.
Za uporabo Bootstrapa posoda v vašem projektu lahko preprosto dodate želeni razred vsebnika zunanjemu razdel na vaši spletni strani.
Uporaba Bootstrapovega vsebnika
tukaj postavite elemente spletnega mesta Če vstavite zgornjo kodo v telo vaše obstoječe datoteke HTML, bo vaša spletna stran odzivna, ustvarila pa bo tudi oblazinjenje na vsaki strani vaše spletne strani.
Bootstrap Grid System
Bootstrapova mreža uporablja sistem z dvanajstimi stolpci, ki se opira na vrstico in col razredi mreže, kot tudi razred vsebnika. Vsaka vrstica ima dvanajst stolpcev in kateri koli element se lahko razteza čez enega ali več teh stolpcev. Razred stolpcev bo kazal, koliko stolpcev naj element zaseda. Na primer, element, ki uporablja stolpec-2 razred bo obsegal dva stolpca, element, ki uporablja col-3 razred bo obsegal tri stolpce in tako naprej.
Mrežni sistem Bootstrap temelji na modulu flexbox. Če samo dva stolpca zasedata vrstico, si bosta prostor med seboj enakomerno razdelila. The žleb razred je eden od strukturnih elementov Bootstrapa in nadzoruje razmik med vsakim stolpcem v mrežni sistem. Vsak mreža stolpec ima 12 slikovnih pik odmika na obeh straneh.
Uporaba sistema Bootstrap Grid System
glavno vsebino na spletni strani
Članek
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.
Če vstavite zgornjo kodo v vsebnik div, boste ustvarili sistem mreže Bootstrap iz treh vrstic in dveh stolpcev. Prva vrstica na vrhu bo vsebovala navigacijsko vrstico, tretja vrstica na dnu bo nogo spletnega mesta, druga vrstica na sredini pa vsebino spletne strani. Druga vrstica ima dva stolpca - glavni članek in stranski.
Če ustvarite lokalno datoteko CSS in dodate obrobo vsakemu delu mreže, jo boste bolje videli.
Datoteka style.css
.vrstica{
obroba: 2px modro polno;
}
.col, .col-sm-4{
obroba: 2px rdeče polno;
}
Povezava z zgornjo datoteko CSS bo ustvarila naslednji izhod v vašem brskalniku:
Očitna razlika na zgornji sliki je velikost stolpcev. Običajno dva (ali več) stolpcev v vrstici zasedata enako količino prostora, razen če izrecno navedete drugače. The col-sm-4 razred v zgornji kodi HTML zagotavlja, da drugi stolpec obsega le štiri od dvanajstih stolpcev v vrstici. The sm v col-sm-4 razred predstavlja majhno prelomno točko, tako da bo stranski odsek zasedel le štiri stolpce od majhne prekinitvene točke in zgoraj.
Komponente zagonskega zagona
Ko se odločite za postavitev vaše spletne strani, je naslednji korak dodajanje elementov za gradnjo spletnega mesta, ki jih Bootstrap imenuje komponente. Seznam komponent Bootstrapa vključuje:
- Navbar
- Gumbi
- Skupina gumbov
- Skupina seznamov
- Kartice
- Zrušiti
- Spustni meni
Razred Bootstrap Navbar
Vsaka navigacijska vrstica Bootstrap zahteva navigacijsko vrstico razredu. Zahtevajo tudi uporabo ali dodelite ključno besedo »navigacija« Bootstrapu vlogo atribut v nadrejeni vrstici navigacijske vrstice razdel. Za odzivnost navigacijske vrstice boste morali uporabiti strni vtičnik JavaScript.
Bootstrap navigacijsko vrstico razred uporablja an arija-tok atribut, ki vzame vrednost »stran«, da označuje trenutno stran, ali »true«, da označuje trenutni del spletne strani. Vrednost, ki jo dodelite, bo odvisna od strukture vašega spletnega mesta (ena stran ali več strani). Uporabiti morate tudi aktivni razred da označite trenutno stran ali razdelek.
Uporaba navigacijske vrstice Bootstrap
Zamenjava navigacije vrstico Bootstrapa mreža z zgornjo kodo bo v vašem brskalniku ustvaril naslednji izhod:
V zgornji kodi je več drugih pomembnih razredov in atributov Bootstrap, na primer navbar-blagovna znamka razreda, ki cilja na razdelek z logotipom vašega navigacijsko vrstico. The navigacijsko vrstico je tudi popolnoma odziven zahvaljujoč strni vtičnik JavaScript.
Odzivna navigacijska vrstica
Morda se spomnite, da ima Bootstrap šest privzetih prelomne točke in ena od teh prelomnih točk je velika (lg). The navbar-expand-lg razred v zgoraj se razširi v vodoravni seznam navigacijskih elementov na veliki prelomni točki in zgoraj, ta seznam pa se povrne na gumb na kateri koli prelomni točki pod velikim.
Če želite izvedeti več o ustvarjanju odzivnih spletnih mest, smo pripravili opis kako to storiti z medijskimi poizvedbami v HTML in CSS.
Komponenta gumba Bootstrap
Bootstrap gumb komponenta uporablja in zahteva, da nastavite tip atribut za "gumb".
Bootstrap ima več vrst gumbov. Za ustvarjanje bolj običajnega gumba bi uporabili btn razreda, vendar za ustvarjanje gumba za hamburger, kot je v zgornji kodi, uporabite navigacijski preklopnik razredu.
Kdaj uporabiti Bootstrap?
Bootstrap je znan kot eden izmed bolj priljubljenih ogrodij CSS, ker je začetnik. Dolgo preden je bilo odzivno oblikovanje tako običajno pri razvoju programske opreme, se je Bootstrap preoblikoval v popolnoma odziven okvir.
Z leti je Bootstrap še naprej napredoval in se izboljševal, zaradi česar je bila izbira številka ena za najboljša podjetja, kot sta Twitter in Spotify. Vendar pa to ne bo vedno najboljša možnost za vaše potrebe razvoja programske opreme. Na primer, če ustvarjate aplikacijo React, obstaja sistem oblikovanja, imenovan MUI, ki je prilagojen za aplikacije React.
Material-UI ima novo ime in želi ustvariti nov sistem oblikovanja, ki je alternativa Material Design. Tukaj je opisano, kako lahko uporabite MUI v projektih ReactJS.
Preberite Naprej
- Programiranje
- Nasveti za kodiranje
- Programiranje
- Programska orodja
Kadeisha Kean je razvijalka programske opreme s celotnim skladom in pisateljica tehničnega/tehnološkega področja. Ima izrazito sposobnost poenostavitve nekaterih najbolj zapletenih tehnoloških konceptov; izdelava materiala, ki ga lahko zlahka razume vsak novinec v tehnologiji. Navdušena je nad pisanjem, razvojem zanimive programske opreme in potovanjem po svetu (skozi dokumentarne filme).
Naročite se na naše novice
Pridružite se našemu glasilu za tehnične nasvete, ocene, brezplačne e-knjige in ekskluzivne ponudbe!
Kliknite tukaj, da se naročite
