Në këtë postim do të shohim paraqitjen e një faqeje Bootstrap për të shfaqur aftësitë e mahnitshme të kësaj kornize me kod të hapur. Në artikujt e mëparshëm kishim instaluar një mjedis zhvillimi dhe shtojcat e nevojshme për të lehtësuar punën tonë.
Mos harroni se si menaxher i përmbajtjes së Linux Adictos Nuk më lejon të fus kodin e shembujve që kam ngarkuar në GitHub. Për t'i shkarkuar ato, duhet të instaloni paketën Git në shpërndarjen tuaj dhe më pas të shkruani komandat e mëposhtme:
cd Documentos
git clone https://github.com/dggonzalez1971/bootstrap.git
Do t'ju duhet t'i ekzekutoni këto dy komanda në mënyrë periodike për të shkarkuar skedarët e rinj.
Duke analizuar kodin
Tani në file explorer hap shembull2.html me VSCodium. (Hap me butonin e djathtë) Ne shohim sa vijon:
- Në rreshtin 1 ne i tregojmë shfletuesit llojin e dokumentit në mënyrë që ai të dijë se si ta përpunojë atë.
- Rreshti 2 tregon gjuhën e faqes, e cila i tregon shfletuesit se si të përfaqësojë karaktere të caktuara dhe gjuhën e përmbajtjes në motorët e kërkimit, gjë që lehtëson pozicionimin. Në kodin tonë është përcaktuar si es por ka variante rajonale si es_ES për spanjisht nga Spanja ose es_AR për spanjisht nga Argjentina.
- Nga rreshti 3 kemi një kontejner metadata të vendosur midis etiketave Y . Metadatat japin informacion rreth dokumentit. Në shembullin tonë:
- Rreshti 4 tregon standardin e përdorur për kodimin e karaktereve. Ndoshta keni parë me raste që në vend të karaktereve të theksuara ose simboleve të veçanta, shfaqet një pikëpyetje brenda një diamanti. Kjo është për shkak se shfletuesi përdor kodim jo të duhur. Deklarata në rreshtin 8 e shmang këtë duke e deklaruar në mënyrë eksplicite.
- Në rreshtin 5 i tregojmë shfletuesit se si duhet të përshtatet me formate të ndryshme të ekranit.
- Titulli që vendosëm në rreshtin 6 do të shfaqet në shiritin e sipërm të shfletuesit dhe në motorët e kërkimit.
- Në rreshtin 7 i tregojmë shfletuesit se ku mund të gjejë elementët e kornizës Bootstrap që lidhen me stilimin.
- Nga rreshti 10 fillon ena. Trupi përfshin përmbajtjen e faqes së internetit dhe lidhjen me skriptet e Bootstrap që do t'i japin interaktivitet sajtit tonë.
- Rreshti 13 tregon fundin e dokumentit.
Paraqitja e një faqeje Bootstrap
Konceptet kryesore për paraqitjen e një faqeje Bootstrap
Siç thamë në artikujt e mëparshëm, Bootstrap merr qasjen e parë celular. Kur zbatohet kjo qasje, dizajni bëhet me pajisjen me madhësinë më të vogël të ekranit në mendje dhe më pas shtohen shtresa për ta përshtatur atë me madhësitë që vijojnë.
Këtu duhet të kemi parasysh dy koncepte kryesore:
- Pikat e ndërprerjes.
- Konsultimi mediatik.
Pikat e ndërprerjes tregojnë se nga cila gjerësi e ekranit është modifikuar faqosja., Pyetjet e medias aplikojnë parametra stili bazuar në karakteristika të caktuara të shfletuesit dhe sistemit operativ. Me fjalë të tjera, çdo pikë ndërprerje do të ketë një stil përkatës.
Bootstrap vjen me gjashtë pika ndërprerje të paracaktuara që mund të modifikohen nga programues më të avancuar. Pikat e paracaktuara janë:
- Extra Small: Nuk ka një identifikues të paracaktuar dhe zbatohet për ekranet me gjerësi më të vogël se 576 piksele.
- I vogël: Identifikohet me sm dhe përdoret për ekrane nga 576 piksele.
- Medium: Identifikohet me md dhe përdoret për ekrane nga 768 piksele.
- Gjatësia: Identifikohet si lg përdoret për ekrane nga 992 piksele.
- Ekstra e gjatë: Ka identifikuesin lg dhe aplikon stilet në ekranet nga 1200 piksele.
- Ekstra ekstra e gjatë: E shënuar me identifikuesin xxl, përdoret për të aplikuar dizajnin në ekrane nga 1400 piksele.
Këto madhësi nuk u zgjodhën rastësisht si secila nga pikat e ndërprerjes mund të përmbajë kontejnerë, gjerësia e të cilëve është shumëfish i 12. Ato gjithashtu nuk synohen për një pajisje specifike, por përkundrazi përshtaten me kategori të ndryshme pajisjesh dhe madhësive të ekranit.
Brenda madhësive të ndryshme të ekranit gjejmë kontejnerët. Këto janë përgjegjëse për pritjen, plotësimin dhe përafrimin e përmbajtjes së faqes në një pajisje ose dritare grafike të caktuar.
;