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 iwọn iru iraye si, a ro pe gbongbo aiyipada ẹrọ font-sizeaṣawakiri (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.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est ti kii commodo luctus.

<p class="lead">
  Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
</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ọ.

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

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

Lorukọ orisun kan

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

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

Ẹnikan olokiki ni Akọle Orisun

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

Titete

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

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

Ẹnikan olokiki ni Akọle Orisun

<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. Odidi posuere erat a ante.

Ẹnikan olokiki ni Akọle Orisun

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

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.

Lorem ipsum dolor joko amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis ni pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat ni
Faucibus porta lacus fringilla vel
Aenean joko 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>

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.

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>

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.

Euismod

Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.

Donec id elit ti kii mi porta gravida ati eget metus.

Malesuada porta

Etiam porta sem malesuada magna mollis euismod.

Oro ti a ti ge ni ge

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Itẹle

Itẹle definition akojọ: 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>

Awọn iwọn font idahun

Awọn ọkọ oju omi Bootstrap v4.3 pẹlu aṣayan lati jẹki 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ẹ .