✅ Naučiti koristiti Bootstrap Grid

Sadržaj

Kolona a
Stupac B
Stupac C
Kolona a
Stupac B
Stupac C

Bootstrap upravlja mrežnom strukturom ili također poznata kao Mreža, koji nije ništa drugo do izgled na zaslonu koji nam pomaže organizirati naše elemente, kao da smo zaslon podijelili na redove i stupce i njime rukovali kao velikom tablicom.
Ova vrsta manipulacije navodi nas na razmišljanje o dizajnu na "jedinstven" način i trenutak kada imamo malo više iskustva u korištenju Bootstrap Na sve ćemo početi gledati na ovaj način i tako ćemo dobiti dosljednost i brzinu u svom načinu rada.
Prvo što morate znati je da je ovaj dizajn Mreža omogućuje nam rad na način na koji možemo izvorno implementirati mobilne prikaze, to naravno od verzije 3 of Bootstrap, zahvaljujući činjenici da je ova verzija izgrađena s mobilnim dizajnom na umu.
U prethodnim verzijama okvira klase su morale biti izravno navedene tako da se naš dizajn mogao prilagoditi rezolucijama mobilnih uređaja, sada različitim klasama Mreža oni to rade automatski.
Da bismo iskoristili ovu značajku, moramo razmišljati od malih do velikih, odnosno klase koje primjenjujemo uvijek se moraju smatrati najmanjima, a zatim će se skalirati na druge rezolucije, odnosno ako definiramo sm razred (mali ili mali), automatski Bootstrap pretpostavlja da je to minimalni izraz i da se tada može skalirati doktor medicine (medijan) ili do lg (velik).
Prije nego prijeđemo na praktičnije primjere moramo razumjeti koje klase možemo koristiti u stupcima a Mreža Također moramo znati za koji se slučaj svaki primjenjuje, pa na ovaj način prilikom dizajniranja naše web stranice možemo uzeti u obzir i najmanji uređaj do kojeg želimo doći.
Ovim pristupom možemo graditi web stranice Pogodno za mobilne uređaje, koliko danas postaju važni za tražilice i njihove rezultate, pa nam pomažu osim što stvaramo dobre web stranice kako bismo zaradili neke bodove na našoj reputaciji SEO, naravno s istim poslom.
Zasloni telefonaTo je najmanji uređaj koji teoretski može navigirati u našem dizajnu, iako su rezolucije telefona postupno pretvorene u Full HD, to je općenito za najvišu klasu, dok je srednji i niži raspon što je u teoriji većina održava mnogo niže rezolucije. Vrsta Mreža to se odnosi na taj slučaj: col-xs- i odnosi se na rješenja manja od širine 768 piksela.
Zasloni za tableteOni su u teoriji drugi najmanji uređaj, zahvaljujući većem udjelu veličine tablet nudi veću navigacijsku površinu, pa možemo koristiti malo više sadržaja nego na ekranu telefona, osim toga općenito se navigacija na tabletima vrši vodoravno. Klasa koja se odnosi na ovaj uređaj je col-sm- i odnosi se na razlučivosti širine veće od 768 piksela i ispod 992 piksela.
Oprema za male ekraneTo su općenito oni koji pripadaju niskim rasponima stolnih i prijenosnih računala, mogu biti oprema s ekranima manjim od 15 inča ili koji imaju više od 10 godina života, također su prijenosna računala koja su namijenjena studentima i sektoru s niskim kupovne moći, ovo je većinski sektor. Klasa koja se primjenjuje u ovom slučaju je col-md-, a granične rezolucije za širinu veće su od 992 piksela i manje od 1200 piksela.
Oprema za veliki ekranOvdje možemo probijati najsuvremeniju opremu, a također i zaslone veće od 15 inča, u ovu kategoriju ulazi nova oprema kao što je ultra-prenosiva, 4K rezolucija ili QHD također tamo gdje vidimo površine veće od 1080p. Isključivanjem širina koje ćemo ovdje obraditi one su veće od 1200 piksela, ovo dok je sljedeća verzija Bootstrap vjerojatno.
Budući da znamo teoriju koja stoji iza sustava Mreža od Bootstrap, Dobro je započeti s njegovom praktičnom primjenom, ali prije nego što vidimo kôd moramo razumjeti još par koncepata, uvijek moramo prema konvenciji i najboljoj praksi koristiti element s klasom kontejner, budući da će se na ovaj način stvoriti spremnik kako mu naziv ukazuje na zadržavanje različitih stupaca. Drugi koncept koji moramo znati je da će uvijek biti 12 stupaca, pa različite kombinacije koje napravimo moraju uzeti u obzir ovaj broj.
U sljedećem primjeru stvorit ćemo kôd za izgled od 3 velika stupca, koristit ćemo klasu col-md- a budući da želimo 3 jednaka stupca pri dijeljenju 12 sa 3 dobivamo broj 4 pa će to biti veličina svakog našeg rezultirajućeg stupca.
Pogledajmo kod bez daljnjeg:

Mreža za pokretanje

Primjer kako koristiti stupce u bootstrapu

Kolona a

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi hendrerit augue et laoreet aliquam. Aliquam mi olakšava in lorem pharetra, ut volutpat magna laoreet. Fusce sed mi ut turpis bibendum dictum.

Stupac B

Stupac C

Struktura je vrlo jednostavna, stvorili smo div s klasom kontejner, a unutar div s klasom red konačno smo unutar potonjeg stvorili 3 diva s klasom col-md-4 Ovo je klasa za male ekrane za prijenosna računala i vidimo kako kovamo broj 4, što znači da je svaki njihov div ekvivalentan 4 stupca Mreža. Pogledajmo kako to izgleda kada pokrenemo preglednik:

POVEĆAJTE

Ako primijetimo, tada imamo 3 velika stupca, ali što se događa kada smanjimo veličinu na razlučivost manju od minimuma primijenjene klase, budući da će se stupci jednostavno slagati jedan na drugi, kao što vidimo u sljedeća slika:

POVEĆAJTE

Iako ovo nije loša stvar, ponekad ne želimo da naše ponašanje preuzme ponašanje, za to možemo ponašanja izravno uključiti u klase za različite rezolucije, pogledajmo u sljedećem kodu kako mijenjamo klase različite stupce za postizanje drugačijeg rezultata:

Mreža za pokretanje

Primjer kako koristiti stupce u bootstrapu

Kolona a

Stupac B

Stupac C

Ako primijetimo u našem kodu, sve ostaje isto osim naših klasa, gdje smo za stupce A i B dodali klasu col-sm-6 a za stupac C klasa col-sm-12, to znači da će, kada se razlučivost smanji, sm klase vladati, kao što vidimo na sljedećoj slici:

POVEĆAJTE

Vidimo da u istoj veličini prvog primjera, umjesto da se slože, stupci A i B postaju u istoj regiji, a stupac C uzima jedan redak za sebe. Ovdje vidimo veliku korisnost Mreža osobito s dizajnom koji je usmjeren na to da bude odzivan i mobilan.
Ovim smo završili ovaj vodič, gdje smo naučili kako funkcionira sustav Mreža od BootstrapNaravno, ovo je samo vrh ledenog brijega, postoji mnogo više sadržaja koje možemo istražiti u drugim vodičima, ali s ovim osnovnim znanjem možemo početi uviđati kako ispreplesti svoje dizajne na logičniji način i s manje truda zahvaljujući okvir.Je li vam se svidio i pomogao ovaj vodič?Autor možete nagraditi pritiskom na ovaj gumb kako biste mu dali pozitivan bod