Aw ye lowdown sɔrɔ Bootstrap ka fɛnsɔrɔsiraw yɔrɔ kolomaw kan, an ka fɛɛrɛ fana sen bɛ o la ka ɲɛsin ɛntɛrinɛti yiriwali ɲuman, teliya, barikama ma.

HTML5 sɛbɛn suguya

Bootstrap bɛ baara Kɛ ni HTML fɛn dɔw ye ani CSS nafolo minnu bɛ HTML5 doctype baara de wajibiya. Aw k’a don aw ka porozew bɛɛ daminɛ na.

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

Mobili fɔlɔ

Ni Bootstrap 2 ye, an ye mobili teriya cogoyaw fara a kan minnu bɛ se ka sugandi ka ɲɛsin karamɔgɔya yɔrɔ kolomaw ma. Ni Bootstrap 3 ye, an ye porozɛ in sɛbɛn kokura walasa a ka kɛ mobili teriya ye kabini a daminɛ na. Sanni u ka dɔ fara mobili cogoyaw kan minnu bɛ se ka kɛ, u bɛ tobi ka don u kɔnɔ yɛrɛ. Tiɲɛ na, Bootstrap ye mobili fɔlɔ ye . Mobili fɔlɔ cogoyaw bɛ se ka sɔrɔ gafemarayɔrɔ bɛɛ kɔnɔ sanni u ka sɔrɔ dosiye danfaralenw kɔnɔ.

Walasa ka a jira ko a bɛ se ka kɛ ka ɲɛ ani ka maga zoom la, i ka viewport meta tag fara i ka <head>.

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

I bɛ se ka zoom seko bali mobili kɔnɔ ni i ye dɔ fara user-scalable=noviewport meta tag kan. O bɛ zoom (boli) bali, o kɔrɔ ye ko baarakɛlaw bɛ Se ka 'sèn Bɔ dɔrɔn, wa o bɛ Nà ni i ka yɔrɔ in ye dɔɔnin i n'a fɔ 'application (application) yɛrɛma. Kuma bɛɛ la, an tɛ nin fɔ site web bɛɛ kan, o la aw ka aw janto aw yɛrɛ la!

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

Typografi ani ladɛrɛsiw

Bootstrap bɛ diɲɛ jiracogo jɔnjɔnw, sɛbɛnnikɛcogo ani ɲɔgɔndan kɛcogoyaw sigi sen kan. Kɛrɛnkɛrɛnnenya la, anw:

Set background-color: #fff;kan ka ...body
Baara kɛ ni @font-family-base, @font-size-base, ani @line-height-basefɛnw ye i n’a fɔ an ka sɛbɛnnikɛlanw
Set global link color via @link-colorani ka link underlines dɔrɔn de kɛ:hover

o cogoyaw bɛ se ka sɔrɔ kɔnɔ scaffolding.less.

Normalize.css ye

Walasa ka cross-browser jiracogo ɲɛ, an bɛ baara kɛ ni Normalize.css ye , o ye porozɛ ye min kɛra Nicolas Gallagher ni Jonathan Neal fɛ .

Minɛnw

Bootstrap bɛ fɛn dɔ de wajibiya min kɔnɔna na walasa ka site kɔnɔkow siri ani ka an ka grid system (jatebɔlan) sigi. Aw bɛ se ka minɛn fila dɔ sugandi walasa ka baara kɛ ni u ye aw ka porozew la. A kɔlɔsi ko, ka da paddingani ka tɛmɛ o kan, minɛn fila si tɛ se ka sigi.

Aw bɛ baara kɛ ni .containera ye min bɛ jaabi di a bonya jɔlen ma.

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

Baara .container-fluidkɛ ni minɛn ye min bonya dafalen don, min bɛ i ka filɛlikɛyɔrɔ bonya bɛɛ lajɛlen na.

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

Bootstrap kɔnɔ, jaabi, mobili fɔlɔ jibɔlan dɔ bɛ yen min bɛ sɛgɛsɛgɛli kɛ cogo bɛnnen na fo ka se kulu 12 ma ni minɛn walima filɛlikɛyɔrɔ hakɛ bɛ bonya. A bɛ kalansen minnu ɲɛfɔ ka kɔn walasa ka layidu tacogo nɔgɔya, ani mixin barikamaw walasa ka kɔrɔko layidu caman lawuli .

Daminɛ kuma

Grid systems bɛ Kɛ ka ɲɛw labɛncogo Dabɔ ni jirisunw ni kuluw ye minnu bɛ i ka kɔnɔkow Ladon. Bootstrap grid system bɛ baara kɛ cogo min na, o filɛ nin ye:

Layiniw ka kan ka bila .container(fixed-width) walima .container-fluid(full-width) kɔnɔ walasa ka u labɛn ka ɲɛ ani ka u kɛ padding ye.
Baara kɛ ni jiriw ye walasa ka kuluw kulu tilennenw dilan.
Kɔnɔkow ka kan ka bila kuluw kɔnɔ, wa kuluw dɔrɔn de bɛ se ka kɛ jirisunw denw ye teliya la.
Grid kalasi minnu ɲɛfɔlen don ka kɔn, olu bɛ i n’a fɔ .rowani .col-xs-4u bɛ sɔrɔ walasa ka grid labɛncogo teliya. Mixin dɔgɔmanninw fana bɛ Se ka Kɛ kɔrɔko labɛncogo caman na.
Kolonw bɛ gutɛriw dilan (yɔrɔ minnu bɛ kulu kɔnɔkow ni ɲɔgɔn cɛ) via padding. O padding bɛ offset in rows for the first and last column via negative margin on .rows.
Marge jugu de y’a to misali minnu bɛ duguma, olu bɛ bɔ kɛnɛ kan. O ye walasa kɔnɔkow minnu bɛ jatebɔlanw kɔnɔ, olu ka Labɛn ni jatebɔlanw tɛ minnu na.
Grid kuluw bɛ dabɔ ni kulu tan ni fila minnu bɛ sɔrɔ, i b’a fɛ ka olu hakɛ jira. Misali la, kulu saba minnu bɛ bɛn ɲɔgɔn ma, olu bɛna baara kɛ ni saba ye .col-xs-4.
Ni kulu minnu ka ca ni 12 ye, olu bilala jirisun kelen kɔnɔ, kulu wɛrɛw kulu kelen-kelen bɛɛ bɛna, i n’a fɔ yɔrɔ kelen, ka siri tigɛli kura kan.
Grid classes bɛ tali kɛ minɛnw na minnu ka ɛkran bonya ka bon walima ka bɛn breakpoint hakɛw ma, ani ka grid classes (jatebɔlan) minnu ɲɛsinnen bɛ minɛn fitininw ma, olu bɛ tɛmɛn. O la, misali la, ka kalasi o .col-md-*kalasi Kɛ fɛn dɔ la, o tɛna nɔ Blà a cogoya dɔrɔn na minɛn cɛmancɛw kan nka a bɛna nɔ Blà minɛn belebelebaw fana na ni .col-lg-*kalasi dɔ tɛ yen.

Aw ye misaliw lajɛ walasa ka o sariyakolow waleya aw ka kode kan.

Kunnafonidila ɲininkaliw

An bɛ baara Kɛ ni nin kunnafonidilan ɲininkali ninnu ye an ka Less files kɔnɔ walasa ka key breakpoints (dakunw) Dabɔ an ka grid system kɔnɔ.

/* 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) { ... }

An bɛ dɔ Fàra o kunnafonidilanw ɲininkaliw kan tuma dɔw la walasa ka a Dòn a la max-widthwalasa ka CSS dan Kɛ minɛnw kulu fitinin dɔ la.

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

Aw ye a lajɛ Bootstrap grid system fan dɔw bɛ baara kɛ cogo min na minɛn caman kan ni tabali ye min bɛ se ka kɛ.

	Fɛn fitinin wɛrɛw Telefɔniw (<768px)	Minɛn fitininw Tablɛtiw (≥768px) .	Minɛnw cɛmancɛw Bureau (≥992px) .	Minɛn belebelebaw Desktops (≥1200px) .
Grid kɛcogo	Horizontal waati bɛɛ	A bɛ bin ka daminɛ, horizontal sanfɛ breakpoints
Konteyna bonya	Foyi tɛ (auto) .	750px ye	970px ye	1170px ye
Kalanso ɲɛbila	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`
# ka kuluw	12 ye
Kolon bonya	Auto	~62px ye	~81px ye	~97px ye
Gutter bonya	30px (15px bɛ kulu dɔ fan kelen-kelen bɛɛ la)
Nestable ye	Awɔ
Offsets (Fɛɛrɛbɔlanw).	Awɔ
Kolonw ka komandi	Awɔ

Misali: Stacked-to-horizontal

Ni aw bɛ baara kɛ ni jatebɔlanw kulu kelen ye .col-md-*, aw bɛ se ka jatebɔlan jɔnjɔn dɔ da min bɛ daminɛ ka ɲɔgɔn dalajɛ telefɔni selilɛriw ni tablɛtiw kan (a ka ca a la, a ka dɔgɔ fo ka se a danma ma) ka sɔrɔ ka kɛ tilennen ye tabali kan (misɛnninw) minɛnw kan. Aw bɛ grid kolonw bila fɛn o fɛn .rowna .

.kol-md-1 ye

.kol-md-8 ye

.kol-md-4 ye

.kol-md-6 ye

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

Misali: Jilama minɛn

Aw bɛ jatebɔlan janya jɔlen o labɛncogo caman tigɛli kɛ ka kɛ jatebɔlan dafalen ye ni aw bɛ aw ka kɛnɛmafɛn caman Changer ka .containerkɛ .container-fluid.

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

Misali: Mobili ani tabali

Aw t’a fɛ aw ka kuluw ka ɲɔgɔn dalajɛ dɔrɔn minɛn fitininw kɔnɔ wa? Baara kɛ ni minɛn fitininw ni cɛmancɛw ka jatebɔ kalansenw ye minnu bɛ fara a kan, i kɛtɔ ka dɔ fara .col-xs-* .col-md-*i ka kuluw kan. Aw ye misali lajɛ min bɛ duguma walasa ka hakilina ɲuman sɔrɔ a bɛɛ bɛ baara kɛ cogo min na.

.koli-xs-12 .kol-md-8

.koli-xs-6 .kol-md-4

.kol-xs-6 ye

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

Misali: Mobili, tablɛti, tabali

Aw ye jɔ misali tɛmɛnen kan ni layidu talenw dilanni ye minnu bɛ se ka fanga sɔrɔ ka tɛmɛn fɔlɔ kan ni tablɛti .col-sm-*kalanw ye.

.koli-xs-12 .kol-sm-6 .kol-md-8

.koli-xs-6 .kol-md-4

.koli-xs-6 .kol-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>

Misali: Kolonw siricogo

Ni kulu minnu ka ca ni 12 ye, olu bilala jirisun kelen kɔnɔ, kulu wɛrɛw kulu kelen-kelen bɛɛ bɛna, i n’a fɔ yɔrɔ kelen, ka siri tigɛli kura kan.

.kol-xs-9 ye

.col-xs-4
Komin 9 + 4 = 13 > 12, nin div 4-kolon-kɔnɔ in bɛ siri tigɛli kura kan i n’a fɔ unit kelen min bɛ ɲɔgɔn kan.

.col-xs-6
Kolon minnu bɛ tugu ɲɔgɔn kɔ, olu bɛ tɛmɛ layini kura kan.

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

Jaabi kolomaw bɛ segin u cogo kɔrɔ la

Ni jatebɔlan naani bɛ yen i bɛ siri ka boli ko dɔw la minnu na, kariyɔrɔ dɔw la, i ka kuluw tɛ jɛya ka ɲɛ kosɛbɛ bawo kelen ka jan ka tɛmɛ tɔ kelen kan. Walasa k’o labɛn, aw bɛ baara kɛ ni a .clearfixni an ka jaabi nafama kalanw faralen ye ɲɔgɔn kan .

.col-xs-6 .col-sm-3
Aw ye aw ka filɛlikɛlan bonya caman sɛmɛntiya walima k’a lajɛ aw ka telefɔni na misali la.

.koli-xs-6 .kol-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>

Ka fara kolosinsinnanw jɛyali kan jaabiw kariyɔrɔw la, aw bɛ se ka offsets, pushes walima pulsw labɛn kokura . aw ye nin lajɛ wale la ja misali la .

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

Kolonw (offset) kɛli

Aw bɛ kuluw wuli ka taa kinin fɛ ni .col-md-offset-*kalanw ye. O kalasiw bɛ dɔ Fàra kulu dɔ kinin fɛ dakun kan *kuluw fɛ. Misali la, .col-md-offset-4a bɛ taa .col-md-4kulu naani kan.

.kol-md-4 ye

.kol-md-4 .kol-md-fɔli-4

.koli-md-3 .kol-md-offset-3

.koli-md-6 .kol-md-offset-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>

Aw bɛ se fana ka offsets override ka bɔ grid tiers duguma ni .col-*-offset-0classes ye.

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

Nesting kuluw

Walasa k’i ka kɔnɔkow nest ni grid default ye, i ka kulu kura .rowni kulu dɔ fara kulu .col-sm-*dɔ kan min bɛ yen .col-sm-*. Nested rows ka kan ka kɛ ni kuluw kulu ye minnu bɛ fara ɲɔgɔn kan ka se 12 ma walima ka dɔgɔya (a man kan i ka baara kɛ ni kulu 12 bɛɛ ye minnu bɛ sɔrɔ).

Nivo 1: .col-sm-9 ye

Nivo 2: .kol-xs-8 .kol-sm-6

Nivo 2: .kol-xs-4 .kol-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>

Kolonw ka komandi

An ka jatebɔlanw jɔlenw sigicogo Changer nɔgɔya la ni .col-md-push-*ani .col-md-pull-*modifier classes ye.

.koli-md-9 .kol-md-push-3

.kol-md-3 .kol-md-sama-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 ni variables ka dɔgɔn

Ka fara grid classes prebuilt kan walasa ka layout teliya, Bootstrap kɔnɔ Less variables ani mixins bɛ yen walasa ka teliya ka i yɛrɛ ka layout nɔgɔmanw, kɔrɔw labɛn.

Yɛlɛma-yɛlɛmaw

Yɛlɛma bɛ kuluw hakɛ jira, gutɛri bonya, ani kunnafonidilanw ɲininkali yɔrɔ min na kuluw bɛ wuli ka wuli. An bɛ baara Kɛ ni ninnu ye walasa ka grid classes (jatebɔ-kalanso) minnu ɲɛfɔlen dòn ka Kɔn, olu Sɔrɔ minnu sɛbɛnnen dòn san fɛ, ka Fàra custom mixins (lada mixins) minnu kofɔlen dòn jukɔrɔ.

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

Mixinw (Mixins).

Mixins bɛ baara kɛ ni grid variables ye walasa ka semantiki CSS dilan grid kulu kelen-kelen bɛɛ kama.

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

Misali la baarakɛcogo

Aw bɛ se ka fɛn caman sɛmɛntiya ka kɛɲɛ ni aw yɛrɛ ka ladamu nafaw ye, walima ka baara kɛ dɔrɔn ni mixins ye n’u ka nafa fɔlɔw ye. Nin ye misali ye min bɛ baara Kɛ ni 'sènfɛ-sɛbɛnni-minɛnw ye walasa ka kulu fla-fla-labɛnni Dabɔ ni danfara bɛ u ni ɲɔgɔn cɛ.

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

Kumakunw

HTML kunkankow bɛɛ, <h1>ka t’a fɛ <h6>, olu bɛ sɔrɔ. .h1through .h6classes fana bɛ sɔrɔ, for n’i b’a fɛ ka bɛn barokun dɔ sɛbɛnnibolo cogoya ma nka hali bi i b’a fɛ i ka sɛbɛnni ka jira inline kɔnɔ.

h1. Bootstrap ka kumasen	Semibold ye 36px ye
h2. Bootstrap ka kumasen	Semibold ye 30px ye
h3. Bootstrap ka kumasen	Semibold ye 24px ye
h4. Bootstrap ka kumasen	Semibold ye 18px ye
h5. Bootstrap ka kumasen	Semibold ye 14px ye
h6. Bootstrap ka kumasen	Semibold ye 12px ye

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

Aw bɛ sɛbɛnni nɔgɔmanw, filananw dilan kuncɛ o kuncɛ ni <small>taamasiyɛnba ye walima ni .smallkalan ye.

h1. Bootstrap kuncɛcogo Sɛbɛn filanan

h2. Bootstrap kuncɛcogo Sɛbɛn filanan

h3. Bootstrap kuncɛcogo Sɛbɛn filanan

h4. Bootstrap kuncɛcogo Sɛbɛn filanan

h5. Bootstrap kuncɛcogo Sɛbɛn filanan

h6. Bootstrap ka kumasen Sɛbɛn filanan

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

Farikolo kopi

Bootstrap ka diɲɛ daminɛ font-sizeye 14px ye , ni a line-heightye 1.428 ye . O bɛ sirataama <body>dakunw ni dakunw bɛɛ la. Ka fara o kan, <p>(dakunw) bɛ duguma-dakun sɔrɔ u ka jatebɔ-yɔrɔ-janya tilancɛ la (10px ka da a kan).

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus ni magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies bolifɛnw.

Cum sociis natoque penatibus ni magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla min tɛ fɛn ye min bɛ wele ko fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla min tɛ fɛn ye min bɛ wele ko fringilla.

Maecenas sed diam eget risus varius blandit sigi amet non magna. Donec id elit non mi porta gravida ye eget metus ye. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

<p>...</p>

Plomb farikolo kopi

Aw ye dakun dɔ kɛ fɛn ye min bɛ bɔ kɛnɛ kan ni aw ye a fara a kan .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor ye fɛn ye min bɛ se ka kɛ fɛn ye min bɛ se ka kɛ fɛn ye. Duis mollis, est min tɛ fɛn caman ye.

<p class="lead">...</p>

A jɔra ni Less ye

Sɛbɛnni sɛgɛsɛgɛli bɛ tali kɛ Less variables fila kan variables kɔnɔ.less : .@font-size-base ani @line-height-base. Fɔlɔ ye basigi sɛbɛnnibolo-size ye min bɛ Kɛ a bɛɛ la ani filanan ye basigi-yɔrɔ-janya ye. An bɛ baara Kɛ n’o fɛn caman ɲɔgɔnna ye ani jatebɔ nɔgɔman dɔw ye walasa ka an ka suguya bɛɛ ka margins, paddings, ani line-heights (dakunw) Dabɔ ani fɛn wɛrɛw. Aw bɛ u kɛ ka kɛɲɛ ni u yɛrɛ sago ye ani Bootstrap bɛ ladamu.

Inline sɛbɛnni kɔnɔfɛnw

Sɛbɛnni minnu bɛ taamasiyɛn kɛ

Walasa ka sɛbɛnni bolicogo dɔ jira k’a sababu kɛ a nafa ye cogo wɛrɛ la, i ka baara kɛ ni <mark>taamasiyɛn ye.

Aw bɛ se ka baara kɛ ni taamasiyɛn taamasiyɛn ye walasa kaka faranfasiyamasalabolo.

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

Sɛbɛnni minnu bɔra

Walasa ka sɛbɛnni blokiw jira minnu bɔra, baara kɛ ni <del>taamasiyɛn ye.

~~Nin sɛbɛnni zana in kun ye ka jate i n’a fɔ sɛbɛn bɔlen.~~

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

Strikethrough sɛbɛnni

Walasa ka sɛbɛnni blokiw jira minnu tɛ nafa sɔrɔ tugun, baara kɛ ni <s>taamasiyɛn ye.

~~Nin sɛbɛnni zana in kun ye ka jate iko a tɛ tiɲɛ ye tugun.~~

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

Sɛbɛnni min bɛ don a kɔnɔ

Walasa ka farankanw jira sɛbɛn kan, baara kɛ ni <ins>taamasiyɛn ye.

Nin sɛbɛnni zana in kun ye ka jate i n’a fɔ farali sɛbɛn kan.

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

Sɛbɛn minnu bɛ ja jukɔrɔ

Walisa ka sɛbɛnniw ja jukɔrɔ, baara kɛ ni <u>tagamasiɲɛ ye.

Nin sɛbɛnni tigɛli bɛna kɛ i n’a fɔ a ɲɛfɔlen bɛ cogo min na

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

Baara kɛ ni HTML ka sinsinnan taamasiyɛnw ye minnu bɛ kɛ ni cogoya nɔgɔmanw ye.

Sɛbɛn misɛnninw

Walasa ka sɛbɛnni kɔnɔna walima sɛbɛnni blokiw sinsinni bɔ, i ka baara kɛ ni <small>taamasiyɛn ye walasa ka sɛbɛnni kɛ bangebaga hakɛ 85% la. Kungolofɛnw bɛ u yɛrɛ ta sɔrɔ ka font-sizeɲɛsin nested ma<small> sen kan.

aw bɛ se ka baara kɛ ni inline element ye .smallcogo wɛrɛ la ni a nɔ na <small>.

Nin sɛbɛnni zana in kun ye ka jate i n’a fɔ sɛbɛnni ɲumanw.

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

Farin

Walasa ka sinsin sɛbɛnni dɔ kan ni sɛbɛnnibolo-gɛlɛya gɛlɛn ye.

nin sɛbɛnfura in bɛ kɛ sɛbɛnni jɛlenw ye .

<strong>rendered as bold text</strong>

Italikaw ka sɛbɛnniw

Walasa ka sinsin sɛbɛn yɔrɔ dɔ kan ni sɛbɛnnibolow ye minnu bɛ sɛbɛn ni italiki ye.

nin sɛbɛn yɔrɔ in bɛ kɛ sɛbɛnni ye min bɛ sɛbɛn ni italiki ye .

<em>rendered as italicized text</em>

Fɛn minnu bɛ ɲɔgɔn falen-falen

Aw kana siga ka baara kɛ <b>ni <i>HTML5 ye. <b>kɔrɔ ye ka daɲɛw walima kumasenw Bɔ kɛnɛ kan k’a sɔrɔ a ma nafa wɛrɛ Lase k’a sɔrɔ <i>a fanba bɛ kumakan, fɛɛrɛko daɲɛw, a ɲɔgɔnnaw de kan.

Alignment kalanw

Aw bɛ sɛbɛnniw labɛn kokura nɔgɔya la ka kɛɲɛ ni yɔrɔw ye minnu bɛ sɛbɛnniw labɛncogo kalanw na.

Sɛbɛn minnu bɛ ɲɔgɔn kan numan fɛ.

Cɛmancɛ-labɛnni sɛbɛnni.

Sɛbɛn minnu bɛ ɲɔgɔn kan kinin fɛ.

Sɛbɛn min bɛ jo di.

No wrap sɛbɛnni.

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

Yɛlɛma kalanw

Sɛbɛnw bɛrɛbɛnni kɛ yɔrɔw la ni sɛbɛnnibolow ye minnu bɛ sɛbɛnni kɛ ni sɛbɛnnibolow ye.

Sɛbɛnni fitininw.

Sɛbɛnni minnu bɛ sɛbɛn ni sɛbɛnnibolo belebelebaw ye.

Sɛbɛn minnu sɛbɛnnen bɛ ni sɛbɛnnibolo belebelebaw ye.

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

Kuma surunw

HTML ka <abbr>element (yɔrɔ) waleyali cogo la min bɛ Kɛ ka surunya ni daɲɛ surunw ye walasa ka a jiracogo bonyalen jira hover kan. Kuma surun minnu bɛ ni fɛn dɔ ye title, olu bɛ ni duguma dan ye min bɛ yeelen bɔ ani dɛmɛ taamasiyɛn ye hover kan, o bɛ kunnafoni wɛrɛw di hover kan ani dɛmɛ fɛɛrɛw baarakɛlaw ma.

Sugudacogo jɔnjɔn

Daɲɛ min bɛ wele ko attribut , o surunyalen ye attr ye .

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

Initialisme (daminɛ daminɛcogo).

A bɛ Fàra .initialismdaɲɛ surun dɔ kan walasa ka sɛbɛnnibolo-yɔrɔ fitinin dɔ Sɔrɔ.

HTML ye fɛn bɛɛ la ɲuman ye kabini buru tigɛlen.

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

Adrɛsiw

Aw bɛ kunnafoni di bɛnbakɛ min ka surun aw la walima baara bɛɛ lajɛlen na. Aw bɛ sɛbɛnniw mara ni zana bɛɛ laban ye ni <br>.

Twitter, Inc.
1355 Sugu sira, Suite 900
San Fransisko, CA 94103
P: (123) 456-7890. Bamako, Mali

Tɔgɔ dafalen
fɔlɔ[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>

Blokiw ka kumaw

Walasa ka kunnafoni blokiw fɔ ka bɔ yɔrɔ wɛrɛ la i ka sɛbɛn kɔnɔ.

Blockquote (Blockquote) min bɛ daminɛ

Aw bɛ HTML o HTML<blockquote> lamini i n’a fɔ quote. Walasa ka kumasen tilennenw sɔrɔ, an bɛ ladilikan di ko .<p>

Lorem ipsum dolor sigilen amet, consectetur adipiscing elit. Jateden dafalen posuere erat a ante.

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

Blockquote sugandiliw

cogoya ni kɔnɔkow bɛ ɲɔgɔn Changé walasa ka fɛn nɔgɔmanw caman ɲɔgɔnna caman kɛ sariya dɔ kan <blockquote>.

Tɔgɔ dali source dɔ kan

A fara a <footer>kan walasa ka sɔrɔyɔrɔ dɔn. Aw bɛ sɔrɔyɔrɔ baara tɔgɔ siri <cite>.

Lorem ipsum dolor sigilen amet, consectetur adipiscing elit. Jateden dafalen posuere erat a ante.

Mɔgɔ min tɔgɔ bɔra Source Title kɔnɔ

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

A jiracogo wɛrɛw

Fàra o kan .blockquote-reversewalasa ka blockquote dɔ Kɛ ni kɔnɔkow bɛ ɲɔgɔn na ni kinin fɛ.

Lorem ipsum dolor sigilen amet, consectetur adipiscing elit. Jateden dafalen posuere erat a ante.

Mɔgɔ min tɔgɔ bɔra Source Title kɔnɔ

<blockquote class="blockquote-reverse">
  ...
</blockquote>

Lisitiw

A ma yamaruya sɔrɔ

Fɛn minnu kɔnɔ, u sigicogo tɛ foyi ɲɛ k’a jɛya, olu lisɛli.

Lorem ipsum dolor sigi amet
Consectetur ye farikolojidɛsɛ ye
Jateden dafalen molestie lorem ka mass
Fasilisi bɛ sɔrɔ pretium nisl aliquet la
Nulla volutpat ye aliquam ye
- Fasellus iaculis ye jiri ye
- Purus sodales bɛ sɔgɔsɔgɔninjɛ furakɛ
- Vestibulu laoreet porttitor sem.. Bamako, Mali
- Ac tristique libero volutpat ka baara kɛ
Faucibus porta lacus ye jiri ye min bɛ wele ko fringilla vel
Aenean sigi amet erat nunc
Eget porttitor ka lorem

<ul>
  <li>...</li>
</ul>

A ye yamaruya di

Fɛn minnu kɔnɔ, o sigicogo bɛ nafa jira k’a jɛya, olu lisɛli.

Lorem ipsum dolor sigi amet
Consectetur ye farikolojidɛsɛ ye
Jateden dafalen molestie lorem ka mass
Fasilisi bɛ sɔrɔ pretium nisl aliquet la
Nulla volutpat ye aliquam ye
Faucibus porta lacus ye jiri ye min bɛ wele ko fringilla vel
Aenean sigi amet erat nunc
Eget porttitor ka lorem

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

A ma kɛ cogo min na

Aw bɛ dakun fɔlɔ list-styleni kininbolo fan dɔ bɔ lisi kɔnɔfɛnw kan (denmisɛnninw dɔrɔn). O bɛ tali kɛ denmisɛnw ka lisi fɛnw dɔrɔn de la minnu bɛ teliya , o kɔrɔ ye ko i bɛna a ɲini ka kalasi fara a kan lisi minnu bɛ sigi sen kan fana.

Lorem ipsum dolor sigi amet
Consectetur ye farikolojidɛsɛ ye
Jateden dafalen molestie lorem ka mass
Fasilisi bɛ sɔrɔ pretium nisl aliquet la
Nulla volutpat ye aliquam ye
- Fasellus iaculis ye jiri ye
- Purus sodales bɛ sɔgɔsɔgɔninjɛ furakɛ
- Vestibulu laoreet porttitor sem.. Bamako, Mali
- Ac tristique libero volutpat ka baara kɛ
Faucibus porta lacus ye jiri ye min bɛ wele ko fringilla vel
Aenean sigi amet erat nunc
Eget porttitor ka lorem

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

Inline kɔnɔ

Aw bɛ lisi kɔnɔfɛnw bɛɛ bila tigɛli kelen kan ni display: inline-block;ani yeelen padding dɔw ye.

Lorem ye ipsum ye
Fasellus iaculis (banakisɛfagalan).
Nulla volutpat ye

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

Cogojirali

Daɲɛw lisɛli n’u ɲɛfɔli minnu bɛ tali kɛ u la.

Ɲɛfɔli lisiw: Ɲɛfɔli lisi dafalen don daɲɛw ɲɛfɔli kama.
Euismod ye: Vestibulum id ligula porta felis euismod cɛya bɛ sɔrɔ lacinia odio sem nec elit.; Donec id elit non mi porta gravida ye eget metus ye.
Malesuada ka porta: Etiam porta sem cɛmanba min bɛ wele ko magna mollis euismod.

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

Ɲɛfɔli tilennen

Aw bɛ daɲɛw ni ɲɛfɔliw kɛ <dl>ɲɔgɔn kan kɛrɛfɛ. A bɛ daminɛ ni stacked ye i n’a fɔ default <dl>s, nka ni navbar bɛ bonya, o cogo la ninnu bɛ kɛ.

Ɲɛfɔli lisiw: Ɲɛfɔli lisi dafalen don daɲɛw ɲɛfɔli kama.
Euismod ye: Vestibulum id ligula porta felis euismod cɛya bɛ sɔrɔ lacinia odio sem nec elit.; Donec id elit non mi porta gravida ye eget metus ye.
Malesuada ka porta: Etiam porta sem cɛmanba min bɛ wele ko magna mollis euismod.
Felis euismod ka cɛya bɛ sɔrɔ lacinia la: Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sigi amet risus.

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

Oto-tɔrɔbɔli

ɲɛfɔli lisi tilennenw bɛna daɲɛw tigɛ minnu janya ka bon kosɛbɛ walasa u tɛ se ka don numanbolo kulu kɔnɔ ni text-overflow. Viewports fitininw na, u bɛna fɛn caman Changer ka kɛ default stacked layout ye.

Inline kɔnɔ

Kode inline snippets siri ni <code>.

Misali la, a <section>ka kan ka siri i n’a fɔ inline.

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

Baarakɛla ka dontaw

Baara kɛ ni o ye <kbd>walasa ka donta jira min bɛ don a ka c’a la klaviyeti fɛ.

Walasa ka ɲɛbilasɛbɛnw caman ɲɔgɔn falen-falen, i ka sɛbɛnni kɛ cdka tugu o ɲɛbila tɔgɔ sɛbɛn.
Walasa ka sigida labɛncogo ladilan, i ka digi 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>

Bloki basigilen

Baara kɛ ni <pre>kode sinsinni caman ye. Aw ye aw jija ka bɔ angle brackets (kɛrɛfɛlan) fɛn o fɛn na kode kɔnɔ walasa ka ɲɛfɔli kɛ ka ɲɛ.

<p>Sɛbɛn misali yan...</p>

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

Aw bɛ se ka .pre-scrollablekalasi fara a kan ni aw yɛrɛ sago ye, o bɛna max-height sigi 350px ani ka y-axis scrollbar di.

Yɛlɛma-yɛlɛmaw

Walasa ka fɛn caman jira, baara kɛ ni <var>taamasiyɛn ye.

y = m x + b ye

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

Sample bɔli

Walasa ka blokiw jira misali bɔli porogaramu dɔ la, baara kɛ ni <samp>tag ye.

Nin sɛbɛn in kun ye ka jate iko misali bɔlen min bɔra ɔridinatɛri porogaramu dɔ la.

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

Misali jɔnjɔn

Walasa ka cogoya jɔnjɔn sɔrɔ—padding yeelenma ani tilayɔrɔ tilennen dɔrɔn—aw bɛ basigi kalasi .tablefara fɛn o fɛn <table>kan . A bɛ se ka kɛ i n’a fɔ super redundant, nka k’a da tabali baara cayalenba kan plugin wɛrɛw kama i n’a fɔ kalolabɔw ani donw sugandibagaw, an y’a sugandi k’an ka tabali cogoyaw bɔ ɲɔgɔn na.

Tabali ɲɛfɔli min bɛ se ka kɛ.
# Bamako .	Tɔgɔ	Jamu	Baarakɛla tɔgɔ
1 ye	Marka	Otto ye	@mdo ye
2 ye	Yakuba	Thornton ye	@belebeleba
3 ye	Larry ye	Kɔnɔ in	@twitter kan

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

Layini sɛrɛkiliw

Aw bɛ baara kɛ ni .table-stripedzebra-striping fara tabali jirisun o tabali kan <tbody>.

Cross-browser ka baarakɛcogo ɲuman

Tabali sɛrɛkiliw bɛ cogoya sɔrɔ :nth-childCSS sugandili fɛ, o min tɛ sɔrɔ Internet Explorer 8 kɔnɔ.

# Bamako .	Tɔgɔ	Jamu	Baarakɛla tɔgɔ
1 ye	Marka	Otto ye	@mdo ye
2 ye	Yakuba	Thornton ye	@belebeleba
3 ye	Larry ye	Kɔnɔ in	@twitter kan

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

Tabali min bɛ dankan na

Aw bɛ a fara a kan .table-borderedwalasa ka danw kɛ tabali ni seliw fan bɛɛ la.

# Bamako .	Tɔgɔ	Jamu	Baarakɛla tɔgɔ
1 ye	Marka	Otto ye	@mdo ye
2 ye	Yakuba	Thornton ye	@belebeleba
3 ye	Larry ye	Kɔnɔ in	@twitter kan

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

Hover jiriw

Fàra ɲɔgɔn kan .table-hoverwalasa ka se ka hover cogoya dɔ Kɛ tabali jὲkuluw kan a kɔnɔ <tbody>.

# Bamako .	Tɔgɔ	Jamu	Baarakɛla tɔgɔ
1 ye	Marka	Otto ye	@mdo ye
2 ye	Yakuba	Thornton ye	@belebeleba
3 ye	Larry ye	Kɔnɔ in	@twitter kan

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

Tabali min bɛ kondensé

Aw bɛ a fara a kan .table-condensedwalasa ka tabali kɛ ɲɔgɔn fɛ ni aw ye selilɛriw tigɛ ka tila tila.

# Bamako .	Tɔgɔ	Jamu	Baarakɛla tɔgɔ
1 ye	Marka	Otto ye	@mdo ye
2 ye	Yakuba	Thornton ye	@belebeleba
3 ye	Larry ka Kɔnɔ		@twitter kan

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

Kalanso minnu bɛ kɛ ka ɲɛsin ko kɛlenw ma

Baara kɛ ni contextual classes ye walasa ka tabali jiriw walima seliw kelen-kelenw kulɛri.

Kilasi	Cogojirali
`.active`	A bɛ hover kulɛri kɛ jirisun walima seli kɛrɛnkɛrɛnnen dɔ kan
`.success`	A b’a jira ko wale kɛra min ɲɛnabɔra walima min kɛra koɲuman
`.info`	A b’a jira ko kunnafoni caman yeli walima wale dɔ kɛra min tɛ mɔgɔ si ta ye
`.warning`	A bɛ lasɔmini dɔ jira min bɛ se ka kɛ a mago bɛ jateminɛ na
`.danger`	A bɛ wale dɔ jira min bɛ se ka kɛ farati ye walima min bɛ se ka kɛ wale jugu ye

# Bamako .	Kolon kuncɛcogo	Kolon kuncɛcogo	Kolon kuncɛcogo
1 ye	Kolon kɔnɔkow	Kolon kɔnɔkow	Kolon kɔnɔkow
2 ye	Kolon kɔnɔkow	Kolon kɔnɔkow	Kolon kɔnɔkow
3 ye	Kolon kɔnɔkow	Kolon kɔnɔkow	Kolon kɔnɔkow
4 ye	Kolon kɔnɔkow	Kolon kɔnɔkow	Kolon kɔnɔkow
5 ye	Kolon kɔnɔkow	Kolon kɔnɔkow	Kolon kɔnɔkow
6. 6	Kolon kɔnɔkow	Kolon kɔnɔkow	Kolon kɔnɔkow
7 ye	Kolon kɔnɔkow	Kolon kɔnɔkow	Kolon kɔnɔkow
8 ye	Kolon kɔnɔkow	Kolon kɔnɔkow	Kolon kɔnɔkow
9 ye	Kolon kɔnɔkow	Kolon kɔnɔkow	Kolon kɔnɔkow

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

Kɔrɔ lasecogo dɛmɛni fɛɛrɛw ma

Baara kɛli ni kulɛri ye walasa ka kɔrɔ dɔ fara tabali sinsinni kan walima selilɛri kelen-kelen kan, o bɛ taamasiyɛn yelen dɔrɔn de di, min tɛna lase dɛmɛni fɛɛrɛw baarakɛlaw ma – i n’a fɔ ɛkran kalanbagaw. Aw ye aw jija kunnafoni minnu jiralen don ni kulɛri ye, olu bɛ ye ka bɔ kɔnɔkow yɛrɛ la (sɛbɛn yelen min bɛ tabali sinsinni/seli kɔnɔ min bɛ tali kɛ o la), walima u bɛ don a kɔnɔ fɛɛrɛ wɛrɛw fɛ, i n’a fɔ sɛbɛn wɛrɛw minnu dogolen bɛ ni .sr-onlykalan ye.

Tabali minnu bɛ jaabi di

Aw bɛ jaabi-tabali dɔw Dabɔ ni fɛn o fɛn bɛ siri a .tablekɔnɔ .table-responsivewalasa u ka wuli ka taa jɛgɛn na minɛn misɛnninw kan (768px jukɔrɔ). Ni i bɛ fɛn o fɛn lajɛ min bonya ka bon ni 768px ye, i tɛna danfara si ye nin tabali ninnu na.

Clipping/truncation jɔlen

Tabali minnu bɛ jaabi di, olu bɛ baara kɛ ni overflow-y: hidden, min bɛ kunnafoni fɛn o fɛn bɛ tɛmɛ tabali duguma walima sanfɛ dakunw kan, o bɛ tigɛ. Kɛrɛnkɛrɛnnenya la, o bɛ se ka clip off dropdown menus ani mɔgɔ wɛrɛw ka widget wɛrɛw bɔ.

Firefox ni forow labɛncogo

Firefox bɛ ni forobaciyɛn cogoya dɔw ye minnu bɛ tali widthKɛ jaabi-tabali la. O tɛ Se ka Lajɔ ni Firefox-kɛrɛnkɛrɛnnen hakɛ dɔ ma Kɛ an tɛ min Di Bootstrap kɔnɔ:

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

Walasa ka kunnafoni wɛrɛw sɔrɔ, aw ye nin jaabi kalan Stack Overflow .

# Bamako .	Tabali kuncɛcogo	Tabali kuncɛcogo	Tabali kuncɛcogo	Tabali kuncɛcogo	Tabali kuncɛcogo	Tabali kuncɛcogo
1 ye	Tabali selilɛri	Tabali selilɛri	Tabali selilɛri	Tabali selilɛri	Tabali selilɛri	Tabali selilɛri
2 ye	Tabali selilɛri	Tabali selilɛri	Tabali selilɛri	Tabali selilɛri	Tabali selilɛri	Tabali selilɛri
3 ye	Tabali selilɛri	Tabali selilɛri	Tabali selilɛri	Tabali selilɛri	Tabali selilɛri	Tabali selilɛri

# Bamako .	Tabali kuncɛcogo	Tabali kuncɛcogo	Tabali kuncɛcogo	Tabali kuncɛcogo	Tabali kuncɛcogo	Tabali kuncɛcogo
1 ye	Tabali selilɛri	Tabali selilɛri	Tabali selilɛri	Tabali selilɛri	Tabali selilɛri	Tabali selilɛri
2 ye	Tabali selilɛri	Tabali selilɛri	Tabali selilɛri	Tabali selilɛri	Tabali selilɛri	Tabali selilɛri
3 ye	Tabali selilɛri	Tabali selilɛri	Tabali selilɛri	Tabali selilɛri	Tabali selilɛri	Tabali selilɛri

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

Misali jɔnjɔn

Foroko kunnafonisɛbɛn kelen-kelen bɛɛ bɛ diɲɛ cogoya dɔw sɔrɔ u yɛrɛma. Textual <input>, <textarea>, ani <select>elements bɛɛ ni .form-contrololu bɛ sigi ka width: 100%;kɛɲɛ ni default ye. Aw bɛ labeliw ni kunnafonidilanw siri .form-groupwalasa u ka yɔrɔ janya ka ɲɛ.

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

Aw kana foroko kuluw ni donta kuluw ɲagami ɲɔgɔn na

aw kana foroko kuluw ɲagami ɲɔgɔn na ni donta kuluw ye . O nɔ na, aw bɛ donna-jɛkulu in sigi foroko kulu kɔnɔ.

Foroko min bɛ wele ko Inline

Fàra .form-inlinei ka foroko kan (min man kan ka Kɛ a ye <form>) ka ɲɛsin kinin fɛ ani inline-block controls ma. O bɛ tali kɛ sɛbɛnw dɔrɔn de la minnu bɛ filɛlikɛyɔrɔw kɔnɔ minnu bonya ye 768px ye a dɔgɔyalenba la.

A bɛ se ka kɛ ko ladamu bonya bɛ ɲini

Inputs ani selects ye width: 100%;baara Kɛ ni default ye Bootstrap kɔnɔ. Inline forms kɔnɔ, an b’o Lasegin ka Kɛ width: auto;walasa control caman bɛ Se ka Sìgi layini kelen kan. Ka kɛɲɛ ni i ka labɛncogo ye, ladamu bonya wɛrɛw bɛ se ka kɛ wajibi ye.

Aw bɛ sɛbɛnniw fara a kan tuma bɛɛ

Écran kalanbagaw bɛna gɛlɛya sɔrɔ aw ka sɛbɛnw na ni aw ma sɛbɛn dɔ don donta bɛɛ la. Nin inline sɛbɛnw kama, aw bɛ se ka labeliw dogo ni .sr-onlykalan ye. Fɛɛrɛ wɛrɛw bɛ yen minnu bɛ se ka kɛ walasa ka taamasiyɛn di dɛmɛ fɛɛrɛw ma, i n’a fɔ aria-label, aria-labelledbywalima fɛn titlemin bɛ kɛ ka fɛn dɔ jira. Ni ninnu si tɛ yen, ɛkran kalanbagaw bɛ se ka baara kɛ ni o placeholderfɛnsɛbɛnni ye, ni o bɛ yen, nka aw k’a kɔlɔsi ko baara kɛli ye placeholderka kɛ taamasiyɛn kɛcogo wɛrɛw nɔnabila ye, o tɛ ladilikan ye.

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

Foro horizontal (fɔcogo tilennen).

Baara kɛ ni Bootstrap ka jatebɔlanw ye minnu ɲɛfɔlen don ka kɔn walasa ka sɛbɛnfura kunkankow labeliw ni kuluw labɛn cogo tilennen na ni dɔ farali .form-horizontalye sɛbɛnfura kan (o man kan ka kɛ a ye <form>). O kɛli bɛ .form-groups Changé ka kɛ i n’a fɔ grid rows, o la mago tɛ .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>

Kontrɔli minnu bɛ dɛmɛ

Misaliw bɛ sɔrɔ forobaciyɛn kunkankow la minnu bɛ dɛmɛ sɔrɔ misali sɛbɛnw labɛncogo la.

Donanw

Foroko ɲɛnabɔli min ka ca kosɛbɛ, sɛbɛnni-sɛbɛnni-yɔrɔw. HTML5 suguya bɛɛ dɛmɛni bɛ sɔrɔ a kɔnɔ: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, ani color.

Type deklarasiyɔn wajibiyalen don

Donanw bɛna kɛ cogo dafalen na dɔrɔn ni u typeka fɔlen don ka ɲɛ.

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

Donanw kuluw

Walasa ka sɛbɛnni walima butɔni jɛlenw fara ɲɔgɔn kan ka kɔn ani/walima sɛbɛnni basigilen fɛn o fɛn ɲɛ <input>, i ka donna kulu yɔrɔ lajɛ .

Sɛbɛnni yɔrɔ

Formulaire control min bɛ sɛbɛnni zana caman dɛmɛ. Aw bɛ fɛn dɔ Changer rowsi n’a fɔ a mago bɛ cogo min na.

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

Jateminɛ kɛyɔrɔw ani arajow

Jateminɛ kɛyɔrɔw ye sugandili kelen walima caman sugandili ye lisi dɔ kɔnɔ, ka sɔrɔ arajow ye sugandili kelen sugandi caman cɛma.

Jateminɛkɛyɔrɔw ni arajo minnu bɛ se ka baara kɛ, olu bɛ dɛmɛ, nka walasa ka "min tɛ sɔn" taamasiyɛn di bangebaga ka hover kan <label>, i ka kan ka .disabledkalansen fara bangebaga .radiokan , .radio-inline, .checkbox, walima .checkbox-inline.

Default (dafalen) .

<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 checkboxw ani arajow

Baara kɛ ni .checkbox-inlinewalima .radio-inlinekalanw ye minnu bɛ jatebɔyɔrɔw walima arajow kan minnu bɛ tugu ɲɔgɔn na walasa ka kunnafoni dɔw sɔrɔ minnu bɛ jira layini kelen kan.

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

Jateminɛ kɛsu ani arajo minnu tɛ ni labeli sɛbɛn ye

Ni sɛbɛnni tɛ i bolo <label>, donta bɛ jɔ i n’a fɔ i b’a miiri cogo min na. Sisan a bɛ baara kɛ dɔrɔn jatebɔyɔrɔw ni arajow kan minnu tɛ ɛntɛrinɛti kan. Aw ye aw hakili to a la hali bi ka labeli sugu dɔ di dɛmɛni fɛɛrɛw ma (misali la, ka baara kɛ ni 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>

A bɛ sugandi

A kɔlɔsi ko native select menu caman—o kɔrɔ ye ko Safari ani Chrome kɔnɔ—u bɛ ni nkɔni bulama ye minnu tɛ se ka ladilan ni border-radiusproperties ye.

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

Kɔrɔsili minnu <select>bɛ ni multiplefɛnɲɛnɛma ye, sugandili caman bɛ jira ka kɛɲɛ ni u yɛrɛ ye.

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

Kontrɔli statiki (contrôle statique).

Ni i mago bɛ ka sɛbɛn gansan bila sɛbɛnfura sɛbɛnfura kɛrɛfɛ sɛbɛnfura kɔnɔ, i ka baara kɛ ni .form-control-statickalan ye min bɛ sɛbɛnfura kan <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 cogoya

An bɛ outlinecogoya kɔrɔw bɔ foroko kɔrɔsibaga dɔw kan ka a box-shadowkɛ a nɔ na :focus.

Demo`:focus` jamana

misali donta min bɛ sanfɛ , o bɛ baara kɛ ni ladamu cogoyaw ye an ka sɛbɛnw kɔnɔ walasa ka :focuscogoya jira a kan .form-control.

Jamana min ye bololabaara ye

A ka disabledboolean attribut (boli) fara donnafɛn dɔ kan walasa ka baarakɛlaw ka jɛɲɔgɔnyaw bali. Donan minnu ma se ka baara kɛ, olu bɛ ye ka nɔgɔya ani ka taamasiyɛn dɔ fara u kan not-allowed.

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

Foro-yɔrɔw labɛnni minnu bɛ se ka baara kɛ

A ka disabledfɛnɲɛnɛma in fara a kan walasa <fieldset>ka kunnafoni bɛɛ bali ka don a kɔnɔ <fieldset>siɲɛ kelen.

Caveat ka ɲɛsin link baarakɛcogo ma`<a>`

O cogo la, navigatɔrɔw bɛna foroko kɔrɔw bɛɛ minɛ ( <input>, <select>ani <button>fɛnw) minnu bɛ a kɔnɔ <fieldset disabled>i n’a fɔ u ma baara kɛ, ka klaviyeti ni sosɛti bɛɛ ka jɛɲɔgɔnya bali u kan. Nka, ni i ka foroko fana bɛ ni <a ... class="btn btn-*">fɛnw ye, olu bɛna di dɔrɔn cogoya dɔ ma min ye pointer-events: none. I n’a fɔ a fɔra cogo min na dakun na min bɛ kuma butɔni cogoya balilen kan (ani kɛrɛnkɛrɛnnenya la dakun fitinin min bɛ ankɔri fɛnw kan), nin CSS nafolo in ma labɛn fɔlɔ wa a ma dɛmɛ bɛrɛbɛrɛ Opera 18 ni a jukɔrɔ, walima Internet Explorer 11 kɔnɔ, wa a ye se sɔrɔ 't bali klaviyeti baarakɛlaw ka se ka sinsin walima ka baara kɛ ni nin jɛgɛnsira ninnu ye. O la sa, walisa ka i yɛrɛ tanga, baara kɛ ni JavaScript ye min bɛ kɛ ka kɛɲɛ ni i yɛrɛ sago ye walasa ka o ɲɔgɔnna jɛgɛnw bali.

Cross-browser ka baarakɛcogo ɲuman

Hali ni Bootstrap bɛna o cogoyaw waleya navigatɔrɔw bɛɛ la, Internet Explorer 11 ani a duguma tɛ fɛn in dɛmɛ kosɛbɛ a disabledkan <fieldset>. Baara kɛ ni JavaScript ye min bɛ kɛ ka kɛɲɛ ni i yɛrɛ sago ye walasa ka forow labɛncogo bali o navigatɛriw kɔnɔ.

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

Kalan dɔrɔn de fɔ

A bɛ readonlyboolean attribut (boli) fara donnafɛn dɔ kan walasa ka donnafɛn nafa caman caman cili bali. Kalan dɔrɔn dontaw bɛ ye ka nɔgɔya (i n’a fɔ donnakow balilenw), nka u bɛ taamasiyɛn jɔnjɔn mara.

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

Dɛmɛ sɛbɛn

Bloki nivo dɛmɛ sɛbɛnni ka ɲɛsin foroko kunkankow ma.

Dɛmɛ sɛbɛn ni sɛbɛnfura kunkankow fara ɲɔgɔn kan

Dɛmɛ sɛbɛn ka kan ka jɛ k’a jɛya ni sɛbɛnfura kunkanko ye a bɛ tali kɛ ni fɛn ye min bɛ baara kɛ ni o fɛn aria-describedbyye. O bɛna a to dɛmɛ fɛɛrɛw – i n’a fɔ ɛkran kalanbagaw – bɛna nin dɛmɛ sɛbɛn in laseli ni baarakɛla ye a sinsin walima ni a donna kunnafoni na.

<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 (dafalen) b’a jira

Bootstrap kɔnɔ, filiw, lasɔminiw, ani ɲɛtaa cogoyaw dantigɛli cogoyaw bɛ sɔrɔ forobaciyɛn kunkankow kan. Walasa ka baara kɛ, i ka .has-warning, .has-error, walima .has-successfara bangebaga yɔrɔ kan. O fɛn o fɛn .control-label, .form-control, ani .help-blocko yɔrɔ kɔnɔ, o bɛna tiɲɛni kɛcogoyaw sɔrɔ.

Ka tiɲɛni cogoya lase dɛmɛni fɛɛrɛw ma ani baarakɛlaw ma minnu tɛ kulɛri fiyen

Baara kɛli ni nin dantigɛlicogo ninnu ye walasa ka foroko kunnafoni dɔ cogoya jira, o bɛ taamasiyɛn yelen dɔrɔn de di, min sinsinnen bɛ kulɛri kan, min tɛna lase dɛmɛni fɛɛrɛw baarakɛlaw ma - i n’a fɔ ɛkran kalanbagaw - walima kulɛri fiyentɔw baarakɛlaw ma.

Aw ye aw jija jamana jiracogo wɛrɛ fana ka di. Misali la, i bɛ se ka hakilina dɔ don cogoya kan foroko kunnafonisɛbɛn <label>yɛrɛ kɔnɔ (i n’a fɔ a bɛ kɛ cogo min na kode misali nata la), ka Glyphicon dɔ don a kɔnɔ (ni sɛbɛn wɛrɛ bɛnnen ye ka baara kɛ ni .sr-onlykalasi ye - aw ye Glyphicon misaliw lajɛ ), walima ka dɔ di dɛmɛ wɛrɛ sɛbɛnni bloki. Kɛrɛnkɛrɛnnenya la dɛmɛni fɛɛrɛw kama, forobaciyɛn kɔrɔsibaga tiɲɛnenw fana bɛ se ka fɛn dɔ di u ma aria-invalid="true".

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

Ni taamasiyɛnw ye minnu bɛ se ka sugandi

Aw bɛ se fana ka hakilinata taamasiyɛnw fara a kan ni farali ye.has-feedback ani taamasiyɛn kinin fɛ.

Feedback taamasiyɛnw bɛ baara kɛ ni sɛbɛnnifɛnw dɔrɔn de <input class="form-control">ye.

Taamaʃyɛnw, labeliw ani dontaw kuluw

Fɛɛrɛbɔ taamasiyɛnw bilali bolo la, o de wajibiyalen don donnakow la minnu tɛ ni taamasiyɛn ye ani donnajɛkulu minnu bɛ ni farankan ye kinin fɛ. Aw bɛ dusu don aw kɔnɔ kosɛbɛ aw ka labeliw di dontaw bɛɛ ma sɔrɔli kunw na. N’i b’a fɛ ka labeliw bali ka jira, i k’u dogo ni .sr-onlykalan ye. Ni aw ka kan ka kɛ ni labeliw tɛ, aw topbɛ jaabiw taamasiyɛn nafa ladilan. Donan kuluw kama, aw bɛ rightnafa ladilan ka kɛɲɛ ni pixel nafa bɛnnen ye ka kɛɲɛ ni aw ka farankan bonya ye.

Ka taamasiyɛn kɔrɔ lase dɛmɛni fɛɛrɛw ma

Walasa dɛmɛni fɛɛrɛw – i n’a fɔ ɛkran kalanbagaw – ka taamasiyɛn dɔ kɔrɔ jira cogo bɛnnen na, sɛbɛn dogolen wɛrɛw ka kan ka don .sr-onlykalanso kɔnɔ ani ka jɛ k’a jɛya ni sɛbɛnfura kunkanko ye min bɛ tali kɛ baara aria-describedbyla . O cogo kelen na, i k’a lajɛ ko kɔrɔ (misali la, ko lasɔmini bɛ sɛbɛnni-sɛbɛnni-yɔrɔ kɛrɛnkɛrɛnnen dɔ la) ka Lase cogo wɛrɛ la, i n’a fɔ sɛbɛn yɛrɛyɛrɛ <label>min bɛ tali Kɛ sɛbɛnfura-kɔlɔsili la, o sɛbɛnni caman Yɛlɛma.

Hali n’a y’a Sɔrɔ misali nataw bɛ u kelen-kelen bɛɛ ka foroko-kɔlɔsili-sɛbɛnw tiɲɛni cogoya Fɔ kaban <label>sɛbɛn yɛrɛ kɔnɔ, sanfɛla fɛɛrɛ (ka baara Kɛ ni .sr-onlysɛbɛnni ni aria-describedby) ye, o Dònna a la walasa ka ɲɛfɔli Kɛ.

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

Ikoni minnu bɛ se ka sugandi, olu bɛ sɔrɔ cogo la min bɛ wele ko horizontal ani inline

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

Icons optionnels ni `.sr-only`labels dogolenw

N’i ye baara Kɛ ni .sr-onlykalasi ye walasa ka foroko control’s dɔ dogo <label>(sanni i ka baara Kɛ ni labeli sugandicogo wɛrɛw ye, i n’a fɔ aria-labelattribut), Bootstrap bɛna taamaʃyɛn jɔyɔrɔ Labɛn a yɛrɛma ni a Fàrala a kan.

@ Bamako

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

Kɔlɔsili kɛ sizing kan

aw bɛ sanfɛlanw sigi ni kalasiw ye i n' a fɔ .input-lg, ani ka bonyaw sigi ni jatebɔlanw ye i n' a fɔ .col-lg-*.

Kɔrɔya bonya

Aw bɛ foroko kunnafoni-di-minɛnw dilan minnu ka jan walima minnu ka surun, minnu bɛ bɛn butɔni hakɛw ma.

<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 foroko kulu hakɛw

Teliya la ka labeliw bonya ani ka foroko kunkankow kɛ kɔnɔna na .form-horizontalni dɔ farali ye .form-group-lgwalima .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>

Kolonw bonya

Aw bɛ dontaw siri jatebɔlanw kɔnɔ, walima bangebaga fɛn o fɛn ladamu, walasa ka bonya ɲininenw waleya nɔgɔya la.

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

Butɔnw ka taamasiyɛnw

Baara kɛ ni butɔni kalanw ye <a>, <button>, walima <input>fɛn dɔ kan.

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

Baarakɛcogo min bɛ kɛ ka kɛɲɛ ni sigida kɛrɛnkɛrɛnnenw ye

Hali ni butɔni kalasi bɛ Se ka baara Kɛ ni fɛnw kan <a>ani <button>fɛnw kan, fɛnw dɔrɔn de <button>bɛ Dɛmɛ an ka nav ni navbar yɔrɔw kɔnɔ.

Lien minnu bɛ baara kɛ i n’a fɔ butɔni

Ni <a>fɛnw bɛ kɛ ka baara kɛ i n’a fɔ butɔni – ka ɲɛ kɔnɔ baarakɛcogo daminɛ, sanni ka taa sɛbɛn wɛrɛ walima yɔrɔ wɛrɛ la ɲɛ min bɛ yen sisan kɔnɔ – u ka kan ka di u ma fana role="button".

Cross-browser ka baarakɛcogo

O kɛcogo ɲuman na, an b’a ɲini kosɛbɛ ka baara kɛ ni o <button>fɛn ye ni a bɛ se ka kɛ walasa ka a jira ko cross-browser rendering bɛ bɛn.

Fɛn wɛrɛw cɛma, butɔni dɔ bɛ Firefox <30 kɔnɔ min b’an bali ka line-heightof <input>-based butɔni sigi, o b’a to u tɛ bɛn tigitigi butɔni tɔw janya ma Firefox kan.

Sugandili minnu bɛ kɛ

Baara kɛ ni butɔni kalasi minnu bɛ sɔrɔ, olu dɔ la kelen ye walasa ka butɔni cogoya dɔ dilan joona.

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

Kɔrɔ lasecogo dɛmɛni fɛɛrɛw ma

Baara kɛli ni kulɛri ye walasa ka kɔrɔ dɔ fara butɔni kan, o bɛ taamasiyɛn yelen dɔrɔn de di, min tɛna lase dɛmɛni fɛɛrɛw baarakɛlaw ma – i n’a fɔ ɛkran kalanbagaw. Aw ye aw jija kunnafoni minnu jiralen don ni kulɛri ye, olu bɛ ye ka bɔ kɔnɔkow yɛrɛ la (butɔni sɛbɛn yelen), walima u bɛ don a kɔnɔ fɛɛrɛ wɛrɛw fɛ, i n’a fɔ sɛbɛnni wɛrɛw minnu dogolen bɛ ni .sr-onlykalan ye.

Bonyaw

Fancy butɔni belebelebaw walima fitininw? Aw bɛ .btn-lg, .btn-sm, walima .btn-xsfara a kan walasa ka bonya wɛrɛw sɔrɔ.

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

Aw bɛ bloki nivo butɔniw dilan—minnu bɛ bangebaga dɔ bonya bɛɛ lajɛlen na—aw kɛtɔ ka .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>

Jamana min bɛ baara la

Butɔnw bɛna jira ni u digilen don (ni kɔkanna dibi don, ni dan ye dibi ye, ani ni inset shadow ye) ni u bɛ baara la. <button>Elemanw ta fan fɛ , o bɛ Kɛ ni :active. <a>Elemanw kama , a bɛ Kɛ ni .active. Nka, i bɛ se ka baara kɛ ni .actives kan <button>(ani ka aria-pressed="true"fɛntigiya don a kɔnɔ) ni i mago bɛ ka active state lasegin porogaramu fɛ.

Butɔn yɔrɔ

Wajibi tɛ ka fara a kan :activei n’a fɔ a ye pseudo-class ye, nka n’i mago bɛ ka force o yecogo kelen na, taa ɲɛ ka fara a kan .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>

Ankɔri élément

.activeKalanso fara butɔni <a>kan.

Lien fɔlɔ Ka tugu

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

Jamana min ye bololabaara ye

Aw bɛ butɔni kɛ i n' a fɔ u tɛ se ka digi ni u falenni ye ka segin ni opacity.

Butɔn yɔrɔ

Aw bɛ o disabledjogo in fara <button>butɔni kan.

<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 ka baarakɛcogo ɲuman

N’i ye o fɛn in Fàra a kan disabled, <button>Internet Explorer 9 ani a duguma bɛna sɛbɛnni Kɛ nɛrɛmuguma ye ni sɛbɛnni-dugukolo jugu ye an tɛ Se k’o Labɛn.

Ankɔri élément

.disabledKalanso fara butɔni <a>kan.

Lien fɔlɔ Ka tugu

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

An bɛ baara Kɛ .disabledni nafa-kalasi ye yan, i n’a fɔ .activekalasi jɛlen, o la, daɲɛ fɔlɔ si tɛ wajibiya.

Link baarakɛcogo lasɔmini

Nin kalan in bɛ baara Kɛ pointer-events: nonek’a ɲini ka s ka jὲɲɔgɔnya baarakɛcogo Dabila <a>, nka o CSS nafolo ma Sɔ̀rɔ fɔlɔ wa a ma Dɛmɛ kosɛbɛ Opera 18 ni a duguma, walima Internet Explorer 11. Ka Fàra o kan, hali navigatɛri minnu bɛ dɛmɛ Kɛ pointer-events: none, klaviyeti navigatiɔn bɛ to a ma nɔ bila a la, o kɔrɔ ye ko klaviyeti ɲɛnamaw ni dɛmɛn fɛɛrɛw baarakɛlaw bɛna se hali bi ka nin jɛgɛnsira ninnu baara. O la sa, walisa ka i yɛrɛ tanga, baara kɛ ni JavaScript ye min bɛ kɛ ka kɛɲɛ ni i yɛrɛ sago ye walasa ka o ɲɔgɔnna jɛgɛnw bali.

Ja minnu bɛ jaabi di

Ja minnu bɛ Bootstrap 3 kɔnɔ, olu bɛ se ka kɛ jaabi-teriw ye kalan farali fɛ .img-responsive. O bɛ tali kɛ max-width: 100%;, height: auto;ani display: block;ja la walasa a ka sɛgɛsɛgɛli kɛ koɲuman bangebaga yɔrɔ la.

Walasa ka ja minnu bɛ baara kɛ ni .img-responsivekalan ye, olu cɛmancɛ la, baara kɛ .center-blockni .text-center. Aw ye dɛmɛbagaw ka kalansenw yɔrɔ lajɛ walasa ka kunnafoni wɛrɛw sɔrɔ .center-blockbaarakɛcogo kan.

SVG ja ani IE 8-10

Internet Explorer 8-10 kɔnɔ, SVG jaw ni .img-responsiveu bonya tɛ kelen ye. Walasa k’o labɛn, aw bɛ dɔ fara a kan width: 100% \9;yɔrɔ min na a mago bɛ o la. Bootstrap tɛ nin waleya a yɛrɛma bawo a bɛ gɛlɛyaw lase ja cogoya wɛrɛw ma.

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

Jaw cogoyaw

Kalansow fara <img>element dɔ kan walasa ka jaw cogoya nɔgɔya poroze o porozɛ kɔnɔ.

Cross-browser ka baarakɛcogo ɲuman

Aw k’a to aw hakili la ko Internet Explorer 8 tɛ dɛmɛ sɔrɔ nkɔni lamininenw na.

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

Kulɛriw minnu bɛ sigida kɔnɔ

Kɔrɔ lase kulɛri fɛ ni bolomafara nafama kalanw ye. Olu fana bɛ Se ka Kɛ 'jyɛnnatigɛ-sɛbɛnw kan wa u bɛna dibi Kɛ 'yɔrɔ la i n'a fɔ an ka 'jyɛnnatigɛ-cogo kɔrɔw.

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.. Bamako, Mali.

Nullam id dolor id nibh ultricies bolifɛnw ut id elit.

Duis mollis, est non commodo luctus, nisi erat jirisunba min bɛ wele ko ligula.

Maecenas sed diam eget risus varius blandit sigi amet non magna.

Etiam porta sem cɛmanba min bɛ wele ko magna mollis euismod.

Donec ullamcorper nulla min tɛ fɛn ye min bɛ wele ko fringilla.

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

Ka ɲɛsin kɛrɛnkɛrɛnnenya la

Tuma dɔw la, sinsinnan kalanw tɛ Se ka Kɛ k’a sababu Kɛ sugandilikɛla wɛrɛ ka kɛrɛnkɛrɛnnenya ye. A ka c’a la, furakɛli bɛrɛbɛrɛ ye k’i ka sɛbɛnni siri a la <span>ni kalan ye.

Kɔrɔ lasecogo dɛmɛni fɛɛrɛw ma

Baara kɛli ni kulɛri ye walasa ka kɔrɔ fara a kan, o bɛ taamasiyɛn yelen dɔrɔn de di, min tɛna lase dɛmɛni fɛɛrɛw baarakɛlaw ma – i n’a fɔ ɛkran kalanbagaw. Aw ye aw jija kunnafoni minnu jiralen don ni kulɛri ye, olu bɛ ye ka bɔ kɔnɔkow yɛrɛ la (kulɛri minnu bɛ sigida kɔnɔ, olu bɛ kɛ dɔrɔn ka kɔrɔ barika bonya min bɛ sɛbɛn/taamaʃyɛn kɔnɔ kaban), walima u bɛ don a kɔnɔ fɛɛrɛ wɛrɛw fɛ, i n’a fɔ sɛbɛn wɛrɛw minnu dogolen bɛ ni .sr-onlykalan ye .

Kunnafoni minnu bɛ sɔrɔ ko kɛlenw kɔnɔ

I n’a fɔ sɛbɛnni kulɛri kalanw bɛ cogo min na, i bɛ se ka fɛn dɔ kɔkanna sigi nɔgɔya la ka kɛɲɛ ni kalansen suguya o suguya ye. Anchor components bɛna dibi don hover kan, i n’a fɔ sɛbɛnni kalanw.

Nullam id dolor id nibh ultricies bolifɛnw ut id elit.

Duis mollis, est non commodo luctus, nisi erat jirisunba min bɛ wele ko ligula.

Maecenas sed diam eget risus varius blandit sigi amet non magna.

Etiam porta sem cɛmanba min bɛ wele ko magna mollis euismod.

Donec ullamcorper nulla min tɛ fɛn ye min bɛ wele ko fringilla.

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

Ka ɲɛsin kɛrɛnkɛrɛnnenya la

Tuma dɔw la, contextual background classes tɛ se ka waleya k’a sababu kɛ sugandilikɛla wɛrɛ ka kɛrɛnkɛrɛnnenya ye. Tuma dɔw la, baarakɛcogo bɛrɛbɛrɛ ye k’i ka element kɔnɔkow siri a <div>ni kalasi la.

Kɔrɔ lasecogo dɛmɛni fɛɛrɛw ma

I n’a fɔ a bɛ kɛ cogo min na ni kulɛriw ye minnu bɛ sɔrɔ sigida kɔnɔ , i k’a lajɛ ko kɔrɔ o kɔrɔ bɛ lase kulɛri fɛ, o fana bɛ lase cogo la min tɛ jiracogo dɔrɔn ye.

Ikɔni dadon

Baara kɛ ni generic close icon ye walasa ka kunnafoniw bɔ kɛnɛ kan i n’a fɔ modals ani alerts.

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

Karɛtiw

Aw bɛ baara kɛ ni kariw ye walasa ka fɛnw jira minnu bɛ jigincogo ni a ɲɛminɛcogo jira. aw k' a kɔlɔsi ko caret default bɛna kɔsegin a yɛrɛma dropup menus kɔnɔ .

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

Fɔɔnɔ teliya la

Aw bɛ fɛn dɔ wuli ka taa kinin fɛ walima kinin fɛ ni kalasi ye. !importantbɛ don a kɔnɔ walasa ka kɛrɛnkɛrɛnnenya koɲɛw bali. Kalansow fana bɛ se ka kɛ mixinw ye.

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

Santiri kɔnɔkow blokiw

Aw bɛ element dɔ sigi ka taa display: blockani a cɛmancɛ la via margin. A bɛ sɔrɔ i n’a fɔ mixin ani classe.

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

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

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

Clearfix ye

nɔgɔya la s jɛya floatni farali .clearfix ye bangebaga yɔrɔ la . A bɛ baara kɛ ni micro clearfix ye i n’a fɔ Nicolas Gallagher y’a jira cogo min na. A bɛ se ka kɛ fana i n’a fɔ mixin.

<!-- 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();
}

Kɔnɔkow jirali ani u dogocogo

Wajibiya fɛn dɔ ka jira walima ka dogo ( hali ni ekran kalanbagaw ye ) ni baara kɛli ye .showni .hiddenkalanw ye. O kalasi ninnu bɛ baara Kɛ !importantwalasa k’u yɛrɛ Kɔrɔbɔ kɛrɛnkɛrɛnnenya la kὲlɛw la, i n’a fɔ a bɛ Fɔ cogo min na teliya la . U bɛ sɔrɔ bloki nivo toggling dɔrɔn de kama. U bɛ se ka kɛ fana i n’a fɔ mixins.

.hidebɛ sɔrɔ, nka a tɛ nɔ bila ɛkran kalanbagaw la tuma bɛɛ wa a tɛ baara la kabini v3.0.1 . Baara kɛ ni .hiddenwalima .sr-onlya nɔ na.

O tɛmɛnen 'kɔ, a .invisiblebɛ Se ka Kɛ ka fɛn dɔ yecogo dɔrɔn Yɛlɛma, o kɔrɔ ye ko a displayma Yɛlɛma wa o fɛn in bɛ Se ka nɔ Blà sɛbɛn in bolicogo la halibi.

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

Écran kalanni ani klaviyeti navigatiɔn kɔnɔkow

Eleman dɔ dogo minɛnw bɛɛ la fo ekran kalanbagaw ni .sr-only. Aw .sr-onlybɛ fara ɲɔgɔn kan .sr-only-focusablewalasa ka fɛn in jira tugun ni a ɲɛsinnen don (misali la, klaviyeti dɔrɔn baarakɛla fɛ). Wajibi don ka tugu sɔrɔli kɛcogo ɲumanw kɔ . A bɛ se ka kɛ fana i n’a fɔ mixins.

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

Jaw falen-falenni

Baara kɛ ni .text-hidekalasi walima mixin ye walasa ka dɛmɛ don ka fɛn dɔ sɛbɛnni kɔnɔkow bila kɔfɛ ja nɔ na.

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

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

Walasa ka mobili-friendly yiriwali teliya, baara kɛ ni nin nafama-kalanso ninnu ye walasa ka kunnafoniw jira ani k’u dogo minɛnw fɛ kunnafonidilanw ɲinini fɛ. Nafama-kalansow fana bɛ yen minnu bɛ kɛ ka kɔnɔkow sɛmɛntiya ni u sɛbɛnna.

A ɲini ka baara kɛ ni ninnu ye danmadɔ la ani ka i yɛrɛ tanga site kelen in bɔcogo wɛrɛw ma pewu. O nɔ na, baara kɛ n’u ye walasa ka minɛn kelen-kelen bɛɛ jiracogo dafa.

Kalanso minnu bɛ sɔrɔ

Baara kɛ ni kalan kelen walima kalansenw faralen ye ɲɔgɔn kan minnu bɛ sɔrɔ walasa ka kɔnɔkow wuli ka bɔ filɛlikɛyɔrɔ kariyɔrɔw la.

	Minɛn fitinin wɛrɛwTelefɔniw (<768px)	Minɛn misɛnninwTablɛtiw (≥768px) .	Minɛn minnu bɛ kɛ cɛmancɛ laBaarakɛminɛnw (≥992px)	Minɛn belebelebawBaarakɛminɛnw (≥1200px) .
`.visible-xs-*`	A bɛ ye	Dogolen	Dogolen	Dogolen
`.visible-sm-*`	Dogolen	A bɛ ye	Dogolen	Dogolen
`.visible-md-*`	Dogolen	Dogolen	A bɛ ye	Dogolen
`.visible-lg-*`	Dogolen	Dogolen	Dogolen	A bɛ ye
`.hidden-xs`	Dogolen	A bɛ ye	A bɛ ye	A bɛ ye
`.hidden-sm`	A bɛ ye	Dogolen	A bɛ ye	A bɛ ye
`.hidden-md`	A bɛ ye	A bɛ ye	Dogolen	A bɛ ye
`.hidden-lg`	A bɛ ye	A bɛ ye	A bɛ ye	Dogolen

Kabini v3.2.0 la, .visible-*-*kalasi minnu bɛ kɛ kariyɔrɔ kelen-kelen bɛɛ la, olu bɛ na ni fɛn saba ye, kelen bɛ kɛ CSS displaynafolo nafa kelen-kelen bɛɛ la min kofɔlen bɛ jukɔrɔ.

Kalansow kulu	CSS ye`display`
`.visible-*-block`	`display: block;`
`.visible-*-inline`	`display: inline;`
`.visible-*-inline-block`	`display: inline-block;`

xsO la, misali la ( ) ɛkran fitinin wɛrɛw kama, .visible-*-*kalan minnu bɛ sɔrɔ olu ye: .visible-xs-block, .visible-xs-inline, ani .visible-xs-inline-block.

Kalansow .visible-xs, .visible-sm, .visible-md, ani .visible-lgfana bɛ yen, nka u tɛ baara la kabini v3.2.0 . U bɛ Bɛn ni .visible-*-block, fo ni ko kɛrɛnkɛrɛnnen wɛrɛw ye toggling <table>-related elements kan.

Kalanso minnu bɛ sɛbɛnni kɛ

I n’a fɔ jaabi kalan minnu bɛ kɛ tuma bɛɛ, baara kɛ ni ninnu ye walasa ka kunnafoniw wuli ka bɔ u nɔ na walasa ka sɛbɛnni kɛ.

Kalansow	Navigatɛri (Navigateur).	Sɛbɛnni kɛ
`.visible-print-block` `.visible-print-inline` `.visible-print-inline-block`	Dogolen	A bɛ ye
`.hidden-print`	A bɛ ye	Dogolen

Kalanso .visible-printfana bɛ yen nka a ma baara kɛ kabini v3.2.0 . A bɛ Bɛn ni .visible-print-block, fo ni ko kɛrɛnkɛrɛnnen wɛrɛw Fàralen dòn <table>-fɛnw kan minnu bɛ tali Kɛ ɲɔgɔn na.

Kɔrɔbɔli kɛcogo

I ka navigatɛri bonya caman sɛmɛntiya walima ka doni kɛ minɛn wɛrɛw kan walasa ka jaabiw nafalanw kɔrɔbɔ.

A bɛ ye kan...

Jateminɛ kɛlenw b’a jira ko fɛn in bɛ ye i ka sisan jatebɔyɔrɔ la.

Extra misɛnninw ✔ A bɛ ye x-small kan

Fitinin ✔ A bɛ ye fitininw kan

Hakɛ ✔ A bɛ ye medium kan

Belebeleba ✔ A bɛ ye belebele kan

A ka ca a la, a ka dɔgɔ ani a ka dɔgɔ ✔ A bɛ ye x-fitini ni fitinin kan

Cɛmancɛ ni belebele ✔ A bɛ ye cɛmancɛ ni belebele kan

Extra fitini ani cɛmancɛ ✔ A bɛ ye x-small ani medium kan

A ka dɔgɔ ani a ka bon ✔ A bɛ ye fitininw ni belebelebaw kan

A ka ca a la, a ka dɔgɔ ani a ka bon ✔ A bɛ ye x-fitini ni belebele kan

Misɛnninw ni cɛmancɛw ✔ A bɛ ye fitininw ni cɛmancɛw kan

A dogolen bɛ...

Yan, jatebɔlan jɛmanw fana b’a jira ko fɛn in dogolen bɛ i ka sisan jatebɔyɔrɔ la.

Extra misɛnninw ✔ A dogolen bɛ x-small kan

Fitinin ✔ A dogolen bɛ fitininw kan

Hakɛ ✔ A dogolen bɛ medium kan

Belebeleba ✔ A dogolen bɛ belebele kan

A ka ca a la, a ka dɔgɔ ani a ka dɔgɔ ✔ A dogolen bɛ x-fitini ni fitinin kan

Cɛmancɛ ni belebele ✔ A dogolen bɛ cɛmancɛ ni belebele kan

Extra fitini ani cɛmancɛ ✔ A dogolen bɛ x-small ani medium kan

A ka dɔgɔ ani a ka bon ✔ A dogolen bɛ fitininw ni belebelebaw kan

A ka ca a la, a ka dɔgɔ ani a ka bon ✔ A dogolen bɛ x-fitini ni belebele kan

Misɛnninw ni cɛmancɛw ✔ A dogolen bɛ fitininw ni cɛmancɛw kan

Bootstrap ka CSS jɔlen bɛ Less kan, o ye preprocesseur ye min bɛ ni baarakɛcogo wɛrɛw ye i n’a fɔ variables, mixins ani functions for compiling CSS. Minnu b’a fɛ ka baara Kɛ ni source Less files ye an ka CSS files lajɛlenw nɔ na, olu bɛ Se ka baara Kɛ ni variables ni mixins caman ye an bɛ baara Kɛ ni minnu ye framework bɛɛ kɔnɔ.

Grid variables ani mixins bɛ dabɔ Grid system dakun kɔnɔ .

Bootstrap labɛnni

Bootstrap bɛ se ka baara kɛ cogo fila la a dɔgɔyalenba la: ni CSS lajɛlen ye walima ni source Less files ye. Walasa ka Less files lajɛ, i ka Daminɛ yɔrɔ lajɛ walasa k’i ka yiriwali sigida labɛncogo dɔn walasa ka cikan wajibiyalenw baara.

Mɔgɔ sabananw ka daɲɛgafe-minɛnw bɛ se ka baara kɛ ni Bootstrap ye, nka u tɛ dɛmɛ sɔrɔ an ka jɛkuluba fɛ.

Yɛlɛma-yɛlɛmaw

Yɛlɛma bɛ kɛ porozɛ bɛɛ kɔnɔ i n’a fɔ nafa minnu bɛ kɛ ka caya i n’a fɔ kulɛriw, yɔrɔjan, walima sɛbɛnnibolow kuluw, olu bila ɲɔgɔn na ani k’u tila ɲɔgɔn na. Walasa ka kunnafoni dafalen sɔrɔ, aw ye sɛbɛn ɲɛ Customizer lajɛ .

Kulɛriw

Aw bɛ baara kɛ ni kulɛri fila ye nɔgɔya la: gris ani semantique. Kulɛri jɛmanw bɛ se ka teliya ka nɛrɛmugumaw sɔrɔ minnu bɛ kɛ tuma caman na k’a sɔrɔ kɔrɔko la, kulɛri suguya caman bɛ sɔrɔ minnu bɛ di kɔrɔlenw ma minnu bɛ sɔrɔ sigida kɔnɔ.

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

Baara kɛ ni nin kulɛri caman ɲɔgɔnna dɔ ye i n’a fɔ u bɛ cogo min na walima k’u bila fɛn caman na minnu kɔrɔ ka bon i ka poroze kama.

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

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

Échafaudages

Yɛlɛma damadɔ minnu bɛ Kɛ walasa ka i ka yɔrɔ kolomayɔrɔ kolomaw Labɛn teliya la.

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

Jɛɲɔgɔnyaw

Aw bɛ aw ka jɛgɛnw cogoya nɔgɔya ni kulɛri bɛnnen ye ni nafa kelen dɔrɔn ye.

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

A kɔlɔsi ko the @link-hover-colorbɛ baara Kɛ ni baarakɛcogo dɔ ye, baarakɛminɛn sirannin wɛrɛ min bɛ Bɔ Less la, walasa ka hover kulɛri ɲuman Dabɔ a yɛrɛma. Aw bɛ se ka baara kɛ ni darken, lighten, saturate, ani desaturate.

Typografi (Typografi) (Typographie).

I ka sɛbɛnnikɛcogo, sɛbɛnni hakɛ, ɲɛmɔgɔya ani fɛn wɛrɛw sigi nɔgɔya la ni fɛn caman ye minnu bɛ se ka fɛn caman sɛmɛntiya. Bootstrap bɛ baara Kɛ ni ninnu fana ye walasa ka sɛbɛnni-minɛn nɔgɔmanw Di.

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

Ikoniw

Yɛlɛma teliyalen fila walasa ka i ka taamasiyɛnw sigiyɔrɔ n’u ka dosiye tɔgɔ ladilan.

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

A yɔrɔw

Bootstrap kɔnɔna na, fɛn minnu bɛ yen, olu bɛ baara Kɛ ni fɛn dɔw ye minnu bɛ Se ka Kɛ ni fɛn caman ye minnu bɛ Se ka Kɛ ɲɔgɔn fɛ. Baara bɛ kɛ ni minnu ye kosɛbɛ, olu filɛ nin ye.

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

Feerekɛlaw ka mixins

Feerekɛlaw ka mixins ye mixins ye walasa ka dɛmɛ don ka navigatɔrɔ caman dɛmɛ ni feerekɛlaw ka daɲɛ fɔlɔw bɛɛ donli ye i ka CSS lajɛlen kɔnɔ.

Box-sizing (box-sizing) ye

Aw bɛ aw ka yɔrɔw ka kɛsu modɛli lasegin ni mixin kelen ye. Walasa ka kunnafoni sɔrɔ a kɔnɔkow kan, aw ye nin barokun lajɛ min bɛ mɔgɔ dɛmɛ ka bɔ Mozilla .

Mixin in bɛ baara la kabini v3.2.0, ni Autoprefixer (Autoprefixer) daminɛni ye. Walasa ka kɔfɛ-baarakɛcogo lakana, Bootstrap bɛna t’a fɛ ka baara kɛ ni mixin ye kɔnɔna na fo Bootstrap v4.

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

Kɔnɔw lamininenw

Bi, bi-navigatɛriw bɛɛ bɛ nafolomafɛn min tɛ daɲɛ-jɔ- border-radiusyɔrɔ-ko ye, o dɛmɛ. O cogo la, mixin tɛ yen .border-radius(), nka Bootstrap kɔnɔ, sira surunw bɛ yen minnu bɛ se ka teliya ka nkɔni fila lamini fɛn dɔ fan kɛrɛnkɛrɛnnen dɔ la.

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

Box (Drop) ombres

N’i ka mɔgɔ laɲinitaw bɛ baara kɛ ni navigatɛriw ni minɛnw ye minnu ka bon kosɛbɛ ani minnu ka bon kosɛbɛ, i jija ka baara kɛ ni o box-shadowyɔrɔ ye dɔrɔn a yɛrɛ ma. N’i mago bɛ dɛmɛ na Android (pre-v4) ani iOS minɛn kɔrɔw la (pre-iOS 5), baara kɛ ni mixin kɔrɔlen ye walasa ka wajibiyalenw ta-webkit kɔrɔlen ye walasa ka daɲɛ fɔlɔ

Mixin in bɛ kɛ ka ban la kabini v3.1.0, bawo Bootstrap tɛ dɛmɛ ofisiyali la plateformes kɔrɔlenw na minnu tɛ standard property dɛmɛ. Walasa ka kɔfɛ-baarakɛcogo lakana, Bootstrap bɛna t’a fɛ ka baara kɛ ni mixin ye kɔnɔna na fo Bootstrap v4.

Aw ye aw jija ka baara kɛ ni rgba()kulɛriw ye aw ka kɛsu biɲɛw la walasa u ka ɲɔgɔn sɔrɔ cogo la min tɛ fɛn tiɲɛ ni kɔkanfɛnw ye.

.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ɛmɛsira minnu bɛ kɛ

Mixin caman walasa ka se ka fɛn caman kɛ. Aw bɛ tɛmɛsira kunnafoniw bɛɛ sigi ni kelen ye, walima aw bɛ waati latɛmɛni ni waati janya danfaralen jira i n’a fɔ a mago bɛ cogo min na.

Mixinw bɛ ban ka bɔ v3.2.0 la, ni Autoprefixer (Autoprefixer) daminɛni ye. Walasa ka kɔfɛ-baarakɛcogo lakana, Bootstrap bɛna t’a fɛ ka baara kɛ ni mixins ye kɔnɔna na fo 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;
}

Yɛlɛma minnu bɛ kɛ

Fɛn o fɛn bɛ wuli, ka sɛgɛsɛgɛli kɛ, ka baara kɛ ni a ye (ka a lamaga), walima ka a wuli.

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

Animasiyɔnw

Mixin kelen min bɛ kɛ ka baara kɛ ni CSS3 ka animation properties bɛɛ ye declaration kelen kɔnɔ ani mixin wɛrɛw ka properties kelen-kelenw kama.

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

Opacity (Opacity) ye

Aw bɛ opacity sigi navigatɔrɔw bɛɛ la ani ka filterfallback di IE8 ma.

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

Yɔrɔ-sɛbɛnni

Aw bɛ sigida di forobaciyɛn kɔlɔsili ma foro kelen-kelen bɛɛ kɔnɔ.

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

Kolonw

Kolonw labɛn CSS fɛ fɛn kelen kɔnɔ.

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

Gradientw (gradients) (gradients).

Aw bɛ kulɛri fila o fila caman tigɛli nɔgɔya ka kɛ kɔkanna sɛgɛsɛgɛli ye. Aw ye ɲɛtaa sɔrɔ ka taa a fɛ ani ka sira dɔ sigi sen kan, ka baara kɛ ni kulɛri saba ye, walima ka baara kɛ ni radiyali gradient ye. Ni mixin kelen ye i bɛ kɔrɔɲɔgɔnmaya daɲɛw bɛɛ Sɔrɔ i mago bɛ minnu na.

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

Aw bɛ se fana ka angle (angle) jira min bɛ kɛ ni kulɛri fila ye, n’o ye gradient lineaire ye:

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

Ni aw mago bɛ barber-stripe style gradient la, o fana ka nɔgɔn. Aw bɛ kulɛri kelen jira dɔrɔn ani an bɛna jiribolo finman translucent dɔ datugu.

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

Aw bɛ ante kɔrɔta ka kulɛri saba kɛ a nɔ na. Aw bɛ kulɛri fɔlɔ, kulɛri filanan, kulɛri filanan ka kulɛri jɔli (kɛmɛsarada la nafa i n’a fɔ 25%), ani kulɛri sabanan sigi ni nin mixin ninnu ye:

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

Kungolow bɛ wuli! Ni aw mago bɛ don dɔ la ka gradient (gradient) dɔ bɔ, aw ye aw jija ka IE-kɛrɛnkɛrɛnnen fɛn o fɛn filterfara a kan, aw bɛ se ka o bɔ. aw bɛ se k' o kɛ ni aw bɛ baara kɛ ni .reset-filter()mixin ye a kɛrɛfɛ background-image: none;.

Mixin nafamaw

Utility mixins ye mixins ye minnu bɛ CSS nafolomafɛnw fara ɲɔgɔn kan minnu tɛ ɲ��gɔn ta cogo wɛrɛ la walasa ka kuntilenna walima baara kɛrɛnkɛrɛnnen dɔ sɔrɔ.

Clearfix ye

Aw bɛ ɲinɛ ka fara class="clearfix"fɛn o fɛn kan ani o nɔ na aw bɛ .clearfix()mixin fara a kan yɔrɔ min na a bɛnnen don. A bɛ baara kɛ ni micro clearfix ye min bɔra Nicolas Gallagher fɛ .

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

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

Cɛmancɛ-yɔrɔ-ko-yɔrɔ-ko-yɔrɔ-ko

Aw bɛ teliya ka fɛn o fɛn kɛ a bangebaga kɔnɔ, aw bɛ o cɛmancɛ la. A bɛ wajibiya widthwalima max-widthka sigi sen kan.

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

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

Sizing dɛmɛbagaw

Fɛn dɔ hakɛw jira nɔgɔya la.

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

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

Textareas minnu bɛ se ka bonya caman sɛmɛntiya

Aw bɛ bonya caman ɲɔgɔnna sugandiliw labɛn nɔgɔya la sɛbɛnnikɛyɔrɔ o yɔrɔ la, walima fɛn wɛrɛ. A bɛ daminɛ ka kɛ navigatɔrɔn kɛcogo nɔgɔman ye ( both).

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

Sɛbɛnniw tigɛcogo

Aw bɛ sɛbɛnni tigɛ nɔgɔya la ni ellipsis ye ni mixin kelen ye. A bɛ element (fɛn) wajibiya ka kɛ blockwalima ka kɛ inline-blocknivo ye.

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

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

Retina jaaw

Ja sira fila jira ani @1x ja hakɛw, ani Bootstrap bɛna @2x media ɲininkali di. Ni ja caman b’i bolo ka baara kɛ, i k’a lajɛ k’i ka ɲɛkisɛ ja CSS sɛbɛn i bolo fɛ kunnafonidilan ɲininkali kelen kɔnɔ.

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

Hali ni Bootstrap jɔlen bɛ Less kan, a fana bɛ ni Sass port ofisiyali ye . An b’a mara GitHub marayɔrɔ wɛrɛ la ani ka kunnafoni kuraw ɲɛnabɔ ni fɛn caman tigɛli sɛbɛn ye.

Min bɛ a kɔnɔ

Komin Sass port bɛ ni repo danfaralen ye, wa a bɛ baara kɛ ni lamɛnbagaw ye minnu tɛ kelen ye dɔɔnin, porozɛ in kɔnɔkow bɛ danfaraba don ni Bootstrap porozɛba ye. O b’a To Sass port bɛ Bɛn ni Sass-based systems caman ye i n’a fɔ a bɛ Se ka Kɛ cogo min na.

Sira	Cogojirali
`lib/`	Ruby gem code (Sass ka labɛncogo, Rails ani Compass ka jɛɲɔgɔnyaw)
`tasks/`	Converter scripts (ka wuli ka taa sanfɛ Less ka kɛ Sass ye) .
`test/`	Kɔrɔbɔliw minnu bɛ kɛ ka fɛnw lajɛ ɲɔgɔn fɛ
`templates/`	Boussole pake manifeste
`vendor/assets/`	Sass, JavaScript ani sɛbɛnnibolow
`Rakefile`	Kɔnɔna baara, i n’a fɔ rake ani convert

Aw ye taa Sass port ka GitHub marayɔrɔ la walasa ka nin dosiye ninnu ye baara la.

A sigili

Walasa ka kunnafoni sɔrɔ Bootstrap for Sass sigicogo n’a baaracogo kan, aw ye GitHub marayɔrɔ lajɛ readme . O ye sɔrɔyɔrɔ ye min bɛ waati la kosɛbɛ ani kunnafoniw bɛ sɔrɔ a kɔnɔ minnu bɛ se ka baara kɛ ni Rails, Compass, ani Sass poroze jɔnjɔnw ye.

Bootstrap ka ɲɛsin Sass ma

CSS ye

Kuma bɛɛ lajɛlen

HTML5 sɛbɛn suguya

Mobili fɔlɔ

Typografi ani ladɛrɛsiw

Normalize.css ye

Minɛnw

Grid sitɛmu

Daminɛ kuma

Kunnafonidila ɲininkaliw

Grid sugandiliw

Misali: Stacked-to-horizontal

Misali: Jilama minɛn

Misali: Mobili ani tabali

Misali: Mobili, tablɛti, tabali

Misali: Kolonw siricogo

Jaabi kolomaw bɛ segin u cogo kɔrɔ la

Kolonw (offset) kɛli

Nesting kuluw

Kolonw ka komandi

Mixins ni variables ka dɔgɔn

Yɛlɛma-yɛlɛmaw

Mixinw (Mixins).

Misali la baarakɛcogo

Typografi (Typografi) (Typographie).

Kumakunw

h1. Bootstrap ka kumasen

h2. Bootstrap ka kumasen

h3. Bootstrap ka kumasen

h4. Bootstrap ka kumasen

h5. Bootstrap ka kumasen

h6. Bootstrap ka kumasen

h1. Bootstrap kuncɛcogo Sɛbɛn filanan

h2. Bootstrap kuncɛcogo Sɛbɛn filanan

h3. Bootstrap kuncɛcogo Sɛbɛn filanan

h4. Bootstrap kuncɛcogo Sɛbɛn filanan

h5. Bootstrap kuncɛcogo Sɛbɛn filanan

h6. Bootstrap ka kumasen Sɛbɛn filanan

Farikolo kopi

Plomb farikolo kopi

A jɔra ni Less ye

Inline sɛbɛnni kɔnɔfɛnw

Sɛbɛnni minnu bɛ taamasiyɛn kɛ

Sɛbɛnni minnu bɔra

Strikethrough sɛbɛnni

Sɛbɛnni min bɛ don a kɔnɔ

Sɛbɛn minnu bɛ ja jukɔrɔ

Sɛbɛn misɛnninw

Farin

Italikaw ka sɛbɛnniw

Fɛn minnu bɛ ɲɔgɔn falen-falen

Alignment kalanw

Yɛlɛma kalanw

Kuma surunw

Sugudacogo jɔnjɔn

Initialisme (daminɛ daminɛcogo).

Adrɛsiw

Blokiw ka kumaw

Blockquote (Blockquote) min bɛ daminɛ

Blockquote sugandiliw

Tɔgɔ dali source dɔ kan

A jiracogo wɛrɛw

Lisitiw

A ma yamaruya sɔrɔ

A ye yamaruya di

A ma kɛ cogo min na

Inline kɔnɔ

Cogojirali

Ɲɛfɔli tilennen

Oto-tɔrɔbɔli

Kode ye

Inline kɔnɔ

Baarakɛla ka dontaw

Bloki basigilen

Yɛlɛma-yɛlɛmaw

Sample bɔli

Tabali minnu bɛ yen

Misali jɔnjɔn

Layini sɛrɛkiliw

Cross-browser ka baarakɛcogo ɲuman

Demo`:focus` jamana

Caveat ka ɲɛsin link baarakɛcogo ma`<a>`

Icons optionnels ni `.sr-only`labels dogolenw