V tej objavi si bomo ogledali postavitev mesta Bootstrap za predstavitev izjemnih zmogljivosti tega odprtokodnega ogrodja. noter prejšnji članki namestili smo razvojno okolje in potrebne vtičnike za lažje delo.
Ne pozabite, da kot upravitelj vsebine Linux Adictos Ne dovoljuje mi vstavljanja kode primerov, ki sem jih naložil na GitHub. Če jih želite prenesti, morate v svojo distribucijo namestiti paket Git in nato napisati naslednje ukaze:
cd Documentos
git clone https://github.com/dggonzalez1971/bootstrap.git
Za prenos novih datotek boste morali občasno izvajati ta dva ukaza.
Analiza kode
Zdaj v raziskovalcu datotek odprite example2.html z VSCodium. (Odpri z desnim gumbom) Vidimo naslednje:
- V vrstici 1 brskalniku povemo vrsto dokumenta, da ve, kako ga upodobiti.
- 2. vrstica označuje jezik spletnega mesta, ki brskalniku nakazuje, kako predstaviti določene znake, iskalnikom pa jezik vsebine, ki olajša pozicioniranje. V naši kodi je definiran kot es, vendar obstajajo regionalne različice, kot je es_ES za španščino iz Španije ali es_AR za španščino iz Argentine.
- Od vrstice 3 imamo vsebnik metapodatkov, ki se nahaja med oznakama Y . Metapodatki zagotavljajo informacije o dokumentu. V našem primeru:
- Vrstica 4 označuje standard, uporabljen za kodiranje znakov. Morda ste kdaj videli, da je namesto naglašenih znakov ali posebnih simbolov znotraj diamanta prikazan vprašaj. To je zato, ker brskalnik uporablja nepravilno kodiranje. Stavek v vrstici 8 se temu izogne tako, da ga izrecno deklarira.
- V vrstici 5 povemo brskalniku, kako naj se prilagodi različnim formatom zaslona.
- Naslov, ki smo ga nastavili v vrstici 6, bo prikazan v zgornji vrstici brskalnika in v iskalnikih.
- V 7. vrstici povemo brskalniku, kje naj najde elemente ogrodja Bootstrap, povezane s slogom.
- Od vrstice 10 se začne vsebnik. Telo vključuje vsebino spletne strani in povezavo do skriptov Bootstrap, ki bodo našemu spletnemu mestu zagotovile interaktivnost.
- Vrstica 13 označuje konec dokumenta.
Postavitev mesta Bootstrap
Ključni koncepti za postavitev mesta Bootstrap
Kot smo rekli v prejšnjih člankih, Bootstrap uporablja mobilni pristop. Ko se uporabi ta pristop, se pri načrtovanju upošteva naprava z najmanjšo velikostjo zaslona, nato pa se dodajo plasti, da se prilagodi velikostim, ki sledijo.
Pri tem moramo upoštevati dva ključna pojma:
- Mejne točke.
- Posvetovanje z mediji.
Prelomne točke kažejo, od katere širine zaslona se spreminja postavitev., Medijske poizvedbe uporabljajo parametre sloga na podlagi določenih značilnosti brskalnika in operacijskega sistema. Z drugimi besedami, vsaka prelomna točka bo imela ustrezen slog.
Bootstrap ima šest vnaprej določenih prekinitvenih točk, ki jih lahko naprednejši programerji spreminjajo. Privzete točke so:
- Zelo majhen: Nima prednastavljenega identifikatorja in velja za zaslone, manjše od 576 slikovnih pik.
- Majhen: Identificira se s sm in se uporablja za zaslone od 576 slikovnih pik.
- Medium: Identificira se z md in se uporablja za zaslone od 768 slikovnih pik.
- Dolžina: Identificirano kot lg se uporablja za zaslone od 992 slikovnih pik.
- Zelo dolg: ima identifikator lg in uporablja sloge za zaslone od 1200 slikovnih pik.
- Zelo ekstra dolg: označen z identifikatorjem xxl se uporablja za uporabo dizajna na zaslonih od 1400 slikovnih pik.
Te velikosti niso bile izbrane naključno vsaka od prelomnih točk lahko vsebuje vsebnike, katerih širine so večkratniki 12. Prav tako niso usmerjeni na določeno napravo, temveč se prilagajajo različnim kategorijam naprav in velikostim zaslona.
Znotraj različnih velikosti zaslona najdemo vsebnike. Ti so odgovorni za gostovanje, polnjenje in usklajevanje vsebine spletnega mesta v določeni napravi ali grafičnem oknu.
;