Source

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-familyrau 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-basecov cwj pwm raws li peb lub hauv paus typographic siv rau <body>.
  • Teem lub ntiaj teb txuas xim ntawm $link-colorthiab siv qhov txuas hauv qab tsuas yog rau :hover.
  • Siv $body-bglos teeb tsa background-colorrau ntawm <body>( #ffflos 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-baserau hauv rem.

Cov ntsiab lus

Tag nrho cov ntsiab lus HTML, <h1>dhau los <h6>, muaj.

Lub taub hau Piv txwv

<h1></h1>

 h 1. Bootstrap taub hau

<h2></h2>

 h 2. Bootstrap taub hau

<h3></h3>

 h 3. Bootstrap taub hau

<h4></h4>

 h 4. Bootstrap taub hau

<h5></h5>

 h 5. Bootstrap taub hau

<h6></h6>

 h 6. Bootstrap taub hau 
<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>

.h1los ntawm .h6cov 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

<p class="h1">h1. Bootstrap heading</p>
<p class="h2">h2. Bootstrap heading</p>
<p class="h3">h3. Bootstrap heading</p>
<p class="h4">h4. Bootstrap heading</p>
<p class="h5">h5. Bootstrap heading</p>
<p class="h6">h6. Bootstrap heading</p>

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 
<h3>
  Fancy display heading
  <small class="text-muted">With faded secondary text</small>
</h3>

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.

Zaub 1
Zaub 2
Zaub 3
Zaub 4 
<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>

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.

<p class="lead">
  Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
</p>

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.

<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><u>This line of text will render as underlined</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>

.markthiab .smallcov 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 .initialismrau cov ntawv luv rau me me font-loj.

attr

HTML

<p><abbr title="attribute">attr</abbr></p>
<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>

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.

<blockquote class="blockquote">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

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.

Ib tug neeg nto moo nyob rau hauv Lub Npe Lub Npe 
<blockquote class="blockquote">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

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.

Ib tug neeg nto moo nyob rau hauv Lub Npe Lub Npe 
<blockquote class="blockquote text-center">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat ante.

Ib tug neeg nto moo nyob rau hauv Lub Npe Lub Npe 
<blockquote class="blockquote text-right">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

Cov npe

Tsis zoo li

Tshem tawm lub neej ntawd list-stylethiab 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
<ul class="list-unstyled">
  <li>Lorem ipsum dolor sit amet</li>
  <li>Consectetur adipiscing elit</li>
  <li>Integer molestie lorem at massa</li>
  <li>Facilisis in pretium nisl aliquet</li>
  <li>Nulla volutpat aliquam velit
    <ul>
      <li>Phasellus iaculis neque</li>
      <li>Purus sodales ultricies</li>
      <li>Vestibulum laoreet porttitor sem</li>
      <li>Ac tristique libero volutpat at</li>
    </ul>
  </li>
  <li>Faucibus porta lacus fringilla vel</li>
  <li>Aenean sit amet erat nunc</li>
  <li>Eget porttitor lorem</li>
</ul>

Hauv kab

Tshem tawm cov npe cov mos txwv thiab siv qee lub teeb marginnrog kev sib xyaw ntawm ob chav kawm, .list-inlinethiab .list-inline-item.

  • Lorem ipsum
  • Phasellus iaculis
  • Nulla volutpat
<ul class="list-inline">
  <li class="list-inline-item">Lorem ipsum</li>
  <li class="list-inline-item">Phasellus iaculis</li>
  <li class="list-inline-item">Nulla volutpat</li>
</ul>

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-truncatechav 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. 
<dl class="row">
  <dt class="col-sm-3">Description lists</dt>
  <dd class="col-sm-9">A description list is perfect for defining terms.</dd>

  <dt class="col-sm-3">Euismod</dt>
  <dd class="col-sm-9">
    <p>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</p>
    <p>Donec id elit non mi porta gravida at eget metus.</p>
  </dd>

  <dt class="col-sm-3">Malesuada porta</dt>
  <dd class="col-sm-9">Etiam porta sem malesuada magna mollis euismod.</dd>

  <dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
  <dd class="col-sm-9">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>

  <dt class="col-sm-3">Nesting</dt>
  <dd class="col-sm-9">
    <dl class="row">
      <dt class="col-sm-4">Nested definition list</dt>
      <dd class="col-sm-8">Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.</dd>
    </dl>
  </dd>
</dl>

Teb typography

Teb typography yog hais txog scaling cov ntawv thiab cov khoom los ntawm tsuas yog kho lub hauv paus ntsiab lus font-sizenyob rau hauv ib tug series ntawm xov xwm queries. Bootstrap tsis ua qhov no rau koj, tab sis nws yooj yim haum rau ntxiv yog tias koj xav tau.

Nov yog ib qho piv txwv ntawm nws hauv kev xyaum. Xaiv yam twg font-sizethiab cov lus nug xov xwm uas koj xav tau.

html {
  font-size: 1rem;
}

@include media-breakpoint-up(sm) {
  html {
    font-size: 1.2rem;
  }
}

@include media-breakpoint-up(md) {
  html {
    font-size: 1.4rem;
  }
}

@include media-breakpoint-up(lg) {
  html {
    font-size: 1.6rem;
  }
}