Selles postituses näeme Bootstrapi saidi paigutust et näidata selle avatud lähtekoodiga raamistiku hämmastavaid võimalusi. sisse eelmised artiklid olime oma töö hõlbustamiseks paigaldanud arenduskeskkonna ja vajalikud pluginad.
Pidage seda sisuhaldurina meeles Linux Adictos See ei luba mul GitHubi üles laaditud näidete koodi sisestada. Nende allalaadimiseks peate oma distributsioonile installima Giti paketi ja seejärel kirjutama järgmised käsud:
cd Documentos
git clone https://github.com/dggonzalez1971/bootstrap.git
Uute failide allalaadimiseks peate neid kahte käsku perioodiliselt käivitama.
Koodi analüüsimine
Nüüd avage failiuurijas VSCodiumiga example2.html. (Ava parempoolse nupuga) Näeme järgmist:
- 1. real ütleme brauserile dokumendi tüübi, et ta teaks, kuidas seda renderdada.
- Rida 2 näitab saidi keelt, mis ütleb brauserile, kuidas teatud tähemärke esitada, ja sisu keelt otsingumootoritele, mis hõlbustab positsioneerimist. Meie koodis on see defineeritud kui es, kuid on olemas ka piirkondlikud variandid, näiteks es_ES hispaania keele jaoks Hispaaniast või es_AR hispaania keele jaoks Argentinast.
- Alates 3. realt on meil metaandmete konteiner, mis asub siltide vahel Y . Metaandmed annavad teavet dokumendi kohta. Meie näites:
- 4. rida tähistab märgikodeerimisel kasutatavat standardit. Võib-olla olete mõnikord näinud, et rõhumärkide või erisümbolite asemel kuvatakse teemandi sees küsimärk. Põhjus on selles, et brauser kasutab sobimatut kodeeringut. 8. real olev väide väldib seda, deklareerides seda selgesõnaliselt.
- 5. real ütleme brauserile, kuidas see peaks kohanema erinevate ekraanivormingutega.
- 6. reale seatud pealkiri kuvatakse brauseri ülemisel ribal ja otsingumootorites.
- 7. real anname brauserile teada, kust leida stiiliga seotud Bootstrapi raamistiku elemendid.
- 10. realt algab konteiner. Keha sisaldab veebilehe sisu ja linki Bootstrapi skriptidele, mis annavad meie saidile interaktiivsuse.
- 13. rida tähistab dokumendi lõppu.
Bootstrapi saidi paigutus
Bootstrapi saidi paigutuse põhikontseptsioonid
Nagu eelmistes artiklites ütlesime, Bootstrap kasutab esmalt mobiilset lähenemist. Selle lähenemisviisi rakendamisel tehakse disain väikseima ekraanisuurusega seadet silmas pidades ja seejärel lisatakse kihid, et kohandada seda järgmiste suurustega.
Siin peame arvestama kahe põhikontseptsiooniga:
- Katkestuspunktid.
- Meedia konsultatsioon.
Katkestuspunktid näitavad, millisest ekraanilaiusest alates paigutust muudetakse., Meediumipäringud rakendavad stiiliparameetreid, mis põhinevad teatud brauseri ja operatsioonisüsteemi omadustel. Teisisõnu, igal katkestuspunktil on vastav stiil.
Bootstrapil on kuus eelmääratletud katkestuspunkti, mida arenenumad programmeerijad saavad muuta. Vaikepunktid on järgmised:
- Eriti väike: sellel pole eelseadistatud identifikaatorit ja see kehtib ekraanidele, mille laius on alla 576 piksli.
- Väike: seda identifitseeritakse tähega sm ja seda kasutatakse ekraanide jaoks, mille eraldusvõime on alates 576 pikslist.
- Keskmine: seda identifitseeritakse md-ga ja seda kasutatakse ekraanide jaoks alates 768 pikslist.
- Pikkus: Identifitseeritud kui lg kasutatakse ekraanide puhul alates 992 pikslist.
- Eriti pikk: sellel on identifikaator lg ja see rakendab stiile ekraanidele alates 1200 pikslist.
- Eriti pikk: tähistatud identifikaatoriga xxl, seda kasutatakse kujunduse rakendamiseks ekraanidele alates 1400 pikslist.
Neid suurusi ei valitud juhuslikult iga murdepunkt võib sisaldada konteinereid, mille laiused on 12-kordsed. Samuti ei ole need suunatud konkreetsele seadmele, vaid kohanduvad erinevate seadmete kategooriate ja ekraanisuurustega.
Erinevate ekraanisuuruste seest leiame konteinerid. Need vastutavad saidi sisu hostimise, täitmise ja joondamise eest teatud seadmes või graafilises aknas.
;