Bootstrap-typografian perusteet

Typografia on yksi käynnistyksen viimeisimmistä ominaisuuksista. Sitä käytetään erityisesti tekstielementtien muotoiluun ja muotoiluun. Käyttämällä bootstrapin typografiaominaisuutta joku pystyy luomaan otsikoita, kappaleita, joitain muita rivielementtejä ja luetteloita. Periaatteessa bootstrap käyttää fontin kokoa 1rem (16px), mukaan lukien rivikorkeudet 5. Oletusarvoisesti bootstrapin käyttämät fonttiperheet ovat sans-serif, Arial, Asettaa, kuinka sisällön pitäisi näkyä rungossa, rungon taustaväri, fontti koko ja viivan korkeus reunojen, pehmusteiden jne. luomiseksi

Bootstrap-typografian ominaisuudet

Alla on typografian erityispiirteet seuraavasti:

1) Otsikot

HTML-otsikot jaetaan

että

Bootstrap-otsikko
näytetään kirjasinkoko

Bootstrap-otsikko

näytetään kirjasinkoko

Bootstrap-otsikko

näytetään kirjasinkoko

Bootstrap-otsikko

näytetään kirjasinkoko
Bootstrap-otsikko
näytetään kirjasinkoko
Bootstrap-otsikko
näytetään kirjasinkoko

HTML-koodia käyttämällä se antaa tulosteen alla esitetyllä tavalla:

Bootstrap-typografiaa käyttämällä se muotoiltiin ja alustattiin vastaavilla luokilla alla esitetyllä tavalla:

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

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

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

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

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

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

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

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

Yllä olevan koodin lähtö Bootstrap-typografiaa käyttämällä on seuraava:

2) reagoivat otsikot

Responsiiviset otsikot ovat yksi parhaista asioista, joita voidaan suunnitella typografian avulla. nämä ovat elementtejä, joissa tekstiä säädetään automaattisesti käyttämällä luokan mukaan reagoivia laitteen koon mukaan. Joten voi helposti nähdä saman tekstin sopivalla tavalla eri laitteilla.

Lisää vain reagoiva luokka otsikkotunnisteeseesi seuraavasti:

Responsive Header

Joten se näyttää tuotoksen seuraavasti:

Responsiivinen otsikko.

Voit tarkistaa saman tekstin myös eri laitteilla sekä muuttaa selaimen kokoa muuttamalla sitä.

3)

Tätä tunnistetta käytetään kevyemmän, pienemmän, toissijaisen tekstin luomiseen otsikkoosi. Oletuksena se on 85% yläotsakkeen koosta.

Esimerkki:

Example heading secondary text

lähtö:

h5-otsikon toissijainen teksti

4)

Tätä tunnistetta käytetään korostamaan tekstiä.

Esimerkki:

Bootstrap Typography

Bootstrap Typography

Tätä käytetään korostamaan tekstiä.

5)

Tätä tunnistetta käytetään lyhenteen merkitsemiseen. Lyhenteillä on oletusviivaus korostettu, ja ne saavat ohjekohdistimen tarjoamaan lisäkontekstin leijuessa ja avustekniikan käyttäjille.

Esimerkki:

Maailmassa on niin monia maita.Indiaiset paras maa

6)

Osoittaa poistettua tekstiä

Esimerkki:

Tätä tunnistetta käytetään poistetun tekstin näyttämiseen.

lähtö:

Tätä tunnistetta käytetään osoittamaan.

7)

Blockquote-elementtiä käytetään sisällön esittämiseen toisesta lähteestä.

Esimerkki:

Blockquotes

Blockquotes

Blockquote-elementtiä käytetään sisällön esittämiseen toisesta lähteestä:


Hyvin vähän tarvitaan onnellisen elämän tekemiseen; se on kaikki itsessäsi, ajattelutavassasi. Elämä on kuin viulun soittaminen julkisesti ja soittimen oppiminen jatkuvasti.

lähtö:

Blockquotes
Blockquote-elementtiä käytetään sisällön esittämiseen toisesta lähteestä:

Hyvin vähän tarvitaan onnellisen elämän tekemiseen; se on kaikki itsessäsi, ajattelutavassa. Elämä on kuin viulun soittaminen julkisesti ja soittimen oppiminen jatkuvasti.

8)
:

Tätä tunnistetta käytetään kuvausluettelon näyttämiseen.

Esimerkki:

Dl-elementti osoittaa kuvausluettelon:


leipä

- Valkoinen

- Ruskea

Kylmät juomat

- Pepsi

lähtö:

Dl-elementti osoittaa kuvausluettelon:

leipä
Valkoinen
Ruskea
Kylmät juomat
Pepsi.

9)

Inline-koodikomento tulisi yhdistää koodielementtiin.

Esimerkki:

Seuraavat HTML-elementit: span, section ja div määrittelevät osan asiakirjasta.

lähtö:

Seuraavat HTML-elementit: span, section ja div määrittelevät osan asiakirjasta.

10) Asiayhteyteen liittyvät värit

Tämä ei ole muuta kuin eri luokka, jota käytetään ilmaisemaan merkitys eri väreillä.
Sillä on erilaisia ​​luokkia, kuten .teksti-vaimennettu, .teksti-info, .teksti-ensisijainen, .teksti-menestys, .teksti-varoitus, .teksti-vaara.

Esimerkki:

Käytä asiayhteysluokkia antamaan "merkitys värien kautta":

Tämä teksti on mykistetty.


Tämä teksti on tärkeä.

Tämä teksti osoittaa menestystä.

Tämä teksti edustaa joitain tietoja.

Tämä teksti on varoitus.

Tämä teksti edustaa vaaraa.

lähtö:

Tämä teksti on mykistetty.
Tämä teksti on tärkeä.
Tämä teksti osoittaa menestystä.
Tämä teksti edustaa joitain tietoja.
Tämä teksti on varoitus.
Tämä teksti edustaa vaaraa.

Missä voimme käyttää

  • Suurin osa web-suunnittelijoista käyttää mieluummin bootstrap-typografiaa tekstimuodon paremman ilmeen ja tuntuisuuden aikaansaamiseksi.
  • Sitä käytetään erityisesti tekstisisällön muotoilussa ja muotoilussa.
  • Suurimman osan ajasta on ongelma, joka liittyy tekstin reagointiin. Tekstin koko vaihtelee eri laitteiden mukaan. Joten tämä ongelma selkeytyy käyttämällä bootstrap-typografiaominaisuutta.
  • Bootstrap-typografia on räätälöity yksinkertaisella tavalla esittelemään houkuttelevasti loppukäyttäjälle.
  • Tällaiset verkkosivun tekstielementit näytetään aina linkin kautta Bootstrap 4 -tyylilehteen samalla tavalla paitsi, että muut tyylilajit korvaavat nämä elementit.
  • Bootstrap tarjoaa kehittäjille käteviä typografiaominaisuuksia, jotta heidän on helppo luoda otsikoita, kappaleita, luetteloita ja muita lukijoille houkuttelevia elementtejä.

johtopäätös

  • Kuten kaikista yllä olevassa sisällössä esitetyistä yksityiskohdista, Bootstrapin eri typografiset piirteet otsikoille, blockquote, lyijoteksti, merkitty teksti, lyhenteet sopivilla esimerkeillä.
  • Bootstrapin selkeät ja kauniit ominaisuudet tekevät siitä erittäin suositun ja ainutlaatuisen käyttöliittymän kehityskehyksen, jota monet organisaatiot käyttävät laajasti.
  • Käynnistyslokero sisältää kaikki haluamamme tyypilliset tunnisteet, kaikkea tunnisteesta

    ja koko otsikkohierarkia.

Suositellut artikkelit

Tämä on opas Bootstrap-typografiaan. Tässä keskustellaan Bootstrap-typografian eri ominaisuuksista, kuten otsikot, lauselainaus, lyhenne, merkki jne. Voit myös katsoa seuraavia artikkeleita saadaksesi lisätietoja -

  • Bootstrap-komennot
  • Bootstrap-komponentit
  • Kuinka asentaa Bootstrap
  • Bootstrap-asettelu

Luokka:

Ohjelmistokehitys