Úvod do Bootstrap typografie

Typografia je jednou z najnovších funkcií bootstrapu. Používa sa najmä na navrhovanie a formátovanie textových prvkov. Použitím typografickej funkcie bootstrapu môže niekto vytvárať nadpisy, odseky, niektoré ďalšie vložené prvky a zoznamy. V podstate bootstrap používa ako veľkosť písma 1rem (16px), vrátane zvyškov výšky riadku 5. V predvolenom nastavení sú rodiny fontov, ktoré bootstrap používa, sans-serif, Arial, nastavuje spôsob, akým sa má obsah zobrazovať na tele, farba pozadia na tele, používa písmo veľkosť a výška riadku na vytvorenie okrajov, výplní atď.

Funkcie Bootstrap typografie

Nižšie sú uvedené rôzne znaky typografie:

1) Nadpisy

Nadpisy HTML sú rozdelené do

na

Záhlavie zavádzacieho systému
zobrazené vo veľkosti písma

Záhlavie zavádzacieho systému

zobrazené vo veľkosti písma

Záhlavie zavádzacieho systému

zobrazené vo veľkosti písma

Záhlavie zavádzacieho systému

zobrazené vo veľkosti písma
Záhlavie zavádzacieho systému
zobrazené vo veľkosti písma
Záhlavie zavádzacieho systému
zobrazené vo veľkosti písma

Použitím kódu HTML poskytuje výstup, ako je uvedené nižšie:

Použitím typografie Bootstrap sa vytvoril štýl a formátoval sa pomocou príslušných tried, ako je uvedené nižšie:

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 vyššie uvedeného kódu pomocou Bootstrap typografie je nasledujúci:

2) Responzívne nadpisy

Responzívne nadpisy sú jednou z najlepších vecí, ktoré je možné navrhnúť pomocou typografie. Toto sú prvky, v ktorých sa text upravuje automaticky pomocou reakcie na triedu podľa veľkosti zariadenia. Jeden človek tak môže ľahko vidieť ten istý text vhodným spôsobom na rôznych zariadeniach.

Stačí do značky hlavičky pridať responzívnu triedu takto:

Responsive Header

Takže bude zobrazovať výstup ako:

Citlivý nadpis.

Rovnaký text môžete skontrolovať na rôznych zariadeniach aj tak, že zmeníte veľkosť prehliadača, v ktorom sa zobrazia zmeny.

3)

Táto značka sa používa na vytvorenie ľahšieho, menšieho sekundárneho textu v záhlaví. V predvolenom nastavení je nastavená na 85% veľkosti nadradenej položky.

Príklad:

Example heading secondary text

Výkon:

h5 nadpis sekundárneho textu

4)

Táto značka sa používa na zvýraznenie textu.

Príklad:

Bootstrap Typography

Bootstrap Typography

Používa sa na zvýraznenie textu.

5)

Táto značka sa používa na označenie skratky. Skratky majú predvolené podčiarknutie a získavajú pomocný kurzor, ktorý poskytuje ďalší kontext pri umiestnení kurzora myši a používateľom podporných technológií.

Príklad:

Na svete je toľko krajín. India je najlepšia krajina

6)

Označuje odstránený text

Príklad:

Táto značka sa používa na zobrazenie odstráneného textu.

Výkon:

Táto značka sa používa na zobrazenie.

7)

Element blockquote sa používa na prezentáciu obsahu z iného zdroja.

Príklad:

Blockquotes

Blockquotes

Element blockquote sa používa na prezentáciu obsahu z iného zdroja:


Na šťastný život je potrebných len veľmi málo; je to všetko vo vašom vnútri, vo vašom spôsobe myslenia. Život je ako hrať na husliach na verejnosti a učiť sa nástroj, ako sa dá ďalej.

Výkon:

Blockquotes
Element blockquote sa používa na prezentáciu obsahu z iného zdroja:

Na šťastný život je potrebných len veľmi málo; je to všetko vo vašom vnútri, vo vašom spôsobe myslenia. Život je ako hrať na husliach na verejnosti a učiť sa nástroj, ako sa dá ďalej.

8)
:

Táto značka sa používa na zobrazenie zoznamu popisov.

Príklad:

Prvok dl označuje zoznam popisov:


chlieb

- Biely

- Hnedá

Studené nápoje

- Pepsi

Výkon:

Prvok dl označuje zoznam popisov:

chlieb
biely
hnedý
Studené nápoje
Pepsi.

9)

Vložené vyhlásenie o kóde by malo byť spojené do prvku kódu.

Príklad:

Nasledujúce prvky HTML: span, section a div definuje časť v dokumente.

Výkon:

Nasledujúce prvky HTML: span, section a div definuje časť v dokumente.

10) Kontextové farby

Toto nie je nič iné ako iná trieda, ktorá sa používa na vyjadrenie významu pomocou rôznych farieb.
Má rôzne triedy ako .text-utlmené, .text-info, .text-primárne, .text-success, .text-warning, .text-danger.

Príklad:

Použite kontextové triedy na poskytnutie „významu prostredníctvom farieb“:


Tento text je ignorovaný.

Tento text je dôležitý.

Tento text naznačuje úspech.

Tento text predstavuje niektoré informácie.

Tento text predstavuje varovanie.

Tento text predstavuje nebezpečenstvo.

Výkon:

Tento text je ignorovaný.
Tento text je dôležitý.
Tento text naznačuje úspech.
Tento text predstavuje niektoré informácie.
Tento text predstavuje varovanie.
Tento text predstavuje nebezpečenstvo.

Kde môžeme použiť

  • Väčšina webových dizajnérov uprednostňuje použitie typografie bootstrap pre lepší vzhľad a dojem textového formátu.
  • Používa sa najmä pri navrhovaní a formátovaní textového obsahu.
  • Väčšinou existuje problém týkajúci sa textovej citlivosti. Veľkosť textu sa môže líšiť podľa rôznych zariadení. Tento problém je preto možné objasniť pomocou funkcie typografie bootstrap.
  • Bootstrap typografia je prispôsobená jednoduchým spôsobom tak, aby bola atraktívna pre koncového používateľa.
  • Takéto textové prvky na webovej stránke sa budú vždy vykresľovať prostredníctvom odkazu na hárok štýlov Bootstrap 4 rovnakým spôsobom, s výnimkou toho, že tieto prvky sú potlačené inými triedami štýlov.
  • Bootstrap poskytuje vývojárom pohodlné typografické funkcie, ktoré im uľahčujú vytváranie nadpisov, odsekov, zoznamov a ďalších vložených prvkov, ktoré by boli pre čitateľov príťažlivé.

záver

  • Pokiaľ ide o všetky podrobnosti uvedené v predchádzajúcom obsahu, rôzne typografické vlastnosti Bootstrapu pre nadpisy, blokové citácie, hlavný text, označený text, skratky s vhodnými príkladmi.
  • Takéto robustné a pekné vlastnosti systému Bootstrap z neho robia veľmi populárny a jedinečný frontendový vývojový rámec, ktorý je často používaný mnohými organizáciami.
  • Zavádzací systém sa dodáva so všetkými typografickými značkami, ktoré chceme štylizovať, všetko od značky po

    a celú hierarchiu nadpisov.

Odporúčané články

Toto je príručka pre typizáciu Bootstrap. Tu diskutujeme o rôznych vlastnostiach Bootstrap Typografie, ako sú nadpisy, blokovanie, skratka, značka atď. Ďalšie informácie nájdete v nasledujúcich článkoch -

  • Príkazy Bootstrap
  • Komponenty zavádzacích zariadení
  • Ako nainštalovať Bootstrap
  • Rozloženie zavádzacích zariadení

Kategórie:

Vývoj softvéru