Ebben a bejegyzésben egy Bootstrap webhely elrendezését fogjuk látni hogy bemutassa ennek a nyílt forráskódú keretrendszernek a csodálatos képességeit. Ban ben korábbi cikkek telepítettük a fejlesztői környezetet és a szükséges bővítményeket, hogy megkönnyítsük munkánkat.
Ne feledje, hogy a tartalomkezelő Linux Adictos Nem engedi beilleszteni a GitHubba feltöltött példák kódját. A letöltéshez telepítenie kell a Git csomagot a disztribúciójára, majd ki kell írnia a következő parancsokat:
cd Documentos
git clone https://github.com/dggonzalez1971/bootstrap.git
Ezt a két parancsot rendszeresen le kell futtatnia az új fájlok letöltéséhez.
A kód elemzése
Most a fájlkezelőben nyissa meg az example2.html fájlt a VSCodium segítségével. (Nyitás jobb gombbal) A következőket látjuk:
- Az 1. sorban közöljük a böngészővel a dokumentum típusát, hogy tudja, hogyan kell azt renderelni.
- A 2. sor jelzi az oldal nyelvét, amely megmondja a böngészőnek, hogyan jelenítsen meg bizonyos karaktereket, valamint a tartalom nyelvét a keresőmotorok számára, ami megkönnyíti a pozicionálást. Kódunkban ez es-ként van definiálva, de vannak olyan regionális változatok is, mint például az es_ES a spanyolnál vagy az es_AR a spanyolnál Argentínából.
- A 3. sortól kezdve van egy metaadattárolónk a címkék között Y . A metaadatok információt nyújtanak a dokumentumról. Példánkban:
- A 4. sor a karakterkódoláshoz használt szabványt jelöli. Talán alkalmanként láthatta, hogy ékezetes karakterek vagy speciális szimbólumok helyett kérdőjel jelenik meg a gyémánt belsejében. Ennek az az oka, hogy a böngésző nem megfelelő kódolást használ. A 8. sorban szereplő állítás ezt elkerüli azzal, hogy kifejezetten deklarálja.
- Az 5. sorban elmondjuk a böngészőnek, hogyan kell alkalmazkodnia a különböző képernyőformátumokhoz.
- A 6. sorban beállított cím a böngésző felső sávjában és a keresőkben fog megjelenni.
- A 7. sorban megmondjuk a böngészőnek, hogy hol találja meg a stílussal kapcsolatos Bootstrap keretelemeket.
- A 10. sortól kezdődik a konténer. A törzs tartalmazza a weboldal tartalmát és a Bootstrap szkriptekre mutató hivatkozást, amelyek interaktivitást biztosítanak oldalunknak.
- A 13. sor a dokumentum végét jelzi.
A Bootstrap webhely elrendezése
Kulcsfogalmak a Bootstrap webhely elrendezéséhez
Ahogy az előző cikkekben is írtuk, A Bootstrap a mobil első megközelítést alkalmazza. Ha ezt a megközelítést alkalmazzuk, a tervezés a legkisebb képernyőmérettel rendelkező eszközzel történik, majd rétegeket adunk hozzá, hogy a következő méretekhez igazítsuk.
Itt két kulcsfogalmat kell figyelembe vennünk:
- Töréspontok.
- Médiakonzultáció.
A töréspontok jelzik, hogy az elrendezés melyik képernyőszélességtől módosul., A médialekérdezések stílusparamétereket alkalmaznak bizonyos böngésző és operációs rendszer jellemzői alapján. Más szavakkal, minden töréspontnak megfelelő stílusa lesz.
A Bootstrap hat előre definiált törésponttal rendelkezik, amelyeket fejlettebb programozók módosíthatnak. Az alapértelmezett pontok a következők:
- Extra kicsi: nincs előre beállított azonosítója, és az 576 pixelnél kisebb képernyőkre vonatkozik.
- Kicsi: Az sm-vel azonosítják, és 576 pixeles képernyőkhöz használják.
- Közepes: md-vel azonosítják, és 768 pixeles képernyőkhöz használják.
- Hossz: Az lg-ként azonosítva 992 pixeles képernyők esetén használatos.
- Extra hosszú: lg azonosítóval rendelkezik, és a stílusokat 1200 pixeles képernyőkre alkalmazza.
- Extra extra hosszú: Az xxl azonosítóval jelölt, 1400 pixeltől kezdődően a dizájn alkalmazására szolgál.
Ezeket a méreteket nem véletlenül választották mindegyik töréspont tartalmazhat olyan tárolót, amelynek szélessége 12 többszöröse. Szintén nem egy adott eszközt céloznak meg, hanem alkalmazkodnak a különböző eszközkategóriákhoz és képernyőméretekhez.
A különböző képernyőméreteken belül megtaláljuk a konténereket. Ezek felelősek az oldal tartalmának egy adott eszközön vagy grafikus ablakon történő tárolásáért, kitöltéséért és összehangolásáért.
;