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

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-eche na mgbọrọgwụ ndabere ihe nchọgharị font-size(nke bụ 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 $link-colorna ma tinye akara njikọ naanị na :hover.
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

<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

<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

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

Ndu

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

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor omee. Duis mollis, ọ bụghị commodo luctus.

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

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

.markna .smallklaasị dịkwa maka itinye otu ụdị dị ka <mark>yana <small>mgbe ị na-ezere mmetụta semantic ọ bụla na-achọghị nke mkpado ahụ ga-eweta.

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

Ngwa ederede

Gbanwee nhazi ederede, mgbanwe, ụdị, ịdị arọ na agba site na iji 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

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer na-emepe emepe.

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

Ịkpọ aha isi iyi

Tinye ihe <footer class="blockquote-footer">maka ịchọpụta isi mmalite. Kechie aha ọrụ isi mmalite na <cite>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer na-emepe emepe.

Onye ama ama na Isi mmalite

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

Nhazi

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer na-emepe emepe.

Onye ama ama na Isi mmalite

<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. Integer na-emepe emepe.

Onye ama ama na Isi mmalite

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

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.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem na massa
Facilisis na pretium nisl aliquet
Ngwa ngwa ngwa ngwa ngwa
- Phasellus iaculis bụ ihe dị mkpa
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat na
Faucibus Porta lacus fringilla vel
Aenean sit 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>

N'ahịrị

Wepu mgbọ ndetu wee tinye ọkụ marginna ngwakọta nke klaasị abụọ, .list-inlinena .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>

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.

Euismod

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

Achọpụtaghị m porta gravida na eget metus.

Malesuada porta

Etiam porta sem malesuada magna mollis euismod.

A na-agbajisị okwu ndị gbajiri agbaji

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

Akwu

Ndepụta nkọwa akwụrụ: 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>

Ederede na-anabata

Edemede na- anabata na-ezo aka na ederede na ihe mejupụtara ya site na ịhazigharị ihe mgbọrọgwụ font-sizen'ime usoro ajụjụ mgbasa ozi. Bootstrap anaghị eme gị nke a, mana ọ dị mfe ịgbakwunye ma ọ bụrụ na ịchọrọ ya.

Nke a bụ ọmụmaatụ ya na omume. Họrọ ajụjụ ọ bụla font-sizena ajụjụ mgbasa ozi ịchọrọ.

html {
  font-size: 1rem;
}

@include media-breakpoint-up(sm) {
  html {
    font-size: 1.2rem;
  }
}

@include media-breakpoint-up(md) {
  html {
    font-size: 1.4rem;
  }
}

@include media-breakpoint-up(lg) {
  html {
    font-size: 1.6rem;
  }
}