Fumana ezantsi kwiziqwenga eziphambili zesiseko seBootstrap, kubandakanya nendlela yethu yokuphucula, ngokukhawuleza, nokuqina kophuhliso lwewebhu.

HTML5 doctype

I-Bootstrap isebenzisa izinto ezithile ze-HTML kunye neempawu zeCSS ezifuna ukusetyenziswa kwe-HTML5 doctype. Yifake ekuqaleni kwazo zonke iiprojekthi zakho.

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

Iselula kuqala

Nge-Bootstrap 2, songeze izitayile ezikhethiweyo ezithandekayo zeselfowuni kwimiba ephambili yesakhelo. NgeBootstrap 3, siyibhale kwakhona iprojekthi ukuba isebenziseka ngokulula ukusuka ekuqaleni. Endaweni yokongeza kwizitayile ezizikhethelayo zeselfowuni, zibhakwa ngqo kumbindi. Ngapha koko, i-Bootstrap ihamba phambili . Izimbo zokuqala eziphathwayo zinokufunyanwa kwithala leencwadi liphela endaweni yeefayile ezahlukeneyo.

Ukuqinisekisa unikezelo olululo kunye nokuchukumisa ukwandisa, yongeza i-meta tag ye-viewport kweyakho <head>.

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

Ungakhubaza isakhono sokwandisa kwizixhobo eziphathwayo ngokongeza user-scalable=nokwimeta tag yokujonga. Oku kukhubaza ukusondeza, oku kuthetha ukuba abasebenzisi bayakwazi ukuskrola kuphela, kwaye kukhokelela ekubeni indawo yakho ivakale ngakumbi njengesicelo somthonyama. Lilonke, asikucebisi oku kuyo yonke indawo, ke sebenzisa isilumkiso!

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

Ukuchwetheza kunye namakhonkco

I-Bootstrap iseta umboniso osisiseko wehlabathi jikelele, ukuchwetheza, kunye nezimbo zekhonkco. Ngokukodwa, thina:

Misela background-color: #fff;kwibody
Sebenzisa i- @font-family-base,, @font-size-basekunye @line-height-baseneempawu njengesiseko sethu sokuchwetheza
Cwangcisa umbala wekhonkco wehlabathi ngokusebenzisa @link-colorkwaye usebenzise ikhonkco elikrwelelayo kuphela:hover

Ezi ndlela zinokufumaneka ngaphakathi scaffolding.less.

Normalize.css

Kunikezelo oluphuculweyo lwesikhangeli, sisebenzisa Normalize.css , iprojekthi kaNicolas Gallagher kunye noJonathan Neal .

Izikhongozeli

I-Bootstrap ifuna into equlathe into yokusonga imixholo yesayithi kunye nendlu yenkqubo yethu yegridi. Unokukhetha esinye sezikhongozeli ezibini oza kuzisebenzisa kwiiprojekthi zakho. Qaphela ukuba, ngenxa paddingnangaphezulu, akukho sikhongozeli sihleliyo.

Ukusetyenziswa .containerkwisikhongozeli sobubanzi obusisigxina esiphendulayo.

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

Sebenzisa .container-fluidkwisikhongozeli esibanzi esigcweleyo, esithatha bonke ububanzi bendawo yokujonga yakho.

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

I-Bootstrap ibandakanya ukusabela, inkqubo yegridi yokuqala ye-fluid ehamba ngokufanelekileyo ukuya kwiikholamu ezili-12 njengoko isixhobo okanye ubungakanani bombono bonyuka. Ibandakanya iiklasi ezichazwe kwangaphambili zokhetho olulula loyilo, kunye nemixube enamandla yokuvelisa uyilo lwesemantic ngakumbi .

Intshayelelo

Iinkqubo zegridi zisetyenziselwa ukudala iiplani zephepha ngoluhlu lwemigca kunye neekholamu ezigcina umxholo wakho. Nantsi indlela yokusebenza kwegridi yeBootstrap:

Imiqolo kufuneka ibekwe ngaphakathi .container(ububanzi obumiselweyo) okanye .container-fluid(ububanzi obupheleleyo) ukulungiselela ulungelelwaniso olufanelekileyo kunye nokukhuselwa.
Sebenzisa imiqolo ukwenza amaqela axwesileyo eekholamu.
Isiqulatho kufuneka sibekwe ngaphakathi kwikholamu, kwaye kuphela iikholamu ezinokuba ngabantwana bangoko kwimiqolo.
Iiklasi zegridi ezichazwe kwangaphambili ezifana .rowkwaye .col-xs-4ziyafumaneka ukwenza ngokukhawuleza uyilo lwegridi. Imixube encinci ingasetyenziselwa ukubekwa kwesemantic.
Iikholamu zenza iigatha (izithuba phakathi komxholo wekholamu) nge padding. Loo padding ikhutshiwe kwimiqolo yokuqala kunye nekholamu yokugqibela ngokusebenzisa umda ongalunganga kwi- .rows.
Umda ongalunganga kungenxa yokuba le mizekelo ingezantsi ingaphandle. Kungenxa yokuba umxholo ongaphakathi kwiikholamu zegridi ulungelelaniswe nomxholo ongeyogrid.
Iikholamu zegridi zenziwe ngokuchaza inani leekholamu ezifumanekayo ezilishumi elinambini onqwenela ukuba zidlule. Umzekelo, iikholamu ezintathu ezilinganayo ziya kusebenzisa ezintathu .col-xs-4.
Ukuba ngaphezu kweekholamu ezili-12 zibekwe ngaphakathi kumqolo omnye, iqela ngalinye leekholamu ezongezelelweyo liya kuthi, njengeyunithi enye, isonge kumgca omtsha.
Iiklasi zegridi zisebenza kwizixhobo ezinobubanzi besikrini obukhulu kunobulingana okanye obulingana nobukhulu bendawo yokuphumla, kunye nokubhala ngaphezulu kweeklasi zegridi ezijoliswe kwizixhobo ezincinci. Ngoko ke, umz. ukusebenzisa nayiphi na .col-md-*iklasi kwinto ayizukuchaphazela kuphela isimbo sayo kwizixhobo eziphakathi kodwa nakwizixhobo ezikhulu ukuba .col-lg-*iklasi ayikho.

Jonga kwimizekelo yokusebenzisa le migaqo kwikhowudi yakho.

Imibuzo yemidiya

Sisebenzisa le mibuzo ilandelayo yeendaba kwiifayile zethu eziNcinane ukwenza iindawo zokuqhawula ezingundoqo kwinkqubo 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) { ... }

Ngamathuba athile sandisa le mibuzo yemidiya ukubandakanya max-widthukukhawulela i-CSS kwiseti encinci yezixhobo.

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

Iinketho zegridi

Jonga indlela imiba yendlela yegridi yeBootstrap esebenza ngayo kuzo zonke izixhobo ezininzi ezinetafile ephathwayo.

	Izixhobo ezincinci ezongezelelweyo iiFowuni (<768px)	Izixhobo ezincinci zetafile (≥768px)	Izixhobo eziPhakathi zeDesktop (≥992px)	Izixhobo ezikhulu zeDesktop (≥1200px)
Ukuziphatha kwegridi	Ithe tyaba ngamaxesha onke	Igoqiwe ukuqalisa, ithe tyaba ngasentla kweendawo zokuqhawula
Ububanzi bomgqomo	Akukho (auto)	750px	970px	1170px
Isimaphambili seklasi	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`
# yeentsika	12
Ububanzi bekholamu	Ngokuzenzekelayo	~62px	~81px	~97px
Ububanzi bomsele	30px (15px kwicala ngalinye lekholamu)
Nestable	Ewe
I-Offsets	Ewe
Ukuodola ikholamu	Ewe

Umzekelo: Ibekwe ngokuthe tye

Usebenzisa iseti enye .col-md-*yeeklasi zegridi, unokwenza inkqubo yegridi esisiseko eqala ngokupakishwa kwizixhobo eziphathwayo kunye nezixhobo zethebhulethi (eyongezelelweyo incinci ukuya kuluhlu oluncinci) phambi kokuba ithe tye kwidesktop (ephakathi) izixhobo. Beka iikholamu zegridi kuyo nayiphi na .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>

Umzekelo: Isikhongozeli solwelo

Guqula naluphi na uhlobo loyilo lwegridi yobubanzi obusisigxina ibeyiyo yobubanzi obugcweleyo ngokutshintsha umphandle wakho .containerube .container-fluid.

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

Umzekelo: Iselula kunye nedesktop

Awufuni ukuba iikholamu zakho zibeke ngokulula kwizixhobo ezincinci? Sebenzisa iiklasi zegridi ezincinci neziphakathi ngokudibanisa .col-xs-* .col-md-*kwiikholamu zakho. Jonga lo mzekelo ungezantsi ukuze ufumane ingcamango engcono yendlela esebenza ngayo yonke into.

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

Umzekelo: Iselula, ithebhulethi, idesktop

Yakha kumzekelo wangaphambili ngokwenza iziyilo ezinamandla ngakumbi nezinamandla .col-sm-*ngeeklasi zethebhulethi.

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

Umzekelo: Ukusonga ikholamu

Ukuba ngaphezu kweekholamu ezili-12 zibekwe ngaphakathi kumqolo omnye, iqela ngalinye leekholamu ezongezelelweyo liya kuthi, njengeyunithi enye, isonge kumgca omtsha.

.col-xs-9

.col-xs-4
Ukusukela ku-9 + 4 = 13 > 12, le div-ububanzi bekholamu-4 ibotshelelwa kumgca omtsha njengeyunithi enye edibanayo.

.col-xs-6
Imiqolo elandelayo iqhubeleka nomgca omtsha.

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

Ukusetha kwakhona ikholamu ephendulayo

Ngamanqanaba amane eegridi akhoyo unyanzelekile ukuba ungene kwimiba apho, kwiindawo ezithile zokuphumla, iikholamu zakho azicaci kakuhle njengoko enye inde kunomnye. Ukulungisa oko, sebenzisa indibaniselwano a .clearfixkunye neeklasi eziluncedo eziphendulayo .

.col-xs-6 .col-sm-3 Yenza ubungakanani bendawo
yakho yokujonga okanye uyijonge kwifowuni yakho umzekelo.

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

Ukongeza kwikholamu yokucoca kwiindawo ezisabelayo, unokufuna ukuseta ngokutsha ii-offsets, utyhala, okanye utsalo . Bona oku kwisenzo kumzekelo wegridi .

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

Susa iigatha kumqolo kunye neekholamu zayo kunye .row-no-guttersneklasi.

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

Imihlathi yokumisela

Hambisa iikholamu ekunene usebenzisa .col-md-offset-*iiklasi. Ezi klasi zonyusa umda wasekhohlo wekholam *ngokweekholamu. Umzekelo, .col-md-offset-4uhamba .col-md-4ngaphaya kweekholamu ezine.

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

Unokuphinda ukhuphele ngaphezulu i-offsets ukusuka kwimigangatho yegridi esezantsi .col-*-offset-0ngeeklasi.

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

Imihlathi yokufuya

Ukuxhoma umxholo wakho ngegridi engagqibekanga, yongeza entsha .rowkunye neseti .col-sm-*yeekholamu ngaphakathi koluhlu olukhoyo .col-sm-*. Imiqolo ebekwe kwindlwane kufuneka ibandakanye uluhlu lwezintlu ezidibanisa ukuya kutsho kwi-12 okanye ngaphantsi (akufuneki ukuba usebenzise zonke iikholamu ezili-12 ezikhoyo).

Inqanaba 1: .col-sm-9

Inqanaba lesi-2: .col-xs-8 .col-sm-6

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

Ukuodola ikholamu

Guqula ngokulula ulungelelwaniso lweekholamu zethu zegridi ezakhelwe ngaphakathi kunye .col-md-push-*neeklasi .col-md-pull-*zesilungisi.

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

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

Iingxube ezincinci kunye neziguquguqukayo

Ukongeza kwiiklasi zegridi ezakhelwe kwangaphambili zoyilo olukhawulezayo, iBootstrap ibandakanya ukuguquguquka okuNcinane kunye nemixube ukuze uvelise ngokukhawuleza eyakho ilula, uyilo lwesemantic.

Izinto eziguquguqukayo

Izinto eziguquguqukayo zimisela inani leekholamu, ububanzi begutter, kunye nendawo yombuzo wemidiya apho kuza kuqalwa khona iikholamu ezidadayo. Sisebenzisa ezi ukuvelisa iiklasi zegridi ezichazwe kwangaphambili ezibhalwe ngasentla, kunye nemixube yesiko edweliswe ngezantsi.

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

Imixube

Imixube isetyenziswa ngokudityaniswa noguquguquko lwegridi ukuvelisa i-CSS ye-semantic yeekholamu zegridi nganye.

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

Umzekelo wokusetyenziswa

Uyakwazi ukuguqula izinto eziguquguqukayo kumaxabiso akho esiko, okanye usebenzise nje imixube ngexabiso labo elingagqibekanga. Nanku umzekelo wokusebenzisa useto olungagqibekanga ukwenza ubeko lwekholamu ezimbini kunye nomsantsa 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>nge- <h6>, ziyafumaneka. .h1ngeeklasi zikwakhona .h6, xa ufuna ukuthelekisa isimbo somgca wesihloko kodwa usafuna okubhaliweyo kwakho kuboniswe emgceni.

h1. Isihloko seBootstrap	Semibold 36px
h2. Isihloko seBootstrap	Semibold 30px
h3. Isihloko seBootstrap	Semibold 24px
h4. Isihloko seBootstrap	Semibold 18px
h5. Isihloko seBootstrap	Semibold 14px
h6. Isihloko seBootstrap	Semibold 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>

Yenza isicatshulwa esikhaphukhaphu, esisesekondari kuso nasiphi na isihloko esinethegi eqhelekileyo <small>okanye .smalliklasi.

h1. Isihloko se-Bootstrap Umbhalo wesibini

h2. Isihloko se-Bootstrap Umbhalo wesibini

h3. Isihloko se-Bootstrap Umbhalo wesibini

h4. Isihloko se-Bootstrap Umbhalo wesibini

h5. Isihloko se-Bootstrap Umbhalo wesibini

h6. Isihloko se-Bootstrap Umbhalo wesibini

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

Ikopi yomzimba

Ukungagqibekanga kweBootstrap yehlabathi font-sizeyi- 14px , kunye ne line-height- 1.428 . Oku kusetyenziselwa kuyo <body>yonke imihlathi. Ukongeza, <p>(imihlathi) ifumana umda osezantsi wesiqingatha sobude bayo obubaliweyo bomgca (10px ngokungagqibekanga).

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. Kwenziwe ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Kwenziwe 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>

Ikopi yomzimba okhokelayo

Yenza umhlathi ugqame ngokongeza .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

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

Yakhiwe ngeNcinci

Isikali sokuchwetheza sisekelwe kwizinto ezimbini eziNcinci kwi- variables.less : @font-size-basekunye @line-height-base. Eyokuqala sisiseko sobukhulu befonti esetyenziswa kuyo yonke indawo kwaye eyesibini bubude bomgca wesiseko. Sisebenzisa ezo ziguquguqukayo kunye nezibalo ezilula ukwenza imida, iipadi, kunye nokuphakama kwemigca yalo lonke uhlobo lwethu nokunye. Yenza ngokwezifiso kunye ne-Bootstrap iqhelanisa.

Iimpawu zesicatshulwa esingaphakathi

Isicatshulwa esiphawulweyo

Ukuqaqambisa ukuqhutywa kokubhaliweyo ngenxa yokufaneleka kwayo komnye umxholo, sebenzisa <mark>ithegi.

Ungasebenzisa ithegi yamanqaku kuqaqambisaumbhalo.

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

Umbhalo ocinyiweyo

Ukubonisa iibhloko zeteksti ezicinyiweyo sebenzisa <del>ithegi.

~~Lo mgca wokubhaliweyo wenzelwe ukuphathwa njengombhalo ocinyiweyo.~~

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

Isiqendu sokubetha

Ukubonisa iibhloko zombhalo ezingasasebenziyo sebenzisa <s>ithegi.

~~Lo mgca wokubhaliweyo wenzelwe ukuba uthathwe njengongasachanekanga.~~

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

Umbhalo ofakiweyo

Ukubonisa izongezo kuxwebhu sebenzisa <ins>ithegi.

Lo mgca wokubhaliweyo wenzelwe ukuphathwa njengokongeza kuxwebhu.

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

Isicatshulwa esikrwelelwe umgca ngaphantsi

Ukukrwelela okubhaliweyo sebenzisa <u>ithegi.

Lo mgca wokubhaliweyo uya kwenza njengoko ukrwelelwe umgca ngaphantsi

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

Sebenzisa iithegi ze-HTML zogxininiso olungagqibekanga ezinezimbo ezikhaphukhaphu.

Isicatshulwa esincinci

Ukungagxininisi kumgca okanye iibhloko zombhalo, sebenzisa <small>ithegi ukuseta umbhalo kuma-85% ubukhulu bomzali. Izihloko zezihloko zifumana ezazo font-sizekwizinto ezinendlwane <small>.

Ungasebenzisa enye into engaphakathi .smallendaweni yayo nayiphi na <small>.

Lo mgca wokubhaliweyo wenzelwe ukuphathwa njengoshicilelo olucolekileyo.

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

Engqindilili

Ukugxininisa i-snippet yesicatshulwa esinobunzima befonti enzima.

Isiqwengana esilandelayo sokubhaliweyo sinikezelwa njengombhalo ongqindilili .

<strong>rendered as bold text</strong>

akekeliswe sithi

Ukugxininisa isiqwengana sokubhaliweyo okukekeleyo.

Esi siqwengana silandelayo sokubhaliweyo sinikezelwa njengombhalo okekeleyo .

<em>rendered as italicized text</em>

Ezinye izinto

Zive ukhululekile ukusebenzisa <b>nakwi <i>-HTML5. <b>yenzelwe ukuqaqambisa amagama okanye amabinzana ngaphandle kokudlulisela ukubaluleka okongeziweyo ngelixa <i>ubukhulu becala iselizwi, amagama obugcisa, njl.

Iiklasi zokulungelelanisa

Ukulungelelanisa isicatshulwa ngokulula kumacandelo aneeklasi zolungelelwaniso lokubhaliweyo.

Umbhalo olungelelaniswe ekhohlo.

Isiqendu esilungelelaniswe embindini.

Isiqendu esilungelelaniswe ekunene.

Isicatshulwa esithethelelekayo.

Akukho mbhalo wokusonga.

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

Iiklasi zenguqu

Guqula okubhaliweyo kumacandelo ngeeklasi zokubhala ngoonobumba abakhulu.

Umbhalo osezantsi.

Umbhalo obhalwe ngoonobumba abakhulu.

Isicatshulwa esibhalwe ngoonobumba abakhulu.

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

Ushunqulelo

Uzalisekiso olucwangcisiweyo lwesiqalelo se-HTML <abbr>kwizifinyezo kunye nee-akhronimi ukubonisa uguqulelo olwandisiweyo kwi-hover. Ushunqulelo olunophawu titleloyelelwano lunomda osezantsi onamachaphaza akhanyayo kunye nekhesa yoncedo kwi-hover, ebonelela ngomongo owongezelelweyo kwi-hover kunye nakubasebenzisi boncedo lobuchwepheshe.

Isishunqulelo esisisiseko

Isishunqulelo segama loyelelwano sithi attr .

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

Ukuqala

Yongeza .initialismkwisifinyezo sefonti encinci kancinane.

I- HTML yeyona nto ilungileyo ukusukela kwisonka esisikiweyo.

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

Iidilesi

Bonisa iinkcukacha zoqhagamshelwano zoyena khokho ukufutshane okanye wonke umsebenzi. Gcina ukufomatha ngokuphelisa yonke imigca nge <br>.

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

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

Iingcaphuno zebhloko

Ukucaphula iibhloko zomxholo komnye umthombo ngaphakathi koxwebhu lwakho.

I-blockquote ehlala ikho

Gquba <blockquote>malunga nayo nayiphi na i- HTML njengesicatshulwa. Kwiingcaphuno ezithe ngqo, sincoma i <p>.

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

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

Iinketho zeBlockquote

Isimbo kunye nesiqulatho sitshintsha kwiinguqu ezilula kumgangatho <blockquote>.

Ukuchaza umthombo

Yongeza u-a <footer>ukuze uchonge umthombo. Gquba igama lomthombo womsebenzi kwi <cite>.

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

Umntu odumileyo kwiSihloko soMthombo

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

Enye imiboniso

Yongeza .blockquote-reversekwi-blockquote enomxholo olungelelaniswe ekunene.

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

Umntu odumileyo kwiSihloko soMthombo

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

Uluhlu

Ayiodolwanga

Uluhlu lwezinto apho umyalelo awubalulekanga ngokucacileyo .

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

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

Iodolwe

Uluhlu lwezinto apho ulandelelwano lubaluleke kakhulu.

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

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

Ayifakwanga isimbo

Susa umda ongagqibekanga list-stylekunye nowasekhohlo kwizinto zoluhlu (abantwana bangoku kuphela). Oku kusebenza kuphela kwizinto zoluhlu lwabantwana olukhawulezileyo , okuthetha ukuba kuya kufuneka wongeze iklasi kulo naluphi na uluhlu olubekwe kwindlwane ngokunjalo.

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

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

Nomgca

Beka zonke izinto zoluhlu kumgca omnye kunye display: inline-block;ne-padding ekhanyayo.

Lorem ipsum
Phasellus iaculis
Nulla volutpat

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

Inkcazo

Uluhlu lwamagama aneenkcazo ezinxulumene nawo.

Uluhlu lweenkcazelo: Uluhlu lwenkcazo lufanelekile ukuchaza 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: Etiam porta sem malesuada magna mollis euismod.

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

Inkcazo ethe tye

Yenza imigaqo kunye neenkcazo <dl>ngokulandelelana kwicala elinye. Iqala ngokupakishwa njengokungagqibekanga <dl>s, kodwa xa i navbar isanda, yenza njalo ezi.

Uluhlu lweenkcazelo: Uluhlu lwenkcazo lufanelekile ukuchaza 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: Etiam porta sem malesuada magna mollis euismod.
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 ngokuzenzekelayo

Uluhlu lwenkcazelo ethe tye luya kucutha amagama amade kakhulu ukuba angangena kuluhlu lwasekhohlo nge text-overflow. Kwiindawo zokujonga ezimxinwa, ziya kutshintshela kuyilo olupakishweyo olungagqibekanga.

Nomgca

Songa iziqwengana zekhowudi nge <code>.

Umzekelo, <section>kufuneka isongwe njengomgca.

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

Igalelo lomsebenzisi

Sebenzisa i- <kbd>ukubonisa igalelo elidla ngokungeniswa nge-keyboard.

Ukutshintsha abalawuli, chwetheza cdulandelwe ligama likavimba weefayili.
Ukuhlela useto, cofa 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>

Ibhloko esisiseko

Sebenzisa <pre>kwimigca emininzi yekhowudi. Qiniseka ukuba ubaleka naziphi na izibiyeli ze-engile kwikhowudi yonikezelo olufanelekileyo.

<p>Isampuli yombhalo apha...</p>

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

Ungadibanisa ngokukhethayo i.pre-scrollable iklasi, eya kuseka ubude bobude obuyi-350px kwaye ibonelele nge-y-axis scrollbar.

Izinto eziguquguqukayo

Ukubonisa izinto ezahlukeneyo sebenzisa <var>ithegi.

y = mx + b _

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

Imveliso yesampuli

Ukubonisa iibhloko zemveliso yesampulu kwinkqubo sebenzisa <samp>ithegi.

Oku kubhaliweyo kujongwe ukuba kuthathwe njengesampulu ephuma kwiprogram yekhompyutha.

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

Umzekelo osisiseko

Kwi-styling esisiseko-i-padding ekhanyayo kunye ne-horizontal dividers kuphela-yongeza iklasi yesiseko .tablekuyo nayiphi na <table>. Isenokubonakala iyinto engafunekiyo, kodwa ngenxa yokusetyenziswa ngokubanzi kweetafile kwezinye iiplagi ezinje ngekhalenda kunye nabakhethi bemihla, sikhethe ukwahlula izitayile zethu zetafile yesiko.

Ukhetho lwetheyibhile caption.
#	Igama lokuqala	Ifani	Igama lomsebenzisi
1	Phawula	Otto	@mdo
2	uYakobi	Thornton	@fat
3	Larry	intaka	@twitter

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

Imiqolo enemigca

Sebenzisa .table-stripedukudibanisa zebra-striping kuwo nawuphi na umqolo wetafile ngaphakathi kwe <tbody>.

Ukuhambelana kwebrowser

Iitafile ezinemigca zenziwe ngesikhethi :nth-childseCSS, esingafumanekiyo kwi-Internet Explorer 8.

#	Igama lokuqala	Ifani	Igama lomsebenzisi
1	Phawula	Otto	@mdo
2	uYakobi	Thornton	@fat
3	Larry	intaka	@twitter

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

Itafile enemida

Yongeza .table-borderedimida kumacala onke etafile kunye neeseli.

#	Igama lokuqala	Ifani	Igama lomsebenzisi
1	Phawula	Otto	@mdo
2	uYakobi	Thornton	@fat
3	Larry	intaka	@twitter

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

Hambisa imiqolo

Yongeza .table-hoverukwenza imo ye hover kwimigca yetafile ngaphakathi kwe <tbody>.

#	Igama lokuqala	Ifani	Igama lomsebenzisi
1	Phawula	Otto	@mdo
2	uYakobi	Thornton	@fat
3	Larry	intaka	@twitter

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

Itafile ecuthiweyo

Yongeza .table-condensedukwenza iitafile zihlangane ngakumbi ngokusika i-cell padding kwisiqingatha.

#	Igama lokuqala	Ifani	Igama lomsebenzisi
1	Phawula	Otto	@mdo
2	uYakobi	Thornton	@fat
3	Larry intaka		@twitter

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

Iiklasi zomxholo

Sebenzisa iiklasi zomxholo ukufaka imibala kwimigca yetafile okanye iiseli ezizimeleyo.

Iklasi	Inkcazo
`.active`	Ifaka umbala wehover kumqolo othile okanye iseli
`.success`	Ibonisa isenzo esiyimpumelelo okanye esilungileyo
`.info`	Ibonisa inguqu yolwazi engathathi hlangothi okanye isenzo
`.warning`	Ibonisa isilumkiso esinokufuna ingqalelo
`.danger`	Ibonisa isenzo esinobungozi okanye esinokuthi sibe sibi

#	Isihloko sekholamu	Isihloko sekholamu	Isihloko sekholamu
1	Umxholo weKholam	Umxholo weKholam	Umxholo weKholam
2	Umxholo weKholam	Umxholo weKholam	Umxholo weKholam
3	Umxholo weKholam	Umxholo weKholam	Umxholo weKholam
4	Umxholo weKholam	Umxholo weKholam	Umxholo weKholam
5	Umxholo weKholam	Umxholo weKholam	Umxholo weKholam
6	Umxholo weKholam	Umxholo weKholam	Umxholo weKholam
7	Umxholo weKholam	Umxholo weKholam	Umxholo weKholam
8	Umxholo weKholam	Umxholo weKholam	Umxholo weKholam
9	Umxholo weKholam	Umxholo weKholam	Umxholo weKholam

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

Ukuhambisa intsingiselo kwiiteknoloji ezincedisayo

Ukusebenzisa umbala ukongeza intsingiselo kumqolo wetheyibhile okanye kwiseli nganye kunika kuphela isalathiso esibonakalayo, esingayi kuthunyelwa kubasebenzisi bobugcisa bokuncedisa - ezifana nezifundi zesikrini. Qinisekisa ukuba ulwazi olubonakaliswe ngumbala luyabonakala kumxholo ngokwawo (umbhalo obonakalayo kumqolo ofanelekileyo wetheyibhile/iseli), okanye ubandakanywe ngezinye iindlela, ezinjengombhalo owongezelelweyo ofihliweyo .sr-onlyneklasi.

Iitafile eziphendulayo

Yenza iitheyibhile eziphendulayo ngokusonga nayiphi na .tablengaphakathi .table-responsiveukuze uzenze zijikeleze ngokuthe tye kwizixhobo ezincinci (phantsi kwe-768px). Xa ujonge kuyo nantoni na enkulu kuno-768px ububanzi, awuzukubona mahluko kwezi theyibhile.

Ukunqunyulwa ngokuthe nkqo/ukunciphisa

Iitheyibhile eziphendulayo zisebenzisa overflow-y: hiddeni-, ekhuphela nawuphi na umxholo ongaphaya komzantsi okanye kumphetho wetafile. Ngokukodwa, oku kunokuqhawula iimenyu ezihlayo kunye nezinye iiwijethi zomntu wesithathu.

Firefox kunye neeseti zemimandla

IFirefox inesimbo esingathandekiyo seseti ebandakanya widthephazamisana netafile ephendulayo. Oku akunako ukukhutshwa ngaphandle kwe-Firefox-i-hack ethile esingaboneleli ngayo kwi-Bootstrap:

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

Ngolwazi oluthe vetshe, funda le mpendulo yokuHamba kweSitaki .

#	Isihloko setheyibhile	Isihloko setheyibhile	Isihloko setheyibhile	Isihloko setheyibhile	Isihloko setheyibhile	Isihloko setheyibhile
1	Iseli yetafile	Iseli yetafile	Iseli yetafile	Iseli yetafile	Iseli yetafile	Iseli yetafile
2	Iseli yetafile	Iseli yetafile	Iseli yetafile	Iseli yetafile	Iseli yetafile	Iseli yetafile
3	Iseli yetafile	Iseli yetafile	Iseli yetafile	Iseli yetafile	Iseli yetafile	Iseli yetafile

#	Isihloko setheyibhile	Isihloko setheyibhile	Isihloko setheyibhile	Isihloko setheyibhile	Isihloko setheyibhile	Isihloko setheyibhile
1	Iseli yetafile	Iseli yetafile	Iseli yetafile	Iseli yetafile	Iseli yetafile	Iseli yetafile
2	Iseli yetafile	Iseli yetafile	Iseli yetafile	Iseli yetafile	Iseli yetafile	Iseli yetafile
3	Iseli yetafile	Iseli yetafile	Iseli yetafile	Iseli yetafile	Iseli yetafile	Iseli yetafile

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

Umzekelo osisiseko

Ulawulo lwefomu yomntu ngamnye lufumana ngokuzenzekelayo isimbo sehlabathi. Konke okubhaliweyo <input>, <textarea>, kunye <select>nezinto .form-controlezinezicwangciswe width: 100%;ngokungagqibekanga. Gquba iilebhile kunye nolawulo .form-groupukuze ufumane izithuba ezifanelekileyo.

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

Musa ukudibanisa amaqela efom kunye namaqela egalelo

Musa ukuxuba amaqela efom ngokuthe ngqo kunye namaqela egalelo . Endaweni yoko, gcina iqela legalelo ngaphakathi kwiqela lefom.

Ifom engaphakathi

Yongeza .form-inlinekwifomu yakho (enganyanzelekanga ukuba ibeyi <form>) yolungelelwaniso olusekhohlo kunye nolawulo lwebhloko engaphakathi. Oku kusebenza kuphela kwiifomu ezingaphakathi kwendawo yokujonga ubuncinane eyi-768px ububanzi.

Isenokufuna ububanzi besiko

Amagalelo kunye nokhetho width: 100%;lusetyenziswe ngokungagqibekanga kwiBootstrap. Ngaphakathi kweefom ze-inline, siseta kwakhona ukuba width: auto;ulawulo oluninzi lunokuhlala kumgca omnye. Kuxhomekeka kuyilo lwakho, ububanzi besiko olongezelelweyo lunokufuneka.

Yongeza iilebhile rhoqo

Abafundi besikrini baya kuba nengxaki ngeefomu zakho ukuba awubandakanyi ileyibhile yalo lonke igalelo. Kwezi fom zangaphakathi, ungazifihla iilebhile usebenzisa .sr-onlyiklasi. Kukho ezinye iindlela ezizezinye zokubonelela ngeleyibhile yeetekhnoloji ezincedisayo, ezifana ne- aria-label, aria-labelledbyokanye titleuphawu. Ukuba akukho nanye kwezi ekhoyo, abafundi besikrini banokubhenela ekusebenziseni placeholderuphawu, ukuba lukhona, kodwa qaphela ukuba ukusetyenziswa placeholderkwendawo yezinye iindlela zokuleyibheli akucetyiswa.

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

Ifom ethe tye

Sebenzisa iiklasi zegridi ezichazwe kwangaphambili zeBootstrap ukulungelelanisa iilebhile kunye namaqela olawulo lwefomu kuyilo oluthe tye ngokongeza .form-horizontalkwifomu (enganyanzelekanga ukuba ibeyi <form>). Ukwenza njalo kuyatshintsha .form-groups ukuziphatha njengemigca yegridi, ngoko akukho mfuneko .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>

Ulawulo oluxhaswayo

Imizekelo yolawulo lweefom eziqhelekileyo ezixhaswa kuyilo lwefom yomzekelo.

Igalelo

Uninzi lwefomu yolawulo oluxhaphakileyo, imimandla yokufaka esekwe ngokubhaliweyo. Iquka inkxaso yazo zonke iindidi ze-HTML5: text, password, datetime, datetime-local, date, month, time, , week, number, email, url, search, tel, kunye color.

Chwetheza isibhengezo esifunekayo

Amagalelo aya kubhalwa ngokupheleleyo kuphela ukuba awo typeabhengezwe ngokufanelekileyo.

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

Amaqela ongeniso

Ukongeza okubhaliweyo okuhlanganisiweyo okanye amaqhosha phambi kunye/okanye emva kwayo nayiphi na itekisi esekwe <input>, jonga inxalenye yegalelo leqela .

Textarea

Ulawulo lwefom oluxhasa imigca emininzi yokubhaliweyo. Guqula rowsuphawu xa kuyimfuneko.

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

Iibhokisi zokutshekisha kunye noonomathotholo

Iibhokisi zokukhangela zezokukhetha enye okanye iinketho ezininzi kuluhlu, ngelixa oonomathotholo bezokukhetha ukhetho olunye kwabaninzi.

Iibhokisi zokukhangela ezikhubazekileyo kunye nonomathotholo ziyaxhaswa, kodwa ukunika ikhesa "engavumelekanga" kwihover yomzali <label>, kuya kufuneka wongeze .disablediklasi kumzali .radio, .radio-inline, .checkbox, okanye .checkbox-inline.

Okuhlala kukho (kupakishwe)

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

Iibhokisi zokukhangela ezingaphakathi kunye nonomathotholo

Sebenzisa .checkbox-inlineokanye .radio-inlineiiklasi kuthotho lweebhokisi zokukhangela okanye iirediyo kulawulo oluvela kumgca omnye.

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

Iibhokisi zokukhangela kunye nerediyo ezingenalebhile yokubhaliweyo

Ukuba awunambhalo ngaphakathi kwe <label>, igalelo libekwe ngendlela obunokulindela ngayo. Okwangoku isebenza kuphela kwiibhokisi ezingezizo emgceni kunye nonomathotholo. Khumbula ukuba usenokubonelela ngolunye uhlobo lweleyibhile yeetekhnoloji ezincedisayo (umzekelo, 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 ukuba ezininzi iimenyu ezikhethiweyo zemveli-ezizezi kwi-Safari kunye ne-Chrome-zineekona ezijikelezileyo ezingenakuguqulwa border-radiusngeepropati.

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

Kulawulo <select>olunophawu multiple, iinketho ezininzi ziboniswa ngokungagqibekanga.

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

Ulawulo olungatshintshiyo

Xa ufuna ukubeka isicatshulwa esicacileyo ecaleni kweleyibhile yefom ekwifom, sebenzisa .form-control-staticiklasi kwi- <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 izimbo ezingagqibekanga outlinekulawulo oluthile kwaye sisebenzise u a box-shadowendaweni yalo :focus.

`:focus`Imeko yedemo

Lo mzekelo ungentla ungenisa usebenzisa izimbo zesiko kuxwebhu lwethu ukubonisa :focusimeko kwi .form-control.

Ilizwe labakhubazekileyo

Yongeza disableduphawu lwe boolean kwigalelo ukuthintela ukusebenzisana komsebenzisi. Amagalelo akhubazekileyo abonakala ekhaphukhaphu kwaye wongeza not-allowedikhesa.

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

Iiseti zomhlaba zivaliwe

Yongeza disableduphawu ku a <fieldset>ukuvala zonke izilawuli ngaphakathi <fieldset>ngaxeshanye.

I-Caveat malunga nokusebenza kwekhonkco`<a>`

Ngokungagqibekanga, abakhangeli bazakuthatha lonke uhlobo lolawulo lwendalo ( <input>, <select>kunye <button>nezakhi) ngaphakathi <fieldset disabled>njengokukhubaziweyo, ukuthintela zombini ibhodi yezitshixo kunye nonxibelelwano lwemouse kuzo. Nangona kunjalo, ukuba ifom yakho ikwabandakanya <a ... class="btn btn-*">izinto, ezi ziya kunikwa kuphela isimbo se pointer-events: none. Njengoko kuphawuliwe kwicandelo malunga nemeko yabakhubazekileyo yamaqhosha (kwaye ngokukodwa kwicandelo elingaphantsi lezinto ze-ankile), le propati ye-CSS ayikamiswanga kwaye ayixhaswanga ngokupheleleyo kwi-Opera 18 nangaphantsi, okanye kwi-Internet Explorer 11, kwaye iphumelele. 'ukuthintela abasebenzisi bebhodi yezitshixo ukuba bangakwazi ukugxila okanye ukuvula la makhonkco. Ke ukuze ukhuseleke, sebenzisa iJavaScript yesiko ukuvala amakhonkco anjalo.

Ukuhambelana kwebrowser

Ngelixa i-Bootstrap izakusebenzisa ezi zimbo kuzo zonke iibhrawuza, i-Internet Explorer 11 nangezantsi ayiluxhasi ngokupheleleyo disableduphawu lwe- <fieldset>. Sebenzisa iJavaScript yesiko ukuvala iseti yangaphandle kwezi bhrawuza.

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

Yongeza readonlyuphawu lwe boolean kwigalelo ukunqanda ukulungiswa kwexabiso legalelo. Amagalelo okufunda kuphela abonakala ekhaphukhaphu (njengamagalelo avaliweyo), kodwa gcina ikhesa esemgangathweni.

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

Umbhalo woncedo

Inqanaba lebhlokhi yoncedo lokubhaliweyo kulawulo lwefom.

Ukunxulumanisa isicatshulwa soncedo kunye nolawulo lwefom

Isicatshulwa soncedo kufuneka sidityaniswe ngokucacileyo nolawulo lwefom enxulumene nokusebenzisa aria-describedbyuphawu loyelelwano. Oku kuya kuqinisekisa ukuba iitekhnoloji ezincedisayo - ezifana nezifundi zesikrini - ziya kubhengeza lo mbhalo woncedo xa umsebenzisi egxile okanye engena kulawulo.

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

Iimeko zokuqinisekisa

I-Bootstrap ibandakanya izitayile zokuqinisekisa impazamo, isilumkiso, kunye nempumelelo ithi kulawulo lwefom. Ukusebenzisa, ukongeza .has-warning, .has-error, okanye .has-successinto engumzali. Nayiphi na .control-label, .form-controlkwaye .help-blockngaphakathi kweso siqalelo siya kufumana izimbo zokuqinisekisa.

Ukuhambisa urhulumente wokuqinisekisa kwiitekhnoloji ezincedisayo kunye nabasebenzisi abangenambala

Ukusebenzisa ezi ndlela zokuqinisekisa ukubonisa ubume bolawulo lwefom kubonelela kuphela ngembonakalo, isalathiso esekwe kumbala, esingayi kuhanjiswa kubasebenzisi betekhnoloji encedisayo - njengabafundi besikrini - okanye kubasebenzisi abangenambala.

Qinisekisa ukuba kukho enye into ebonisa urhulumente. Umzekelo, ungabandakanya icebiso malunga nelizwe <label>kwisicatshulwa solawulo lwefomu ngokwayo (njengoko kunjalo kumzekelo wekhowudi elandelayo), bandakanya iGlyphicon (kunye nokubhaliweyo okufanelekileyo usebenzisa .sr-onlyiklasi - bona imizekelo yeGlyphicon ), okanye ngokubonelela ibhloko yombhalo woncedo olongezelelweyo . Ngokukodwa kwiiteknoloji ezincedisayo, ulawulo lwefom olungasebenziyo lunokwabelwa aria-invalid="true"uphawu.

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

Ngee icon ozikhethelayo

Unokongeza ii-iyikhoni zempendulo ozikhethelayo kunye .has-feedbacknomfanekiso ochanekileyo.

Iimpawu zeengxelo zisebenza kuphela ngezinto ezibhaliweyo <input class="form-control">.

Iimpawu, iilebhile, kunye namaqela egalelo

Ukubekwa ngokwezandla kwee-icon zengxelo kuyafuneka kumagalelo ngaphandle kweleyibhile nakumaqela egalelo anokongeza ngasekunene. Uyakhuthazwa ngamandla ukuba unikeze iilebhile zawo onke amagalelo ngenxa yezizathu zokufikeleleka. Ukuba unqwenela ukuthintela iilebhile ukuba zingavezwa, zifihle .sr-onlyeklasini. Ukuba kufuneka wenze ngaphandle kweeleyibhile, lungisa topixabiso lomfanekiso wengxelo. Kumaqela egalelo, lungisa rightixabiso kwixabiso elifanelekileyo lepixel ngokuxhomekeke kububanzi beaddon yakho.

Ukuhambisa intsingiselo yomfanekiso kwiitekhnoloji ezincedisayo

Ukuqinisekisa ukuba iitekhnoloji ezincedisayo - ezifana nezifundi zesikrini - ziyidlulisela ngokuchanekileyo intsingiselo ye-icon, isicatshulwa esongezelelweyo esifihliweyo kufuneka sibandakanywe .sr-onlyeklasini kwaye sidityaniswe ngokucacileyo nolawulo lwefom ehambelana nokusebenzisa aria-describedby. Kungenjalo, qinisekisa ukuba intsingiselo (umzekelo, inyani yokuba kukho isilumkiso sommandla othile wokungena okubhaliweyo) igqithiswa ngenye indlela, njengokutshintsha okubhaliweyo kweyona nto <label>inxulumene nolawulo lwefom.

Nangona le mizekelo ilandelayo sele ikhankanyiwe ngemeko yongqinisiso yolawulo lwazo <label>kwisicatshulwa ngokwaso, obu buchule bungentla (ukusebenzisa .sr-onlyisicatshulwa kunye aria-describedby) bubandakanyiwe ngeenjongo zokubonisa.

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

Ii-ayikhoni ezizikhethelayo kwiifom ezithe tye kunye ne-inline

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

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

`.sr-only`Ii icon ozikhethelayo ezineelebhile ezifihliweyo

Ukuba usebenzisa .sr-onlyiklasi ukufihla indlela yolawulo lwefomu <label>(kunokusebenzisa ezinye iinketho zokuleyibhela, ezifana aria-labelnophawu), iBootstrap iya kulungelelanisa ngokuzenzekelayo indawo ye icon xa yongeziwe.

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

Cwangcisa ubude usebenzisa iiklasi ezifana .input-lg, kwaye usete ububanzi usebenzisa iiklasi zekholamu yegridi njenge .col-lg-*.

Ukulinganisa ubude

Yenza ulawulo olude okanye olufutshane oluhambelana nobukhulu beqhosha.

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

Iisayizi zeqela lefom ethe tye

Iilebhile zesayizi ngokukhawuleza kunye nolawulo lwefom ngaphakathi .form-horizontalngokudibanisa .form-group-lgokanye .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>

Ubungakanani bekholamu

Songa amagalelo kwiikholamu zegridi, okanye nasiphi na isiko lomzali, ukunyanzelisa ngokulula 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>

Iithegi zeqhosha

Sebenzisa iiklasi zamaqhosha kwi <a>, <button>, okanye <input>isiqalelo.

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

Ukusetyenziswa komxholo othile

Ngelixa iiklasi zeqhosha zinokusetyenziswa <a>kunye <button>nezakhi, kuphela <button>izinto ezixhaswayo ngaphakathi kwe-nav yethu kunye namalungu e-navbar.

Amakhonkco asebenza njengamaqhosha

Ukuba <a>izinto zisetyenziselwa ukwenza njengamaqhosha - ukuqalisa ukusebenza kwekhasi, kunokuba uhambe uye kwelinye uxwebhu okanye icandelo ngaphakathi kwephepha langoku - kufuneka kwakhona banikwe efanelekileyo role="button".

Unikezelo lwe-cross-browser

Njengoqheliselo olungcono, sincoma kakhulu ukusebenzisa <button>isiqalelo xa kunokwenzeka ukuqinisekisa ukuthelekisa unikezelo lwebrowser.

Phakathi kwezinye izinto, kukho isiphene kwiFirefox <30 esithintelayo line-heightekusetezeni <input>amaqhosha asekiweyo, ebangela ukuba angahambelani ncam nobude bamanye amaqhosha kwiFirefox.

Iinketho

Sebenzisa naziphi na iiklasi ezikhoyo zamaqhosha ukwenza ngokukhawuleza iqhosha elinesitayile.

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

Ukuhambisa intsingiselo kwiiteknoloji ezincedisayo

Ukusebenzisa umbala ukongeza intsingiselo kwiqhosha kunika kuphela isalathisi esibonakalayo, esingayi kuthunyelwa kubasebenzisi bobugcisa bokuncedisa - njengabafundi besikrini. Qinisekisa ukuba ulwazi oluchazwe ngumbala lubonakala luvela kumxholo ngokwawo (umbhalo obonakalayo weqhosha), okanye ubandakanyiwe ngeendlela ezizezinye, ezifana nesicatshulwa esongezelelweyo esifihliweyo kunye .sr-onlyneklasi.

Ubukhulu

Unqwenela amaqhosha amakhulu okanye amancinci? Yongeza .btn-lg, .btn-sm, okanye .btn-xsiisayizi ezongezelelweyo.

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

Yenza amaqhosha enqanaba lebhloko—lawo anwenwela kububanzi obupheleleyo bomzali— ngokongeza .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>

Imeko esebenzayo

Amaqhosha azakuvela ecinezelwe (ngemvelaphi emnyama, umda omnyama, kunye nesithunzi somfanekiso) xa usebenza. Kwiziqalelo <button>, oku kwenziwa nge :active. Ukwenzela <a>izinto, kwenziwa nge .active. Nangona kunjalo, ungasebenzisa .activekwi <button>s (kwaye ubandakanye aria-pressed="true"uphawu) kufuneka ufune ukuphinda-phinda imeko esebenzayo ngokwenkqubo.

Into yeqhosha

Akukho mfuneko yokongeza :activenjengoko iyiklasi-pseudo, kodwa ukuba ufuna ukunyanzela inkangeleko efanayo, qhubeka kwaye wongeze .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>

Into ye-ankile

Yongeza .activeiklasi <a>kumaqhosha.

Ikhonkco eliphambili Ikhonkco

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

Ilizwe labakhubazekileyo

Yenza amaqhosha abonakale engacoleki ngokuwacima nge opacity.

Into yeqhosha

Yongeza disableduphawu <button>kumaqhosha.

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

Ukuhambelana kwebrowser

Ukuba wongeza disableduphawu kwi <button>, Internet Explorer 9 kwaye ngezantsi iyakwenza umbhalo ongwevu ngesithunzi sombhalo esibi esingenako ukusilungisa.

Into ye-ankile

Yongeza .disablediklasi <a>kumaqhosha.

Ikhonkco eliphambili Ikhonkco

<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 .disabledudidi oluluncedo apha, ngokufanayo .activenodidi oluqhelekileyo, ngoko ke akukho simaphambili sifunekayo.

Icaveat yokusebenza kwekhonkco

Olu didi lusebenzisa pointer-events: noneukuzama ukukhubaza ukusebenza kwekhonkco le- <a>s, kodwa loo propati ye-CSS ayikabikho emgangathweni kwaye ayixhaswanga ngokupheleleyo kwi-Opera 18 nangaphantsi, okanye kwi-Internet Explorer 11. Ukongeza, nakwiziphequluli ezixhasayo pointer-events: none, ikhibhodi ukukhangela kuhlala kungachaphazeleki, nto leyo ethetha ukuba abasebenzisi bekhibhodi ababoniweyo kunye nabasebenzisi beetekhnoloji ezincedisayo basazokwazi ukuwenza asebenze la makhonkco. Ke ukuze ukhuseleke, sebenzisa iJavaScript yesiko ukuvala amakhonkco anjalo.

Imifanekiso ephendulayo

Imifanekiso kwi-Bootstrap 3 inokwenziwa iphenduleke ngokongezwa .img-responsivekweklasi. Oku kuyasebenza max-width: 100%;, height: auto;kwaye display: block;kumfanekiso ukuze ulinganise kakuhle kwinto yomzali.

Ukusembindini imifanekiso esebenzisa .img-responsiveiklasi, sebenzisa .center-blockendaweni ye .text-center. Jonga icandelo leeklasi zabancedisi ngeenkcukacha ezithe vetshe malunga .center-blocknokusetyenziswa.

Imifanekiso yeSVG kunye ne-IE 8-10

Kwi-Internet Explorer 8-10, imifanekiso yeSVG enesayizi .img-responsiveengalinganiyo. Ukulungisa oku, yongeza width: 100% \9;apho kuyimfuneko. I-Bootstrap ayisebenzisi oku ngokuzenzekelayo njengoko ibangela iingxaki kwezinye iifomati zemifanekiso.

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

Iimilo zomfanekiso

Yongeza iiklasi <img>kwinto ukwenza ngokulula isitayile imifanekiso kuyo nayiphi na iprojekthi.

Ukuhambelana kwebrowser

Gcina ukhumbula ukuba i-Internet Explorer 8 ayinankxaso yeekona ezingqukuva.

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

Imibala yomxholo

Ukuhambisa intsingiselo ngombala ngeqela leeklasi eziluncedo zogxininiso. Ezi zinokusetyenziswa kumakhonkco kwaye ziya kuba mnyama kwi-hover kanye njengezimbo zethu zekhonkco ezingagqibekanga.

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.

Etiam porta sem malesuada magna mollis euismod.

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

Ukujongana neenkcukacha

Ngamanye amaxesha iiklasi zogxininiso azinakusetyenziswa ngenxa yento ethile yomnye umkhethi. Kwiimeko ezininzi, umsebenzi owaneleyo kukusonga isicatshulwa sakho <span>ngeklasi.

Ukuhambisa intsingiselo kwiiteknoloji ezincedisayo

Ukusebenzisa umbala ukongeza intsingiselo kubonelela kuphela ngesalathiso esibonakalayo, esingayi kuthunyelwa kubasebenzisi betekhnoloji encedisayo - njengezifundi zesikrini. Qinisekisa ukuba ulwazi olubonakaliswe ngumbala lucacile kumxholo ngokwawo (imibala yomxholo isetyenziselwa ukuqinisa intsingiselo esele ikhona kwisicatshulwa / uphawu), okanye ibandakanywe ngeendlela ezizezinye, ezinjengombhalo owongezelelweyo ofihliweyo kunye .sr-onlyneklasi . .

Imvelaphi yomxholo

Ngokufana neeklasi zombala wetekisi yomxholo, cwangcisa ngokulula imvelaphi yento kuyo nayiphi na iklasi yomxholo. Izinto ze-ankile ziya kuba mnyama kwi-hover, njengeeklasi zombhalo.

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.

Etiam porta sem malesuada magna mollis euismod.

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

Ukujongana neenkcukacha

Ngamanye amaxesha iiklasi ezingemva kweemeko azinakusetyenziswa ngenxa yento ethile yomnye umkhethi. Kwezinye iimeko, i-workaround eyaneleyo kukusonga umxholo wento yakho <div>kunye neklasi.

Ukuhambisa intsingiselo kwiiteknoloji ezincedisayo

Njengakwimibala yomxholo , qinisekisa ukuba nayiphi na intsingiselo egqithiswa ngombala ikwagqithiswa ngefomathi engeyiyo inkcazo-ntetho kuphela.

Vala i icon

Sebenzisa i-ayikhoni yokuvala eqhelekileyo ukugxotha umxholo onjengeemodyuli kunye nezilumkiso.

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

Iikharethi

Sebenzisa iikharethi ukubonisa ukusebenza kokwehla kunye nesalathiso. Qaphela ukuba ukhathalelo oluhlala lukhona luya kubuya umva ngokuzenzekelayo kwiimenyu ezisukayo .

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

Ukudada ngokukhawuleza

Ncanda into uye ekhohlo okanye ekunene ngeklasi. !importantibandakanyiwe ukuphepha imiba ethile. Iiklasi zingasetyenziswa njengemixube.

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

Iibhloko zesiqulatho seziko

Cwangcisa isiqalelo display: blockkumbindi nge margin. Ifumaneka njengomxube kunye neklasi.

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

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

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

Ukulungisa

Cacisa ngokulula floats ngokongeza .clearfix kwinto engumzali . Isebenzisa i-micro clearfix njengoko ithandwa nguNicolas Gallagher. Inokusetyenziswa kwakhona njengomxube.

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

Ukubonisa kunye nokufihla umxholo

Nyanzelisa into ukuba iboniswe okanye ifihlwe ( kubandakanywa nezifundi zekhusi ) ngokusetyenziswa .showkunye .hiddenneeklasi. Ezi klasi zisebenzisa !importantukunqanda ungquzulwano oluthile, njengokudada okukhawulezayo . Zifumaneka kuphela kwizinga lebhloko lokuguqula. Zisenokusetyenziswa njengemixube.

.hideiyafumaneka, kodwa ayisoloko ichaphazela abafundi besikrini kwaye iyarhoxa njenge-v3.0.1. Sebenzisa .hiddenokanye .sr-onlyendaweni yoko.

Ngaphaya koko, .invisibleinokusetyenziselwa ukuguqula kuphela ukubonakala kwento, oku kuthetha displayukuba ayilungiswanga kwaye isiqalelo sisenokuchaphazela ukuhamba koxwebhu.

<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 kunye nomxholo wokukhangela webhodibhodi

Fihla into kuzo zonke izixhobo ngaphandle kwezifundi zesikrini ezine .sr-only. Dibanisa nokubonisa .sr-onlyinto .sr-only-focusablekwakhona xa igxininiswe (umzekelo ngumsebenzisi webhodi yezitshixo kuphela). Kuyimfuneko ekulandeleni ezona ndlela zofikelelo zingcono . Inokusetyenziswa kwakhona njengemixube.

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

Ukutshintshwa komfanekiso

Sebenzisa .text-hideiklasi okanye i-mixin ukunceda ukubuyisela umxholo wesicatshulwa ngomfanekiso ongasemva.

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

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

Kuphuhliso olukhawulezayo lweselula, sebenzisa ezi klasi ziluncedo ekuboniseni nasekufihleni umxholo ngesixhobo ngombuzo wemidiya. Kukwaqukwe iiklasi eziluncedo zokuguqula umxholo xa ushicilelwe.

Zama ukusebenzisa ezi siseko silinganiselwe kwaye uphephe ukwenza iinguqulelo ezahlukeneyo ngokupheleleyo kwindawo enye. Endaweni yoko, zisebenzise ukuncedisana neprizenteyishini yesixhobo ngasinye.

Iiklasi ezikhoyo

Sebenzisa enye okanye indibaniselwano yeeklasi ezikhoyo zokuguqula umxholo kuzo zonke iindawo zokubukela.

	Izixhobo ezincinci ezongezelelweyoIifowuni (<768px)	Izixhobo ezincinciIitafile (≥768px)	Izixhobo eziphakathiIideskithophu (≥992px)	Izixhobo ezinkuluIideskithophu (≥1200px)
`.visible-xs-*`	Iyabonakala	Ifihliwe	Ifihliwe	Ifihliwe
`.visible-sm-*`	Ifihliwe	Iyabonakala	Ifihliwe	Ifihliwe
`.visible-md-*`	Ifihliwe	Ifihliwe	Iyabonakala	Ifihliwe
`.visible-lg-*`	Ifihliwe	Ifihliwe	Ifihliwe	Iyabonakala
`.hidden-xs`	Ifihliwe	Iyabonakala	Iyabonakala	Iyabonakala
`.hidden-sm`	Iyabonakala	Ifihliwe	Iyabonakala	Iyabonakala
`.hidden-md`	Iyabonakala	Iyabonakala	Ifihliwe	Iyabonakala
`.hidden-lg`	Iyabonakala	Iyabonakala	Iyabonakala	Ifihliwe

Ukusukela kwi-v3.2.0, .visible-*-*iiklasi ze-breakpoint nganye ziza kwiintlobo ezintathu, enye displayngexabiso lepropathi ye-CSS nganye edweliswe ngezantsi.

Iqela leeklasi	CSS`display`
`.visible-*-block`	`display: block;`
`.visible-*-inline`	`display: inline;`
`.visible-*-inline-block`	`display: inline-block;`

Ke, kwizikrini ezincinci ( xs) ezithe chatha umzekelo, .visible-*-*iiklasi ezikhoyo zezi: .visible-xs-block, .visible-xs-inline, kunye .visible-xs-inline-block.

Iiklasi .visible-xs, .visible-sm, .visible-md, kwaye .visible-lgzikwakhona, kodwa ziyekisiwe njenge v3.2.0 . Ziphantse zilingane .visible-*-block, ngaphandle kweemeko ezongezelelweyo ezikhethekileyo zokuguqulwa <table>kwezinto ezinxulumene nokuguqulwa.

Iiklasi zokuprinta

Ngokufana neeklasi eziqhelekileyo eziphendulayo, sebenzisa ezi ukuguqula umxholo wokuprinta.

Iiklasi	Isikhangeli	Shicilela
`.visible-print-block` `.visible-print-inline` `.visible-print-inline-block`	Ifihliwe	Iyabonakala
`.hidden-print`	Iyabonakala	Ifihliwe

Iklasi .visible-printnayo ikhona kodwa iyekisiwe njenge-v3.2.0. Iphantse ilingane ne- .visible-print-block, ngaphandle kweemeko ezongezelelweyo ezikhethekileyo kwizinto ezinxulumene- <table>nento.

Iimeko zovavanyo

Yenza ubungakanani bebrowser yakho okanye ulayishe kwizixhobo ezahlukeneyo ukuvavanya iiklasi eziluncedo eziphendulayo.

Ibonakala kwi...

Iimpawu zokukhangela eziluhlaza zibonisa into iyabonakala kwindawo yakho yokujonga yangoku.

Incinci kakhulu ✔ Ibonakala ku-x-encinci

Incinci ✔ Ibonakala kumancinci

Phakathi ✔ Ibonakala phakathi

Enkulu ✔ Ibonakala kubukhulu

Incinci encinci kunye nencinci ✔ Ibonakala kwi-x-encinci kunye nencinci

Phakathi kwaye inkulu ✔ Ibonakala phakathi nendawo enkulu

Incinci encinci kunye nephakathi ✔ Ibonakala ku-x-encinci naphakathi

Incinci kwaye inkulu ✔ Ibonakala kwezincinci nezinkulu

Incinci kakhulu kwaye inkulu ✔ Ibonakala ku-x-encinci kunye nobukhulu

Encinci naphakathi ✔ Ibonakala kwincinci naphakathi

Ifihlwe kwi...

Apha, amanqaku okukhangela aluhlaza abonisa kwakhona into efihliweyo kwindawo yakho yokujonga yangoku.

Incinci kakhulu ✔ Ifihliwe ku-x-encinci

Incinci ✔ Ifihlwe kwizinto ezincinci

Phakathi ✔ Ifihlwe phakathi

Enkulu ✔ Ifihliwe kwindawo enkulu

Incinci encinci kunye nencinci ✔ Ifihlwe kwi-x-encinci kunye nencinci

Phakathi kwaye inkulu ✔ Ifihlwe phakathi nendawo enkulu

Incinci encinci kunye nephakathi ✔ Ifihlwe ku-x-encinci naphakathi

Incinci kwaye inkulu ✔ Ifihlwe kwizinto ezincinci nezinkulu

Incinci kakhulu kwaye inkulu ✔ Ifihliwe kwi-x-encinci kunye enkulu

Encinci naphakathi ✔ Ifihlwe kwizinto ezincinci neziphakathi

I-Bootstrap's CSS yakhelwe kuNcinane, iprosesa engaphambili enomsebenzi owongezelelweyo onjengezinto eziguquguqukayo, imixube, kunye nemisebenzi yokuqulunqa iCSS. Abo bajonge ukusebenzisa umthombo Iifayile ezincinci endaweni yeefayile zethu ezihlanganisiweyo zeCSS zinokusebenzisa iinguqu ezininzi kunye nemixube esiyisebenzisayo kwisakhelo sonke.

Izinto eziguquguqukayo zegridi kunye nemixube zigutyungelwe ngaphakathi kwecandelo lenkqubo yeGridi .

Ukuqulunqa iBootstrap

I-Bootstrap ingasetyenziswa ubuncinane ngeendlela ezimbini: nge-CSS ehlanganisiweyo okanye ngomthombo Iifayile ezincinci. Ukuqulunqa iifayile eziNcinci, jonga icandelo loQalisa malunga nendlela yokucwangcisa imeko-bume yakho yophuhliso ukusebenzisa imiyalelo eyimfuneko.

Izixhobo zokuhlanganisa zomntu wesithathu zinokusebenza neBootstrap, kodwa azixhaswa liqela lethu eliphambili.

Izinto eziguquguqukayo

Izinto eziguquguqukayo zisetyenziswa kuyo yonke iprojekthi njengendlela yokubeka embindini kunye nokwabelana ngexabiso eliqhelekileyo elisetyenziswa njengemibala, izithuba, okanye izitaki zefonti. Ukuze ufumane ulwahlulo olupheleleyo, nceda ubone uMthengi .

Imibala

Kulula ukusebenzisa izikimu zemibala emibini: igreyscale kunye nesemantic. Imibala engwevu inika ufikelelo olukhawulezayo kwimithunzi emnyama esetyenziswa ngokuqhelekileyo ngelixa i-semantic iquka imibala eyahlukeneyo eyabelwe amaxabiso anentsingiselo yomxholo.

@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 naziphi na ezi ziguquguqukayo zemibala njengoko zinjalo okanye uzinike kwakhona kwizinto ezinentsingiselo ngakumbi kwiprojekthi yakho.

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

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

Isikafula

Iqela lezinto eziguquguqukayo zokwenza ngokwezifiso izinto eziphambili zamathambo esayithi lakho.

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

Unxulumano

Yenza ngokulula amakhonkco akho ngombala ochanekileyo onexabiso elinye 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 ukuba @link-hover-colorisebenzisa umsebenzi, esinye isixhobo esoyikekayo esisuka kuMncinci, ukwenza ngokuzenzekelayo umbala ochanekileyo we-hover. Ungasebenzisa darken, lighten, saturate, kunye desaturate.

Ukuchwetheza

Seta ngokulula isimbo sakho sokuchwetheza, ubungakanani bombhalo, ukukhokela, kunye nokunye okuguquguqukayo okumbalwa okukhawulezayo. I-Bootstrap yenza ukusetyenziswa kwezi kunye nokubonelela ngemixube yokuchwetheza 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;

Iimpawu zomqondiso

Iinguqu ezimbini ezikhawulezayo zokwenza ngokwezifiso indawo kunye negama lefayile yee-icon zakho.

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

Amacandelo

Izixhobo kuyo yonke iBootstrap zisebenzisa ezinye iinguqu ezingagqibekanga zokuseta amaxabiso aqhelekileyo. Nazi ezona zisetyenziswa 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;

Imixube yabathengisi

Imixube yabathengisi yimixube yokunceda ukuxhasa izikhangeli ezininzi ngokubandakanya zonke izimaphambili zabathengisi ezifanelekileyo kwiCSS yakho ehlanganisiweyo.

Ubungakanani bebhokisi

Seta kwakhona imodeli yebhokisi yezixhobo ngomxube omnye. Ngomxholo, jonga eli nqaku eliluncedo elivela kwiMozilla .

I -mixin ihoxisiwe njenge- v3.2.0 , kunye nokuqaliswa kwe-Autoprefixer. Ukugcina umva-ukuhambelana, iBootstrap iya kuqhubeka nokusebenzisa i-mixin ngaphakathi de iBootstrap v4.

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

Iikona ezingqukuva

Namhlanje zonke iibrowser zale mihla zixhasa ipropathi engena-prefixed border-radius. Ngokunjalo, akukho .border-radius()mixin, kodwa iBootstrap ibandakanya iindlela ezimfutshane zokurhangqa iikona ezimbini kwicala elithile lento.

.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 (Yehla) izithunzi

Ukuba abaphulaphuli bakho abajolise kubo basebenzisa iibhrawuza zamva nje nezibalaseleyo kunye nezixhobo, qiniseka ukuba usebenzisa box-shadowipropathi yodwa. Ukuba ufuna inkxaso ye-Android endala (i-pre-v4) kunye nezixhobo ze-iOS (i-pre-iOS 5), sebenzisa i- mixin eyehliweyo ukuchola okufunekayo.-webkit isimaphambili esifunekayo.

I-mixin ihoxisiwe njenge-v3.1.0, ekubeni i-Bootstrap ayixhasi ngokusemthethweni iiplatifomu eziphelelwe yisikhathi ezingaxhasi ipropati eqhelekileyo. Ukugcina umva-ukuhambelana, iBootstrap iya kuqhubeka nokusebenzisa i-mixin ngaphakathi de iBootstrap v4.

Qiniseka ukuba usebenzisa rgba()imibala kwizithunzi zebhokisi yakho ukuze idibane ngokungenamthungo kunye nemvelaphi.

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

Iinguqu

Imixube emininzi yokuguquguquka. Seta lonke ulwazi lotshintsho ngenye, okanye uchaze ukulibaziseka okwahlukileyo kunye nobude bexesha njengoko kufuneka.

I - mixins iyancipha njenge-v3.2.0, kunye nokwaziswa kwe-Autoprefixer. Ukugcina umva-ukuhambelana, iBootstrap iya kuqhubeka nokusebenzisa imixube ngaphakathi de iBootstrap 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;
}

Iinguqu

Jikelezisa, sikali, tolika (shenxa), okanye ujike nayiphi na into.

I - mixins iyancipha njenge-v3.2.0, kunye nokwaziswa kwe-Autoprefixer. Ukugcina umva-ukuhambelana, iBootstrap iya kuqhubeka nokusebenzisa imixube ngaphakathi de iBootstrap v4.

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

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

Oopopayi

Umxube omnye wokusebenzisa zonke iipropati zoopopayi ze-CSS3 kwisibhengezo esinye kunye neminye imixube yeepropati zomntu ngamnye.

I - mixins iyancipha njenge-v3.2.0, kunye nokwaziswa kwe-Autoprefixer. Ukugcina umva-ukuhambelana, iBootstrap iya kuqhubeka nokusebenzisa imixube ngaphakathi de iBootstrap v4.

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

Ukungaboni kakuhle

Cwangcisa ukungafihli kuzo zonke iibhrawuza kwaye unike filterumva we-IE8.

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

Isiqendu sesibambi-ndawo

Nika umxholo wolawulo lwefom ngaphakathi kwendawo nganye.

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

Imihlathi

Yenza iikholamu ngeCSS ngaphakathi kwendawo enye.

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

Izithambiso

Jika ngokulula nayiphi na imibala emibini ibe yigradient yangasemva. Fumana phambili ngakumbi kwaye usete isalathiso, sebenzisa imibala emithathu, okanye sebenzisa i-radial gradient. Ngomxube omnye ufumana zonke ii-syntaxes ezimiselweyo oza kuzifuna.

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

Ungakhankanya kwakhona i-engile yomgangatho wemibala emibini, umyinge womgama:

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

Ukuba ufuna isitayile somgca we-barber-stripe, kulula loo nto, nayo. Cacisa nje umbala omnye kwaye siya kwaleka ngomgca omhlophe okhanyayo.

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

Phakamisa i-ante kwaye usebenzise imibala emithathu endaweni yoko. Cwangcisa umbala wokuqala, umbala wesibini, umbala wesibini wokuyeka (ixabiso lepesenti elifana ne-25%), kunye nombala wesithathu ngale mixube:

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

Iintloko phezulu! Ukuba ufuna ukususa i-gradient, qiniseka ukuba uyayisusa nayiphi na i-IE-specific filteronokuthi wongezile. Unokwenza oko ngokusebenzisa i- .reset-filter()mixin ecaleni background-image: none;.

Imixube eluncedo

Imixube eluncedo yimixube edibanisa ezinye iipropati zeCSS ezingahambelaniyo ukufezekisa injongo ethile okanye umsebenzi.

Ukulungisa

Ulibale ukongeza class="clearfix"kuyo nayiphi na into kwaye endaweni yoko wongeza .clearfix()umxube apho kufanelekileyo. Usebenzisa i- micro clearfix evela kuNicolas Gallagher .

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

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

Ukuzinzisa okuthe tye

Khawuleza uzinzise nayiphi na into ngaphakathi komzali wayo. Ifuna widthokanye max-widthimiselwe.

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

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

Ubungakanani abancedisi

Chaza imilinganiselo yento ngokulula ngakumbi.

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

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

Iindawo zokubhaliweyo ezinobungakanani

Lungisa ngokulula iinketho zohlengahlengiso kuyo nayiphi na i-textarea, okanye nayiphi na enye into. Ukungagqibeki kwindlela yokuziphatha eqhelekileyo yesikhangeli ( both).

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

Ukunciphisa umbhalo

Uphungula ngokulula umbhalo ngeellipsis ngomxube omnye. Ifuna into ukuba ibe blockokanye inline-blockinqanaba.

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

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

Imifanekiso yeretina

Chaza iindlela ezimbini zemifanekiso kunye nomlinganiselo we-@1x womfanekiso, kwaye i-Bootstrap iya kubonelela ngombuzo we-@2x wemidiya. Ukuba unemifanekiso emininzi onokuyisebenzisa, cinga ngokubhala umfanekiso wakho weretina CSS ngesandla kumbuzo omnye 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);
}

Ngelixa i-Bootstrap yakhelwe kwi-Ngancinci, nayo ine- port esemthethweni ye-Sass . Siyigcina kwindawo eyahlukileyo yeGitHub kwaye siphatha uhlaziyo ngeskripthi sokuguqula.

Yintoni ebandakanyiweyo

Kuba izibuko le-Sass linerepo eyahlukileyo kwaye isebenzela abaphulaphuli abahluke kancinane, imixholo yeprojekthi yahluke kakhulu kwiprojekthi yeBootstrap. Oku kuqinisekisa ukuba izibuko le-Sass liyahambelana neenkqubo ezininzi ezisekelwe kwi-Sass kangangoko kunokwenzeka.

Indlela	Inkcazo
`lib/`	Ikhowudi yegem yeRuby (ubumbeko lweSass, iiRails kunye nodibaniso lweCompass)
`tasks/`	Izikripthi zokuguqula (ujika umsinga unyuke kancinci ukuya kwiSass)
`test/`	Iimvavanyo zokuhlanganisa
`templates/`	Umboniso wepakethe yeCompass
`vendor/assets/`	Sass, JavaScript, kunye neefayile zefonti
`Rakefile`	Imisebenzi yangaphakathi, efana neraki kunye nokuguqula

Ndwendwela indawo yokugcina ye-GitHub ye-Sass ukuze ubone ezi fayile zisebenza.

Ukuhlohla

Ngolwazi malunga nendlela yokufaka kunye nokusebenzisa i-Bootstrap ye-Sass, jonga kwindawo yokugcina i- GitHub readme . Ngowona mthombo uhlaziyiweyo kwaye uquka ulwazi olunokusetyenziswa nooLoliwe, iCompass, kunye neeprojekthi ezisemgangathweni zeSass.

I-Bootstrap ye-Sass

CSS

Isishwankathelo

HTML5 doctype

Iselula kuqala

Ukuchwetheza kunye namakhonkco

Normalize.css

Izikhongozeli

Inkqubo yegridi

Intshayelelo

Imibuzo yemidiya

Iinketho zegridi

Umzekelo: Ibekwe ngokuthe tye

Umzekelo: Isikhongozeli solwelo

Umzekelo: Iselula kunye nedesktop

Umzekelo: Iselula, ithebhulethi, idesktop

Umzekelo: Ukusonga ikholamu

Ukusetha kwakhona ikholamu ephendulayo

Susa iigatha

Imihlathi yokumisela

Imihlathi yokufuya

Ukuodola ikholamu

Iingxube ezincinci kunye neziguquguqukayo

Izinto eziguquguqukayo

Imixube

Umzekelo wokusetyenziswa

Ukuchwetheza

Izihloko

h1. Isihloko seBootstrap

h2. Isihloko seBootstrap

h3. Isihloko seBootstrap

h4. Isihloko seBootstrap

h5. Isihloko seBootstrap

h6. Isihloko seBootstrap

h1. Isihloko se-Bootstrap Umbhalo wesibini

h2. Isihloko se-Bootstrap Umbhalo wesibini

h3. Isihloko se-Bootstrap Umbhalo wesibini

h4. Isihloko se-Bootstrap Umbhalo wesibini

h5. Isihloko se-Bootstrap Umbhalo wesibini

h6. Isihloko se-Bootstrap Umbhalo wesibini

Ikopi yomzimba

Ikopi yomzimba okhokelayo

Yakhiwe ngeNcinci

Iimpawu zesicatshulwa esingaphakathi

Isicatshulwa esiphawulweyo

Umbhalo ocinyiweyo

Isiqendu sokubetha

Umbhalo ofakiweyo

Isicatshulwa esikrwelelwe umgca ngaphantsi

Isicatshulwa esincinci

Engqindilili

akekeliswe sithi

Ezinye izinto

Iiklasi zokulungelelanisa

Iiklasi zenguqu

Ushunqulelo

Isishunqulelo esisisiseko

Ukuqala

Iidilesi

Iingcaphuno zebhloko

I-blockquote ehlala ikho

Iinketho zeBlockquote

Ukuchaza umthombo

Enye imiboniso

Uluhlu

Ayiodolwanga

Iodolwe

Ayifakwanga isimbo

Nomgca

Inkcazo

Inkcazo ethe tye

Ukunciphisa ngokuzenzekelayo

Ikhowudi

Nomgca

Igalelo lomsebenzisi

Ibhloko esisiseko

Izinto eziguquguqukayo

Imveliso yesampuli

Iitafile

Umzekelo osisiseko

Imiqolo enemigca

`:focus`Imeko yedemo

I-Caveat malunga nokusebenza kwekhonkco`<a>`

`.sr-only`Ii icon ozikhethelayo ezineelebhile ezifihliweyo