Tento typ manipulace nás vede k přemýšlení o návrzích „jedinečným“ způsobem a v okamžiku, kdy máme s používáním trochu více zkušeností Bootstrap Začneme vše takto vidět a tím získáme konzistenci a rychlost v našem způsobu práce.
První věcí, kterou je třeba vědět, je, že tento design Mřížka nám umožňuje pracovat takovým způsobem, že můžeme implementovat mobilní zobrazení nativně, samozřejmě od verze 3 Bootstrap, díky tomu, že tato verze byla postavena s ohledem na mobilní design.
V předchozích verzích rámce musely být třídy specifikovány přímo, aby náš návrh měl schopnost přizpůsobit se rozlišení mobilních zařízení, nyní různé třídy Mřížka dělají to automaticky.
Abychom mohli využít této funkce, musíme myslet od malých po velké, to znamená, že třídy, které aplikujeme, musí být vždy považovány za nejmenší a pak se budou škálovat na jiná rozlišení, tj. Pokud definujeme sm třída (malé nebo malé), automaticky Bootstrap předpokládá, že se jedná o minimální výraz a že jej lze poté škálovat md (medián) nebo do lg (velký).
Než přejdeme k praktičtějším příkladům, musíme pochopit, jaké jsou třídy, které můžeme použít ve sloupcích a Mřížka A také musíme vědět, pro jaký případ platí každý z nich, takže při navrhování našich stránek můžeme vzít v úvahu nejmenší zařízení, kterého chceme dosáhnout.
S tímto přístupem můžeme stavět weby Přátelský k mobilům„Jak jsou dnes pro vyhledávače a jejich výsledky důležité SEO, samozřejmě se stejnou prací.
Obrazovky telefonuJedná se o nejmenší zařízení, které teoreticky může navigovat v našem designu, přestože rozlišení telefonů byla postupně převedena na Full HD, toto je obecně pro nejvyšší úroveň, zatímco střední a nízký rozsah je teoreticky většina udržuje mnohem nižší rozlišení. Druh Mřížka to platí pro tento případ: col-xs- a platí pro řešení menší než šířka 768 pixelů.
Obrazovky tabletůJsou teoreticky druhým nejmenším zařízením, díky většímu podílu velikosti tablet nabízí větší navigační plochu, takže můžeme použít o něco více obsahu než s obrazovkou telefonu, navíc obecně navigace na tabletech probíhá horizontálně. Třída, která platí pro toto zařízení, je col-sm- a platí pro rozlišení s šířkami většími než 768 pixelů a pod 992 pixelů.
Zařízení s malou obrazovkouObvykle se jedná o notebooky s nízkým rozsahem stolních počítačů a notebooků, mohou to být zařízení s obrazovkami menšími než 15 palců nebo s více než 10letou životností, jsou to také notebooky, které jsou určeny pro studenty a odvětví s nízkými kupní síla, to je většinový sektor. Třída, která platí pro tento případ, je col-md- a mezní rozlišení pro šířku jsou větší než 992 pixelů a méně než 1 200 pixelů.
Zařízení s velkou obrazovkouZde můžeme svléknout nejmodernější zařízení a také obrazovky s více než 15 palci, v této kategorii vstupují do nového zařízení, jako je ultrapřenosné, rozlišení 4K nebo QHD také tam, kde vidíme povrchy větší než 1080p. Vyloučením šířek, které zde budeme zpracovávat, jsou ty větší než 1 200 pixelů, Toto je další verze Bootstrap pravděpodobně.
Protože známe teorii systému Mřížka z Bootstrap„Je dobré začít s praktickou aplikací, ale než uvidíme kód, musíme porozumět několika dalším konceptům, musíme vždy podle konvence a osvědčených postupů použít prvek ve třídě. kontejner, protože to vytvoří kontejner, jak naznačuje jeho název, aby zachoval naše různé sloupce. Další koncept, který musíme vědět, je, že vždy bude 12 sloupců, takže různé kombinace, které vytvoříme, musí toto číslo vzít v úvahu.
V následujícím příkladu vytvoříme kód pro rozložení 3 velkých sloupců, použijeme třídu col-md- a protože při dělení 12 na 3 chceme 3 stejné sloupce, získáme číslo 4, takže toto bude velikost každého z našich výsledných sloupců.
Podívejme se na kód bez dalších okolků:
Mřížka bootstrapuStruktura je velmi jednoduchá, se třídou jsme vytvořili div kontejner, a uvnitř div se třídou řádek nakonec v rámci posledního jsme vytvořili 3 divs se třídou col-md-4 Toto je třída pro malé obrazovky pro nepřenosné počítače a vidíme, jak zkombinujeme číslo 4, což znamená, že každý jejich div odpovídá 4 sloupcům Mřížka. Podívejme se, jak to vypadá, když spustíme v našem prohlížeči:Příklad použití sloupců v bootstrapu
Sloupec a
Lorem ipsum dolor sit amet, consectetur adipiscing elite. Více a více od srpna. Aliquam mi usnadňuje lorem pharetra, ut volutpat magna laoreet. Fusce sed mi ut turpis bibendum dictum.Sloupec B
Lorem ipsum dolor sit amet, consectetur adipiscing elite. Více a více od srpna. Aliquam mi usnadňuje lorem pharetra, ut volutpat magna laoreet. Fusce sed mi ut turpis bibendum dictum.Sloupec C.
Lorem ipsum dolor sit amet, consectetur adipiscing elite. Více a více od srpna. Aliquam mi usnadňuje lorem pharetra, ut volutpat magna laoreet. Fusce sed mi ut turpis bibendum dictum.
ZVĚTŠIT
ZVĚTŠIT
Mřížka bootstrapuPokud si v našem kódu všimneme, že vše zůstává stejné, kromě našich tříd, kde jsme pro sloupce A a B přidali třídu col-sm-6 a pro sloupec C třída col-sm-12, to znamená, že když se rozlišení sníží, budou vládnout třídy sm, jak vidíme na následujícím obrázku:Příklad použití sloupců v bootstrapu
Sloupec a
Lorem ipsum dolor sit amet, consectetur adipiscing elite. Více a více od srpna. Aliquam mi usnadňuje lorem pharetra, ut volutpat magna laoreet. Fusce sed mi ut turpis bibendum dictum.Sloupec B
Lorem ipsum dolor sit amet, consectetur adipiscing elite. Více a více od srpna. Aliquam mi usnadňuje lorem pharetra, ut volutpat magna laoreet. Fusce sed mi ut turpis bibendum dictum.Sloupec C.
Lorem ipsum dolor sit amet, consectetur adipiscing elite. Více a více od srpna. Aliquam mi usnadňuje lorem pharetra, ut volutpat magna laoreet. Fusce sed mi ut turpis bibendum dictum.
ZVĚTŠIT
Tímto ukončujeme tento tutoriál, kde jsme se naučili, jak systém Mřížka z BootstrapSamozřejmě je to jen špička ledovce, existuje mnohem více obsahu, který můžeme prozkoumat v jiných tutoriálech, ale s těmito základními znalostmi můžeme začít vidět, jak propojit naše návrhy logičtěji a s menším úsilím díky rámec.Líbil se vám tento návod a pomohl mu?Autora můžete odměnit stisknutím tohoto tlačítka, čímž mu dáte kladný bod
