Nya lowdown wɔ Bootstrap no infrastructure no afã atitiriw no ho, a yɛn kwan a yɛfa so yɛ wɛb nkɔso a eye, ɛyɛ ntɛm, ɛyɛ den ka ho.

HTML5 doctype a ɛwɔ hɔ

Bootstrap de HTML nneɛma bi ne CSS agyapade a ɛhwehwɛ sɛ wɔde HTML5 doctype di dwuma di dwuma. Fa ka ho wɔ wo nnwuma nyinaa mfiase.

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

Mobile a edi kan

Bootstrap 2 no, yɛde mobile adamfofa kwan a wobɛpaw kaa ho maa afã atitiriw a ɛwɔ nhyehyɛe no mu. Bootstrap 3 no, yɛasan akyerɛw adwuma no sɛnea ɛbɛyɛ a ɛbɛyɛ mobile adamfofa fi mfiase. Sɛ́ anka wode mobile styles a wopɛ bɛka ho no, wɔtow no mu pɛɛ wɔ core no mu. Nokwarem no, Bootstrap yɛ mobile kan . Wobetumi ahu mobile first styles wɔ nhomakorabea no nyinaa mu sen sɛ wobehu wɔ fael ahorow mu.

Sɛnea ɛbɛyɛ a wobɛhwɛ ahu sɛ wobɛkyerɛ ase yiye na woaka zoom no, fa viewport meta tag no ka wo <head>.

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

Wubetumi asiw zooming tumi ano wɔ mobile mfiri ahorow so denam nea wode bɛka user-scalable=noviewport meta tag no ho no so. Wei ma zooming no ntumi nyɛ adwuma, a ɛkyerɛ sɛ wɔn a wɔde di dwuma no tumi twetwe wɔn ho nkutoo, na ɛma wo sait no te nka kakra sɛ ɛyɛ native application. Sɛ yɛka ne nyinaa bom a, yɛnkamfo eyi nkyerɛ wɔ wɛbsaet biara so, enti yɛ ahwɛyiye!

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

Typography ne nkitahodi ahorow

Bootstrap hyehyɛ wiase nyinaa nkyerɛkyerɛmu titiriw, typography, ne link styles. Ne titiriw no, yɛn:

Set background-color: #fff;no sobody
Fa @font-family-base, @font-size-base, ne @line-height-basesu ahorow no di dwuma sɛ yɛn nkyerɛwee nnyinaso
Set wiase nyinaa link kɔla via @link-colorna fa link underlines nkutoo di dwuma wɔ so:hover

Wobetumi ahu saa ntade ahorow yi wɔ scaffolding.less.

Normalize.css no yɛ nea ɛfata

Sɛ wopɛ sɛ wunya cross-browser nkyerɛase a ɛkɔ anim a, yɛde Normalize.css , adwuma bi a Nicolas Gallagher ne Jonathan Neal yɛe no di dwuma.

Nneɛma a wɔde gu mu

Bootstrap hwehwɛ element a ɛwɔ mu a ɛbɛkyekyere site no mu nsɛm na yɛde yɛn grid nhyehyɛe no ahyɛ mu. Wubetumi apaw nsukorade abien a wode bedi dwuma wɔ wo nnwuma mu no mu biako. Hyɛ no nsow sɛ, esiane paddingne nea ɛboro saa nti, container abien no mu biara nyɛ nestable.

Fa di dwuma .containerma mmuae a ɛyɛ fixed width container.

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

Fa di dwuma .container-fluidma ade a ne tɛtrɛtɛ nyinaa, a ɛtrɛw wo viewport no ntrɛwmu nyinaa mu.

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

Bootstrap no ka ho bi ne mmuae, mobile first fluid grid nhyehyɛe a ɛfata sɛ ɛyɛ 12 columns bere a device anaa viewport kɛse kɔ soro no. Ɛka adesua ahorow a wɔadi kan akyerɛkyerɛ mu ama nhyehyɛe a ɛnyɛ den a wobetumi apaw, ne mixins a ahoɔden wom a wɔde bɛma nkyerɛase nhyehyɛe pii aba .

Nnianimu

Wɔde grid nhyehyɛe ahorow di dwuma de yɛ krataafa nhyehyɛe denam row ne column ahorow a ɛtoatoa so a wode wo nsɛm no sie so. Sɛnea Bootstrap grid nhyehyɛe no yɛ adwuma ni:

Ɛsɛ sɛ wɔde row ahorow no si .container(fixed-width) anaa .container-fluid(full-width) mu na ama wɔatumi ayɛ pɛpɛɛpɛ na wɔde ahyɛ mu.
Fa row ahorow yɛ nkyerɛwde akuw a ɛkɔ soro.
Ɛsɛ sɛ wɔde emu nsɛm gu nkyerɛwde ahorow mu, na nkyerɛwde nkutoo na ebetumi ayɛ nkyerɛwde ahorow no mma ntɛm ara.
Grid adesua ahorow a wɔadi kan akyerɛkyerɛ mu te sɛ .rowna .col-xs-4ɛwɔ hɔ ma grid nhyehyɛe ahorow a wɔyɛ no ntɛmntɛm. Wobetumi nso de mixins kakraa bi adi dwuma ama nkyerɛase nhyehyɛe pii.
Nkorabata ahorow no ma gutters (nkwan a ɛda column no mu nsɛm ntam) via padding. Saa padding no offset wɔ rows ma column a edi kan ne nea etwa to via negative margin wɔ .rows.
Margin a enye no ne nea enti a nhwɛso ahorow a ɛwɔ ase ha no yɛ outdented no. Ɛyɛ sɛnea ɛbɛyɛ a nsɛm a ɛwɔ grid columns mu no bɛhyehyɛ ne nsɛm a ɛnyɛ grid.
Wɔnam nkyerɛwde dumien a ɛwɔ hɔ dodow a wopɛ sɛ wotrɛw mu no so na ɛyɛ grid nkyerɛwde no. Sɛ nhwɛso no, na adum abiɛsa a ɛyɛ pɛ de abiɛsa bedi dwuma .col-xs-4.
Sɛ wɔde nkyerɛwde bɛboro 12 gu ɔfa biako mu a, nkorabata foforo kuw biara, sɛ ade biako, bɛbɔ nkyerɛwde foforo so.
Grid adesua ahorow no fa mfiri a ne screen trɛw boro anaasɛ ɛne breakpoint akɛse no yɛ pɛ, na ɛbu grid adesua ahorow a wɔde wɔn ani asi mfiri nketewa so no so. Enti, s.e., sɛ wode .col-md-*adesuakuw biara di dwuma wɔ element bi so a, ɛnyɛ sɛ ɛbɛka ne styling wɔ mfiri a ɛwɔ mfinimfini nko na mmom mfiri akɛse nso so sɛ .col-lg-*adesuakuw bi nni hɔ a.

Hwɛ nhwɛso ahorow a wode bedi dwuma wɔ nnyinasosɛm ahorow yi mu wɔ wo mmara no mu.

Nsɛm ho amanneɛbɔfo nsɛmmisa

Yɛde media nsɛmmisa a edidi so yi di dwuma wɔ yɛn Less fael ahorow no mu de yɛ breakpoints atitiriw no wɔ yɛn grid nhyehyɛe no mu.

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

Ɛtɔ mmere bi a yɛtrɛw saa media nsɛmmisa yi mu de ka ho max-widthde to CSS ano hye wɔ mfiri ahorow a ɛyɛ teateaa bi so.

@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 a wobetumi apaw

Hwɛ sɛnea Bootstrap grid nhyehyɛe no afã horow yɛ adwuma wɔ mfiri ahorow pii a ɛwɔ pon a ɛyɛ mmerɛw so.

	Mfiri nketewa a ɛboro so Phones (<768px) .	Mfiri nketewa Tablets (≥768px) .	Mfiri a ɛwɔ mfinimfini Desktops (≥992px) .	Mfiri akɛse Desktops (≥1200px) .
Grid suban a ɛwɔ hɔ	Horizontal bere nyinaa	Collapsed to start, horizontal atifi breakpoints
Nneɛma a wɔde gu mu no trɛw	Obiara nni hɔ (auto) .	750px na ɛyɛ	970px na ɛyɛ	1170px na ɛyɛ
Adesuakuw no anim asɛm	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`
# a ɛwɔ nkyerɛwde ahorow mu	12. 12
Kɔla no trɛw	Auto	~62px na ɛwɔ hɔ	~81px na ɛwɔ hɔ	~97px na ɛwɔ hɔ
Gutter no trɛw	30px (15px wɔ ɔfa biara a ɛwɔ kɔla bi so) .
Nea ɛyɛ nestable	Aane
Nneɛma a wɔde siw nneɛma ano	Aane
Kɔla a wɔkra no	Aane

Nhwɛso: Stacked-to-horizontal

Sɛ wode .col-md-*grid adesua ahorow biako di dwuma a, wubetumi ayɛ grid nhyehyɛe titiriw a efi ase a wɔaboaboa ano wɔ mobile mfiri ne tablɛt mfiri ahorow so (a ɛyɛ ketewa kosi ketewaa a ɛboro so no) ansa na abɛyɛ horizontal wɔ desktop (mfinimfini) mfiri ahorow so. Fa grid columns gu biribiara .rowmu .

.kol-md-1 na ɛwɔ hɔ

.kol-md-8 na ɛwɔ hɔ

.kol-md-4 na ɛwɔ hɔ

.kol-md-6 na ɛwɔ hɔ

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

Nhwɛso: Nsu a wɔde gu mu

Dane grid nhyehyɛe biara a ne tɛtrɛtɛ a wɔahyɛ da ayɛ no ma ɛnyɛ nhyehyɛe a ne tɛtrɛtɛ nyinaa denam wo akyi fã a wobɛsesa no .containerayɛ no .container-fluid.

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

Nhwɛso: Mobile ne desktop

Wompɛ sɛ wo columns no bɛboaboa ano kɛkɛ wɔ mfiri nketewa mu? Fa mfiri nketewa ne mfinimfini a ɛboro so no grid adesua ahorow no di dwuma denam .col-xs-* .col-md-*wo nkyerɛwde ahorow a wode bɛka ho no so. Hwɛ nhwɛso a ɛwɔ ase ha no na woanya sɛnea ne nyinaa yɛ adwuma no ho adwene pa.

.kol-xs-12 .kol-md-8 na ɛwɔ hɔ

.kol-xs-6 .kol-md-4 na ɛwɔ hɔ

.col-xs-6 na ɛwɔ hɔ

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

Nhwɛso: Mobile, tablɛt, desktop

Fa nhwɛso a atwam no si so denam nhyehyɛe ahorow a ɛyɛ nnam na tumi wom kɛse mpo a wode tablet .col-sm-*adesua ahorow bɛbɔ so.

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

.kol-xs-6 .kol-md-4 na ɛwɔ hɔ

.kol-xs-6 .kol-sm-4. Ɔde ne nsa kyerɛɛ ne so

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

Nhwɛso: Kɔla a wɔde kyekyere nneɛma ho

Sɛ wɔde nkyerɛwde bɛboro 12 gu ɔfa biako mu a, nkorabata foforo kuw biara, sɛ ade biako, bɛbɔ nkyerɛwde foforo so.

.col-xs-9 na ɛwɔ hɔ

.col-xs-4
Esiane sɛ 9 + 4 = 13 > 12 nti, saa div a ne kɛse yɛ adum 4 yi nya kyekyere nkyerɛwde foforo so sɛ ade biako a ɛtoatoa so.

.col-xs-6 Ntrɛwmu a
edi hɔ no kɔ so fa nkyerɛwde foforo no so.

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

Mmuae column resets

Na anan tiers of grids a ɛwɔ hɔ no, ɛyɛ ampa sɛ wubetu mmirika akɔ nsɛm a, wɔ breakpoints bi mu no, wo columns no ntumi ntew yiye koraa sɛnea biako tenten sen biako no. Sɛ wopɛ sɛ wusiesie saa a, fa a .clearfixne yɛn responsive utility class ahorow no a wɔaka abom di dwuma .

.col-xs-6 .col-sm-3
Sesa wo viewport no kɛse anaa hwɛ wɔ wo fon so sɛ nhwɛso.

.kol-xs-6 .kol-sm-3. Ɔde ne nsa kyerɛɛ ne so

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

Wɔ column clearing wɔ responsive breakpoints akyi no, ebia ɛho behia sɛ wosan de offsets, pushes, anaa pullls . Hwɛ eyi wɔ adeyɛ mu wɔ grid nhwɛso no mu .

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

Offsetting nkyerɛwde ahorow

Fa nkyerɛwde ahorow no kɔ nifa denam .col-md-offset-*adesua ahorow so. Saa adesua ahorow yi ma kɔla bi benkum so no yɛ kɛse denam *nkyerɛwde ahorow so. Sɛ nhwɛso no, .col-md-offset-4ɛkɔfa .col-md-4adum anan so.

.kol-md-4 na ɛwɔ hɔ

.kol-md-4 .kol-md-offset-4. Ɔde ne nsa kyerɛɛ ne so

.col-md-3 .kol-md-afiri-3

.col-md-6 .kol-md-afiri-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>

Wubetumi nso de .col-*-offset-0adesua ahorow abɔ offset ahorow a efi grid tiers a ɛwɔ fam no so.

<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 columns a wɔde hyɛ mu

Sɛ wopɛ sɛ wode default grid no hyɛ wo nsɛm no mu a, fa kɔla foforo .rowne .col-sm-*nkyerɛwde ahorow ka ho wɔ .col-sm-*kɔla bi a ɛwɔ hɔ dedaw no mu. Ɛsɛ sɛ nested rows no de columns ahorow a ɛka bom yɛ 12 anaa nea ennu saa ka ho (ɛnhia sɛ wode columns 12 a ɛwɔ hɔ no nyinaa bedi dwuma).

Ɔfa 1: .col-sm-9

Ɔfa 2: .col-xs-8 .col-sm-6

Ɔfa 2: .col-xs-4 .col-sm-6

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

Kɔla a wɔkra no

Ɛnyɛ den sɛ wobɛsesa yɛn grid columns a wɔasisi no nhyehyɛe a ɛwɔ .col-md-push-*ne .col-md-pull-*modifier classes no.

.kol-md-9 .kol-md-pia-3

.kol-md-3 .kol-md-twe-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 ne nneɛma a ɛsakra no kakraa bi

Wɔ grid adesua ahorow a wɔadi kan ayɛ ama nhyehyɛe ahorow a ɛyɛ ntɛm akyi no, Bootstrap de Less variables ne mixins ka ho ma w’ankasa nhyehyɛe ahorow a ɛnyɛ den, a ɛkyerɛ biribi ntɛmntɛm.

Nneɛma a Ɛsakra

Variables kyerɛ column dodow, gutter trɛw, ne media asɛmmisa beae a wobefi ase floating columns. Yɛde eyinom di dwuma de yɛ grid adesua ahorow a wɔahyɛ ato hɔ a wɔakyerɛw ho asɛm wɔ atifi hɔ no, ne afei nso mixins a wɔahyɛ da ayɛ a wɔakyerɛw wɔ ase ha no.

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

Nneɛma a wɔde afrafra

Wɔde mixins di dwuma de ka grid variables no ho de yɛ semantic CSS ma grid columns ankorankoro.

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

Nhwɛso a wɔde di dwuma

Wubetumi asesa variables no akɔ w’ankasa custom values no mu, anaasɛ wode mixins no adi dwuma kɛkɛ ne wɔn default values no. Nhwɛsoɔ a ɛfa default nhyehyeɛ no a wode bɛyɛ nhyehyɛɛ a ɛwɔ kɔla mmienu a ɛwɔ nsonsonoeɛ wɔ ntam no nie.

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

Nsɛmti ahorow

HTML asɛmti nyinaa, <h1>kosi <h6>, wɔ hɔ. .h1through .h6classes nso wɔ hɔ, ma bere a wopɛ sɛ wo ne font styling a ɛwɔ asɛmti bi mu no hyia nanso woda so ara pɛ sɛ wo nsɛm no da adi wɔ inline mu.

h1. Bootstrap asɛmti no	Semibold a ɛyɛ 36px
h2. Bootstrap asɛmti no	Semibold a ɛyɛ 30px
h3. Bootstrap asɛmti no	Semibold a ɛyɛ 24px
h4. Bootstrap asɛmti no	Semibold a ɛyɛ 18px
h5. Bootstrap asɛmti no	Semibold a ɛyɛ 14px
h6. Bootstrap asɛmti no	Semibold a ɛyɛ 12px

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

Yɛ nsɛm a ɛyɛ hare, a ɛto so abien wɔ asɛmti biara mu a ɛwɔ generic <small>tag anaa .smalladesuakuw no.

h1. Bootstrap asɛmti Nsɛm a ɛto so abien

h2. Bootstrap asɛmti Nsɛm a ɛto so abien

h3. Bootstrap asɛmti Nsɛm a ɛto so abien

h4. Bootstrap asɛmti Nsɛm a ɛto so abien

h5. Bootstrap asɛmti Nsɛm a ɛto so abien

h6. Bootstrap asɛmti Nsɛm a ɛto so abien

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

Nipadua no ho mfonini

Bootstrap no wiase nyinaa default font-sizeyɛ 14px , a ne line-heightyɛ 1.428 . Wɔde eyi di dwuma wɔ <body>nkyekyem ahorow no ne ne nyinaa ho. Bio nso, <p>(nkyekyɛm ahorow) nya ase margin a ɛyɛ wɔn line-height a wɔabu akontaa no fã (10px default).

Nullam quis risus eget urna mollis a ɛyɛ fɛ a ɛyɛ fɛ a ɛyɛ fɛ. Cum sociis natoque penatibus ne magnis awo montes, nascetur fɛwdi mus. Nullam id dolor id nibh ultricies kar a wɔde di dwuma.

Cum sociis natoque penatibus ne magnis awo montes, nascetur fɛwdi mus. Donec ullamcorper nulla a ɛnyɛ nea ɛyɛ adetɔnfo fringilla. Duis mollis, est a ɛnyɛ commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla a ɛnyɛ nea ɛyɛ adetɔnfo fringilla.

Maecenas sed diam eget risus varius blandit tena ase a ɛnyɛ magna. Donec id elit a ɛnyɛ mi porta gravida wɔ eget metus. Duis mollis, est a ɛnyɛ commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

<p>...</p>

Lead nipadua no mfonini

Ma nkyekyem bi da nsow denam .lead.

Vivamus sagittis lacus vel augue laoreet a ɛyɛ mmerɛw sɛ wobɛtɔ no. Duis mollis, est a ɛnyɛ ade a wɔde yɛ nneɛma.

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

Wɔde Less na esii

Typographic scale no gyina Less variables abien so wɔ variables mu.less : @font-size-basene @line-height-base. Nea edi kan ne base font-size a wɔde di dwuma wɔ ne nyinaa mu na nea ɛto so abien ne base line-height. Yɛde saa variables no ne akontabuo a ɛnyɛ den bi di dwuma de yɛ margins, paddings, ne line-heights a ɛwɔ yɛn type no nyinaa ne nea ɛkeka ho. Yɛ wɔn sɛnea wopɛ na Bootstrap no dannan wɔn ho.

Nsɛm a ɛwɔ nkyerɛwde mu no mu nneɛma

Nkyerɛwee a wɔahyɛ no agyirae

Sɛ wopɛ sɛ wotwe adwene si nkyerɛwee bi a ɛrekɔ so esiane sɛ ɛfa ho wɔ nsɛm foforo mu nti a, fa <mark>tag no di dwuma.

Wubetumi de agyiraehyɛde tag no adi dwuma deda no adiatwerɛ.

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

Nsɛm a wɔapopa

Sɛ wopɛ sɛ wokyerɛ nsɛm a wɔapopa no a, fa <del>tag no di dwuma.

~~Wɔayɛ sɛ wɔbɛfa saa nsɛm a wɔahyehyɛ yi sɛ nsɛm a wɔapopa.~~

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

Strikethrough nsɛm a wɔakyerɛw so

Sɛ wopɛ sɛ wokyerɛ nsɛm a wɔabɔ no mu a ɛnyɛ nea ɛfata bio a, fa <s>tag no di dwuma.

~~Wɔayɛ sɛ wɔbɛfa saa nkyerɛwee yi sɛ ɛnyɛ nokware bio.~~

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

Nsɛm a wɔde ahyɛ mu

Sɛ wopɛ sɛ wokyerɛ nneɛma a wɔde aka krataa no ho a, fa <ins>tag no di dwuma.

Wɔayɛ sɛ wɔbɛfa saa nsɛm a wɔahyehyɛ yi sɛ ade a wɔde aka krataa no ho.

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

Nsɛm a wɔatwe adwene asi so

Sɛ wopɛ sɛ wotwe adwene si nsɛm so a, fa <u>tag no di dwuma.

Saa nsɛm yi bɛkyerɛ ase sɛnea wɔatwe adwene asi so no

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

Fa HTML no default emphasis tags a ɛwɔ styles a emu yɛ hare no di dwuma.

Nkyerɛwee nketenkete

Sɛ wopɛ sɛ woyi nsɛm a ɛwɔ mu anaa nsɛm a wɔabɔ no so dua no so dua a, fa <small>tag no si nsɛm no so wɔ ɔwofo no kɛse 85%. Heading elements nya wɔn ankasa de font-sizema nested<small> elements.

Wubetumi de inline element a .smallɛwɔ biara ananmu adi dwuma ɔkwan foforo so <small>.

Wɔayɛ sɛ wɔbɛfa saa nsɛm a wɔahyehyɛ yi sɛ nkyerɛwde a ɛyɛ fɛ.

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

Akokoɔduro

Sɛ wode font-weight a emu yɛ duru si nsɛm a wɔakyerɛw no fã bi so dua.

Wɔakyerɛ nsɛm a edidi so yi ase sɛ nsɛm a ɛyɛ tuntum .

<strong>rendered as bold text</strong>

Nkyerɛwee a wɔde nkyerɛwde a ɛyɛ mmerɛw ayɛ

Sɛ́ wubesi nsɛm a wɔakyerɛw no fã bi a wɔde italics ahyɛ mu so dua no.

Wɔakyerɛ nsɛm a edidi so yi ase sɛ nsɛm a wɔakyerɛw no italic .

<em>rendered as italicized text</em>

Nneɛma a wɔde sesa nneɛma

Te nka sɛ wowɔ ahofadi sɛ wode bedi dwuma <b>na wode adi dwuma <i>wɔ HTML5 mu. <b>no kyerɛ sɛ ɛbɛtwe adwene asi nsɛmfua anaa nsɛmfua so a ɛrenkyerɛ hia foforo a ɛho hia bere a <i>ɛyɛ nea ɛfa nne, mfiridwuma ho nsɛmfua, ne nea ɛkeka ho ho titiriw.

Alignment adesua ahorow

Ɛnyɛ den sɛ wobɛsan asiesie nsɛm no akɔ afã horow a ɛwɔ nsɛm a wɔde hyɛ adesua ahorow mu.

Nkyerɛwee a wɔahyɛ no agyirae wɔ benkum so.

Nsɛm a wɔahyehyɛ no mfinimfini.

Nsɛm a wɔahyehyɛ no pɛpɛɛpɛ.

Nkyerɛwee a ɛfata.

Nsɛm a wɔde kyekyere nsɛm biara nni hɔ.

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

Nsakrae adesua ahorow

Sesa nsɛm wɔ components mu a text capitalization adesua ahorow wom.

Nsɛm a wɔde nkyerɛwde nketewa ahyɛ mu.

Nsɛm a wɔakyerɛw no nkyerɛwde akɛse.

Nsɛm a wɔde nkyerɛwde akɛse akyerɛw.

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

Nsɛmfua a wɔatwa no tiaa

Stylized implementation of HTML's <abbr>element ma abbreviations ne acronyms de kyerɛ nkyerɛase a wɔatrɛw mu no wɔ hover so. Nsɛmfua a wɔatwa no tiaa a ɛwɔ titlesu bi wɔ ase hye a ɛwɔ nsensanee a ɛyɛ hann ne mmoa cursor wɔ hover so, a ɛma nsɛm foforo a ɛfa hover so ne wɔn a wɔde mfiridwuma a ɛboa di dwuma no.

Nsɛmfua titiriw a wɔatwa no tiaa

Asɛmfua su no a wɔatwa no tiaa ne attr .

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

Mfiase a wɔde di dwuma

Fa ka .initialismasɛmfua tiawa bi ho ma font-size a ɛyɛ ketewaa bi.

HTML yɛ ade a eye sen biara fi bere a wɔatwitwa paanoo no.

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

Address ahorow

Fa nana a ɔbɛn no anaa adwuma no nyinaa nkitahodi ho nsɛm kyerɛ. Kora formatting so denam nkyerɛwde nyinaa a wode bɛhyɛ awiei no so <br>.

1355
Market Street, Suite 900
San Francisco, CA 94103 Kr
: (123)

Edin a edi mũ
[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>

Nsɛm a wɔde siw ano

Sɛ wopɛ sɛ wofa nsɛm a wɔabɔ no mua a efi baabi foforo a ɛwɔ wo krataa no mu a.

Default a wɔde ahyɛ mu

Fa HTML<blockquote> biara kyekyere ho sɛ asɛm a wɔafa aka no. Sɛ wopɛ nsɛm a wɔafa aka tẽẽ a, yɛkamfo kyerɛ sɛ .<p>

Lorem ipsum dolor tena amet, consectetur adipiscing a ɛyɛ fɛ a ɛyɛ fɛ. Nkyekyɛm a edi mũ posuere erat a ante.

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

Blockquote a wobɛpaw no

Style ne emu nsɛm sesa ma nsakrae a ɛnyɛ den wɔ gyinapɛn bi so <blockquote>.

Fibea bi din a wɔbɛbɔ

Fa a <footer>ma wohu baabi a wonya fi no ka ho. Fa fibea adwuma no din kyekyere <cite>.

Lorem ipsum dolor tena amet, consectetur adipiscing a ɛyɛ fɛ a ɛyɛ fɛ. Nkyekyɛm a edi mũ posuere erat a ante.

Obi a wagye din wɔ Source Title mu

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

Nneɛma foforo a wɔde kyerɛ

Fa ka ho .blockquote-reversema blockquote a ɛwɔ nsɛm a ɛwɔ nifa so.

Lorem ipsum dolor tena amet, consectetur adipiscing a ɛyɛ fɛ a ɛyɛ fɛ. Nkyekyɛm a edi mũ posuere erat a ante.

Obi a wagye din wɔ Source Title mu

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

Nsɛm a wɔahyehyɛ

Wɔnhyɛ da

Nneɛma a wɔahyehyɛ a nhyehyɛe no ho nhia pefee.

Lorem ipsum dolor tena ase amet
Consectetur adipiscing a ɛyɛ fɛ yiye
Integer molestie lorem wɔ massa no mu
Facilisis a ɛwɔ pretium nisl aliquet mu
Nulla volutpat a ɛyɛ aduru a wɔde yɛ aduru
- Phasellus iaculis a ɛwɔ nipadua no mu
- Purus sodales a ɛyɛ aduru a ɛma obi ho yɛ hyew
- Vestibulum laoreet hyɛn gyinabea sem
- Ac tristique libero a ɔyɛ ɔbarima a ɔpɛ sɛ ɔyɛ biribiara
Faucibus porta lacus a ɛyɛ fɛ a ɛyɛ fɛ
Aenean tena ase amet erat nunc
Eget porttitor a ɔyɛ ɔkyerɛkyerɛfo

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

Wɔahyɛ sɛ

Nneɛma a wɔahyehyɛ a nhyehyɛe no ho hia pefee wom.

Lorem ipsum dolor tena ase amet
Consectetur adipiscing a ɛyɛ fɛ yiye
Integer molestie lorem wɔ massa no mu
Facilisis a ɛwɔ pretium nisl aliquet mu
Nulla volutpat a ɛyɛ aduru a wɔde yɛ aduru
Faucibus porta lacus a ɛyɛ fɛ a ɛyɛ fɛ
Aenean tena ase amet erat nunc
Eget porttitor a ɔyɛ ɔkyerɛkyerɛfo

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

Wɔannwene no

Yi default list-stylene benkum margin wɔ list nneɛma (mmofra ntɛm ara nkutoo). Eyi fa mmofra a wɔakyerɛw wɔn din ntɛm ara nneɛma nkutoo ho , a ɛkyerɛ sɛ ɛho behia sɛ wode adesuakuw no ka ho ma nkyerɛwde biara a wɔde ahyɛ mu nso.

Lorem ipsum dolor tena ase amet
Consectetur adipiscing a ɛyɛ fɛ yiye
Integer molestie lorem wɔ massa no mu
Facilisis a ɛwɔ pretium nisl aliquet mu
Nulla volutpat a ɛyɛ aduru a wɔde yɛ aduru
- Phasellus iaculis a ɛwɔ nipadua no mu
- Purus sodales a ɛyɛ aduru a ɛma obi ho yɛ hyew
- Vestibulum laoreet hyɛn gyinabea sem
- Ac tristique libero a ɔyɛ ɔbarima a ɔpɛ sɛ ɔyɛ biribiara
Faucibus porta lacus a ɛyɛ fɛ a ɛyɛ fɛ
Aenean tena ase amet erat nunc
Eget porttitor a ɔyɛ ɔkyerɛkyerɛfo

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

Inline no mu

Fa list nneɛma nyinaa gu line biako so ne display: inline-block;ne padding bi a ɛyɛ hann.

Lorem ipsum a ɔyɛ ɔbarima
Phasellus a wɔfrɛ no iaculis a wɔfrɛ no iaculis
Nulla a ɔyɛ ɔkwasea

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

Nkyerɛmu

Nsɛmfua a wɔahyehyɛ a nkyerɛkyerɛmu ahorow a ɛbata ho.

Nkyerɛkyerɛmu ahorow a wɔahyehyɛ: Nkyerɛkyerɛmu a wɔahyehyɛ no yɛ pɛpɛɛpɛ ma nsɛmfua nkyerɛase.
Euismod ho asɛm: Vestibulum id ligula porta felis euismod nsuo a ɛyɛ fɛ a ɛma obi nya lacinia odio sem nec elit.; Donec id elit a ɛnyɛ mi porta gravida wɔ eget metus.
Malesuada a ɛwɔ porta: Etiam porta sem ɔbarima a ɔyɛ ɔbarima a ɔyɛ ɔbarima.

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

Horizontal nkyerɛkyerɛmu

Yɛ nsɛmfua ne nkyerɛkyerɛmu ahorow a <dl>wɔahyehyɛ no nnidiso nnidiso wɔ nkyɛnkyɛn. Starts off stacked like default <dl>s, nanso sɛ navbar no trɛw a, saa ara na yɛ eyinom.

Nkyerɛkyerɛmu ahorow a wɔahyehyɛ: Nkyerɛkyerɛmu a wɔahyehyɛ no yɛ pɛpɛɛpɛ ma nsɛmfua nkyerɛase.
Euismod ho asɛm: Vestibulum id ligula porta felis euismod nsuo a ɛyɛ fɛ a ɛma obi nya lacinia odio sem nec elit.; Donec id elit a ɛnyɛ mi porta gravida wɔ eget metus.
Malesuada a ɛwɔ porta: Etiam porta sem ɔbarima a ɔyɛ ɔbarima a ɔyɛ ɔbarima.
Felis euismod semper a ɛma obi nya lacinia: Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut aduru a wɔde yɛ aduru a ɛma obi tena ase amet risus.

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

Ɔkwan a wɔfa so twa ade

Horizontal description lists bɛtwa nsɛmfua a ɛware dodo sɛ ɛbɛfata wɔ benkum so kɔla no mu ne text-overflow. Wɔ viewports teateaa mu no, wɔbɛsesa akɔ default stacked layout no so.

Inline no mu

Fa inline snippets a ɛwɔ code no mu no kyekyere <code>.

Sɛ nhwɛso no, <section>ɛsɛ sɛ wɔkyekyere no sɛ inline.

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

Ɔdefo no nsɛm a wɔde hyɛ mu

Fa no <kbd>kyerɛ input a wɔtaa fa keyboard so hyɛ mu.

Sɛ wopɛ sɛ wosakra directory ahorow no a, kyerɛw directory cdno din na di akyi.
Sɛ wopɛ sɛ wosakra nhyehyɛe ahorow no a, mia so 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>

Mfitiaseɛ block

Fa di dwuma <pre>ma koodu nkyerɛwde ahorow pii. Hwɛ hu sɛ wubeguan afi angle brackets biara a ɛwɔ code no mu no mu na ama woatumi akyerɛ ase yiye.

<p>Nsɛm a wɔakyerɛw no nhwɛso wɔ ha...</p>

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

Wubetumi de nea wopɛ aka ho.pre-scrollable adesuakuw no aka ho, a ɛbɛma max-height a ɛyɛ 350px na ama y-axis scrollbar.

Nneɛma a Ɛsakra

Sɛ wopɛ sɛ wokyerɛ variables a, fa <var>tag no di dwuma.

y = m x + b

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

Nhwɛsode a efi mu ba

Sɛ wopɛ sɛ wokyerɛ blocks sample output fi program bi mu a, fa <samp>tag no di dwuma.

Wɔayɛ sɛ wɔbɛfa saa nkyerɛwee yi sɛ nhwɛsode a efi kɔmputa so dwumadi bi mu ba.

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

Nhwɛso titiriw

Sɛ wopɛ sɛ woyɛ nneɛma titiriw a wɔde yɛ nneɛma—a wɔde hyɛ mu a ɛyɛ hare ne nneɛma a wɔde kyekyɛ nneɛma mu a ɛkɔ soro nkutoo a—fa nnyinaso adesuakuw .tableno ka biara <table>ho . Ebia ɛbɛyɛ te sɛ nea ɛyɛ super redundant, nanso esiane sɛ wɔde tables di dwuma kɛse ma plugins afoforo te sɛ kalenda ne date pickers nti, yɛapaw sɛ yɛbɛtew yɛn custom table styles no ho.

Nsɛm a wɔakyerɛw wɔ pon so a wubetumi apaw.
# .	Fie din	Abusuadin	Edin a wɔde di dwuma
1. 1.	Marko	Otto na ɔkyerɛwee	@mdo na ɔkyerɛwee
2. 2.	Yakob	Thornton na ɔkyerɛwee	@kɛseɛ
3. 3	Larry na ɔkyerɛwee	Anomaa no	@twitter so

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

Ntrɛwmu a ɛwɔ nsensanee

Fa di dwuma .table-stripedde zebra-striping ka table row biara a ɛwɔ <tbody>.

Cross-browser a ɛne ne ho hyia

Wɔnam :nth-childCSS selector a enni Internet Explorer 8 mu no so na ɛyɛ pon ahorow a ɛwɔ nsensanee no su.

# .	Fie din	Abusuadin	Edin a wɔde di dwuma
1. 1.	Marko	Otto na ɔkyerɛwee	@mdo na ɔkyerɛwee
2. 2.	Yakob	Thornton na ɔkyerɛwee	@kɛseɛ
3. 3	Larry na ɔkyerɛwee	Anomaa no	@twitter so

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

Ɔpon a ɛwɔ hye so

Fa ka ho .table-borderedma borders wɔ table no afã nyinaa ne cells.

# .	Fie din	Abusuadin	Edin a wɔde di dwuma
1. 1.	Marko	Otto na ɔkyerɛwee	@mdo na ɔkyerɛwee
2. 2.	Yakob	Thornton na ɔkyerɛwee	@kɛseɛ
3. 3	Larry na ɔkyerɛwee	Anomaa no	@twitter so

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

Hover row ahorow no

Fa ka .table-hoverho na ama hover tebea bi ayɛ adwuma wɔ table rows a ɛwɔ a <tbody>.

# .	Fie din	Abusuadin	Edin a wɔde di dwuma
1. 1.	Marko	Otto na ɔkyerɛwee	@mdo na ɔkyerɛwee
2. 2.	Yakob	Thornton na ɔkyerɛwee	@kɛseɛ
3. 3	Larry na ɔkyerɛwee	Anomaa no	@twitter so

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

Pon a wɔayɛ no tiawa

Fa ka .table-condensedho na ama pon ahorow no ayɛ ketewaa denam cell padding a wubetwitwa mu abien no so.

# .	Fie din	Abusuadin	Edin a wɔde di dwuma
1. 1.	Marko	Otto na ɔkyerɛwee	@mdo na ɔkyerɛwee
2. 2.	Yakob	Thornton na ɔkyerɛwee	@kɛseɛ
3. 3	Larry Anomaa no		@twitter so

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

Adesua ahorow a ɛfa nsɛm a ɛfa ho

Fa nsɛm a ɛfa ho adesua ahorow di dwuma de kɔla pon row anaa nkwammoaa ankorankoro.

Klaase	Nkyerɛmu
`.active`	Fa hover kɔla no di dwuma wɔ row anaa cell pɔtee bi so
`.success`	Ɛkyerɛ adeyɛ a edi mu anaasɛ ɛyɛ papa
`.info`	Kyerɛ nsakrae anaa adeyɛ a ɛma nsɛm a ɛnyɛ afã biara
`.warning`	Kyerɛ kɔkɔbɔ bi a ebia ebehia sɛ wɔde wɔn adwene si so
`.danger`	Ɛkyerɛ adeyɛ a asiane wom anaasɛ ebetumi ayɛ bɔne

# .	Kɔla asɛmti	Kɔla asɛmti	Kɔla asɛmti
1. 1.	Nsɛm a ɛwɔ column no mu	Nsɛm a ɛwɔ column no mu	Nsɛm a ɛwɔ column no mu
2. 2.	Nsɛm a ɛwɔ column no mu	Nsɛm a ɛwɔ column no mu	Nsɛm a ɛwɔ column no mu
3. 3	Nsɛm a ɛwɔ column no mu	Nsɛm a ɛwɔ column no mu	Nsɛm a ɛwɔ column no mu
4. 4.	Nsɛm a ɛwɔ column no mu	Nsɛm a ɛwɔ column no mu	Nsɛm a ɛwɔ column no mu
5. 5	Nsɛm a ɛwɔ column no mu	Nsɛm a ɛwɔ column no mu	Nsɛm a ɛwɔ column no mu
6. 6	Nsɛm a ɛwɔ column no mu	Nsɛm a ɛwɔ column no mu	Nsɛm a ɛwɔ column no mu
7. 7	Nsɛm a ɛwɔ column no mu	Nsɛm a ɛwɔ column no mu	Nsɛm a ɛwɔ column no mu
8	Nsɛm a ɛwɔ column no mu	Nsɛm a ɛwɔ column no mu	Nsɛm a ɛwɔ column no mu
9. 9	Nsɛm a ɛwɔ column no mu	Nsɛm a ɛwɔ column no mu	Nsɛm a ɛwɔ column no mu

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

Ntease a wɔde bɛma mfiridwuma ahorow a ɛboa

Sɛ wode kɔla di dwuma de ntease ka pon so row anaa ankorankoro nkwammoaa ho a, ɛma wonya sɛnkyerɛnne a wotumi hu nkutoo, a wɔremfa nkɔma wɔn a wɔde mfiridwuma a ɛboa di dwuma – te sɛ screen akenkanfo. Hwɛ sɛ nsɛm a wɔde kɔla no akyerɛ no da adi pefee fi emu nsɛm no ankasa mu (nkyerɛwee a wotumi hu wɔ pon row/cell a ɛfa ho no mu), anaasɛ wɔde bɛka ho denam akwan foforo so, te sɛ nsɛm foforo a wɔde asie ne .sr-onlyadesuakuw no mu.

Nnwom a wɔde bua nsɛm

Yɛ mmuaeɛ pon denam biara a wobɛkyekyere .tablemu .table-responsiveama atumi akɔ soro wɔ mfiri nketewa so (wɔ 768px ase). Sɛ worehwɛ biribiara a ɛso sen 768px tɛtrɛtɛ so a, worenhu nsonsonoe biara wɔ saa pon ahorow yi mu.

Vertical clipping/twitwa mu

Responsive tables make use of overflow-y: hidden, a ɛtwitwa nsɛm biara a ɛkɔ akyiri sen table no ase anaa atifi anoano. Titiriw no, eyi betumi atwitwa dropdown menus ne afoforo widgets afoforo so.

Firefox ne afuw mu nhyehyɛe ahorow

Firefox wɔ fieldset styling bi a ɛyɛ fɛre a ɛfa ho widtha ɛtwetwe mmuae pon no. Eyi ntumi nhyɛ so a Firefox-specific hack a yɛmfa mma wɔ Bootstrap mu nni mu:

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

Sɛ wopɛ nsɛm pii a, kenkan Stack Overflow mmuae yi .

# .	Table asɛmti	Table asɛmti	Table asɛmti	Table asɛmti	Table asɛmti	Table asɛmti
1. 1.	Table cell	Table cell	Table cell	Table cell	Table cell	Table cell
2. 2.	Table cell	Table cell	Table cell	Table cell	Table cell	Table cell
3. 3	Table cell	Table cell	Table cell	Table cell	Table cell	Table cell

# .	Table asɛmti	Table asɛmti	Table asɛmti	Table asɛmti	Table asɛmti	Table asɛmti
1. 1.	Table cell	Table cell	Table cell	Table cell	Table cell	Table cell
2. 2.	Table cell	Table cell	Table cell	Table cell	Table cell	Table cell
3. 3	Table cell	Table cell	Table cell	Table cell	Table cell	Table cell

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

Nhwɛso titiriw

Ankorankoro form controls no ankasa nya wiase nyinaa styling bi. Wɔde textual <input>, <textarea>, ne <select>elements a ɛwɔ .form-controlnyinaa ahyɛ width: 100%;default so. Fa nkyerɛwde ne nneɛma a wɔde di dwuma no kyekyere mu na .form-groupama woanya ntam kwan a eye sen biara.

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

Mfa form akuo ne input akuo nfrafra

Mfa form akuw nfrafra nsɛm a wɔde hyɛ mu akuw no mu tẽẽ . Mmom, nest input kuw no wɔ fom kuw no mu.

Inline kratasin no

Fa ka .form-inlinewo kratasin no ho (a ɛnsɛ sɛ ɛyɛ <form>) ma benkum so ne inline-block controls. Eyi fa nkrataa a ɛwɔ viewports mu a anyɛ yiye koraa no ne tɛtrɛtɛ yɛ 768px nkutoo ho.

Ebia ɛbɛhwehwɛ sɛ wɔyɛ custom widths

Inputs ne selects ayɛ width: 100%;adwuma default wɔ Bootstrap mu. Wɔ inline nkrataa mu no, yɛsan de saa no kɔ width: auto;sɛnea ɛbɛyɛ a control ahorow pii betumi atra line koro no ara so. Ɛgyina wo nhyehyɛe so no, ebia ɛho behia sɛ wode custom widths afoforo di dwuma.

Fa nkyerɛwde ahorow ka ho bere nyinaa

Screen akenkanfoɔ bɛnya ɔhaw wɔ wo nkrataa no ho sɛ woamfa label anhyɛ biribiara a wode bɛhyɛ mu no mu a. Wɔ saa inline nkrataa yi ho no, wubetumi de .sr-onlyadesuakuw no asie nkyerɛwde ahorow no. Akwan foforo wɔ hɔ a wɔfa so de ahyɛnsode ma mfiridwuma a ɛboa, te sɛ aria-label, aria-labelledbyanaa titlesu no. Sɛ eyinom mu biara nni hɔ a, screen akenkanfo betumi de placeholdersu no adi dwuma, sɛ ɛwɔ hɔ a, nanso hyɛ no nsow sɛ wɔmfa nni dwuma placeholdersɛ nea wɔde besi akwan afoforo a wɔfa so kyerɛw nsɛm no ananmu.

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

Ɔkwan a wɔfa so yɛ ade a ɛkɔ soro

Fa Bootstrap grid adesua ahorow a wɔadi kan akyerɛkyerɛ mu no hyehyɛ nkyerɛwde ne akuw a ɛwɔ fom controls mu wɔ horizontal layout mu denam ka a wode bɛka .form-horizontalfom no ho (a enhia sɛ ɛyɛ a <form>). Saa a wobɛyɛ no sesa .form-groups ma ɛyɛ n’ade sɛ grid rows, enti enhia sɛ .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>

Nneɛma a wɔde di dwuma a wɔboa

Nhwɛsoɔ a ɛfa standard form controls a wɔboa wɔ nhwɛsoɔ form layout mu.

Nsɛm a wɔde hyɛ mu

Fom sohwɛ a wɔtaa de di dwuma, nsɛm a wɔde hyɛ mu a egyina nsɛm so. Nea ɛka ho ne mmoa a wɔde ma HTML5 ahorow nyinaa: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, ne color.

Type mpaemuka a wɔhwehwɛ

Inputs no bɛyɛ fully styled nkutoo sɛ wɔn typede no dawurubɔ yiye a.

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

Nsɛm a wɔde hyɛ mu akuw ahorow

Sɛ wode nsɛm a wɔaka abom anaa bɔtɔn ahorow bɛka ho ansa na ne/anaasɛ nsɛm biara a egyina nsɛm so akyi a <input>, hwɛ input kuw no fã no .

Textarea a wɔde kyerɛw nsɛm

Form control a ɛboa nkyerɛwee ahorow pii. Sesa rowssu no sɛnea ɛho hia.

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

Nnaka a wɔde hyɛ nneɛma mu ne radio ahorow

Nnaka a wɔde hyɛ mu no yɛ nea wɔde paw nneɛma biako anaa pii wɔ list bi mu, bere a radio ahorow no yɛ nea wɔde paw ɔkwan biako fi pii mu.

Wɔboa checkboxes ne radio ahorow a wɔagyae mu, nanso sɛ wode "wɔmma ho kwan" cursor bɛma wɔ hover of the parent <label>, ɛho behia sɛ wode .disabledclass no bɛka ɔwofo .radiono ho , .radio-inline, .checkbox, anaa .checkbox-inline.

Default (a wɔaboaboa ano) .

<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 checkbox ahorow ne radio ahorow

Fa .checkbox-inlineanaa .radio-inlineadesua ahorow no di dwuma wɔ checkbox anaa radio ahorow a ɛtoatoa so so ma control ahorow a epue wɔ line koro no ara so.

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

Nnaka a wɔde hyɛ mu ne radio ahorow a wɔakyerɛw nkyerɛwde a wɔde hyɛ mu no nni mu

Sɛ ɛsɛ sɛ wunya nsɛm biara wɔ , no mu a <label>, wɔde nsɛm a wode bɛba no si hɔ sɛnea wobɛhwɛ kwan no. Mprempren ɛyɛ adwuma wɔ checkbox a ɛnyɛ inline ne radio nkutoo so. Kae sɛ wobɛda so ara de nkyerɛwde bi ama mfiridwuma a ɛboa (sɛ nhwɛso no, sɛ wode bedi dwuma 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>

Ɔpaw

Hyɛ no nsow sɛ native select menu pii—a ɛne Safari ne Chrome mu—wɔ ntwea a ɛyɛ kurukuruwa a wontumi mfa border-radiusagyapade ahorow so nsakra.

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

Wɔ <select>controls a ɛwɔ multipleattribute no, wɔakyerɛ options pii default.

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

Static a wɔde di dwuma

Sɛ ɛho hia sɛ wode nsɛm a ɛnyɛ den si fom nkyerɛwde bi nkyɛn wɔ kratasin bi mu a, fa .form-control-staticadesuakuw no di dwuma wɔ <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>

Fa w’adwene si tebea so

Yɛyi default outlinestyles a ɛwɔ form controls bi so no na yɛde a box-shadowsi n’ananmu ma :focus.

Demo `:focus`tebea no

Atifi hɔ nhwɛso input no de custom styles di dwuma wɔ yɛn nkrataa mu de kyerɛ :focustebea no wɔ a .form-control.

Tebea a wɔadi dɛm

Fa disabledboolean attribute no ka ho wɔ input bi so na asiw ɔdefo nkitahodi ano. Nsɛm a wɔde ahyɛ mu a wɔabara no da adi sɛ ɛyɛ hare na ɛde not-allowedcursor ka ho.

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

Wɔagyae afuw mu nhyehyɛe ahorow

Fa disabledattribute no ka a ho na <fieldset>ama controls a ɛwɔ mu no nyinaa ayɛ adwuma <fieldset>prɛko pɛ.

Caveat fa link dwumadie ho`<a>`

Sɛnea wɔahyɛ no, browser ahorow no bɛfa native form controls ( <input>, <select>ne <button>elements) a ɛwɔ a mu <fieldset disabled>nyinaa sɛ wɔagyae, na asiw keyboard ne mouse nkitahodi nyinaa ano wɔ wɔn so. Nanso, sɛ wo kratasin no nso de <a ... class="btn btn-*">nneɛma bi ka ho a, wɔbɛma eyinom kwan a ɛyɛ pointer-events: none. Sɛnea wɔahyɛ no nsow wɔ ɔfa a ɛfa tebea a wɔadi dɛm ho ma bɔtn (na titiriw wɔ ɔfa ketewa a ɛfa ankora nneɛma ho), saa CSS agyapade yi nnya nyɛɛ gyinapɛn na wonnya mmoa koraa wɔ Opera 18 ne nea ɛba fam, anaasɛ wɔ Internet Explorer 11 mu, na wodii nkonim 't nsiw keyboard dwumadiefoɔ kwan sɛ wɔbɛtumi de wɔn adwene asi so anaasɛ wɔbɛma saa links yi ayɛ adwuma. Enti sɛnea ɛbɛyɛ a wubenya ahobammɔ no, fa JavaScript a wɔahyɛ da ayɛ no di dwuma na ma link ahorow a ɛtete saa no nyɛ adwuma.

Cross-browser a ɛne ne ho hyia

Bere a Bootstrap de saa akwan yi bedi dwuma wɔ browser ahorow nyinaa mu no, Internet Explorer 11 ne nea ɛwɔ ase ha no ntumi mmoa disabledsu no koraa wɔ <fieldset>. Fa JavaScript a wɔahyɛ da ayɛ no di dwuma na ma fieldset no nyɛ adwuma wɔ browser ahorow yi mu.

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

Akenkan nkutoo ka ho asɛm

Fa readonlyboolean attribute no ka ho wɔ input bi so na asiw nsakrae a ɛbɛba input no bo no ano. Nsɛm a wɔde kenkan nkutoo no da adi sɛ ɛyɛ hare (te sɛ nsɛm a wɔde hyɛ mu a wɔagyae mu no ara pɛ), nanso kura cursor a ɛwɔ hɔ no mu.

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

Mmoa nsɛm

Block level mmoa nsɛm ma fom controls.

Mmoa nsɛm a wɔde bata kratasin sohwɛ ahorow ho

Ɛsɛ sɛ mmoa nsɛm no bata krataa sohwɛ a ɛfa aria-describedbysu no a wɔde bedi dwuma ho no ho pefee. Wei bɛhwɛ sɛ mfiridwuma a ɛboa – te sɛ screen readers – bɛbɔ saa mmoa nsɛm yi ho amanneɛ bere a nea ɔde di dwuma no de n’adwene si so anaasɛ ɔhyɛn control no mu.

<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 ka sɛ

Bootstrap no de validation styles ma mfomso, kɔkɔbɔ, ne nkonimdi tebea wɔ fom controls so ka ho. Sɛ wode bedi dwuma a, fa .has-warning, .has-error, anaa .has-successka ɔwofo element no ho. .control-label, , biara .form-controlne .help-blocksaa element no mu no benya validation styles no.

Devering validation state to mmoa mfiridwuma ne colorblind a wɔde di dwuma

Sɛ wode saa validation styles yi di dwuma de kyerɛ tebea a ɛwɔ form control bi mu a, ɛma wonya aniwa, kɔla a egyina so kyerɛ nkutoo, a wɔremfa nkɔma wɔn a wɔde mfiridwuma a ɛboa di dwuma - te sɛ screen akenkanfo - anaasɛ wɔn a wɔde di dwuma a wonni kɔla.

Hwɛ sɛ wɔde ɔman ho sɛnkyerɛnne foforo nso bɛma. Sɛ nhwɛsoɔ no, wobɛtumi de hint fa state ho ahyɛ form control no <label>nkyerɛwee no ankasa mu (sɛdeɛ ɛteɛ wɔ code nhwɛsoɔ a ɛdidi soɔ yi mu), wode Glyphicon ahyɛ mu (a nsɛm foforɔ a ɛfata a wode bedi dwuma de .sr-onlyadesua no di dwuma - hwɛ Glyphicon nhwɛsoɔ no ), anaasɛ wode an mmoa foforo text block. Titiriw wɔ mmoa mfiridwuma ho no, wobetumi nso de aria-invalid="true"su bi ama form controls a enni mu.

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

Ne ahyɛnsode ahorow a wubetumi apaw

Wubetumi nso de nsɛm a wɔde ma ho ahyɛnsode ahorow a wopɛ aka ho a wode ahyɛnsode a ɛwɔ .has-feedbackne nifa no aka ho.

Feedback icons no de nkyerɛwee <input class="form-control">mu nneɛma nkutoo na ɛyɛ adwuma.

Ahyɛnsode, nkyerɛwde, ne nsɛm a wɔde hyɛ mu akuw

Nsaano gyinabea a wɔde nsɛm a wɔde bɛma ahyɛnsode ahorow no besisi hɔ no ho hia ma nsɛm a wɔde hyɛ mu a enni nkyerɛwde ne nsɛm a wɔde hyɛ mu akuw a wɔde biribi ka ho wɔ nifa so. Yɛhyɛ wo nkuran denneennen sɛ fa nkyerɛwde ahorow ma nneɛma a wɔde hyɛ mu nyinaa esiane sɛ wobetumi anya bi nti. Sɛ wopɛ sɛ wosiw nkyerɛwde ahorow a wɔbɛda no adi no kwan a, fa sie ne .sr-onlyadesuakuw no. Sɛ ɛsɛ sɛ woyɛ a wonni labels a, sesa topbo a ɛwɔ feedback icon no so. Wɔ input akuo ho no, sesa rightbotae no ma ɛnyɛ pixel bo a ɛfata a egyina wo addon no trɛw so.

Ahyɛnsode no ntease a wɔde bɛma mfiridwuma ahorow a ɛboa

Sɛnea ɛbɛyɛ a wɔbɛhwɛ sɛ mfiridwuma a ɛboa – te sɛ screen readers – da ahyɛnsode bi asekyerɛ adi yiye no, ɛsɛ sɛ wɔde nsɛm foforo a ahintaw ka .sr-onlyadesuakuw no ho na wɔde bata krataa sohwɛ a ɛfa sɛnea wɔde di dwuma no ho pefee aria-describedby. Sɛnea ɛbɛyɛ foforo no, hwɛ hu sɛ wɔde ntease no (sɛ nhwɛso no, nokwasɛm a ɛyɛ sɛ kɔkɔbɔ bi wɔ hɔ ma nsɛm a wɔde hyɛ mu no afã pɔtee bi) no bɛda adi wɔ ɔkwan foforo bi so, te sɛ nsakrae a ɛfa nsɛm a ɛwɔ ankasa <label>a ɛbata krataa no sohwɛ ho no ho.

Ɛwom sɛ nhwɛso ahorow a edidi so yi ka wɔn mu biara form controls no validation tebea ho asɛm dedaw wɔ <label>nkyerɛwee no ankasa mu de, nanso wɔde atifi hɔ ɔkwan no (a wɔde .sr-onlynsɛm ne aria-describedby) di dwuma no aka ho de ayɛ nhwɛso.

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

Ahyɛnsode ahorow a wobetumi apaw wɔ horizontal ne inline ahorow mu

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

Ahyɛnsode ahorow a wubetumi apaw a wɔde `.sr-only`nkyerɛwde ahorow ahintaw wom

Sɛ wode .sr-onlyclass no sie form control's <label>(sen sɛ wode labeling options afoforo bedi dwuma, te sɛ aria-labelattribute no), Bootstrap bɛsesa icon no gyinabea ankasa bere a wɔde aka ho no.

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

Di sizing so

Set heights fa classes te sɛ .input-lg, na hyehyɛ widths fa grid column classes te sɛ .col-lg-*.

Ɔsorokɔ a wɔde yɛ kɛse

Yɛ form controls atenten anaa tiawa a ɛne button akɛse hyia.

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

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

Horizontal form kuw akɛse ahorow

Ntɛmntɛm size labels ne form controls mu .form-horizontaldenam .form-group-lganaa .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>

Kɔla a wɔde yɛ kɛse

Fa nsɛm a wɔde ahyɛ mu no kyekyere grid columns mu, anaasɛ ɔwofo element biara a wɔahyɛ da ayɛ, na ama ɛnyɛ den sɛ ɛbɛhyɛ ntrɛwmu a wopɛ no mu den.

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

Nsɛm a wɔde hyɛ bɔton mu

Fa button adesua ahorow no di dwuma wɔ an<a> , <button>, anaa <input>element bi so.

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

Nsɛm a ɛfa ho a wɔde di dwuma pɔtee

Bere a wobetumi de button classes adi dwuma wɔ <a>ne <button>elements so no, <button>elements nkutoo na wɔboa wɔ yɛn nav ne navbar components no mu.

Links a ɛyɛ adwuma sɛ buttons

Sɛ wɔde <a>nneɛma no di dwuma sɛ bɔtɔn – ɛkanyan krataafa no mu dwumadi, sen sɛ wobɛkɔ krataa anaa ɔfã foforo a ɛwɔ kratafa a ɛwɔ hɔ mprempren no mu – ɛsɛ sɛ wɔma wɔn nso role="button".

Cross-browser nkyerɛase

Sɛ́ adeyɛ a eye sen biara no, yɛkamfo kyerɛ kɛse sɛ fa <button>element no di dwuma bere biara a ɛbɛyɛ yiye na ama woahwɛ ahu sɛ cross-browser nkyerɛase no hyia.

Nea ɛka nneɛma foforo ho no, mfomso bi wɔ Firefox <30 mu a ɛmma yentumi nsiesie line-heightof <input>-based buttons no, ɛma ɛne button afoforo a ɛwɔ Firefox so no sorokɔ nhyia pɛpɛɛpɛ.

Nneɛma a wubetumi apaw

Fa button class ahorow a ɛwɔ hɔ no mu biara di dwuma fa yɛ button a wɔayɛ no style ntɛmntɛm.

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

Ntease a wɔde bɛma mfiridwuma ahorow a ɛboa

Sɛ wode kɔla di dwuma de ntease ka bɔtn bi ho a, ɛma wonya sɛnkyerɛnne a wotumi hu nkutoo, a wɔremfa nkɔma wɔn a wɔde mfiridwuma a ɛboa di dwuma – te sɛ screen akenkanfo. Hwɛ sɛ nsɛm a wɔde kɔla no kyerɛ no da adi pefee fi emu nsɛm no ankasa mu (bɔt no mu nsɛm a wotumi hu), anaasɛ wɔde bɛka ho denam akwan foforo so, te sɛ nsɛm foforo a wɔde asie ne .sr-onlyadesuakuw no mu.

Nneɛma akɛse

Fancy akɛse anaa nketewa buttons? Fa .btn-lg, .btn-sm, anaa .btn-xska ho sɛ wopɛ sɛ wunya akɛse afoforo a.

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

Yɛ block level buttons—nea ɛtrɛw ɔwofo bi ntrɛwmu nyinaa mu—denam .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>

Tebea a ɛyɛ nnam

Bɔtɔn ahorow no bɛda adi sɛ woamia (a akyi yɛ tuntum, ɔhye a ɛyɛ tuntum, ne sunsuma a wɔde ahyɛ mu) bere a ɛreyɛ adwuma no. Wɔ <button>element ahorow ho no, wɔyɛ eyi denam :active. Wɔ <a>elements ho no, wɔde .active. Nanso, wubetumi de adi dwuma .activewɔ <button>s so (na wode no aka hoaria-pressed="true" su no aka ho) sɛ ɛho hia sɛ wosan yɛ tebea a ɛyɛ adwuma no wɔ nhyehyɛe kwan so a.

Bɔton no mu ade

Ɛho nhia sɛ wode bɛka ho :activesɛnea ɛyɛ pseudo-class, nanso sɛ ɛho hia sɛ wohyɛ anim koro no ara a, kɔ w’anim na fa ka ho .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>

Ankora element a ɛwɔ hɔ

Fa .activeadesuakuw no ka <a>bɔtn ahorow ho.

Nkitahodi titiriw Link

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

Tebea a wɔadi dɛm

Ma button ahorow no nyɛ te sɛ nea wuntumi nkɔ so denam fade a wode bɛsan ayɛ no so opacity.

Bɔton no mu ade

Fa disabledsu no ka <button>bɔtn ahorow ho.

<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 a ɛne ne ho hyia

Sɛ wode disabledattribute no ka a <button>, Internet Explorer 9 ne nea ɛwɔ ase ha no bɛma nsɛm no ayɛ fitaa a nkyerɛwee-sunsuma a ɛyɛ abofono a yentumi nsiesie.

Ankora element a ɛwɔ hɔ

Fa .disabledadesuakuw no ka <a>bɔtn ahorow ho.

Nkitahodi titiriw Link

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

Yɛde di dwuma .disabledsɛ utility class wɔ ha, a ɛte sɛ common .activeclass no, enti prefix biara ho nhia.

Link dwumadie ho kɔkɔbɔ

Saa adesua yi de di dwuma pointer-events: nonede bɔ mmɔden sɛ ɛbɛma s no link dwumadie no ayɛ adwuma <a>, nanso saa CSS agyapadeɛ no nnya nyɛɛ standardized na ɛnnya mmoa koraa wɔ Opera 18 ne nea ɛwɔ aseɛ ha, anaa Internet Explorer 11. Nea ɛka ho no, mpo wɔ browsers a ɛboa pointer-events: none, keyboard akwantuo no da so ara nnyaa nkɛntɛnsoɔ biara, a ɛkyerɛ sɛ wɔn a wɔde keyboard di dwuma a wɔhunu adeɛ ne wɔn a wɔde mfiridwuma a ɛboa di dwuma no bɛda so ara atumi de saa nkitahodiɛ yi ayɛ adwuma. Enti sɛnea ɛbɛyɛ a wubenya ahobammɔ no, fa JavaScript a wɔahyɛ da ayɛ no di dwuma na ma link ahorow a ɛtete saa no nyɛ adwuma.

Mfonini ahorow a ɛma mmuae

Mfonini ahorow a ɛwɔ Bootstrap 3 mu no betumi ayɛ nea ɛyɛ mmuae-adamfofa denam .img-responsiveadesuakuw no a wɔde bɛka ho no so. Eyi fa max-width: 100%;, height: auto;ne display: block;mfonini no ho sɛnea ɛbɛyɛ a ɛbɛsrɛ fɛfɛɛfɛ akɔ ɔwofo element no so.

Sɛ wode mfonini ahorow a ɛde adesuakuw no di dwuma no mfinimfini a .img-responsive, fa di dwuma .center-blocksen sɛ wode .text-center. Hwɛ aboafoɔ adesua ɔfa no ma nsɛm pii fa .center-blockdwumadie ho.

SVG mfonini ahorow ne IE 8-10

Wɔ Internet Explorer 8-10 mu no, SVG mfonini ahorow a ɛwɔ .img-responsiveno kɛse a ɛnsɛ. Sɛ wopɛ sɛ wusiesie eyi a, fa ka ho width: 100% \9;wɔ baabi a ɛho hia. Bootstrap mfa eyi nni dwuma ankasa efisɛ ɛde nsɛnnennen ba mfonini ahorow afoforo so.

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

Mfonini ahorow

Fa adesua ahorow ka <img>element bi ho na ama ayɛ mmerɛw sɛ wobɛhyehyɛ mfonini ahorow wɔ adwuma biara mu.

Cross-browser a ɛne ne ho hyia

Ma ɛntra w’adwenem sɛ Internet Explorer 8 nni mmoa ma ntwea a ɛyɛ kurukuruwa.

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

Kɔla ahorow a ɛwɔ nsɛm a ɛfa ho

Da ntease adi denam kɔla so denam nsa kakraa bi a wosi so dua mfaso adesua ahorow so. Ebia eyinom nso betumi adi dwuma wɔ link ahorow so na ɛbɛyɛ sum wɔ hover so te sɛ yɛn default link styles no ara pɛ.

Fusce dapibus, tellus ac nnome commodo, tortor mauris nibh.

Nullam id dolor id nibh ultricies kar a wɔde di dwuma wɔ ɔkwan a ɛfata so.

Duis mollis, est a ɛnyɛ commodo luctus, nisi erat porttitor ligula.

Maecenas sed diam eget risus varius blandit tena ase a ɛnyɛ magna.

Etiam porta sem ɔbarima a ɔyɛ ɔbarima a ɔyɛ ɔbarima.

Donec ullamcorper nulla a ɛnyɛ nea ɛyɛ adetɔnfo 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>

Nneɛma pɔtee bi a wodi ho dwuma

Ɛtɔ da bi a, wontumi mfa adesua ahorow a wosi so dua no nni dwuma esiane sɛnea ɔpawfo foforo no yɛ pɔtee nti. Mpɛn pii no, adeyɛ a ɛdɔɔso ne sɛ wobɛkyekyere wo nsɛm no wɔ a <span>ne adesuakuw no mu.

Ntease a wɔde bɛma mfiridwuma ahorow a ɛboa

Kɔla a wɔde di dwuma de ntease ka ho no ma wonya sɛnkyerɛnne a wotumi hu nkutoo, a wɔremfa nkɔma wɔn a wɔde mfiridwuma a ɛboa di dwuma – te sɛ screen akenkanfo. Hwɛ sɛ nsɛm a wɔde kɔla no kyerɛ no da adi pefee fi emu nsɛm no ankasa mu (wɔde kɔla ahorow a ɛwɔ nsɛm no mu no di dwuma de hyɛ ntease a ɛwɔ nkyerɛwee/agyiraehyɛde no mu dedaw no mu den nkutoo), anaasɛ wɔde bɛka ho denam akwan foforo so, te sɛ nsɛm foforo a wɔde asie ne .sr-onlyadesuakuw no mu .

Nsɛm a ɛfa ho a ɛwɔ akyi

Te sɛ nsɛm a ɛfa nsɛm ho kɔla adesua ahorow no, ɛnyɛ den sɛ wode element bi akyi nsɛm besi nsɛm a ɛfa nsɛm ho adesua biara so. Anchor components bɛyɛ sum wɔ hover so, te sɛ text classes no ara pɛ.

Nullam id dolor id nibh ultricies kar a wɔde di dwuma wɔ ɔkwan a ɛfata so.

Duis mollis, est a ɛnyɛ commodo luctus, nisi erat porttitor ligula.

Maecenas sed diam eget risus varius blandit tena ase a ɛnyɛ magna.

Etiam porta sem ɔbarima a ɔyɛ ɔbarima a ɔyɛ ɔbarima.

Donec ullamcorper nulla a ɛnyɛ nea ɛyɛ adetɔnfo 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>

Nneɛma pɔtee bi a wodi ho dwuma

Ɛtɔ da bi a, wontumi mfa nsɛm a ɛfa ho akyi adesua ahorow nni dwuma esiane sɛ ɔpawfo foforo no pɔtee nti. Wɔ tebea horow bi mu no, adwumayɛ a ɛdɔɔso ne sɛ wobɛkyekyere wo element no mu nsɛm no wɔ a <div>ne adesuakuw no mu.

Ntease a wɔde bɛma mfiridwuma ahorow a ɛboa

Sɛnea ɛte wɔ kɔla ahorow a ɛfa nsɛm ho no , hwɛ hu sɛ ntease biara a ɛnam kɔla so da no adi nso wɔ ɔkwan a ɛnyɛ nkyerɛkyerɛmu ara kwa so.

To ahyɛnsode no mu

Fa generic close icon no di dwuma ma pow nsɛm te sɛ modals ne kɔkɔbɔ ahorow.

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

Carets a wɔde di dwuma

Fa carets kyerɛ sɛnea dropdown no yɛ adwuma ne akwankyerɛ. Hyɛ no nsow sɛ default caret no bɛdannan ne ho wɔ dropup menus mu .

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

Nneɛma a ɛsensɛn nsu so ntɛmntɛm

Fa element bi hyɛ benkum anaa nifa so ne adesuakuw bi. !importantno ka ho na ama wɔakwati nsɛm pɔtee a ɛfa nneɛma pɔtee bi ho. Wobetumi nso de adesua ahorow adi dwuma sɛ mixins.

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

Mfinimfini nsɛm a ɛwɔ mu no siw ano

Fa element bi si display: blockne mfinimfini via margin. Ɛwɔ hɔ sɛ mixin ne adesuakuw.

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

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

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

Clearfix a ɛyɛ pefee

Ɛnyɛ den sɛ wobɛtew floats so denam .clearfix ɔwofo element no a wode bɛka ho no so . Ɔde micro clearfix no di dwuma sɛnea Nicolas Gallagher gyee din no. Wobetumi nso de adi dwuma sɛ 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();
}

Nsɛm a ɛwɔ mu a wɔbɛkyerɛ na wɔde asie

Hyɛ element bi ma wɔmfa nkyerɛ anaa wɔmfa nsie ( a screen akenkanfo ka ho ) denam .showne .hiddenadesua ahorow a wɔde di dwuma so. Saa adesuakuw ahorow yi de di dwuma !importantde kwati ntawntawdi a ɛfa nneɛma pɔtee bi ho, te sɛ nea ɛsensɛn nsu so ntɛmntɛm no ara pɛ . Wɔn wɔ hɔ ma block level toggling nkutoo. Wobetumi nso de adi dwuma sɛ mixins.

.hideno wɔ hɔ, nanso ɛnyɛ bere nyinaa na ɛka screen akenkanfo na wɔagyae adwuma no fi v3.0.1. Fa .hiddenanaa .sr-onlymmom di dwuma.

Bio nso, .invisiblewobetumi de adi dwuma de toggle nkutoo visibility of element, a ɛkyerɛ sɛ ne displaynsakrae na element no da so ara betumi aka flow no krataa no.

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

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

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

Screen akenkanfo ne keyboard akwantu mu nsɛm

Fa element bi sie mfiri nyinaa gye sɛ screen akenkanfo a wɔde .sr-only. Ka bom .sr-onlyne .sr-only-focusablefa kyerɛ element no bio bere a ɛde n’adwene asi so (sɛ nhwɛso no, obi a ɔde keyboard nkutoo di dwuma). Ɛho hia ma nneyɛe pa a ɛfa akwan a wɔfa so nya nneɛma ho akyi . Wobetumi nso de adi dwuma sɛ 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();
}

Mfonini a wɔde besi ananmu

Fa .text-hideadesua anaa mixin no boa ma wɔde akyi mfonini si element bi nkyerɛwee mu nsɛm ananmu.

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

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

Sɛ wopɛ sɛ wonya nkɔsoɔ a ɛyɛ ntɛm a ɛyɛ mobile-friendly a, fa saa utility classes yi di dwuma ma kyerɛ na wode nneɛma sie denam mfiri so denam media abisadeɛ so. Afei nso, utility classes a wɔde toggling content bere a wɔatintim no ka ho.

Bɔ mmɔden sɛ wode eyinom bedi dwuma kakraa bi na kwati sɛ wobɛyɛ wɛbsaet koro no ara nkyerɛase ahorow a ɛsono emu biara koraa. Mmom no, fa di dwuma de ka mfiri biara a wɔde bɛkyerɛkyerɛ mu no ho.

Adesua ahorow a ɛwɔ hɔ

Fa adesuakuw a ɛwɔ hɔ no biako anaa nea wɔaka abom di dwuma ma toggling nsɛm wɔ viewport breakpoints so.

	Mfiri nketewa a ɛboro soTɛlɛfon ahorow (<768px) .	Mfiri nketewa a wɔde yɛ adwumaNnuru a wɔde di dwuma (≥768px) .	Mfiri ahorow a ɛwɔ mfinimfiniNneɛma a wɔde di dwuma wɔ pon so (≥992px) .	Mfiri akɛse a wɔde yɛ adwumaNneɛma a wɔde di dwuma wɔ pon so (≥1200px) .
`.visible-xs-*`	Nea wotumi hu	Asuma	Asuma	Asuma
`.visible-sm-*`	Asuma	Nea wotumi hu	Asuma	Asuma
`.visible-md-*`	Asuma	Asuma	Nea wotumi hu	Asuma
`.visible-lg-*`	Asuma	Asuma	Asuma	Nea wotumi hu
`.hidden-xs`	Asuma	Nea wotumi hu	Nea wotumi hu	Nea wotumi hu
`.hidden-sm`	Nea wotumi hu	Asuma	Nea wotumi hu	Nea wotumi hu
`.hidden-md`	Nea wotumi hu	Nea wotumi hu	Asuma	Nea wotumi hu
`.hidden-lg`	Nea wotumi hu	Nea wotumi hu	Nea wotumi hu	Asuma

Ɛde besi v3.2.0 no, .visible-*-*adesua ahorow a ɛwɔ breakpoint biara mu no ba wɔ nsakrae abiɛsa mu, biako ma CSS displayagyapade bo biara a wɔakyerɛw wɔ ase ha no.

Kuw a ɛwɔ adesuakuw ahorow mu	CSS a ɛwɔ hɔ`display`
`.visible-*-block`	`display: block;`
`.visible-*-inline`	`display: inline;`
`.visible-*-inline-block`	`display: inline-block;`

xsEnti, sɛ nhwɛso no, wɔ screen nketewa a ɛboro so ho no, .visible-*-*adesua ahorow a ɛwɔ hɔ no ne: .visible-xs-block, .visible-xs-inline, ne .visible-xs-inline-block.

Classes .visible-xs, .visible-sm, .visible-md, ne .visible-lgnso wɔ hɔ, nanso wɔagyae sɛnea ɛte wɔ v3.2.0 . Wɔbɛyɛ sɛ ɛne , yɛ pɛ .visible-*-block, gye sɛ nsɛm titiriw foforo a ɛfa toggling <table>-related elements ho.

Print adesua ahorow

Te sɛ adesua ahorow a wɔde bua nsɛm daa no, fa eyinom di dwuma ma nsɛm a ɛwɔ mu no sesa ma wotintim.

Adesua ahorow	Browser a wɔde di dwuma	Print
`.visible-print-block` `.visible-print-inline` `.visible-print-inline-block`	Asuma	Nea wotumi hu
`.hidden-print`	Nea wotumi hu	Asuma

Klas no .visible-printnso wɔ hɔ nanso wɔagyae sɛnea ɛte wɔ v3.2.0. Ɛbɛyɛ sɛ ɛne , yɛ pɛ .visible-print-block, gye sɛ nsɛm titiriw foforo a <table>ɛfa nneɛma a ɛfa -ho ho.

Nsɛm a wɔde sɔ hwɛ

Sesa wo browser no kɛse anaa fa gu mfiri ahorow so de sɔ utility class ahorow a ɛyɛ adwuma no hwɛ.

Wotumi hu wɔ...

Green checkmarks kyerɛ sɛ element no da adi wɔ wo mprempren viewport no mu.

Nneɛma nketenkete a ɛboro so ✔ Wohu wɔ x-small so

Ketewa ✔ Wohu wɔ nketewa so

Kwan ✔ Wohu wɔ medium so

Kakraa ✔ Wohu wɔ kɛse so

Nketewa ne nketewa a ɛboro so ✔ Wohu wɔ x-ketewa ne nketewa so

Mfinimfini ne akɛse ✔ Wohu wɔ mfinimfini ne akɛse so

Extra nketewa ne mfinimfini ✔ Wohu wɔ x-small ne medium so

Nketewa ne akɛse ✔ Wohu wɔ nketewa ne akɛse so

Extra nketewa ne akɛse ✔ Wohu wɔ x-ketewa ne kɛse so

Nketewa ne mfinimfini ✔ Wohu wɔ nketewa ne mfinimfini so

Wɔde asie wɔ...

Ɛha yi, green checkmarks nso kyerɛ sɛ element no ahintaw wɔ wo mprempren viewport no mu.

Nneɛma nketenkete a ɛboro so ✔ Wɔde ahintaw wɔ x-ketewa so

Ketewa ✔ Wɔde asie wɔ nketewa so

Kwan ✔ Wɔde asie wɔ medium so

Kakraa ✔ Wɔde ahintaw wɔ kɛse so

Nketewa ne nketewa a ɛboro so ✔ Wɔde ahintaw wɔ x-ketewa ne nketewa so

Mfinimfini ne akɛse ✔ Wɔde asie wɔ mfinimfini ne akɛse so

Extra nketewa ne mfinimfini ✔ Wɔde ahintaw wɔ x-ketewa ne mfinimfini so

Nketewa ne akɛse ✔ Wɔde asie nketewa ne akɛse so

Extra nketewa ne akɛse ✔ Wɔde ahintaw wɔ x-ketewa ne kɛse so

Nketewa ne mfinimfini ✔ Wɔde asie wɔ nketewa ne akɛse so

Bootstrap no CSS no wɔasi wɔ Less, preprocessor a ɛwɔ dwumadie foforɔ te sɛ variables, mixins, ne dwumadie a wɔde boaboa CSS ano. Wɔn a wɔrehwehwɛ sɛ wɔde source Less fael ahorow no bedi dwuma sen sɛ yɛde yɛn CSS fael ahorow a wɔaboaboa ano no bedi dwuma no betumi de variables ne mixins pii a yɛde di dwuma wɔ framework no nyinaa mu no adi dwuma.

Grid variables ne mixins no wɔakata so wɔ Grid nhyehyɛe ɔfa no mu .

Bootstrap a wɔreboaboa ano

Anyɛ yiye koraa no, wobetumi de Bootstrap adi dwuma wɔ akwan abien so: CSS a wɔaboaboa ano no anaasɛ wɔde fibea Less fael ahorow no. Sɛ wopɛ sɛ woboaboa Less fael ahorow no ano a, hwɛ Getting Started ɔfã no ma sɛnea wobɛhyehyɛ wo nkɔso tebea no ma ayɛ ahyɛde ahorow a ɛho hia no.

Ebia nnwinnade a wɔde boaboa nneɛma ano a ɛto so abiɛsa ne Bootstrap bɛyɛ adwuma, nanso yɛn kuw titiriw no ntumi mmoa.

Nneɛma a Ɛsakra

Wɔde nsakraeɛ di dwuma wɔ adwuma no nyinaa mu sɛ ɔkwan a wɔfa so de mfinimfini na wɔkyɛ botaeɛ a wɔtaa de di dwuma te sɛ kɔla, ntam kwan, anaa font stacks. Sɛ wopɛ sɛ wuhu sɛnea wobɛpaapae mu koraa a, yɛsrɛ wo hwɛ Customizer .

Kɔla ahorow

Ɛnyɛ den sɛ wode kɔla ahorow abien bedi dwuma: grayscale ne semantic. Grayscale kɔla ma wonya kwan ntɛm kɔ tuntum shades a wɔtaa de di dwuma bere a semantic ka kɔla ahorow a wɔde ama nsɛm a ɛfa ho a ntease wom.

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

Fa saa kɔla nsakrae yi mu biara di dwuma sɛnea ɛte anaa san fa ma nsakrae a ntease wom kɛse ma wo dwumadi no.

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

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

Scaffolding a wɔde yɛ nneɛma

Nsa kakraa bi a ɛsakra ma wo site no nnompe mu nneɛma atitiriw a wobɛsakra no ntɛmntɛm.

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

Nkitahodi ahorow

Easily style wo links ne kɔla a ɛfata a ɛwɔ bo biako pɛ.

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

Hyɛ no nsow sɛ @link-hover-colorde function, adwinnade foforo a ɛyɛ hu a efi Less, di dwuma de yɛ hover kɔla a ɛfata no ankasa. Wubetumi de darken, lighten, saturate, ne desaturate.

Typography a wɔde kyerɛw nsɛm

Fa nsakrae kakraa bi a ɛyɛ ntɛm hyehyɛ wo typeface, text size, leading, ne nea ɛkeka ho no ntɛm. Bootstrap de eyinom nso di dwuma de ma typographic mixins a ɛnyɛ den.

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

Nsɛnkyerɛnnede ahorow

Nsakrae abien a ɛyɛ ntɛm a wode bɛsesa beae ne fael din a wo ahyɛnsode ahorow no wɔ.

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

Nneɛma a ɛwom

Nneɛma a ɛwɔ Bootstrap no nyinaa mu no de default variables binom di dwuma de hyehyɛ common values. Nea wɔtaa de di dwuma no ni.

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

Ɔtɔnfo mixins

Vendor mixins yɛ mixins a ɛbɛboa ma wɔaboa browser ahorow pii denam vendor prefixes a ɛfa ho nyinaa a wode bɛka wo CSS a woaboaboa ano no ho no so.

Adaka a wɔde yɛ kɛse

Reset wo components' box model no ne mixin biako. Sɛ wopɛ nsɛm a ɛfa ho a, hwɛ asɛm a ɛboa yi a efi Mozilla .

Mixin no yɛ deprecated fi v3.2.0, a wɔde Autoprefixer aba. Sɛnea ɛbɛyɛ a wobɛkora akyi-nhyia so no, Bootstrap bɛkɔ so de mixin no adi dwuma wɔ mu kosi sɛ Bootstrap v4.

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

Ntwea so a wɔayɛ no kurukuruwa

Ɛnnɛ nnɛyi browser ahorow nyinaa boa agyapade a ɛnyɛ prefixed border-radiusno. Sɛnea ɛte no, mixin biara nni hɔ .border-radius(), nanso Bootstrap no de akwan tiawa a wɔfa so yɛ ntwea abien a ɛyɛ kurukuruwa ntɛmntɛm wɔ ade bi fã pɔtee bi no ka ho.

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

Adaka (Drop) sunsuma ahorow

Sɛ w’atiefo a wode w’ani asi wɔn so no de browser ne mfiri a aba foforo na ɛsen biara redi dwuma a, hwɛ hu sɛ wode box-shadowagyapade no bedi dwuma wɔ n’ankasa mu ara kwa. Sɛ wuhia mmoa ma Android (pre-v4) ne iOS mfiri dedaw (pre-iOS 5) a, fa mixin a wɔagyae no di dwuma fa fa prefix a wɔhwehwɛ no-webkit .

Mixin no yɛ deprecated sɛ of v3.1.0, efisɛ Bootstrap ntumi mmoa platforms a ne bere atwam a ɛnboa standard property no wɔ aban kwan so. Sɛnea ɛbɛyɛ a wobɛkora akyi-nhyia so no, Bootstrap bɛkɔ so de mixin no adi dwuma wɔ mu kosi sɛ Bootstrap v4.

Hwɛ hu sɛ wode rgba()kɔla bedi dwuma wɔ wo adaka sunsuma mu sɛnea ɛbɛyɛ a ɛne akyi mfonini ahorow bɛfrafra yiye sɛnea wubetumi.

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

Nsakrae ahorow

Mixins pii ma ɛyɛ mmerɛw. Fa biako hyehyɛ nsakrae ho nsɛm nyinaa, anaa kyerɛ bere tenten ne bere tenten a ɛyɛ soronko sɛnea ɛho hia.

Wɔagyae mixins no fi v3.2.0 , a wɔde Autoprefixer aba. Sɛnea ɛbɛyɛ a wobɛkora backwards-compatibility so no, Bootstrap bɛkɔ so de mixins no adi dwuma wɔ mu kosi sɛ 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;
}

Nsakrae a ɛba

Di akɔneaba, nsenia, kyerɛ ase (tu), anaa skew ade biara.

Wɔagyae mixins no fi v3.2.0 , a wɔde Autoprefixer aba. Sɛnea ɛbɛyɛ a wobɛkora backwards-compatibility so no, Bootstrap bɛkɔ so de mixins no adi dwuma wɔ mu kosi sɛ Bootstrap v4.

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

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

Animde ahorow

Mixin baako a wɔde di dwuma wɔ CSS3 animation agyapadeɛ nyinaa mu wɔ mpaemuka baako mu ne mixin foforɔ ma ankorankoro agyapadeɛ.

Wɔagyae mixins no fi v3.2.0 , a wɔde Autoprefixer aba. Sɛnea ɛbɛyɛ a wobɛkora backwards-compatibility so no, Bootstrap bɛkɔ so de mixins no adi dwuma wɔ mu kosi sɛ Bootstrap v4.

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

Opacity a ɛwɔ hɔ

Set opacity ma browsers nyinaa na fa filterfallback ma IE8.

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

Beae a wɔde hyɛ mu nsɛm

Fa nsɛm a ɛfa ho ma fom sohwɛ ahorow wɔ afuw biara mu.

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

Nsɛmma nhoma ahorow

Fa CSS so yɛ columns wɔ element biako mu.

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

Nneɛma a ɛkɔ soro

Ɛnyɛ den sɛ wobɛdan kɔla abien biara ayɛ no akyi kwan a ɛkɔ soro. Nya nkɔso kɛse na fa akwankyerɛ bi si hɔ, fa kɔla abiɛsa di dwuma, anaa fa radial gradient di dwuma. Sɛ wode mixin biako di dwuma a, wunya prefixed syntaxes a wubehia nyinaa.

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

Wubetumi nso akyerɛ anim a ɛwɔ kɔla abien a ɛyɛ gyinapɛn, linear gradient:

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

Sɛ wuhia barber-stripe style gradient a, ɛno nso yɛ mmerɛw. Kyerɛ kɔla biako kɛkɛ na yɛbɛkata translucent white stripe so.

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

Fa ante no kɔ soro na fa kɔla abiɛsa di dwuma mmom. Fa kɔla a edi kan, kɔla a ɛto so abien, kɔla a ɛto so abien no kɔla gyinabea (ɔha biara mu bo te sɛ 25%), ne kɔla a ɛto so abiɛsa no hyehyɛ saa mixins yi:

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

Ti a ɛwɔ soro! Sɛ ɛho hia sɛ wuyi gradient bi fi hɔ da bi a, hwɛ hu sɛ wubeyi IE-specific biara filtera ebia wode aka ho no afi hɔ. Wubetumi ayɛ saa denam .reset-filter()mixin no a wode bedi dwuma wɔ nkyɛnkyɛn no so background-image: none;.

Nneɛma a wɔde yɛ mixins

Utility mixins yɛ mixins a ɛka CSS agyapade a anka ɛne no nni abusuabɔ bom de du botae anaa adwuma pɔtee bi ho.

Clearfix a ɛyɛ pefee

Wo werɛ mfi sɛ wode bɛka class="clearfix"element biara ho na mmom fa .clearfix()mixin no ka ho wɔ baabi a ɛfata. Ɔde micro clearfix a efi Nicolas Gallagher hɔ no di dwuma .

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

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

Horizontal a wɔde hyɛ mfinimfini

Fa element biara a ɛwɔ n’awofo mu no hyɛ mfinimfini ntɛm ara. Ɛhwehwɛ widthanaasɛ max-widthɛsɛ sɛ wɔde si hɔ.

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

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

Sizing aboafo

Kyerɛ ade bi nsusuwii a ɛnyɛ den.

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

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

Textareas a wotumi sesa ne kɛse

Ɛnyɛ den sɛ wobɛhyehyɛ resize options no ama textarea biara, anaa element foforo biara. Defaults kɔ browser suban a ɛfata so ( both).

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

Nsɛm a wɔatwa no tiaa

Fa ellipsis twa nsɛm no mu ntɛmntɛm denam mixin biako so. Ɛhwehwɛ sɛ element yɛ blockanaasɛ inline-blocklevel.

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

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

Retina mfonini ahorow

Kyerɛ mfonini akwan abien ne @1x mfonini nsusuwii, na Bootstrap bɛma @2x media asɛmmisa. Sɛ wowɔ mfonini pii a wobɛsom a, susuw ho sɛ wode nsa bɛkyerɛw wo retina mfonini CSS wɔ media asɛmmisa biako mu.

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

Bere a wɔasisi Bootstrap wɔ Less so no, ɛsan nso wɔ Sass hyɛn gyinabea a ɛyɛ aban de . Yɛhwɛ so wɔ GitHub adekorabea soronko bi mu na yɛde nsakrae script di nsɛm foforo ho dwuma.

Nea ɛka ho

Esiane sɛ Sass hyɛn gyinabea no wɔ repo soronko na ɛsom atiefo a ɛsono wɔn kakra nti, adwuma no mu nsɛm no yɛ soronko kɛse wɔ Bootstrap adwuma titiriw no ho. Wei hwɛ hu sɛ Sass hyɛn gyinabea no ne nhyehyɛe ahorow pii a egyina Sass so no hyia sɛnea ɛbɛyɛ yiye biara.

Kwan	Nkyerɛmu
`lib/`	Ruby gem code (Sass nhyehyɛe, Rails ne Compass nkabom) .
`tasks/`	Converter scripts (a ɛdannan upstream Less kɔ Sass) .
`test/`	Nsɔhwɛ ahorow a wɔde yɛ nneɛma a wɔaboaboa ano
`templates/`	Kɔmpase a wɔde ahyɛ mu no manifest
`vendor/assets/`	Sass, JavaScript, ne font fael ahorow
`Rakefile`	Nnwuma a ɛwɔ mu, te sɛ rake ne convert

Kɔ Sass port no GitHub adekorabea hɔ kɔhwɛ saa fael ahorow yi a ɛreyɛ adwuma.

Nneɛma a wɔde si hɔ

Sɛ wopɛ nsɛm fa sɛnea wobɛ instɔl na wode Bootstrap for Sass adi dwuma ho a, hwɛ GitHub adekorabea readme . Ɛyɛ fibea a ɛyɛ foforo sen biara na ɛde nsɛm a wɔde bedi dwuma wɔ Rails, Compass, ne Sass nnwuma a ɛwɔ hɔ no ka ho.

Bootstrap a wɔde yɛ Sass

CSS a ɛwɔ hɔ

Nsɛm a Wɔaka abom

HTML5 doctype a ɛwɔ hɔ

Mobile a edi kan

Typography ne nkitahodi ahorow

Normalize.css no yɛ nea ɛfata

Nneɛma a wɔde gu mu

Grid nhyehyɛe

Nnianimu

Nsɛm ho amanneɛbɔfo nsɛmmisa

Grid a wobetumi apaw

Nhwɛso: Stacked-to-horizontal

Nhwɛso: Nsu a wɔde gu mu

Nhwɛso: Mobile ne desktop

Nhwɛso: Mobile, tablɛt, desktop

Nhwɛso: Kɔla a wɔde kyekyere nneɛma ho

Mmuae column resets

Offsetting nkyerɛwde ahorow

Nesting columns a wɔde hyɛ mu

Kɔla a wɔkra no

Mixins ne nneɛma a ɛsakra no kakraa bi

Nneɛma a Ɛsakra

Nneɛma a wɔde afrafra

Nhwɛso a wɔde di dwuma

Typography a wɔde kyerɛw nsɛm

Nsɛmti ahorow

h1. Bootstrap asɛmti no

h2. Bootstrap asɛmti no

h3. Bootstrap asɛmti no

h4. Bootstrap asɛmti no

h5. Bootstrap asɛmti no

h6. Bootstrap asɛmti no

h1. Bootstrap asɛmti Nsɛm a ɛto so abien

h2. Bootstrap asɛmti Nsɛm a ɛto so abien

h3. Bootstrap asɛmti Nsɛm a ɛto so abien

h4. Bootstrap asɛmti Nsɛm a ɛto so abien

h5. Bootstrap asɛmti Nsɛm a ɛto so abien

h6. Bootstrap asɛmti Nsɛm a ɛto so abien

Nipadua no ho mfonini

Lead nipadua no mfonini

Wɔde Less na esii

Nsɛm a ɛwɔ nkyerɛwde mu no mu nneɛma

Nkyerɛwee a wɔahyɛ no agyirae

Nsɛm a wɔapopa

Strikethrough nsɛm a wɔakyerɛw so

Nsɛm a wɔde ahyɛ mu

Nsɛm a wɔatwe adwene asi so

Nkyerɛwee nketenkete

Akokoɔduro

Nkyerɛwee a wɔde nkyerɛwde a ɛyɛ mmerɛw ayɛ

Nneɛma a wɔde sesa nneɛma

Alignment adesua ahorow

Nsakrae adesua ahorow

Nsɛmfua a wɔatwa no tiaa

Nsɛmfua titiriw a wɔatwa no tiaa

Mfiase a wɔde di dwuma

Address ahorow

Nsɛm a wɔde siw ano

Default a wɔde ahyɛ mu

Blockquote a wobɛpaw no

Fibea bi din a wɔbɛbɔ

Nneɛma foforo a wɔde kyerɛ

Nsɛm a wɔahyehyɛ

Wɔnhyɛ da

Wɔahyɛ sɛ

Wɔannwene no

Inline no mu

Nkyerɛmu

Horizontal nkyerɛkyerɛmu

Ɔkwan a wɔfa so twa ade

Mmarahyɛ Bagua

Inline no mu

Ɔdefo no nsɛm a wɔde hyɛ mu

Mfitiaseɛ block

Nneɛma a Ɛsakra

Nhwɛsode a efi mu ba

Nnwinnade ahorow

Nhwɛso titiriw

Ntrɛwmu a ɛwɔ nsensanee

Cross-browser a ɛne ne ho hyia

Demo `:focus`tebea no

Caveat fa link dwumadie ho`<a>`

Ahyɛnsode ahorow a wubetumi apaw a wɔde `.sr-only`nkyerɛwde ahorow ahintaw wom