in English

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.

Ntawm nplooj ntawv no

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 siv qhov browser lub hauv paus pib 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-color.
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

html

<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

html

<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

Zaub 5

Zaub 6

<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>
<h1 class="display-5">Display 5</h1>
<h1 class="display-6">Display 6</h1>

Cov lus qhia tau teeb tsa los ntawm $display-font-sizesSass daim ntawv qhia thiab ob qhov sib txawv, $display-font-weightthiab $display-line-height.

Cov kab lus qhia tau customizable ntawm ob qhov sib txawv, $display-font-familythiab $display-font-style.

$display-font-sizes: (
  1: 5rem,
  2: 4.5rem,
  3: 4rem,
  4: 3.5rem,
  5: 3rem,
  6: 2.5rem
);

$display-font-family: null;
$display-font-style:  null;
$display-font-weight: 300;
$display-line-height: $headings-line-height;

Coj

Ua ib kab lus sawv tawm los ntawm kev ntxiv .lead.

Qhov no yog ib kab lus coj. Nws sawv tawm ntawm cov kab lus tsis tu ncua.

html

<p class="lead">
  This is a lead paragraph. It stands out from regular paragraphs.
</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.

html

<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>

Nco ntsoov tias cov cim npe yuav tsum tau siv rau lub hom phiaj semantic:

sawv cev rau cov ntawv uas tau cim lossis tseem ceeb rau kev siv lossis sau lub hom phiaj.
sawv cev rau sab lus thiab cov ntawv me me, xws li cov ntawv luam tawm thiab cov ntawv raug cai.
<s>sawv cev rau cov ntsiab lus uas tsis cuam tshuam los yog tsis raug lawm.
sawv cev rau ib ntu ntawm cov ntawv sau hauv kab uas yuav tsum tau muab tso rau hauv txoj hauv kev uas qhia tias nws muaj cov lus piav qhia tsis yog ntawv.

Yog tias koj xav style koj cov ntawv, koj yuav tsum siv cov chav kawm hauv qab no hloov pauv:

.markyuav siv tib yam li .
.smallyuav siv tib yam li .
.text-decoration-underlineyuav siv tib yam li .
.text-decoration-line-throughyuav siv tib yam li <s>.

Thaum tsis tau qhia saum toj no, xav siv dawb thiab hauv HTML5. yog txhais tau hais tias cov lus los yog kab lus tsis muaj qhov tseem ceeb ntxiv, thaum feem ntau yog rau lub suab, cov ntsiab lus, thiab lwm yam.

Cov ntawv nyeem

Hloov cov ntawv sib dhos, hloov pauv, style, qhov hnyav, kab-qhov siab, kho kom zoo nkauj 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

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.

Ib qho zoo-paub quotes, muaj nyob rau hauv ib lub ntsiab lus blockquote.

html

<blockquote class="blockquote">
  <p>A well-known quote, contained in a blockquote element.</p>
</blockquote>

Sau npe qhov chaw

HTML spec xav kom blockquote attribution muab tso rau sab nraum lub <blockquote>. Thaum muab cov khoom muaj nqis, qhwv koj <blockquote>hauv ib qho <figure>thiab siv ib <figcaption>lossis ib qho thaiv theem (xws li, ) nrog rau .blockquote-footerchav kawm. Nco ntsoov qhwv lub npe ntawm qhov chaw ua haujlwm <cite>thiab.

Ib qho zoo-paub quotes, muaj nyob rau hauv ib lub ntsiab lus blockquote.

html

<figure>
  <blockquote class="blockquote">
    <p>A well-known quote, contained in a blockquote element.</p>
  </blockquote>
  <figcaption class="blockquote-footer">
    Someone famous in <cite title="Source Title">Source Title</cite>
  </figcaption>
</figure>

Kev sib tw

Siv cov ntawv siv hluav taws xob raws li xav tau los hloov qhov sib npaug ntawm koj qhov blockquote.

Ib qho zoo-paub quotes, muaj nyob rau hauv ib lub ntsiab lus blockquote.

html

<figure class="text-center">
  <blockquote class="blockquote">
    <p>A well-known quote, contained in a blockquote element.</p>
  </blockquote>
  <figcaption class="blockquote-footer">
    Someone famous in <cite title="Source Title">Source Title</cite>
  </figcaption>
</figure>

Ib qho zoo-paub quotes, muaj nyob rau hauv ib lub ntsiab lus blockquote.

html

<figure class="text-end">
  <blockquote class="blockquote">
    <p>A well-known quote, contained in a blockquote element.</p>
  </blockquote>
  <figcaption class="blockquote-footer">
    Someone famous in <cite title="Source Title">Source Title</cite>
  </figcaption>
</figure>

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.

Nov yog daim ntawv teev npe.
Nws zoo nkaus li unstyled kiag li.
Structurely, nws tseem yog ib daim ntawv teev npe.
Txawm li cas los xij, qhov style no tsuas yog siv rau cov menyuam yaus tam sim ntawd.
Nested npe:
- tsis cuam tshuam los ntawm qhov style no
- tseem yuav pom ib lub mos txwv
- thiab muaj cov npoo sab laug uas tsim nyog
Qhov no tseem tuaj yeem ua tau yooj yim hauv qee qhov xwm txheej.

html

<ul class="list-unstyled">
  <li>This is a list.</li>
  <li>It appears completely unstyled.</li>
  <li>Structurally, it's still a list.</li>
  <li>However, this style only applies to immediate child elements.</li>
  <li>Nested lists:
    <ul>
      <li>are unaffected by this style</li>
      <li>will still show a bullet</li>
      <li>and have appropriate left margin</li>
    </ul>
  </li>
  <li>This may still come in handy in some situations.</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.

Nov yog ib daim ntawv teev npe.
Thiab lwm tus.
Tab sis lawv nyob nraum tso tawm inline.

html

<ul class="list-inline">
  <li class="list-inline-item">This is a list item.</li>
  <li class="list-inline-item">And another one.</li>
  <li class="list-inline-item">But they're displayed inline.</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.

Lub sij hawm

Definition rau lub sij hawm.

Thiab ib co ntxiv placeholder txhais lus.

Lwm lub sij hawm

Cov ntsiab lus no luv luv, yog li tsis muaj kab lus ntxiv lossis dab tsi.

Lub sij hawm truncated yog truncated

Qhov no tuaj yeem pab tau thaum qhov chaw nruj. Ntxiv ib qho ellipsis thaum kawg.

Zes

Nested definition list: Kuv hnov koj nyiam cov lus txhais. Cia kuv tso ib daim ntawv txhais lus hauv koj daim ntawv txhais lus.

html

<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">Term</dt>
  <dd class="col-sm-9">
    <p>Definition for the term.</p>
    <p>And some more placeholder definition text.</p>
  </dd>

  <dt class="col-sm-3">Another term</dt>
  <dd class="col-sm-9">This definition is short, so no extra paragraphs or anything.</dd>

  <dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
  <dd class="col-sm-9">This can be useful when space is tight. Adds an ellipsis at the end.</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">I heard you like definition lists. Let me put a definition list inside your definition list.</dd>
    </dl>
  </dd>
</dl>

Teb font loj

Hauv Bootstrap 5, peb tau qhib cov lus teb qhov ntau thiab tsawg los ntawm lub neej ntawd, tso cai rau cov ntawv kom ntsuas ntau dua ib txwm hla cov khoom siv thiab qhov ntau thiab tsawg. Saib ntawm RFS nplooj ntawv kom paub seb qhov no ua haujlwm li cas.

Sass

Hloov pauv

Lub taub hau muaj qee qhov sib txawv tshwj xeeb rau qhov loj thiab qhov sib txawv.

$headings-margin-bottom:      $spacer * .5;
$headings-font-family:        null;
$headings-font-style:         null;
$headings-font-weight:        500;
$headings-line-height:        1.2;
$headings-color:              null;

Lwm yam typography ntsiab nyob rau hauv no thiab nyob rau hauv Reboot kuj muaj nplooj siab variables.

$lead-font-size:              $font-size-base * 1.25;
$lead-font-weight:            300;

$small-font-size:             .875em;

$sub-sup-font-size:           .75em;

$text-muted:                  $gray-600;

$initialism-font-size:        $small-font-size;

$blockquote-margin-y:         $spacer;
$blockquote-font-size:        $font-size-base * 1.25;
$blockquote-footer-color:     $gray-600;
$blockquote-footer-font-size: $small-font-size;

$hr-margin-y:                 $spacer;
$hr-color:                    inherit;

// fusv-disable
$hr-bg-color:                 null; // Deprecated in v5.2.0
$hr-height:                   null; // Deprecated in v5.2.0
// fusv-enable

$hr-border-color:             null; // Allows for inherited colors
$hr-border-width:             $border-width;
$hr-opacity:                  .25;

$legend-margin-bottom:        .5rem;
$legend-font-size:            1.5rem;
$legend-font-weight:          null;

$dt-font-weight:              $font-weight-bold;

$list-inline-padding:         .5rem;

$mark-padding:                .1875em;
$mark-bg:                     $yellow-100;

Mixins

Tsis muaj kev sib koom ua ke rau kev sau ntawv, tab sis Bootstrap siv Cov Lus Teb Qhov Loj (RFS) .