Ederede

Akwụkwọ na ihe atụ maka ụdị edemede Bootstrap, gụnyere ntọala zuru ụwa ọnụ, isiokwu, ederede ahụ, ndepụta, na ndị ọzọ.

Na ibe a

Ntọala zuru ụwa ọnụ

Bootstrap na-esetịpụ ihe ngosi zuru ụwa ọnụ, akwụkwọ edemede na ụdị njikọ. Mgbe achọrọ njikwa ọzọ, lelee klas ịba uru ederede .

Jiri nchịkọta font nke na-ahọrọ nke kacha mma font-familymaka OS na ngwaọrụ ọ bụla.
Maka ụdị ngụkọ yana ịnweta, anyị na-eji mgbọrọgwụ ndabere nke ihe nchọgharị font-size(nke 16px) ka ndị ọbịa nwee ike hazie ndabara ihe nchọgharị ha ka ọ dị mkpa.
Jiri $font-family-base, $font-size-base, na $line-height-basenjiri mara dị ka ntọala ederede anyị etinyere na <body>.
Tọọ ụcha njikọ zuru ụwa ọnụ site na $link-color.
Jiri $body-bgka ịtọọ background-colorna <body>( #fffna ndabara).

Enwere ike ịchọta ụdị ndị a n'ime _reboot.scss, a na-akọwakwa mgbanwe mgbanwe ụwa na _variables.scss. Gbaa mbọ hụ na ịbanye $font-size-basena rem.

Isi okwu

Isi HTML niile, <h1>site na <h6>, dị.

Isi	Ọmụmaatụ
`<h1></h1>`	h1. Isiokwu bootstrap
`<h2></h2>`	h2. Isiokwu bootstrap
`<h3></h3>`	h3. Isiokwu bootstrap
`<h4></h4>`	h4. Isiokwu bootstrap
`<h5></h5>`	h5. Isiokwu bootstrap
`<h6></h6>`	h6. Isiokwu bootstrap

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

.h1A na-enwetakwa site na .h6klaasị, n'ihi na mgbe ịchọrọ ka ị dakọtara n'ụdị font nke isiokwu mana enweghị ike iji ihe HTML jikọtara ya.

h1. Isiokwu bootstrap

h2. Isiokwu bootstrap

h3. Isiokwu bootstrap

h4. Isiokwu bootstrap

h5. Isiokwu bootstrap

h6. Isiokwu bootstrap

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>

Na-ahazi isiokwu

Jiri klaasị ịba uru agbakwunyere iji megharịa obere ederede isiokwu abụọ sitere na Bootstrap 3.

Isi ihe ngosi mara mma Site na ederede sekọndrị dara ada

html

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

Gosipụta isiokwu

Emebere ihe isi okwu ọdịnala ka ọ rụọ ọrụ kacha mma na anụ nke ọdịnaya ibe gị. Mgbe ịchọrọ isi okwu iji pụta ìhè, tụlee iji isiokwu ngosi - ụdị isiokwu buru ibu, nke nwere echiche karịa.

Ngosipụta 1

Ngosipụta 2

Ngosipụta 3

Ngosipụta 4

Ngosipụta 5

Ngosipụta 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>

A na-ahazi isiokwu ngosi site na $display-font-sizesmap Sass na mgbanwe abụọ, $display-font-weightna $display-line-height.

A na-ahazi isiokwu ngosi site na mgbanwe abụọ, $display-font-familyyana $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;

Ndu

Mee ka paragraf pụta ìhè site n'ịgbakwunye .lead.

Nke a bụ paragraf ndu. Ọ pụtara na paragraf mgbe niile.

html

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

Ihe ederede inline

Ịke maka ihe HTML5 inline nkịtị.

Ị nwere ike iji mkpado akara napụta ìhèederede.

~~Ezubere ahịrị ederede a ka ewere ya dị ka ederede ehichapụ.~~

~~Ezubere ahịrị ederede a ka a na-emeso ya ka ọ bụghịzi eziokwu.~~

Ezubere ahịrị ederede a ka ewere ya dị ka mgbakwunye na akwụkwọ ahụ.

Ahịrị ederede a ga-atụgharị dị ka etinyere n'okpuru.

Ezubere ahịrị ederede a ka ewere ya dị ka ezigbo mbipụta.

Asụgharịkwara ahịrị a ka ọ bụrụ ederede siri ike.

A sụgharịrị ahịrị a ka ọ bụrụ ederede 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>

Kpachara anya na ekwesịrị iji mkpado ndị ahụ maka ebumnuche ọmụmụ:

na-anọchi anya ederede nke akara ma ọ bụ pụta ìhè maka ntụnye aka ma ọ bụ nhọpụta.
na-anọchi anya nkwupụta akụkụ na obere mbipụta, dị ka nwebisiinka na ederede iwu.
<s>na-anọchi anya ihe na-adịkwaghị mkpa ma ọ bụ na-abụghịzi eziokwu.
na-anọchi anya ogologo ederede inline nke ekwesịrị ịsụgharị ya n'ụzọ na-egosi na o nwere nkọwa ederede na-abụghị nke ederede.

Ọ bụrụ na ịchọrọ ịka ederede gị, ị ga-eji klaasị ndị a kama:

.markga-etinye otu ụdị dị ka .
.smallga-etinye otu ụdị dị ka .
.text-decoration-underlinega-etinye otu ụdị dị ka .
.text-decoration-line-throughga-etinye otu ụdị dị ka <s>.

Mgbe egosiri n'elu, nweere onwe gị iji na HTML5. bu n'obi ime ka okwu ma ọ bụ nkebiokwu pụta ìhè n'ebupụtaghị mkpa ọzọ, ebe ọ na-abụkarị maka olu, okwu teknụzụ, wdg.

Ngwa ederede

Gbanwee nhazi ederede, mgbanwe, ụdị, ịdị arọ, ogologo ahịrị, ịchọ mma na agba site na ngwa ederede na ngwa agba anyị .

Ndebiri

Mmejuputa HTML nke ahaziri <abbr>ahazi maka ndebiri na mkpọ okwu iji gosi ụdị gbasaara na hover. Mbibiri nwere akara ndabara wee nweta cursor enyemaka iji nyekwuo ọnọdụ na hover yana ndị ọrụ teknụzụ enyemaka.

Tinye .initialismna ndebiri maka obere mkpụrụedemede pere mpe.

atr

HTML

html

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

Ihe mgbochi

Maka ịhota ngọngọ nke ọdịnaya sitere na isi mmalite ọzọ n'ime akwụkwọ gị. Kechie <blockquote class="blockquote">gburugburu HTML ọ bụla dị ka ntinye akwụkwọ.

Ngụ ama ama nke ọma, dị n'ime ihe mgbochi okwute.

html

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

Ịkpọ aha isi iyi

Ụdị HTML chọrọ ka edobe njirimara blockquote na mpụga faịlụ <blockquote>. Mgbe ị na-enye njiri mara, kechie gị <blockquote>na a <figure>wee jiri ihe <figcaption>ma ọ bụ ihe mgbochi mgbochi (dịka ọmụmaatụ ) na .blockquote-footerklas. Jide n'aka na ị kechie aha ọrụ isi mmalite <cite>.

Ngụ ama ama nke ọma, dị n'ime ihe mgbochi okwute.

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>

Nhazi

Jiri ngwa ederede dị ka achọrọ iji gbanwee nhazi nke blockquote gị.

Ngụ ama ama nke ọma, dị n'ime ihe mgbochi okwute.

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>

Ngụ ama ama nke ọma, dị n'ime ihe mgbochi okwute.

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>

Ndepụta

Ekebeghị ụdị

Wepu ndabara list-stylena oke aka ekpe na ihe ndetu (naanị ụmụaka ozugbo). This only applys to instant children list things , meaning you will need to add the class for any ested lists as well.

Nke a bụ ndepụta.
Ọ na-egosi na enweghị ụdị.
N'usoro, ọ ka bụ ndepụta.
Otú ọ dị, ụdị a na-emetụta naanị ihe ụmụaka dị ozugbo.
Ndepụta ndị akwadoro:
- ụdịdị a adịghị emetụta ya
- ka ga-egosi mgbọ
- ma nwee oke aka ekpe dabara adaba
Nke a ka nwere ike ịba uru n'ọnọdụ ụfọdụ.

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>

N'ahịrị

Wepu mgbọ ndetu wee tinye ọkụ marginna ngwakọta nke klaasị abụọ, .list-inlinena .list-inline-item.

Nke a bụ ihe ndepụta.
Na nke ọzọ.
Mana egosiri ha n'ahịrị.

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>

Nhazi ndepụta nkọwa

Hazie usoro na nkọwa n'usoro site na iji klaasị eburu ụzọ kọwaa (ma ọ bụ ngwakọta semantic). Maka ogologo okwu, ị nwere ike itinye .text-truncateklas na nhọrọ iji ellipsis mechie ederede.

Ndepụta nkọwa

Ndepụta nkọwa zuru oke maka ịkọwa okwu.

Oge

Nkọwa maka okwu ahụ.

Na ụfọdụ ederede nkọwa ndị ọzọ.

Okwu ọzọ

Nkọwa a dị mkpụmkpụ, yabụ enweghị mgbakwunye paragraf ma ọ bụ ihe ọ bụla.

A na-agbajisị okwu ndị gbajiri agbaji

Nke a nwere ike ịba uru mgbe oghere siri ike. Na-agbakwụnye ellipsis na njedebe.

Akwu

Ndepụta nkọwa akwụrụ: Anụrụ m ndepụta nkọwapụta na-amasị gị. Ka m tinye ndepụta nkọwa n'ime ndepụta nkọwa gị.

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>

Ogo mkpụrụedemede na-anabata

Na Bootstrap 5, anyị akwadola nha font na-anabata ya na ndabara, na-enye ohere ka ederede wee gbasaa karịa n'ofe ngwaọrụ na nha nlele. Lee anya na ibe RFS ka ịmata ka nke a si arụ ọrụ.

Sass

Mgbanwe

Isi isiokwu nwere ụfọdụ mgbanwe raara onwe ya nye maka nha na oghere.

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

Ihe odide ederede dị iche iche kpuchie ebe a na Reboot nwekwara mgbanwe ndị raara onwe ya nye.

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

Ngwakọta

Enweghị mixins raara onwe ya nye maka typography, mana Bootstrap na-eji Responsive Font Sizing (RFS) .