Bootstrap 4 se školením editorů. Třídy pořadí prvků

Článek, ve kterém si rozebereme mřížku Bootstrap 4, která se používá k vytváření responzivních rozložení webu.

Účel mřížky

Rámec mřížky Bootstrap 4 je navržen pro vytváření responzivních rozložení webových stránek.

Mřížka Bootstrap 4 je založena na dotazech CSS Flexbox a CSS médií. Jejich prostudování vám umožní podrobněji porozumět tomu, jak funguje mřížka Bootstrap 4.

Adaptivní rozložení je rozložení, které může měnit svůj vzhled v závislosti na šířce hlavní oblasti (výřezu) prohlížeče. To znamená, že u některých šířek výřezu může responzivní rozvržení vypadat jedním způsobem, ale u jiných může vypadat úplně jinak.

V Bootstrap 4 je změna vzhledu rozvržení implementována prostřednictvím dotazů na média. Každý požadavek na média v Bootstrapu je založen na minimální šířce výřezu prohlížeče (bod přerušení, bod přerušení, název zařízení).

Rámec Bootstrap 4 má 5 bodů přerušení nebo názvů zařízení (unlabeled, sm, md, lg, xl), a proto vám umožňuje vytvořit rozložení, které může na každém z nich vypadat jinak.

V Bootstrapu 4 se oproti Bootstrapu 3 změnil počet bodů přerušení. V Bootstrapu 3 byly čtyři: xs, sm, md a lg.

Prvky mřížky

Mřížka Bootstrap 4 se skládá z následujících prvků:

• Obalové nádoby (nádoby a nádoby na tekutiny);
• Řádky (řádek);
• Adaptivní bloky (sl.).

Zabalte nádoby

Obalový kontejner je prvek mřížky Bootstrap 4, ze kterého začíná vytváření responzivního rozvržení stránky nebo bloku. Ostatní prvky mřížky (řady a adaptivní bloky) musí být umístěny uvnitř.

Bootstrap 4 má 2 typy obalů kontejnerů: responzivní-fixní a responzivní-fluidní.

Označení HTML responzivního opraveného kontejneru:

...

HTML označení responzivního pryžového kontejneru:

...

První kontejner (s pevnou odezvou) se používá, když potřebujete vytvořit rozložení s šířkou, která musí zůstat konstantní v rámci určité šířky výřezu prohlížeče.

Závislost šířky adaptivně fixního kontejneru na šířce výřezu prohlížeče je uvedena v tabulce:

To znamená, že adaptivní pevný kontejner bude mít:

• 100% šířka pro šířku výřezu až 576 pixelů;
• 540px s šířkou výřezu od 576 do 768px;
• 720px s šířkou zobrazované oblasti od 768 do 992px atd.

Ve vodorovném směru je kontejner s pevnou odezvou umístěn na střed, to se provádí v bootstrap.css pomocí vlastností CSS margin-left: auto a margin-right: auto .

Druhý (responzivní gumový) kontejner se používá, když potřebujete vytvořit zcela flexibilní rozložení stránky nebo nějakého bloku. Tento kontejner má 100% šířku pro jakoukoli šířku výřezu.

Kromě toho mají obalové kontejnery (kontejner a kontejner-tekutina) také vnitřní výplň vlevo a vpravo od 15 pixelů. Nastavení odsazení pro obalové kontejnery se provádí v souboru CSS Bootstrap 4 pomocí vlastností padding-left: 15px a padding-right: 15px.

Při vytváření rozvržení pomocí mřížky Bootstrap 4 neumisťujte obalové kontejnery do jiných.

Řádky

Řádek je speciální prvek mřížky (řádek), který se používá při vytváření rozvržení v následujících případech:

• mezi kontejner a adaptivní bloky, které je třeba do něj umístit;
• mezi jedním a dalšími adaptivními bloky, které musí být umístěny v prvním adaptivním bloku.

Řádkové označení HTML:

...

Na rozdíl od Bootstrapu 3, ve kterém řada působila pouze jako kompenzace levé a pravé vnitřní výplně obalových kontejnerů nebo responzivních bloků, hraje v Bootstrapu 4 velmi důležitou roli. To je způsobeno tím, že tato mřížka je postavena na CSS Flexbox. V této mřížce funguje jako flex kontejner pro flex prvky (adaptivní bloky). Tito. pokud použijete adaptivní bloky mimo řádek, nebudou fungovat. V Bootstrap 4 musí být responzivní bloky v bloku s třídou řádku.

Kompenzace vnitřního odsazení okrajů se provádí stejným způsobem jako v Bootstrapu 3, kvůli záporným levým a pravým okrajům rovným 15px (margin-left:-15px a margin-right:-15px).

Příklad kompenzace polstrování pole:

kontejner (+15px) -> řádek (-15px) -> sloupec (+15px) -> proměnlivý kontejner obsahu (+15px) -> řádek (-15px) -> sloupec (+15px) -> řádek (-15px) -> col (+15px) -> obsah

V důsledku toho bude okraj od levého a pravého okraje obalového kontejneru k obsahu vždy 15 pixelů.

Navíc, adaptivní bloky, které spolu logicky nesouvisí, nemusí být umístěny v jedné řadě v rámci nějakého druhu obalového kontejneru nebo jiného adaptivního bloku. Nejsprávnější je rozdělit je do samostatných logických skupin a každou z nich umístit do samostatné řady.

Například:

... … … … ...

Adaptivní bloky

Adaptivní bloky jsou hlavními stavebními kameny responzivního rozvržení; určují, jak bude rozvržení webové stránky vypadat v různých kontrolních bodech (bez symbolu, sm, md, lg a xl).

Vytvoření adaptivního bloku je velmi jednoduché: přidáním jedné nebo více tříd col-?-? na požadovaný HTML element.

Ve třídě col-?-?> je místo prvního otazníku uveden název kontrolního bodu: bez označení, sm, md, lg nebo xl. Místo druhého otazníku je uvedena šířka adaptivního bloku, kterou by měl mít v zadaném kontrolním bodě. Šířka responzivního bloku je určena v relativním tvaru pomocí čísla od 1 do 12 (sloupce Bootstrap).

Toto číslo určuje, jak velkou část šířky bude adaptivní blok zabírat v zadaném kontrolním bodě od šířky nadřazeného bloku, tzn. řádek. Šířka řádku v číselných vyjádřeních (sloupce Bootstrap) je 12.

Například blok s třídou col-md-4 v kontrolním bodě md bude zabírat 4/12 šířky řádku, tzn. 33,3 % (tj. 4/12 x 100 % = 33,3 %).

Adaptivní bloky, stejně jako kontejnery, mají 15px levé a pravé odsazení. Tyto výplně pro adaptivní bloky rámce Bootstrap 4 se nastavují pomocí vlastností CSS padding-left: 15px a padding-right: 15px.

Adaptivní bloky musí být umístěny v řadě. Tito. Každý adaptivní blok musí mít blok s řádkem třídy jako nadřazeným prvkem.

Zvažte například, jak široký bude následující responzivní blok na každém zařízení:

...

Tento adaptivní blok bude mít:

• až sm (po xs) šířka rovna 12 Bootstrap sloupcům (tj. 12/12*100%=100% šířky řádku);
• na sm zařízení šířka rovna 9 Bootstrap sloupcům (tj. 9/12*100%=75% šířky řádku);
• na md zařízení šířka rovna 7 Bootstrap sloupcům (tj. 7/12*100%=58,3% šířky řádku);
• na zařízení lg šířka rovna 5 sloupcům Bootstrap (tj. 5/12*100 %=41,6 % šířky řádku);
• na zařízení xl šířku rovnající se 3 sloupcům Bootstrap (tj. 3/12*100 %=25 % šířky řádku).

Navíc při zadávání šířky adaptivního bloku pro nějaký řídicí bod se bude vztahovat nejen na tento bod, ale i na všechny následující, pokud nejsou zadané.

Responzivní blok na zařízeních md a lg bude mít šířku rovnou 6 sloupcům Bootstrap: (12) -> sm(6) -> md -> lg -> xl(3) .

Responzivní blok na zařízení sm bude mít šířku rovnou 8 sloupcům Bootstrap a na zařízeních lg a xl bude mít šířku rovnou 4 sloupcům Bootstrap: (8) -> sm -> md(4) -> lg - > xl.

Responzivní blok na všech zařízeních bude mít šířku rovnou 6 Bootstrap sloupcům: (6) -> sm -> md -> lg -> xl .

Adaptivní bloky bez sloupků

Do seznamu byly přidány speciální třídy col , col-sm , col-md , col-lg , col-xl , col-auto , col-sm-auto , col-md-auto , col-lg-auto a col-xl Bootstrap 4 grid -auto .

První skupina tříd (col, col-sm, col-md, col-lg, col-xl) je určena pro vytváření adaptivních bloků, jejichž šířka bude záviset na volném prostoru řádku. Neobsazená šířka (volné místo) čáry je rovnoměrně rozdělena mezi všechny takové bloky. Kromě toho mají tyto adaptivní bloky před přidělením volného místa na řádku nulovou šířku (ve výchozím nastavení).

Podívejme se na pár příkladů.

1. Vytvořte 5 adaptivních bloků se stejnou šířkou v řadě.

1/5 2/5 3/5 4/5 5/5

Výpočet šířky:

• volné místo řádků - 100 % (protože jejich šířka je 0);
• šířka každého adaptivního bloku je 20 % (100 %/5);

2. Šířka bloků s třídou col, pokud existuje adaptivní blok s počtem sloupců v řádku.

? 7 sloupců? ?

Výpočet šířky:

• volné místo na řádku - 41,67 % ((12-7)/12*100 %);
• šířka každého adaptivního bloku, kromě sloupce-7, je 13,89 % (41,67 %/3).

V některých verzích prohlížečů Safari existuje chyba při použití takového označení, které lze rozdělit na několik řádků.

Existují 2 způsoby, jak to opravit:

• nastavením adaptivních bloků border.col ( border: 1px solid transparent; )
• nastavením responzivních bloků CSS vlastnosti flex-basis .col (flex: 1 0 20 %; )

Mřížka Bootstrap 4 navíc umožňuje umístit responzivní bloky bez zadání počtu sloupců na několika řádcích.

... ... ... ...

Tato akce se provádí přidáním prázdného prvku div s třídou w-100 do označení před adaptivní blok, který by měl začínat novým řádkem.

Pokud je třeba tuto akci použít pouze pro některé kontrolní body, musíte k ní přidat také třídy reagující obslužné programy Bootstrap 4 (třída w-100).

V tomto příkladu budou adaptivní bloky přeneseny do nového řádku pouze na zařízeních s malým nebo malým výřezem.

... ... ... ...

Druhá skupina tříd (col-auto, col-sm-auto, col-md-auto, col-lg-auto a col-xl-auto) je určena k vytváření adaptivních bloků, jejichž šířka bude určena podle jejich obsah.

Například:

(1) (2) - šířka v kontrolních bodech md, lg a xl bude určena na základě obsahu (3)

Jako výsledek:

• na xs a sm budou adaptivní bloky umístěny svisle (jeden pod druhým) a zaberou celou šířku řádku;
• na md bude mít responzivní blok 2 šířku potřebnou k zobrazení jeho obsahu; pokud blok 2 nezabírá celou šířku řádku, pak si jej adaptivní bloky 1 a 3 rozdělí mezi sebe rovnoměrně; pokud blok 2 zabírá celou šířku čáry, pak bude obrázek stejný jako v kontrolních bodech xs a sm;
• na lg a xl bude mít responzivní blok 2 šířku potřebnou k zobrazení jeho obsahu; pokud blok 2 nezabírá celou šířku řádku, pak blok 3 zabere šířku rovnou 2 sloupcům Bootstrap a blok 1 bude zabírat celou zbývající šířku řádku; pokud blok 2 zabírá celou šířku řádku, pak bude označení stejné jako na xs a sm, pouze blok 3 na 3 řádcích bude mít šířku rovnou 2 sloupcům Bootstrap.

Uspořádání adaptivních bloků v řadě

Ve výchozím nastavení jsou adaptivní bloky v řadě uspořádány do vodorovných čar. V horizontální linii jsou adaptivní bloky seřazeny postupně zleva doprava. Adaptivní bloky s celkovým počtem sloupců nejvýše 12 se vejdou do jedné vodorovné čáry Adaptivní bloky, které se nevejdou do aktuálního řádku, se přesunou na další.

(1) (2) (3) (4)

Podívejme se na další příklad, ve kterém mají adaptivní bloky různé šířky v různých řídicích bodech:

Základní princip dispozičního uspořádání

Základním principem rozložení webové stránky na mřížce Bootstrap 4 je vnořit některé adaptivní bloky do jiných.

Šířka adaptivních bloků je přitom vždy relativní hodnotou, která se nastavuje ve sloupcích Bootstrap a závisí pouze na šířce rodiče, tzn. řádek.

Obsah webové stránky by měl být umístěn pouze v responzivních blocích.

Například ve stávajícím rozložení, konkrétně v adaptivním bloku col-8, přidáme další 2 bloky:

... ...

Chcete-li to provést, musíte nejprve vložit řádek (kontejner pro adaptivní bloky) do bloku col-8:

... ... Bootstrap 4 - Vložení řádku do obsahu responzivního bloku col-8

Poté přidejte 2 adaptivní bloky v řadě:

... ... ... Bootstrap 4 - Vkládání responzivních bloků do řady

Zarovnání adaptivních bloků

Zarovnání adaptivních bloků v horizontálním a vertikálním směru se provádí v Bootstrap 4 pomocí tříd flex utility.

Vertikální zarovnání adaptivních bloků

Vertikální zarovnání adaptivních bloků v rámci řádku řádku se provádí pomocí jedné z následujících tříd, které musí být navíc přidány do řádku:

• align-items-start (vzhledem k začátku řádku);
• align-items-center(center);
• align-items-end (relativně ke konci).

Zarovnejme například všechny adaptivní bloky na střed řádkové čáry:

1/2 2/2

Ve výchozím nastavení zabírají responzivní prvky celou výšku řádku, ve kterém jsou umístěny.

Vertikální zarovnání konkrétního adaptivního bloku v rámci řádku lze provést jednou z následujících tříd:

• align-self-start (vzhledem k začátku řádku);
• align-self-center (střed);
• align-self-end (relativně ke konci).

Tyto třídy musí být přidány do adaptivních bloků, nikoli do řádku.

Například adaptivní blok 2 zarovnáme ke spodnímu okraji řádku:

(1) (2)

Horizontální vyrovnání adaptivních bloků

Následující třídy jsou určeny pro zarovnání adaptivních bloků v horizontálním směru:

• justify-content-start (vzhledem k začátku řádku - výchozí);
• justify-content-center (střed);
• justify-content-end (vzhledem ke konci řádku);
• justify-content-around (rovnoměrně, s přihlédnutím k prostoru před prvním a posledním adaptivním blokem);
• justify-content-between (rovnoměrně, se stejným prostorem mezi responzivními bloky).

Rozmístěme například adaptivní bloky v horizontálním směru rovnoměrně:

(1) (2)

Responzivní rozložení bez okrajů

Vnitřní výplň adaptivních bloků a vnější záporné okraje řádků lze odstranit, pokud k nim přidáte třídu bez okapů (tj. řádek).

... ... ...

Upozorňujeme, že tato třída (bez okapů) ovlivňuje pouze adaptivní bloky, které jsou přímo umístěny v tomto řádku. Tito. Vlastnosti CSS pro odstranění odsazení se nebudou vztahovat na adaptivní bloky, které nemají tento řádek jako nadřazený.

V Bootstrapu 4 lze offsety responzivních bloků provádět pomocí:

• posun tříd (pro určitý počet sloupců);
• třídy marže služeb (utilit).

offsetové třídy

Třídy posunu jsou navrženy tak, aby posouvaly adaptivní bloky doprava o určitý počet sloupců.

Tyto třídy mají následující syntaxi:

Offset-(1) nebo offset-(breakpoint)-(1)

(breakpoint) – kontrolní bod, od kterého bude na tento blok aplikován offset (pokud není zadán, bude offset aplikován od nejmenších zařízení).

(2) – hodnota offsetu zadaná pomocí počtu sloupců Bootstrap.

Jako příklad nastavíme posun pro adaptivní bloky, jak je znázorněno na obrázku.

(1) (2) (1) (2) (1)

Offset pomocí tříd okrajů

Ve čtvrté verzi Bootstrapu můžete také nastavit posun pro adaptivní bloky pomocí odsazení okrajů (margin-left: auto a (nebo) margin-right: auto). Tato možnost offsetu vzniká, protože mřížka v nové verzi Bootstrap (4) je založena na CSS Flexbox.

Tato možnost posunutí (pomocí tříd okrajů) se používá, když je potřeba posunout bloky vůči sobě o určitou proměnnou hodnotu.

V Bootstrap 4 můžete pro pohodlnější a adaptivnější nastavení odsazení okrajů pro bloky (margin-left: auto a (nebo) margin-right: auto) použít třídy ml-auto , mr-auto , ml-(breakpoint )-auto a mr-(bod přerušení)-auto .

Bootstrap 4 - Responsive Block Offset

(1) (2) (1) (2) (3) (1) (2)

Změna vizuálního pořadí adaptivních bloků

Ve výchozím nastavení se responzivní bloky vizuálně zobrazují v pořadí, v jakém jsou umístěny v kódu HTML.

Změna vizuálního pořadí responzivního bloku v Bootstrap 4 se provádí pomocí třídy order-(visual_number). Tato třída je pro kontrolní bod xs. Pokud je třeba určit pořadí prvku nikoli pro řídicí bod xs, ale pro sm, md, lg nebo xl, použije se následující verze této třídy:

objednávka-(bod přerušení)-(číslo_vizuálu)

Místo (vizuální_číslo) musíte zadat číslo od 1 do 12.

Toto číslo určuje, jak budou prvky na stránce vizuálně vypadat. Totiž všechny adaptivní prvky budou vizuálně následovat ve vzestupném pořadí těchto čísel. Pokud prvek nemá nastavenou třídu objednávky, je výchozí hodnota 0.

Změňme například pořadí dvou adaptivních bloků:

První (neobjednáno, bez pořadí-třída) Druhý, ale bude zobrazen jako poslední Třetí, ale bude zobrazen jako druhý

Další příklad (pomocí tříd adaptivních objednávek):

První (na xs se jako druhé zobrazí sm) Druhé (na xs se jako první zobrazí sm)

Kromě čísel (standardně od 1 do 12) můžete použít i slova první a poslední . Tyto třídy (objednávka-první, objednávka-(bod přerušení)-první, objednávka-poslední, objednávka-(bod přerušení)-poslední vám umožňují vizuálně přesunout prvek na začátek nebo konec.

Třídy order-first a order-(breakpoint)-first uplatňují svůj účinek nastavením vlastnosti CSS prvku prvku na -1 (pořadí: -1) a třídy order-last a order-(breakpoint)-last nastavují CSS. vlastnost objednávky na hodnotu 13 (pořadí: $sloupce + 1).

Přepišme výše uvedený příklad pomocí tříd pořadí, které používají první a poslední klíčové slovo:

První (na xs se jako poslední zobrazí sm) Poslední (na xs se jako první zobrazí sm)

Příklad s použitím tříd pořadí s číslem a slovy první a poslední:

#1 (XS), #LAST (SM), #1 (MD, LG a XL) #2 (XS), #7 (MD, LG a XL) #3 (XS), #6 (MD, LG a XL ) #4 (XS), #5 (MD, LG a XL) #5 (XS), #4 (MD, LG a XL) #6 (XS), #3 (MD, LG a XL) #7 (XS ), #2 (MD, LG a XL) #8 (XS), #FIRST (SM), #8 (MD, LG a XL)

Příklad adaptivního rozložení na mřížce Boostrap 4

Vytvořme responzivní rozložení pro blok webové stránky znázorněný na obrázku pomocí mřížky Bootstrap 4 - Příklad rozložení responzivního bloku

1. Vytvořte označení bloku pro mobilní zařízení (xs).

(1) (2) (3) (4) (5)

2. Nastavte označení pro kontrolní bod sm:

(1) (2) (3) (4) (5)

3. Nastavte bloky na počet sloupců, které by měly mít na zařízeních md a lg:

(1) (2) (3) (4) (5)

4. Vytvořte označení pro xl:

(1) (2) (3) (4) (5)

Odstraňujeme zbytečné kontrolní body z adaptivních bloků:

(1) (2) (3) (4) (5)

Navíc, zpočátku v Bootstrap 4 má responzivní blok šířku 100 %. To umožňuje nespecifikovat počet sloupců při vytváření adaptivních bloků, pokud by jejich počáteční šířka měla být 12 sloupců (100 %).

(1) (2) (3) (4) (5)

Na základě počtu hvězdiček na GitHubu.

Pokud si chcete osvojit Bootstrap, konkrétně jeho poslední, čtvrtou verzi, pak je tento materiál připraven speciálně pro vás. Zde budou na malém příkladu, který lze skutečně zvládnout za půl hodiny, předvedeny základy Bootstrapu, jakmile je pochopíte, budete moci pomocí tohoto frameworku dělat něco vlastního.

Předpoklady Tento materiál je zaměřen na začínající webové vývojáře, kteří mají základní znalosti HTML, CSS a jQuery.

Zde je jednostránkový web, o jehož vytvoření pomocí Bootstrapu budeme mluvit.

Hotový projekt vytvořený pomocí Bootstrap

Npm install bootstrap
Bootstrap lze připojit ke stránce pomocí sítě pro doručování obsahu. Chcete-li to provést, přidejte do značky následující odkaz:

Nejnovější verzi Bootstrapu si můžete stáhnout zde a používat ji lokálně.

Struktura projektu by měla vypadat jako na následujícím obrázku.

Struktura projektu O schopnostech Bootstrapu 4 První stabilní verze Bootstrapu 4 byla vydána na konci ledna tohoto roku. Bootstrap nyní obsahuje některé zajímavé funkce, které v předchozí verzi nebyly. Konkrétně, pokud mluvíme o vylepšeních a změnách, můžeme si všimnout následujícího:

• Bootstrap 4 byl přepsán pomocí technologie flexbox, zatímco Bootstrap 3 používal plovoucí technologii. Pokud nejste obeznámeni s flexboxem, podívejte se na tento zdroj.
• CSS Bootstrapu 4 používá jednotky rem, zatímco dříve používalo jednotky px. můžete zjistit, jak se liší.
• Některé součásti, například panely, byly odstraněny. Podrobnosti o změnách provedených v Bootstrap 4.

Ve skutečnosti má Bootstrap 4 ve srovnání s Bootstrap 3 spoustu nových věcí, pokud to potřebujete, můžete se s těmito inovacemi seznámit. Nyní začínáme pracovat na našem vzdělávacím projektu Bootstrap Grid System Systém Bootstrap Grid je určen pro vytváření rozvržení stránek. Usnadňuje vývoj responzivních webových stránek. V nové verzi Bootstrapu se názvy tříd nezměnily (je třeba poznamenat, že class.xs již neexistuje).

Mřížka je rozdělena do 12 sloupců, tato struktura, nakonfigurovaná podle potřeby vývojáře, je základem rozvržení stránky.

Abyste mohli použít mřížku Bootstrap, musíte do hlavního prvku stránky přidat třídu .row. Při nastavování velikostí vnořených prvků se používají následující třídy (místo hvězdičky na konci názvu třídy je uveden počet sloupců základní 12sloupcové mřížky, které má konkrétní prvek zabírat):

• col-lg-* - třída používaná pro stránky určené pro zařízení s velkou obrazovkou, jako jsou notebooky;
• col-md-* - třída pro stránky určené pro zařízení se středně velkou obrazovkou, jako jsou tablety;
• col-sm-* – třída pro stránky, které jsou určeny pro malé obrazovky, jako jsou ty, které se nacházejí na chytrých telefonech.

Navigační lišta Navigační lišty v Bootstrapu se vytvářejí pomocí třídy .navbar. Ve skutečnosti se jedná o obal, ve kterém jsou umístěny prvky tvořící navigační lištu. Níže je panel, který nyní vytvoříme. Nachází se v horní části stránky a při rolování nezmizí.

Navigační lišta

Aby se tedy na stránce objevil navigační panel, přidáme do index.html značku s třídou .navbar , uvnitř které použijeme další třídy jako .navbar-brand , .navbar-toggler a .nav -item , vytváříme některé speciální prvky a strukturu navigačního systému webu. Třída .fixed-top vám umožňuje opravit navigační panel v horní části stránky. Zde je rozložení navigační lišty:

Domov

• O
• Portfolio
• tým
• Pošta
• Kontakt

Nyní vytvořte soubor main.css a připojte jej ke stránce umístěním následujícího do značky souboru index.html:

To vám umožní přizpůsobit styly prvků stránky umístěním pravidel CSS do tohoto souboru. Pojďme do tohoto souboru CSS přidat pravidla, která nastavují barevný design navigační lišty:

Navbar( background:#F97300; ) .nav-link , .navbar-brand( color: #f4f4f4; kurzor: pointer; ) .nav-link( margin-right: 1em !important; ) .nav-link:hover( background : #f4f4f4; barva: #f97300; ) .navbar-collapse( justify-content: flex-end; ) .navbar-toggler( background:#fff !důležité; )
Nová mřížka Bootstrap je založena na flexboxu, takže k zarovnání obsahu musíte použít příslušné vlastnosti. Chcete-li například umístit nabídku navbar vpravo, musíte použít vlastnost justify-content a nastavit její hodnotu na flex-end:

Navbar-collapse( justify-content: flex-end; )
Chcete-li upravit barvu pozadí navigační lišty, můžete použít třídy .bg-light (světlé pozadí), .bg-dark (tmavé pozadí) a .bg-primary (primární barva pozadí). Používáme následující nastavení:

Bg-dark( background-color:#343a40!důležité ) .bg-primary( background-color:#343a40!důležité )

Záhlaví stránky Následující značka se používá k popisu záhlaví stránky:

Připravíme si layout pro záhlaví stránky. Chceme, aby zabíral celou výšku okna, takže zde se bude jQuery hodit. Vytvořme soubor main.js a připojte jej k index.html před uzavírací značkou:

Do souboru main.js přidáme následující:

$(document).ready(function())( $(".header").height($(window).height()); ))
Bylo by dobré umístit do záhlaví stránky nějaký pěkný obrázek na pozadí. Udělejme to takto:

/*styl záhlaví*/ .header( background-image: url("../images/headerback.jpg"); background-attachment: fixed; background-size: cover; background-position: center; )
Tím jsme skončili.

Záhlaví stránky s obrázkem na pozadí

Záhlaví webu zatím vypadá trochu prázdně, takže do něj přidáme prvek a přiřadíme mu třídu .overlay , což povede k vytvoření bloku, který je umístěn na obrázku na pozadí záhlaví. Změňme část souboru index.html, kde jsme popisovali záhlaví, následovně:

Poté do main.css přidejte následující:

Překrytí ( pozice: absolutní; minimální výška: 100 %; minimální šířka: 100 %; vlevo: 0; nahoře: 0; pozadí: rgba(244, 244, 244, 0,79); )
Nyní do záhlaví přidáme popis projektu. Umístíme jej do nového prvku s třídou .container . Toto je pomocná třída pro framework Bootstrap navržená k rozložení obsahu na základě potřeb responzivního rozvržení. Takto se označení v tomto kroku změní:

Nyní sem přidáme další prvek, kterému přiřadíme class.description:

▍ Dobrý den, vítejte na mém oficiálním webu

Cillum dolore eu fugiat nulla pariatur. Kromě sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Vidět víc
Této značce přiřadíme i třídu .text-center, která umožní její obsah zarovnat na střed stránky. Na konci popisu webu je tlačítko. Pojďme si říct, jak to nastavit.

Tlačítka Bootstrap poskytuje mnoho tříd pro tlačítka. Můžete vidět několik příkladů designu tlačítek. Jak můžete vidět v příkladu značkování z předchozí části, přidali jsme do prvku třídy .btn a . btn-outline-secondary .

Nyní nastavíme styly pro class.description:

Description( position: absolute; top: 30%; margin: auto; padding: 2em; ) .description h1( color:#F97300 ; ) .description p( color:#666; font-size: 20px; width: 50%; line-height: 1.5; .description button( border:1px solid #F97300; background:#F97300; color:#fff; )
Takto bude vypadat záhlaví stránky po dokončení výše uvedených kroků:

Záhlaví stránky obsahující popis projektu O sekci Nejprve se podívejme na to, co chceme vytvořit. Zde je část stránky s informacemi o vývojáři webu.

O sekci

Zde využijeme schopnosti mřížky Bootstrapu k vytvoření dvoudílného rozvržení sekce. Začněme přidáním třídy .row do nadřazeného prvku sekce:

První část rozložení bude umístěna vlevo, bude obsahovat fotografii. Druhá část, umístěná vpravo, obsahuje popis.

Takto vypadá označení na levé straně této sekce:

// levá strana Vývojář S.Web
A to se stane po přidání popisu pravé strany rozložení zde:

S.Web Developer ▍D.John

Ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Kromě sint occaecat cupidatat non

Všimněte si nastavení šířky sloupců pomocí výše popsaných tříd col-lg-*, col-md-* a col-sm-*.

Zde jsou styly pro toto vše:

About( margin: 4em 0; padding: 1em; position: relativní; ) .about h1( color:#F97300; margin: 2em; ) .about img( height: 100%; width: 100%; border-radius: 50% ) .about span( display: block; color: #888; position: absolute; left: 115px; ) .about .desc( padding: 2em; border-left:4px solid #10828C; ) .about .desc h3( color: #10828C; ) .asi .desc p( line-height:2; color:#888; )

Sekce Portfolio Přejděme nyní do sekce, ve které bude představeno portfolio developera. Bude obsahovat galerii děl.

Sekce portfolia

Při vytváření rozvržení této sekce se použijí stejné principy práce s mřížkou, o kterých jsme hovořili výše:

Portfolio
Přidáním třídy .img-fluid do každého z obrázků budou responzivní.

Každý prvek v naší galerii, na středních a velkých obrazovkách, zabírá 4 sloupce (pamatujte - třída col-sm-12 se používá pro zařízení s malými obrazovkami, třída col-md-4 se používá pro střední obrazovky, col-lg-4 - pro zařízení s velkou obrazovkou). Výsledkem je, že na velkých a středních obrazovkách bude jeden prvek tvořit přibližně 33,3 % kontejnerového prvku na malých zařízeních, každý prvek zabere celou obrazovku (12 sloupců).

Styling galerie děl:

/*Portfolio*/ .portfolio( okraj: 4 em 0; pozice: relativní; ) .portfolio h1( barva:#F97300; okraj: 2 em; ) .portfolio img( výška: 15rem; šířka: 100 %; okraj: 1 em; )

Sekce blogu a práce s kartami Pojďme si promluvit o vytvoření sekce, která obsahuje oznámení o materiálech z blogu spravovaného naším podmíněným webovým vývojářem.

Sekce blogu

K vytvoření této sekce budeme potřebovat tzv. karty (karty v terminologii Bootstrap).

Chcete-li vytvořit kartu, musíte do rozvržení zahrnout prvek a přidat k němu třídu .card. Ke konfiguraci různých prvků karty můžete použít následující třídy:

• .card-header: hlavička
• .tělo karty: hlavní obsah
• .card-title: titul
• .zápatí karty: zápatí
• .card-image: image

Označení HTML pro tuto sekci bude vypadat takto:

Blog Název příspěvku

Proidente, sunt in culpa qui officia deserunt mollit anim id est laborum.

Přečtěte si více Název příspěvku

Proidente, sunt in culpa qui officia deserunt mollit anim id est laborum.

Přečtěte si více Název příspěvku

Proidente, sunt in culpa qui officia deserunt mollit anim id est laborum.

Přečtěte si více
Zde jsou styly karet:

Blog( okraj: 4em 0; pozice: relativní; ) .blog h1( barva:#F97300; okraj: 2em; ) .blog .card( box-shadow: 0 0 20px #ccc; ) .blog .card img( šířka: 100%; výška: 12em ) .blog .card-title( color:#F97300; ) .blog .card-body( padding: 1em; )
Takto bude naše jednostránková stránka vypadat po vytvoření sekce Blog:

Stránka po přidání sekce Blog Sekce Tým Tato sekce bude obsahovat informace o projektovém týmu.

Týmová sekce

K vytvoření této části použijeme mřížku, která rovnoměrně rozdělí dostupný prostor mezi obrázky. Každý obrázek (na velkých a středních obrazovkách) bude zabírat 3 sloupce mřížky, což je 25 % celkového prostoru.

Zde je označení HTML pro tuto sekci:

Náš tým Manažer Sara Chris S. inženýr Layla Front End Developer J.Jirard vedoucí týmu
A tady jsou styly:

Team( margin: 4em 0; pozice: relativní; ) .team h1( color:#F97300; margin: 2em; ) .team .item( position: relativní; ) .team .des( pozadí: #F97300; barva: #fff ; zarovnání textu: okraj-doleva-poloměr: 93 % přechod:.
Pojďme ozdobit tuto sekci animací, která se zobrazí, když najedete myší na obrázky. Mělo by to vypadat jako na obrázku níže.

Animace při najetí myší na obrázek

Chcete-li dosáhnout tohoto efektu, přidejte do main.css následující styly:

Tým .item:hover .des( výška: 100 %; pozadí:#f973007d; pozice: absolutní; šířka: 89 %; odsazení: 5 em; nahoře: 0; okraj-dolní-levý-radius: 0; )

Formulář zpětné vazby Tato část stránky bude obsahovat formulář, pomocí kterého mohou návštěvníci webu posílat zprávy vlastníkovi webu. Zde, jako obvykle, abychom stylizovali prvky a zajistili jejich odezvu, využijeme schopnosti Bootstrapu.

Formulář zpětné vazby

Stejně jako Bootstrap 3 i Bootstrap 4 používá pro vstupní pole třídu .form-control, ale nyní je tu něco nového. Například - místo zastaralého class.input-group-addon se používá nový class.input-group-prepend (pro ikony a popisky). Více podrobností o tom lze nalézt v dokumentaci Bootstrap 4 V našem případě bude každé vstupní pole umístěno v prvku, kterému je přiřazena třída .form-group.

Do souboru index.html přidáme následující:

Být v kontaktu
Zde jsou styly pro sekci formuláře zpětné vazby, která by měla být umístěna v souboru main.css:

Contact-form( margin: 6em 0; position: relativní; ) .contact-form h1( padding:2em 1px; color: #F97300; ) .contact-form .right( max-width: 600px; ) .contact-form . right .btn-secondary( background: #F97300; color: #fff; border:0; ) .contact-form .right .form-control::placeholder( color: #888; font-size: 16px; )

Písma Standardní písma nejsou vhodná pro každého. K použití písma Raleway v našem projektu jsme využili Google Font API. Tady to bude vypadat velmi dobře. Chcete-li importovat písmo, přidejte do souboru main.css následující direktivu:

@import url("https://fonts.googleapis.com/css?family=Raleway");
Dále nastavíme globální styly pro různé značky HTML:

Html,h1,h2,h3,h4,h5,h6,a( rodina písem: "Raleway"; )

Efekty posouvání Obrázek níže ukazuje chování stránky, kterého chceme dosáhnout.

Posouvání stránky při kliknutí na odkazy v navigační liště

Aby se stránka po kliknutí na odkazy na navigační liště plynule posunula do požadované sekce, budeme se muset uchýlit k možnostem jQuery. Pokud tuto knihovnu příliš neznáte, vězte, že zde není nic složitého – stačí přidat níže uvedený kód do svého souboru main.js:

$(".navbar a").click(function())( $("body,html").animate(( scrollTop:$("#" + $(this).data("value")).offset ( ).top ),1000) ))
Poté přidejte atribut hodnoty dat ke každému z odkazů v navigační liště a upravte označení takto:

O

Portfolio

Blog

tým

Kontakt

Aby to vše konečně fungovalo, zbývá už jen přidat atribut id do hlavního prvku každé sekce stránky. V tomto případě se musíte ujistit, že jeho hodnota je identická s hodnotou uvedenou v atributu data-value odpovídajícího odkazu. Zde je například odpovídající atribut pro sekci O aplikaci:

Tím je náš příklad dokončen. Přidat štítky

Vydání nové verze Bootstrap4 mě přimělo napsat tuto příručku, protože nová verze je výrazně odlišná. Budete muset strávit nějaký čas jeho studiem, ale stojí to za to. Tato příručka není úplným průvodcem Bootstrap4 a nepochybně se budete muset podívat do dokumentace více než jednou, ale zde pokryjeme základy vytváření rozvržení webu pomocí Bootstrap4 dvěma různými způsoby.

Instalace V našem případě budeme používat SASS, a proto použijeme plnou instalaci.

Pokud potřebujete Bootstrap pro rychlé prototypování, má smysl použít metodu CDN. Jednoduše připojíte soubory, které se nacházejí na jiných zdrojích na internetu, bez instalace (stahování). Tímto způsobem je přidáte do svého projektu jako odkazy.

Kód z níže uvedeného příkladu můžete jednoduše přidat do souboru svého projektu – index.html

Startovací šablona Bootstrap 4 Dobrý den< /h1>

Tento kód pochází přímo ze stránky bootstrap Bootstrap 4.

S touto šablonou můžete začít používat Bootstrap hned. Výhodou je snadné začít, ale nevýhodou je, že vám unikne přizpůsobení, které Sass nabízí.

Instalace Bootstrap 4 přes NPM V tomto bodě zahájíme náš projekt právě zde. To bude vyžadovat použití Node.js a jeho správce balíčků k instalaci samotného zaváděcího zařízení spolu s několika dalšími balíčky. To nám umožní přístup k Sass, načítání v reálném čase atd.

Nejprve se ujistěte, že máte nainstalovaný Nodejs otevřením konzoly nebo příkazového řádku:

Pokud získáte aktuální verzi, pak je vše v pořádku a můžete pokračovat, ale pokud ne, stáhněte si příslušný instalátor na základě vašeho OS a postupujte podle instalačního postupu s výchozím nastavením.

Některé užitečné informace o konfiguraci si můžete přečíst v mém příspěvku - NPM Configuring Gulp a SASS Compilation

Po dokončení instalace restartujte konzolu nebo příkazový řádek a budete mít přístup k příkazům Node.js.

Vytvořme složku pro náš projekt a jdeme do ní:

Mkdir bs4 && cd bs4

Poté spustíme npm init a vytvoříme soubor package.json, který jednoduše uloží naše závislosti.

(Poznámka: Příznak -y nám jednoduše umožňuje přeskočit odpovědi na různé dotazy a místo toho jim poskytnout výchozí hodnoty)

Poté znovu použijeme npm k instalaci několika různých balíčků v závislosti na našich vývojových závislostech:

Npm install gulp browser-sync gulp-sass --save-dev

Gulp je správce úloh pro automatické provádění často používaných úkolů. Uvidíte, jak to funguje, pokud jste začátečník.

Brows-sync automaticky aktualizuje váš prohlížeč, když se soubor změní.

gulp-sass vám umožňuje vytvořit náš projekt jeho integrací se sass.

--save-dev - instalace do samostatné složky. V našem případě do složky projektu, tedy lokálně.

Potom použijeme npm naposledy k instalaci několika balíčků jako běžných závislostí projektu:

Npm install bootstrap jquery popper.js --save

bootstrap je samozřejmě bootstrap balíček.

jquery - knihovna java skriptů používaná přímo samotnou bootstrap šablonou

popper.js používá také Bootstrap. Umožňuje vám umístit vyskakovací okna, popisky atd.

Nyní je čas otevřít náš projekt v editoru kódu. Budu používat Sublime 3.

Musíme vytvořit složku src pro náš projekt a několik podsložek v ní. Strom vypadá takto:

/src /assets /css /js /scss

Uvnitř /src také vytvořte 4 složky, jak je uvedeno výše.

Poté vytvořte soubor index.html uvnitř /src/ s následujícím obsahem:

Rozvržení bootstrapu 4< /title> < meta name="viewport" content="width=device-width, initial-scale=1.0" /> < /head> < body> < /body> < /html>

Importuji font Raleway spolu s FontAwesome pro ikony. Poté odkazuji na soubory bootstrap.css a styles.css. Zatím neexistují, ale brzy je vytvoříme.

Vytvořme také soubor styles.scss ve složce /src/scss/. Představíme rychlou proměnnou a sadu pravidel, abychom zajistili, že kompilace Sass funguje:

$bg-color:red; tělo (pozadí: $bg-color; )

V kořenové složce (složka projektu) vytvořte soubor gulpfile.js a vložte následující obsah:

Var gulp = vyžadovat("hlt"); var browserSync = require("browser-sync").create(); var sass = require("gulp-sass"); // Kompilace sass do CSS a automatické vložení do prohlížečů gulp.task("sass", function() ( return gulp.src(["node_modules/bootstrap/scss/bootstrap.scss", "src/scss/*.scss" "]).pipe(sass()) .pipe(gulp.dest("src/css")) .pipe(browserSync.stream()); )); // Přesuňte soubory javascriptu do naší složky /src/js gulp.task("js", function() ( return gulp.src(["node_modules/bootstrap/dist/js/bootstrap.min.js", "node_modules/ jquery/dist/jquery.min.js", "node_modules/popper.js/dist/umd/popper.min.js"]) .pipe(gulp.dest("src/js")) .pipe(browserSync.stream ()); // Statický server + sledování scss/html souborů gulp.task("serve", ["sass"], function() ( browserSync.init(( server: "./src" )); gulp.watch(["node_modules /bootstrap/scss/bootstrap.scss", "src/scss/*.scss"], ["sass"]); gulp.watch("src/*.html").on("change", browserSync.reload )); gulp.task("výchozí", ["js","serve"]);

Popíšu, co se zde děje, na základě výše definovaných úkolů:

výchozí úloha - výchozí úloha. Když na příkazovém řádku zadáme gulp, řekne mu to, aby spustil jak js, tak obsluhované úlohy.

js task Toto jednoduše specifikuje tři různé javascriptové soubory, které jsou uloženy ve složce node_modules, která se vytvoří, když spustíme npm install... a přesuneme je do naší složky /src/js. Tímto způsobem je můžeme zahrnout do našeho HTML souboru výše tím, že ukážeme na /src/js místo na složku node_modules.

service task spustí jednoduchý server a sleduje naše sass soubory a pokud se změní, zavolá sass task. Také způsobí synchronizaci prohlížeče při ukládání jakéhokoli souboru *.html.

sass task Tato úloha vezme jak bootstrap sass soubory, tak naše vlastní sass soubory a zkompiluje je do běžných CSS a uloží tyto CSS soubory do naší složky /src/css

Spusťte gulp na příkazovém řádku:

Funguje to takto:

• Používáte m pro okraj nebo p pro výplň
• Za m nebo p přidáte buď: t (nahoře -), b (dole), l (vlevo), r (vpravo), x (vlevo a vpravo), y (nahoře a dole) nebo nic pro všechny 4 strany.
• Za pomlčkou zadáváte velikosti od 0 do 5 (5 je největší počet mezer).

Takže v našem příkladu to vypadá, že musíme použít okraj A dno odstrčit karty pod nimi.

Do prvního kontejneru karet přidejte mb-4:

Nyní opraveno:

Zde je návod, jak můžete v Bootstrap 4 snadno zvládnout okraje i výplň.

Pojďme si trochu pohrát s použitím různých komponent Bootstrap 4.

Práce s "Typografií" v Bootstrap 4 Přidejme sekci pod naše 3 sloupce na konec uzávěrky pro třídu řádku, která bude mít 2 sloupce.

První sloupec bude používat většinu sloupců (8) a pravý sloupec bude pro vertikální navigaci v následující sekci.

Důležitý nadpis

Může sem jít jakýsi důležitý podnadpis, který je větší a šedý.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

..za chvíli vertikální navigace..

Bootstrap 4 má ve své dokumentaci sekci Typografie, která vám poskytne všechny typy pomocných tříd. Je to docela jednoduché. Používáme .Vést pro zvýraznění podnadpisu pod naším prvkem h3.

Ve své dokumentaci má také sekci Textové nástroje, která vám poskytuje možnosti pro zarovnání textu, převod, kurzívu a tloušťky písem.

V malých výřezech řekněme, že chceme, aby byl náš typ vycentrován spíše než výchozí, který je zarovnán doleva.

To způsobí, že text obsažený v div bude vycentrován na malých výřezech a zarovnán doleva na středních a větších.

Vertikální navigace Bootstrap 4 Než se pustíme do přizpůsobení, přidáme ještě jeden prvek. Do našeho pravého sloupce, který jsme právě přidali, přidejte vertikální navigaci:

Sekundární menu

• Aktivní< /li>
• Odkaz
< li class="nav-item">Odkaz < li class="nav-item">Zakázáno

Výsledek v prohlížeči by měl vypadat takto:

Můžete jej také vyzkoušet na malých výřezech a všimnout si, že je citlivý. Možností souvisejících s navigací je samozřejmě mnohem více.

Přizpůsobení v Bootstrap 4 Nyní máme poměrně standardní rozložení, které můžete najít na většině webových stránek.

Naštěstí má Bootstrap 4 solidní systém, který usnadňuje přizpůsobení jednoduchých prvků.

Otevřete soubor /src/scss/styles.scss a vložte následující:

// Přepisy proměnných // Bootstrap Sass Imports @import "node_modules/bootstrap/scss/bootstrap";

Podle sekce Theming si můžete vybrat buď zahrnout všechny soubory Bootstrap 4 sass, nebo přidat jednotlivé prvky v závislosti na vašich potřebách. Abychom to zjednodušili, importujeme vše, jak je uvedeno výše.

Změna barev motivu v Bootstrap 4 Snad nejběžnějším problémem je změna barev.

Pokud otevřete soubor node_modules/bootstrap/scss/_variables.scss, všimnete si, že nahoře je zmíněn systém barev. V této sekci uvidíte všechny proměnné, které můžete přepsat, aby odpovídaly barvám.

Změňme pouze základní barvu, změňme styles.scss na následující:

// Přepíše proměnná $theme-colors: ("primární": #d95700);

Uložte a výsledek je toto:

Velmi jednoduché!

Změňme také barvu pozadí:

// Přepíše proměnná $theme-colors: ("primární": #d95700); $body-bg: #ededed;

Nyní výsledek vypadá takto:

Hmm, teď naše sekce jumbletronů (hrdinů) vypadá ošklivě, protože byla také šedá.

Můžeme nastavit vlastní nastavení pro určité prvky pomocí inspektoru v chrome nebo firefox, najít přidružené třídy prvků, které chceme změnit, a změnit je v našem souboru styles.scss.

V tomto případě je třída zodpovědná za jumbotron .jumbotron. Změníme barvu pozadí a přidáme malý okraj nahoru, abychom simulovali vržený stín z navigační lišty:

// Přepíše proměnná $theme-colors: ("primární": #d95700); $body-bg: #ededed; .jumbotron ( barva pozadí: #ffffff !důležité; border-top: 3px solid rgb(219, 219, 219); )

Nyní výsledek:

Závěr Doufám, že se vám tento kurz/tutoriál o Bootstrapu 4 líbil. Načrtli jsme pouze základy a je toho mnohem víc, co se můžete naučit. V tuto chvíli by mělo být vše, co se potřebujete naučit, jednoduché, protože nyní rozumíte základům a že téměř vše je zahrnuto v dokumentaci.

V lednu tohoto roku byl konečně vydán Bootstrap 4 (také známý jako v4) poté, co se více než dva roky poflakoval v alfa verzích. Představuje seriózní přepsání funkčnosti. Nejen, že přináší spoustu změn pod kapotou, Bootstrap 4 také obsahuje řadu nových konceptů, které si budete muset omotat hlavou.

Proto v tomto článku budu hovořit o nejdůležitějších změnách Bootstrapu ve v4 ve srovnání s v3. Předpokládám, že jste již Bootstrap používali, takže nebudu vysvětlovat základní principy.

Nyní se podívejme na nejdůležitější změny (v žádném konkrétním pořadí):

#1: Zobrazení tlačítka

Začněme něčím zábavným a vizuálním! Tlačítka ve v4 mají plošší design než ve v3. Zde jsou předchozí tlačítka:

A tady jsou některé z nových:

To je více v souladu s moderními designovými průvodci, jako jsou materiálové designové návody, které si za posledních pár let získaly obrovskou popularitu.

#2: Vylepšené dotazy na média

Podle mého názoru měl Boostrap v3 příliš málo kontrolních bodů pro mřížku, například ten nejmenší, xs, měl 768 pixelů. Velký provoz dnes pochází z mnohem menších zařízení a to bylo pro mnoho vývojářů frustrující.

$grid-breakpoints: (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px) !default;

$ mřížka - zarážky: ( xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200 pixelů ) ! výchozí ;

Díky tomu lze snadno vytvářet mřížky, které dobře fungují na všech velikostech obrazovky.

#3: Podpora Flexbox nám poskytuje větší flexibilitu

Slavné mřížky Bootstrapu jsou nyní vytvářeny pomocí Flexboxu namísto float. Na první pohled to pro vývojáře příliš nemění, protože většina rozložení mřížky funguje úplně stejně. To však otevírá několik nových možností.

Dříve jsme museli definovat šířku každého sloupce (od 1 do 12). Nyní můžete definovat šířku jednoho sloupce a poté nechat Flexbox automaticky nastavit šířku ostatních. Zde je příklad, jak na to:

Jak vidíte, nastavíme šířku prostředního sloupce na 6 (což je polovina celé šířky) a ostatní sloupce jednoduše zaberou zbytek místa.

1 ze 3 2 ze 3 (širší) 3 ze 3

< div class = "container" > < div class = "row" > < div class = "col" > 1 ze 3 < / div > < div class = "col-6" > 2 ze 3 (širší) < / div > < div class = "col" > 3 ze 3 < / div > < / div > < / div >

třídy Flexbox

Bootstrap 4 také přichází s řadou tříd, které můžete použít ke správě kontejnerů a prvků Flexbox. Chcete-li změnit prvek na kontejner Flexbox, jednoduše mu dejte třídu d-flex.

Jsem flexbox kontejner!

< div class = "d-flex" >Jsem flexbox kontejner!< / div >

Tím získáte kontejner Flexbox s textem uvnitř:

Poznámka. Zabývám se pouze styly souvisejícími s Flexboxem.

Pojďme přidat několik dalších prvků a představit další třídu, která bude kontrolovat, jak jsou umístěny v kontejneru.

Rámec Bootstrap 4

Naučte se základy Bootstrapu 4 s praktickou ukázkou návrhu blogu od nuly

< div >Flex položka< / div >

< div >Flex položka< / div >

< div >Flex položka< / div >

< / div >

V důsledku toho jsou prvky vycentrovány v kontejneru:

#4: Správa odsazení pomocí tříd

To je parádní. Nyní můžete ovládat odsazení a okraje pomocí tříd p-* a m-*. Výplň se může lišit od 0,25 do 3 rem pomocí čísel od 0 do 5. Nastavme například kontejner Flexbox na třídu p-5, abychom vytvořili maximální výplň.

Zdravím všechny, přátelé! Bootstrap 3 byl vydán v polovině roku 2013 a v průběhu let se osvědčil jako pohodlný a rozšiřitelný rámec CSS pro rychlé vytváření responzivních rozložení. Tento framework úspěšně využívají miliony webů a už jsme si na něj docela zvykli.

Chladný

Koktat

18. ledna 2018 se stala důležitá událost – z beta verze vyšla dlouho očekávaná verze Bootstrap 4, založená na použití modelu Flexbox pro značkování, který v současné době již podporuje všechny moderní prohlížeče a je pohodlnější a flexibilnější. pro vývojáře než klasický značkovací model založený na Float. Nyní můžeme s naprostou jistotou říci, že to není možné, ale MUSÍ být napsáno na stroji pomocí Flex!

Další materiály lekce Bootstrap 4

Všechny příklady lekcí si můžete sami vyzkoušet: Stáhnout archiv

Více o dokumentaci Bootstrap 4 si můžete přečíst v kanceláři. webová stránka;

Nejnovější startér včetně Bootstrap 4: OptimizedHTML 5.

Dnes se blíže podíváme na práci s mřížkou Bootstrap 4 a porovnáme ji se starou verzí. Tato lekce vám bude užitečná nejen pokud jste začátečník a seznamujete se s Bootstrap, ale také pokud jste zkušený vývojář a chcete se naučit všechna pravidla a nuance rozvržení pomocí mřížky Bootstrap 4 a nástrojů Flexbox obsažených v to.

1. Základní výchozí parametry sítě

Výchozí mřížka Bootstrapu 4 je velmi podobná 3. verzi, ale jsou zde některé důležité rozdíly.

Z tabulky hlavních možností si můžeme všimnout zjevných rozdílů oproti mřížce třetí verze. Předpona třídy „.col-xs-“, která odpovídá za nejmenší rozlišení, je nyní odstraněna a nahrazena zjednodušenou předponou „.col-“. Možná si mylně myslíte, že předpona „.col-“ je zodpovědná za minimální rozlišení mobilních zařízení, ale není to tak úplně pravda. Předpona „.col-“ je mimo jiné jednou z nejdůležitějších inovací v Bootstrap 4. Jedná se o třídu, která je zodpovědná za automatické rozmístění sloupců v jakémkoli rozlišení. Ale o tom později.

Pro malá rozlišení je zodpovědná předpona „.col-sm-“ s mediálním dotazem o velikosti 576 pixelů. Šířka kontejneru je 540 px. Střední rozlišení začínají od 768 pixelů. Šířka kontejneru – 720 px. Vyšší rozlišení fungují s rozlišením zařízení 992 pixelů nebo více. Šířka kontejneru – 960 px. A ty největší - od 1200 pixelů. Šířka kontejneru je pevně nastavena na 1140 px.

Všimněte si, že maximální hodnoty dotazu na média mají nepřesné hodnoty se zlomkovou částí „.98“ v pixelech. To je patrné při výběru metody rozložení Desktop First, kde je omezena maximální šířka dotazu na média. Například při kompilaci Sass „+media-breakpoint-down(lg)“ dostaneme „@media (max-width: 1199,98px)“. Zde se uvolní 0,02 pixelu pro spuštění dalšího dotazu na média. Mějte to na paměti. V příštích číslech "Jedi Layout 8" se na tento a mnoho dalších bodů z této lekce podíváme na reálném příkladu.

2. Automatické rozložení sloupců 2.1 Sloupce o stejné šířce

Pomocí nové generické třídy ".col" můžete zadat až 12 sloupců v řadě (rodič ".row"), jejichž šířka bude automaticky vypočtena v závislosti na počtu prvků a bude stejná.

Například:

2.2 Nastavení šířky jednoho sloupce

Můžete také explicitně nastavit šířku jednoho sloupce a zbytek nechat automatický.

1 z 3 2 ze 3 (široký) 3 z 3 1 z 3 2 ze 3 (široký) 3 ze 3

V tomto příkladu má druhý prvek ve třetím řádku třídu ".col-6" a druhý prvek ve druhém řádku má třídu ".col-5", které zabírají odpovídající počet sloupců na všech rozlišeních obrazovky. Šířka zbývajících sloupců reaguje a počítá se automaticky, přičemž zabírá veškerý zbývající prostor.

2.3 Obsah proměnné šířky

Třídu "col-(breakpoint)-auto" můžete použít k definování obsahu s proměnnou šířkou v závislosti na prostoru obsazeném obsahem sloupce. Kde bod přerušení je velikost obrazovky (xl, lg, md nebo sm).

1 z 3 Obsah s proměnnou šířkou 3 z 3 1 z 3 Obsah s proměnnou šířkou Číslo dva 3 ze 3

Zde vidíme, že dva středové sloupce zabírají šířku odpovídající šířce obsahu, ale v prvním řádku je díky třídě ".justify-content-sm-center" třídy ".row" celý řádek vycentrován a celková šířka závisí pouze na šířce středového sloupce, zatímco druhý řádek je roztažen na plnou dostupnou šířku, ale druhý sloupec zůstává pevně nastaven na šířku obsahu.

2.4 Víceřadý

Díky Bootstrap 4 můžete vytvořit více řádků (pomlček) v jednom řádku. To lze implementovat pomocí třídy „.w-100“, která je velmi podobná značce „br“ a v podstatě pouze zalamuje sloupce na nový řádek.

col col col col col

Upozorňujeme, že tato třída je součástí doplňků Bootstrap 4, které jsou součástí projektu samostatně, pokud používáte Sass verzi projektu Bootstrap a jsou umístěny ve složce „scss/utilities“. Podle potřeby můžete také připojit další pluginy z této složky ke svému projektu. 3. Adaptivní třídy 3.1 Breakpointy

Velmi zajímavou funkcí Bootstrapu 4 je možnost nastavení univerzálních sloupců, které se budou zobrazovat ve všech rozlišeních. Toto je výše zmíněná třída ".col". Kromě toho můžete definovat třídu, která udává konkrétní počet sloupců, které bude obsah zabírat - jedná se o třídy s předponou „.col-(počet sloupců)“, například „.col-6“ nám říká, že obsah zabere 6 sloupců z 12. V případech, kdy není nutné uvádět konkrétní množství, můžete bez obav použít univerzální třídu „.col“.

col col col col col-8 col-4

3.2 Na mobilních zařízeních

Můžete použít předponu třídy ".col-sm-(počet obsazených sloupců)" k definování základní mřížky ve všech rozlišeních kromě nejmenších. Na malých obrazovkách se budou sloupce takové mřížky skládat pod sebe. Na oprávněních více – zaberou tolik místa, kolik jste definovali ve třídách.

col-sm-8 col-sm-4 col-sm col-sm col-sm

Zde vidíme, že první řádek na zařízeních s rozlišením větším než „sm“, tedy více než 576 pixelů. je rozdělena do 2 sloupců - 8 a 4 z 12 širokých, resp. Šířka sloupců ve druhém řádku se počítá automaticky, ale při nejmenších rozlišeních se tyto sloupce také skládají pod sebe, díky třídě „.col-sm“.

3.3 Vytvoření komplexní kombinované sítě

Pomocí Bootstrapu můžete při vytváření mřížky vytvořit libovolnou kombinaci sloupců. Pro každý sloupec můžete nastavit libovolné chování v různých rozlišeních pomocí adaptivních tříd. Zde jsou rozdíly od třetí verze pouze v názvech tříd.

.col-12 .col-md-8 .col-6 .col-md-4 .col-6 .col-md-4 .col-6 .col-md-4 .col-6 .col-md-4 .col-6 .col-6

4. Zarovnání

Bootstrap 4 je založen na „flexu“ a poskytuje nám všechny možnosti tohoto modelu, které jsou dostupné v jednoduchých hotových třídách. Možnosti zahrnují vertikální a horizontální vyrovnání.

4.1 Vertikální zarovnání Nahoře Nahoře Uprostřed Uprostřed Uprostřed Dole Dole Dole

Kromě řízení zarovnání prostřednictvím nadřazeného řádku „.row“ můžete sloupce zarovnat tak, že jim přiřadíte příslušné třídy:

Nahoře Uprostřed Dolů

4.2 Horizontální vyrovnání

Bootstrap 4 má navíc nástroje pro horizontální zarovnání sloupců pomocí předpony „.justify-content-“ na „.row“.

řádek zarovnat-obsah-začátek řádku zarovnat-obsah-začátek řádku zarovnat-obsah-střed řádek zarovnat-obsah-střed zarovnat-ukončit-obsah-konec zarovnat-obsah-konec zarovnat-obsah-okolo zarovnat-obsah-okolo zarovnat-obsah-mezi zarovnat -obsah-mezi

4.3 Odstranění okrajů mezi sloupci

Velmi často nastávají situace, kdy je nutné odstranit okraje mezi sloupci. Pokud například vytváříte galerii a prvky je třeba umístit blízko sebe, takto:

K tomu stačí nastavit doplňkovou třídu „.no-gutters“ na prvek „.row“.

col-6 col-sm-4 col-md-4 col-6 col-sm-4 col-md-4 col-6 col-sm-4 col-md-4 col-6 col-sm-4 col-md -4 col-6 col-sm-4 col-md-4 col-6 col-sm-4 col-md-4 col-6 col-sm-4 col-md-4 col-6 col-sm-4 col -md-4 col-6 col-sm-4 col-md-4

4.4 Přesunutí sloupců na nový řádek

Pokud je řádek (.řádek) vyplněn celkovým počtem sloupců větším než 12, přesune se další sloupec na nový řádek.

.col-9 .col-4
9 + 4 = 13 sloupců - to je více než 12. Tento prvek, široký 4 sloupce, bude přesunut na nový řádek. .sl.-6
Následující sloupce budou umístěny podél čáry.

Zde je vše stejné jako ve verzi 3 Bootstrapu. 5. Pořadí prvků 5.1 Třídy pořadí prvků

Pro definování pořadí prvků můžete použít speciální třídy s předponou ".order-". Pokud znáte Flex-layout, budou vám tato pravidla známá. Bootstrap 4 vám dává možnost nastavit pořadí prvků pomocí tříd. Objednávku můžete nastavit přímo (.order-1.order-md-2):

První neuspořádaný prvek

Nebo můžete použít speciální třídy, které určují pořadí prvního a posledního prvku (.order-first, .order-last):

První neobjednaný Druhý, objednaný jako poslední Třetí, objednaný jako první

5.2 Odsazení sloupců

Analogicky s Bootstrap 3 má verze 4 také schopnost horizontálně odsazovat sloupce, ale to je implementováno poněkud jinak a existují pro to speciální třídy s předponou „.offset-“.

5.2.1 Třídy posunutí

Sloupec můžete posunout doprava pomocí tříd „.offset-md-*“, které zvětší levé odsazení o * počet prvků. Z níže uvedeného příkladu třída ".offset-md-2" posune sloupec ".col-md-4" o 2 sloupce doprava, zbytek příkladů funguje stejným způsobem:

.col-md-4 .col-md-4 .offset-md-4 .col-md-3 .offset-md-3 .col-md-3 .offset-md-3 .col-md-6 .offset -md-3

Pomocí třídy „.offset-*-0“ můžete resetovat offset ve všech rozlišeních, kde * je sm, md, lg nebo xl. 6. Hnízdění

Dá se celkem očekávat, že Bootstrap 4 podporuje vnořování prvků. Vše zde funguje stejně jako ve třetí verzi – pro vnoření sloupců do jiných je potřeba vytvořit podřízenou třídu „.row“ a vnořit do ní sloupce.

Úroveň 1: ".col-sm-9" Úroveň 2: ".col-8 .col-sm-6" Úroveň 2: ".col-4 .col-sm-6"

Podívali jsme se na hlavní funkce práce s mřížkou Bootstrap 4 Pokud se chcete blíže seznámit se všemi možnostmi frameworku, doporučuji prostudovat dokumentaci na oficiálních stránkách.

V další lekci se podíváme na nastavení Bootstrap gridu pro váš konkrétní projekt na příkladu použití OptimizedHTML 4 ve startovací šabloně A to nastavení, práce s proměnnými odsazení, zarážky, počet sloupců a další.