Godine 2011. Twitter je predstavio Bootstrap framework. Od tada je ovaj CSS okvir doživio dva velika preinačenja, a posljednji (Bootstrap 3) objavljen je 2013. Bootstrap 3 je transformirao CSS biblioteku implementacijom pristupa koji je prvenstveno usmjeren na mobilne uređaje koji je ostavio okvir u potpunosti prilagodljivim.
Od 2022. Bootstrap je u verziji pet i jedan je od najpopularnijih frontend okvira. Ima opsežan popis unaprijed izgrađenih komponenti i impresivnu kolekciju JavaScript dodataka. U ovom ćete članku naučiti kako koristiti Bootstrap i maksimalno iskoristiti njegove značajke.
Instaliranje Bootstrapa u vaš projekt
Postoje tri načina da koristite Bootstrap u svom projektu. Možete preuzeti i hostirati CSS i JavaScript datoteke, instalirati ih u svoj projekt pomoću npm-a ili kopirati i zalijepiti odgovarajuće cdn veze u svoj projekt.
Uz cdn pristup, morate zapamtiti da postavite Bootstrap vezu prije bilo koje druge CSS veze u oznaku head vaše HTML datoteke.
Neke komponente Bootstrapa imaju funkcionalne aktivnosti, kao što je prebacivanje gumba i pozicioniranje koje zahtijeva uvoz JavaScript i Popper skripte. Dakle, ako namjeravate koristiti bilo koju funkcionalnu komponentu, morat ćete dodati i oznaku skripte u svoju HTML datoteku.
Posljednja stvar koju trebate početi koristiti Bootstrap je okvir za prikaz označiti.
Budući da je Bootstrap tehnologija koja je na prvom mjestu na mobilnim uređajima, okvir za prikaz označiti pomoći će u responzivnom dizajnu. Jednostavan način korištenja bootstrapa u svom projektu je samo kopiranje Bootstrap početni predložak.
Izrada web stranice s Bootstrapom
Kada stvarate novu web stranicu, jedna od prvih stvari koju trebate uzeti u obzir je izgled. Nakon toga možete prijeći na druge komponente poput gumba i tipografije.
Bootstrap ima kolekciju strukturnih komponenti koje možete koristiti za organiziranje elemenata na web stranici. Ove strukture izgleda uključuju:
- Kontejneri
- Mreža
- Kolumne
- Oluci
- Prijelomne točke
Koristeći malo izmijenjenu verziju početnog predloška Bootstrap, možete početi ocrtavati strukturu svoje web stranice i dodati nove komponente.
Datoteka index.html
Obavezne meta oznakeBootstrap CSS
Bootstrap
Odvojite Popper i Bootstrap JS
Klasa Bootstrap kontejnera
Bootstrap kontejner class pads, sadrži i poravnava elemente na vašoj web stranici. Ako planirate koristiti Bootstrap zadana mreža, tada ćete također morati koristiti Bootstrap kontejner razreda. Postoje tri vrste kontejner razredi; kontejner, posuda-tekućina, i kontejner-{prelomna točka}. Klasa kontejnera je zadani spremnik; on je responzivan i ima fiksnu širinu na svakoj od šest prijelomnih točaka Bootstrapsa.
Bootstrapovih šest zadanih prijelomnih točaka uključuje:
- Ekstra malo: Manje od 576 piksela.
- Mali: Veće ili jednako 576px.
- Srednji: Veće ili jednako 768px.
- velika: Veće ili jednako 992px.
- X-Veliki: Veći ili jednaki 1200px.
- XX-veliki: Veći ili jednaki 1400px.
Za korištenje Bootstrapa kontejner u svom projektu, možete jednostavno dodati željenu klasu spremnika vanjskom razd na vašoj web stranici.
Korištenje Bootstrapovog spremnika
ovdje postavite elemente web stranice Umetanje gornjeg koda u tijelo vaše postojeće HTML datoteke učinit će vašu web stranicu responzivnom, a također će stvoriti padding sa svake strane vaše web stranice.
Bootstrap Grid sustav
Bootstrapova mreža koristi sustav od dvanaest stupaca koji se oslanja na red i kol grid klase, kao i klasa kontejnera. Svaki red ima dvanaest stupaca, a bilo koji element može se protezati kroz jedan ili više od tih stupaca. Klasa stupaca će naznačiti koliko stupaca element treba zauzeti. Na primjer, element koji koristi kolona-2 class će se protezati kroz dva stupca, element koji koristi kolona-3 klasa će se protezati kroz tri stupca, i tako dalje.
Bootstrap grid sustav temelji se na flexbox modulu. Ako samo dva stupca zauzimaju red, oni će ravnomjerno podijeliti prostor među sobom. The žlijeb class je jedan od Bootstrapovih strukturnih elemenata i kontrolira razmak između svakog stupca u mrežni sustav. Svaki rešetka stupac ima 12px dopuna s obje strane.
Korištenje Bootstrapovog Grid sustava
glavni sadržaj na web stranici
Članak
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.
Umetanje gornjeg koda u spremnik div stvorit će Bootstrap mrežni sustav od tri retka i dva stupca. Prvi red na vrhu će sadržavati navigacijsku traku, treći red na dnu će sadržavati podnožje web stranice, a drugi red u sredini će sadržavati sadržaj web stranice. Drugi red ima dva stupca - glavni članak i jedan sa strane.
Izrada lokalne CSS datoteke i dodavanje obruba svakom dijelu mreže omogućit će vam da ga jasnije vidite.
Datoteka style.css
.red{
obrub: 2px plava čvrsta;
}
.col, .col-sm-4{
obrub: 2px crveni čvrsti;
}
Povezivanje na gornju CSS datoteku stvorit će sljedeći izlaz u vašem pregledniku:
Očigledna razlika na gornjoj slici je veličina stupaca. Obično dva (ili više) stupaca u redu zauzimaju istu količinu prostora osim ako izričito ne navedete drugačije. The kol-sm-4 klase u HTML kodu iznad osigurava da se drugi stupac proteže samo preko četiri od dvanaest stupaca u retku. The sm u kol-sm-4 klasa predstavlja malu prijelomnu točku, tako da će bočni dio zauzimati samo četiri stupca od male točke prekida i iznad.
Bootstrap komponente
Nakon što se odlučite za izgled vaše web stranice, sljedeći korak je dodavanje elemenata za izgradnju web stranice, koje Bootstrap naziva komponentama. Bootstrapov popis komponenti uključuje:
- Navbar
- Gumbi
- Grupa gumba
- Grupa popisa
- Kartice
- Kolaps
- Padajući izbornik
Bootstrap Navbar klasa
Svaka Bootstrap navigacijska traka zahtijeva navigacijska traka razreda. Također zahtijevaju korištenje ili dodjeljivanje ključne riječi "navigacija" Bootstrapu uloga atribut u roditelju navigacijske trake razd. Da biste navigacijsku traku učinili responzivnom, morat ćete upotrijebiti sažmi JavaScript dodatak.
Bootstrap navigacijska traka razred koristi an arija-struja atribut koji uzima vrijednost "stranica" za označavanje trenutne stranice ili "true" za označavanje trenutačnog odjeljka web-stranice. Vrijednost koju dodijelite ovisit će o strukturi vaše web stranice (jedna stranica ili više stranica). Također biste trebali koristiti aktivni razred za označavanje trenutne stranice ili odjeljka.
Korištenje Bootstrapove Navbar-e
Zamjena navigacije red od Bootstrapa rešetka s gornjim kodom stvorit će sljedeći izlaz u vašem pregledniku:
Postoji nekoliko drugih važnih klasa i Bootstrap atributa u kodu iznad, kao što je navbar-marka razreda, koji cilja na odjeljak s logotipom vašeg navigacijska traka. The navigacijska traka također u potpunosti reagira zahvaljujući sažmi JavaScript dodatak.
Responzivna Navbara
Možda se sjećate da Bootstrap ima šest zadanih prijelomne točke a jedna od tih prijelomnih točaka je velika (lg). The navbar-proširi-lg razred u iznad se proširuje u horizontalni popis navigacijskih stavki na velikoj prijelomnoj točki i iznad, a taj se popis vraća na gumb na bilo kojoj prijelomnoj točki ispod velike.
Ako želite saznati više o izradi responzivnih web-mjesta, sastavili smo dio s kratkim pregledom kako to učiniti s medijskim upitima u HTML-u i CSS-u.
Komponenta gumba za pokretanje
Bootstrap dugme komponenta koristi i zahtijeva da postavite tip atribut "gumb".
Bootstrap ima nekoliko vrsta gumba. Da biste stvorili konvencionalniji gumb, upotrijebili biste btn klase, ali da biste stvorili gumb za hamburger kao u kodu iznad, upotrijebili biste navigacijska traka-prekidač razreda.
Kada biste trebali koristiti Bootstrap?
Bootstrap je poznat kao jedan od popularnijih CSS okvira jer je pionir. Mnogo prije nego što je responzivni dizajn bio toliko uobičajen u razvoju softvera, Bootstrap se transformirao u potpuno responzivni okvir.
Tijekom godina, Bootstrap je nastavio napredovati i poboljšavati se, što ga čini izborom broj jedan za vrhunske tvrtke, kao što su Twitter i Spotify. Međutim, to neće uvijek biti najbolja opcija za vaše potrebe razvoja softvera. Na primjer, ako stvarate React aplikaciju, postoji dizajnerski sustav pod nazivom MUI koji je prilagođen za React aplikacije.
Material-UI ima novo ime i ima za cilj stvoriti novi sustav dizajna alternativu Material Designu. Evo kako možete koristiti MUI u ReactJS projektima.
Pročitajte dalje
- Programiranje
- Cvrkut
- Savjeti za kodiranje
- Programiranje
- Alati za programiranje
Kadeisha Kean je programerka punog softvera i tehnička/tehnološka spisateljica. Ona ima izrazitu sposobnost da pojednostavi neke od najsloženijih tehnoloških koncepata; proizvodnju materijala koji svaki početnik u tehnologiji može lako razumjeti. Ona je strastvena u pisanju, razvoju zanimljivog softvera i putovanju svijetom (kroz dokumentarne filmove).
Pretplatite se na naše obavijesti
Pridružite se našem biltenu za tehničke savjete, recenzije, besplatne e-knjige i ekskluzivne ponude!
Kliknite ovdje za pretplatu
