Source

Agbalẽtata ƒe nuŋɔŋlɔ

Nuŋlɔɖiwo kple kpɔɖeŋuwo na Bootstrap nuŋɔŋlɔ, siwo dometɔ aɖewoe nye xexeame katã ƒe ɖoɖowo, tanyawo, ŋutilã ƒe nuŋɔŋlɔwo, xexlẽdzesiwo, kple bubuwo.

Xexeame katã ƒe ɖoɖowo

Bootstrap ɖoa xexeame katã ƒe ɖeɖefia veviwo, nuŋɔŋlɔ, kple kadodo ƒe atsyãwo. Ne ehiã be woakpɔ ŋusẽ ɖe edzi geɖe wu la, ke lé ŋku ɖe nuŋɔŋlɔ ƒe viɖenu ƒe klasswo ŋu .

Zã native font stack si tia nyuitɔ kekeake font-familyna OS kple mɔ̃ ɖesiaɖe.
Ne èdi be yeakpɔ ƒomevi ƒe dzidzenu si me nusianu le eye wòate ŋu akpɔe la, míetsɔe be web-browser ƒe ke si woɖo ɖi font-size(zi geɖe la, 16px) ale be amedzrowo nate ŋu atrɔ asi le woƒe web-browser ƒe gɔmedzedze ŋu ne ehiã.
Zã $font-family-base, $font-size-base, kple $line-height-basenɔnɔmewo abe míaƒe agbalẽtata ƒe gɔmeɖoanyi si wozã ɖe <body>.
Ðo xexeame katã ƒe kadodo ƒe amadede to $link-coloreye nàwɔ kadodo ƒe fliwo ŋudɔ le :hover.
Zãe nàtsɔ $body-bgaɖo a background-colorɖe <body>( #fffle gɔmedzedzea me).

Woateŋu akpɔ atsyã siawo le _reboot.scss, eye woɖe xexeame katã ƒe tɔtrɔwo gɔme le _variables.scss. Kpɔ egbɔ be yeɖoe $font-size-baseɖe rem.

Tanyawo

HTML tanyawo katã, <h1>to <h6>, dzi la li.

Tanya ƒe tanya	Kpɔɖeŋu
`<h1></h1>`	h1. Bootstrap ƒe tanya
`<h2></h2>`	h2. Bootstrap ƒe tanya
`<h3></h3>`	h3. Bootstrap ƒe tanya
`<h4></h4>`	h4. Bootstrap ƒe tanya
`<h5></h5>`	h5. Bootstrap ƒe tanya
`<h6></h6>`	h6. Bootstrap ƒe tanya

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

.h1to .h6klasswo hã li, na ne èdi be yeawɔ ɖeka kple tanya aɖe ƒe nuŋɔŋlɔ ƒe nɔnɔme gake màte ŋu azã HTML ƒe akpa si do ƒome kplii o.

h1. Bootstrap ƒe tanya

h2. Bootstrap ƒe tanya

h3. Bootstrap ƒe tanya

h4. Bootstrap ƒe tanya

h5. Bootstrap ƒe tanya

h6. Bootstrap ƒe tanya

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

Tanyawo ƒe tɔtrɔ ɖe nɔnɔmewo ŋu

Zã dɔwɔnu ƒe klass siwo le eme nàtsɔ agbugbɔ awɔ tanya sue evelia ƒe nuŋɔŋlɔ tso Bootstrap 3 me.

Fancy display heading Kple nuŋɔŋlɔ evelia si fa

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

Fia tanyawo

Wotrɔ asi le tanya ƒe akpa deŋgɔwo ŋu be woawɔ dɔ nyuie wu le wò axaa me nyawo ƒe lã me. Ne èhiã tanya aɖe be wòato vovo la, bu tanya si woɖena fiana zazã ŋu —tanya ƒe atsyã si lolo wu, si me amewo ƒe susu le vie wu.

Ðeɖefia 1

Ðeɖefia 2 lia

Ðeɖefia 3 lia

Ðeɖefia 4 lia

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

Nɔ ŋgɔ

Na memamã aɖe nato vovo to .lead.

Vivamus sagittis lacus vel augue laoreet lãgbalẽgolo si wotsɔna dzraa nu. Duis mollis, est si menye nusiwo wodzrana o.

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

Nuŋɔŋlɔ ƒe akpa siwo le fli me

Atsyã na HTML5 ƒe akpa siwo bɔ ɖe fli me.

Àte ŋu azã dzesi ƒe dzesi la atsɔnyatinuŋɔɖi.

~~Woɖoe be woabu nuŋɔŋlɔ ƒe fli sia abe nuŋɔŋlɔ si woɖe ɖa ene.~~

~~Woɖoe be woabu nuŋɔŋlɔa ƒe fli sia be megade pɛpɛpɛ o.~~

Woɖoe be woabu nuŋɔŋlɔ ƒe fli sia be enye nusi wotsɔ kpe ɖe nuŋlɔɖia ŋu.

Nuŋɔŋlɔ ƒe fli sia aɖe egɔme abe alesi woɖe fli ɖe ete ene

Woɖoe be woabu nuŋɔŋlɔa ƒe fli sia be enye nuŋɔŋlɔ nyuiwo.

Woɖe fli sia gɔme abe nuŋɔŋlɔ si le ɣie ene.

Woɖe fli sia gɔme abe nuŋɔŋlɔ si wotsɔ nuŋɔŋlɔ si me woŋlɔ nu ɖo ene.

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

.markeye .smallklasswo hã li be woawɔ atsyã mawo ke ŋudɔ <mark>kple <small>esime wole asa ƒom na gɔmesese ƒe gɔmesese ɖesiaɖe si womedi o si tags la ahe vɛ.

Togbɔ be womeɖee fia le etame o hã la, zãe faa <b>eye nàzãe <i>le HTML5 me. <b>woɖoe be wòate gbe ɖe nyawo alo nyagbewo dzi evɔ maɖe vevienyenye bubu aɖeke afia o esime <i>wònye gbe, mɔ̃ɖaŋunyawo, kple bubuawo tɔ koŋ.

Nuŋɔŋlɔ ƒe dɔwɔnuwo

Trɔ nuŋɔŋlɔ ƒe ɖoɖowɔwɔ, trɔ asi le eŋu, atsyã, kpekpeme, kple amadede kple míaƒe nuŋɔŋlɔ ƒe dɔwɔnuwo kple amadede ƒe dɔwɔnuwo .

Kpuienyawo

Stylized dɔwɔwɔ HTML ƒe <abbr>element na kpukpuiwo kple kpukpuiwo be woaɖe kekeɖenudɔwɔwɔ afia le hover. Kpuiewo ƒe fli teti gbãtɔ eye woxɔa kpekpeɖeŋu ƒe dzesi be woana nya siwo ƒo xlãe bubuwo le hover kple kpekpeɖeŋu mɔ̃ɖaŋunuwo zãlawo.

Tsɔ kpe .initialismɖe kpukpui aɖe ŋu hena ŋɔŋlɔdzesi ƒe lolome si le sue vie.

attr

HTML ƒe nuŋɔŋlɔ

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

Blockquotes ƒe nyawo

Le nyatakaka siwo ƒe akpa aɖewo yɔ tso teƒe bubu le wò nuŋlɔɖia me ta. Kpe HTML<blockquote class="blockquote"> ɖesiaɖe ɖe edzi abe nyayɔyɔa ene.

Lorem ipsum dolor bɔbɔ nɔ amet, consectetur adipiscing elit. Xexlẽdzesi blibo 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>

Ŋkɔ na dzɔtsoƒe aɖe

Tsɔ a kpe ɖe eŋu <footer class="blockquote-footer">hena dzesidede afisi wòtso. Kpe dzɔtsoƒedɔa ƒe ŋkɔ ɖe <cite>.

Lorem ipsum dolor bɔbɔ nɔ amet, consectetur adipiscing elit. Xexlẽdzesi blibo posuere erat a ante.

Ame aɖe si xɔ ŋkɔ le Source Title me

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

Ðoɖowɔwɔ ɖe ɖoɖo nu

Zã nuŋɔŋlɔ ƒe dɔwɔnuwo alesi wòhiãe nàtsɔ atrɔ wò blockquote ƒe ɖoɖowɔwɔ.

Lorem ipsum dolor bɔbɔ nɔ amet, consectetur adipiscing elit. Xexlẽdzesi blibo posuere erat a ante.

Ame aɖe si xɔ ŋkɔ le Source Title me

<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 bɔbɔ nɔ amet, consectetur adipiscing elit. Xexlẽdzesi blibo posuere erat a ante.

Ame aɖe si xɔ ŋkɔ le Source Title me

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

Ŋlɔ ŋkɔwo

Womewɔ atsyã aɖeke o

Ɖe axa si woɖo ɖi list-stylekple miame le nusiwo woŋlɔ ɖi la dzi (ɖeviwo enumake ɖeɖeko). This only applies to immediate children list items , si fia be ahiã be nàtsɔ klass la akpe ɖe xexlẽdzesi ɖesiaɖe si wotsɔ ƒo ƒui hã ŋu.

Lorem ipsum dolor nɔ anyi amet
Consectetur ami ƒe ʋeʋẽ lilili
Xexlẽdzesi blibo molestie lorem le massa
Facilisis le pretium nisl ƒe lãgbalẽ me
Nulla volutpat ƒe lãgbalẽgolo
- Ƒumelã si woyɔna be iaculis neque
- Purus sodales ƒe ʋeʋẽ lililiwo
- Vestibulum laoreet ƒe agbatsɔla sem
- Ac tristique libero ƒe ʋuʋu le
Faucibus porta lacus ƒe lãgbalẽgolo si woyɔna be fringilla vel
Aenean bɔbɔ nɔ anyi amet erat nunc
Eget porttitor ƒe nyagbɔgblɔ

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

Le fli me

Ðe tu siwo le xexlẽdzesi aɖe me ɖa eye nàtsɔ marginklass eve ƒokpli ade kekeli aɖewo me, .list-inlineeye .list-inline-item.

Lorem ƒe ipsum
Phasellus ƒe lãgbalẽgolo si woyɔna be iaculis
Nulla volutpat ƒe nyawo

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

Numeɖeɖe ƒe xexlẽdzesiwo ƒe ɖoɖowɔwɔ

Ðo nyawo kple nuŋlɔɖiwo ɖe ɖoɖo nu le tsia dzi to míaƒe grid system ƒe klass siwo woɖo ɖi do ŋgɔ (alo gɔmesese ƒe mixins) zazã me. Ne èdi be yeagblɔ nya didiwo la, àte ŋu atsɔ .text-truncateklass aɖe akpe ɖe eŋu ne èdi be yeatsɔ ellipsis atso nuŋɔŋlɔa me.

Numeɖeɖewo ƒe xexlẽdzesiwo

Numeɖeɖe ƒe xexlẽdzesi sɔ nyuie na nyawo gɔmeɖeɖe.

Euismod ƒe nyawo

Vestibulum id ligula porta felis euismod ƒe ƒunukpeƒe ƒe ƒunukpeƒetetedɔ.

Donec id elit non mi porta gravida le eget metus me.

Malesuada ƒe lãgbalẽ

Etiam porta sem malesuada gã aɖe si woyɔna be euismod.

Wotso nya si wotso la me

Fusce dapibus, tellus ac cursus commodo, tortor mauris ƒomevi aɖe si wotsɔ ƒoa ƒui, ut lãmi si wotsɔna ƒoa ƒui justo sit amet risus.

Atɔwɔwɔ

Nested gɔmeɖeɖe ƒe xexlẽdzesi: Aenean posuere, tortor sed fiƒode feugiat, nyɔnu saɖaganunɔla augue blandit nyɔnuvi.

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

Agbalẽtata si ɖoa nya ŋu

Responsive typography fia nuŋɔŋlɔ kple akpawo ƒe dzidzedze to asitɔtrɔ le root element's font-sizeŋu le media biabia siwo kplɔ wo nɔewo ɖo me ko me. Bootstrap mewɔa esia na wò o, gake ele bɔbɔe ŋutɔ be nàtsɔe akpe ɖe eŋu ne èhiãe.

Eƒe kpɔɖeŋu aɖee nye esi le nuwɔna me. Tia font-sizes kple nyadzɔdzɔgblɔmɔnuwo ƒe nyabiase ɖesiaɖe si nèdi.

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