Uvod v tipografijo Bootstrap

Tipografija je ena izmed najnovejših lastnosti zagonske kopice. Posebej se uporablja za oblikovanje in oblikovanje besedilnih elementov. Z uporabo značilnosti tipografije zagonske strani lahko nekdo ustvari naslove, odstavke, nekatere druge vmesne elemente in sezname. V osnovi bootstrap kot velikost pisave uporablja 1rem (16 pik), vključno z višino vrstice 5. Privzete družine pisav, ki jih uporablja bootstrap, so sans-serif, Arial, določa, kako naj se vsebina prikaže na telesu, barva ozadja na telesu in uporablja pisavo velikost in višina črte, da ustvarite robove, obloge itd.

Značilnosti tipografije Bootstrapa

Spodaj so navedene naslednje značilnosti tipografije:

1) Naslovi

HTML naslovi so razdeljeni na

do

Naslov zagonske kopice
prikazano v pisavi

Naslov zagonske kopice

prikazano v pisavi

Naslov zagonske kopice

prikazano v pisavi

Naslov zagonske kopice

prikazano v pisavi
Naslov zagonske kopice
prikazano v pisavi
Naslov zagonske kopice
prikazano v pisavi

Z uporabo kode HTML daje rezultat, kot je prikazano spodaj:

Z uporabo tipografije Bootstrap se je oblikovala in oblikovala z ustreznimi razredi, kot je prikazano spodaj:

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

Izhod zgornje kode z uporabo Bootstrap Tipografije je naslednji:

2) Odzivni naslovi

Odzivni naslovi so ena najboljših stvari, ki jih lahko oblikujete s pomočjo tipografije. to so elementi, pri katerih se besedilo samodejno prilagodi z uporabo razreda, odzivnega glede na velikost naprave. Tako lahko preprosto vidite isto besedilo na primeren način na različnih napravah.

V oznako glave samo dodajte odziven razred, kot sledi:

Responsive Header

Tako bo rezultat prikazan kot:

Odziven glavo.

Isto besedilo lahko preverite tudi v različnih napravah in s spreminjanjem velikosti brskalnika se bo prikazalo spremembe.

3)

Ta oznaka se uporablja za ustvarjanje lažjega, manjšega, sekundarnega besedila v vašem naslovu. Privzeto je na 85% velikosti nadrejenega naslova.

Primer:

Example heading secondary text

Izhod:

h5 naslov stranskega besedila

4)

Ta oznaka se uporablja za označevanje besedila.

Primer:

Bootstrap Typography

Bootstrap Typography

To se uporablja za označevanje besedila.

5)

Ta oznaka se uporablja za označevanje kratice. Kratice imajo privzeto poudarjeno in pridobijo kurzor pomoči, ki zagotavlja dodaten kontekst lebdenja in uporabnikom pomožnih tehnologij.

Primer:

Na svetu je toliko držav. Indija je najboljša država

6)

Označi izbrisano besedilo

Primer:

Ta oznaka se uporablja za prikaz izbrisanega besedila.

Izhod:

Ta oznaka se uporablja za prikazovanje.

7)

Element blockquote se uporablja za predstavitev vsebine iz drugega vira.

Primer:

Blockquotes

Blockquotes

Element blockquote se uporablja za predstavitev vsebine iz drugega vira:


Za srečno življenje je potrebno zelo malo; vse to je znotraj vas, v vašem načinu razmišljanja. Življenje je kot igranje violine v javnosti in učenje inštrumenta.

Izhod:

Blokade
Element blockquote se uporablja za predstavitev vsebine iz drugega vira:

Za srečno življenje je potrebno zelo malo; vse je znotraj vas, v vašem načinu razmišljanja. Življenje je kot igranje violine v javnosti in učenje inštrumenta.

8)
:

Ta oznaka se uporablja za prikaz seznama opisov.

Primer:

Element dl označuje opisni seznam:


Kruh

- Belo

- Rjav

Hladne pijače

- Pepsi

Izhod:

Element dl označuje opisni seznam:

Kruh
Bela
rjav
Hladne pijače
Pepsi.

9)

Vgrajeni stavek kode je treba v elementu kode združiti skupaj.

Primer:

Naslednji elementi HTML: span, section in div določa razdelek v dokumentu.

Izhod:

Naslednji elementi HTML: span, section in div določa razdelek v dokumentu.

10) Kontekstualne barve

To ni nič drugega kot drugačen razred, ki se uporablja za prenos pomena z uporabo različnih barv.
Ima različne razrede, kot so .text-utišan, .text-info, .text-primarni, .text-uspeh, .text-opozorilo, .text-nevarnost.

Primer:

V kontekstnih razredih podajte "pomen skozi barve":

Besedilo je izključeno.

To besedilo je pomembno.

To besedilo kaže na uspeh.


To besedilo predstavlja nekaj informacij.

To besedilo predstavlja opozorilo.

To besedilo predstavlja nevarnost.

Izhod:

Besedilo je izključeno.
To besedilo je pomembno.
To besedilo kaže na uspeh.
To besedilo predstavlja nekaj informacij.
To besedilo predstavlja opozorilo.
To besedilo predstavlja nevarnost.

Kjer lahko uporabimo

  • Večina spletnih oblikovalcev raje uporablja tipografijo zagonske črpalke za boljši videz in obliko besedila.
  • Uporablja se zlasti pri oblikovanju in oblikovanju besedilne vsebine.
  • Večino časa se pojavlja vprašanje glede odzivnosti besedila. Velikost besedila se spreminja glede na različne naprave. Torej se te težave razjasnijo z uporabo tipografije zagonske črpalke.
  • Tipografija zagonske črpalke je prilagojena na preprost način, da bi bila privlačna za končnega uporabnika.
  • Takšni besedilni elementi na spletni strani bodo vedno prikazani na enak način prek povezave do seznama slogov Bootstrap 4, razen če te elemente preglasijo drugi slogovni razredi.
  • Bootstrap ponuja razvijalcem priročne tipografske funkcije, da jim olajšajo ustvarjanje naslovov, odstavkov, seznamov in drugih vročih elementov, ki bi bili privlačni za bralce.

Zaključek

  • Glede na vse podrobnosti, navedene v zgornji vsebini, so različne značilnosti tipografije programa Bootstrap za naslove, blokato, vodilno besedilo, označeno besedilo, okrajšave z ustreznimi primeri.
  • Tako močne in lepe značilnosti Bootstrapa omogočajo zelo priljubljen in edinstven razvojni okvir spredaj, ki ga številne organizacije uporabljajo.
  • Zagonska vrvica ima vse tipografske oznake, ki jih želimo oblikovati, vse od oznake do

    in celotno hierarhijo naslovov.

Priporočeni članki

To je vodnik za tipografijo Bootstrap. Tukaj razpravljamo o različnih značilnostih tipografije Bootstrap, kot so naslovi, blokirnice, kratica, oznaka itd. Če želite izvedeti več, si oglejte tudi naslednje članke -

  • Ukazi zagona
  • Komponente zagonske trakove
  • Kako namestiti Bootstrap
  • Postavitev zagonske črpalke

Kategorija:

Razvoj programske opreme