Šajā ziņojumā mēs redzēsim Bootstrap vietnes izkārtojumu lai parādītu šīs atvērtā pirmkoda sistēmas pārsteidzošās iespējas. In iepriekšējie raksti darba atvieglošanai bijām uzstādījuši izstrādes vidi un nepieciešamos spraudņus.
Atcerieties to kā vietnes satura pārvaldniekam Linux Adictos Tas neļauj man ievietot GitHub augšupielādēto piemēru kodu. Lai tos lejupielādētu, savā izplatījumā ir jāinstalē Git pakotne un pēc tam jāieraksta šādas komandas:
cd Documentos
git clone https://github.com/dggonzalez1971/bootstrap.git
Šīs divas komandas būs periodiski jāpalaiž, lai lejupielādētu jaunos failus.
Koda analīze
Tagad failu pārlūkā atveriet example2.html ar VSCodium. (Atvērt ar labo pogu) Mēs redzam sekojošo:
- 1. rindiņā mēs norādām pārlūkprogrammai dokumenta veidu, lai tā zinātu, kā to atveidot.
- 2. rindiņa norāda vietnes valodu, kas norāda pārlūkprogrammai, kā attēlot noteiktas rakstzīmes, un satura valodu meklētājprogrammām, kas atvieglo pozicionēšanu. Mūsu kodā tas ir definēts kā es, taču ir pieejami reģionālie varianti, piemēram, es_ES spāņu valodai no Spānijas vai es_AR spāņu valodai no Argentīnas.
- No 3. rindiņas mums ir metadatu konteiners, kas atrodas starp tagiem Y . Metadati sniedz informāciju par dokumentu. Mūsu piemērā:
- 4. rindiņa norāda rakstzīmju kodēšanai izmantoto standartu. Iespējams, dažkārt esat redzējis, ka akcentēto rakstzīmju vai īpašo simbolu vietā rombā tiek parādīta jautājuma zīme. Tas ir tāpēc, ka pārlūkprogramma izmanto nepareizu kodējumu. Paziņojums 8. rindā no tā izvairās, to skaidri paziņojot.
- 5. rindiņā mēs norādām pārlūkprogrammai, kā tai jāpielāgojas dažādiem ekrāna formātiem.
- Virsraksts, ko iestatījām 6. rindiņā, tiks parādīts pārlūkprogrammas augšējā joslā un meklētājprogrammās.
- 7. rindā mēs norādām pārlūkprogrammai, kur atrast Bootstrap ietvara elementus, kas saistīti ar stilu.
- No 10. rindas sākas konteiners. Pamattekstā ir iekļauts tīmekļa lapas saturs un saite uz Bootstrap skriptiem, kas mūsu vietnei nodrošinās interaktivitāti.
- 13. rinda norāda dokumenta beigas.
Bootstrap vietnes izkārtojums
Galvenās koncepcijas Bootstrap vietnes izkārtojumam
Kā jau teicām iepriekšējos rakstos, Bootstrap izmanto mobilo pirmo pieeju. Izmantojot šo pieeju, dizains tiek veikts, ņemot vērā ierīci ar mazāko ekrāna izmēru, un pēc tam tiek pievienoti slāņi, lai to pielāgotu nākamajiem izmēriem.
Šeit mums jāņem vērā divi galvenie jēdzieni:
- Pārtraukuma punkti.
- Mediju konsultācija.
Pārtraukuma punkti norāda, no kura ekrāna platuma izkārtojums tiek mainīts., Multivides vaicājumos tiek lietoti stila parametri, kuru pamatā ir noteiktas pārlūkprogrammas un operētājsistēmas īpašības. Citiem vārdiem sakot, katram pārtraukuma punktam būs atbilstošs stils.
Bootstrap komplektācijā ir seši iepriekš noteikti pārtraukuma punkti, kurus var modificēt pieredzējušāki programmētāji. Noklusējuma punkti ir:
- Īpaši mazs: nav iepriekš iestatīta identifikatora un attiecas uz ekrāniem, kuru platums ir mazāks par 576 pikseļiem.
- Mazs: tiek identificēts ar sm un tiek izmantots ekrāniem no 576 pikseļiem.
- Vidējs: to apzīmē ar md un izmanto ekrāniem no 768 pikseļiem.
- Garums: identificēts kā lg, tiek izmantots ekrāniem no 992 pikseļiem.
- Īpaši garš: tam ir identifikators lg, un tas piemēro stilus ekrāniem no 1200 pikseļiem.
- Īpaši īpaši garš: apzīmēts ar identifikatoru xxl, to izmanto, lai piemērotu dizainu ekrāniem no 1400 pikseļiem.
Šie izmēri netika izvēlēti nejauši, jo katrā no pārtraukuma punktiem var būt konteineri, kuru platums ir 12 reizes. Tie arī nav mērķēti uz noteiktu ierīci, bet gan pielāgojas dažādām ierīču kategorijām un ekrāna izmēriem.
Dažādos ekrāna izmēros mēs atrodam konteinerus. Tie ir atbildīgi par vietnes satura mitināšanu, aizpildīšanu un saskaņošanu noteiktā ierīcē vai grafiskajā logā.
;