Jak používat základní CSS v Bootstrapu

Jednou z nejsložitějších věcí, pokud jde o práci s webovým designem, je překonat jemné rozdíly mezi prohlížeči, ačkoli teoreticky musí každý prohlížeč dodržovat standardy a ve většině případů ano, existují velmi jemné malé rozdíly, které mohou způsobit náš design je obtížné implementovat.

Před existencí Bootstrap soubor s názvem reset.cssV tomto případě bylo explicitně definováno, že všechny hodnoty základních a klíčových prvků, jako jsou výplně, okraje, výchozí písmo atd. Díky tomu jsme zabránili prohlížeči dělat, co chtěl, při definování prvků, které jsme v našich vlastních stylech nezměnili.

Dnes Bootstrap postará se o tyto detaily za nás, toho je dosaženo pomocí souboru s názvem bootstrap.css který je populárně známý jako základní soubor.

PožadavkyAbychom mohli provádět příklady a cvičení v tomto kurzu, musíme mít projekt s Bootstrap již stažené, nebo pokud tomu tak není, internetové připojení, aby bylo možné používat knihovny přímo z vašeho CDN. Potřebujeme moderní prohlížeč jako Chrome nebo Firefox ve svých nejnovějších verzích a nakonec potřebujeme textový editor jako Vznešený text nebo NotePad ++ a vytvořte obsah HTML přívětivějším způsobem, i když si přejeme, aby gedit nebo poznámkový blok sloužily našim účelům.

Záhlaví
Jednou z věcí, které na webu nejvíce přitahují pozornost, jsou názvy a podtitulky obsahu, samozřejmě to je funkce těchto prvků, CSS základna Bootstrap má zajímavý způsob, jak to zvládnout, za prvé má několik velikostí a pro prvek je definováno písmo h v libovolném číslování od 1 do 6, ale má také třídy, které odpovídají každému prvku, takže můžeme použít stejné styly na div nebo ještě rozpětí.

Další zajímavou věcí je, že prvek můžeme použít malý zmenšit velikost části názvu, ale zachovat poměr ve vztahu k prvku nebo prvku, který používá odpovídající třídu.

Díky tomu jednoduše, když máme více prohlížečů, je zachována homogenita našeho designu, takže názvy nemusí vypadat odlišně, například v Safari na Firefox, když víme, že oba prohlížeče ve výchozím nastavení pracují s různými fonty.

Uvedení toho, co jste se naučili, do praxe
Vytvoříme malou stránku, kde uděláme seznam titulů, umístíme dva svahy jeden na druhý, abychom viděli, jak rozdíly již neexistují díky základnímu souboru Bootstrap. Podívejme se nejprve na kód a pak uvidíme, jak to vypadá v našem prohlížeči.

 Pomocí souboru Base BootstrapJedná se o div s malým zdrojem H1
Toto je malé písmo H4
Toto je div s malým zdrojem třídy H4

Zde vidíme, jak jsme v těle provedli různé prvky, které použijeme jako nadpisy, dále ukážeme, jak prvek funguje, abychom jej mohli kombinovat s nadpisy, abychom dosáhli velmi zajímavých efektů. Také přidáváme další styl, který můžeme přidat vycpávky dodatečné, abychom mohli mít výsledek, jako je ten, který uvidíme na následujícím obrázku:

ZVĚTŠIT

Odstavce
Jakmile jsme čtenáře nebo uživatele zaujali názvy naší aplikace, obvykle potřebujeme nějaký obsah, který lze konzumovat, obvykle je to text, který umístíme do odstavce, i když to může být také obrázek, zvuk nebo video.

Vraťme se k odstavci, již prvkem

přináší styl předdefinovaný základním CSS, nicméně tento základ nám také nabízí speciální typ odstavce, který se nazývá Vést, při přidání této třídy do odstavce ji okamžitě odlišíme od ostatních podobných, protože se zvětší její velikost a upraví se některé vlastnosti písem.

Podívejme se v následujícím kódu, jak to funguje, které jsme právě vysvětlili, v tomto příkladu vytvoříme dva odstavce, kde první bude mít třídu Vést, tímto způsobem uvidíme, jak to zvýrazní, samozřejmě, že to všechno funguje, pokud máme Bootstrap v našem projektu se podívejme na náš kód:

 Pomocí souboru Base Bootstrap
Bacon ipsum pain amet in laboris magna ullamco, in drumstick pain boudin eiusmod andouille leberkas vepřové břicho exercitation ex. Hovězí žebra magna corned beef incididunt id. Kevin zadkem biltong. Filet mignon krůtí quis, shankle zvěřina ullamco trhaná vepřová panenka.
Bacon ipsum pain amet in laboris magna ullamco, in drumstick pain boudin eiusmod andouille leberkas vepřové břicho exercitation ex. Hovězí žebra magna corned beef incididunt id. Kevin zadkem biltong. Filet mignon krůtí quis, shankle zvěřina ullamco trhané nevolné vepřové karé.

Pojďme spustit náš příklad a uvidíme, jak to vypadá v našem prohlížeči:

ZVĚTŠIT

Zarovnejte text
Jedna z věcí, která je také velmi důležitá, je zarovnání textu, protože někdy potřebujeme, aby byl náš text zarovnán, zarovnán doprava, do středu nebo násilně vlevo, přestože v CSS existují ekvivalenty třída pro toto nám ušetří spoustu práce a také nám pomůže zajistit konzistenci kódu.

V následujícím příkladu uvidíme, jak aplikujeme každou z těchto tříd na různé prvky a aby náš kód měl lepší čitelnost, budeme dělat všechny odstavce prvků. Podívejme se na kód:

 Pomocí souboru Base Bootstrap
Bacon ipsum dolor amet in laboris magna ullamco, in drumstick dolor boudin eiusmod andouille
leberkas vepřové břicho exercitace ex. Hovězí žebra magna corned beef incididunt id.
leberkas vepřové břicho exercitace ex. Hovězí žebra magna corned beef incididunt id. leberkas vepřové břicho exercitace ex. Hovězí žebra magna corned beef incididunt id. Kevin zadek
v ocasu biltong. Filet mignon krůtí quis, shankle zvěřina ullamco trhané nevolné vepřové karé.

Nyní se podívejme, jak se každá třída chová v našem prohlížeči, existuje konkrétní případ s zdůvodnit, což je velmi jemné, takže jeho účinek nemusí být příliš vidět.

ZVĚTŠIT

Seznamy
Seznamy jsou často nutné a ne výlučně pro seznam věcí, mnohokrát jsou důležitou součástí designu. Bootstrap zpracovává je transparentním způsobem jako předchozí prvky, které jsme viděli, seznamy mají styl předdefinovaný CSS základna, ale máme několik variant, například výpis bez stylů, abychom se vyhnuli odrážkám, a zápis pomocí v souladu, to druhé dělá seznam horizontálním.

Podívejme se tedy v následujícím kódu na příklad každého z těchto seznamů, abychom je mohli použít v našem kódu:

 Pomocí souboru Base Bootstrap
Vložený seznam

První prvek
Druhý prvek
Třetí prvek
Čtvrtý prvek
Pátý element

Seznam bez stylů

První prvek
Druhý prvek
Třetí prvek
Čtvrtý prvek
Pátý element

Standardní seznam

První prvek
Druhý prvek
Třetí prvek
Čtvrtý prvek
Pátý element

Nyní se podívejme, jak to vypadá v našem prohlížeči, kde vidíme, že rozdíly jsou okamžitě patrné:

S tímto dokončujeme tento tutoriál, viděli jsme, že základní CSS z Bootstrap Poskytuje nám standardní základ pro zajištění toho, aby se prvky, které jsme nedefinovali nebo přizpůsobili, zobrazovaly určitým způsobem přímo v prohlížeči, což nám dává plnou kontrolu nad naší aplikací bez ohledu na prohlížeč.