Iwe kikọ

Iwe ati awọn apẹẹrẹ fun Bootstrap typography, pẹlu awọn eto agbaye, awọn akọle, ọrọ ara, awọn atokọ, ati diẹ sii.

Lori iwe yi

Eto agbaye

Bootstrap ṣeto ifihan ipilẹ agbaye, iwe kikọ, ati awọn ọna ọna asopọ. Nigbati o ba nilo iṣakoso diẹ sii, ṣayẹwo awọn kilasi IwUlO ọrọ .

Lo akopọ fonti abinibi ti o yan ohun ti o dara julọ font-familyfun OS ati ẹrọ kọọkan.
Fun isunmọ diẹ sii ati iraye si iru iwọn, a lo gbongbo aiyipada font-sizeẹrọ aṣawakiri naa (ni deede 16px) ki awọn alejo le ṣe akanṣe awọn aṣiṣe aṣawakiri wọn bi o ti nilo.
Lo $font-family-base, $font-size-base, ati $line-height-baseawọn abuda bi ipilẹ iwe-kikọ wa ti a lo si <body>.
Ṣeto awọ ọna asopọ agbaye nipasẹ $link-color.
Lo $body-bglati ṣeto background-colorlori <body>( #fffnipasẹ aiyipada).

Awọn aṣa wọnyi le wa laarin _reboot.scss, ati awọn oniyipada agbaye ni asọye ni _variables.scss. Rii daju lati ṣeto $font-size-basesinu rem.

Awọn akọle

Gbogbo awọn akọle HTML, <h1>nipasẹ <h6>, wa.

Akori	Apeere
`<h1></h1>`	h1. Bootstrap akori
`<h2></h2>`	h2. Bootstrap akori
`<h3></h3>`	h3. Bootstrap akori
`<h4></h4>`	h4. Bootstrap akori
`<h5></h5>`	h5. Bootstrap akori
`<h6></h6>`	h6. Bootstrap akori

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

.h1nipasẹ .h6awọn kilasi tun wa, fun nigba ti o ba fẹ lati baramu awọn font iselona ti a akọle sugbon ko le lo awọn nkan HTML ano.

h1. Bootstrap akori

h2. Bootstrap akori

h3. Bootstrap akori

h4. Bootstrap akori

h5. Bootstrap akori

h6. Bootstrap akori

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>

Isọdi awọn akọle

Lo awọn kilasi IwUlO to wa lati tun ọrọ akọle Atẹle kekere ṣe lati Bootstrap 3.

Akọle ifihan Fancy Pẹlu ọrọ Atẹle ti o parẹ

html

<h3>
  Fancy display heading
  <small class="text-muted">With faded secondary text</small>
</h3>

Ifihan awọn akọle

Awọn eroja akọle aṣa jẹ apẹrẹ lati ṣiṣẹ dara julọ ninu ẹran ti akoonu oju-iwe rẹ. Nigbati o ba nilo akọle lati duro jade, ronu nipa lilo akọle ifihan kan ti o tobi, ara akọle ti o ni imọran diẹ sii.

Ifihan 1

Ifihan 2

Ifihan 3

Ifihan 4

Ifihan 5

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

Awọn akọle ifihan jẹ tunto nipasẹ $display-font-sizesmaapu Sass ati awọn oniyipada meji, $display-font-weightati $display-line-height.

Awọn akọle ifihan jẹ asefara nipasẹ awọn oniyipada meji, $display-font-familyati $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;

Asiwaju

Ṣe paragira kan duro jade nipa fifi kun .lead.

Eleyi jẹ a asiwaju ìpínrọ. O duro jade lati deede ìpínrọ.

html

<p class="lead">
  This is a lead paragraph. It stands out from regular paragraphs.
</p>

Awọn eroja ọrọ inu

Iselona fun awọn eroja HTML5 opopo ti o wọpọ.

O le lo aami aami sisaamiọrọ.

~~Laini ọrọ yii jẹ itumọ lati ṣe itọju bi ọrọ paarẹ.~~

~~Laini ọrọ yii jẹ itumọ lati ṣe itọju bi ko ṣe deede mọ.~~

Laini ọrọ yii jẹ itumọ lati ṣe itọju bi afikun si iwe-ipamọ naa.

Laini ọrọ yii yoo ṣe bi a ti ṣe abẹlẹ.

Laini ọrọ yii jẹ itumọ lati ṣe itọju bi titẹjade itanran.

Laini yii ṣe bi ọrọ igboya.

Laini yii ṣe bi ọrọ 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>

Ṣọra pe awọn afi wọnyẹn yẹ ki o lo fun idi itumọ:

duro ọrọ ti o jẹ samisi tabi afihan fun itọkasi tabi awọn idi akiyesi.
duro awọn asọye ẹgbẹ ati titẹ kekere, bii aṣẹ-lori ati ọrọ ofin.
<s>duro fun eroja ti ko wulo tabi ko ṣe deede.
duro fun igba kan ti ọrọ laini eyiti o yẹ ki o ṣe ni ọna ti o tọkasi pe o ni asọye ti kii ṣe ọrọ.

Ti o ba fẹ ṣe ara ọrọ rẹ, o yẹ ki o lo awọn kilasi wọnyi dipo:

.markyoo lo awọn aṣa kanna bi .
.smallyoo lo awọn aṣa kanna bi .
.text-decoration-underlineyoo lo awọn aṣa kanna bi .
.text-decoration-line-throughyoo lo awọn aṣa kanna bi <s>.

Lakoko ti ko ṣe afihan loke, lero ọfẹ lati lo ati ni HTML5. Itumọ lati ṣe afihan awọn ọrọ tabi awọn gbolohun ọrọ laisi sisọ pataki pataki, lakoko ti o jẹ pupọ julọ fun ohun, awọn ọrọ imọ-ẹrọ, ati bẹbẹ lọ.

Awọn ohun elo ọrọ

Yi titete ọrọ pada, yipada, ara, iwuwo, ila-giga, ọṣọ ati awọ pẹlu awọn ohun elo ọrọ wa ati awọn ohun elo awọ .

Awọn kukuru

Imuse aṣa ti ẹya HTML <abbr>fun awọn kuru ati awọn adape lati ṣafihan ẹya ti o gbooro lori rababa. Awọn kuru ni labẹ aifọwọyi ati gba kọsọ iranlọwọ lati pese aaye afikun lori rababa ati si awọn olumulo ti awọn imọ-ẹrọ iranlọwọ.

Ṣafikun .initialismsi abbreviation fun iwọn fonti kekere diẹ.

attr

HTML

html

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

Blockquotes

Fun sisọ awọn bulọọki akoonu lati orisun miiran laarin iwe rẹ. Fi ipari si <blockquote class="blockquote">eyikeyi HTML bi agbasọ.

Ọrọ agbasọ ti a mọ daradara, ti o wa ninu nkan blockquote kan.

html

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

Lorukọ orisun kan

Awọn HTML spec nbeere wipe blockquote ikalara wa ni gbe ita awọn <blockquote>. Nigbati o ba n pese ikalara, fi ipari si rẹ <blockquote>ki <figure>o lo <figcaption>ipin ipele kan tabi bulọki (fun apẹẹrẹ, ) pẹlu .blockquote-footerkilasi naa. Rii daju lati fi ipari si orukọ iṣẹ orisun naa <cite>daradara.

Ọrọ agbasọ ti a mọ daradara, ti o wa ninu nkan blockquote kan.

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>

Titete

Lo awọn ohun elo ọrọ bi o ṣe nilo lati yi titete ti blockquote rẹ pada.

Ọrọ agbasọ ti a mọ daradara, ti o wa ninu nkan blockquote kan.

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>

Ọrọ agbasọ ti a mọ daradara, ti o wa ninu nkan blockquote kan.

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>

Awọn akojọ

Ti ko ni aṣa

Yọ aiyipada list-styleati ala osi lori awọn ohun akojọ (awọn ọmọde lẹsẹkẹsẹ nikan). Eleyi nikan kan si awọn ọmọ lẹsẹkẹsẹ akojọ awọn ohun , afipamo pe o yoo nilo lati fi awọn kilasi fun eyikeyi itẹ-ẹiyẹ awọn akojọ bi daradara.

Eyi jẹ atokọ kan.
O han patapata unstyled.
Ni igbekalẹ, o tun jẹ atokọ kan.
Sibẹsibẹ, aṣa yii kan si awọn eroja ọmọde lẹsẹkẹsẹ.
Awọn atokọ ti o ni itẹlọrun:
- ko ni ipa nipasẹ aṣa yii
- yoo tun fi ọta ibọn han
- ati ni ala osi ti o yẹ
Eyi le tun wa ni ọwọ ni diẹ ninu awọn ipo.

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>

Ni tito

Yọ awọn ọta ibọn atokọ kuro ki o lo diẹ ninu ina marginpẹlu apapo awọn kilasi meji, .list-inlineati .list-inline-item.

Eyi jẹ nkan akojọ kan.
Ati ọkan miiran.
Ṣugbọn wọn ṣe afihan laini.

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>

Titete akojọ apejuwe

Sopọ awọn ofin ati awọn apejuwe ni ita nipasẹ lilo awọn kilasi ti a ti yan tẹlẹ (tabi awọn alapọpo atunmọ). Fun awọn ọrọ to gun, o le ni aṣayan lati ṣafikun .text-truncatekilasi kan lati ge ọrọ naa pẹlu ellipsis.

Awọn akojọ apejuwe

Akojọ apejuwe jẹ pipe fun asọye awọn ofin.

Igba

Definition fun oro.

Ati ọrọ asọye aaye diẹ sii.

Igba miiran

Itumọ yii jẹ kukuru, nitorinaa ko si awọn paragira afikun tabi ohunkohun.

Oro ti a ti ge ni ge

Eyi le wulo nigbati aaye ba ṣoki. Ṣe afikun ellipsis ni ipari.

Itẹle

Itẹle definition akojọ: Mo gbọ pe o fẹran awọn atokọ asọye. Jẹ ki n fi atokọ asọye sinu atokọ asọye rẹ.

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>

Awọn iwọn font idahun

Ni Bootstrap 5, a ti mu awọn iwọn fonti idahun ṣiṣẹ nipasẹ aiyipada, gbigba ọrọ laaye lati ṣe iwọn diẹ sii nipa ti ara kọja ẹrọ ati awọn iwọn wiwo. Wo oju- iwe RFS lati wa bii eyi ṣe n ṣiṣẹ.

Sass

Awọn oniyipada

Awọn akọle ni diẹ ninu awọn oniyipada iyasọtọ fun titobi ati aye.

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

Oriṣiriṣi awọn eroja kikọ ti a bo nibi ati ni Atunbere tun ni awọn oniyipada iyasọtọ.

$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

Ko si awọn alapọpọ iyasọtọ fun iwe kikọ, ṣugbọn Bootstrap nlo Iwọn Font Responsive Font (RFS) .