Bootstrap-tüpograafia - Bootstrap-tüpograafia omadused koos näidetega

Sissejuhatus alglaadimiste tüpograafiasse

Tüpograafia on alglaadimise üks viimaseid funktsioone. Seda kasutatakse eriti tekstielementide kujundamiseks ja vormindamiseks. Kasutades alglaadimise tüpograafiafunktsiooni, saab keegi luua pealkirju, lõike, mõnda muud elementi ja loendeid. Põhimõtteliselt kasutab bootstrap fondi suurusena 1rem (16 pikslit) koos rea kõrgusega 5 suurus ja joonekõrgus veeriste, polstrite jms loomiseks

Bootstrap-tüpograafia omadused

Allpool on toodud järgmised tüpograafia erinevad omadused:

1) pealkirjad

HTML-i pealkirjad jagunevad

kuni

Algrihma suund

kuvatakse kirjasuuruses

Algrihma suund

kuvatakse kirjasuuruses

Algrihma suund

kuvatakse kirjasuuruses

Algrihma suund

kuvatakse kirjasuuruses

Algrihma suund

kuvatakse kirjasuuruses

Algrihma suund

kuvatakse kirjasuuruses

HTML-koodi kasutamisel saadakse väljund nagu allpool näidatud:

Bootstrap'i tüpograafia abil kujundati ja vormindati vastavad klassid, nagu allpool näidatud:

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

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

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

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

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

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

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

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

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

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

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

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

Ülaltoodud koodi väljund Bootstrap Typography abil on järgmine:

2) reageerivad pealkirjad

Vastuvõtvad pealkirjad on üks parimaid asju, mida saab tüpograafia abil kujundada. need on elemendid, milles teksti kohandatakse automaatselt, kasutades klassi tundlikke vastavalt seadme suurusele. Nii saab sama teksti sobival viisil erinevates seadmetes hõlpsasti näha.

Lisage oma päisesilti lihtsalt tundlik klass järgmiselt:

Responsive Header

See näitab väljundit järgmiselt:

Vastuvõtlik päis.

Sama teksti saate kontrollida ka erinevates seadmetes ning brauseri suuruse muutmisel kuvatakse muudatused.

3)

Seda märgendit kasutatakse pealkirja kergema, väiksema, teisese teksti loomiseks. Vaikimisi on see 85% põhirubriigi suurusest.

Näide:

Example heading secondary text

Väljund:

h5 pealkirja teisene tekst

4)

Seda silti kasutatakse teksti esiletõstmiseks.

Näide:

Bootstrap Typography


Bootstrap Typography


Seda kasutatakse teksti esiletõstmiseks.

5)

Seda silti kasutatakse lühendi tähistamiseks. Lühenditel on vaikimisi allajoonimine ja need saavad abikursori, et pakkuda hõljutatava kursuse ja abitehnoloogia kasutajate jaoks täiendavat konteksti.

Näide:

Maailmas on nii palju riike.Indiaisad on parim riik

6)

Tähistab kustutatud teksti

Näide:

Seda silti kasutatakse kustutatud teksti kuvamiseks.

Väljund:

Seda silti kasutatakse kuvamiseks.

7)

Blokeeringu elementi kasutatakse teisest allikast pärit sisu esitamiseks.

Näide:

Blockquotes


Blockquotes


Plokivälja elementi kasutatakse teisest allikast pärit sisu esitamiseks:

Õnneliku elu tegemiseks on vaja väga vähe; see kõik on teie enda sees, teie mõtteviisis. Elu on nagu avalikult viiulit mängides ja pilli õppides nii, nagu edasi saab.

Väljund:

Blockquotes
Plokivälja elementi kasutatakse teisest allikast pärit sisu esitamiseks:

Õnneliku elu tegemiseks on vaja väga vähe; see kõik on teie enda sees, teie mõtteviisis. Elu on nagu avalikult viiulimäng ja pilli õppimine nii, nagu edasi saab.

8)

:

Seda silti kasutatakse kirjeldusloendi kuvamiseks.

Näide:

Element dl tähistab kirjeldusloendit:

Leib

- valge

- Pruun

Külmad joogid

- Pepsi

Väljund:

Element dl tähistab kirjeldusloendit:

Leib
Valge
Pruun
Külmad joogid
Pepsi.

9)

Sisemine koodiavaldus tuleks koondada koodielementi.

Näide:

Järgmised HTML-i elemendid: span, section ja div määratlevad jaotise dokumendis.

Väljund:

Järgmised HTML-i elemendid: span, section ja div määratlevad jaotise dokumendis.

10) Kontekstuaalsed värvid

See pole midagi muud kui erinev klass, mida kasutatakse erinevate värvide abil tähenduse edastamiseks.
Sellel on erinevad klassid, näiteks .tekst-summutatud, .tekst-teave, .tekst-esmane, .tekst-edu, .tekst-hoiatus, .tekst-oht.

Näide:

Kasutage kontekstuaalseid klasse, et anda "tähendus läbi värvide":

See tekst on vaigistatud.

See tekst on oluline.

See tekst näitab edu.

See tekst kujutab mingit teavet.

See tekst tähistab hoiatust.

See tekst tähistab ohtu.

Väljund:

See tekst on vaigistatud.
See tekst on oluline.
See tekst näitab edu.
See tekst kujutab mingit teavet.
See tekst tähistab hoiatust.
See tekst tähistab ohtu.

Kus saame kasutada

• Enamik veebidisainereid eelistab tekstivormingu parema väljanägemise ja laadimise huvides alglaadimiste tüpograafiat.
• Seda kasutatakse eriti teksti sisu kujundamisel ja vormindamisel.
• Enamasti on probleeme teksti reageerimisega. Teksti suurus varieerub vastavalt erinevatele seadmetele. Nii et seda küsimust saab alglaadimise tüpograafiafunktsiooni abil selgemaks.
• Bootstrap-tüpograafia on kohandatud lihtsal viisil, et see oleks lõpptarbijale atraktiivne.
• Sellised veebilehe tekstielemendid renderdatakse alati Bootstrap 4 stiililehe lingi kaudu samal viisil, välja arvatud juhul, kui need elemendid on muude stiiliklasside poolt üle kirjutatud.
• Bootstrap pakub arendajatele mugavaid tüpograafiafunktsioone, mis võimaldavad neil hõlpsalt luua pealkirju, lõike, loendeid ja muid lugejale meelepäraseid elemente.

Järeldus

• Nagu kõigi ülaltoodud sisu osas, on pealkirjade Bootstrap'i erinevad tüpograafilised omadused, plokkikviit, juhtiv tekst, märgistatud tekst, sobivate näidetega lühendid.
• Sellised tugevad ja ilusad Bootstrapi omadused muudavad selle väga populaarseks ja ainulaadseks esiotsa arendusraamistikuks, mida paljud organisatsioonid laialdaselt kasutavad.
• Alglaadipilt sisaldab kõiki tüpograafia silte, mille jaoks tahame stiili pakkuda, kõike sildist kuni

  ja kogu rubriikide hierarhia.

Soovitatavad artiklid

See on juhend Bootstrap tüpograafia juurde. Siin käsitleme Bootstrap-tüpograafia erinevaid funktsioone, nagu pealkirjad, plokkikood, lühend, märk jne. Lisateabe saamiseks võite vaadata ka järgmisi artikleid -

• Bootstrap-i käsud
• Bootstrap-i komponendid
• Kuidas installida Bootstrap
• Bootstrap-i paigutus