Uvod u bootstrap tipografiju

Tipografija je jedno od najnovijih obilježja dizalice. Posebno se koristi za oblikovanje i oblikovanje tekstualnih elemenata. Korištenjem značajke tipografije programa za podizanje sustava netko je mogao stvoriti naslove, odlomke, neke druge inline elemente i popise. U osnovi bootstrap koristi 1rem (16px) kao veličinu fonta uključujući visinu retka 5. Po zadanome porodice fontova koje koristi bootstrap su sans-serif, Arial, Postavlja kako bi se sadržaj trebao prikazati na tijelu, boja pozadine na tijelu, koristi font veličina i visina linije za stvaranje margina, paddings itd.

Značajke tipografije Bootstrap-a

Ispod su različite značajke tipografije:

1) Naslovi

HTML naslovi su podijeljeni u

do

Naslov bootstrap-a
prikazani u veličini fonta

Naslov bootstrap-a

prikazani u veličini fonta

Naslov bootstrap-a

prikazani u veličini fonta

Naslov bootstrap-a

prikazani u veličini fonta
Naslov bootstrap-a
prikazani u veličini fonta
Naslov bootstrap-a
prikazani u veličini fonta

Korištenjem HTML koda daje učinak kao što je prikazano u nastavku:

Upotrebom tipografije Bootstrap oblikovana je i oblikovana pomoću odgovarajućih klasa kao što je prikazano u nastavku:

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

Izlaz gornjeg koda pomoću Bootstrap Tipografije je sljedeći:

2) Odgovarajući naslovi

Odgovarajući naslovi jedna su od najboljih stvari koje se mogu oblikovati pomoću tipografije. ovo su elementi u kojima se tekst automatski prilagođava pomoću klase koja reagira na veličinu uređaja. Na taj se način lako može vidjeti isti tekst na odgovarajući način na različitim uređajima.

Samo dodajte klasu koja odgovara u oznaku zaglavlja na sljedeći način:

Responsive Header

Dakle, prikazat će se kao:

Odgovarajući zaglavlje.

Možete provjeriti isti tekst na različitim uređajima kao i promjenom veličine preglednika koji će pokazati promjene.

3)

Ova se oznaka koristi za stvaranje svjetlijeg, manjeg, sekundarnog teksta u vašem naslovu. Prema zadanim postavkama postavlja 85% veličine matičnog naslova.

Primjer:

Example heading secondary text

Izlaz:

h5 naslov drugog teksta

4)

Ova se oznaka koristi za isticanje teksta.

Primjer :

Bootstrap Typography

Bootstrap Typography

To se koristi za označavanje teksta.

5)

Oznaka se koristi za označavanje kratice. Skraćenice imaju zadani naglasak i dobivaju kursor pomoći za pružanje dodatnog konteksta na lebdanju i korisnicima pomoćnih tehnologija.

Primjer:

Na svijetu postoji toliko mnogo zemalja. Indija je najbolja zemlja

6)

Označava izbrisani tekst

Primjer:

Ova se oznaka koristi za prikaz izbrisanog teksta.

Izlaz:

Ova se oznaka koristi za prikazivanje.

7)

Element blok-cita služi za predstavljanje sadržaja iz drugog izvora.

Primjer:

Blockquotes

Blockquotes

Element blok-cita služi za predstavljanje sadržaja iz drugog izvora:


Za sretan život potrebno je vrlo malo; sve je u vama, u vašem načinu razmišljanja. Život je poput sviranja violine u javnosti i učenja instrumenta dok neko ide dalje.

Izlaz:

Blockquotes
Element blok-cita služi za predstavljanje sadržaja iz drugog izvora:

Za sretan život potrebno je vrlo malo; sve je to unutar vas, u vašem načinu razmišljanja. Život je poput sviranja violine u javnosti i učenja instrumenta dok neko ide dalje.

8)
:

Ova se oznaka koristi za prikaz popisa opisa.

Primjer:

Element dl ukazuje na popis opisa:


Kruh

- Bijelo

- Smeđe

Hladna pića

- Pepsi

Izlaz:

Element dl ukazuje na popis opisa:

Kruh
bijela
smeđ
Hladna pića
Pepsi.

9)

Inline izjava koda treba biti sjedinjena u elementu koda.

Primjer:

Sljedeći HTML elementi: span, section i div definira odjeljak u dokumentu.

Izlaz:

Sljedeći HTML elementi: span, section i div definira odjeljak u dokumentu.

10) Kontekstualne boje

Ovo nije ništa drugo nego drugačija klasa koja se koristi za prenošenje značenja pomoću različitih boja.
Ima različite klase poput .text-prigušene, .text-informacije, .text-primarne, .text-uspjeha, .text-upozorenja, .text-opasnosti.

Primjer:

Koristite kontekstualne klase da biste osigurali "značenje kroz boje":

Zanemaren je ovaj tekst.

Ovaj je tekst važan.


Ovaj tekst ukazuje na uspjeh.

Ovaj tekst predstavlja neke informacije.

Ovaj tekst predstavlja upozorenje.

Ovaj tekst predstavlja opasnost.

Izlaz:

Zanemaren je ovaj tekst.
Ovaj je tekst važan.
Ovaj tekst ukazuje na uspjeh.
Ovaj tekst predstavlja neke informacije.
Ovaj tekst predstavlja upozorenje.
Ovaj tekst predstavlja opasnost.

Gdje se možemo koristiti

  • Većina web dizajnera radije koristi tipografiju za pokretanje sustava za bolji izgled i osjećaj tekstualnog formata.
  • Naročito se koristi tijekom stiliziranja i oblikovanja tekstualnog sadržaja.
  • Većinu vremena postoji pitanje vezano za reaktivnost teksta. Veličina teksta varira ovisno o različitim uređajima. Stoga se ovi problemi razjašnjavaju korištenjem značajke tipografije za pokretanje sustava.
  • Tipografija za pokretanje uređaja namijenjena je jednostavnom predstavljanju na krajnji korisnik.
  • Takvi tekstualni elementi na web stranici uvijek će se prikazivati ​​putem veze do listova stila Bootstrap 4 na isti način, osim što ih drugi predmeti preklapaju.
  • Bootstrap pruža programerima pogodne tipografske značajke kako bi im olakšali stvaranje naslova, odlomaka, popisa i drugih inline elemenata koji bi bili privlačni čitateljima.

Zaključak

  • Kao po svim detaljima danim u gore navedenom sadržaju, različite tipografske značajke Bootstrap-a za naslove, blok-citat, vodeći tekst, označeni tekst, kratice s prikladnim primjerima.
  • Takve robusne i lijepe značajke Bootstrapa čine ga vrlo popularnim i jedinstvenim razvojnim okvirom za prednje strane koji široko koristi mnoge organizacije.
  • Početni program dolazi sa svim oznakama za tipografiju koje želimo oblikovati, sve od oznake do

    i čitavu hijerarhiju zaglavlja.

Preporučeni članci

Ovo je vodič za tipografiju Bootstrapa. Ovdje razgovaramo o različitim značajkama Bootstrap Tipografije poput naslova, blok-citata, kratica, oznake itd. Također možete pogledati sljedeće članke da biste saznali više -

  • Naredbe za pokretanje sustava
  • Dijelovi za podizanje sustava
  • Kako instalirati Bootstrap
  • Izgled pokretanja

Kategorija:

Razvoj softvera