Typography
Cov ntaub ntawv thiab cov piv txwv rau Bootstrap typography, suav nrog cov chaw thoob ntiaj teb, cov ncauj lus, cov ntawv hauv lub cev, cov npe, thiab lwm yam.
Kev teeb tsa thoob ntiaj teb
Bootstrap teeb tsa lub ntiaj teb cov zaub, typography, thiab txuas cov qauv. Thaum xav tau kev tswj ntau dua, mus saib cov chav kawm ntawv siv hluav taws xob .
- Siv cov kab ntawv ib txwm muaj uas xaiv qhov zoo tshaj plaws
font-family
rau txhua OS thiab ntaus ntawv. - Rau ntau qhov sib xyaw thiab siv tau hom nplai, peb xav tias qhov browser default root
font-size
(feem ntau 16px) yog li cov neeg tuaj saib tuaj yeem kho lawv qhov browser raws li xav tau. - Siv cov
$font-family-base
,$font-size-base
, thiab$line-height-base
cov cwj pwm raws li peb lub hauv paus typographic siv rau<body>
. - Teem lub ntiaj teb txuas xim ntawm
$link-color
thiab siv qhov txuas hauv qab tsuas yog rau:hover
. - Siv
$body-bg
los teeb tsabackground-color
rau ntawm<body>
(#fff
los ntawm lub neej ntawd).
Cov qauv no tuaj yeem pom nyob rau hauv _reboot.scss
, thiab lub ntiaj teb hloov pauv tau txhais hauv _variables.scss
. Nco ntsoov teem $font-size-base
rau hauv rem
.
Cov ntsiab lus
Tag nrho cov ntsiab lus HTML, <h1>
dhau los <h6>
, muaj.
Lub taub hau | Piv txwv |
---|---|
|
h 1. Bootstrap taub hau |
|
h 2. Bootstrap taub hau |
|
h 3. Bootstrap taub hau |
|
h 4. Bootstrap taub hau |
|
h 5. Bootstrap taub hau |
|
h 6. Bootstrap taub hau |
.h1
los ntawm .h6
cov chav kawm kuj muaj, rau thaum koj xav kom phim cov font styling ntawm ib nqe lus tab sis tsis tuaj yeem siv cov ntsiab lus HTML cuam tshuam.
h 1. Bootstrap taub hau
h 2. Bootstrap taub hau
h 3. Bootstrap taub hau
h 4. Bootstrap taub hau
h 5. Bootstrap taub hau
h 6. Bootstrap taub hau
Customizing cov npe
Siv cov chav kawm siv hluav taws xob los tsim cov ntawv me me thib ob ntawm Bootstrap 3.
Fancy zaub heading Nrog faded thib ob cov ntawv nyeem
Tso cov kab ntawv
Cov ntsiab lus tseem ceeb yog tsim los ua haujlwm zoo tshaj plaws hauv cov nqaij ntawm koj nplooj ntawv cov ntsiab lus. Thaum koj xav tau lub ntsiab lus los sawv tawm, xav txog kev siv cov lus qhia - qhov loj dua, me ntsis kev xav txog cov ntsiab lus. Nco ntsoov cov ncauj lus no tsis teb los ntawm lub neej ntawd, tab sis nws muaj peev xwm los pab kom teb cov ntawv loj .
Zaub 1 |
Zaub 2 |
Zaub 3 |
Zaub 4 |
Coj
Ua ib kab lus sawv tawm los ntawm kev ntxiv .lead
.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, nws tsis yog commodo luctus.
Cov ntsiab lus hauv kab ntawv
Styling rau cov ntsiab lus hauv HTML5.
Koj tuaj yeem siv lub cim cim rautseem ceebntawv nyeem.
Cov kab ntawv no yog txhais tau tias yuav raug kho raws li cov ntawv deleted.
Cov kab ntawv no txhais tau tias yuav raug kho raws li qhov tsis raug lawm.
Cov kab ntawv no yog txhais tau tias yuav raug kho raws li qhov ntxiv rau daim ntawv.
Cov kab ntawv no yuav ua raws li hauv qab
Cov kab ntawv no yog txhais tau tias yuav tsum tau kho raws li kev luam zoo.
Cov kab no ua raws li cov ntawv sau siab.
Cov kab no ua raws li cov ntawv italicized.
.mark
thiab .small
cov chav kawm kuj tseem muaj los siv cov qauv zoo ib yam li <mark>
thiab <small>
thaum tsis txhob muaj qhov cuam tshuam tsis zoo uas cov cim npe yuav coj mus.
Thaum tsis tau qhia saum toj no, xav siv dawb <b>
thiab <i>
hauv HTML5. <b>
yog txhais tau hais tias tseem ceeb cov lus lossis kab lus yam tsis muaj qhov tseem ceeb ntxiv thaum <i>
feem ntau yog rau lub suab, cov lus qhia, thiab lwm yam.
Cov ntawv nyeem
Hloov cov ntawv sib dhos, hloov pauv, style, qhov hnyav, thiab xim nrog peb cov ntawv siv hluav taws xob thiab cov khoom siv xim .
Cov ntawv luv
Stylized siv HTML lub <abbr>
ntsiab lus rau cov ntawv luv thiab cov ntawv sau los qhia cov ntawv nthuav dav ntawm hover. Cov ntawv luv luv muaj lub ntsiab lus hauv qab thiab tau txais tus cursor pab los muab cov ntsiab lus ntxiv ntawm kev txav mus los thiab rau cov neeg siv cov cuab yeej pabcuam.
Ntxiv .initialism
rau cov ntawv luv rau me me font-loj.
attr
HTML
Blockquotes
Rau quoting blocks ntawm cov ntsiab lus los ntawm lwm qhov chaw hauv koj cov ntaub ntawv. Qhwv <blockquote class="blockquote">
ib ncig ntawm HTML raws li cov lus tsocai.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat ante.
Sau npe qhov chaw
Ntxiv <footer class="blockquote-footer">
rau kev txheeb xyuas qhov chaw. Muab lub npe ntawm qhov chaw ua haujlwm hauv <cite>
.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat ante.
Kev sib tw
Siv cov ntawv siv hluav taws xob raws li xav tau los hloov qhov sib npaug ntawm koj qhov blockquote.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat ante.
Cov npe
Tsis zoo li
Tshem tawm lub neej ntawd list-style
thiab sab laug ntawm cov npe khoom (cov me nyuam tam sim ntawd). Qhov no tsuas yog siv rau cov menyuam yaus tam sim ntawd sau cov khoom , txhais tau tias koj yuav tsum tau ntxiv cov chav kawm rau cov npe nested ib yam nkaus.
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem thiab massa
- Facilisis nyob rau hauv pretium nisl aliquet
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat ntawm
- Faucibus porta lacus fringilla vel
- Aenean zaum amet erat nunc
- Eget porttitor lorem
Hauv kab
Tshem tawm cov npe cov mos txwv thiab siv qee lub teeb margin
nrog kev sib xyaw ntawm ob chav kawm, .list-inline
thiab .list-inline-item
.
- Lorem ipsum
- Phasellus iaculis
- Nulla volutpat
Kev piav qhia daim ntawv teev kev sib raug zoo
Muab cov ntsiab lus thiab cov lus piav qhia kab rov tav los ntawm kev siv peb cov kab ke kab ke cov chav kawm ua ntej (lossis semantic mixins). Rau cov ntsiab lus ntev, koj tuaj yeem xaiv ntxiv ib .text-truncate
chav kawm los txiav cov ntawv nrog ellipsis.
- Cov npe piav qhia
- Daim ntawv teev lus piav qhia zoo meej rau kev txhais cov ntsiab lus.
- 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.
- Lub sij hawm truncated yog truncated
- Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
- Zes
-
- Nested definition list
- Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.
Teb font loj
Bootstrap v4.3 nkoj nrog cov kev xaiv los pab kom teb cov font loj, tso cai rau cov ntawv kom ntsuas ntau dua ib txwm hla cov khoom siv thiab saib qhov ntau thiab tsawg. RFS tuaj yeem qhib tau los ntawm kev hloov pauv $enable-responsive-font-sizes
Sass hloov pauv mus rau true
thiab rov ua dua Bootstrap.
Txhawm rau txhawb RFS , peb siv Sass mixin los hloov peb cov font-size
khoom qub. Teb qhov loj me ntawm font yuav muab tso ua ke rau hauv calc()
kev ua haujlwm nrog kev sib xyaw ua ke rem
thiab cov chaw saib xyuas kom ua tau raws li tus cwj pwm teb. Ntau ntxiv txog RFS thiab nws cov teeb tsa tuaj yeem pom ntawm nws qhov chaw cia GitHub .