in English

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

  • 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 age ɖe eme la, míezãa web-browser la ƒe root si woɖo ɖi font-size(zi geɖe la, 16px) ale be amedzrowo nate ŋu atrɔ asi le woƒe web-browser ƒe nɔnɔme gbãtɔwo ŋu ne ehiã.
  • $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. Nenɔ susu me na wò be tanya siawo mewɔa dɔ le gɔmedzedzea me o, gake anya wɔ be nàna ŋɔŋlɔdzesiwo ƒe lolome siwo ɖoa nya ŋu nawɔ dɔ .

Ð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 memama aɖe nato vovo to .lead.

Esia nye memama gbãtɔ. Eto vovo tso memamã siwo wozãna edziedzi gbɔ.

<p class="lead">
  This is a lead paragraph. It stands out from regular paragraphs.
</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ɔ dzẽ 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.

Nyayɔyɔ nyanyɛ aɖe, si le blockquote ƒe akpa aɖe me.

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

Nyayɔyɔ nyanyɛ aɖe, si le blockquote ƒe akpa aɖe me.

Ame aɖe si xɔ ŋkɔ le Source Title me
<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>

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

Nyayɔyɔ nyanyɛ aɖe, si le blockquote ƒe akpa aɖe me.

Ame aɖe si xɔ ŋkɔ le Source Title me
<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>

Nyayɔyɔ nyanyɛ aɖe, si le blockquote ƒe akpa aɖe me.

Ame aɖe si xɔ ŋkɔ le Source Title me
<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>

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

  • Esia nye xexlẽdzesiwo.
  • Edze abe womewɔ eƒe atsyã aɖeke kura o ene.
  • Le ɖoɖo nu la, egakpɔtɔ nye xexlẽdzesiwo.
  • Gake ɖevi ƒe akpa siwo le enumake ko ŋue atsyã sia ku ɖo.
  • Ŋkɔwo ƒe xexlẽdzesi siwo wotsɔ ƒo ƒui:
    • atsyã sia mekpɔa ŋusẽ ɖe wo dzi o
    • agaɖe tu aɖe afia kokoko
    • eye miame ƒe akpa si sɔ nanɔ wo si
  • Esia ate ŋu aɖe vi kokoko le nɔnɔme aɖewo me.
<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>

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.

  • Esia nye nusi woŋlɔ ɖe xexlẽdzesiwo me.
  • Eye bubu hã.
  • Gake woɖea wo fiana le fli me.
<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>

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

Gɔmeɖeɖe na nya la.

Eye teƒe bubu aɖewo gɔmeɖeɖe nuŋɔŋlɔ.

Nya bubu aɖe hã
Gɔmesese sia le kpuie, eyata memamã bubuwo alo naneke meli o.
Wotso nya si wotso la me
Esia ate ŋu aɖe vi ne teƒea mesɔ gbɔ o. Etsɔa ellipsis kpena ɖe eŋu le eƒe nuwuwu.
Atɔwɔwɔ
Nested gɔmeɖeɖe ƒe xexlẽdzesi
Mese be mielɔ̃ gɔmesese ƒe xexlẽdzesiwo. Mina matsɔ gɔmesese ƒe xexlẽdzesi ade wò gɔmesese ƒe xexlẽdzesi me.
<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>

Ŋɔŋlɔdzesiwo ƒe lolome siwo ɖoa nya ŋu

Tso v4.3.0 dzi la, Bootstrap ɖoa amewo kple tiatia be wòana ŋɔŋlɔdzesi ƒe lolome siwo ɖoa nya ŋu nawɔ dɔ, si ana nuŋɔŋlɔwo nadzi ɖe edzi le dzɔdzɔme nu wu le mɔ̃a kple nukpɔkpɔ ƒe lolomewo me. Woateŋu awɔ RFS ŋudɔ to tɔtrɔ ɖe $enable-responsive-font-sizesSass tɔtrɔ ɖe trueBootstrap ŋu kple egbugbɔgaƒo ƒu me.

Be míado alɔ RFS la, míezãa Sass mixin tsɔ ɖɔlia míaƒe nɔnɔme siwo sɔ font-sizela. Woaƒo ŋɔŋlɔdzesi ƒe lolome siwo ɖoa nya ŋu nu ƒu ɖe calc()dɔwɔwɔwo me kple nukpɔkpɔ ƒe akpawo ƒe tsakatsaka rembe wòana dzidzedzekpɔkpɔ ƒe nuwɔna si ɖoa nya ŋu nawɔ dɔ. Àteŋu akpɔ nu geɖe tso RFS kple eƒe ɖoɖowo ŋu le eƒe GitHub nudzraɖoƒe .