Thola ukwehla kwezingcezu ezibalulekile zengqalasizinda ye-Bootstrap, okuhlanganisa nendlela yethu yokuthuthukiswa kwewebhu okungcono, okusheshayo, okuqinile.

HTML5 idokhumenti

I-Bootstrap isebenzisa izici ezithile ze-HTML kanye nezakhiwo ze-CSS ezidinga ukusetshenziswa kwe-HTML5 doctype. Ifake ekuqaleni kwawo wonke amaphrojekthi akho.

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

Iselula kuqala

Nge-Bootstrap 2, sengeze izitayela ezivumelana neselula ezingakhethwa kuzici ezibalulekile zohlaka. Nge-Bootstrap 3, sibhale kabusha iphrojekthi ukuze ihambisane neselula kusukela ekuqaleni. Esikhundleni sokwengeza izitayela zeselula ozikhethela zona, zibhakwa khona phakathi. Eqinisweni, i-Bootstrap iselula kuqala . Izitayela zokuqala zamaselula zingatholakala kuwo wonke umtapo wolwazi esikhundleni samafayela ahlukene.

Ukuqinisekisa ukunikezela okulungile nokusondeza ngokuthinta, engeza i-meta tag yembobo yokubuka ku- <head>.

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

Ungakhubaza amandla okusondeza kumadivayisi eselula ngokwengeza user-scalable=noku-meta tag yembobo yokubuka. Lokhu kukhubaza ukusondeza, okusho ukuthi abasebenzisi bayakwazi ukuskrola kuphela, futhi kuholela ekutheni isayithi lakho lizizwe lifana nohlelo lokusebenza lwendabuko. Sekukonke, asikuncomi lokhu kuwo wonke amasayithi, ngakho-ke qaphela!

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

Ukuthayipha kanye nezixhumanisi

I-Bootstrap isetha isibonisi somhlaba jikelele esiyisisekelo, i-typography, nezitayela zokuxhumanisa. Ngokukhethekile, thina:

Setha background-color: #fff;kubody
Sebenzisa @font-family-base, @font-size-base, kanye @line-height-basenezibaluli njengesisekelo sethu se-typographic
Setha umbala wesixhumanisi somhlaba wonke ngokusebenzisa @link-colorfuthi usebenzise isixhumanisi esidwebelayo kuphela:hover

Lezi zitayela zingatholakala ngaphakathi scaffolding.less.

Normalize.css

Ukuze uthole ukunikezwa okuthuthukisiwe kwesiphequluli, sisebenzisa i - Normalize.css , iphrojekthi ka- Nicolas Gallagher kanye no- Jonathan Neal .

Izitsha

I-Bootstrap idinga into equkethe ukusonga okuqukethwe kwesayithi nokufaka isistimu yethu yegridi. Ungakhetha esinye seziqukathi ezimbili ongazisebenzisa kumaphrojekthi akho. Qaphela ukuthi, ngenxa paddingnokunye okwengeziwe, asikho isiqukathi esidleka.

Sebenzisa .containerokwesitsha esisabelayo esinobubanzi obugxilile.

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

Sebenzisa .container-fluidisiqukathi esinobubanzi obugcwele, esihlanganisa bonke ububanzi bembobo yokubuka yakho.

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

I-Bootstrap ihlanganisa isistimu ephendulayo, yeselula yokuqala ewuketshezi ekala ngokufanelekile kufika kumakholomu angu-12 njengoba idivayisi noma usayizi wembobo yokubuka ukhula. Kuhlanganisa amakilasi achazwe ngaphambilini ukuze uthole izinketho ezilula zesakhiwo, kanye nezingxube ezinamandla zokukhiqiza izakhiwo ze-semantic ezengeziwe .

Isingeniso

Amasistimu egridi asetshenziselwa ukudala izakhiwo zekhasi ngochungechunge lwemigqa namakholomu agcina okuqukethwe kwakho. Nansi indlela isistimu yegridi ye-Bootstrap esebenza ngayo:

Imigqa kufanele ibekwe ngaphakathi .container(ububanzi obulungisiwe) noma .container-fluid(ububanzi obugcwele) ukuze kumiswe ngendlela efanele kanye nokugxunyekwa.
Sebenzisa imigqa ukuze udale amaqembu avundlile amakholomu.
Okuqukethwe kufanele kufakwe phakathi kwamakholomu, futhi amakholomu kuphela angaba izingane zemigqa.
Amakilasi egridi achazwe ngaphambilini afana .rowfuthi .col-xs-4ayatholakala ukuze kwenziwe ngokushesha izakhiwo zegridi. Amamiksi amancane nawo angasetshenziswa ekwakhiweni okwengeziwe kwe-semantic.
Amakholomu akha ama-gutters (izikhala phakathi kokuqukethwe kwekholomu) nge- padding. Lokho kuphedi kususwa emigqeni yekholomu yokuqala neyokugcina kusetshenziswa imajini eyinegethivu ku- .rows.
Umkhawulo ongemuhle yingakho izibonelo ezingezansi zingaphandle. Ukwenzela ukuthi okuqukethwe ngaphakathi kwamakholomu egridi kuhlanganiswe nokuqukethwe okungeyona igridi.
Amakholomu egridi akhiwa ngokucacisa inani lamakholomu ayishumi nambili atholakalayo ofisa ukuwahlanganisa. Isibonelo, amakholomu amathathu alinganayo angasebenzisa ezintathu .col-xs-4.
Uma amakholomu angaphezu kuka-12 ebekwe phakathi komugqa owodwa, iqembu ngalinye lamakholomu engeziwe, njengeyunithi eyodwa, lizogoqa emugqeni omusha.
Amakilasi egridi asebenza kumadivayisi anobubanzi besikrini obukhulu noma obulingana nosayizi we-breakpoint, futhi akhiphe amakilasi egridi aqondiswe kumadivayisi amancane. Ngakho-ke, isb ukusebenzisa noma isiphi .col-md-*isigaba kusici ngeke kuthinte kuphela isitayela saso kumadivayisi aphakathi nendawo kodwa nakumadivayisi amakhulu uma .col-lg-*ikilasi lingekho.

Bheka izibonelo zokusebenzisa lezi zimiso kukhodi yakho.

Imibuzo yemidiya

Sisebenzisa imibuzo yemidiya elandelayo kumafayela ethu Amancane ukuze sakhe izindawo zokunqamuka eziyinhloko kusistimu yethu yegridi.

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

Kwesinye isikhathi sinweba kule mibuzo yemidiya ukuze ifake i- max-widthCSS yokukhawulela kusethi emincane yamadivayisi.

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

Izinketho zegridi

Bona ukuthi izici zesistimu yegridi ye-Bootstrap zisebenza kanjani kuwo wonke amadivayisi anetafula eliwusizo.

	Amadivayisi amancane angeziwe Amafoni (<768px)	Amathebulethi Amadivayisi Amancane (≥768px)	Amadeskithophu wedivayisi amaphakathi (≥992px)	Amadeskithophu amakhulu wamadivayisi (≥1200px)
Ukuziphatha kwegridi	Ivundlile ngaso sonke isikhathi	Igoqwe ukuze kuqale, evundlile ngenhla kwama-breakpoint
Ububanzi besiqukathi	Lutho (okuzenzakalelayo)	750px	970px	1170px
Isiqalo sekilasi	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`
# wamakholomu	12
Ububanzi bekholomu	Okuzenzakalelayo	~62px	~81px	~97px
Ububanzi be-Gutter	30px (15px ohlangothini ngalunye lwekholomu)
I-Nestable	Yebo
Ama-Offsets	Yebo
Ukuhleleka kwekholomu	Yebo

Isibonelo: Kustakiwe ukuya kokuvundlile

Usebenzisa isethi eyodwa .col-md-*yamakilasi egridi, ungakha isistimu yegridi eyisisekelo eqala ngokunqwabelana kumadivayisi eselula nakumadivayisi ethebhulethi (ububanzi obuncane kakhulu ukuya kwabancane) ngaphambi kokuba ibe evundlile kumadivayisi edeskithophu (amaphakathi). Beka amakholomu egridi kunoma iyiphi .row.

.col-md-1

.col-md-8

.col-md-4

.col-md-6

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

Isibonelo: Isitsha samanzi

Guqula noma yisiphi isakhiwo segridi enobubanzi obugxilile sibe isakhiwo esinobubanzi obugcwele ngokushintsha ingaphandle lakho .containerlibe yi- .container-fluid.

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

Isibonelo: Iselula nedeskithophu

Awufuni ukuthi amakholomu akho avele anqwabelene kumadivayisi amancane? Sebenzisa amakilasi egridi yedivayisi encane namaphakathi ngokwengeza .col-xs-* .col-md-*kumakholomu akho. Bheka isibonelo esingezansi ukuze uthole umbono ongcono wokuthi konke kusebenza kanjani.

.col-xs-12 .col-md-8

.col-xs-6 .col-md-4

.col-xs-6

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

Isibonelo: Iselula, ithebhulethi, ideskithophu

Yakha esibonelweni sangaphambilini ngokudala izakhiwo eziguqukayo nezinamandla kakhulu .col-sm-*ngamakilasi ethebhulethi.

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

.col-xs-6 .col-md-4

.col-xs-6 .col-sm-4

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

Isibonelo: Ukugoqa ikholomu

Uma amakholomu angaphezu kuka-12 ebekwe phakathi komugqa owodwa, iqembu ngalinye lamakholomu engeziwe, njengeyunithi eyodwa, lizogoqa emugqeni omusha.

.col-xs-9

.col-xs-4
Kusukela ku-9 + 4 = 13 > 12, le div enamakholomu angu-4 ububanzi igoqwa emugqeni omusha njengeyunithi eyodwa ehlangene.

.col-xs-6
Amakholomu alandelayo ayaqhubeka emugqeni omusha.

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

Ikholomu esabelayo ihlelwa kabusha

Njengoba kunezigaba ezine zamagridi ezitholakalayo uzobhekana nezinkinga lapho, ezindaweni ezithile zokunqamuka, amakholomu akho angacaci kahle njengoba eyodwa iyinde kunenye. Ukuze ulungise lokho, sebenzisa inhlanganisela ye-a .clearfixkanye nezigaba zethu zosizo eziphendulayo .

.col-xs-6 .col-sm-3
Shintsha usayizi wembobo yakho yokubuka noma uhlole efonini yakho isibonelo.

.col-xs-6 .col-sm-3

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

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

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

Ngokungeziwe ekususeni amakholomu ezindaweni ezisabelayo, ungase udinge ukusetha kabusha ama-offset, ama-push, noma ama-donsa . Bona lokhu kusebenza esibonelweni segridi .

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

Susa ama-gutters

Susa ama-gutters emgqeni futhi amakholomu ayo .row-no-guttersnekilasi.

.col-xs-12 .col-md-8

.col-xs-6 .col-md-4

.col-xs-6

<div class="row row-no-gutters">
  <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>
<div class="row row-no-gutters">
  <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>
<div class="row row-no-gutters">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>

Ukusetha amakholomu

Hambisa amakholomu kwesokudla usebenzisa .col-md-offset-*amakilasi. Lezi zigaba zandisa umkhawulo wesokunxele wekholomu *ngamakholomu. Isibonelo, .col-md-offset-4ihamba .col-md-4phezu kwamakholomu amane.

.col-md-4

.col-md-4 .col-md-offset-4

.col-md-3 .col-md-offset-3

.col-md-6 .col-md-offset-3

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

Ungaphinda ubhale ngaphezulu ama-offsets asuka kuma-grid tiers aphansi .col-*-offset-0ngamakilasi.

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

Amakholomu enza isidleke

Ukuze uhlanganise okuqukethwe kwakho ngegridi ezenzakalelayo, engeza entsha .rownesethi .col-sm-*yamakholomu ngaphakathi kwekholomu ekhona .col-sm-*. Imigqa efakwe kusidleke kufanele ifake isethi yamakholomu ahlanganisa kufika ku-12 noma ngaphansi (akudingekile ukuthi usebenzise wonke amakholomu angu-12 atholakalayo).

Izinga 1: .col-sm-9

Izinga 2: .col-xs-8 .col-sm-6

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

Ukuhleleka kwekholomu

Shintsha kalula ukuhleleka kwamakholomu ethu egridi akhelwe ngaphakathi .col-md-push-*ngamakilasi .col-md-pull-*okulungisa.

.col-md-9 .col-md-push-3

.col-md-3 .col-md-donsa-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>

Izingxube ezincane neziguquguqukayo

Ngokungeziwe kumakilasi egridi akhiwe kusengaphambili ezakhiwo ezisheshayo, i-Bootstrap ihlanganisa okuguquguqukayo Okuncane nezingxube zokukhiqiza ngokushesha izakhiwo zakho ezilula, ze-semantic.

Okuguquguqukayo

Okuguquguqukayo kunquma inani lamakholomu, ububanzi be-gutter, kanye nendawo yombuzo wemidiya okufanele kuqalwe kuyo amakholomu antantayo. Sisebenzisa lezi ukuze sikhiqize amakilasi egridi achazwe ngaphambilini abhalwe ngenhla, kanye nezingxube zangokwezifiso ezibalwe ngezansi.

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

Imiksi

Imiksi isetshenziswa ngokuhambisana neziguquko zegridi ukuze kukhiqizwe i-CSS ye-semantic yamakholomu egridi ngayinye.

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

Ukusetshenziswa kwesibonelo

Ungakwazi ukuguqula okuguquguqukayo kube ngamavelu akho angokwezifiso, noma usebenzise nje ama-mixins ngamavelu awo azenzakalelayo. Nasi isibonelo sokusebenzisa izilungiselelo ezizenzakalelayo ukuze udale isakhiwo samakholomu amabili esinegebe phakathi.

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

Izihloko

Zonke izihloko ze-HTML, <h1>ukuya ku- <h6>, ziyatholakala. .h1ngamakilasi .h6nawo ayatholakala, uma ufuna ukufanisa isitayela sefonti yesihloko kodwa usafuna ukuthi umbhalo wakho uboniswe emgqeni.

h1. Isihloko se-Bootstrap	I-Semibold 36px
h2. Isihloko se-Bootstrap	I-Semibold 30px
h3. Isihloko se-Bootstrap	I-Semibold 24px
h4. Isihloko se-Bootstrap	I-Semibold 18px
h5. Isihloko se-Bootstrap	I-Semibold 14px
h6. Isihloko se-Bootstrap	I-semibold engu-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>

Dala umbhalo olula, wesibili kunoma yisiphi isihloko onomaka ojwayelekile <small>noma .smallikilasi.

h1. Isihloko se-Bootstrap Umbhalo wesibili

h2. Isihloko se-Bootstrap Umbhalo wesibili

h3. Isihloko se-Bootstrap Umbhalo wesibili

h4. Isihloko se-Bootstrap Umbhalo wesibili

h5. Isihloko se-Bootstrap Umbhalo wesibili

h6. Isihloko se-Bootstrap Umbhalo wesibili

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

Ikhophi yomzimba

Okuzenzakalelayo komhlaba wonke kwe-Bootstrap font-sizekungu- 14px , ene line-height- 1.428 . Lokhu kusetshenziswe kuzo <body>zonke izigaba. Ngaphezu kwalokho, <p>(izigaba) zithola imajini engezansi yohhafu ubude bomugqa womugqa ohlanganisiwe (10px ngokuzenzakalelayo).

I-Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. I-Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. I-Donec ullamcorper nulla non metus auctor fringilla.

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

<p>...</p>

Ikhophi yomzimba oholayo

Yenza isigaba sigqame ngokungeza .lead.

I-Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. I-Duis mollis, ayiyona i-commodo luctus.

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

Yakhiwe Ngokuncane

Isilinganiso se-typographic sisekelwe kokuhlukahluka okubili Okuncane kokuguquguqukayo.kancane : @font-size-basekanye @line-height-base. Esokuqala siwusayizi wefonti eyisisekelo osetshenziswa kuyo yonke indawo kanti eyesibili ubude bomugqa oyisisekelo. Sisebenzisa lezo ziguquguqukayo kanye nezibalo ezithile ezilula ukuze sakhe amamajini, ama-paddings, nobude bomugqa balo lonke uhlobo lwethu nokunye. Enze ngendlela oyifisayo kanye nezimo ze-Bootstrap.

Izakhi zombhalo osemgqeni

Umbhalo omakiwe

Ukuze ugqamise ukugijima kombhalo ngenxa yokuhambisana kwawo komunye umongo, sebenzisa <mark>umaka.

Ungasebenzisa umaki wokumaka ukuzegqamisaumbhalo.

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

Umbhalo osusiwe

Ukuze ubonise amabhlogo ombhalo asusiwe sebenzisa <del>ithegi.

~~Lo mugqa wombhalo uhloselwe ukuthathwa njengombhalo osusiwe.~~

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

Umbhalo we-Strikethrough

Ukuze ubonise amabhlogo ombhalo angasabalulekile sebenzisa <s>ithegi.

~~Lo mugqa wombhalo uhloselwe ukuthi uthathwe njengongasanembile.~~

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

Umbhalo ofakiwe

Ukuze ubonise izengezo kudokhumenti sebenzisa <ins>ithegi.

Lo mugqa wombhalo uhloselwe ukuthi uthathwe njengesengezo kudokhumenti.

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

Umbhalo odwetshelwe

Ukudwebela umbhalo sebenzisa <u>ithegi.

Lo mugqa wombhalo uzosebenza njengokudwetshelwe

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

Sebenzisa omaka bokugcizelela be-HTML abazenzakalelayo abanezitayela ezingasindi.

Umbhalo omncane

Ukuze ungagcizeleli emgqeni noma emabhuloki wombhalo, sebenzisa <small>umaka ukuze usethe umbhalo kusayizi ongu-85% womzali. Ama-elementi esihloko athola font-sizeokwawo kuma-elementi afakwe isidleke <small>.

Ungasebenzisa okunye okusemgqeni .smallesikhundleni sanoma iyiphi <small>.

Lo mugqa wombhalo uhloselwe ukuthathwa njengokuphrinta kahle.

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

Okugqamile

Ukuze ugcizelele amazwibela ombhalo onesisindo sefonti esindayo.

Amazwibela alandelayo ombhalo ahunyushwa njengombhalo ogqamile .

<strong>rendered as bold text</strong>

Omalukeke

Ukuze ugcizelele amazwibela ombhalo omalukeke.

Amazwibela alandelayo ombhalo ahunyushwa njengombhalo omalukeke .

<em>rendered as italicized text</em>

Ezinye izici

Zizwe ukhululekile ukusebenzisa <b>futhi <i>ku-HTML5. <b>ihloselwe ukugqamisa amagama noma imishwana ngaphandle kokudlulisa ukubaluleka okwengeziwe kuyilapho <i>ngokuvamile kungokwezwi, amagama obuchwepheshe, njll.

Amakilasi okuqondanisa

Hlela kabusha umbhalo kalula ube izingxenye ezinamakilasi okuqondanisa umbhalo.

Umbhalo oqondaniswe kwesokunxele.

Umbhalo oqondaniswe namaphakathi.

Umbhalo oqondaniswe kwesokudla.

Umbhalo olungisiwe.

Awukho umbhalo wokugoqa.

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

Amakilasi oguquko

Guqula umbhalo ube izingxenye ngamakilasi osonhlamvukazi bombhalo.

Umbhalo onezinhlamvu eziphansi.

Umbhalo onezinhlamvu ezinkulu.

Umbhalo obhalwe ngosonhlamvukazi.

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

Izifinyezo

Ukuqaliswa okunesitayela kwe- <abbr>elementi ye-HTML yezifinyezo nama-akhronimi ukuze kuboniswe inguqulo enwetshiwe kukuhambisa phezulu. Izifinyezo ezino-atitle zinomngcele ongezansi onamachashazi akhanyayo kanye nekhesa yosizo ekuhambiseni phezulu, okuhlinzeka ngomongo owengeziwe ekuhambiseni phezulu kanye nakubasebenzisi bobuchwepheshe obusizayo.

Isifinyezo esiyisisekelo

Isifinyezo segama lesichasiso sithi attr .

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

I-initialism

Engeza .initialismkusifinyezo sosayizi wefonti omncane kancane.

I- HTML iyinto engcono kakhulu kusukela kusinkwa esisikiwe.

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

Amakheli

Yethula imininingwane yokuxhumana yedlozi eliseduze noma wonke umsebenzi. Londoloza ukufometha ngokuqeda yonke imigqa nge- <br>.

Twitter, Inc.
1355 Market Street, Suite 900
San Francisco, CA 94103
P: (123) 456-7890

Igama
Eligcwele [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>

Izingcaphuno zokuvimba

Ngokucaphuna amabhlogo wokuqukethwe komunye umthombo ngaphakathi kwedokhumenti yakho.

I-blockquote ezenzakalelayo

Goqa <blockquote>noma iyiphi i- HTML njengengcaphuno. Ukuze uthole izingcaphuno eziqondile, sincoma a <p>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. I-integer posuere ilingana ne-ante.

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

Izinketho ze-blockquote

Isitayela nokuqukethwe kuyashintsha ukuze kube nokuhlukahluka okulula kokujwayelekile <blockquote>.

Ukuqamba umthombo

Engeza u-a <footer>ukuze uthole umthombo. Gcoba igama lomsebenzi womthombo ngesi- <cite>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. I-integer posuere ilingana ne-ante.

Umuntu odumile ku- Source Title

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

Ezinye izibonisi

Engeza .blockquote-reversei-blockquote enokuqukethwe okuqondaniswe kwesokudla.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. I-integer posuere ilingana ne-ante.

Umuntu odumile ku- Source Title

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

Uhlu

Aku-odwe

Uhlu lwezinto lapho i-oda lingenandaba khona ngokusobala.

Lorem ipsum dolor sit amet
I-Consectetur adipiscing elit
Integer molestie lorem kanye ne-massa
I-Facilisis ku-pretium nisl aliquet
I-Nulla volutpat aliquam velit
- I-Phasellus iaculis neque
- I-Purus sodales ultricies
- I-Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
I-Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Thola i-porttitor lorem

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

I-oda

Uhlu lwezinto lapho i-oda libaluleke ngokusobala.

Lorem ipsum dolor sit amet
I-Consectetur adipiscing elit
Integer molestie lorem kanye ne-massa
I-Facilisis ku-pretium nisl aliquet
I-Nulla volutpat aliquam velit
I-Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Thola i-porttitor lorem

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

Okungabhalwanga isitayela

Susa list-styleimajini ezenzakalelayo nengakwesokunxele ezintweni zohlu (izingane eziseduze kuphela). Lokhu kusebenza kuphela ezintweni ezisheshayo zohlu lwezingane , okusho ukuthi uzodinga ukungeza ikilasi kunoma yiluphi uhlu olufakwe esidlekeni.

Lorem ipsum dolor sit amet
I-Consectetur adipiscing elit
Integer molestie lorem kanye ne-massa
I-Facilisis ku-pretium nisl aliquet
I-Nulla volutpat aliquam velit
- I-Phasellus iaculis neque
- I-Purus sodales ultricies
- I-Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
I-Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Thola i-porttitor lorem

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

Emugqeni

Beka zonke izinto zohlu emugqeni owodwa display: inline-block;onamaphedi alula.

Lorem ipsum
Phasellus iaculis
I-Nulla volutpat

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

Incazelo

Uhlu lwamagama anezincazelo ezihambisana nawo.

Uhlu lwezincazelo: Uhlu lwezincazelo luphelele ekuchazeni amagama.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.; Donec id elit non mi porta gravida at eget metus.
Malesuada porta: I-Etiam porta sem malesuada magna mollis euismod.

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

Incazelo evundlile

Yenza imigomo nezincazelo <dl>zilandelane. Iqala isitakikhi njengo- <dl>s okuzenzakalelayo, kodwa uma ibha ye-navbar ikhula, yenza kanjalo nalokhu.

Uhlu lwezincazelo: Uhlu lwezincazelo luphelele ekuchazeni amagama.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.; Donec id elit non mi porta gravida at eget metus.
Malesuada porta: I-Etiam porta sem malesuada magna mollis euismod.
U-Felis euismod semper eget lacinia: Fusce dapibus, tellus ac cursus commodo, tor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

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

Ukunciphisa ngokuzenzakalelayo

Uhlu lwezincazelo ezivundlile luzonciphisa amagama amade kakhulu ukuthi angangena kukholamu yesokunxele ngokuthi text-overflow. Ezingobeni zokubuka ezinciphile, zizoshintshela kusakhiwo esistakiwe esizenzakalelayo.

Emugqeni

Goqa amazwibela ekhodi nge- <code>.

Isibonelo, <section>kufanele isongwe njenge-inline.

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

Okokufaka komsebenzisi

Sebenzisa <kbd>ukukhombisa okokufaka okuvamise ukufakwa ngekhibhodi.

Ukuze ushintshe uhla lwemibhalo, thayipha cdulandelwe yigama lohla lwemibhalo.
Ukuze uhlele izilungiselelo, cindezela 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>

Ibhulokhi eyisisekelo

Sebenzisa <pre>emigqeni eminingi yekhodi. Qiniseka ukuthi ubalekela noma yibaphi abakaki be-engeli kukhodi ukuze unikezwe ngendlela efanele.

<p>Isampula yombhalo lapha...</p>

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

Ungakhetha ngokukhetha .pre-scrollableiklasi, elizosetha ubude bobude obungu-350px futhi linikeze ibha yokuskrola ye-y-axis.

Okuguquguqukayo

Ukuze ubonise okuguquguqukayo sebenzisa <var>ithegi.

y = m x + b

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

Okukhiphayo okuyisampula

Ukuze ubonise ukuphuma kwesampula yamabhulokhi kuhlelo sebenzisa <samp>ithegi.

Lo mbhalo uhloselwe ukuthi uthathwe njengesampula ephuma ohlelweni lwekhompyutha.

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

Isibonelo esiyisisekelo

Ukuze uthole isitayela esiyisisekelo—i-padding ekhanyayo nezihlukanisi ezivundlile kuphela—engeza isigaba sesisekelo .tablekunoma iyiphi <table>. Kungase kubonakale kungenasidingo kakhulu, kodwa uma kubhekwa ukusetshenziswa kabanzi kwamathebula kwamanye ama-plugin afana namakhalenda nezikhethi zezinsuku, sikhethe ukuhlukanisa izitayela zethu zetafula ngokwezifiso.

Amagama-ncazo wethebula ozikhethela.
#	Igama	Isibongo	Igama lomsebenzisi
1	Maka	Otto	@mdo
2	uJakobe	Thornton	@amafutha
3	Larry	uNyoni	@twitter

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

Imigqa enemigqa

Sebenzisa .table-stripedukwengeza i-zebra-striping kunoma yimuphi umugqa wethebula ngaphakathi kwe- <tbody>.

Ukuhambisana kwesiphequluli esiphambanayo

Amathebula anemigqa enziwe isitayela ngesikhethi se- :nth-childCSS, esingatholakali ku-Internet Explorer 8.

#	Igama	Isibongo	Igama lomsebenzisi
1	Maka	Otto	@mdo
2	uJakobe	Thornton	@amafutha
3	Larry	uNyoni	@twitter

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

Itafula elinemingcele

Engeza .table-borderedimingcele kuzo zonke izinhlangothi zetafula namaseli.

#	Igama	Isibongo	Igama lomsebenzisi
1	Maka	Otto	@mdo
2	uJakobe	Thornton	@amafutha
3	Larry	uNyoni	@twitter

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

Hambisa imigqa

Engeza .table-hoverukuze unike amandla isimo sokuhambisa phezulu emigqeni yethebula ngaphakathi kwe- <tbody>.

#	Igama	Isibongo	Igama lomsebenzisi
1	Maka	Otto	@mdo
2	uJakobe	Thornton	@amafutha
3	Larry	uNyoni	@twitter

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

Ithebula elijingisiwe

Engeza .table-condensedukuze wenze amatafula ahlangane kakhudlwana ngokusika ama-cell padding phakathi.

#	Igama	Isibongo	Igama lomsebenzisi
1	Maka	Otto	@mdo
2	uJakobe	Thornton	@amafutha
3	Larry Inyoni		@twitter

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

Amakilasi omongo

Sebenzisa amakilasi anomongo ukuze ufake imibala yemigqa yethebula noma amaseli ngamanye.

Ikilasi	Incazelo
`.active`	Ifaka umbala ohambisa phezulu kumugqa othile noma iseli
`.success`	Ibonisa isenzo esiyimpumelelo noma esihle
`.info`	Ibonisa ushintsho olunolwazi olungathathi hlangothi noma isenzo
`.warning`	Ikhombisa isexwayiso esingase sidinge ukunakwa
`.danger`	Ibonisa isenzo esiyingozi noma okungenzeka sibe sibi

#	Isihloko sekholomu	Isihloko sekholomu	Isihloko sekholomu
1	Okuqukethwe kwekholomu	Okuqukethwe kwekholomu	Okuqukethwe kwekholomu
2	Okuqukethwe kwekholomu	Okuqukethwe kwekholomu	Okuqukethwe kwekholomu
3	Okuqukethwe kwekholomu	Okuqukethwe kwekholomu	Okuqukethwe kwekholomu
4	Okuqukethwe kwekholomu	Okuqukethwe kwekholomu	Okuqukethwe kwekholomu
5	Okuqukethwe kwekholomu	Okuqukethwe kwekholomu	Okuqukethwe kwekholomu
6	Okuqukethwe kwekholomu	Okuqukethwe kwekholomu	Okuqukethwe kwekholomu
7	Okuqukethwe kwekholomu	Okuqukethwe kwekholomu	Okuqukethwe kwekholomu
8	Okuqukethwe kwekholomu	Okuqukethwe kwekholomu	Okuqukethwe kwekholomu
9	Okuqukethwe kwekholomu	Okuqukethwe kwekholomu	Okuqukethwe kwekholomu

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

Ukudlulisa incazelo kubuchwepheshe obusizayo

Ukusebenzisa umbala ukwengeza incazelo kumugqa wethebula noma iseli ngalinye kunikeza kuphela inkomba ebonakalayo, engeke idluliselwe kubasebenzisi bobuchwepheshe obusizayo - njengezifundi zesikrini. Qinisekisa ukuthi ulwazi olushiwo umbala lusobala kokuqukethwe ngokwako (umbhalo obonakalayo kumugqa/iseli yethebula efanele), noma ufakiwe ngezinye izindlela, njengombhalo owengeziwe ofihliwe .sr-onlynekilasi.

Amathebula asabelayo

Dala amathebula asabelayo ngokugoqa noma yimaphi .tableukuze .table-responsiveuwenze apheqe avundlile kumadivayisi amancane (ngaphansi kuka-768px). Uma ubuka kunoma yini enkulu kuno-768px ububanzi, ngeke ubone umehluko kulawa mathebula.

Ukusika okuqondile/ukunciphisa

Amathebula aphendulayo asebenzisa overflow-y: hiddenokuthi , okusika noma yikuphi okuqukethwe okudlulela ngale kwangaphansi noma imiphetho ephezulu yethebula. Ikakhulukazi, lokhu kunganqamula amamenyu okwehlayo namanye amawijethi ezinkampani zangaphandle.

I-Firefox nama-fieldsets

IFirefox inesitayela sesethi yasensimini esingesihle esibandakanya widthesiphazamisa ithebula eliphendulayo. Lokhu akukwazi ukukhishwa ngaphandle kokugebenga okuqondile kweFirefox esingakuhlinzeki ku -Bootstrap:

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

Ukuze uthole ulwazi olwengeziwe, funda le mpendulo yokuchichima kwesitaki .

#	Isihloko sethebula	Isihloko sethebula	Isihloko sethebula	Isihloko sethebula	Isihloko sethebula	Isihloko sethebula
1	Iseli yethebula	Iseli yethebula	Iseli yethebula	Iseli yethebula	Iseli yethebula	Iseli yethebula
2	Iseli yethebula	Iseli yethebula	Iseli yethebula	Iseli yethebula	Iseli yethebula	Iseli yethebula
3	Iseli yethebula	Iseli yethebula	Iseli yethebula	Iseli yethebula	Iseli yethebula	Iseli yethebula

#	Isihloko sethebula	Isihloko sethebula	Isihloko sethebula	Isihloko sethebula	Isihloko sethebula	Isihloko sethebula
1	Iseli yethebula	Iseli yethebula	Iseli yethebula	Iseli yethebula	Iseli yethebula	Iseli yethebula
2	Iseli yethebula	Iseli yethebula	Iseli yethebula	Iseli yethebula	Iseli yethebula	Iseli yethebula
3	Iseli yethebula	Iseli yethebula	Iseli yethebula	Iseli yethebula	Iseli yethebula	Iseli yethebula

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

Isibonelo esiyisisekelo

Izilawuli zefomu ngazinye zithola ngokuzenzakalelayo isitayela esithile somhlaba wonke. Yonke imibhalo <input>, <textarea>, kanye <select>nezakhi ezinazo .form-controlzisethwa width: 100%;ngokuzenzakalelayo. Goqa amalebula nezilawuli .form-groupukuze uthole isikhala esiphezulu.

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

Ungahlanganisi amaqembu efomu namaqembu okokufaka

Ungahlanganisi amaqembu efomu ngqo namaqembu okokufaka . Esikhundleni salokho, misa iqembu lokokufaka ngaphakathi kweqembu lefomu.

Ifomu elisemgqeni

Engeza .form-inlineefomini lakho (okungadingeki kube a <form>) kwizilawuli eziqondaniswe kwesokunxele kanye ne-inline-block. Lokhu kusebenza kuphela kumafomu angaphakathi kwezindawo zokubuka ezinobubanzi okungenani obungu-768px.

Ingase idinge ububanzi bangokwezifiso

Okokufaka nokukhethiwe width: 100%;kusetshenziswe ngokuzenzakalelayo ku-Bootstrap. Ngaphakathi kwamafomu asemgqeni, sisetha kabusha lokho width: auto;kuzilawuli eziningi ukuze zihlale emugqeni ofanayo. Kuye ngesakhiwo sakho, ububanzi bangokwezifiso obungeziwe bungase budingeke.

Engeza amalebula njalo

Izifundi zesikrini zizoba nenkinga ngamafomu akho uma ungafaki ilebula yakho konke okokufaka. Kulawa mafomu asemgqeni, ungafihla amalebula usebenzisa .sr-onlyikilasi. Kukhona ezinye izindlela zokuhlinzeka ngelebula lobuchwepheshe obusizayo, obufana ne- aria-label, aria-labelledbynoma titleisibaluli. Uma kungekho kulokhu okukhona, abafundi besikrini bangaphendukela ekusebenziseni placeholderisibaluli, uma sikhona, kodwa qaphela ukuthi ukusetshenziswa placeholdernjengokumiselela ezinye izindlela zokulebula akwelulekwa.

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

Ifomu elivundlile

Sebenzisa amakilasi egridi achazwe ngaphambilini e-Bootstrap ukuze uqondanise amalebula namaqembu ezilawuli zefomu ngesakhiwo esivundlile ngokwengeza .form-horizontalefomini (okungadingeki libe yi- <form>). Ukwenza kanjalo kushintsha .form-groups ukuziphatha njengemigqa yegridi, ngakho-ke asikho isidingo se- .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>

Izilawuli ezisekelwe

Izibonelo zezilawuli zefomu ezijwayelekile ezisekelwa kusakhiwo sefomu lesibonelo.

Okokufaka

Ukulawulwa kwefomu okuvame kakhulu, izinkambu zokufaka ezisuselwe embhalweni. Kufaka usekelo lwazo zonke izinhlobo ze-HTML5: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, kanye color.

Kudingeka uhlobo lwesimemezelo

Okufakwayo kuzokwenziwa isitayela ngokugcwele kuphela uma typekumenyezelwe kahle.

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

Amaqembu okokufaka

Ukwengeza umbhalo ohlanganisiwe noma izinkinobho ngaphambi kanye/noma ngemva kwanoma yimuphi umbhalo osekelwe <input>, hlola ingxenye yeqembu lokufaka .

Indawo yombhalo

Ukulawula kwefomu okusekela imigqa eminingi yombhalo. Shintsha rowsisibaluli njengoba kudingeka.

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

Amabhokisi okuhlola namarediyo

Amabhokisi okuhlola awokukhetha inketho eyodwa noma ezimbalwa ohlwini, kuyilapho imisakazo ingeyokukhetha inketho eyodwa kweziningi.

Amabhokisi okuhlola akhubazekile namarediyo asekelwe, kodwa ukuze unikeze ikhesa "engavunyelwe" ekuhambeni komzali <label>, uzodinga ukungeza .disablediklasi kumzali .radio, .radio-inline, .checkbox, noma .checkbox-inline.

Okuzenzakalelayo (kustakiwe)

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

Amabhokisi okuhlola asemgqeni namarediyo

Sebenzisa i- .checkbox-inlinenoma .radio-inlineamakilasi ochungechungeni lwamabhokisi okuhlola noma imisakazo ngezilawuli ezivela emugqeni ofanayo.

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

Amabhokisi okuhlola namarediyo angenawo umbhalo welebula

Uma ungenawo umbhalo ngaphakathi kwe- <label>, okokufaka kumiswa ngendlela obungayilindela. Okwamanje isebenza kuphela kumabhokisi okuhlola angekho ku-inthanethi nemisakazo. Khumbula ukuthi usanikeze uhlobo oluthile lwelebula lobuchwepheshe obusizayo (ngokwesibonelo, ukusebenzisa 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>

Ikhetha

Qaphela ukuthi amamenyu amaningi omdabu akhethiwe—okuyi-Safari ne-Chrome—anamakhona ayindingilizi angakwazi ukuguqulwa border-radiusngezinto.

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

Ezilawulweni <select>ezinesibaluli multiple, izinketho eziningi ziboniswa ngokuzenzakalelayo.

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

Ukulawula okuqinile

Uma udinga ukubeka umbhalo ongenalutho eduze kwelebula yefomu ngaphakathi kwefomu, sebenzisa .form-control-staticikilasi ku- <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>

Isimo sokugxila

Sisusa izitayela ezizenzakalelayo outlinekwezinye izilawuli zefomu futhi sisebenzise u-a box-shadowendaweni yazo :focus.

Isimo `:focus`sedemo

Isibonelo esingenhla sisebenzisa izitayela zangokwezifiso kumadokhumenti ethu ukubonisa :focusisimo ku- .form-control.

Isimo sokukhubazeka

Engeza disabledisibaluli se-boolean kokokufaka ukuze uvimbele ukusebenzisana komsebenzisi. Okokufaka okukhubazekile kubonakala kulula futhi kwengeza not-allowedikhesa.

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

Amasethi ezinkambu akhutshaziwe

Engeza disabledisibaluli kokuthi a <fieldset>ukuze ukhubaze zonke izilawuli ngaphakathi <fieldset>ngesikhathi esisodwa.

I-Caveat mayelana nokusebenza kwesixhumanisi kwe`<a>`

Ngokuzenzakalela, iziphequluli zizophatha zonke izilawuli zefomu lomdabu ( <input>, <select>nezici <button>) ngaphakathi <fieldset disabled>njengokukhutshaziwe, ukuvimbela kokubili ukusebenzisana kwekhibhodi negundane kuzo. Kodwa-ke, uma ifomu lakho lihlanganisa <a ... class="btn btn-*">nezakhi, lezi zizonikezwa kuphela isitayela se- pointer-events: none. Njengoba kuphawuliwe esigabeni esimayelana nezinkinobho ezikhubaziwe (futhi ikakhulukazi esigatshaneni sezinto zokuhlanganisa ihange), lesi sakhiwo se-CSS asikakamiswa futhi asisekelwe ngokugcwele ku-Opera 18 nangaphansi, noma ku-Internet Explorer 11, futhi iwiniwe. vimbela abasebenzisi bekhibhodi ukuthi bangakwazi ukugxila noma ukwenza lezi zixhumanisi zisebenze. Ngakho ukuze uphephe, sebenzisa i-JavaScript yangokwezifiso ukuze ukhubaze izixhumanisi ezinjalo.

Ukuhambisana kwesiphequluli esiphambanayo

Nakuba i-Bootstrap izosebenzisa lezi zitayela kuzo zonke iziphequluli, i-Internet Explorer 11 nangaphansi ayisekeli ngokugcwele disabledisici ku- <fieldset>. Sebenzisa i-JavaScript yangokwezifiso ukuze ukhubaze isethi yasensimini kulezi ziphequluli.

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

Funda kuphela

Engeza readonlyisibaluli se-boolean kokokufaka ukuze uvimbele ukuguqulwa kwevelu yokokufaka. Okokufaka kokufunda kuphela kubonakala kulula (njengokokufaka okukhutshaziwe), kodwa gcina ikhesa evamile.

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

Usizo lombhalo

Umbhalo wosizo weleveli yokuvimba ukuze uthole izilawuli zefomu.

Ukuhlobanisa umbhalo wosizo nezilawuli zefomu

Umbhalo wosizo kufanele uhlotshaniswe ngokusobala nokulawula kwefomu ohlobene nokusebenzisa aria-describedbyisibaluli. Lokhu kuzoqinisekisa ukuthi ubuchwepheshe obusizayo - njengezifundi zesikrini - buzomemezela lo mbhalo wosizo lapho umsebenzisi egxile noma engena ekulawuleni.

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

Izifunda zokuqinisekisa

I-Bootstrap ihlanganisa izitayela zokuqinisekisa zephutha, isexwayiso, kanye nezimo zempumelelo kuzilawuli zefomu. Ukusebenzisa, ukwengeza .has-warning, .has-error, noma .has-successinto engumzali. Noma iyiphi .control-label, .form-control, futhi .help-blockngaphakathi kwaleyo elementi izothola izitayela zokuqinisekisa.

Ukudlulisa isimo sokuqinisekisa kubuchwepheshe obusizayo kanye nabasebenzisi abangaboni umbala

Ukusebenzisa lezi zitayela zokuqinisekisa ukukhombisa isimo sokulawula kwefomu kunikeza kuphela inkomba ebonakalayo, esekelwe kumbala, engeke idluliselwe kubasebenzisi bobuchwepheshe obusizayo - njengezifundi zesikrini - noma kubasebenzisi abangaboni umbala.

Qinisekisa ukuthi enye inkomba yombuso ihlinzekwa. Ngokwesibonelo, ungafaka iseluleko mayelana nesimo embhalweni wokulawula wefomu <label>ngokwawo (njengoba kunjalo esibonelweni sekhodi esilandelayo), faka i- Glyphicon (nombhalo ohlukile ofanele usebenzisa .sr-onlyikilasi - bheka izibonelo ze- Glyphicon ), noma ngokunikeza usizo olwengeziwe block yombhalo . Ngokukhethekile kubuchwepheshe obusizayo, izilawuli zefomu ezingavumelekile nazo zinganikezwa aria-invalid="true"isibaluli.

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

Ngezithonjana ozikhethela zona

Ungakwazi futhi ukwengeza izithonjana zempendulo ozikhethela yona ngokungezwa .has-feedbackkanye nesithonjana esifanele.

Izithonjana zempendulo zisebenza <input class="form-control">ngezakhi zombhalo kuphela.

Izithonjana, amalebula, namaqembu okokufaka

Ukuma mathupha kwezithonjana zempendulo kuyadingeka kokokufaka ngaphandle kwelebula nasemaqenjini okokufaka anesengezo kwesokudla. Ukhuthazwa kakhulu ukuthi unikeze amalebula akho konke okokufaka ngezizathu zokufinyeleleka. Uma ufisa ukuvimbela amalebula ukuthi angavezwa, wafihle .sr-onlynekilasi. Uma kufanele wenze ngaphandle kwamalebula, lungisa topinani lesithonjana sempendulo. Kumaqembu okokufaka, lungisa rightinani libe inani lephikseli elifanele kuye ngobubanzi be-addon yakho.

Ukudlulisa incazelo yesithonjana kubuchwepheshe obusizayo

Ukuqinisekisa ukuthi ubuchwepheshe obusizayo - njengezifundi zesikrini - budlulisela ngendlela efanele incazelo yesithonjana, umbhalo ofihliwe owengeziwe kufanele ufakwe .sr-onlynekilasi futhi uhlotshaniswe ngokusobala nokulawula kwefomu elihlobene nokusebenzisa aria-describedby. Okunye, qinisekisa ukuthi incazelo (ngokwesibonelo, iqiniso lokuthi kunesexwayiso senkambu ethile yokufaka umbhalo) idluliswa ngenye indlela, njengokushintsha umbhalo wangempela <label>ohlotshaniswa nokulawulwa kwefomu.

Nakuba izibonelo ezilandelayo sezivele zisisho isimo sokuqinisekisa sokulawulwa kwazo kwefomu ngokulandelana kwazo <label>embhalweni ngokwawo, le nqubo engenhla (ukusebenzisa .sr-onlyumbhalo kanye aria-describedby) ifakiwe ngokwezinjongo zemifanekiso.

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

Izithonjana ozikhethela zona ngamafomu avundlile naphakathi komugqa

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

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

`.sr-only`Izithonjana ozikhethela zona ezinamalebula afihliwe

Uma usebenzisa .sr-onlyikilasi ukufihla isilawuli sefomu <label>(kunokusebenzisa ezinye izinketho zokulebula, njengesibaluli aria-label), i-Bootstrap izolungisa ngokuzenzakalelayo indawo yesithonjana uma seyengeziwe.

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

Lawula ubukhulu

Setha ubude usebenzisa amakilasi afana nokuthi .input-lg, futhi usethe ububanzi usebenzisa amakilasi ekholomu yegridi .col-lg-*.

Ukulinganisa ubude

Dala izilawuli zefomu ezinde noma ezifushane ezifana nosayizi bezinkinobho.

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

Osayizi beqembu lefomu elivundlile

Ngokushesha usayizi wamalebula kanye nezilawuli zefomu ngaphakathi .form-horizontalngokungeza .form-group-lgnoma .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>

Usayizi wekholomu

Goqa okokufaka kumakholomu egridi, nanoma iyiphi ingxenye yangokwezifiso yomzali, ukuze usebenzise kalula ububanzi obufunekayo.

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

Omaka bezinkinobho

Sebenzisa amakilasi enkinobho kokuthi <a>, <button>, noma <input>isici.

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

Ukusetshenziswa okuqondile kokuqukethwe

Nakuba amakilasi ezinkinobho angasetshenziswa kuwo <a>kanye nama - <button>elementi, ama- <button>elementi kuphela asekelwayo ngaphakathi kwezingxenye zethu ze-nav ne-navbar.

Izixhumanisi ezisebenza njengezinkinobho

Uma <a>izakhi zisetshenziselwa ukusebenza njengezinkinobho - ukuqala ukusebenza kwekhasi, kunokuzulazula uye kwenye idokhumenti noma isigaba esingaphakathi kwekhasi lamanje - kufanele futhi zinikezwe ezifanele role="button".

Ukunikezwa kwesiphequluli esiphambene

Njengomkhuba ongcono kakhulu, sincoma kakhulu ukusebenzisa i- <button>elementi noma nini lapho kunokwenzeka ukuze uqinisekise ukunikezwa okufanayo kwesiphequluli.

Phakathi kwezinye izinto, kunesiphazamisi kuFirefox <30 esivimbela ekusetheni izinkinobho ezisekelwe, okubangela line-heightukuthi <input>zingafani ncamashi nobude bezinye izinkinobho kuFirefox.

Izinketho

Sebenzisa noma yimaphi amakilasi enkinobho atholakalayo ukuze udale ngokushesha inkinobho enesitayela.

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

Ukudlulisa incazelo kubuchwepheshe obusizayo

Ukusebenzisa umbala ukwengeza incazelo enkinobho kunikeza kuphela inkomba ebonakalayo, engeke idluliselwe kubasebenzisi bobuchwepheshe obusizayo - njengezifundi zesikrini. Qinisekisa ukuthi ulwazi olushiwo umbala lusobala kokuqukethwe ngokwako (umbhalo obonakalayo wenkinobho), noma ufakiwe ngezinye izindlela, njengombhalo owengeziwe ofihliwe .sr-onlynekilasi.

Osayizi

Uyathanda izinkinobho ezinkulu noma ezincane? Engeza .btn-lg, .btn-sm, noma .btn-xsosayizi abengeziwe.

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

Dala izinkinobho zeleveli yebhulokhi—lezo ezinobubanzi obugcwele bomzali— ngokungeza .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>

Isimo esisebenzayo

Izinkinobho zizovela zicindezelwe (ezinengemuva elimnyama, umngcele omnyama, nesithunzi esifakiwe) uma isebenza. Ngezakhi <button>, lokhu kwenziwa nge- :active. Okwezakhi <a>, kwenziwa nge- .active. Nokho, ungasebenzisa .activekokuthi <button>s (futhi ufake aria-pressed="true"isibaluli) uma udinga ukuphindaphinda isimo esisebenzayo ngokohlelo.

Isici senkinobho

Asikho isidingo sokwengeza :activenjengoba kuyisigaba-mbumbulu, kodwa uma udinga ukuphoqa ukubukeka okufanayo, qhubeka futhi wengeze .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>

Isici sehange

Engeza .activeikilasi <a>ezinkinobho.

Isixhumanisi esiyinhloko Isixhumanisi

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

Isimo sokukhubazeka

Yenza izinkinobho zibukeke zingachofozeki ngokuzifiphala ngokuthi opacity.

Isici senkinobho

Engeza disabledisibaluli <button>ezinkinobho.

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

Ukuhambisana kwesiphequluli esiphambanayo

Uma ungeza disabledisibaluli ku- <button>, Internet Explorer 9 nangezansi kuzonikeza umbhalo ompunga ngesithunzi sombhalo esibi esingeke sikwazi ukusilungisa.

Isici sehange

Engeza .disabledikilasi <a>ezinkinobho.

Isixhumanisi esiyinhloko Isixhumanisi

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

Sisebenzisa .disablednjengesigaba sokusetshenziswa lapha, esifana nesigaba esivamile .active, ngakho-ke asikho isiqalo esidingekayo.

Xhumanisa i-caveat yokusebenza

Leli klasi lisebenzisa pointer-events: noneukuzama ukukhubaza ukusebenza kwesixhumanisi kwe- <a>s, kodwa leso sakhiwo se-CSS asikakamiswa futhi asisekelwa ngokugcwele ku-Opera 18 nangaphansi, noma ku-Internet Explorer 11. Ngaphezu kwalokho, ngisho nasezipheqululini ezisekela pointer-events: none, ikhibhodi ukuzulazula kuhlala kungathinteki, okusho ukuthi abasebenzisi bekhibhodi ababonayo nabasebenzisi bobuchwepheshe obusizayo basazokwazi ukwenza lezi zixhumanisi zisebenze. Ngakho ukuze uphephe, sebenzisa i-JavaScript yangokwezifiso ukuze ukhubaze izixhumanisi ezinjalo.

Izithombe eziphendulayo

Izithombe eziku-Bootstrap 3 zingenziwa ziphenduleke kalula ngokungezwa .img-responsivekwekilasi. Lokhu kuyasebenza max-width: 100%;, height: auto;nasesithombeni display: block;ukuze sikhule kahle kusici esingumzali.

Ukuze ubeke phakathi izithombe ezisebenzisa .img-responsiveikilasi, sebenzisa .center-blockesikhundleni se- .text-center. Bona isigaba samakilasi omsizi ukuze uthole imininingwane eyengeziwe mayelana .center-blocknokusetshenziswa.

Izithombe ze-SVG kanye ne-IE 8-10

Ku-Internet Explorer 8-10, izithombe ze-SVG ezinamasayizi .img-responsivealinganisiwe. Ukuze ulungise lokhu, engeza width: 100% \9;lapho kudingeka khona. I-Bootstrap ayikusebenzisi lokhu ngokuzenzakalelayo njengoba idala izinkinga kwamanye amafomethi wesithombe.

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

Amajamo wesithombe

Engeza amakilasi <img>entweni ukuze wenze isitayela kalula izithombe kunoma iyiphi iphrojekthi.

Ukuhambisana kwesiphequluli esiphambanayo

Khumbula ukuthi i-Internet Explorer 8 ayinalo usekelo lwamakhona ayindilinga.

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

Imibala yokuqukethwe

Dlulisa incazelo ngombala ngedlanzana lezinsiza zokugcizelela. Lezi zingaphinda zisetshenziswe kuzixhumanisi futhi zizoba mnyama ngokuhambisa phezulu njengezitayela zethu zokuxhuma ezizenzakalelayo.

Fusce dapibus, tellus ac cursus commodo, tor mauris nibh.

Nullam id dolor id nibh ultricies vehicula ut id elit.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

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

I-Etiam porta sem malesuada magna mollis euismod.

I-Donec ullamcorper nulla non metus auctor 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>

Ukubhekana nokucaciswa

Kwesinye isikhathi amakilasi okugcizelela awakwazi ukusetshenziswa ngenxa yokucaciswa kwesinye isikhethi. Ezimweni eziningi, i-workaround eyanele ukusonga umbhalo wakho <span>ngeklasi.

Ukudlulisa incazelo kubuchwepheshe obusizayo

Ukusebenzisa umbala ukwengeza incazelo kunikeza kuphela inkomba ebonakalayo, engeke idluliselwe kubasebenzisi bobuchwepheshe obusizayo - njengezifundi zesikrini. Qinisekisa ukuthi ulwazi olushiwo umbala lusobala kokuqukethwe ngokwako (imibala yomongo isetshenziselwa kuphela ukuqinisa incazelo esivele ikhona embhalweni/emakhakheni), noma ifakiwe ngezinye izindlela, njengombhalo owengeziwe ofihliwe .sr-onlynekilasi. .

Isizinda somongo

Ngokufana nezigaba zombala wombhalo womongo, setha kalula ingemuva lesici kunoma yisiphi isigaba somongo. Izingxenye zehange zizoba mnyama ngokuhambisa phezulu, njengamakilasi ombhalo.

Nullam id dolor id nibh ultricies vehicula ut id elit.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

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

I-Etiam porta sem malesuada magna mollis euismod.

I-Donec ullamcorper nulla non metus auctor 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>

Ukubhekana nokucaciswa

Kwesinye isikhathi amakilasi angemuva komongo awakwazi ukusetshenziswa ngenxa yokucaciswa kwesinye isikhethi. Kwezinye izimo, i-workaround eyanele ukusonga okuqukethwe kwe-elementi yakho <div>ngeklasi.

Ukudlulisa incazelo kubuchwepheshe obusizayo

Njengemibala yomongo , qiniseka ukuthi noma iyiphi incazelo edluliswa ngombala iphinde idluliselwe ngefomethi engeyona eyethulo kuphela.

Vala isithonjana

Sebenzisa isithonjana sokuvala esijwayelekile ukuze uchithe okuqukethwe okufana namamodeli nezixwayiso.

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

Ama-Carts

Sebenzisa ama-carets ukukhombisa ukusebenza kokwehla kanye nesiqondiso. Qaphela ukuthi i-caret ezenzakalelayo izohlehla ngokuzenzakalelayo kumamenyu okwehlayo .

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

Ukuntanta okusheshayo

Nntanta i-elementi kwesokunxele noma kwesokudla ngeklasi. !importantifakiwe ukugwema izinkinga ezithile. Amakilasi angasetshenziswa futhi njengama-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();
}

Phakathi kwamabhulokhi wokuqukethwe

Misa i-elementi ukuze uyibeke display: blockphakathi margin. Itholakala njenge-mixin neklasi.

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

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

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

Sula ukulungisa

Sula kalula floats ngokungeza .clearfix isici esingumzali . Isebenzisa i-micro clearfix njengoba idume nguNicolas Gallagher. Ingasetshenziswa futhi njenge-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();
}

Ibonisa futhi ifihle okuqukethwe

Phoqa into ukuthi iboniswe noma ifihlwe ( okuhlanganisa nezifundi zesikrini ) ngokusetshenziswa .showkanye .hiddennamakilasi. Lezi zigaba zisebenzisa !importantukugwema ukungqubuzana okuthile, njengokuntanta okusheshayo . Atholakala kuphela ekuguquleni izinga lebhulokhi. Zingasetshenziswa futhi njengama-mixins.

.hideiyatholakala, kodwa ayizithinti njalo izifundi zesikrini futhi iyahoxiswa kusukela ku-v3.0.1. Sebenzisa .hiddennoma .sr-onlyesikhundleni salokho.

Ngaphezu kwalokho, .invisibleingasetshenziswa ukuguqula ukubonakala kwe-elementi kuphela, okusho ukuthi displayayilungiswanga futhi isici sisengaphazamisa ukuhamba kwedokhumenti.

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

Isifundi sesikrini nokuqukethwe kokuzulazula kwekhibhodi

Fihla i-elementi kuwo wonke amadivayisi ngaphandle kwezifundi zesikrini ezine- .sr-only. Hlanganisa nokukhombisa isici .sr-onlyfuthi .sr-only-focusableuma sigxilile (isb ngumsebenzisi wekhibhodi kuphela). Kuyadingeka ukuze ulandele izinqubo ezingcono kakhulu zokufinyelela . Ingasetshenziswa futhi njengama-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();
}

Ukushintshwa kwesithombe

Sebenzisa .text-hideikilasi noma i-mixin ukuze usize esikhundleni sokuqukethwe kombhalo we-elementi ngesithombe sangemuva.

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

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

Ukuze uthole intuthuko esheshayo yeselula, sebenzisa lezi zigaba zensiza ukuze ubonise futhi ufihle okuqukethwe ngedivayisi ngombuzo wemidiya. Kufakwe futhi amakilasi okusebenza okuguqula okuqukethwe uma kuphrintiwe.

Zama ukusebenzisa lezi ngesisekelo esilinganiselwe futhi ugweme ukudala izinguqulo ezihluke ngokuphelele zesayithi elifanayo. Kunalokho, zisebenzise ukuze zigcwalise isethulo sedivayisi ngayinye.

Amakilasi atholakalayo

Sebenzisa eyodwa noma inhlanganisela yamakilasi atholakalayo ukuze uguqule okuqukethwe kuzo zonke izinqamuleli zembobo yokubuka.

	Imishini emincane eyengeziweAmafoni (<768px)	Amadivayisi amancaneAmathebulethi (≥768px)	Amadivayisi aphakathiAmadeskithophu (≥992px)	Amadivayisi amakhuluAmadeskithophu (≥1200px)
`.visible-xs-*`	Kubonakala	Kufihliwe	Kufihliwe	Kufihliwe
`.visible-sm-*`	Kufihliwe	Kubonakala	Kufihliwe	Kufihliwe
`.visible-md-*`	Kufihliwe	Kufihliwe	Kubonakala	Kufihliwe
`.visible-lg-*`	Kufihliwe	Kufihliwe	Kufihliwe	Kubonakala
`.hidden-xs`	Kufihliwe	Kubonakala	Kubonakala	Kubonakala
`.hidden-sm`	Kubonakala	Kufihliwe	Kubonakala	Kubonakala
`.hidden-md`	Kubonakala	Kubonakala	Kufihliwe	Kubonakala
`.hidden-lg`	Kubonakala	Kubonakala	Kubonakala	Kufihliwe

Kusukela ku-v3.2.0, .visible-*-*amakilasi ephoyinti ngalinye lokuhlukana afika ngezinhlobonhlobo ezintathu, okukodwa displaykwenani lesakhiwo ngasinye se-CSS esohlwini olungezansi.

Iqembu lamakilasi	CSS`display`
`.visible-*-block`	`display: block;`
`.visible-*-inline`	`display: inline;`
`.visible-*-inline-block`	`display: inline-block;`

Ngakho, ngezikrini ( ) ezincane ezengeziwe xsngokwesibonelo, .visible-*-*amakilasi atholakalayo yilawa: .visible-xs-block, .visible-xs-inline, kanye .visible-xs-inline-block.

Amakilasi .visible-xs, .visible-sm, .visible-md, .visible-lgfuthi akhona, kodwa ahoxisiwe kusukela ku-v3.2.0 . Cishe zilingana no- .visible-*-block, ngaphandle kwezimo ezikhethekile ezengeziwe <table>zokuguqula izici ezihlobene.

Amakilasi okuphrinta

Ngokufanayo namakilasi avamile aphendulayo, sebenzisa lokhu ukuze uguqule okuqukethwe ukuze uphrinte.

Amakilasi	Isiphequluli	Phrinta
`.visible-print-block` `.visible-print-inline` `.visible-print-inline-block`	Kufihliwe	Kubonakala
`.hidden-print`	Kubonakala	Kufihliwe

Ikilasi .visible-printnalo likhona kodwa liyehliswa kusukela ku- v3.2.0 . Cishe ilingana no- .visible-print-block, ngaphandle kwamacala akhethekile angeziwe <table>wezinto ezihlobene.

Amacala okuhlola

Shintsha usayizi wesiphequluli sakho noma ulayishe kumadivayisi ahlukene ukuze uhlole amakilasi ensiza esabelayo.

Ibonakala ku...

Omaka abaluhlaza bakhombisa ukuthi i-elementi iyabonakala endaweni yakho yokubuka yamanje.

Okuncane kakhulu ✔ Ibonakala ku-x-encane

Encane ✔ Ibonakala kokuncane

Maphakathi ✔ Ibonakala phakathi nendawo

Okukhulu ✔ Kubonakala kunkulu

Extra encane futhi encane ✔ Kubonakala ku-x-okuncane nokuncane

Okuphakathi nendawo ✔ Ibonakala kokumaphakathi nokukhulu

Okuncane kakhulu naphakathi nendawo ✔ Ibonakala ku-x-encane naphakathi

Ezincane nezinkulu ✔ Ibonakala kokuncane nokukhulu

Extra encane futhi enkulu ✔ Ibonakala ku-x-encane nenkulu

Encane naphakathi ✔ Ibonakala kokuncane naphakathi

Kufihliwe ku...

Lapha, omaka abaluhlaza baphinde babonise ukuthi isici sifihliwe endaweni yakho yokubuka yamanje.

Okuncane kakhulu ✔ Ifihliwe ku-x-encane

Encane ✔ Ifihlwe kokuncane

Maphakathi ✔ Kufihlwe kokumaphakathi

Okukhulu ✔ Kufihlwe kokukhulu

Extra encane futhi encane ✔ Ifihlwe ku-x-encane nezincane

Okuphakathi nendawo ✔ Kufihlwe kokumaphakathi nokukhulu

Okuncane kakhulu naphakathi nendawo ✔ Ifihliwe ku-x-encane naphakathi

Ezincane nezinkulu ✔ Kufihlwe kokuncane nokukhulu

Extra encane futhi enkulu ✔ Ifihliwe ku-x-encane nenkulu

Encane naphakathi ✔ Kufihlwe kokuncane nokuphakathi

I-CSS ye-Bootstrap yakhelwe kokuthi Okuncane, i-preprocessor enomsebenzi owengeziwe njengokuguquguqukayo, imiksi, nemisebenzi yokuhlanganisa i-CSS. Labo abafuna ukusebenzisa umthombo Amafayela Ancane esikhundleni samafayela ethu e-CSS ahlanganisiwe bangasebenzisa okuguquguqukayo okuningi namamiksi esiwasebenzisa kulo lonke uhlaka.

Okuguquguqukayo kwegridi nezixube kufakwe ngaphakathi kwesigaba sesistimu yeGridi .

Ukuhlanganisa i-Bootstrap

I-Bootstrap ingasetshenziswa okungenani ngezindlela ezimbili: nge-CSS ehlanganisiwe noma ngomthombo Amafayela amancane. Ukuze uhlanganise Amafayela Amancane, bheka ingxenye ethi Ukuqalisa ukuze uthole ukuthi ungasetha kanjani indawo yakho yokuthuthuka ukuze usebenzise imiyalo edingekayo.

Amathuluzi okuhlanganiswa ezinkampani zangaphandle angase asebenze ne-Bootstrap, kodwa awasekelwe ithimba lethu eliyinhloko.

Okuguquguqukayo

Okuguquguqukayo kusetshenziswa kuyo yonke iphrojekthi njengendlela yokuhlanganisa nokwabelana ngamavelu asetshenziswa kakhulu njengemibala, isikhala, noma izitaki zefonti. Ukuze uthole ukwaziswa okwengeziwe, sicela ubone i-Customizer .

Imibala

Sebenzisa kalula izikimu zemibala ezimbili: i-grayscale ne-semantic. Imibala engwevu inikeza ukufinyelela okusheshayo kumathunzi avamile amnyama kuyilapho i-semantiki ihlanganisa imibala ehlukahlukene eyabelwe amanani onomongo anenjongo.

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

Sebenzisa noma yikuphi kwalokhu okuguquguqukayo kwemibala njengoba kunjalo noma ukwabele kabusha kokuguquguqukayo okunengqondo kwephrojekthi yakho.

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

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

I-scaffolding

Idlanzana lezinto eziguquguqukayo zokwenza ngokwezifiso izici ezibalulekile zohlaka lwamathambo esayithi lakho.

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

Izixhumanisi

Yenza isitayela kalula izixhumanisi zakho ngombala olungile onevelu eyodwa kuphela.

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

Qaphela ukuthi @link-hover-colorisebenzisa umsebenzi, elinye ithuluzi elimangalisayo elivela kokuncane, ukuze lidale ngokuzenzakalelayo umbala olungile ohambisa phezulu. Ungasebenzisa darken, lighten, saturate, futhi desaturate.

Ukuthayipha

Setha kalula uhlobo lwakho lokubhala, usayizi wombhalo, okuholayo, nokuningi ngeziguquko ezimbalwa ezisheshayo. I-Bootstrap isebenzisa lezi futhi ukuze inikeze imiksi ye-typographic elula.

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

Izithonjana

Izinguquko ezimbili ezisheshayo zokwenza ngokwezifiso indawo negama lefayela lezithonjana zakho.

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

Izingxenye

Izingxenye kuyo yonke i-Bootstrap zisebenzisa okuguquguqukayo okuzenzakalelayo ukusetha amanani avamile. Nazi ezisetshenziswa kakhulu.

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

Izingxube zabathengisi

Izingxube zabathengisi ziyimiksi ukusiza ukusekela iziphequluli eziningi ngokufaka zonke iziqalo zomthengisi ezifanele ku-CSS yakho ehlanganisiwe.

Ubukhulu bebhokisi

Setha kabusha imodeli yebhokisi lezingxenye zakho nge-mixin eyodwa. Ukuze uthole umongo, bona lesi sihloko esiwusizo esivela ku-Mozilla .

I-mixin yehlisiwe kusukela ku-v3.2.0, ngokwethulwa kwe-Autoprefixer. Ukuze ulondoloze ukuhambisana nokubuyela emuva, i-Bootstrap izoqhubeka nokusebenzisa i-mixin ngaphakathi kuze kube i-Bootstrap v4.

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

Amakhona ayindilinga

Namuhla zonke iziphequluli zesimanje zisekela isici esingenasiqalo border-radius. Kanjalo, ayikho i- .border-radius()mixin, kodwa i-Bootstrap ihlanganisa izinqamuleli zokuzungeza ngokushesha amakhona amabili ohlangothini oluthile lwento.

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

Ibhokisi (Yehlisa) izithunzi

Uma izethameli zakho eziqondisiwe zisebenzisa iziphequluli zakamuva nezinkulu kakhulu namadivayisi, qiniseka ukuthi usebenzisa box-shadowisakhiwo sodwa. Uma udinga ukusekelwa kwamadivayisi amadala e-Android (pre-v4) kanye ne-iOS (pre-iOS 5), sebenzisa imiksi ehoxisiwe ukuze uthathe -webkitisiqalo esidingekayo.

I-mixin ihoxisiwe kusukela ku-v3.1.0, njengoba i-Bootstrap ingasekeli ngokusemthethweni izinkundla eziphelelwe yisikhathi ezingasisekeli isakhiwo esijwayelekile. Ukuze ulondoloze ukuhambisana nokubuyela emuva, i-Bootstrap izoqhubeka nokusebenzisa i-mixin ngaphakathi kuze kube i-Bootstrap v4.

Qiniseka ukuthi usebenzisa rgba()imibala emabhokisini akho ezithunzi ukuze ahlangane kalula nezingemuva.

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

Uguquko

Izingxube eziningi zokuguquguquka. Setha lonke ulwazi loshintsho ngalolodwa, noma ucacise ukubambezeleka okuhlukile nobude besikhathi njengoba kudingeka.

Amamiksi ahoxisiwe kusukela ku-v3.2.0, ngokwethulwa kwe-Autoprefixer. Ukuze ulondoloze ukuhambisana nokubuyela emuva, i-Bootstrap izoqhubeka nokusebenzisa imiksi ngaphakathi kuze kube i-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;
}

Izinguquko

Zungezisa, sikala, humusha (susa), noma tshekisa noma iyiphi into.

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

Izithombe

I-mixin eyodwa yokusebenzisa zonke izici zokugqwayiza ze-CSS3 kusimemezelo esisodwa kanye nezinye izingxube zezakhiwo ezingazodwana.

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

Ukungaboni kahle

Setha ukufiphala kwazo zonke iziphequluli futhi unikeze isiphetho filterse-IE8.

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

Umbhalo wesimeli

Nikeza umongo wezilawuli zefomu ngaphakathi kwenkambu ngayinye.

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

Amakholomu

Khiqiza amakholomu nge-CSS ngaphakathi kwento eyodwa.

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

Ama-Gradients

Shintsha kalula noma yimiphi imibala emibili wenze igradient yangemuva. Thuthukela kakhulu futhi usethe isiqondiso, sebenzisa imibala emithathu, noma sebenzisa i-radial gradient. Nge-mixin eyodwa uthola wonke ama-syntaxes anesiqalo ozowadinga.

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

Ungaphinda ucacise i-engeli yemibala emibili ejwayelekile, i-gradient yomugqa:

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

Uma udinga i-gradient yesitayela se-barber-stripe, kulula lokho, futhi. Vele ucacise umbala owodwa futhi sizomboza umugqa omhlophe ocwebezelayo.

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

Phakamisa i-ante futhi usebenzise imibala emithathu esikhundleni salokho. Setha umbala wokuqala, umbala wesibili, ukuma kombala wesibili (inani eliyiphesenti elifana no-25%), nombala wesithathu onalezi zingxubevange:

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

Amakhanda phezulu! Uma kwenzeka udinga ukususa i-gradient, qiniseka ukuthi ususa noma iyiphi i-IE-specific filterokungenzeka ukuthi uyingezile. Ungakwenza lokho ngokusebenzisa i- .reset-filter()mixin eceleni background-image: none;.

Izingxube zosizo

Izingxube zezinsiza ziyingxube ehlanganisa izakhiwo ze-CSS ezingahlobene ukuze kuzuzwe umgomo othile noma umsebenzi.

Sula ukulungisa

Khohlwa ukwengeza class="clearfix"kunoma iyiphi into futhi esikhundleni salokho wengeze .clearfix()imiksi lapho kufanele khona. Isebenzisa i- micro clearfix evela ku- Nicolas Gallagher .

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

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

I-Horizontal centering

Ngokushesha beka phakathi noma iyiphi into ngaphakathi komzali wayo. Idinga widthnoma max-widthukusethwa.

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

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

Abasizi bokulinganisa

Cacisa ubukhulu bento kalula.

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

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

Izindawo zombhalo ezingakhuliswa kabusha

Lungiselela kalula izinketho zokushintsha usayizi wanoma iyiphi indawo yombhalo, nanoma iyiphi enye into. Okuzenzakalelayo ekuziphatheni kwesiphequluli okujwayelekile ( both).

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

Inqamula umbhalo

Nciphisa kalula umbhalo nge-ellipsis nge-mixin eyodwa. Idinga into ukuthi ibe blocknoma inline-blockileveli.

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

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

Izithombe ze-retina

Cacisa izindlela ezimbili zesithombe kanye nobukhulu besithombe esingu-@1x, futhi i-Bootstrap izohlinzeka ngombuzo we-@2x wemidiya. Uma unezithombe eziningi ongazisebenzisa, cabanga ukubhala isithombe sakho se-retina i-CSS mathupha embuzweni owodwa wemidiya.

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

Ngenkathi i-Bootstrap yakhelwe kokuthi Okuncane, futhi inechweba elisemthethweni le-Sass . Siyigcina endaweni ehlukile ye-GitHub futhi siphatha izibuyekezo ngombhalo wokuguqula.

Yini efakiwe

Njengoba ichweba le-Sass linerepo ehlukile futhi lisebenzela izethameli ezihluke kancane, okuqukethwe kwephrojekthi kuhluke kakhulu kuphrojekthi enkulu ye-Bootstrap. Lokhu kuqinisekisa ukuthi ichweba lakwa-Sass lihambisana nezinhlelo eziningi ezisekelwe kwa-Sass ngangokunokwenzeka.

Indlela	Incazelo
`lib/`	Ikhodi ye-Ruby gem (ukulungiswa kwe-Sass, ukuhlanganiswa kwe-Rails ne-Compass)
`tasks/`	Imibhalo yokuguqula (ukuguqula umfula ukhuphuke Kancane kuye ku-Sass)
`test/`	Ukuhlolwa kokuhlanganiswa
`templates/`	I-manifest yephakheji yekhampasi
`vendor/assets/`	I-Sass, i-JavaScript, namafayela efonti
`Rakefile`	Imisebenzi yangaphakathi, efana ne-rake nokuguqula

Vakashela inqolobane ye-GitHub yembobo ye-Sass ukuze ubone lawa mafayela esebenza.

Ukufakwa

Ukuze uthole ulwazi mayelana nendlela yokufaka nokusebenzisa i-Bootstrap ye-Sass, thintana ne- GitHub repository readme . Iwumthombo osesikhathini samanje futhi ihlanganisa ulwazi oluzosetshenziswa ne-Rails, Compass, namaphrojekthi ajwayelekile akwa-Sass.

I-Bootstrap ye-Sass

CSS

Uhlolojikelele

HTML5 idokhumenti

Iselula kuqala

Ukuthayipha kanye nezixhumanisi

Normalize.css

Izitsha

Isistimu yegridi

Isingeniso

Imibuzo yemidiya

Izinketho zegridi

Isibonelo: Kustakiwe ukuya kokuvundlile

Isibonelo: Isitsha samanzi

Isibonelo: Iselula nedeskithophu

Isibonelo: Iselula, ithebhulethi, ideskithophu

Isibonelo: Ukugoqa ikholomu

Ikholomu esabelayo ihlelwa kabusha

Susa ama-gutters

Ukusetha amakholomu

Amakholomu enza isidleke

Ukuhleleka kwekholomu

Izingxube ezincane neziguquguqukayo

Okuguquguqukayo

Imiksi

Ukusetshenziswa kwesibonelo

Ukuthayipha

Izihloko

h1. Isihloko se-Bootstrap

h2. Isihloko se-Bootstrap

h3. Isihloko se-Bootstrap

h4. Isihloko se-Bootstrap

h5. Isihloko se-Bootstrap

h6. Isihloko se-Bootstrap

h1. Isihloko se-Bootstrap Umbhalo wesibili

h2. Isihloko se-Bootstrap Umbhalo wesibili

h3. Isihloko se-Bootstrap Umbhalo wesibili

h4. Isihloko se-Bootstrap Umbhalo wesibili

h5. Isihloko se-Bootstrap Umbhalo wesibili

h6. Isihloko se-Bootstrap Umbhalo wesibili

Ikhophi yomzimba

Ikhophi yomzimba oholayo

Yakhiwe Ngokuncane

Izakhi zombhalo osemgqeni

Umbhalo omakiwe

Umbhalo osusiwe

Umbhalo we-Strikethrough

Umbhalo ofakiwe

Umbhalo odwetshelwe

Umbhalo omncane

Okugqamile

Omalukeke

Ezinye izici

Amakilasi okuqondanisa

Amakilasi oguquko

Izifinyezo

Isifinyezo esiyisisekelo

I-initialism

Amakheli

Izingcaphuno zokuvimba

I-blockquote ezenzakalelayo

Izinketho ze-blockquote

Ukuqamba umthombo

Ezinye izibonisi

Uhlu

Aku-odwe

I-oda

Okungabhalwanga isitayela

Emugqeni

Incazelo

Incazelo evundlile

Ukunciphisa ngokuzenzakalelayo

Ikhodi

Emugqeni

Okokufaka komsebenzisi

Ibhulokhi eyisisekelo

Okuguquguqukayo

Okukhiphayo okuyisampula

Amathebula

Isibonelo esiyisisekelo

Imigqa enemigqa

Isimo `:focus`sedemo

I-Caveat mayelana nokusebenza kwesixhumanisi kwe`<a>`

`.sr-only`Izithonjana ozikhethela zona ezinamalebula afihliwe