Introduksjon i Bootstrap Typography

Typografi er en av de nyeste funksjonene i bootstrap. Det er spesielt brukt til styling og formatering av tekstelementer. Ved å bruke typografifunksjonen til bootstrap kan noen lage overskrifter, avsnitt, noen andre inline-elementer og lister. I utgangspunktet bruker bootstrap 1rem (16px) som skriftstørrelse inkludert linjehøyde forblir 5. Som standard er fontfamilier som brukes av bootstrap sans-serif, Arial, Det angir hvordan innholdet skal vises på kroppen, bakgrunnsfarge på kroppen, bruker font størrelse og linjehøyde for å skape marginer, polstring, etc.

Funksjoner ved Bootstrap Typography

Nedenfor er de forskjellige funksjonene i typografi som følger:

1) Overskrifter

HTML-overskrifter er delt inn i

til

Bootstrap Heading
vises i skriftstørrelse

Bootstrap Heading

vises i skriftstørrelse

Bootstrap Heading

vises i skriftstørrelse

Bootstrap Heading

vises i skriftstørrelse
Bootstrap Heading
vises i skriftstørrelse
Bootstrap Heading
vises i skriftstørrelse

Ved å bruke HTML-kode gir den output som vist nedenfor:

Ved å bruke Bootstrap-typografi stylet og formaterte den ved bruk av respektive klasser som vist nedenfor:

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

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

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

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

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

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

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

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

Utgangen til koden ovenfor ved bruk av Bootstrap Typography er som følger:

2) Responsive overskrifter

Responsive overskrifter er noe av det beste man kan designe ved hjelp av typografi. dette er elementene som teksten justeres automatisk ved å bruke klasseklasse som per enhetsstørrelse. Så man kan lett se den samme teksten på en passende måte på forskjellige enheter.

Bare legg til klasse responsiv i toppteksten din på følgende måte:

Responsive Header

Så det vil vise utdata som:

Responsiv overskrift.

Du kan sjekke den samme teksten på de forskjellige enhetene også, samt ved å endre størrelsen på nettleseren vil den vise endringer.

3)

Denne taggen brukes til å lage lettere, mindre, sekundær tekst i overskriften. Som standard angir den 85% av størrelsen på overordnet overskrift.

Eksempel:

Example heading secondary text

Produksjon:

h5 overskrift sekundær tekst

4)

Denne taggen brukes til å fremheve tekst.

Eksempel:

Bootstrap Typography

Bootstrap Typography

Dette brukes til å fremheve tekst.

5)

Denne taggen brukes til å merke en forkortelse. Forkortelser har en standardunderstrekning og får en hjelpemarkør for å gi ytterligere kontekst for svevet og til brukere av hjelpeteknologier.

Eksempel:

Det er så mange land i verden. Det er det beste landet

6)

Indikerer slettet tekst

Eksempel:

Denne taggen brukes til å vise slettet tekst.

Produksjon:

Denne taggen brukes til å vise.

7)

Blockquote-elementet brukes til å presentere innhold fra en annen kilde.

Eksempel:

Blockquotes

Blockquotes

Blockquote-elementet brukes til å presentere innhold fra en annen kilde:


Det trengs veldig lite for å gjøre et lykkelig liv; det er alt i deg selv, i din måte å tenke på. Livet er som å spille fiolin i offentligheten og lære instrumentet mens du fortsetter.

Produksjon:

Blockquotes
Blockquote-elementet brukes til å presentere innhold fra en annen kilde:

Det trengs veldig lite for å gjøre et lykkelig liv; alt er i deg selv, i din måte å tenke på. Livet er som å spille fiolin i offentligheten og lære instrumentet mens man fortsetter.

8)
:

Denne taggen brukes til å vise en beskrivelsesliste.

Eksempel:

Dl-elementet indikerer en beskrivelsesliste:


Brød

- Hvit

- Brun

Kalde drinker

- Pepsi

Produksjon:

Dl-elementet indikerer en beskrivelsesliste:

Brød
Hvit
brun
Kalde drinker
Pepsi.

9)

Den innebygde kodeangivelsen skal kobles sammen i kodeelementet.

Eksempel:

Følgende HTML-elementer: span, section og div definerer en seksjon i et dokument.

Produksjon:

Følgende HTML-elementer: span, seksjon og div definerer en seksjon i et dokument.

10) Kontekstuelle farger

Dette er ikke annet enn en annen klasse som brukes til å formidle mening ved bruk av forskjellige farger.
Det har forskjellige klasser som .text-dempet, .text-info, .text-primær, .text-suksess, .text-advarsel, .text-fare.

Eksempel:

Bruk de kontekstuelle klassene for å gi "mening gjennom farger":

Denne teksten er dempet.


Denne teksten er viktig.

Denne teksten indikerer suksess.

Denne teksten representerer noe informasjon.

Denne teksten representerer en advarsel.

Denne teksten representerer fare.

Produksjon:

Denne teksten er dempet.
Denne teksten er viktig.
Denne teksten indikerer suksess.
Denne teksten representerer noe informasjon.
Denne teksten representerer en advarsel.
Denne teksten representerer fare.

Der vi kan bruke

  • De fleste webdesignere foretrekker å bruke bootstrap-typografi for bedre utseende og følelse av tekstformat.
  • Det brukes spesielt mens du styler og formaterer tekstinnhold.
  • Det meste av tiden er det et spørsmål angående respons på tekst. Tekststørrelse blir variert per forskjellige enheter. Så dette problemet blir avklart ved å bruke bootstrap typografifunksjonen.
  • Bootstrap Typography er tilpasset på en enkel måte å presentere attraktivt for sluttbrukeren.
  • Slike tekstelementer på en webside vil alltid bli gjengitt gjennom lenken til Bootstrap 4-stilarket på samme måte, bortsett fra at disse elementene blir tilsidesatt av andre stilklasser.
  • Bootstrap gir utviklere praktiske typografifunksjoner for å gjøre det enkelt for dem å lage overskrifter, avsnitt, lister og andre inline-elementer som vil være appellerende for leserne.

Konklusjon

  • I henhold til alle detaljene gitt over innholdet ovenfor, har de forskjellige typografifunksjonene til Bootstrap for overskrifter, blokkquote, Lead Text, Marked Text, Forkortelser med passende eksempler.
  • Slike robuste og pene funksjoner ved Bootstrap gjør det til et veldig populært og unikt rammeverk for frontend som er mye brukt av mange organisasjoner.
  • Oppstartstroppen kommer med alle typografikoder som vi vil ha stylet på, alt fra en tag til

    og hele overskriftshierarkiet.

Anbefalte artikler

Dette er en guide til Bootstrap Typography. Her diskuterer vi forskjellige funksjoner i Bootstrap Typography som overskrifter, blokknummer, forkortelse, merke osv. Du kan også se på følgende artikler for å lære mer -

  • Bootstrap-kommandoer
  • Bootstrap-komponenter
  • Slik installerer du Bootstrap
  • Oppstart av oppstart

Kategori:

Programvare utvikling