U ovom postu ćemo vidjeti izgled Bootstrap stranice kako bi prikazali nevjerovatne mogućnosti ovog okvira otvorenog koda. U prethodni članci instalirali smo razvojno okruženje i potrebne dodatke kako bismo olakšali naš rad.
Zapamtite to kao upravitelj sadržaja Linux Adictos Ne dozvoljava mi da ubacim kod primjera koje sam postavio na GitHub. Da biste ih preuzeli morate instalirati Git paket na svoju distribuciju, a zatim napisati sljedeće naredbe:
cd Documentos
git clone https://github.com/dggonzalez1971/bootstrap.git
Morat ćete povremeno izvoditi ove dvije komande da biste preuzeli nove datoteke.
Analiziranje koda
Sada u istraživaču datoteka otvorite example2.html sa VSCodium. (Otvori desnim dugmetom) Vidimo sledeće:
- U prvom redu kažemo pretraživaču tip dokumenta tako da on zna kako da ga prikaže.
- Linija 2 označava jezik sajta koji pretraživaču pokazuje kako da predstavi određene znakove, a pretraživačima jezik sadržaja koji olakšava pozicioniranje. U našem kodu je definisan kao es, ali postoje regionalne varijante kao što je es_ES za španski iz Španije ili es_AR za španski iz Argentine.
- Od reda 3 imamo kontejner metapodataka koji se nalazi između oznaka Y . Metapodaci pružaju informacije o dokumentu. U našem primjeru:
- Red 4 označava standard koji se koristi za kodiranje znakova. Možda ste povremeno vidjeli da se umjesto naglašenih znakova ili posebnih simbola, unutar dijamanta prikazuje upitnik. To je zato što pretraživač koristi nepravilno kodiranje. Izjava u redu 8 izbjegava ovo tako što ga eksplicitno deklarira.
- U redu 5 kažemo pretraživaču kako treba da se prilagodi različitim formatima ekrana.
- Naslov koji smo postavili u redu 6 biće prikazan u gornjoj traci pretraživača i u pretraživačima.
- Na liniji 7 kažemo pretraživaču gdje da pronađe elemente Bootstrap okvira koji se odnose na stil.
- Od reda 10 počinje kontejner. Tijelo uključuje sadržaj web stranice i link na Bootstrap skripte koje će dati interaktivnost našoj stranici.
- Red 13 označava kraj dokumenta.
Izgled Bootstrap stranice
Ključni koncepti za izgled Bootstrap stranice
Kao što smo rekli u prethodnim člancima, Bootstrap koristi mobilni prvi pristup. Kada se primeni ovaj pristup, dizajn se radi sa uređajem sa najmanjom veličinom ekrana na umu, a zatim se dodaju slojevi kako bi se prilagodio veličinama koje slede.
Ovdje moramo uzeti u obzir dva ključna koncepta:
- Prelomne tačke.
- Konsultacije sa medijima.
Prelomne tačke pokazuju sa koje širine ekrana se izgled menja., Medijski upiti primjenjuju parametre stila na osnovu određenih karakteristika pretraživača i operativnog sistema. Drugim riječima, svaka tačka prekida će imati odgovarajući stil.
Bootstrap dolazi sa šest unaprijed definiranih tačaka prekida koje napredniji programeri mogu mijenjati. Zadane tačke su:
- Izuzetno mali: Nema unaprijed postavljeni identifikator i primjenjuje se na ekrane širine manje od 576 piksela.
- Mali: identifikuje se sa sm i koristi se za ekrane od 576 piksela.
- Srednji: Identificira se sa md i koristi se za ekrane od 768 piksela.
- Dužina: Identifikovan kao lg koristi se za ekrane od 992 piksela.
- Ekstra dugo: Ima identifikator lg i primjenjuje stilove na ekrane od 1200 piksela.
- Ekstra dugačak: Označen identifikatorom xxl, koristi se za primjenu dizajna na ekrane od 1400 piksela.
Ove veličine nisu odabrane slučajno svaka od tačaka prekida može sadržavati kontejnere čije su širine višekratne od 12. Oni također nisu ciljani na određeni uređaj, već se prilagođavaju različitim kategorijama uređaja i veličinama ekrana.
Unutar različitih veličina ekrana nalazimo kontejnere. Oni su odgovorni za hosting, popunjavanje i usklađivanje sadržaja stranice u određenom uređaju ili grafičkom prozoru.
;