Tüpograafia
Bootstrapi tüpograafia dokumentatsioon ja näited, sealhulgas globaalsed sätted, pealkirjad, kehatekst, loendid ja palju muud.
Bootstrap määrab põhilised globaalsed kuvamis-, tüpograafia- ja linkistiilid. Kui vajate rohkem kontrolli, vaadake tekstilise utiliidi klasse .
- Kasutage algset fondivirna , mis valib
font-family
iga OS-i ja seadme jaoks parima. - Kaasavama ja juurdepääsetavama tüübiskaala jaoks eeldame brauseri
font-size
vaikejuurt (tavaliselt 16 pikslit), et külastajad saaksid oma brauseri vaikeseadeid vastavalt vajadusele kohandada. - Kasutage atribuute
$font-family-base
,$font-size-base
ja$line-height-base
meie tüpograafilise alusena, mida rakendatakse atribuudile<body>
. - Määrake globaalse lingi värv
$link-color
ja rakendage lingi allakriipsutusi ainult:hover
. - Kasutage ,
$body-bg
et määratabackground-color
( vaikimisi).<body>
#fff
Need stiilid leiate _reboot.scss
jaotisest ja globaalsed muutujad on määratletud _variables.scss
. Seadistage $font-size-base
kindlasti rem
.
Saadaval on kõik HTML-i pealkirjad <h1>
kuni <h6>
.
Pealkiri | Näide |
---|---|
|
h1. Bootstrapi pealkiri |
|
h2. Bootstrapi pealkiri |
|
h3. Bootstrapi pealkiri |
|
h4. Bootstrapi pealkiri |
|
h5. Bootstrapi pealkiri |
|
h6. Bootstrapi pealkiri |
.h1
Läbi .h6
klasside on saadaval ka siis, kui soovite sobitada pealkirja fondi stiili, kuid ei saa kasutada seotud HTML-elementi.
h1. Bootstrapi pealkiri
h2. Bootstrapi pealkiri
h3. Bootstrapi pealkiri
h4. Bootstrapi pealkiri
h5. Bootstrapi pealkiri
h6. Bootstrapi pealkiri
Kasutage kaasasolevaid utiliidiklasse, et luua Bootstrap 3-st väike teisese pealkirja tekst.
Traditsioonilised pealkirjaelemendid on loodud töötama kõige paremini teie lehe sisus. Kui vajate silmapaistmiseks pealkirja, kaaluge kuvatava pealkirja kasutamist – suuremat ja pisut rohkem arvamust avaldavat pealkirjastiili.
Ekraan 1 |
Ekraan 2 |
Ekraan 3 |
Ekraan 4 |
Muutke lõik silmapaistvaks, lisades .lead
.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
Levinud tekstisiseste HTML5 elementide stiil.
Saate kasutada märgistustesiletekst.
Seda tekstirida tuleb käsitleda kustutatud tekstina.
Seda tekstirida tuleb käsitleda ebatäpsena.
Seda tekstirida tuleb käsitleda dokumendi lisana.
See tekstirida renderdatakse allajoonituna
Seda tekstirida tuleb käsitleda peenes kirjas.
See rida renderdati paksus kirjas tekstina.
See rida renderdati kaldkirjas tekstina.
.mark
ja .small
klassid on saadaval ka samade stiilide rakendamiseks <mark>
ja <small>
vältides samal ajal soovimatuid semantilisi tagajärgi, mida sildid kaasa toovad.
<b>
Kuigi seda ülal pole näidatud, kasutage seda vabalt <i>
HTML5-s. <b>
on mõeldud sõnade või fraaside esiletõstmiseks ilma täiendavat tähtsust andmata, samas kui <i>
see on enamasti mõeldud hääle, tehniliste terminite jms jaoks.
Muutke teksti joondamist, teisendamist, stiili, kaalu ja värvi meie teksti- ja värviutiliitidega .
HTML-i elemendi stiliseeritud rakendamine <abbr>
lühendite ja akronüümide jaoks, et näidata laiendatud versiooni hõljutamisel. Lühenditel on vaikimisi allakriipsutus ja abikursor, et pakkuda hõljutamisel ja abitehnoloogiate kasutajatele täiendavat konteksti.
.initialism
Veidi väiksema fondi suuruse saamiseks lisage lühendile.
attr
HTML
Sisuplokkide tsiteerimiseks teie dokumendis teisest allikast. Mähkige tsitaadina mis <blockquote class="blockquote">
tahes HTML -i ümber.
Lorem ipsum dolor sit amet, consectetur adipiscing eliit. Täisarv posuere erat a ante.
Lisage <footer class="blockquote-footer">
allika tuvastamiseks a. Mähi lähtetöö nimi sisse <cite>
.
Lorem ipsum dolor sit amet, consectetur adipiscing eliit. Täisarv posuere erat a ante.
Kasutage plokitsitaadi joonduse muutmiseks vastavalt vajadusele tekstiutiliite.
Lorem ipsum dolor sit amet, consectetur adipiscing eliit. Täisarv posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing eliit. Täisarv posuere erat a ante.
Eemaldage list-style
loendiüksustel vaike- ja vasak veeris (ainult kohesed alajärgud). See kehtib ainult vahetute alamloendi üksuste kohta , mis tähendab, et peate klassi lisama ka kõigi pesastatud loendite jaoks.
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Täisarv molestie lorem ja mass
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat juures
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
Eemaldage loendist täpid ja rakendage veidi valgust margin
kahe klassi kombinatsiooniga .list-inline
ja .list-inline-item
.
- Lorem ipsum
- Phasellus iaculis
- Nulla volutpat
Joondage terminid ja kirjeldused horisontaalselt, kasutades meie ruudustikusüsteemi eelmääratletud klasse (või semantilisi segusid). Pikema aja jooksul saate valikuliselt lisada .text-truncate
klassi, et kärpida teksti ellipsiga.
- Kirjeldusloendid
- Kirjeldusloend sobib suurepäraselt terminite määratlemiseks.
- Euismod
-
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida ja eget metus.
- Malesuada porta
- Etiam porta sem malesuada magna mollis euismod.
- Kärbitud termin on kärbitud
- Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
- Pesitsemine
-
- Pesastatud määratluste loend
- Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.
Responsiivne tüpograafiafont-size
viitab teksti ja komponentide skaleerimisele, kohandades meediumipäringute seerias lihtsalt juurelemente . Bootstrap ei tee seda teie eest, kuid seda on vajadusel üsna lihtne lisada.
Siin on näide sellest praktikas. Valige soovitud font-size
s- ja meediapäringud.