Úvod do typografie Bootstrap

Typografie je jednou z nejnovějších funkcí bootstrapu. Používá se zejména pro styling a formátování textových prvků. Pomocí funkce typografie bootstrapu může někdo vytvořit nadpisy, odstavce, některé další vložené prvky a seznamy. V zásadě bootstrap používá jako velikost písma 1rem (16px), včetně velikosti řádku 5. Ve výchozím nastavení jsou rodiny fontů používané bootstrapem bezpatkové, Arial, Nastavuje způsob zobrazení obsahu na těle, barvu pozadí na těle, používá písmo velikost a výška řádku pro vytvoření okrajů, vycpávek atd.

Vlastnosti Bootstrap typografie

Níže jsou uvedeny různé rysy typografie:

1) Nadpisy

Nadpisy HTML jsou rozděleny do

na

Záhlaví zavaděče
zobrazí se ve velikosti písma

Záhlaví zavaděče

zobrazí se ve velikosti písma

Záhlaví zavaděče

zobrazí se ve velikosti písma

Záhlaví zavaděče

zobrazí se ve velikosti písma
Záhlaví zavaděče
zobrazí se ve velikosti písma
Záhlaví zavaděče
zobrazí se ve velikosti písma

Použitím HTML kódu dává výstup, jak je uvedeno níže:

Použitím typografie Bootstrap se stylizoval a formátoval pomocí příslušných tříd, jak je uvedeno níže:

Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size

Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size

Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size

Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size

Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size

Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size

Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size

Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size

Výstup výše uvedeného kódu pomocí Bootstrap typografie je následující:

2) Citlivé položky

Responzivní nadpisy jsou jednou z nejlepších věcí, které lze pomocí typografie navrhnout. to jsou prvky, ve kterých se text automaticky upravuje pomocí citlivosti třídy podle velikosti zařízení. Jeden člověk tak může snadno vidět stejný text na různých zařízeních.

Stačí přidat značku reagující na třídu do značky záhlaví následujícím způsobem:

Responsive Header

Bude tedy zobrazovat výstup jako:

Citlivý záhlaví.

Stejný text můžete zkontrolovat také na různých zařízeních a také změnou velikosti prohlížeče zobrazí změny.

3)

Tato značka se používá k vytvoření lehčího, menšího sekundárního textu v záhlaví. Ve výchozím nastavení nastaví 85% velikosti nadřazeného záhlaví.

Příklad:

Example heading secondary text

Výstup:

h5 nadpis sekundární text

4)

Tato značka se používá k zvýraznění textu.

Příklad:

Bootstrap Typography

Bootstrap Typography

To se používá k zvýraznění textu.

5)

Tato značka se používá k označení zkratky. Zkratky mají výchozí podtržení a získávají pomocný kurzor, který poskytuje další kontext na vznášení a pro uživatele asistenčních technologií.

Příklad:

Na světě je tolik zemí. Indie je nejlepší země

6)

Označuje odstraněný text

Příklad:

Tato značka se používá k zobrazení smazaného textu.

Výstup:

Tato značka se používá k zobrazení.

7)

Prvek blockquote se používá k prezentaci obsahu z jiného zdroje.

Příklad:

Blockquotes

Blockquotes

Prvek blockquote se používá k prezentaci obsahu z jiného zdroje:


K dosažení šťastného života je potřeba jen velmi málo; je to všechno v sobě, ve vašem způsobu myšlení. Život je jako hrát na housle na veřejnosti a učit se nástroj, jak člověk pokračuje.

Výstup:

Blockquotes
Prvek blockquote se používá k prezentaci obsahu z jiného zdroje:

K dosažení šťastného života je potřeba jen velmi málo; je to všechno v sobě, ve vašem způsobu myšlení. Život je jako hrát na housle na veřejnosti a učit se nástroj, jak člověk pokračuje.

8)
:

Tato značka se používá k zobrazení seznamu popisů.

Příklad:

Prvek dl označuje popisný seznam:


Chléb

- Bílá

- Hnědá

Studené nápoje

- Pepsi

Výstup:

Prvek dl označuje popisný seznam:

Chléb
Bílý
Hnědý
Studené nápoje
Pepsi.

9)

Vložené prohlášení kódu by mělo být sdruženo v prvku kódu společně.

Příklad:

Následující prvky HTML: span, section a div definují řez v dokumentu.

Výstup:

Následující prvky HTML: rozpětí, řez a div definují řez v dokumentu.

10) Kontextové barvy

Toto není nic jiného než jiná třída, která se používá k vyjádření významu pomocí různých barev.
Má různé třídy jako .text-mute, .text-info, .text-primární, .text-success, .text-warning, .text-danger.

Příklad:

Pomocí kontextových tříd zadejte „význam prostřednictvím barev“:

Tento text je ignorován.

Tento text je důležitý.


Tento text označuje úspěch.

Tento text představuje některé informace.

Tento text představuje varování.

Tento text představuje nebezpečí.

Výstup:

Tento text je ignorován.
Tento text je důležitý.
Tento text označuje úspěch.
Tento text představuje některé informace.
Tento text představuje varování.
Tento text představuje nebezpečí.

Kde můžeme použít

  • Většina webových designérů dává přednost použití typografie bootstrap pro lepší vzhled a dojem z textového formátu.
  • Používá se zejména při stylingu a formátování textového obsahu.
  • Většinou se jedná o problém týkající se citlivosti textu. Velikost textu se liší podle různých zařízení. Tento problém je tedy možné objasnit pomocí funkce typografie bootstrap.
  • Bootstrap Typografie je přizpůsobena jednoduchým způsobem tak, aby byla atraktivní pro koncového uživatele.
  • Takové textové prvky na webové stránce budou vždy vykreslovány prostřednictvím odkazu na šablonu stylů Bootstrap 4 stejným způsobem, kromě toho, že tyto prvky jsou přepsány jinými třídami stylů.
  • Bootstrap poskytuje vývojářům pohodlné typografické funkce, které jim usnadní vytváření nadpisů, odstavců, seznamů a dalších vložených prvků, které by lákaly čtenáře.

Závěr

  • Podle všech podrobností uvedených v obsahu výše, různé typografické rysy Bootstrapu pro nadpisy, blokové citace, hlavní text, označený text, zkratky s vhodnými příklady.
  • Tak robustní a pěkné vlastnosti Bootstrapu dělají to velmi populární a jedinečný front-end framework pro rozvoj, který je široce používán mnoha organizacemi.
  • Bootstrap přichází se všemi typografickými značkami, pro které chceme stylizovat, vše od značky po

    a celou hierarchii nadpisu.

Doporučené články

Toto je průvodce Bootstrap typografií. Zde diskutujeme o různých funkcích Bootstrap Typografie, jako jsou nadpisy, blockquote, zkratka, značka atd. Další informace naleznete také v následujících článcích -

  • Příkazy Bootstrap
  • Komponenty zaváděcího systému
  • Jak nainstalovat Bootstrap
  • Rozvržení zaváděcího systému

Kategorie:

Vývoj softwaru