Typografia
Dokumentaatio ja esimerkkejä Bootstrap-typografiasta, mukaan lukien yleiset asetukset, otsikot, leipäteksti, luettelot ja paljon muuta.
Bootstrap määrittää yleiset perusnäytöt, typografian ja linkityylit. Kun tarvitset enemmän hallintaa, tarkista tekstimuotoiset hyödyllisyysluokat .
- Käytä alkuperäistä kirjasinpinoa , joka valitsee
font-family
kullekin käyttöjärjestelmälle ja laitteelle parhaan. - Kattavamman ja helppokäyttöisemmän tyyppiasteikon saamiseksi oletamme selaimen
font-size
oletusjuuren (yleensä 16 kuvapistettä), jotta vierailijat voivat mukauttaa selaimensa oletusasetuksia tarpeen mukaan. - Käytä attribuutteja
$font-family-base
,$font-size-base
ja$line-height-base
attribuutteja typografisena perustana, jota sovelletaan<body>
. - Aseta yleinen linkin väri kautta
$link-color
ja käytä linkin alleviivauksia vain:hover
. - Käytä
$body-bg
asettaaksesi abackground-color
kohtaan<body>
(#fff
oletuksena).
Nämä tyylit löytyvät sisällä _reboot.scss
ja globaalit muuttujat määritellään _variables.scss
. Muista ottaa $font-size-base
käyttöön rem
.
Kaikki HTML-otsikot, alkaen , ovat saatavilla <h1>
.<h6>
Otsikko | Esimerkki |
---|---|
|
h1. Bootstrap otsikko |
|
h2. Bootstrap otsikko |
|
h3. Bootstrap otsikko |
|
h4. Bootstrap otsikko |
|
h5. Bootstrap otsikko |
|
h6. Bootstrap otsikko |
.h1
kautta .h6
luokat ovat myös saatavilla, kun haluat sovittaa otsikon kirjasintyyliä, mutta et voi käyttää siihen liittyvää HTML-elementtiä.
h1. Bootstrap otsikko
h2. Bootstrap otsikko
h3. Bootstrap otsikko
h4. Bootstrap otsikko
h5. Bootstrap otsikko
h6. Bootstrap otsikko
Käytä mukana toimitettuja hyödyllisyysluokkia luodaksesi uudelleen pienen toissijaisen otsikon tekstin Bootstrap 3:sta.
Perinteiset otsikkoelementit on suunniteltu toimimaan parhaiten sivusi sisällön sisällössä. Kun tarvitset otsikon erottuaksesi joukosta, harkitse näytön otsikon käyttöä – suurempaa, hieman mielipiteellisempää otsikotyyliä.
Näyttö 1 |
Näyttö 2 |
Näyttö 3 |
Näyttö 4 |
Tee kappaleesta erottuva lisäämällä .lead
.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
Tyylityyli yleisille HTML5-elementeille.
Voit käyttää merkkitunnistettakohokohtateksti.
Tätä tekstiriviä on tarkoitus käsitellä poistettuna tekstinä.
Tätä tekstiriviä on tarkoitus käsitellä epätarkana.
Tätä tekstiriviä on tarkoitus käsitellä asiakirjan lisäyksenä.
Tämä tekstirivi hahmonnetaan alleviivatuksi
Tätä tekstiriviä on tarkoitus käsitellä pienellä tekstillä.
Tämä rivi esitetään lihavoituna.
Tämä rivi muutettiin kursivoituksi tekstiksi.
.mark
ja .small
luokat ovat myös saatavilla käyttämään samoja tyylejä kuin <mark>
ja <small>
samalla välttäen kaikki ei-toivotut semanttiset vaikutukset, joita tunnisteet tuovat mukanaan.
Vaikka sitä ei näy yllä, voit käyttää <b>
sitä <i>
HTML5:ssä. <b>
on tarkoitettu korostamaan sanoja tai lauseita antamatta lisätärkeyttä, kun taas <i>
se on enimmäkseen puhetta, teknisiä termejä jne.
Muuta tekstin kohdistusta, muunnaa, tyyliä, painoa ja väriä teksti- ja väriapuohjelmillamme .
HTML-elementin tyylitelty toteutus <abbr>
lyhenteille ja lyhenteille, jotta laajennettu versio näytetään. Lyhenteillä on oletusarvoinen alleviivaus, ja ne saavat ohjekohdistimen, joka tarjoaa lisäkontekstia hiirikäytössä ja avustavien tekniikoiden käyttäjille.
Lisää .initialism
lyhenteeseen hieman pienemmän fontin koon saamiseksi.
attr
HTML
Toisesta lähteestä peräisin olevien sisältölohkojen lainaamiseen dokumentissasi. Kääri lainauksena <blockquote class="blockquote">
minkä tahansa HTML -koodin ympärille.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Kokonaisluku posuere erat a ante.
Lisää a <footer class="blockquote-footer">
lähteen tunnistamiseksi. Kääri lähdeteoksen nimi muotoon <cite>
.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Kokonaisluku posuere erat a ante.
Käytä tekstiapuohjelmia tarpeen mukaan muuttaaksesi lohkolainauskohteen tasausta.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Kokonaisluku posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Kokonaisluku posuere erat a ante.
Poista oletus- list-style
ja vasen marginaali luettelokohteista (vain välittömät alakohdat). Tämä koskee vain välittömiä alatason luettelokohteita , mikä tarkoittaa, että sinun on lisättävä luokka myös kaikille sisäkkäisille luetteloille.
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Kokonaisluku molestie lorem ja massa
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
Poista luettelon luettelomerkit ja lisää valoa margin
kahden luokan yhdistelmällä .list-inline
ja .list-inline-item
.
- Lorem ipsum
- Phasellus iaculis
- Nulla volutpat
Tasaa termit ja kuvaukset vaakasuunnassa käyttämällä ruudukkojärjestelmämme ennalta määritettyjä luokkia (tai semanttisia mixinejä). Pidempiä ajanjaksoja varten voit halutessasi lisätä .text-truncate
luokan katkaistaksesi tekstin ellipsillä.
- Kuvausluettelot
- Kuvausluettelo on täydellinen termien määrittelyyn.
- Euismod
-
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
- Malesuada porta
- Etiam porta sem malesuada magna mollis euismod.
- Katkaistu termi on katkaistu
- Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
- Pesivä
-
- Sisäkkäinen määritelmäluettelo
- Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.
Responsiivinen typografia viittaa tekstin ja komponenttien skaalaamiseen yksinkertaisesti säätämällä juurielementtejä mediakyselyiden font-size
sarjassa. Bootstrap ei tee tätä puolestasi, mutta se on melko helppo lisätä tarvittaessa.
Tässä esimerkki siitä käytännössä. Valitse haluamasi font-size
s ja mediakyselyt.