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.

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-colorati lo awọn laini ọna asopọ nikan lori :hover.
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

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

<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. Ranti pe awọn akọle wọnyi ko ṣe idahun nipasẹ aiyipada, ṣugbọn o ṣee ṣe lati mu awọn iwọn fonti idahun ṣiṣẹ .

Ifihan 1

Ifihan 2

Ifihan 3

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

Asiwaju

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

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

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

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

.markati .smallawọn kilasi tun wa lati lo awọn aza kanna bi <mark>ati <small>lakoko ti o yago fun eyikeyi awọn ilolu itumọ ti aifẹ ti awọn afi yoo mu.

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

Awọn ohun elo ọrọ

Yi titete ọrọ pada, yipada, ara, iwuwo, 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

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

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

Lorukọ orisun kan

Fi kan <footer class="blockquote-footer">fun idamo awọn orisun. Fi orukọ iṣẹ orisun sinu <cite>.

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

Ẹnikan olokiki ni Akọle Orisun

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

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.

Ẹnikan olokiki ni Akọle Orisun

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

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

Ẹnikan olokiki ni Akọle Orisun

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

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.

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

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

<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

Bi ti v4.3.0, Awọn ọkọ oju omi Bootstrap pẹlu aṣayan lati mu awọn iwọn fonti idahun, gbigba ọrọ laaye lati ṣe iwọn diẹ sii nipa ti ara kọja ẹrọ ati awọn iwọn wiwo. RFS le ṣiṣẹ nipasẹ yiyipada $enable-responsive-font-sizesoniyipada Sass si trueati ṣiṣatunṣe Bootstrap.

Lati ṣe atilẹyin RFS , a lo apopọ Sass lati rọpo awọn font-sizeohun-ini deede wa. Awọn iwọn fonti idahun yoo ṣe akojọpọ sinu calc()awọn iṣẹ pẹlu apapọ remati awọn ẹya wiwo lati jẹki ihuwasi igbelo idahun. Diẹ sii nipa RFS ati iṣeto ni a le rii lori ibi ipamọ GitHub rẹ .