V tomto příspěvku uvidíme rozložení webu Bootstrap předvést úžasné schopnosti tohoto open source frameworku. v předchozí články měli jsme nainstalované vývojové prostředí a potřebné pluginy pro usnadnění naší práce.
Pamatujte si to jako správce obsahu Linux Adictos Neumožňuje mi vložit kód příkladů, které jsem nahrál na GitHub. Chcete-li si je stáhnout, musíte nainstalovat balíček Git do vaší distribuce a poté napsat následující příkazy:
cd Documentos
git clone https://github.com/dggonzalez1971/bootstrap.git
Chcete-li stáhnout nové soubory, budete muset tyto dva příkazy pravidelně spouštět.
Analýza kódu
Nyní v průzkumníku souborů otevřete example2.html pomocí VSCodium. (Otevřít pravým tlačítkem) Vidíme následující:
- Na řádku 1 sdělíme prohlížeči typ dokumentu, aby věděl, jak jej vykreslit.
- Řádek 2 označuje jazyk stránky, který prohlížeči ukazuje, jak reprezentovat určité znaky, a vyhledávačům jazyk obsahu, který usnadňuje umístění. V našem kódu je definován jako es, ale existují regionální varianty, jako je es_ES pro španělštinu ze Španělska nebo es_AR pro španělštinu z Argentiny.
- Od řádku 3 máme metadatový kontejner umístěný mezi tagy Y . Metadata poskytují informace o dokumentu. V našem příkladu:
- Řádek 4 označuje standard používaný pro kódování znaků. Možná jste někdy viděli, že místo znaků s diakritikou nebo speciálních symbolů se uvnitř kosočtverce zobrazuje otazník. Důvodem je, že prohlížeč používá nesprávné kódování. Výpis na řádku 8 se tomu vyhýbá tím, že to výslovně deklaruje.
- V řádku 5 říkáme prohlížeči, jak se má přizpůsobit různým formátům obrazovky.
- Titulek, který nastavíme na řádku 6, se zobrazí v horní liště prohlížeče a ve vyhledávačích.
- Na řádku 7 řekneme prohlížeči, kde má najít prvky rámce Bootstrap související se stylováním.
- Od řádku 10 začíná kontejner. Tělo obsahuje obsah webové stránky a odkaz na skripty Bootstrap, které našemu webu zajistí interaktivitu.
- Řádek 13 označuje konec dokumentu.
Rozvržení webu Bootstrap
Klíčové koncepty pro rozvržení webu Bootstrap
Jak jsme řekli v předchozích článcích, Bootstrap využívá mobilní přístup. Když se použije tento přístup, návrh se provede se zařízením s ohledem na nejmenší velikost obrazovky a poté se přidají vrstvy, aby se přizpůsobila velikostem, které následují.
Zde musíme vzít v úvahu dva klíčové pojmy:
- Body zlomu.
- Mediální konzultace.
Zarážky označují, od jaké šířky obrazovky je rozvržení upraveno., Dotazy na média aplikují parametry stylu na základě určitých vlastností prohlížeče a operačního systému. Jinými slovy, každý bod přerušení bude mít odpovídající styl.
Bootstrap přichází se šesti předdefinovanými body přerušení, které mohou pokročilejší programátoři upravit. Výchozí body jsou:
- Extra malý: Nemá přednastavený identifikátor a vztahuje se na obrazovky o šířce menší než 576 pixelů.
- Malý: Označuje se sm a používá se pro obrazovky od 576 pixelů.
- Střední: Označuje se md a používá se pro obrazovky od 768 pixelů.
- Délka: Označeno jako lg se používá pro obrazovky od 992 pixelů.
- Extra dlouhý: Má identifikátor lg a aplikuje styly na obrazovky od 1200 pixelů.
- Extra extra dlouhé: Označeno identifikátorem xxl, používá se k aplikaci designu na obrazovky od 1400 pixelů.
Tyto velikosti nebyly zvoleny náhodně každý z bodů přerušení může obsahovat kontejnery, jejichž šířka je násobkem 12. Nejsou také zaměřeny na konkrétní zařízení, ale místo toho se přizpůsobují různým kategoriím zařízení a velikosti obrazovky.
V rámci různých velikostí obrazovek najdeme kontejnery. Tito jsou zodpovědní za hostování, vyplnění a zarovnání obsahu webu v určitém zařízení nebo grafickém okně.
;