Na lowdown le Bootstrap ƒe xɔtuɖoɖowo ƒe akpa veviwo ŋu, si me míaƒe mɔnu si míezãna tsɔ wɔa nyatakakadzraɖoƒe ƒe ŋgɔyiyi nyuie wu, kabakaba wu, si sesẽ wu hã le.

HTML5 ƒe nuŋlɔɖi ƒe ƒomevi

Bootstrap wɔa HTML ƒe akpa aɖewo kple CSS ƒe nɔnɔme siwo hiã be woazã HTML5 doctype la ŋudɔ. Dee wò dɔwo katã ƒe gɔmedzedze.

<!DOCTYPE html>
<html lang="en">
  ...
</html>

Asitelefon dzi gbã

Le Bootstrap 2 me la, míetsɔ asitelefon xɔlɔ̃wɔwɔ ƒe atsyã siwo woate ŋu atia la kpe ɖe eŋu na ɖoɖoa ƒe akpa veviwo. Le Bootstrap 3 me la, míegbugbɔ ŋlɔ dɔa be wòanye asitelefon xɔlɔ̃wɔwɔ tso gɔmedzedzea me ke. Le esi teƒe be woatsɔ asitelefon ƒe atsyã siwo woate ŋu atia la akpe ɖe wo ŋu la, woɖaa wo ɖe nu veviawo me tututu. Le nyateƒe me la, Bootstrap nye asitelefon gbãtɔ . Woate ŋu akpɔ asitelefon dzi atsyã gbãtɔwo le agbalẽdzraɖoƒe bliboa katã tsɔ wu be woakpɔ wo le faɛl vovovowo me.

Be nàkpɔ egbɔ be yeɖe egɔme nyuie eye yeaka asi nu ŋu la, tsɔ viewport meta tag la kpe ɖe wò <head>.

<meta name="viewport" content="width=device-width, initial-scale=1">

Àte ŋu awɔ zooming ƒe ŋutetewo ŋudɔ le asitelefonwo dzi to etsɔtsɔ kpe user-scalable=noɖe viewport meta tag la ŋu. Esia wɔnɛ be woate ŋu aʋu nu geɖe o, si fia be wò nyatakakadzraɖoƒea nase le eɖokui me vie abe dɔwɔnu si wowɔ le wo ɖokui si ene. Le nusianu me la, míekafu esia le nyatakakadzraɖoƒe ɖesiaɖe o, eyata kpɔ nyuie!

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

Agbalẽtata kple kadodowo

Bootstrap ɖoa xexeame katã ƒe ɖeɖefia veviwo, nuŋɔŋlɔ, kple kadodo ƒe atsyãwo. Etɔxɛe la, mí:

Ðo background-color: #fff;ɖe...body
Zã @font-family-base, @font-size-base, kple @line-height-basenɔnɔmewo abe míaƒe agbalẽtata ƒe gɔmeɖoanyi ene
Ðo xexeame katã ƒe kadodo ƒe amadede to @link-coloreye nàwɔ kadodo ƒe tete ɖe edzi ko dzi:hover

Woate ŋu akpɔ atsyã siawo le scaffolding.less.

Wɔ ɖoɖo ɖe ɖoɖo nu.css

Be míana cross-browser gɔmeɖeɖe nanyo ɖe edzi la, míezãa Normalize.css , si nye dɔ aɖe si Nicolas Gallagher kple Jonathan Neal wɔ .

Nugoewo me

Bootstrap hiã na nusi me nu le be woatsɔ abla nyatakakadzraɖoƒea me nyawo eye woatsɔ míaƒe grid ɖoɖoa ade eme. Àte ŋu atia nugoe eve siwo nàzã le wò dɔwo me la dometɔ ɖeka. De dzesii be, le paddingkple bubuwo ta la, nugoe eveawo dometɔ aɖeke mele atɔ me o.

Zãe .containerna nugoe si ƒe kekeme woɖo ɖi si ɖoa nya ŋu.

<div class="container">
  ...
</div>

Zãe .container-fluidna nugoe si ƒe kekeme bliboa, si keke wò nukpɔƒea ƒe kekeme bliboa.

<div class="container-fluid">
  ...
</div>

Bootstrap ƒe akpa aɖewoe nye esi wɔa dɔ, si wotsɔna zɔa mɔe, si nye tsi gbãtɔ ƒe grid ɖoɖo si dzidzea sɔti 12 wòsɔna ne mɔ̃a alo nukpɔƒea ƒe lolome le dzidzim ɖe edzi. Elɔ klass siwo woɖo ɖi do ŋgɔ hena ɖoɖowɔɖi ƒe tiatia bɔbɔewo, kpakple mixins sẽŋuwo hena gɔmesese ƒe ɖoɖo geɖe wɔwɔ .

Kpɔkplɔyiɖeme

Wozãa grid ɖoɖowo hena axa ƒe ɖoɖowo wɔwɔ to fli kple sɔti siwo kplɔ wo nɔewo ɖo siwo me wò nyatakakawo le dzi. Alesi Bootstrap grid ɖoɖoa wɔa dɔe enye si:

Ele be woatsɔ fliwo ade .container(fixed-width) alo .container-fluid(full-width) me be woaɖo wo ɖe ɖoɖo nyuitɔ nu eye woatsɔ wo aɖo wo nu.
Zã fliwo nàtsɔ awɔ sɔtiwo ƒe ƒuƒoƒo siwo le tsia dzi.
Ele be woatsɔ emenyawo ade sɔtiwo me, eye sɔtiwo koe ate ŋu anye fliwo ƒe viwo enumake.
Grid klass siwo woɖo ɖi do ŋgɔ abe .rowkple .col-xs-4li na grid ƒe ɖoɖowo wɔwɔ kabakaba. Woateŋu azã mixin siwo mesɔ gbɔ o hã na gɔmesese ƒe ɖoɖo geɖe wu.
Sɔtiwo wɔa gutters (dometsotso siwo le sɔtiwo me nyawo dome) to padding. Woɖea padding ma ɖa le fliwo me na sɔti gbãtɔ kple mamlɛtɔ to margin negative dzi le .rows dzi.
Axa manyomanyo la tae woɖe kpɔɖeŋu siwo le ete la ɖa ɖo. Enye ale be woaɖo nyatakaka siwo le grid sɔtiwo me ɖe fli me kple nya siwo menye grid o.
Wowɔa grid sɔtiwo to sɔti wuieve siwo li ƒe xexlẽme si nèdi be yeakeke la gbɔgblɔ me. Le kpɔɖeŋu me, sɔti etɔ̃ siwo sɔ la azã etɔ̃ .col-xs-4.
Ne wotsɔ sɔti siwo wu 12 da ɖe fli ɖeka me la, sɔti bubuwo ƒe ƒuƒoƒo ɖesiaɖe, abe akpa ɖeka ene, axatsa ɖe fli yeye dzi.
Grid ƒe hatsotsowo ku ɖe mɔ̃ siwo ƒe screen ƒe kekeme lolo wu alo sɔ kple breakpoint ƒe lolomewo ŋu, eye woɖea grid ƒe hatsotso siwo woɖo ɖe mɔ̃ suewo ŋu la ɖa. Eyata, le kpɔɖeŋu me, .col-md-*klass ɖesiaɖe zazã ɖe element aɖe ŋu menye ɖeko wòakpɔ ŋusẽ ɖe eƒe atsyã dzi le mɔ̃ siwo le titina dzi ko o ke boŋ le mɔ̃ gãwo hã dzi ne .col-lg-*klass aɖe mele afima o.

Kpɔ kpɔɖeŋu siwo nàtsɔ awɔ gɔmeɖose siawo ŋudɔ le wò sededea me ŋu.

Nyadzɔdzɔgblɔmɔnuwo ƒe nyabiasewo

Míezãa media biabia siwo gbɔna le míaƒe Less faɛlwo me tsɔ wɔa breakpoints veviwo le míaƒe grid system me.

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

Míekekea nyadzɔdzɔgblɔmɔnuwo ƒe biabia siawo ɖe enu ɣeaɖewoɣi be míatsɔ a ade eme max-widthbe míaɖo seɖoƒe na CSS ɖe mɔ̃ siwo le kpuie wu dzi.

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

Grid ƒe tiatiawɔblɔɖewo

Kpɔ alesi Bootstrap grid ɖoɖoa ƒe akpa aɖewo wɔa dɔ le mɔ̃ geɖe siwo si kplɔ̃ si le asi me le dzi.

	Mɔ̃ sue bubuwo Telefonwo (<768px)	Mɔ̃ suewo ƒe Tablɛtwo (≥768px) .	Mɔ̃ siwo le titina Dɔwɔƒewo (≥992px) .	Mɔ̃ gãwo Desktops (≥1200px) .
Grid ƒe nuwɔna	Horizontal ɣesiaɣi	Wodze anyi be woadze egɔme, le tsia dzi le gbagbãƒewo tame
Nugoe ƒe kekeme	Ðeke meli o (auto) .	750px ƒe didime	970px ƒe didime	1170px ƒe didime
Klass ƒe ŋgɔdonya	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`
# ƒe sɔtiwo	12. 12
Sɔti ƒe kekeme	Auto	~62px ƒe nɔnɔmetata	~81px ƒe ƒuƒoƒo	~97px ƒe ƒuƒoƒo
Gutter ƒe kekeme	30px (15px le sɔti aɖe ƒe akpa ɖesiaɖe)
Nestable	Ɛ̃
Nusiwo wotsɔna tsia tre ɖe nu ŋu	Ɛ̃
Sɔtiwo ƒe ɖoɖowɔwɔ	Ɛ̃

Kpɔɖeŋu: Woƒo ƒu ɖe wo nɔewo dzi va ɖo tsia dzi

Ne èzã .col-md-*grid ƒe klass ɖeka la, àte ŋu awɔ grid ƒe ɖoɖo vevi aɖe si dzea egɔme ƒoa ƒu ɖe asitelefonwo kple tablɛtwo dzi (siwo le sue wu va ɖo sue wu) hafi va zua tsia dzi le kplɔ̃dzimɔ̃wo (siwo le titina) dzi. De grid sɔtiwo ɖe ɖesiaɖe .rowme .

.col-md-1 ƒe ƒuƒoƒo

.col-md-8 ƒe ƒuƒoƒo

.col-md-4 ƒe ƒuƒoƒo

.col-md-6 ƒe ƒuƒoƒo

<div class="row">
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>

Kpɔɖeŋu: Tsi ƒe nugoe

Trɔ grid ƒe ɖoɖo ɖesiaɖe si ƒe kekeme woɖo ɖi la wòazu kekeme bliboa ƒe ɖoɖo to wò gotatɔ tɔtrɔ .containerwòazu .container-fluid.

<div class="container-fluid">
  <div class="row">
    ...
  </div>
</div>

Kpɔɖeŋu: Asitelefon kple kɔmpiuta dzi dɔwɔnuwo

Mèdi be yeƒe sɔtiwo naƒo ƒu ɖe mɔ̃ suewo me ko oa? Zã mɔ̃ sue kple titina ƒe grid klass siwo sɔ gbɔ wu la to tsɔtsɔ kpe .col-xs-* .col-md-*ɖe wò sɔtiwo ŋu me. Kpɔ kpɔɖeŋu si le ete hena alesi wo katã wɔa dɔe ŋuti susu nyuitɔ.

.kɔl-xs-12 .kɔl-md-8

.kɔl-xs-6 .kɔl-md-4

.col-xs-6 ƒe ƒuƒoƒo

<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>

Kpɔɖeŋu: Asitelefon, tablɛt, kplɔ̃dzivɔ

Tu kpɔɖeŋu si do ŋgɔ la ɖo to ɖoɖo siwo me ŋusẽ le wu gɔ̃ hã wɔwɔ kple tablɛt .col-sm-*ƒe klasswo me.

.kɔl-xs-12 .kɔl-sm-6 .kɔl-md-8

.kɔl-xs-6 .kɔl-md-4

.kɔl-xs-6 .kɔl-sm-4

<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <!-- Optional: clear the XS cols if their content doesn't match in height -->
  <div class="clearfix visible-xs-block"></div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>

Kpɔɖeŋu: Sɔtiwo ƒe agbalẽ xatsaxatsa

Ne wotsɔ sɔti siwo wu 12 da ɖe fli ɖeka me la, sɔti bubuwo ƒe ƒuƒoƒo ɖesiaɖe, abe akpa ɖeka ene, axatsa ɖe fli yeye dzi.

.col-xs-9 ƒe ƒuƒoƒo

.col-xs-4
Esi wònye be 9 + 4 = 13 > 12 ta la, div sia si keke sɔti 4 la xɔa fli yeye ɖe fli yeye dzi abe xexlẽdzesi ɖeka si tsiã ɖe enu ene.

.col-xs-6
Sɔti siwo kplɔe ɖo yi edzi le fli yeyea dzi.

<div class="row">
  <div class="col-xs-9">.col-xs-9</div>
  <div class="col-xs-4">.col-xs-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
  <div class="col-xs-6">.col-xs-6<br>Subsequent columns continue along the new line.</div>
</div>

Nyaŋuɖoɖo ƒe kɔlam gbugbɔgaɖoanyiwo

Le fli ene siwo le grids siwo li ta la, àdo go nya siwo me, le gbagbãƒe aɖewo la, wò sɔtiwo mekɔ tututu o elabena ɖeka kɔkɔ wu evelia. Be nàɖɔ ema ɖo la, zã a .clearfixkple míaƒe responsive utility classes ƒe ƒuƒoƒo .

.col-xs-6 .col-sm-3
Trɔ wò nukpɔkpɔ ƒe lolome alo kpɔe le wò fon dzi hena kpɔɖeŋu.

.kɔl-xs-6 .kɔl-sm-3

<div class="row">
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>

  <!-- Add the extra clearfix for only the required viewport -->
  <div class="clearfix visible-xs-block"></div>

  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>

Tsɔ kpe ɖe sɔtiwo ɖeɖeɖa le teƒe siwo woɖoa nya ŋu le ƒe gbagbãƒewo ŋu la, ɖewohĩ ahiã be nàgbugbɔ aɖo offsets, pushes, alo pulls . Kpɔ esia le dɔwɔwɔ me le grid ƒe kpɔɖeŋua me .

<div class="row">
  <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
  <div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
</div>

<div class="row">
  <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
  <div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div>
</div>

Sɔtiwo ƒe vovototodedeameme

Ʋu sɔtiwo yi ɖusime to .col-md-offset-*klasswo zazã me. Klass siawo dzia sɔti aɖe ƒe miame ƒe akpa dzi ɖe edzi *sɔtiwo. Le kpɔɖeŋu me, .col-md-offset-4eʋuna .col-md-4ɖe sɔti ene dzi.

.col-md-4 ƒe ƒuƒoƒo

.col-md-4 .col-md-nɔnɔmetata-4

.col-md-3 .col-md-nɔnɔmetata-3

.col-md-6 .col-md-nɔnɔmetata-3

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
  <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>

Àteŋu aɖɔli offsets hã tso grid tiers siwo le anyime kple .col-*-offset-0klasswo.

<div class="row">
  <div class="col-xs-6 col-sm-4">
  </div>
  <div class="col-xs-6 col-sm-4">
  </div>
  <div class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-0">
  </div>
</div>

Atɔwɔwɔ ƒe sɔtiwo

Be nàtsɔ grid si woɖo ɖi la awɔ atɔ ɖe wò nyatakakawo ŋu la, tsɔ sɔti yeye .rowkple ƒuƒoƒo kpe ɖe .col-sm-*sɔti si li xoxo .col-sm-*ŋu. Ele be sɔti siwo wotsɔ ƒo ƒui va ɖo 12 alo esi mede nenema o nanɔ fli siwo wotsɔ ƒo ƒui me (mehiã be nàzã sɔti 12 siwo katã li la o).

Dzidzenu 1: .col-sm-9

Dzidzenu 2 lia: .col-xs-8 .col-sm-6

Dzidzenu 2 lia: .col-xs-4 .col-sm-6

<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-xs-8 col-sm-6">
        Level 2: .col-xs-8 .col-sm-6
      </div>
      <div class="col-xs-4 col-sm-6">
        Level 2: .col-xs-4 .col-sm-6
      </div>
    </div>
  </div>
</div>

Sɔtiwo ƒe ɖoɖowɔwɔ

Trɔ míaƒe grid sɔti siwo wotu ɖe eme ƒe ɖoɖo bɔbɔe kple .col-md-push-*kple .col-md-pull-*modifier classes.

.kol-md-9 .kɔl-md-tutu-3

.kol-md-3 .kol-md-he-9

<div class="row">
  <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>

Mixins kple tɔtrɔwo mesɔ gbɔ o

Tsɔ kpe ɖe grid klass siwo wotu do ŋgɔ na ɖoɖowɔwɔ kabakaba ŋu la, Bootstrap de Less tɔtrɔwo kple mixins ɖe eme hena wò ŋutɔ wò ɖoɖo bɔbɔe, gɔmesese ƒe ɖoɖo kabakaba.

Nusiwo trɔna

Tɔtrɔwoe ɖoa sɔtiwo ƒe xexlẽme, gutter ƒe kekeme, kple media biabia teƒe si woadze sɔti siwo le tsia dzi gɔme le. Míezãa esiawo tsɔ wɔa grid ƒe hatsotso siwo woɖo ɖi do ŋgɔ siwo woŋlɔ ɖe etame, kpakple na mixins tɔxɛ siwo woŋlɔ ɖe ete.

@grid-columns:              12;
@grid-gutter-width:         30px;
@grid-float-breakpoint:     768px;

Nusiwo wotsɔ tsakae

Wozãa mixins kpe ɖe grid ƒe tɔtrɔwo ŋu tsɔ wɔa gɔmesese ƒe CSS na grid ƒe sɔti ɖekaɖekawo.

// Creates a wrapper for a series of columns
.make-row(@gutter: @grid-gutter-width) {
  // Then clear the floated columns
  .clearfix();

  @media (min-width: @screen-sm-min) {
    margin-left:  (@gutter / -2);
    margin-right: (@gutter / -2);
  }

  // Negative margin nested rows out to align the content of columns
  .row {
    margin-left:  (@gutter / -2);
    margin-right: (@gutter / -2);
  }
}

// Generate the extra small columns
.make-xs-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @grid-float-breakpoint) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the small columns
.make-sm-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @screen-sm-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the small column offsets
.make-sm-column-offset(@columns) {
  @media (min-width: @screen-sm-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-sm-column-push(@columns) {
  @media (min-width: @screen-sm-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-sm-column-pull(@columns) {
  @media (min-width: @screen-sm-min) {
    right: percentage((@columns / @grid-columns));
  }
}

// Generate the medium columns
.make-md-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @screen-md-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the medium column offsets
.make-md-column-offset(@columns) {
  @media (min-width: @screen-md-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-md-column-push(@columns) {
  @media (min-width: @screen-md-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-md-column-pull(@columns) {
  @media (min-width: @screen-md-min) {
    right: percentage((@columns / @grid-columns));
  }
}

// Generate the large columns
.make-lg-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @screen-lg-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the large column offsets
.make-lg-column-offset(@columns) {
  @media (min-width: @screen-lg-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-lg-column-push(@columns) {
  @media (min-width: @screen-lg-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-lg-column-pull(@columns) {
  @media (min-width: @screen-lg-min) {
    right: percentage((@columns / @grid-columns));
  }
}

Kpɔɖeŋu zazã

Àteŋu atrɔ asi le tɔtrɔawo ŋu ɖe wò ŋutɔ wò asixɔxɔ tɔxɛwo nu, alo nàzã mixins kple woƒe asixɔxɔ gbãtɔwo ko. Kpɔɖeŋu aɖee nye esi le ɖoɖo siwo woɖo ɖi zazã atsɔ awɔ sɔti eve ƒe ɖoɖo si me dometsotso le le dome.

.wrapper {
  .make-row();
}
.content-main {
  .make-lg-column(8);
}
.content-secondary {
  .make-lg-column(3);
  .make-lg-column-offset(1);
}

<div class="wrapper">
  <div class="content-main">...</div>
  <div class="content-secondary">...</div>
</div>

Tanyawo

HTML tanyawo katã, <h1>to <h6>, dzi la li. .h1to .h6klasswo hã li, na ne èdi be yeawɔ ɖeka kple tanya aɖe ƒe nuŋɔŋlɔ ƒe nɔnɔme gake nèdi kokoko be yeƒe nuŋɔŋlɔ nadze le fli me.

h1. Bootstrap ƒe tanya	Semibold 36px ƒe akpa aɖe
h2. Bootstrap ƒe tanya	Semibold 30px ƒe akpa aɖe
h3. Bootstrap ƒe tanya	Semibold 24px ƒe akpa aɖe
h4. Bootstrap ƒe tanya	Semibold 18px ƒe akpa aɖe
h5. Bootstrap ƒe tanya	Semibold 14px ƒe akpa aɖe
h6. Bootstrap ƒe tanya	Semibold 12px ƒe akpa aɖe

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

Wɔ nuŋɔŋlɔ si le bɔbɔe wu, evelia le tanya ɖesiaɖe me kple <small>dzesideŋkɔ alo .smallklass la.

h1. Bootstrap ƒe tanya Nuŋɔŋlɔ evelia

h2. Bootstrap ƒe tanya Nuŋɔŋlɔ evelia

h3. Bootstrap ƒe tanya Nuŋɔŋlɔ evelia

h4. Bootstrap ƒe tanya Nuŋɔŋlɔ evelia

h5. Bootstrap ƒe tanya Nuŋɔŋlɔ evelia

h6. Bootstrap ƒe tanya Nuŋɔŋlɔ evelia

<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
<h2>h2. Bootstrap heading <small>Secondary text</small></h2>
<h3>h3. Bootstrap heading <small>Secondary text</small></h3>
<h4>h4. Bootstrap heading <small>Secondary text</small></h4>
<h5>h5. Bootstrap heading <small>Secondary text</small></h5>
<h6>h6. Bootstrap heading <small>Secondary text</small></h6>

Ŋutilã ƒe kɔpi

Bootstrap ƒe xexeame katã ƒe gɔmedzedze font-sizenye 14px , kple a si line-heightnye 1.428 . Wozãa esia ɖe <body>memamãawo kple wo katã ŋu. Tsɔ kpe ɖe eŋu la, <p>(memamawo) xɔa woƒe fli-kɔkɔme si wobu akɔntae ƒe afã ƒe akpa si le ete (10px le gɔmedzedzea me).

Nullam quis risus eget urna mollis ƒe atsyɔ̃ɖoɖo vel eu leo. Cum sociis natoque penatibus kple vidzidzi ƒe mɔ̃ gãwo, nascetur ridiculus mus. Nullam id dolor id nibh ʋu siwo wotsɔna ƒoa ʋu.

Cum sociis natoque penatibus kple vidzidzi ƒe mɔ̃ gãwo, nascetur ridiculus mus. Donec ullamcorper nulla si menye metus nudzrala ƒe ʋuʋudedi o. Duis mollis, est non commodo luctus, nisi erat agbatsɔla ƒe lãgbalẽ, eget lacinia odio sem nec elit. Donec ullamcorper nulla si menye metus nudzrala ƒe ʋuʋudedi o.

Maecenas sed diam eget risus varius blandit bɔbɔ nɔ anyi amet non magna. Donec id elit non mi porta gravida le eget metus me. Duis mollis, est non commodo luctus, nisi erat agbatsɔla ƒe lãgbalẽ, eget lacinia odio sem nec elit.

<p>...</p>

Kplɔ ŋutilã ƒe kɔpi

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">...</p>

Wotue kple Less

Wotu nuŋɔŋlɔ ƒe dzidzenu la ɖe Less ƒe tɔtrɔ eve dzi le tɔtrɔwo me.less : @font-size-basekple @line-height-base. Gbãtɔ nye gɔmeɖoanyi ŋɔŋlɔdzesi-lolome si wozã le bliboa me eye evelia nye gɔmeɖoanyi fli-kɔkɔme. Míezãa tɔtrɔ mawo kple akɔntabubu bɔbɔe aɖewo tsɔ wɔa míaƒe ƒomeviwo katã ƒe margins, paddings, kple line-heights kple bubuwo. Trɔ asi le wo ŋu eye Bootstrap natrɔ ɖe wo ŋu.

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

Nuŋɔŋlɔ si wode dzesii

Ne èdi be yeate gbe ɖe nuŋɔŋlɔ ƒe duƒuƒu aɖe dzi le eƒe vevienyenye le nya bubu me ta la, zã <mark>dzesideŋkɔa.

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

You can use the mark tag to <mark>highlight</mark> text.

Wotutu nuŋɔŋlɔa ɖa

Ne èdi nuŋɔŋlɔ ƒe ƒuƒoƒo siwo woɖe ɖa la, zã <del>dzesideŋkɔa.

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

<del>This line of text is meant to be treated as deleted text.</del>

Strikethrough nuŋɔŋlɔa me

Ne èdi nuŋɔŋlɔ ƒe ƒuƒoƒo siwo megasɔ o fia la, zã <s>dzesideŋkɔa.

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

<s>This line of text is meant to be treated as no longer accurate.</s>

Nuŋɔŋlɔ si wotsɔ de eme

Ne èdi be yeaɖe nusiwo wotsɔ kpe ɖe nuŋlɔɖia ŋu fia la, zã <ins>dzesideŋkɔa.

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

<ins>This line of text is meant to be treated as an addition to the document.</ins>

Nuŋɔŋlɔ si te fli ɖe te

Ne èdi be yeate fli ɖe nuŋɔŋlɔa te la, zã <u>tag la.

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

<u>This line of text will render as underlined</u>

Wɔ HTML ƒe gbeteteɖedzi ƒe dzesi siwo woɖo ɖi la ŋudɔ kple atsyã siwo le bɔbɔe.

Nuŋɔŋlɔ suewo

Ne èdi be yeaɖe gbetete ɖe nuŋɔŋlɔ si le fli me alo esi ƒe akpa aɖewo dzi la, zã <small>dzesi la nàtsɔ aɖo nuŋɔŋlɔa ɖe dzila ƒe lolome ƒe 85% dzi. Tanya ƒe akpawo xɔa woawo ŋutɔ tɔ font-sizena <small>akpa siwo wotsɔ ƒo ƒui.

Àte ŋu azã inline element bubu kple .smallɖe ɖesiaɖe teƒe <small>.

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

<small>This line of text is meant to be treated as fine print.</small>

Kalẽtᴐe

Le gbetete ɖe nuŋɔŋlɔ ƒe akpa aɖe dzi kple ŋɔŋlɔdzesi ƒe kpekpeme si kpekpe wu ta.

Woɖea nuŋɔŋlɔ ƒe akpa si gbɔna la gɔme abe nuŋɔŋlɔ si le ɣie ene .

<strong>rendered as bold text</strong>

Ŋɔŋlɔdzesi siwo woŋlɔ kple asi

Le gbetete ɖe nuŋɔŋlɔ ƒe akpa aɖe dzi kple nuŋɔŋlɔ si wotsɔ ŋlɔ nu ɖe nu dzi ta.

Woɖea nuŋɔŋlɔ ƒe akpa si gbɔna la gɔme abe nuŋɔŋlɔ si woŋlɔ kple nuŋɔŋlɔ si wotsɔ nuŋɔŋlɔ si le fli me ene .

<em>rendered as italicized text</em>

Nusiwo woatsɔ aɖɔli wo nɔewo

Miate ŋu azã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ŋ.

Alignment ƒe klasswo

Gbugbɔ ɖo nuŋɔŋlɔwo ɖe akpa siwo me nuŋɔŋlɔwo ƒe ɖoɖowɔwɔ ƒe klasswo le bɔbɔe.

Nuŋɔŋlɔ si woɖo ɖe ɖoɖo nu le miame.

Nuŋɔŋlɔ si woɖo ɖe ɖoɖo nu le titina.

Nuŋɔŋlɔ si woɖo ɖe ɖoɖo nu le ɖusime.

Nuŋɔŋlɔ si ŋu kpeɖodzi le.

Nuŋɔŋlɔ aɖeke meli o.

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>

Tɔtrɔ ƒe klasswo

Trɔ nuŋɔŋlɔ ɖe akpawo me kple nuŋɔŋlɔ ƒe ŋɔŋlɔdzesi gãwo ƒe klasswo.

Nuŋɔŋlɔ suewo.

Nuŋɔŋlɔ gãwo.

Nuŋɔŋlɔ si woŋlɔ kple ŋɔŋlɔdzesi gãwo.

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>

Kpuienyawo

Stylized dɔwɔwɔ HTML ƒe <abbr>element na kpukpuiwo kple kpukpuiwo be woaɖe kekeɖenudɔwɔwɔ afia le hover. Kpuie siwo ŋu titlenɔnɔme le ƒe liƒo si le ete si dzi woŋlɔ nu ɖo si me kɔ eye kpekpeɖeŋufianu le hover me, si naa nya bubuwo le hover me kple kpekpeɖeŋu mɔ̃ɖaŋunuwo zãlawo.

Kpuienya veviwo

Nya nɔnɔme ƒe kpukpui aɖee nye attr .

<abbr title="attribute">attr</abbr>

Gbãtɔ ƒe gɔmedzedze

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

HTML ye nye nu nyuitɔ kekeake tso esime wofli abolo.

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

Adrɛswo

Tsɔ tɔgbui si te ɖe ŋuwò wu alo dɔ bliboa ƒe kadodo ŋuti nyatakakawo fia. Dzra ɖoɖowɔwɔ ɖo to fliawo katã nuwuwu kple <br>.

Twitter, Inc.
1355 Asitsamɔ dzi, Suite 900
San Francisco, CA 94103 Axa
: (123) 456-7890

Ŋkɔ
Bliboa [email protected]

<address>
  <strong>Twitter, Inc.</strong><br>
  1355 Market Street, Suite 900<br>
  San Francisco, CA 94103<br>
  <abbr title="Phone">P:</abbr> (123) 456-7890
</address>

<address>
  <strong>Full Name</strong><br>
  <a href="mailto:#">[email protected]</a>
</address>

Blockquotes ƒe nyawo

Le nyatakaka siwo ƒe akpa aɖewo yɔ tso teƒe bubu le wò nuŋlɔɖia me ta.

Blockquote si woɖo ɖi

Kpe HTML<blockquote> ɖesiaɖe ɖe edzi abe nyayɔyɔa ene. Ne èdi nya siwo wogblɔ tẽ la, míeɖo aɖaŋu be nàŋlɔ .<p>

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

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

Blockquote ƒe tiatiawɔblɔɖewo

Atsyã kple emenyawo trɔna na tɔtrɔ bɔbɔewo le dzidzenu aɖe dzi <blockquote>.

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

Tsɔ a kpe ɖe eŋu <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>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

Ðeɖefianu bubuwo ɖe wo nɔewo ŋu

Tsɔ kpe ɖe eŋu .blockquote-reversena blockquote si me nyawo le ɖusime.

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-reverse">
  ...
</blockquote>

Ŋlɔ ŋkɔwo

Womewɔ ɖoɖo ɖe eŋu o

Nu siwo me ɖoɖo si nu woɖo wo ɖo mele vevie tẽ o ƒe xexlẽdzesiwo.

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>
  <li>...</li>
</ul>

Wobia tso esi

Nusiwo me ɖoɖoa le vevie tẽ ƒe xexlẽdzesiwo.

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

<ol>
  <li>...</li>
</ol>

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>...</li>
</ul>

Le fli me

Da nusiwo katã woŋlɔ ɖi la ɖe fli ɖeka dzi kple display: inline-block;kple kekeli aɖewo padding.

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

<ul class="list-inline">
  <li>...</li>
</ul>

Nuɖᴐɖᴐ

Nyawo ƒe xexlẽdzesiwo kple woƒe nuŋlɔɖi siwo do ƒome kplii.

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.

<dl>
  <dt>...</dt>
  <dd>...</dd>
</dl>

Numeɖeɖe si le tsia dzi

Wɔ nyawo kple numeɖeɖewo le <dl>fli me ɖe wo nɔewo xa. Edzea egɔme ƒo ƒu abe default <dl>s ene, gake ne navbar la keke ta la, nenema ke wɔ esiawo.

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.
Felis euismod ƒe tsinyenye si nye lacinia: 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.

<dl class="dl-horizontal">
  <dt>...</dt>
  <dd>...</dd>
</dl>

Auto-truncating ƒe ʋuʋu

Numeɖeɖe ƒe xexlẽdzesi siwo le tsia dzi la atso nya siwo didi akpa be woate ŋu asɔ ɖe miame ƒe sɔti me kple text-overflow. Le nukpɔkpɔ ƒe mɔnu siwo le kpuie wu me la, woatrɔ ɖe ɖoɖo si woɖo ɖe wo nɔewo dzi si woɖo ɖi la ŋu.

Le fli me

Kpe kɔpi ƒe akpa siwo le fli me kple <code>.

Le kpɔɖeŋu me, <section>ele be woaxatsae abe inline ene.

For example, <code>&lt;section&gt;</code> should be wrapped as inline.

Zãla ƒe nyawo tsɔtsɔ de eme

Zã la <kbd>nàtsɔ afia nya siwo woŋlɔna zi geɖe to keyboard dzi.

Ne èdi be yeatrɔ agbalẽdzraɖoƒewo la, ŋlɔ agbalẽdzraɖoƒea cdƒe ŋkɔ eye nàkplɔe ɖo.
Ne èdi be yeatrɔ asi le ɖoɖowo ŋu la, zi edzi ctrl + ,

To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>

Gbãtɔ ƒe block

Zãe <pre>na fli geɖe ƒe kɔda. Kpɔ egbɔ be yesi le dzogoe ƒe akɔtadzesi ɖesiaɖe si le kɔdasia me nu hena gɔmeɖeɖe nyuie.

<p>Ŋɔŋlɔdzesiwo ƒe kpɔɖeŋu le afisia...</p>

<pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre>

Àteŋu atsɔ .pre-scrollableklass la akpe ɖe eŋu, si aɖo max-height si nye 350px eye wòana y-axis scrollbar.

Nusiwo trɔna

Ne èdi tɔtrɔwo fia la, zã <var>tag la.

y = m x + b ƒe ƒuƒoƒo

<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

Kpɔɖeŋu ƒe emetsonuwo

Ne èdi be yeaɖe mɔxexeɖedɔlélewo fia kpɔɖeŋu ƒe dodo tso ɖoɖowɔɖi aɖe me la, zã <samp>tag la.

Woɖoe be woabu nuŋɔŋlɔ sia be enye kpɔɖeŋu si woɖe tso kɔmpiutadziɖoɖo aɖe me.

<samp>This text is meant to be treated as sample output from a computer program.</samp>

Kpɔɖeŋu vevi aɖe

Le atsyã veviwo wɔwɔ gome—siwo wotsɔ blaa nu bɔbɔewo kple nusiwo ma wo nɔewo le tsia dzi ko—la, tsɔ gɔmeɖoanyi ƒe hatsotso la .tablekpe ɖe ɖesiaɖe <table>ŋu . Adze abe super redundant ene, gake le kplɔ̃wo zazã le afisiafi na plugins bubuwo abe ɣletigbalẽwo kple ŋkeke tiatiawɔlawo ta la, míetiae be míaɖe míaƒe kplɔ̃ ƒe atsyã tɔxɛwo ɖe aga.

Tabla ƒe nuŋɔŋlɔ si woate ŋu atia.
# .	Ŋkɔ gbãtɔ	Ƒome ŋkɔ	Zãla ƒe ŋkɔ
1. 1.	Marko	Otto ƒe nyawo	@mdo dzi
2.	Yakob	Thornton ƒe ŋkɔ	@da ami
3.	Larry ye nye esia	Xe lae	@twitter dzi

<table class="table">
  ...
</table>

Fli siwo ŋu fli le

Zãe nàtsɔ .table-stripedakpe zebra-striping ɖe kplɔ̃ ƒe fli ɖesiaɖe si le <tbody>.

Cross-browser ƒe dɔwɔwɔ ɖekae

Wowɔa kplɔ̃ siwo le fli me ƒe atsyã to :nth-childCSS tiatiawɔnu dzi, si mele Internet Explorer 8 me o.

# .	Ŋkɔ gbãtɔ	Ƒome ŋkɔ	Zãla ƒe ŋkɔ
1. 1.	Marko	Otto ƒe nyawo	@mdo dzi
2.	Yakob	Thornton ƒe ŋkɔ	@da ami
3.	Larry ye nye esia	Xe lae	@twitter dzi

<table class="table table-striped">
  ...
</table>

Kplɔ̃ si ŋu liƒo le

Tsɔe kpe ɖe eŋu .table-borderedna liƒowo le kplɔ̃a ƒe akpawo katã kple lãmenugbagbeviwo.

# .	Ŋkɔ gbãtɔ	Ƒome ŋkɔ	Zãla ƒe ŋkɔ
1. 1.	Marko	Otto ƒe nyawo	@mdo dzi
2.	Yakob	Thornton ƒe ŋkɔ	@da ami
3.	Larry ye nye esia	Xe lae	@twitter dzi

<table class="table table-bordered">
  ...
</table>

Hover fliwo dzi

Tsɔ kpe ɖe eŋu .table-hoverbe wòana hover nɔnɔme nawɔ dɔ le kplɔ̃ ƒe fliwo dzi le a <tbody>.

# .	Ŋkɔ gbãtɔ	Ƒome ŋkɔ	Zãla ƒe ŋkɔ
1. 1.	Marko	Otto ƒe nyawo	@mdo dzi
2.	Yakob	Thornton ƒe ŋkɔ	@da ami
3.	Larry ye nye esia	Xe lae	@twitter dzi

<table class="table table-hover">
  ...
</table>

Kplɔ̃ si wotsɔ ƒo ƒui

Tsɔe kpe .table-condensedɖe eŋu be kplɔ̃wo nanɔ sue wu to lãmenugbagbevi siwo wotsɔ blaa nu ɖe wo nɔewo ŋu la ɖeɖe ɖe afã me.

# .	Ŋkɔ gbãtɔ	Ƒome ŋkɔ	Zãla ƒe ŋkɔ
1. 1.	Marko	Otto ƒe nyawo	@mdo dzi
2.	Yakob	Thornton ƒe ŋkɔ	@da ami
3.	Larry Xevi la		@twitter dzi

<table class="table table-condensed">
  ...
</table>

Klass siwo ku ɖe nya siwo ƒo xlãe ŋu

Zã nya siwo ƒo xlãe ƒe klasswo tsɔ de ama kplɔ̃ ƒe fliwo alo lãmenugbagbevi ɖekaɖekawo.

Nusrɔ̃ƒe	Nuɖᴐɖᴐ
`.active`	Tsɔ hover ƒe amadedea de fli alo lãmenugbagbevi aɖe koŋ dzi
`.success`	Fia afɔɖeɖe si kpɔ dzidzedze alo nu nyui aɖe
`.info`	Fia tɔtrɔ alo nuwɔna si me nyatakaka le si mede akpa aɖeke dzi o
`.warning`	Fia nuxlɔ̃ame si ate ŋu ahiã be woalé ŋku ɖe eŋu
`.danger`	Fia nuwɔna si me afɔku le alo ate ŋu anye nu gbegblẽ aɖe

# .	Sɔti ƒe tanya	Sɔti ƒe tanya	Sɔti ƒe tanya
1. 1.	Nyati siwo le sɔtiwo me	Nyati siwo le sɔtiwo me	Nyati siwo le sɔtiwo me
2.	Nyati siwo le sɔtiwo me	Nyati siwo le sɔtiwo me	Nyati siwo le sɔtiwo me
3.	Nyati siwo le sɔtiwo me	Nyati siwo le sɔtiwo me	Nyati siwo le sɔtiwo me
4.	Nyati siwo le sɔtiwo me	Nyati siwo le sɔtiwo me	Nyati siwo le sɔtiwo me
5.	Nyati siwo le sɔtiwo me	Nyati siwo le sɔtiwo me	Nyati siwo le sɔtiwo me
6.	Nyati siwo le sɔtiwo me	Nyati siwo le sɔtiwo me	Nyati siwo le sɔtiwo me
7. 7.1	Nyati siwo le sɔtiwo me	Nyati siwo le sɔtiwo me	Nyati siwo le sɔtiwo me
8	Nyati siwo le sɔtiwo me	Nyati siwo le sɔtiwo me	Nyati siwo le sɔtiwo me
9. 9	Nyati siwo le sɔtiwo me	Nyati siwo le sɔtiwo me	Nyati siwo le sɔtiwo me

<!-- On rows -->
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="active">...</td>
  <td class="success">...</td>
  <td class="warning">...</td>
  <td class="danger">...</td>
  <td class="info">...</td>
</tr>

Gɔmesese nana mɔ̃ɖaŋununya siwo kpena ɖe ame ŋu

Amadede zazã atsɔ atsɔ gɔmesese akpe ɖe kplɔ̃ ƒe fli alo lãmenugbagbevi ɖekaɖeka ŋu koe naa nukpɔkpɔ ƒe dzesi aɖe ko, si womatsɔ na kpekpeɖeŋu mɔ̃ɖaŋunuwo zazãlawo o – abe screen readers ene. Kpɔ egbɔ be nyatakaka siwo wotsɔ amadedea de dzesii la dze ƒã tso emenyawo ŋutɔ me (nuŋɔŋlɔ si wokpɔna le kplɔ̃a ƒe fli/lãmenugbagbevi si sɔ me), alo wotsɔe de eme to mɔnu bubuwo dzi, abe nuŋɔŋlɔ bubu siwo woɣla kple .sr-onlyklass la ene.

Kplɔ̃ siwo ɖoa nya ŋu

Wɔ kplɔ̃ siwo ɖoa nya ŋu to ɖesiaɖe babla ɖe .tableeme .table-responsivebe wòana woaʋuʋu le tsia dzi le mɔ̃ suewo dzi (le 768px te). Ne èle nu kpɔm le nusianu si lolo wu 768px ƒe kekeme dzi la, màkpɔ vovototo aɖeke le kplɔ̃ siawo me o.

Tsitrenu ƒe lãɖeɖe/tsoɖeɖe

Tabla siwo ɖoa nya ŋu la zãa overflow-y: hidden, si ɖea nyatakaka ɖesiaɖe si yi ŋgɔ wu kplɔ̃a ƒe akpa siwo le ete alo etame la ɖa. Vevietɔ esia ate ŋu atso nuɖuɖu siwo le fli dzi kple ame bubuwo ƒe dɔwɔnu bubuwo ɖa.

Firefox kple agbledeƒewo

Firefox na fieldset styling aɖewo siwo mebɔ o si lɔ widthbe doa kplamatse kplɔ̃ si ɖoa nya ŋu. Womateŋu axe mɔ ɖe esia nu Firefox-koŋ ƒe hack si míetsɔ na le Bootstrap me o la manɔmee o:

@-moz-document url-prefix() {
  fieldset { display: table-cell; }
}

Ne èdi nyatakaka bubuwo la, xlẽ Stack Overflow ƒe ŋuɖoɖo sia .

# .	Tabla ƒe tanya	Tabla ƒe tanya	Tabla ƒe tanya	Tabla ƒe tanya	Tabla ƒe tanya	Tabla ƒe tanya
1. 1.	Tabla ƒe lãmenugbagbevi	Tabla ƒe lãmenugbagbevi	Tabla ƒe lãmenugbagbevi	Tabla ƒe lãmenugbagbevi	Tabla ƒe lãmenugbagbevi	Tabla ƒe lãmenugbagbevi
2.	Tabla ƒe lãmenugbagbevi	Tabla ƒe lãmenugbagbevi	Tabla ƒe lãmenugbagbevi	Tabla ƒe lãmenugbagbevi	Tabla ƒe lãmenugbagbevi	Tabla ƒe lãmenugbagbevi
3.	Tabla ƒe lãmenugbagbevi	Tabla ƒe lãmenugbagbevi	Tabla ƒe lãmenugbagbevi	Tabla ƒe lãmenugbagbevi	Tabla ƒe lãmenugbagbevi	Tabla ƒe lãmenugbagbevi

# .	Tabla ƒe tanya	Tabla ƒe tanya	Tabla ƒe tanya	Tabla ƒe tanya	Tabla ƒe tanya	Tabla ƒe tanya
1. 1.	Tabla ƒe lãmenugbagbevi	Tabla ƒe lãmenugbagbevi	Tabla ƒe lãmenugbagbevi	Tabla ƒe lãmenugbagbevi	Tabla ƒe lãmenugbagbevi	Tabla ƒe lãmenugbagbevi
2.	Tabla ƒe lãmenugbagbevi	Tabla ƒe lãmenugbagbevi	Tabla ƒe lãmenugbagbevi	Tabla ƒe lãmenugbagbevi	Tabla ƒe lãmenugbagbevi	Tabla ƒe lãmenugbagbevi
3.	Tabla ƒe lãmenugbagbevi	Tabla ƒe lãmenugbagbevi	Tabla ƒe lãmenugbagbevi	Tabla ƒe lãmenugbagbevi	Tabla ƒe lãmenugbagbevi	Tabla ƒe lãmenugbagbevi

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Kpɔɖeŋu vevi aɖe

Ame ɖekaɖekawo ƒe agbalẽvi dzi kpɔkpɔwo xɔa xexeame katã ƒe atsyã aɖewo le wo ɖokui si. Woɖo nuŋɔŋlɔ <input>, <textarea>, kple <select>akpa siwo .form-controlkatã le la width: 100%;ɖe ɖoɖo nu. Kpe ŋkɔwo kple nusiwo dzi wokpɔna ɖe eme .form-groupbe dometsotso nyuitɔ kekeake nanɔ wo dome.

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-group">
    <label for="exampleInputFile">File input</label>
    <input type="file" id="exampleInputFile">
    <p class="help-block">Example block-level help text here.</p>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Check me out
    </label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

Mègatsaka xexlẽdzesiwo ƒe ƒuƒoƒowo kple nyawo tsɔtsɔ de eme ƒe ƒuƒoƒowo o

Mègatsaka xexlẽdzesiwo ƒe ƒuƒoƒowo kple nyawo tsɔtsɔ de eme ƒe ƒuƒoƒowo tẽ o . Ke boŋ, tsɔ nyawo tsɔtsɔ de eme ƒe ƒuƒoƒoa de agbalẽvi ƒe ƒuƒoƒoa me.

Agbalẽvi si le fli me

Tsɔ kpe .form-inlineɖe wò agbalẽvia ŋu (si mehiã be wòanye <form>) na miame kple fli me mɔxexe ƒe dziɖuɖuwo. Esia ku ɖe agbalẽvi siwo le nukpɔkpɔ ƒe ʋɔtruwo me siwo keke 768px ya teti ŋu ko ŋu.

Ðewohĩ abia be woawɔ kekeme siwo wowɔ ɖe ɖoɖo nu

Inputs kple selects wɔ width: 100%;dɔ le gɔmedzedzea me le Bootstrap me. Le inline forms me la, míegbugbɔa ema ɖona ɖe width: auto;ale be dziɖuɖu geɖe nate ŋu anɔ fli ɖeka dzi. Le wò ɖoɖo nu la, ate ŋu ahiã be nàzã kekeme bubuwo ɖe ɖoɖo nu.

Tsɔ dzesidewo kpee ɣesiaɣi

Screen readers akpɔ kuxi le wò agbalẽviwo ŋu ne mède dzesidenu ɖesiaɖe si nèŋlɔ la ŋu o. Le agbalẽvi siawo siwo le fli me gome la, àte ŋu aɣla dzesideawo to .sr-onlyklass la zazã me. Mɔnu bubuwo li siwo dzi woato ana dzeside na mɔ̃ɖaŋununya siwo kpena ɖe ame ŋu, abe aria-label, aria-labelledbyalo titlenɔnɔme ene. Ne esiawo dometɔ aɖeke mele eme o la, screen readers ate ŋu azã placeholdernɔnɔmea, ne ele eme, gake de dzesii be placeholderwomeɖo aɖaŋu be woazãe atsɔ aɖo dzesidemɔnu bubuwo teƒe o.

<form class="form-inline">
  <div class="form-group">
    <label for="exampleInputName2">Name</label>
    <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
  </div>
  <div class="form-group">
    <label for="exampleInputEmail2">Email</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="[email protected]">
  </div>
  <button type="submit" class="btn btn-default">Send invitation</button>
</form>

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputEmail3">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
  </div>
  <div class="form-group">
    <label class="sr-only" for="exampleInputPassword3">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Remember me
    </label>
  </div>
  <button type="submit" class="btn btn-default">Sign in</button>
</form>

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
    <div class="input-group">
      <div class="input-group-addon">$</div>
      <input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
      <div class="input-group-addon">.00</div>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Transfer cash</button>
</form>

Nɔnɔme si le tsia dzi

Zã Bootstrap ƒe grid klass siwo woɖo do ŋgɔ tsɔ ɖo dzesidewo kple ƒuƒoƒo siwo le nuŋlɔɖiwo dzi kpɔƒewo ɖe ɖoɖo nu le ɖoɖo si le tsia dzi me to etsɔtsɔ kpe .form-horizontalɖe nɔnɔmetata la ŋu (si mehiã be wòanye a <form>). Esia wɔwɔ trɔa .form-groups be wòawɔ nu abe grid rows ene, eyata mehiã be .row.

<form class="form-horizontal">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox"> Remember me
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Sign in</button>
    </div>
  </div>
</form>

Dziɖuɖu siwo wodo alɔe

Kpɔɖeŋu siwo nye standard form controls siwo wodo alɔ le kpɔɖeŋu form layout me.

Nusiwo wotsɔ de eme

Agbalẽvi dzi kpɔkpɔ si bɔ wu, nuŋɔŋlɔ-siwo wotu ɖe nyawo tsɔtsɔ de eme ƒe agblewo dzi. HTML5 ƒomeviwo katã ƒe kpekpeɖeŋu le eme: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, kple color.

Ŋlɔ gbeƒãɖeɖe si hiã

typeNe woɖe gbeƒã woƒe nyawo nyuie ko hafi woawɔ nusiwo wotsɔ de eme la ƒe atsyã bliboe .

<input type="text" class="form-control" placeholder="Text input">

Nusiwo wotsɔ de eme ƒe ƒuƒoƒowo

Ne èdi be yeatsɔ nuŋɔŋlɔ alo abɔta siwo wotsɔ ƒo ƒui akpe ɖe nuŋɔŋlɔ ɖesiaɖe si wotu ɖe nuŋɔŋlɔ dzi kple/alo emegbe ŋu la <input>, kpɔ nyawo tsɔtsɔ de eme ƒe ƒuƒoƒo ƒe akpaa ɖa .

Nuŋɔŋlɔ ƒe teƒe

Form control si doa alɔ nuŋɔŋlɔ ƒe fli geɖe. Trɔ rowsnɔnɔmea ne ehiã.

<textarea class="form-control" rows="3"></textarea>

Dzesiɖakawo kple radiowo

Aɖakawo nye tiatia ɖeka alo geɖe tiatia le xexlẽdzesi aɖe me, gake radiowo ya nye tiatia ɖeka tso geɖe me.

Wodoa alɔ dzesiɖaka kple radio siwo wowɔ nuwɔametɔwoe, gake be nàna "womeɖe mɔ ɖe eŋu o" ƒe dzesi le dzila ƒe hover dzi la <label>, ahiã be nàtsɔ .disabledklass la akpe ɖe dzila .radiola ŋu , .radio-inline, .checkbox, alo .checkbox-inline.

Default (woƒo ƒu ɖe wo nɔewo dzi) .

<div class="checkbox">
  <label>
    <input type="checkbox" value="">
    Option one is this and that&mdash;be sure to include why it's great
  </label>
</div>
<div class="checkbox disabled">
  <label>
    <input type="checkbox" value="" disabled>
    Option two is disabled
  </label>
</div>

<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
    Option one is this and that&mdash;be sure to include why it's great
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
    Option two can be something else and selecting it will deselect option one
  </label>
</div>
<div class="radio disabled">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
    Option three is disabled
  </label>
</div>

Inline ƒe dzesiɖakawo kple radiowo

Zã .checkbox-inlinealo .radio-inlineklass siwo le aɖaka alo radio siwo kplɔ wo nɔewo ɖo dzi hena dziɖuɖu siwo dzena le fli ɖeka dzi.

<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label>

<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
</label>
<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
</label>
<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
</label>

Dzesiɖakawo kple radio siwo dzi woŋlɔ ŋkɔ ɖo o

Ne nuŋɔŋlɔ aɖeke mele asiwò le <label>, la, woɖoa nyawo ɖe teƒe si nàkpɔ mɔ na. Fifia la, aɖaka siwo mele Internet dzi o kple radiowo dzi koe wòwɔa dɔ le. Ðo ŋku edzi nàgatsɔ dzesideŋkɔ ƒomevi aɖe ana mɔ̃ɖaŋununya siwo kpena ɖe ame ŋu (le kpɔɖeŋu me, zazã aria-label).

<div class="checkbox">
  <label>
    <input type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">
  </label>
</div>

Tiae

De dzesii be native select menu geɖe—siwo nye Safari kple Chrome—la ƒe dzogoewo le goglo siwo womate ŋu atrɔ asi le to border-radiusnunɔamesiwo dzi o.

<select class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

Le <select>dziɖuɖu siwo si multiplenɔnɔme le gome la, woɖea tiatia geɖewo fiana le gɔmedzedzea me.

<select multiple class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

Static dziɖuɖu

Ne ehiã be nàda nuŋɔŋlɔ gbadzaa ɖe agbalẽvi ƒe dzeside aɖe xa le agbalẽvi aɖe me la, zã .form-control-staticklass la le <p>.

<form class="form-horizontal">
  <div class="form-group">
    <label class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <p class="form-control-static">[email protected]</p>
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword" placeholder="Password">
    </div>
  </div>
</form>

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only">Email</label>
    <p class="form-control-static">[email protected]</p>
  </div>
  <div class="form-group">
    <label for="inputPassword2" class="sr-only">Password</label>
    <input type="password" class="form-control" id="inputPassword2" placeholder="Password">
  </div>
  <button type="submit" class="btn btn-default">Confirm identity</button>
</form>

Focus nɔnɔme

Míeɖea outlineatsyã siwo woɖo ɖi le nɔnɔmetata ƒe dziɖuɖu aɖewo dzi ɖa eye míetsɔa a ɖoa box-shadoweteƒe na :focus.

Demo `:focus`dukɔ

Kpɔɖeŋu si le etame la zãa atsyã siwo wowɔ ɖe ɖoɖo nu le míaƒe nuŋlɔɖiwo me tsɔ ɖea :focusnɔnɔme si le a .form-control.

Nuwɔametɔ ƒe nɔnɔme

Tsɔ disabledboolean nɔnɔme kpe ɖe nyawo tsɔtsɔ de eme ŋu be nàxe mɔ ɖe zãla ƒe kadodowo nu. Nusiwo wotsɔ de eme siwo nuwɔametɔwoe la dzena abe ɖe wole bɔbɔe wu eye wotsɔa not-allowedfli aɖe kpena ɖe wo ŋu.

<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>

Nuwɔametɔwo ƒe agbledeƒewo

Tsɔ disablednɔnɔmea kpe ɖe a <fieldset>ŋu be nàwɔ dziɖuɖu siwo katã le eme la nuwɔametɔe <fieldset>zi ɖeka.

Nuxlɔ̃ame tso kadodo ƒe dɔwɔwɔ ŋu le`<a>`

Le gɔmedzedzea me la, web-browserwo awɔ nu ɖe native form controls ( <input>, <select>kple <button>elements) siwo katã le a me ŋu <fieldset disabled>abe nuwɔametɔwo ene, si axe mɔ na keyboard kple mouse siaa ƒe kadodo le wo dzi. Gake ne nusiwo le wò agbalẽvia me hã le eme <a ... class="btn btn-*">la, ke pointer-events: none. Abe alesi míede dzesii le akpa si ku ɖe nuwɔametɔ ƒe nɔnɔme ŋu na abɔtawo (eye vevietɔ le akpa sue si ku ɖe seke ƒe akpawo ŋu) me ene la, womeɖo CSS ƒe nɔnɔme sia ɖe ɖoɖo nu haɖe o eye womedo alɔe bliboe le Opera 18 kple esiwo le ete me o, alo le Internet Explorer 11 me, eye wòɖu dzi 't xe mɔ na keyboard zãlawo be woagate ŋu atsɔ woƒe susu aɖo kadodo siawo ŋu alo awɔ wo ŋudɔ o. Eyata be nànɔ dedie la, zã JavaScript si wowɔ ɖe ɖoɖo nu nàtsɔ awɔ kadodo mawo ŋudɔ.

Cross-browser ƒe dɔwɔwɔ ɖekae

Togbɔ be Bootstrap awɔ atsyã siawo ŋudɔ le web-browserwo katã me hã la, Internet Explorer 11 kple esiwo le ete mewɔa dɔ bliboe le disablednɔnɔme si le a <fieldset>. Zã JavaScript si nèwɔ ɖe ɖoɖo nu nàtsɔ axe mɔ ɖe fieldset la nu le web-browser siawo me.

<form>
  <fieldset disabled>
    <div class="form-group">
      <label for="disabledTextInput">Disabled input</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
    </div>
    <div class="form-group">
      <label for="disabledSelect">Disabled select menu</label>
      <select id="disabledSelect" class="form-control">
        <option>Disabled select</option>
      </select>
    </div>
    <div class="checkbox">
      <label>
        <input type="checkbox"> Can't check this
      </label>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </fieldset>
</form>

Nuxexlẽ ɖeɖeko gblɔ

Tsɔ readonlyboolean nɔnɔme kpe ɖe nyawo tsɔtsɔ de eme ŋu be nàxe mɔ ɖe nyawo tsɔtsɔ de eme ƒe asixɔxɔ ƒe tɔtrɔ nu. Nuxexlẽ ɖeɖeko ƒe nyawo dzena le bɔbɔe wu (abe nyawo tsɔtsɔ de nuwɔametɔwoe ene), gake lé fli si wozãna ɖaa la ɖe asi.

<input class="form-control" type="text" placeholder="Readonly input here…" readonly>

Kpekpeɖeŋu nuŋɔŋlɔ

Block level kpekpeɖeŋu nuŋɔŋlɔ na agbalẽvi dzi kpɔkpɔwo.

Kpekpeɖeŋu nuŋɔŋlɔa tsɔtsɔ do ƒome kple agbalẽvi dzi kpɔkpɔwo

Ele be kpekpeɖeŋunuŋɔŋlɔ nado ƒome tẽ kple nuŋlɔɖi ƒe dziɖuɖu si wòku ɖe aria-describedbynɔnɔmea zazã ŋu. Esia ana kpekpeɖeŋu mɔ̃ɖaŋunuwo – abe screen readers ene – aɖe gbeƒã kpekpeɖeŋu nuŋɔŋlɔ sia ne ezãla ƒe susu le nu ŋu alo ge ɖe dziɖuɖua me.

<label class="sr-only" for="inputHelpBlock">Input with help text</label>
<input type="text" id="inputHelpBlock" class="form-control" aria-describedby="helpBlock">
...
<span id="helpBlock" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>

Validation gblɔ be

Bootstrap dea kpeɖodzi atsyãwo na vodada, nuxlɔ̃ame, kple dzidzedzekpɔkpɔ ƒe nɔnɔmewo le agbalẽvi ƒe dziɖuɖuwo dzi. Be nàzã la, tsɔ .has-warning, .has-error, alo .has-successkpe ɖe dzila ƒe akpaa ŋu. .control-label, .form-control, kple akpa ma me ɖesiaɖe .help-blockaxɔ kpeɖodzi ƒe atsyãwo.

Dodoɖeŋgɔ ƒe nɔnɔme tsɔtsɔ yi na kpekpeɖeŋu mɔ̃ɖaŋunuwo kple amadede ƒe ŋkumaʋumaʋuwo zazãlawo

Dɔdasi ƒe atsyã siawo zazã atsɔ afia nɔnɔme si me agbalẽvi dzi kpɔkpɔ le koe naa nukpɔkpɔ, amadede ƒe dzesi, si womatsɔ na kpekpeɖeŋu mɔ̃ɖaŋununya zãlawo - abe screen readers ene - alo na amadede ƒe ŋkumaʋumaʋu zãlawo o.

Kpɔ egbɔ be wowɔ dukɔa ƒe dzesi bubu aɖe hã. Le kpɔɖeŋu me, àteŋu ade aɖaŋuɖoɖo aɖe tso nɔnɔme ŋu le nuŋlɔɖidzikpɔkpɔ ƒe <label>nuŋɔŋlɔ ŋutɔ me (abe alesi wòle le kɔda ƒe kpɔɖeŋu si gbɔna me ene), ade Glyphicon (kple nuŋɔŋlɔ bubu si sɔ to .sr-onlyklass la zazã me - kpɔ Glyphicon ƒe kpɔɖeŋuwo ), alo to nana me kpekpeɖeŋu bubu ƒe nuŋɔŋlɔwo ƒe mɔxexe. Le kpekpeɖeŋu mɔ̃ɖaŋunuwo koŋ gome la, woate ŋu ade aria-invalid="true"nɔnɔme aɖe asi na agbalẽvi dzi kpɔkpɔ siwo mesɔ o hã.

<div class="form-group has-success">
  <label class="control-label" for="inputSuccess1">Input with success</label>
  <input type="text" class="form-control" id="inputSuccess1" aria-describedby="helpBlock2">
  <span id="helpBlock2" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
</div>
<div class="form-group has-warning">
  <label class="control-label" for="inputWarning1">Input with warning</label>
  <input type="text" class="form-control" id="inputWarning1">
</div>
<div class="form-group has-error">
  <label class="control-label" for="inputError1">Input with error</label>
  <input type="text" class="form-control" id="inputError1">
</div>
<div class="has-success">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxSuccess" value="option1">
      Checkbox with success
    </label>
  </div>
</div>
<div class="has-warning">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxWarning" value="option1">
      Checkbox with warning
    </label>
  </div>
</div>
<div class="has-error">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxError" value="option1">
      Checkbox with error
    </label>
  </div>
</div>

Kple nɔnɔmetata siwo woate ŋu atia

Àte ŋu atsɔ nyaŋuɖoɖo ƒe dzesi siwo nèdi hã akpe ɖe eŋu .has-feedbackkple dzesi si nye kple ɖusime.

Nyaŋuɖoɖo ƒe dzesiwo wɔa dɔ kple nuŋɔŋlɔ ƒe <input class="form-control">akpawo ko.

Dzesiwo, dzesiwo, kple nyawo tsɔtsɔ de eme ƒe ƒuƒoƒowo

Wobia be woaɖo nyaŋuɖoɖo ƒe dzesiwo ɖe teƒe ɖeka kple asi na nyawo tsɔtsɔ de eme siwo ŋu dzeside mele o kple nyawo tsɔtsɔ de eme ƒe ƒuƒoƒo siwo ŋu wotsɔ kpeɖeŋutɔ ɖo le ɖusime. Míele dzi dem ƒo na wò vevie be nàna dzesidewo na nusiwo katã wotsɔ de eme le susu siwo ta woate ŋu akpɔ wo gbɔ ta. Ne èdi be yeaxe mɔ ɖe dzesiwo ƒe ɖeɖefia nu la, ɣla wo kple .sr-onlyklass la. Ne ele be nàwɔe dzesiwo manɔmee la, trɔ asi tople nyaŋuɖoɖo ƒe dzesi ƒe asixɔxɔ ŋu. Le nyawo tsɔtsɔ de eme ƒe ƒuƒoƒowo gome la, trɔ asi le rightasixɔxɔa ŋu ɖe pixel ƒe asixɔxɔ si sɔ nu le wò kpeɖeŋutɔ ƒe kekeme nu.

Gɔmesese si le nɔnɔmetata la ŋu gbɔgblɔ na mɔ̃ɖaŋununya siwo kpena ɖe ame ŋu

Be woakpɔ egbɔ be mɔ̃ɖaŋununya siwo kpena ɖe ame ŋu – abe screen readers ene – ɖe dzesi aɖe ƒe gɔmesese fia nyuie la, ele be woatsɔ nuŋɔŋlɔ ɣaɣla bubuwo akpe ɖe .sr-onlyklass la ŋu eye woatsɔe asɔ kple agbalẽvi dzi kpɔkpɔ si ku ɖe eŋudɔwɔwɔ ŋu tẽ aria-describedby. Alo, kpɔ egbɔ be gɔmesesea (le kpɔɖeŋu me, nyateƒe si wònye be nuxlɔ̃ame aɖe li na nuŋɔŋlɔ ƒe akpa aɖe koŋ) la gblɔ le mɔ bubu aɖe nu, abe tɔtrɔ ŋutɔŋutɔ si <label>do ƒome kple nuŋlɔɖia dzi kpɔkpɔ ene.

Togbɔ be kpɔɖeŋu siwo gbɔna yɔ woƒe nɔnɔmetata dzi kpɔkpɔ ƒe kpeɖodzi ƒe nɔnɔme xoxo le <label>nuŋɔŋlɔa ŋutɔ me hã la, wotsɔ aɖaŋu si le etame (si wozã .sr-onlynuŋɔŋlɔ kple aria-describedby) la de eme hena kpɔɖeŋu.

<div class="form-group has-success has-feedback">
  <label class="control-label" for="inputSuccess2">Input with success</label>
  <input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputSuccess2Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-warning has-feedback">
  <label class="control-label" for="inputWarning2">Input with warning</label>
  <input type="text" class="form-control" id="inputWarning2" aria-describedby="inputWarning2Status">
  <span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
  <span id="inputWarning2Status" class="sr-only">(warning)</span>
</div>
<div class="form-group has-error has-feedback">
  <label class="control-label" for="inputError2">Input with error</label>
  <input type="text" class="form-control" id="inputError2" aria-describedby="inputError2Status">
  <span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
  <span id="inputError2Status" class="sr-only">(error)</span>
</div>
<div class="form-group has-success has-feedback">
  <label class="control-label" for="inputGroupSuccess1">Input group with success</label>
  <div class="input-group">
    <span class="input-group-addon">@</span>
    <input type="text" class="form-control" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status">
  </div>
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputGroupSuccess1Status" class="sr-only">(success)</span>
</div>

Nɔnɔmetata siwo woate ŋu atia le nɔnɔme siwo le tsia dzi kple esiwo le fli me me

<form class="form-horizontal">
  <div class="form-group has-success has-feedback">
    <label class="control-label col-sm-3" for="inputSuccess3">Input with success</label>
    <div class="col-sm-9">
      <input type="text" class="form-control" id="inputSuccess3" aria-describedby="inputSuccess3Status">
      <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
      <span id="inputSuccess3Status" class="sr-only">(success)</span>
    </div>
  </div>
  <div class="form-group has-success has-feedback">
    <label class="control-label col-sm-3" for="inputGroupSuccess2">Input group with success</label>
    <div class="col-sm-9">
      <div class="input-group">
        <span class="input-group-addon">@</span>
        <input type="text" class="form-control" id="inputGroupSuccess2" aria-describedby="inputGroupSuccess2Status">
      </div>
      <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
      <span id="inputGroupSuccess2Status" class="sr-only">(success)</span>
    </div>
  </div>
</form>

<form class="form-inline">
  <div class="form-group has-success has-feedback">
    <label class="control-label" for="inputSuccess4">Input with success</label>
    <input type="text" class="form-control" id="inputSuccess4" aria-describedby="inputSuccess4Status">
    <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
    <span id="inputSuccess4Status" class="sr-only">(success)</span>
  </div>
</form>
<form class="form-inline">
  <div class="form-group has-success has-feedback">
    <label class="control-label" for="inputGroupSuccess3">Input group with success</label>
    <div class="input-group">
      <span class="input-group-addon">@</span>
      <input type="text" class="form-control" id="inputGroupSuccess3" aria-describedby="inputGroupSuccess3Status">
    </div>
    <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
    <span id="inputGroupSuccess3Status" class="sr-only">(success)</span>
  </div>
</form>

`.sr-only`Dzesi siwo woate ŋu awɔ le wo ɖokui si siwo dzi woŋlɔ ŋkɔ siwo woɣla ɖo

Ne èzã .sr-onlyklass la tsɔ ɣla agbalẽvi dzi kpɔkpɔ ƒe <label>(ke menye be nàzã dzesidede tiatia bubuwo, abe aria-labelnɔnɔme ene) la, Bootstrap atrɔ asi le dzesi la ƒe nɔƒe le eɖokui si ne wonya tsɔe kpee ko.

@ .

<div class="form-group has-success has-feedback">
  <label class="control-label sr-only" for="inputSuccess5">Hidden label</label>
  <input type="text" class="form-control" id="inputSuccess5" aria-describedby="inputSuccess5Status">
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputSuccess5Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-success has-feedback">
  <label class="control-label sr-only" for="inputGroupSuccess4">Input group with success</label>
  <div class="input-group">
    <span class="input-group-addon">@</span>
    <input type="text" class="form-control" id="inputGroupSuccess4" aria-describedby="inputGroupSuccess4Status">
  </div>
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputGroupSuccess4Status" class="sr-only">(success)</span>
</div>

Kpɔ lolome dzi ɖuɖu

Ðo kɔkɔƒewo to klasswo abe .input-lg, eye nàɖo kekemewo to grid column ƒe klasswo abe .col-lg-*.

Kɔkɔme ƒe lolome ƒe lolome

Wɔ nɔnɔmedzikpɔnu siwo kɔkɔ wu alo esiwo le kpuie wu siwo sɔ kple abɔta ƒe lolomewo.

<input class="form-control input-lg" type="text" placeholder=".input-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control input-sm" type="text" placeholder=".input-sm">

<select class="form-control input-lg">...</select>
<select class="form-control">...</select>
<select class="form-control input-sm">...</select>

Horizontal form ƒuƒoƒo ƒe lolomewo

Kplɔ dzesidewo ƒe lolome kple nɔnɔmetata ƒe dziɖuɖuwo ɖe eme .form-horizontalto .form-group-lgalo tsɔtsɔ kpee me .form-group-sm.

<form class="form-horizontal">
  <div class="form-group form-group-lg">
    <label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label>
    <div class="col-sm-10">
      <input class="form-control" type="text" id="formGroupInputLarge" placeholder="Large input">
    </div>
  </div>
  <div class="form-group form-group-sm">
    <label class="col-sm-2 control-label" for="formGroupInputSmall">Small label</label>
    <div class="col-sm-10">
      <input class="form-control" type="text" id="formGroupInputSmall" placeholder="Small input">
    </div>
  </div>
</form>

Sɔtiwo ƒe lolome ɖoɖo

Kpe nyawo ɖe grid sɔtiwo me, alo dzila ƒe akpa ɖesiaɖe si wowɔ ɖe ɖoɖo nu, be nàzi kekeme siwo nèdi dzi bɔbɔe.

<div class="row">
  <div class="col-xs-2">
    <input type="text" class="form-control" placeholder=".col-xs-2">
  </div>
  <div class="col-xs-3">
    <input type="text" class="form-control" placeholder=".col-xs-3">
  </div>
  <div class="col-xs-4">
    <input type="text" class="form-control" placeholder=".col-xs-4">
  </div>
</div>

Abɔta ƒe dzesiwo

Zã abɔta ƒe hatsotsowo le <a>, <button>, alo <input>element aɖe dzi.

<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">

Nya siwo ƒo xlãe zazã koŋ

Togbɔ be woateŋu azã button classes le <a>kple <button>elements dzi hã la, <button>elements koe wodoa alɔ le míaƒe nav kple navbar components me.

Kadodo siwo wɔa dɔ abe abɔtawo ene

Ne wozã <a>nuawo tsɔ wɔa dɔ abe abɔtawo ene – si hea axaa me dɔwɔwɔ vɛ, tsɔ wu be woazɔ mɔ ayi nuŋlɔɖi alo akpa bubu si le axa si li fifia me la – ele be woana role="button".

Cross-browser ƒe gɔmeɖeɖe

Abe nuwɔna nyuitɔ ene la, míele aɖaŋu ɖom na wò vevie be nàzã <button>element la ɣesiaɣi si wòanya wɔ be nàkpɔ egbɔ be cross-browser rendering sɔ.

Le nu bubuwo dome la, vodada aɖe le Firefox <30 me si xea mɔ na mí be míagaɖo line-heightof <input>-dzi abɔtawo o, si na be womesɔ kple abɔta bubuwo ƒe kɔkɔme tututu le Firefox dzi o.

Tiatiawɔblɔɖewo

Zã abɔta ƒe hatsotso siwo li la dometɔ ɖesiaɖe nàtsɔ awɔ abɔta si wowɔ ɖe atsyã nu kaba.

<!-- Standard button -->
<button type="button" class="btn btn-default">Default</button>

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">Primary</button>

<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">Success</button>

<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">Info</button>

<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">Warning</button>

<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">Danger</button>

<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">Link</button>

Gɔmesese nana mɔ̃ɖaŋununya siwo kpena ɖe ame ŋu

Amadede zazã atsɔ atsɔ gɔmesese akpe ɖe abɔta ŋu koe naa nukpɔkpɔ ƒe dzesi aɖe, si womagblɔ na kpekpeɖeŋunamɔ̃wo zazãlawo o – abe screen readers ene. Kpɔ egbɔ be nyatakaka siwo wotsɔ amadedea de dzesii la dze ƒã tso emenyawo ŋutɔ me (abɔta la ƒe nuŋɔŋlɔ si wokpɔna), alo wotsɔe de eme to mɔnu bubuwo dzi, abe nuŋɔŋlɔ bubu siwo woɣla ɖe .sr-onlyklass la ŋu ene.

Agbɔsɔsɔmewo

Ðe nèdi be yeakpɔ abɔta siwo lolo wu alo esiwo le sue wua? Tsɔ .btn-lg, .btn-sm, alo .btn-xskpe ɖe eŋu hena lolome bubuwo.

<p>
  <button type="button" class="btn btn-primary btn-lg">Large button</button>
  <button type="button" class="btn btn-default btn-lg">Large button</button>
</p>
<p>
  <button type="button" class="btn btn-primary">Default button</button>
  <button type="button" class="btn btn-default">Default button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-sm">Small button</button>
  <button type="button" class="btn btn-default btn-sm">Small button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-xs">Extra small button</button>
  <button type="button" class="btn btn-default btn-xs">Extra small button</button>
</p>

Wɔ block level buttons—esiwo keke dzila ƒe kekeme bliboa—to .btn-block.

<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>

Nɔnɔme si le dɔ wɔm

Abɔtawo adze ne wozi (kple megbenya si do viviti wu, liƒo si do viviti wu, kple vɔvɔli si wotsɔ de eme) ne wole dɔ wɔm. Le <button>elementwo gome la, wowɔa esia to :active. Le <a>elementwo gome la, wowɔe kple .active. Ke hã, àteŋu azã .activele <button>s dzi (eye nàde aria-pressed="true"nɔnɔmea eme) nenye be ehiã be nàgbugbɔ nɔnɔme si le dɔ wɔm la awɔ le ɖoɖowɔɖi me.

Abɔta ƒe akpa aɖe

Mehiã be nàtsɔ akpe ɖe eŋu :activeo elabena enye alakpa-klass, gake ne ehiã be nàzi dzedzeme ma ke dzi la, yi ŋgɔ nàtsɔe akpe ɖe eŋu .active.

<button type="button" class="btn btn-primary btn-lg active">Primary button</button>
<button type="button" class="btn btn-default btn-lg active">Button</button>

Seƒoƒo ƒe akpa aɖe

Tsɔ .activeklass la kpe ɖe <a>abɔtawo ŋu.

Kadodo gbãtɔ Kadodo

<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg active" role="button">Link</a>

Nuwɔametɔ ƒe nɔnɔme

Na abɔtawo nadze abe ɖe womate ŋu azi wo dzi o ene to wo gbugbɔgatsɔ opacity.

Abɔta ƒe akpa aɖe

Tsɔ disablednɔnɔmea kpe ɖe <button>abɔtawo ŋu.

<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>
<button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>

Cross-browser ƒe dɔwɔwɔ ɖekae

Ne ètsɔ disablednɔnɔmea kpe ɖe a ŋu <button>la, Internet Explorer 9 kple esiwo le ete la awɔ nuŋɔŋlɔa wòazu ɣie kple nuŋɔŋlɔ-vɔvɔli nyɔŋu aɖe si míate ŋu aɖɔ ɖo o.

Seƒoƒo ƒe akpa aɖe

Tsɔ .disabledklass la kpe ɖe <a>abɔtawo ŋu.

Kadodo gbãtɔ Kadodo

<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>

Míezãnɛ .disabledabe viɖenu ƒe hatsotso ene le afisia, si sɔ kple .activeklass si bɔ, eyata mehiã ŋgɔdonya aɖeke o.

Kadodo ƒe dɔwɔwɔ ƒe nuxlɔ̃ame

Klass sia zãna pointer-events: nonetsɔ dzea agbagba be yeawɔ <a>s ƒe kadodo ƒe dɔwɔwɔ nuwɔametɔ, gake womeɖo CSS ƒe nɔnɔme ma ɖe ɖoɖo nu haɖe o eye womedo alɔe bliboe le Opera 18 kple esiwo le ete me o, alo le Internet Explorer 11. Tsɔ kpe ɖe eŋu la, le browser siwo doa alɔ pointer-events: none, keyboard gɔ̃ hã me mɔfianu mekpɔa ŋusẽ ɖe edzi o, si fia be keyboard zãla siwo kpɔa nu kple mɔ̃ɖaŋununya siwo kpena ɖe ame ŋu zãlawo ate ŋu awɔ kadodo siawo ŋudɔ kokoko. Eyata be nànɔ dedie la, zã JavaScript si wowɔ ɖe ɖoɖo nu nàtsɔ awɔ kadodo mawo ŋudɔ.

Nɔnɔmetata siwo ɖoa nya ŋu

Woate ŋu awɔ nɔnɔmetata siwo le Bootstrap 3 me wòanye ŋuɖoɖo-xɔlɔ̃wɔwɔ to .img-responsiveklass la tsɔtsɔ kpee me. Esia ku ɖe max-width: 100%;, height: auto;kple display: block;nɔnɔmetata la ŋu ale be wòadzidze nyuie ɖe dzila ƒe akpaa ŋu.

Be nàɖo nɔnɔmetata siwo zãa .img-responsiveklass la ɖe titina la, zã .center-blockɖe .text-center. Kpɔ kpeɖeŋutɔ ƒe klasswo ƒe akpaa hena numeɖeɖe bubuwo tso .center-blockzazã ŋu.

SVG nɔnɔmetatawo kple IE 8-10

Le Internet Explorer 8-10 me la, SVG nɔnɔmetatawo kple .img-responsiveƒe lolome mesɔ gbɔ o. Be nàɖɔ esia ɖo la, tsɔe kpee width: 100% \9;le afisi wòhiã le. Bootstrap mewɔa esia ŋudɔ le eɖokui si o elabena ehea kuxiwo vɛ na nɔnɔmetata ƒe nɔnɔme bubuwo.

<img src="..." class="img-responsive" alt="Responsive image">

Nɔnɔmetata ƒe nɔnɔmewo

Tsɔ klasswo kpe ɖe <img>element aɖe ŋu be nàwɔ nɔnɔmetatawo ƒe atsyã bɔbɔe le dɔ ɖesiaɖe me.

Cross-browser ƒe dɔwɔwɔ ɖekae

Nenɔ susu me na wò be Internet Explorer 8 mekpɔa kpekpeɖeŋu na dzogoe goglowo o.

<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">

Amadede siwo le nya siwo ƒo xlãe me

Gɔmesese to amadede me kple asibidɛ ʋee aɖewo gbetete ɖe viɖenu ƒe klasswo. Woateŋu awɔ esiawo hã ɖe kadodowo ŋu eye woado viviti le hover dzi abe míaƒe kadodo ƒe atsyã gbãtɔwo ene.

Fusce dapibus, tellus ac fiƒode si wotsɔ ƒo ƒui, tortor mauris nibh.

Nullam id dolor id nibh ultricies ʋuwo ut id elit.

Duis mollis, est non commodo luctus, si nye lãgbalẽ si wotsɔna tsɔa lãwoe.

Maecenas sed diam eget risus varius blandit bɔbɔ nɔ anyi amet non magna.

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

Donec ullamcorper nulla si menye metus nudzrala ƒe ʋuʋudedi o.

<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>

Nuwɔwɔ ɖe nya aɖewo koŋ ŋu

Ɣeaɖewoɣi la, womate ŋu awɔ gbeteteɖedzi ƒe klasswo ŋudɔ o le tiatiawɔla bubu ƒe nɔnɔme tɔxɛ ta. Zi geɖe la, egbɔkpɔnu si sɔ enye be nàxatsa wò nuŋɔŋlɔa ɖe a <span>me kple klass la.

Gɔmesese nana mɔ̃ɖaŋununya siwo kpena ɖe ame ŋu

Amadede zazã atsɔ akpe ɖe gɔmesese ŋu koe naa nukpɔkpɔ ƒe dzesi aɖe, si womagblɔ na kpekpeɖeŋunamɔ̃wo zazãlawo o – abe screen readers ene. Kpɔ egbɔ be nyatakaka siwo wotsɔ amadedea de dzesii la dze ƒã tso emenyawo ŋutɔ me (ɖeko wozãa amadede siwo le nya siwo ƒo xlãe me tsɔ doa ŋusẽ gɔmesese si le nuŋɔŋlɔa/dzesi la me xoxo), alo wotsɔe de eme to mɔnu bubuwo dzi, abe nuŋɔŋlɔ bubu siwo woɣla ɖe .sr-onlyklass la ŋu ene .

Nya siwo ƒo xlãe ƒe nɔnɔmewo

Abe alesi wòle le nuŋɔŋlɔ ƒe amadede ƒe hatsotso siwo le nya siwo ƒo xlãe me ene la, ɖo nu aɖe ƒe megbenyawo bɔbɔe ɖe nya siwo ƒo xlãe ƒe klass ɖesiaɖe ŋu. Anchor ƒe akpawo ado viviti le hover dzi, abe nuŋɔŋlɔ ƒe klasswo ene.

Nullam id dolor id nibh ultricies ʋuwo ut id elit.

Duis mollis, est non commodo luctus, si nye lãgbalẽ si wotsɔna tsɔa lãwoe.

Maecenas sed diam eget risus varius blandit bɔbɔ nɔ anyi amet non magna.

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

Donec ullamcorper nulla si menye metus nudzrala ƒe ʋuʋudedi o.

<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>

Nuwɔwɔ ɖe nya aɖewo koŋ ŋu

Ɣeaɖewoɣi la, womate ŋu awɔ nya siwo ƒo xlãe ƒe megbenyawo ƒe hatsotsowo ŋudɔ o le tiatiawɔla bubu ƒe nɔnɔme tɔxɛ ta. Le go aɖewo me la, egbɔkpɔnu si sɔ enye be nàxatsa wò element ƒe emenyawo ɖe a <div>me kple klass la.

Gɔmesese nana mɔ̃ɖaŋununya siwo kpena ɖe ame ŋu

Abe alesi wòle le amadede siwo ƒo xlãe gome ene la , kpɔ egbɔ be gɔmesese ɖesiaɖe si woagblɔ to amadede dzi hã gblɔ le nɔnɔme si menye nuƒoƒo dzro aɖe ko me o nu.

Kplɔ dzesi la nu

Zã generic close icon hena gbegbe nyatakakawo abe modals kple nuxlɔ̃amewo ene.

<button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>

Caretwo ƒe ƒuƒoƒo

Zã carets nàtsɔ afia dɔwɔwɔ kple mɔfiame si le fli dzi. De dzesii be caret si woɖo ɖi la atrɔ le eɖokui si le dropup menus me .

<span class="caret"></span>

Nusiwo wotsɔna ƒua tsi kabakaba

Tsɔ element aɖe ƒu gbe ɖe miame alo ɖusime kple klass aɖe. !importantwotsɔ de eme be woaƒo asa na nya siwo ku ɖe nya aɖewo koŋ ŋu. Woate ŋu azã klasswo hã abe mixin ene.

<div class="pull-left">...</div>
<div class="pull-right">...</div>

// Classes
.pull-left {
  float: left !important;
}
.pull-right {
  float: right !important;
}

// Usage as mixins
.element {
  .pull-left();
}
.another-element {
  .pull-right();
}

Titina me nyawo ƒe mɔxenuwo

Ðo element aɖe ɖe display: blockkple titina to margin. Woate ŋu akpɔe abe mixin kple klass ene.

<div class="center-block">...</div>

// Class
.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

// Usage as a mixin
.element {
  .center-block();
}

Klɔe ɖa

Klɔ floats bɔbɔe to etsɔtsɔ kpe .clearfix ɖe dzila ƒe akpaa ŋu me . Ezãa micro clearfix la abe alesi Nicolas Gallagher na amewo lɔ̃e ene. Woate ŋu azãe hã abe mixin ene.

<!-- Usage as a class -->
<div class="clearfix">...</div>

// Mixin itself
.clearfix() {
  &:before,
  &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

// Usage as a mixin
.element {
  .clearfix();
}

Nyatakakawo ɖeɖefia kple wo ɣla

Zi element aɖe dzi be woaɖee afia alo aɣla ( si me screen readers hã le ) kple .showkple .hiddenklasswo zazã. Klass siawo zãna !importanttsɔ ƒoa asa na nya aɖewo koŋ ƒe masɔmasɔwo, abe alesi ko tsia dzi kabakaba ene . Wole na block level toggling ko. Woate ŋu azã wo hã abe mixin ene.

.hideli, gake mekpɔa ŋusẽ ɖe screen readers dzi ɣesiaɣi o eye womegazãnɛ le v3.0.1 dzi o. Zã .hiddenalo nàzã .sr-onlyɖe eteƒe.

Gawu la, .invisiblewoateŋu azãe atsɔ atrɔ asi le nu aɖe ƒe dzedzeme ko ŋu, si fia displaybe wometrɔ asi le eŋu o eye nu la ateŋu akpɔ ŋusẽ ɖe nuŋlɔɖia ƒe sisi dzi kokoko.

<div class="show">...</div>
<div class="hidden">...</div>

// Classes
.show {
  display: block !important;
}
.hidden {
  display: none !important;
}
.invisible {
  visibility: hidden;
}

// Usage as mixins
.element {
  .show();
}
.another-element {
  .hidden();
}

Screen reader kple keyboard dzi mɔfiamewo

Ɣla nu aɖe na mɔ̃wo katã negbe screen readers siwo ŋu .sr-only. Tsɔe ƒo ƒu .sr-onlykple .sr-only-focusablebe nàgaɖe element la afia ne eƒe susu le eŋu (le kpɔɖeŋu me, to keyboard-ko zãla dzi). Ehiã be woawɔ ɖe mɔnu nyuitɔ siwo dzi woato akpɔ mɔnukpɔkpɔwo dzi . Woate ŋu azãe hã abe mixins ene.

<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>

// Usage as a mixin
.skip-navigation {
  .sr-only();
  .sr-only-focusable();
}

Nɔnɔmetatawo ɖɔliɖɔli

Zã .text-hideklass alo mixin nàtsɔ akpe asi ɖe element aɖe ƒe nuŋɔŋlɔ me nyawo ŋu kple megbenɔnɔmetata.

<h1 class="text-hide">Custom heading</h1>

// Usage as a mixin
.heading {
  .text-hide();
}

Be asitelefon dzi wɔwɔ kabakaba wu la, zã dɔwɔnu ƒe hatsotso siawo hena nyatakakawo ɖeɖefia kple wo ɣla ɖe mɔ̃ dzi to nyadzɔdzɔgblɔmɔ̃wo biabia dzi. Azɔ hã, dɔwɔnu ƒe klass siwo wotsɔna trɔa asi le nyatakakawo ŋu ne wotae la le eme.

Dze agbagba nàzã esiawo le seɖoƒe aɖe nu eye nàƒo asa na nyatakakadzraɖoƒe ɖeka ƒe tɔtrɔ vovovowo kura wɔwɔ. Ke boŋ zã wo nàtsɔ akpe ɖe mɔ̃ ɖesiaɖe ƒe nuƒoƒo ŋu.

Klass siwo li

Zã klass siwo li la dometɔ ɖeka alo ƒokpli hena nyatakakawo ƒe tɔtrɔ le nukpɔƒe ƒe vovototowo me.

	Mɔ̃ sue siwo sɔ gbɔ wuTelefonwo (<768px) .	Mɔ̃ suewoTablɛtwo (≥768px) .	Mɔ̃ siwo le titinaDɔwɔkplɔ̃wo (≥992px) .	Mɔ̃ gãwoDɔwɔkplɔ̃wo (≥1200px) .
`.visible-xs-*`	Woate ŋu akpɔe	Si le ɣaɣlame	Si le ɣaɣlame	Si le ɣaɣlame
`.visible-sm-*`	Si le ɣaɣlame	Woate ŋu akpɔe	Si le ɣaɣlame	Si le ɣaɣlame
`.visible-md-*`	Si le ɣaɣlame	Si le ɣaɣlame	Woate ŋu akpɔe	Si le ɣaɣlame
`.visible-lg-*`	Si le ɣaɣlame	Si le ɣaɣlame	Si le ɣaɣlame	Woate ŋu akpɔe
`.hidden-xs`	Si le ɣaɣlame	Woate ŋu akpɔe	Woate ŋu akpɔe	Woate ŋu akpɔe
`.hidden-sm`	Woate ŋu akpɔe	Si le ɣaɣlame	Woate ŋu akpɔe	Woate ŋu akpɔe
`.hidden-md`	Woate ŋu akpɔe	Woate ŋu akpɔe	Si le ɣaɣlame	Woate ŋu akpɔe
`.hidden-lg`	Woate ŋu akpɔe	Woate ŋu akpɔe	Woate ŋu akpɔe	Si le ɣaɣlame

Tso v3.2.0 dzi la, .visible-*-*klasswo na breakpoint ɖesiaɖe va le tɔtrɔ etɔ̃ me, ɖeka na CSS displayƒe nunɔamesi ƒe asixɔxɔ ɖesiaɖe si woŋlɔ ɖe ete.

Klasswo ƒe ƒuƒoƒo	CSS ƒe ƒuƒoƒo`display`
`.visible-*-block`	`display: block;`
`.visible-*-inline`	`display: inline;`
`.visible-*-inline-block`	`display: inline-block;`

Eyata, na screen sue bubuwo ( xs) le kpɔɖeŋu me, .visible-*-*klass siwo li lae nye: .visible-xs-block, .visible-xs-inline, kple .visible-xs-inline-block.

Klassawo .visible-xs, .visible-sm, .visible-md, kple .visible-lghã li, gake woɖe asi le wo ŋu tso v3.2.0 dzi. Wosɔ kple .visible-*-block, negbe nɔnɔme tɔxɛ bubuwo na toggling <table>-related elements ko.

Ta klasswo

Abe alesi wòle le klass siwo ɖoa nya ŋu edziedzi ene la, zã esiawo hena nyatakakawo ƒe tɔtrɔ be woata.

Klasswo me	Browser ƒe nyatakakadzraɖoƒea	Ta agbalẽa
`.visible-print-block` `.visible-print-inline` `.visible-print-inline-block`	Si le ɣaɣlame	Woate ŋu akpɔe
`.hidden-print`	Woate ŋu akpɔe	Si le ɣaɣlame

Klas la .visible-printhã li gake woɖe asi le eŋu tso v3.2.0 dzi. Esɔ kple .visible-print-block, negbe nɔnɔme tɔxɛ bubuwo kpe ɖe eŋu na <table>-nu siwo do ƒome kplii ko.

Dodokpɔwo ƒe nyawo

Trɔ wò browser ƒe lolome alo nàdae ɖe mɔ̃ vovovowo dzi be nàdo utility class siwo ɖoa nya ŋu la kpɔ.

Woate ŋu akpɔe le...

Dzesi damawo fia be element la le dzedzem le wò nukpɔkpɔƒe si nèle fifia me.

Susu sue aɖe wu ✔ Wodzena le x-small dzi

Sue ✔ Wokpɔnɛ le suewo dzi

Le vedome ✔ Wokpɔnɛ le medium dzi

Lolo ✔ Woate ŋu akpɔe le gã dzi

Susu kple sue siwo sɔ gbɔ wu ✔ Wodzena le x-sue kple sue dzi

Medidi kple gã ✔ Wodzena le titina kple gã dzi

Susu sue kple titina bubuwo ✔ Wodzena le x-small kple medium dzi

Sue kple gã ✔ Wodzena le suewo kple gãwo dzi

Susu kple gã siwo sɔ gbɔ wu ✔ Wodzena le x-sue kple gã dzi

Suewo kple esiwo le titina ✔ Wodzena le sue kple titina dzi

Woɣlae ɖe...

Le afisia la, dzesi damawo hã fia be woɣla element la ɖe wò nukpɔkpɔƒe si nèle fifia me.

Susu sue aɖe wu ✔ Woɣlae ɖe x-small dzi

Sue ✔ Woɣlae ɖe nu suewo dzi

Le vedome ✔ Woɣlae ɖe medium dzi

Lolo ✔ Woɣlae ɖe gã dzi

Susu kple sue siwo sɔ gbɔ wu ✔ Woɣlae ɖe x-sue kple sue dzi

Medidi kple gã ✔ Woɣlae ɖe titina kple gã dzi

Susu sue kple titina bubuwo ✔ Hidden on x-small and medium

Small and large ✔ Woɣlae ɖe sue kple gã dzi

Extra small and large ✔ Woɣlae ɖe x-sue kple gã dzi

Suewo kple esiwo le titina ✔ Hidden on small and medium

Wotu Bootstrap ƒe CSS ɖe Less dzi, si nye preprocessor si me dɔwɔwɔ bubuwo le abe tɔtrɔwo, mixins, kple dɔwɔwɔwo hena CSS ƒoƒo ƒu ene. Ame siwo le didim be yewoazã dzɔtsoƒe Less faɛlwo ɖe míaƒe CSS faɛl siwo míeƒo ƒu teƒe la ateŋu awɔ tɔtrɔ kple mixin gbogbo siwo míezãna le ɖoɖowɔɖia katã me la ŋudɔ.

Woƒo nu tso Grid ƒe tɔtrɔwo kple mixins ŋu le Grid ƒe ɖoɖo ƒe akpaa me .

Bootstrap ƒe ƒuƒoƒo

Woateŋu azã bootstrap le mɔ eve ya teti nu: kple CSS si woƒo ƒu alo kple dzɔtsoƒe Less faɛlwo. Be nàƒo Less faɛlwo nu ƒu la, kpɔ akpa si nye Getting Started hena alesi nàɖo wò ŋgɔyiyi ƒe nɔnɔme be wòawɔ sedede siwo hiã la.

Ame etɔ̃lia ƒe nuƒoƒoƒu dɔwɔnuwo ateŋu awɔ dɔ kple Bootstrap, gake míaƒe ƒuƒoƒo vevi la medoa alɔ wo o.

Nusiwo trɔna

Wozãa tɔtrɔwo le dɔ bliboa me abe mɔnu si dzi woato aɖo asixɔxɔ siwo wozãna zi geɖe abe amadedewo, dometsotso, alo ŋɔŋlɔdzesiwo ƒe ƒuƒoƒo ene ɖe teƒe ɖeka eye woama wo. Ne èdi be yeakpɔ eme bliboe la, taflatse kpɔ Customizer .

Amadedewo

Wɔ amadede eve zazã bɔbɔe: grayscale kple semantic. Amadede siwo le amadede dzẽ me naa mɔnukpɔkpɔ ame kaba be wòakpɔ amadede yibɔ siwo wozãna zi geɖe esime gɔmesesea lɔ amadede vovovo siwo wode asi na nya siwo ƒo xlãe ƒe asixɔxɔ siwo ŋu gɔmesese le la ɖe eme.

@gray-darker:  lighten(#000, 13.5%); // #222
@gray-dark:    lighten(#000, 20%);   // #333
@gray:         lighten(#000, 33.5%); // #555
@gray-light:   lighten(#000, 46.7%); // #777
@gray-lighter: lighten(#000, 93.5%); // #eee

@brand-primary: darken(#428bca, 6.5%); // #337ab7
@brand-success: #5cb85c;
@brand-info:    #5bc0de;
@brand-warning: #f0ad4e;
@brand-danger:  #d9534f;

Zã amadede ƒe tɔtrɔ siawo dometɔ aɖe abe alesi wole ene alo nàgbugbɔ ade asi na tɔtrɔ siwo ŋu gɔmesese le wu na wò dɔa.

// Use as-is
.masthead {
  background-color: @brand-primary;
}

// Reassigned variables in Less
@alert-message-background: @brand-info;
.alert {
  background-color: @alert-message-background;
}

Scaffolding ƒe ƒuƒoƒo

Trɔtrɔnu ʋɛ aɖewo hena wò nyatakakadzraɖoƒea ƒe ƒunukpeƒe ƒe akpa veviwo ƒe tɔtrɔ kabakaba.

// Scaffolding
@body-bg:    #fff;
@text-color: @black-50;

Kadodowo

Trɔ asi le wò kadodowo ŋu bɔbɔe kple amadede nyuitɔ kple asixɔxɔ ɖeka ko.

// Variables
@link-color:       @brand-primary;
@link-hover-color: darken(@link-color, 15%);

// Usage
a {
  color: @link-color;
  text-decoration: none;

  &:hover {
    color: @link-hover-color;
    text-decoration: underline;
  }
}

De dzesii be the @link-hover-colorzãa dɔwɔwɔ aɖe, dɔwɔnu dziŋɔ bubu tso Less gbɔ, tsɔ wɔa hover amadede nyuitɔ le eɖokui si. Àte ŋu azã darken, lighten, saturate, kple desaturate.

Agbalẽtata ƒe nuŋɔŋlɔ

Ðo wò nuŋɔŋlɔ ƒe nɔnɔme, nuŋɔŋlɔ ƒe lolome, ŋgɔdonya, kple bubuwo bɔbɔe kple tɔtrɔ kabakaba ʋɛ aɖewo. Bootstrap wɔa esiawo hã ŋudɔ tsɔ naa agbalẽtata ƒe mixins bɔbɔewo.

@font-family-sans-serif:  "Helvetica Neue", Helvetica, Arial, sans-serif;
@font-family-serif:       Georgia, "Times New Roman", Times, serif;
@font-family-monospace:   Menlo, Monaco, Consolas, "Courier New", monospace;
@font-family-base:        @font-family-sans-serif;

@font-size-base:          14px;
@font-size-large:         ceil((@font-size-base * 1.25)); // ~18px
@font-size-small:         ceil((@font-size-base * 0.85)); // ~12px

@font-size-h1:            floor((@font-size-base * 2.6)); // ~36px
@font-size-h2:            floor((@font-size-base * 2.15)); // ~30px
@font-size-h3:            ceil((@font-size-base * 1.7)); // ~24px
@font-size-h4:            ceil((@font-size-base * 1.25)); // ~18px
@font-size-h5:            @font-size-base;
@font-size-h6:            ceil((@font-size-base * 0.85)); // ~12px

@line-height-base:        1.428571429; // 20/14
@line-height-computed:    floor((@font-size-base * @line-height-base)); // ~20px

@headings-font-family:    inherit;
@headings-font-weight:    500;
@headings-line-height:    1.1;
@headings-color:          inherit;

Nɔnɔmetatawo

Trɔtrɔ kabakaba eve hena wò nɔnɔmetatawo ƒe teƒe kple faɛl ŋkɔ ƒe tɔtrɔ.

@icon-font-path:          "../fonts/";
@icon-font-name:          "glyphicons-halflings-regular";

Nusiwo le eme

Kpeɖeŋutɔ siwo le Bootstrap bliboa me wɔa tɔtrɔ aɖewo siwo woɖo ɖi ŋudɔ hena asixɔxɔ siwo bɔ ɖoɖo. Wo dometɔ siwo wozãna wue nye esi.

@padding-base-vertical:          6px;
@padding-base-horizontal:        12px;

@padding-large-vertical:         10px;
@padding-large-horizontal:       16px;

@padding-small-vertical:         5px;
@padding-small-horizontal:       10px;

@padding-xs-vertical:            1px;
@padding-xs-horizontal:          5px;

@line-height-large:              1.33;
@line-height-small:              1.5;

@border-radius-base:             4px;
@border-radius-large:            6px;
@border-radius-small:            3px;

@component-active-color:         #fff;
@component-active-bg:            @brand-primary;

@caret-width-base:               4px;
@caret-width-large:              5px;

Nudzralawo ƒe mixins

Vendor mixins nye mixins be wòakpe ɖe ŋuwò nàdo alɔ web-browser geɖewo to vendor prefix siwo katã sɔ la dede wò CSS si nèƒo ƒu me.

Aɖaka ƒe lolome

Gbugbɔ ɖo wò akpawo ƒe aɖaka ƒe kpɔɖeŋu kple mixin ɖeka. Ne èdi nya siwo ƒo xlãe la, kpɔ nyati sia si akpe ɖe ame ŋu tso Mozilla .

Woɖe mixin la ɖa tso v3.2.0 dzi, kple Autoprefixer ƒe dodo. Be woakpɔ megbe-nɔnɔme ta la, Bootstrap ayi edzi azã mixin la le ememe vaseɖe Bootstrap v4.

.box-sizing(@box-model) {
  -webkit-box-sizing: @box-model; // Safari <= 5
     -moz-box-sizing: @box-model; // Firefox <= 19
          box-sizing: @box-model;
}

Dzogoe siwo le gogloe

Egbea egbegbe web-browserwo katã doa alɔ nɔnɔme si me wometsɔ ŋkɔ na o border-radius. .border-radius()Abe alesi wòle ene la, mixin aɖeke meli o , gake mɔ kpui siwo dzi woato aƒo dzogoe eve kabakaba le nu aɖe ƒe akpa aɖe koŋ la le Bootstrap me.

.border-top-radius(@radius) {
  border-top-right-radius: @radius;
   border-top-left-radius: @radius;
}
.border-right-radius(@radius) {
  border-bottom-right-radius: @radius;
     border-top-right-radius: @radius;
}
.border-bottom-radius(@radius) {
  border-bottom-right-radius: @radius;
   border-bottom-left-radius: @radius;
}
.border-left-radius(@radius) {
  border-bottom-left-radius: @radius;
     border-top-left-radius: @radius;
}

Aɖaka (Drop) ƒe vɔvɔliwo

Ne wò nyaselawo le web-browser kple mɔ̃ yeyetɔ kple gãtɔwo zãm la, kpɔ egbɔ be yezã box-shadownunɔamesi la le eɖokui si ko. Ne èhiã kpekpeɖeŋu na Android (do ŋgɔ na v4) kple iOS dɔwɔnu xoxowo (do ŋgɔ na iOS 5) la, zã mixin si womegazã o la nàtsɔ axɔ -webkitŋgɔdonya si hiã.

Woɖe mixin la ɖa tso v3.1.0 dzi, elabena Bootstrap mewɔa dɔ le se nu le mɔ̃ siwo do xoxo siwo medoa alɔ nunɔamesi si woɖo ɖi la o. Be woakpɔ megbe-nɔnɔme ta la, Bootstrap ayi edzi azã mixin la le ememe vaseɖe Bootstrap v4.

Kpɔ egbɔ be yezã rgba()amadedewo le wò aɖaka ƒe vɔvɔliwo me ale be woatsaka kple megbenyawo nyuie alesi nàte ŋui.

.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
  -webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1
          box-shadow: @shadow;
}

Tɔtrɔwo

Mixin geɖe hena asitɔtrɔ le nɔnɔmewo ŋu. Ðo tɔtrɔ ŋuti nyatakakawo katã kple ɖeka, alo nàgblɔ megbedede kple ɣeyiɣi didi aɖe ɖe vovo ne ehiã.

Woɖe asi le mixins la ŋu tso v3.2.0 dzi, kple Autoprefixer ƒe dodo. Be woakpɔ megbe-dɔwɔwɔ ta la, Bootstrap ayi edzi azã mixins le ememe vaseɖe Bootstrap v4.

.transition(@transition) {
  -webkit-transition: @transition;
          transition: @transition;
}
.transition-property(@transition-property) {
  -webkit-transition-property: @transition-property;
          transition-property: @transition-property;
}
.transition-delay(@transition-delay) {
  -webkit-transition-delay: @transition-delay;
          transition-delay: @transition-delay;
}
.transition-duration(@transition-duration) {
  -webkit-transition-duration: @transition-duration;
          transition-duration: @transition-duration;
}
.transition-timing-function(@timing-function) {
  -webkit-transition-timing-function: @timing-function;
          transition-timing-function: @timing-function;
}
.transition-transform(@transition) {
  -webkit-transition: -webkit-transform @transition;
     -moz-transition: -moz-transform @transition;
       -o-transition: -o-transform @transition;
          transition: transform @transition;
}

Tɔtrɔwo

Trɔ nu ɖesiaɖe, nàdzidzee, ɖe egɔme (ʋuʋui), alo nàtrɔ asi le eŋu.

Woɖe asi le mixins la ŋu tso v3.2.0 dzi, kple Autoprefixer ƒe dodo. Be woakpɔ megbe-dɔwɔwɔ ta la, Bootstrap ayi edzi azã mixins le ememe vaseɖe Bootstrap v4.

.rotate(@degrees) {
  -webkit-transform: rotate(@degrees);
      -ms-transform: rotate(@degrees); // IE9 only
          transform: rotate(@degrees);
}
.scale(@ratio; @ratio-y...) {
  -webkit-transform: scale(@ratio, @ratio-y);
      -ms-transform: scale(@ratio, @ratio-y); // IE9 only
          transform: scale(@ratio, @ratio-y);
}
.translate(@x; @y) {
  -webkit-transform: translate(@x, @y);
      -ms-transform: translate(@x, @y); // IE9 only
          transform: translate(@x, @y);
}
.skew(@x; @y) {
  -webkit-transform: skew(@x, @y);
      -ms-transform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+
          transform: skew(@x, @y);
}
.translate3d(@x; @y; @z) {
  -webkit-transform: translate3d(@x, @y, @z);
          transform: translate3d(@x, @y, @z);
}

.rotateX(@degrees) {
  -webkit-transform: rotateX(@degrees);
      -ms-transform: rotateX(@degrees); // IE9 only
          transform: rotateX(@degrees);
}
.rotateY(@degrees) {
  -webkit-transform: rotateY(@degrees);
      -ms-transform: rotateY(@degrees); // IE9 only
          transform: rotateY(@degrees);
}
.perspective(@perspective) {
  -webkit-perspective: @perspective;
     -moz-perspective: @perspective;
          perspective: @perspective;
}
.perspective-origin(@perspective) {
  -webkit-perspective-origin: @perspective;
     -moz-perspective-origin: @perspective;
          perspective-origin: @perspective;
}
.transform-origin(@origin) {
  -webkit-transform-origin: @origin;
     -moz-transform-origin: @origin;
      -ms-transform-origin: @origin; // IE9 only
          transform-origin: @origin;
}

Nɔnɔmetata siwo me agbe le

Mixin ɖeka na CSS3 ƒe nɔnɔmetata ƒe nɔnɔmewo katã zazã le gbeƒãɖeɖe ɖeka me kple mixin bubuwo na nɔnɔme ɖekaɖekawo.

Woɖe asi le mixins la ŋu tso v3.2.0 dzi, kple Autoprefixer ƒe dodo. Be woakpɔ megbe-dɔwɔwɔ ta la, Bootstrap ayi edzi azã mixins le ememe vaseɖe Bootstrap v4.

.animation(@animation) {
  -webkit-animation: @animation;
          animation: @animation;
}
.animation-name(@name) {
  -webkit-animation-name: @name;
          animation-name: @name;
}
.animation-duration(@duration) {
  -webkit-animation-duration: @duration;
          animation-duration: @duration;
}
.animation-timing-function(@timing-function) {
  -webkit-animation-timing-function: @timing-function;
          animation-timing-function: @timing-function;
}
.animation-delay(@delay) {
  -webkit-animation-delay: @delay;
          animation-delay: @delay;
}
.animation-iteration-count(@iteration-count) {
  -webkit-animation-iteration-count: @iteration-count;
          animation-iteration-count: @iteration-count;
}
.animation-direction(@direction) {
  -webkit-animation-direction: @direction;
          animation-direction: @direction;
}

Nusiwo me mekɔ o

Ðo opacity na browserwo katã eye nàna filterfallback na IE8.

.opacity(@opacity) {
  opacity: @opacity;
  // IE8 filter
  @opacity-ie: (@opacity * 100);
  filter: ~"alpha(opacity=@{opacity-ie})";
}

Teƒeɖoɖo ƒe nuŋɔŋlɔ

Na nya siwo ƒo xlãe na nuŋlɔɖigbalẽviwo dzi kpɔkpɔ le agble ɖesiaɖe me.

.placeholder(@color: @input-color-placeholder) {
  &::-moz-placeholder           { color: @color; } // Firefox
  &:-ms-input-placeholder       { color: @color; } // Internet Explorer 10+
  &::-webkit-input-placeholder  { color: @color; } // Safari and Chrome
}

Sɔtiwo

Wɔ sɔtiwo to CSS dzi le nu ɖeka me.

.content-columns(@width; @count; @gap) {
  -webkit-column-width: @width;
     -moz-column-width: @width;
          column-width: @width;
  -webkit-column-count: @count;
     -moz-column-count: @count;
          column-count: @count;
  -webkit-column-gap: @gap;
     -moz-column-gap: @gap;
          column-gap: @gap;
}

Nusiwo wotsɔna tsia tre ɖe wo nɔewo ŋu

Trɔ amadede eve ɖesiaɖe bɔbɔe wòazu megbenya ƒe ʋuʋudedi. Yi ŋgɔ wu eye nàɖo mɔfiame, zã amadede etɔ̃, alo zã radial gradient. Ne èzã mixin ɖeka la, àkpɔ nyagɔmeɖegbalẽ siwo katã do ŋgɔ na nyagɔmeɖegbalẽ siwo nàhiã.

#gradient > .vertical(#333; #000);
#gradient > .horizontal(#333; #000);
#gradient > .radial(#333; #000);

Àte ŋu agblɔ dzogoe si le amadede eve, fli ƒe ʋuʋudedi si wozãna ɖaa ŋu hã:

#gradient > .directional(#333; #000; 45deg);

Ne èhiã barber-stripe style gradient la, ema hã le bɔbɔe. Ðeko nàgblɔ amadede ɖeka eye míatsɔ fli ɣi si me kɔ la atsyɔ edzi.

#gradient > .striped(#333; 45deg);

Do ante la ɖe dzi eye nàzã amadede etɔ̃ ɖe eteƒe. Ðo amadede gbãtɔ, amadede evelia, amadede evelia ƒe amadede ƒe tɔtrɔ (si nye alafa memamã ƒe asixɔxɔ abe 25%), kple amadede etɔ̃lia kple mixin siawo:

#gradient > .vertical-three-colors(#777; #333; 25%; #000);
#gradient > .horizontal-three-colors(#777; #333; 25%; #000);

Tawo yi dzi! Ne ehiã be nàɖe gradient aɖe ɖa gbeɖeka la, kpɔ egbɔ be yeɖe IE-koŋ ɖesiaɖe si filternàte ŋu atsɔ akpe ɖe eŋu la ɖa. Àte ŋu awɔ ema to .reset-filter()mixin la zazã ɖe axadzi background-image: none;me .

Mixins siwo wozãna tsɔ wɔa dɔe

Utility mixins nye mixins siwo ƒoa CSS ƒe nɔnɔme siwo medo ƒome kple wo nɔewo o nu ƒu be woaɖo taɖodzinu alo dɔ aɖe koŋ gbɔ.

Klɔe ɖa

Ŋlɔ class="clearfix"nu ɖesiaɖe tsɔtsɔ kpe ɖe eŋu be eye nàtsɔ .clearfix()mixin la akpe ɖe eŋu boŋ le afisi wòasɔ le. Ezãa micro clearfix si tso Nicolas Gallagher gbɔ .

// Mixin
.clearfix() {
  &:before,
  &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

// Usage
.container {
  .clearfix();
}

Titina si le tsia dzi

Tsɔ nu ɖesiaɖe si le edzila me la ɖo titina kaba. Ebia widthalo max-widthbe woaɖoe.

// Mixin
.center-block() {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

// Usage
.container {
  width: 940px;
  .center-block();
}

Kpekpeɖeŋunalawo ƒe lolome

Gblɔ nu aɖe ƒe didime bɔbɔe wu.

// Mixins
.size(@width; @height) {
  width: @width;
  height: @height;
}
.square(@size) {
  .size(@size; @size);
}

// Usage
.image { .size(400px; 300px); }
.avatar { .square(48px); }

Textarea siwo woate ŋu atrɔ asi le woƒe lolome ŋu

Trɔ asi le lolome ƒe tiatiawɔblɔɖe ŋu bɔbɔe na nuŋɔŋlɔ ƒe teƒe ɖesiaɖe, alo nu bubu ɖesiaɖe. Woɖoe ɖe web-browser ƒe nuwɔna si sɔ gbɔ ( both).

.resizable(@direction: both) {
  // Options: horizontal, vertical, both
  resize: @direction;
  // Safari fix
  overflow: auto;
}

Nuŋɔŋlɔwo ɖeɖeɖa

Trɔ nuŋɔŋlɔa bɔbɔe kple ellipsis kple mixin ɖeka. Ebia be element nanɔ blockalo wòanɔ inline-blockɖoɖo nu.

// Mixin
.text-overflow() {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// Usage
.branch-name {
  display: inline-block;
  max-width: 200px;
  .text-overflow();
}

Retina ƒe nɔnɔmetatawo

Tsɔ nɔnɔmetata ƒe mɔ eve kple @1x nɔnɔmetata ƒe didimewo, eye Bootstrap ana @2x media biabia. Ne nɔnɔmetata geɖe le asiwò nàsubɔ la, bu wò ŋkume ƒe nɔnɔmetata CSS ŋɔŋlɔ kple asi le nyadzɔdzɔgblɔmɔ̃ ƒe nyabiase ɖeka me ŋu.

.img-retina(@file-1x; @file-2x; @width-1x; @height-1x) {
  background-image: url("@{file-1x}");

  @media
  only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (   min--moz-device-pixel-ratio: 2),
  only screen and (     -o-min-device-pixel-ratio: 2/1),
  only screen and (        min-device-pixel-ratio: 2),
  only screen and (                min-resolution: 192dpi),
  only screen and (                min-resolution: 2dppx) {
    background-image: url("@{file-2x}");
    background-size: @width-1x @height-1x;
  }
}

// Usage
.jumbotron {
  .img-retina("/img/bg-1x.png", "/img/bg-2x.png", 100px, 100px);
}

Togbɔ be wotu Bootstrap ɖe Less dzi hã la, Sass melidzeƒe si dziɖuɖua ɖo hã le esi . Míeléa be nɛ le GitHub ƒe nudzraɖoƒe si le vovo eye míetsɔa tɔtrɔ ƒe nuŋɔŋlɔ kpɔa asitɔtrɔwo gbɔ.

Nusi le eme

Esi wònye be repo ɖe vovo le Sass melidzeƒea eye wòsubɔa nyasela siwo to vovo vie ta la, dɔa me nyawo to vovo kura tso Bootstrap dɔ vevitɔ gbɔ. Esia kpɔa egbɔ be Sass melidzeƒea sɔ kple Sass-dzi ɖoɖo geɖe alesi wòanya wɔe.

Afᴐmᴐ	Nuɖᴐɖᴐ
`lib/`	Ruby gem code (Sass ƒe ɖoɖowɔwɔ, Rails kple Compass ƒe ƒoƒo ɖekae)
`tasks/`	Trɔla ŋɔŋlɔdzesiwo (trɔtrɔ le dzigbe Less yi Sass) .
`test/`	Nuƒoƒoƒu ƒe dodokpɔwo
`templates/`	Kɔmpasi ƒe akpata me manifest
`vendor/assets/`	Sass, JavaScript, kple ŋɔŋlɔdzesiwo ƒe faɛlwo
`Rakefile`	Dɔ siwo wowɔna le ememe, abe rake kple convert ene

Yi Sass melidzeƒea ƒe GitHub nudzraɖoƒe be nàkpɔ faɛl siawo le dɔ wɔm.

Eɖoɖo ɖe ɖoɖo nu

Ne èdi nyatakaka tso alesi nàɖo Bootstrap na Sass ɖe wò kɔmpiuta dzi ahazãe ŋu la, kpɔ GitHub ƒe nudzraɖoƒe readme . Enye dzɔtsoƒe yeyetɔ kekeake eye nyatakaka siwo woazã kple Rails, Compass, kple Sass dɔ siwo wozãna ɖaa la le eme.

Bootstrap na Sass ƒe ƒuƒoƒo

CSS ƒe ƒuƒoƒo

Kpɔɖeŋunyagbɔgblɔ

HTML5 ƒe nuŋlɔɖi ƒe ƒomevi

Asitelefon dzi gbã

Agbalẽtata kple kadodowo

Wɔ ɖoɖo ɖe ɖoɖo nu.css

Nugoewo me

Grid ƒe ɖoɖo

Kpɔkplɔyiɖeme

Nyadzɔdzɔgblɔmɔnuwo ƒe nyabiasewo

Grid ƒe tiatiawɔblɔɖewo

Kpɔɖeŋu: Woƒo ƒu ɖe wo nɔewo dzi va ɖo tsia dzi

Kpɔɖeŋu: Tsi ƒe nugoe

Kpɔɖeŋu: Asitelefon kple kɔmpiuta dzi dɔwɔnuwo

Kpɔɖeŋu: Asitelefon, tablɛt, kplɔ̃dzivɔ

Kpɔɖeŋu: Sɔtiwo ƒe agbalẽ xatsaxatsa

Nyaŋuɖoɖo ƒe kɔlam gbugbɔgaɖoanyiwo

Sɔtiwo ƒe vovototodedeameme

Atɔwɔwɔ ƒe sɔtiwo

Sɔtiwo ƒe ɖoɖowɔwɔ

Mixins kple tɔtrɔwo mesɔ gbɔ o

Nusiwo trɔna

Nusiwo wotsɔ tsakae

Kpɔɖeŋu zazã

Agbalẽtata ƒe nuŋɔŋlɔ

Tanyawo

h1. Bootstrap ƒe tanya

h2. Bootstrap ƒe tanya

h3. Bootstrap ƒe tanya

h4. Bootstrap ƒe tanya

h5. Bootstrap ƒe tanya

h6. Bootstrap ƒe tanya

h1. Bootstrap ƒe tanya Nuŋɔŋlɔ evelia

h2. Bootstrap ƒe tanya Nuŋɔŋlɔ evelia

h3. Bootstrap ƒe tanya Nuŋɔŋlɔ evelia

h4. Bootstrap ƒe tanya Nuŋɔŋlɔ evelia

h5. Bootstrap ƒe tanya Nuŋɔŋlɔ evelia

h6. Bootstrap ƒe tanya Nuŋɔŋlɔ evelia

Ŋutilã ƒe kɔpi

Kplɔ ŋutilã ƒe kɔpi

Wotue kple Less

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

Nuŋɔŋlɔ si wode dzesii

Wotutu nuŋɔŋlɔa ɖa

Strikethrough nuŋɔŋlɔa me

Nuŋɔŋlɔ si wotsɔ de eme

Nuŋɔŋlɔ si te fli ɖe te

Nuŋɔŋlɔ suewo

Kalẽtᴐe

Ŋɔŋlɔdzesi siwo woŋlɔ kple asi

Nusiwo woatsɔ aɖɔli wo nɔewo

Alignment ƒe klasswo

Tɔtrɔ ƒe klasswo

Kpuienyawo

Kpuienya veviwo

Gbãtɔ ƒe gɔmedzedze

Adrɛswo

Blockquotes ƒe nyawo

Blockquote si woɖo ɖi

Blockquote ƒe tiatiawɔblɔɖewo

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

Ðeɖefianu bubuwo ɖe wo nɔewo ŋu

Ŋlɔ ŋkɔwo

Womewɔ ɖoɖo ɖe eŋu o

Wobia tso esi

Womewɔ atsyã aɖeke o

Le fli me

Nuɖᴐɖᴐ

Numeɖeɖe si le tsia dzi

Auto-truncating ƒe ʋuʋu

Sedede

Le fli me

Zãla ƒe nyawo tsɔtsɔ de eme

Gbãtɔ ƒe block

Nusiwo trɔna

Kpɔɖeŋu ƒe emetsonuwo

Kplɔ̃wo

Kpɔɖeŋu vevi aɖe

Fli siwo ŋu fli le

Cross-browser ƒe dɔwɔwɔ ɖekae

Demo `:focus`dukɔ

Nuxlɔ̃ame tso kadodo ƒe dɔwɔwɔ ŋu le`<a>`

`.sr-only`Dzesi siwo woate ŋu awɔ le wo ɖokui si siwo dzi woŋlɔ ŋkɔ siwo woɣla ɖo