Pata hali ya chini juu ya vipande muhimu vya miundomsingi ya Bootstrap, ikijumuisha mbinu yetu ya ukuzaji wavuti bora, wa haraka na thabiti.

HTML5 aina ya hati

Bootstrap hutumia vipengele fulani vya HTML na sifa za CSS ambazo zinahitaji matumizi ya aina ya hati ya HTML5. Ijumuishe mwanzoni mwa miradi yako yote.

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

Simu kwanza

Kwa Bootstrap 2, tuliongeza mitindo ya hiari ya kirafiki ya simu kwa vipengele muhimu vya mfumo. Kwa Bootstrap 3, tumeandika upya mradi kuwa wa kirafiki wa simu tangu mwanzo. Badala ya kuongeza mitindo ya hiari ya simu ya mkononi, imeokwa hadi msingi. Kwa kweli, Bootstrap ni simu ya kwanza . Mitindo ya kwanza ya rununu inaweza kupatikana katika maktaba yote badala ya faili tofauti.

Ili kuhakikisha uwasilishaji unaofaa na ukuzaji wa mguso, ongeza lebo ya meta ya kituo cha kutazama kwenye <head>.

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

Unaweza kuzima uwezo wa kukuza kwenye vifaa vya mkononi kwa kuongeza user-scalable=nometa tagi ya kituo cha kutazama. Hii inalemaza ukuzaji, kumaanisha kuwa watumiaji wanaweza tu kusogeza, na kusababisha tovuti yako kuhisi zaidi kama programu asilia. Kwa ujumla, hatupendekezi hili kwenye kila tovuti, kwa hivyo tumia tahadhari!

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

Uchapaji na viungo

Bootstrap huweka onyesho msingi la kimataifa, uchapaji, na mitindo ya viungo. Hasa, sisi:

Weka background-color: #fff;kwenyebody
Tumia @font-family-base, @font-size-base, na @line-height-basesifa kama msingi wetu wa uchapaji
Weka rangi ya kiungo cha kimataifa kupitia @link-colorna tumia mistari ya chini ya kiungo kwenye tu:hover

Mitindo hii inaweza kupatikana ndani scaffolding.less.

Normalize.css

Kwa uwasilishaji ulioboreshwa wa kivinjari, tunatumia Normalize.css , mradi wa Nicolas Gallagher na Jonathan Neal .

Vyombo

Bootstrap inahitaji kipengee chenye kukunja yaliyomo kwenye tovuti na kuweka mfumo wetu wa gridi ya taifa. Unaweza kuchagua moja ya vyombo viwili vya kutumia katika miradi yako. Kumbuka kuwa, kwa sababu paddingna zaidi, hakuna chombo kinachoweza kuota.

Tumia .containerkwa chombo kinachojibu cha upana usiobadilika.

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

Tumia .container-fluidkwa kontena la upana kamili, linalojumuisha upana mzima wa kituo chako cha kutazama.

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

Bootstrap inajumuisha msikivu, mfumo wa gridi ya giligili ya simu ya kwanza ambayo ina viwango ipasavyo hadi safu wima 12 kadiri ukubwa wa kifaa au kituo cha kutazama unavyoongezeka. Inajumuisha madarasa yaliyofafanuliwa awali kwa chaguo rahisi za mpangilio, pamoja na michanganyiko yenye nguvu ya kutengeneza mipangilio zaidi ya kisemantiki .

Utangulizi

Mifumo ya gridi hutumiwa kuunda mipangilio ya ukurasa kupitia safu mlalo na safu wima zinazohifadhi maudhui yako. Hivi ndivyo mfumo wa gridi ya Bootstrap unavyofanya kazi:

Safu lazima ziwekwe ndani ya .container(upana usiobadilika) au .container-fluid(upana kamili) kwa upangaji sahihi na pedi.
Tumia safu mlalo kuunda vikundi vya safu mlalo.
Maudhui yanapaswa kuwekwa ndani ya safu wima, na safu wima pekee ndizo zinazoweza kuwa watoto wa karibu wa safu mlalo.
Madarasa ya gridi yaliyofafanuliwa kama .rowna .col-xs-4yanapatikana kwa kutengeneza mipangilio ya gridi kwa haraka. Mchanganyiko mdogo pia unaweza kutumika kwa mipangilio zaidi ya semantic.
Safu wima huunda mifereji ya maji (mapengo kati ya yaliyomo kwenye safu wima) kupitia padding. Ufungaji huo umewekwa katika safu mlalo kwa safu wima ya kwanza na ya mwisho kupitia ukingo hasi kwenye .rows.
Upeo hasi ni kwa nini mifano hapa chini ni ya nje. Ni ili maudhui ndani ya safu wima ya gridi yawe yamepangwa na yasiyo ya gridi.
Safu wima za gridi huundwa kwa kubainisha idadi ya safu wima kumi na mbili zinazopatikana unazotaka kueneza. Kwa mfano, safu wima tatu sawa zinaweza kutumia tatu .col-xs-4.
Ikiwa zaidi ya safu wima 12 zimewekwa ndani ya safu mlalo moja, kila kikundi cha safu wima za ziada, kama kitengo kimoja, kitafunga mstari mpya.
Madarasa ya gridi ya taifa yanatumika kwa vifaa vilivyo na upana wa skrini kubwa kuliko au sawa na ukubwa wa sehemu za kukatika, na kubatilisha madarasa ya gridi yanayolengwa kwenye vifaa vidogo. Kwa hivyo, kwa mfano, kutumia .col-md-*darasa lolote kwenye kipengele hakutaathiri tu mtindo wake kwenye vifaa vya kati lakini pia kwenye vifaa vikubwa ikiwa .col-lg-*darasa halipo.

Angalia mifano ya kutumia kanuni hizi kwenye msimbo wako.

Maswali ya media

Tunatumia hoja zifuatazo za maudhui katika faili zetu za Chini ili kuunda vianzio muhimu katika mfumo wetu wa gridi ya taifa.

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

Mara kwa mara tunapanua hoja hizi za maudhui ili kujumuisha max-widthkuweka kikomo CSS kwa seti nyembamba ya vifaa.

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

Chaguzi za gridi ya taifa

Tazama jinsi vipengele vya mfumo wa gridi ya Bootstrap hufanya kazi kwenye vifaa vingi vilivyo na jedwali rahisi.

	Vifaa vidogo vya ziada Simu (<768px)	Kompyuta Kibao ya vifaa vidogo (≥768px)	Kompyuta ya mezani ya vifaa vya wastani (≥992px)	Kompyuta ya mezani ya vifaa vikubwa (≥1200px)
Tabia ya gridi	Mlalo wakati wote	Imekunjwa ili kuanza, mlalo juu ya viingilio
Upana wa chombo	Hakuna (otomatiki)	750px	970px	1170px
Kiambishi awali cha darasa	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`
# ya safu wima	12
Upana wa safu wima	Otomatiki	~px 62	~81px	~px 97
Upana wa gutter	30px (px 15 kila upande wa safu)
Nestable	Ndiyo
Vipunguzo	Ndiyo
Kuagiza safu	Ndiyo

Mfano: Imepangwa kwa mlalo

Kwa kutumia seti moja ya .col-md-*madarasa ya gridi ya taifa, unaweza kuunda mfumo wa msingi wa gridi ya taifa unaoanza kwa kupangwa kwenye vifaa vya mkononi na vifaa vya kompyuta kibao (safu ndogo zaidi hadi ndogo) kabla ya kuwa mlalo kwenye vifaa vya mezani (kati). Weka safu wima za gridi yoyote .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>

Mfano: Chombo cha maji

Geuza mpangilio wowote wa gridi ya upana usiobadilika kuwa mpangilio wa upana kamili kwa kubadilisha sehemu yako ya nje .containerkuwa .container-fluid.

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

Mfano: Simu ya rununu na kompyuta ya mezani

Je, hutaki safu wima zako zirundikane katika vifaa vidogo? Tumia madarasa ya gridi ya kifaa kidogo na cha kati zaidi kwa kuongeza .col-xs-* .col-md-*safu wima zako. Tazama mfano hapa chini kwa wazo bora la jinsi yote inavyofanya kazi.

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

Mfano: Simu ya rununu, kompyuta kibao, eneo-kazi

Jenga juu ya mfano uliopita kwa kuunda mipangilio inayobadilika zaidi na yenye nguvu na .col-sm-*madarasa ya kompyuta kibao.

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

Mfano: Kufunga safu

Ikiwa zaidi ya safu wima 12 zimewekwa ndani ya safu mlalo moja, kila kikundi cha safu wima za ziada, kama kitengo kimoja, kitafunga mstari mpya.

.col-xs-9

.col-xs-4
Tangu 9 + 4 = 13 > 12, div hii ya safu wima 4 inafungwa kwenye mstari mpya kama kitengo kimoja kinachoambatana.

.col-xs-6 Safu
wima zinazofuata zinaendelea kwenye mstari mpya.

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

Safu wima inayojibu imewekwa upya

Ukiwa na safu nne za gridi zinazopatikana utalazimika kukumbana na masuala ambapo, katika sehemu fulani za uvunjaji, safu wima zako hazionekani sawa kabisa kwani moja ni ndefu kuliko nyingine. Ili kurekebisha hilo, tumia mchanganyiko wa a .clearfixna darasa letu la matumizi linalojibu .

.col-xs-6 .col-sm-3
Badilisha ukubwa wa tovuti yako ya kutazama au iangalie kwenye simu yako kwa mfano.

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

Kando na kusafisha safu wima katika sehemu za kukiuka zinazoitikia, huenda ukahitaji kuweka upya vipengee, misukumo au mivutano . Tazama hii katika vitendo katika mfano wa gridi ya taifa .

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

Kuweka safu wima

Sogeza safu kulia kwa kutumia .col-md-offset-*madarasa. Madarasa haya huongeza ukingo wa kushoto wa safu kwa safu *wima. Kwa mfano, .col-md-offset-4husogea .col-md-4zaidi ya safu wima nne.

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

Unaweza pia kubatilisha urekebishaji kutoka kwa viwango vya chini vya gridi kwa kutumia .col-*-offset-0madarasa.

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

Safu wima za kuota

Ili kuweka maudhui yako kwa gridi chaguo-msingi, ongeza safu mpya .rowna seti ya .col-sm-*safu wima iliyopo .col-sm-*. Safu mlalo zilizowekwa lazima zijumuishe seti ya safu wima zinazoongeza hadi 12 au chache (si lazima utumie safu wima zote 12 zilizopo).

Kiwango cha 1: .col-sm-9

Kiwango cha 2: .col-xs-8 .col-sm-6

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

Kuagiza safu

Badilisha kwa urahisi mpangilio wa safu wima za gridi zilizojengewa ndani .col-md-push-*na .col-md-pull-*madarasa ya kurekebisha.

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

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

Mchanganyiko mdogo na vigezo

Kando na madarasa ya gridi yaliyoundwa awali kwa mipangilio ya haraka, Bootstrap inajumuisha vijiti Vichache na vichanganyiko vya kutengeneza kwa haraka miundo yako rahisi na ya kimantiki.

Vigezo

Vigezo huamua idadi ya safu wima, upana wa mfereji wa maji, na sehemu ya hoja ya midia ambapo safu wima zinazoelea zinaweza kuanza. Tunatumia hizi ili kutengeneza madarasa ya gridi yaliyofafanuliwa awali yaliyoandikwa hapo juu, na vile vile kwa michanganyiko maalum iliyoorodheshwa hapa chini.

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

Mchanganyiko

Michanganyiko hutumiwa pamoja na vigeu vya gridi ya taifa ili kutoa CSS ya kisemantiki kwa safu wima za gridi mahususi.

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

Mfano wa matumizi

Unaweza kurekebisha anuwai kwa maadili yako mwenyewe, au tumia tu mchanganyiko na maadili yao ya msingi. Huu hapa ni mfano wa kutumia mipangilio chaguo-msingi ili kuunda mpangilio wa safu wima mbili na pengo kati.

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

Vichwa

Vichwa vyote vya HTML, <h1>kupitia <h6>, vinapatikana. .h1kupitia .h6madarasa zinapatikana pia, kwa wakati unataka kulinganisha mtindo wa fonti wa kichwa lakini bado unataka maandishi yako yaonyeshwe ndani ya mstari.

h1. Kichwa cha bootstrap	Nusubold 36px
h2. Kichwa cha bootstrap	Nusubold 30px
h3. Kichwa cha bootstrap	Nusubold 24px
h4. Kichwa cha bootstrap	Nusubold 18px
h5. Kichwa cha bootstrap	Nusubold 14px
h6. Kichwa cha bootstrap	Nusubold 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>

Unda maandishi mepesi, ya upili katika kichwa chochote ukitumia <small>lebo ya jumla au .smalldarasa.

h1. Maandishi ya pili ya kichwa cha buti

h2. Maandishi ya pili ya kichwa cha buti

h3. Maandishi ya pili ya kichwa cha buti

h4. Maandishi ya pili ya kichwa cha buti

h5. Maandishi ya pili ya kichwa cha buti

h6. Maandishi ya pili ya kichwa cha buti

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

Nakala ya mwili

Chaguo-msingi la kimataifa la Bootstrap font-sizeni 14px , line-heightna 1.428 . Hii inatumika kwa <body>aya na aya zote. Kwa kuongeza, <p>(aya) hupokea ukingo wa chini wa nusu ya urefu wa mstari uliokokotwa (10px kwa chaguo-msingi).

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

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

<p>...</p>

Nakala ya mwili inayoongoza

Fanya aya isimame kwa kuongeza .lead.

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

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

Imejengwa kwa Chini

Kiwango cha uchapaji kinatokana na vigeu viwili vya Chini katika vigeu.less : @font-size-basena @line-height-base. Ya kwanza ni saizi ya msingi ya fonti inayotumika kote na ya pili ni urefu wa msingi wa mstari. Tunatumia vigeu hivyo na hesabu rahisi kuunda kando, pedi, na urefu wa mstari wa aina zetu zote na zaidi. Zibinafsishe na ubadilishe Bootstrap.

Vipengele vya maandishi ya ndani

Maandishi yaliyowekwa alama

Ili kuangazia mtiririko wa maandishi kwa sababu ya umuhimu wake katika muktadha mwingine, tumia <mark>lebo.

Unaweza kutumia alama ya lebokuonyeshamaandishi.

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

Maandishi yaliyofutwa

Kwa kuonyesha vizuizi vya maandishi ambavyo vimefutwa tumia <del>lebo.

~~Mstari huu wa maandishi unakusudiwa kuchukuliwa kama maandishi yaliyofutwa.~~

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

Maandishi ya kuvutia

Ili kuonyesha vizuizi vya maandishi ambavyo havifai tena tumia <s>lebo.

~~Mstari huu wa maandishi unakusudiwa kuchukuliwa kuwa si sahihi tena.~~

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

Maandishi yaliyoingizwa

Kwa kuonyesha nyongeza kwenye hati tumia <ins>lebo.

Mstari huu wa maandishi unakusudiwa kuzingatiwa kama nyongeza ya hati.

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

Maandishi yaliyopigiwa mstari

Ili kupigia mstari maandishi tumia <u>lebo.

Mstari huu wa maandishi utatoa kama ilivyopigiwa mstari

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

Tumia lebo za mkazo chaguomsingi za HTML na mitindo nyepesi.

Nakala ndogo

Ili kuondoa mkazo ndani ya mstari au vizuizi vya maandishi, tumia <small>lebo kuweka maandishi katika 85% ya ukubwa wa mzazi. Vipengee vya kichwa hupokea vyao font-sizekwa <small>vipengele vilivyowekwa.

Unaweza kutumia kipengee cha .smallndani badala ya <small>.

Mstari huu wa maandishi unakusudiwa kuzingatiwa kama chapa nzuri.

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

Ujasiri

Kwa kusisitiza kijisehemu cha maandishi na uzito wa fonti nzito zaidi.

Kijisehemu kifuatacho cha maandishi kinatolewa kama maandishi mazito .

<strong>rendered as bold text</strong>

Italiki

Kwa kusisitiza kijisehemu cha maandishi chenye italiki.

Kijisehemu kifuatacho cha maandishi kinatolewa kama maandishi ya italiki .

<em>rendered as italicized text</em>

Vipengele mbadala

Jisikie huru kutumia <b>na <i>katika HTML5. <b>inakusudiwa kuangazia maneno au vifungu vya maneno bila kuwasilisha umuhimu wa ziada ilhali <i>mara nyingi ni kwa sauti, maneno ya kiufundi, n.k.

Madarasa ya upatanishi

Pangilia maandishi upya kwa vipengele kwa urahisi na madarasa ya upatanishi wa maandishi.

Maandishi yaliyopangiliwa kushoto.

Maandishi yaliyopangiliwa katikati.

Maandishi yaliyopangiliwa kulia.

Maandishi yaliyothibitishwa.

Hakuna maandishi ya kukunja.

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

Madarasa ya mabadiliko

Badilisha maandishi katika vipengele na madarasa ya herufi kubwa ya maandishi.

Maandishi yenye herufi ndogo.

Maandishi yenye herufi kubwa.

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

Vifupisho

Utekelezaji wa mtindo wa <abbr>kipengele cha HTML cha vifupisho na vifupisho ili kuonyesha toleo lililopanuliwa kwenye kielelezo. Vifupisho vyenye titlesifa vina mpaka wa chini wenye nukta nuru na kishale cha usaidizi kwenye kieleeza, ukitoa muktadha wa ziada wa kuelea na kwa watumiaji wa teknolojia saidizi.

Kifupi cha msingi

Kifupi cha neno sifa ni attr .

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

Uanzilishi

Ongeza .initialismkwa kifupi cha saizi ndogo ya fonti.

HTML ndio kitu bora zaidi tangu mkate uliokatwa.

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

Anwani

Wasilisha maelezo ya mawasiliano kwa babu wa karibu au kikundi kizima cha kazi. Hifadhi umbizo kwa kumalizia mistari yote kwa <br>.

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

Jina Kamili
[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>

Nukuu za kuzuia

Kwa kunukuu vizuizi vya maudhui kutoka chanzo kingine ndani ya hati yako.

Nukuu chaguomsingi ya kuzuia

Funga HTML<blockquote> yoyote kama nukuu. Kwa nukuu moja kwa moja, tunapendekeza a .<p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nambari kamili imesababisha ante.

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

Chaguo za dondoo za kuzuia

Mtindo na mabadiliko ya maudhui kwa tofauti rahisi kwenye kiwango <blockquote>.

Kutaja chanzo

Ongeza a <footer>kwa kutambua chanzo. Funga jina la kazi ya chanzo katika <cite>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nambari kamili imesababisha ante.

Mtu maarufu katika Mada ya Chanzo

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

Maonyesho mbadala

Ongeza .blockquote-reversekwa nukuu ya kuzuia iliyo na maudhui yaliyosawazishwa.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nambari kamili imesababisha ante.

Mtu maarufu katika Mada ya Chanzo

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

Orodha

Haijaagizwa

Orodha ya vitu ambavyo mpangilio haujalishi kwa uwazi.

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

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

Imeagizwa

Orodha ya vitu ambavyo agizo lina umuhimu wazi.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Uwezeshaji katika pretium nisl aliquet
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

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

Isiyo na mtindo

Ondoa ukingo chaguomsingi list-stylena wa kushoto kwenye vipengee vya orodha (watoto wa karibu pekee). Hii inatumika tu kwa vipengee vya orodha ya watoto mara moja tu , kumaanisha utahitaji kuongeza darasa kwa orodha zozote zilizoorodheshwa pia.

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

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

Katika mstari

Weka vitu vyote vya orodha kwenye mstari mmoja display: inline-block;na pedi nyepesi.

Lorem ipsum
Phasellus iaculis
Nulla volutpat

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

Maelezo

Orodha ya maneno na maelezo yanayohusiana nayo.

Orodha za maelezo: Orodha ya maelezo ni kamili kwa kufafanua maneno.
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>

Maelezo ya mlalo

Tengeneza masharti na maelezo kwa <dl>mstari kwa upande. Huanza kwa kupangwa kama <dl>s chaguo-msingi, lakini upau wa uelekezaji unapopanuka, fanya hivyo pia.

Orodha za maelezo: Orodha ya maelezo ni kamili kwa kufafanua maneno.
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>

Kupunguza kiotomatiki

Orodha za maelezo mlalo zitapunguza maneno ambayo ni marefu sana kutoshea kwenye safu wima ya kushoto na text-overflow. Katika maeneo finyu ya kutazama, yatabadilika kuwa mpangilio chaguomsingi wa kura.

Katika mstari

Funga vijisehemu vya ndani vya msimbo kwa <code>.

Kwa mfano, <section>inapaswa kufungwa kama inline.

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

Ingizo la mtumiaji

Tumia <kbd>ili kuashiria ingizo ambalo kwa kawaida huingizwa kupitia kibodi.

Ili kubadilisha saraka, chapa cdikifuatiwa na jina la saraka.
Ili kuhariri mipangilio, bonyeza 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>

Kizuizi cha msingi

Tumia <pre>kwa mistari mingi ya msimbo. Hakikisha umeepuka mabano yoyote ya pembe katika msimbo ili utoe sahihi.

<p>Mfano wa maandishi hapa...</p>

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

Unaweza kuongeza kwa hiari.pre-scrollable darasa, ambalo litaweka urefu wa juu wa 350px na kutoa upau wa kusogeza wa y-axis.

Vigezo

Kwa kuashiria vigezo tumia <var>lebo.

y = m x + b

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

Sampuli ya pato

Ili kuonyesha sampuli za vizuizi kutoka kwa programu tumia <samp>lebo.

Maandishi haya yanakusudiwa kuzingatiwa kama sampuli ya pato kutoka kwa programu ya kompyuta.

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

Mfano wa msingi

Kwa mtindo wa kimsingi - pedi nyepesi na vigawanyiko vya mlalo pekee - ongeza darasa la msingi .tablekwa yoyote <table>. Inaweza kuonekana kuwa ya ziada sana, lakini kutokana na kuenea kwa matumizi ya jedwali kwa programu-jalizi zingine kama vile kalenda na vichagua tarehe, tumechagua kutenga mitindo yetu maalum ya jedwali.

Manukuu ya jedwali ya hiari.
#	Jina la kwanza	Jina la familia	Jina la mtumiaji
1	Weka alama	Otto	@mdo
2	Yakobo	Thornton	@mafuta
3	Larry	ndege	@twitter

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

Safu zenye mistari

Tumia .table-stripedkuongeza zebra-striping kwenye safu mlalo yoyote ya jedwali ndani ya <tbody>.

Utangamano wa kivinjari

Jedwali zenye milia huwekwa mtindo kupitia kiteuzi cha :nth-childCSS, ambacho hakipatikani katika Internet Explorer 8.

#	Jina la kwanza	Jina la familia	Jina la mtumiaji
1	Weka alama	Otto	@mdo
2	Yakobo	Thornton	@mafuta
3	Larry	ndege	@twitter

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

Jedwali la mipaka

Ongeza .table-borderedkwa mipaka pande zote za jedwali na seli.

#	Jina la kwanza	Jina la familia	Jina la mtumiaji
1	Weka alama	Otto	@mdo
2	Yakobo	Thornton	@mafuta
3	Larry	ndege	@twitter

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

Elea safu

Ongeza .table-hoverili kuwezesha hali ya kuelea kwenye safu mlalo za jedwali ndani ya <tbody>.

#	Jina la kwanza	Jina la familia	Jina la mtumiaji
1	Weka alama	Otto	@mdo
2	Yakobo	Thornton	@mafuta
3	Larry	ndege	@twitter

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

Jedwali lililofupishwa

Ongeza .table-condensedili kufanya meza kushikana zaidi kwa kukata pedi za seli katikati.

#	Jina la kwanza	Jina la familia	Jina la mtumiaji
1	Weka alama	Otto	@mdo
2	Yakobo	Thornton	@mafuta
3	Larry Ndege		@twitter

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

Madarasa ya muktadha

Tumia madarasa ya muktadha kupaka rangi safu mlalo za jedwali au seli mahususi.

Darasa	Maelezo
`.active`	Hutumia rangi ya kuelea kwenye safu mlalo au seli fulani
`.success`	Inaonyesha hatua iliyofanikiwa au chanya
`.info`	Inaonyesha mabadiliko ya taarifa ya upande wowote au kitendo
`.warning`	Inaonyesha onyo ambalo linaweza kuhitaji kuzingatiwa
`.danger`	Huonyesha kitendo hatari au kinachoweza kuwa hasi

#	Kichwa cha safu wima	Kichwa cha safu wima	Kichwa cha safu wima
1	Maudhui ya safuwima	Maudhui ya safuwima	Maudhui ya safuwima
2	Maudhui ya safuwima	Maudhui ya safuwima	Maudhui ya safuwima
3	Maudhui ya safuwima	Maudhui ya safuwima	Maudhui ya safuwima
4	Maudhui ya safuwima	Maudhui ya safuwima	Maudhui ya safuwima
5	Maudhui ya safuwima	Maudhui ya safuwima	Maudhui ya safuwima
6	Maudhui ya safuwima	Maudhui ya safuwima	Maudhui ya safuwima
7	Maudhui ya safuwima	Maudhui ya safuwima	Maudhui ya safuwima
8	Maudhui ya safuwima	Maudhui ya safuwima	Maudhui ya safuwima
9	Maudhui ya safuwima	Maudhui ya safuwima	Maudhui ya safuwima

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

Kuwasilisha maana kwa teknolojia za usaidizi

Kutumia rangi ili kuongeza maana kwenye safu mlalo ya jedwali au kisanduku mahususi hutoa tu kiashiria cha kuona, ambacho hakitawasilishwa kwa watumiaji wa teknolojia saidizi - kama vile visoma skrini. Hakikisha kwamba maelezo yanayoashiriwa na rangi ni dhahiri kutoka kwa maudhui yenyewe (maandishi yanayoonekana katika safu mlalo/kisanduku cha jedwali husika), au yamejumuishwa kupitia njia mbadala, kama vile maandishi ya ziada yaliyofichwa na .sr-onlydarasa.

Majedwali ya mwitikio

Unda majedwali yanayojibu kwa kufunga yoyote .tablendani .table-responsiveili kuwafanya kusogeza kwa mlalo kwenye vifaa vidogo (chini ya 768px). Unapotazama kwenye kitu chochote kikubwa kuliko upana wa 768px, hutaona tofauti yoyote katika majedwali haya.

Ukataji/upunguzaji wima

Majedwali jibu hutumia overflow-y: hidden, ambayo huondoa maudhui yoyote ambayo huenda zaidi ya kingo za chini au za juu za jedwali. Hasa, hii inaweza kupunguza menyu kunjuzi na wijeti zingine za wahusika wengine.

Firefox na seti za shamba

Firefox ina mtindo mbaya wa mpangilio unaohusisha widthambao unaingilia jedwali jibu. Hii haiwezi kubatilishwa bila udukuzi maalum wa Firefox ambao hatutoi katika Bootstrap:

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

Kwa habari zaidi, soma jibu hili la Kufurika kwa Stack .

#	Kichwa cha jedwali	Kichwa cha jedwali	Kichwa cha jedwali	Kichwa cha jedwali	Kichwa cha jedwali	Kichwa cha jedwali
1	Jedwali la seli	Jedwali la seli	Jedwali la seli	Jedwali la seli	Jedwali la seli	Jedwali la seli
2	Jedwali la seli	Jedwali la seli	Jedwali la seli	Jedwali la seli	Jedwali la seli	Jedwali la seli
3	Jedwali la seli	Jedwali la seli	Jedwali la seli	Jedwali la seli	Jedwali la seli	Jedwali la seli

#	Kichwa cha jedwali	Kichwa cha jedwali	Kichwa cha jedwali	Kichwa cha jedwali	Kichwa cha jedwali	Kichwa cha jedwali
1	Jedwali la seli	Jedwali la seli	Jedwali la seli	Jedwali la seli	Jedwali la seli	Jedwali la seli
2	Jedwali la seli	Jedwali la seli	Jedwali la seli	Jedwali la seli	Jedwali la seli	Jedwali la seli
3	Jedwali la seli	Jedwali la seli	Jedwali la seli	Jedwali la seli	Jedwali la seli	Jedwali la seli

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

Mfano wa msingi

Vidhibiti vya aina ya mtu binafsi hupokea kiotomatiki mitindo ya kimataifa. Vipengee vyote vya maandishi <input>, <textarea>, na <select>vilivyo na .form-controlvimewekwa width: 100%;kwa chaguomsingi. Funga lebo na vidhibiti .form-groupili kupata nafasi bora zaidi.

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

Usichanganye vikundi vya fomu na vikundi vya kuingiza

Usichanganye vikundi vya fomu moja kwa moja na vikundi vya pembejeo . Badala yake, weka kikundi cha ingizo ndani ya kikundi cha fomu.

Fomu ya ndani

Ongeza .form-inlinekwenye fomu yako (ambayo si lazima iwe a <form>) kwa vidhibiti vilivyopangiliwa kushoto na vilivyo ndani ya mstari. Hii inatumika tu kwa fomu zilizo ndani ya viwanja vya kutazama ambavyo vina upana wa angalau 768px.

Inaweza kuhitaji upana maalum

Ingizo na width: 100%;chaguo zimetumika kwa chaguo-msingi katika Bootstrap. Ndani ya fomu za ndani, tunaweka upya width: auto;ili vidhibiti vingi viweze kukaa kwenye mstari mmoja. Kulingana na mpangilio wako, upana wa ziada maalum unaweza kuhitajika.

Ongeza lebo kila wakati

Visoma skrini vitakuwa na shida na fomu zako ikiwa hutajumuisha lebo kwa kila ingizo. Kwa fomu hizi za ndani, unaweza kuficha lebo kwa kutumia .sr-onlydarasa. Kuna mbinu mbadala zaidi za kutoa lebo kwa teknolojia saidizi, kama vile aria-label, aria-labelledbyau titlesifa. Ikiwa hakuna yoyote kati ya hizi iliyopo, visoma skrini vinaweza kuamua kutumia placeholdersifa, ikiwa iko, lakini kumbuka kuwa matumizi ya placeholderkama badala ya mbinu zingine za kuweka lebo hayashauriwi.

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

Fomu ya usawa

Tumia madarasa ya gridi yaliyofafanuliwa awali ya Bootstrap ili kupangilia lebo na vikundi vya vidhibiti vya fomu katika mpangilio mlalo kwa kuongeza .form-horizontalkwenye fomu (ambayo si lazima iwe <form>). Kufanya hivyo hubadilika .form-groupkuwa kama safu za gridi, kwa hivyo hakuna haja ya .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>

Vidhibiti vinavyotumika

Mifano ya vidhibiti vya kawaida vya fomu vinavyotumika katika muundo wa muundo wa mfano.

Ingizo

Udhibiti wa kawaida wa fomu, uga zinazotegemea maandishi. Inajumuisha usaidizi wa aina zote za HTML5: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, telna color.

Andika tamko linalohitajika

Ingizo zitawekwa mtindo kamili ikiwa tu typezimetangazwa ipasavyo.

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

Vikundi vya kuingiza

Ili kuongeza maandishi au vitufe vilivyounganishwa kabla na/au baada ya maandishi yoyote <input>, angalia kipengele cha kikundi cha ingizo .

Eneo la maandishi

Udhibiti wa fomu ambao unaauni mistari mingi ya maandishi. Badilisha rowssifa inapohitajika.

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

Visanduku vya kuteua na redio

Vikasha tiki ni vya kuchagua chaguo moja au kadhaa katika orodha, ilhali redio ni za kuchagua chaguo moja kutoka nyingi.

Vikasha tiki na redio vilivyozimwa vinaweza kutumika, lakini ili kutoa kiteuzi "kisichoruhusiwa" kwenye kielelezo cha mzazi <label>, utahitaji kuongeza .disableddarasa kwa mzazi .radio, .radio-inline, .checkbox, au .checkbox-inline.

Chaguomsingi (imerundikwa)

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

Visanduku vya kuteua vya ndani na redio

Tumia .checkbox-inlineau .radio-inlinemadarasa kwenye mfululizo wa visanduku vya kuteua au redio kwa vidhibiti vinavyoonekana kwenye laini moja.

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

Vikasha tiki na redio bila maandishi ya lebo

Ikiwa huna maandishi ndani ya <label>, ingizo limewekwa kama unavyotarajia. Hivi sasa inafanya kazi kwenye visanduku vya kuteua na redio zisizo za ndani pekee. Kumbuka bado kutoa aina fulani ya lebo kwa teknolojia za usaidizi (kwa mfano, kutumia 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>

Inachagua

Kumbuka kuwa menyu nyingi za asili zilizochaguliwa - yaani katika Safari na Chrome - zina pembe za mviringo ambazo haziwezi kurekebishwa kupitia border-radiussifa.

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

Kwa <select>vidhibiti vilivyo na multiplesifa, chaguo nyingi huonyeshwa kwa chaguo-msingi.

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

Udhibiti tuli

Unapohitaji kuweka maandishi wazi karibu na lebo ya fomu ndani ya fomu, tumia .form-control-staticdarasa kwenye <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>

Hali ya kuzingatia

Tunaondoa outlinemitindo chaguo-msingi kwenye baadhi ya vidhibiti vya fomu na kuweka a box-shadowbadala yake kwa :focus.

`:focus`Hali ya onyesho

Ingizo la mfano hapo juu hutumia mitindo maalum katika hati zetu ili kuonyesha :focushali kwenye faili ya .form-control.

Jimbo la walemavu

Ongeza disabledsifa ya boolean kwenye ingizo ili kuzuia mwingiliano wa watumiaji. Ingizo zilizozimwa huonekana nyepesi na kuongeza not-allowedmshale.

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

Seti za uga zimezimwa

Ongeza disabledsifa kwa a <fieldset>ili kuzima vidhibiti vyote ndani ya <fieldset>mara moja.

Tahadhari kuhusu utendakazi wa kiungo cha`<a>`

Kwa chaguo-msingi, vivinjari vitashughulikia vidhibiti vyote vya fomu asili ( <input>, <select>na <button>vipengee) ndani <fieldset disabled>kama vilivyozimwa, na kuzuia mwingiliano wa kibodi na kipanya juu yao. Walakini, ikiwa fomu yako pia inajumuisha <a ... class="btn btn-*">vipengee, hivi vitapewa tu mtindo wa pointer-events: none. Kama ilivyobainishwa katika sehemu kuhusu hali ya walemavu kwa vitufe (na haswa katika sehemu ndogo ya vipengee vya nanga), kipengele hiki cha CSS bado hakijasanifiwa na hakitumiki kikamilifu katika Opera 18 na chini, au katika Internet Explorer 11, na imeshinda. Usizuie watumiaji wa kibodi kuweza kuzingatia au kuwezesha viungo hivi. Kwa hivyo ili kuwa salama, tumia JavaScript maalum kuzima viungo kama hivyo.

Utangamano wa kivinjari

Ingawa Bootstrap itatumia mitindo hii katika vivinjari vyote, Internet Explorer 11 na chini haiauni kikamilifu disabledsifa kwenye <fieldset>. Tumia JavaScript maalum ili kuzima uga katika vivinjari hivi.

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

Jimbo la kusoma pekee

Ongeza readonlysifa ya boolean kwenye ingizo ili kuzuia urekebishaji wa thamani ya ingizo. Ingizo za kusoma pekee huonekana nyepesi (kama vile ingizo zilizozimwa), lakini uhifadhi kishale cha kawaida.

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

Nakala ya usaidizi

Zuia maandishi ya usaidizi wa kiwango kwa vidhibiti vya fomu.

Kuhusisha maandishi ya usaidizi na vidhibiti vya fomu

Maandishi ya usaidizi yanapaswa kuhusishwa kwa uwazi na udhibiti wa fomu inayohusiana na kutumia aria-describedbysifa. Hii itahakikisha kuwa teknolojia saidizi - kama vile visoma skrini - vitatangaza maandishi haya ya usaidizi mtumiaji anapozingatia au kuingia kwenye udhibiti.

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

Majimbo ya uthibitishaji

Bootstrap inajumuisha mitindo ya uthibitishaji kwa makosa, onyo, na hali za mafanikio kwenye vidhibiti vya fomu. Kutumia, kuongeza .has-warning, .has-error, au .has-successkwa kipengele kikuu. Any .control-label, .form-control, na .help-blockndani ya kipengele hicho kitapokea mitindo ya uthibitishaji.

Kuwasilisha hali ya uthibitishaji kwa teknolojia saidizi na watumiaji wasioona rangi

Kutumia mitindo hii ya uthibitishaji kuashiria hali ya udhibiti wa fomu hutoa tu dalili inayoonekana, inayotegemea rangi, ambayo haitawasilishwa kwa watumiaji wa teknolojia saidizi - kama vile visoma skrini - au kwa watumiaji wasioona rangi.

Hakikisha kuwa kiashiria mbadala cha hali pia kinatolewa. Kwa mfano, unaweza kujumuisha kidokezo kuhusu hali katika <label>maandishi ya kidhibiti cha fomu yenyewe (kama ilivyo katika mfano wa msimbo ufuatao), jumuisha Glyphicon (iliyo na maandishi mbadala yanayofaa kwa kutumia .sr-onlydarasa - tazama mifano ya Glyphicon ), au kwa kutoa kizuizi cha maandishi cha msaada wa ziada . Hasa kwa teknolojia ya usaidizi, vidhibiti batili vya fomu pia vinaweza kupewa aria-invalid="true"sifa.

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

Na ikoni za hiari

Unaweza pia kuongeza aikoni za hiari za maoni kwa kuongeza .has-feedbackna ikoni sahihi.

Aikoni za maoni hufanya kazi na <input class="form-control">vipengele vya maandishi pekee.

Aikoni, lebo na vikundi vya ingizo

Kuweka aikoni za maoni kwa mikono kunahitajika kwa ingizo bila lebo na kwa vikundi vya ingizo vilivyo na programu jalizi upande wa kulia. Unahimizwa sana kutoa lebo kwa ingizo zote kwa sababu za ufikivu. Ikiwa ungependa kuzuia lebo zisionyeshwe, zifiche pamoja na .sr-onlydarasa. Ikiwa ni lazima ufanye bila lebo, rekebisha topthamani ya ikoni ya maoni. Kwa vikundi vya ingizo, rekebisha rightthamani hadi thamani ya pikseli inayofaa kulingana na upana wa nyongeza yako.

Kuwasilisha maana ya ikoni kwa teknolojia za usaidizi

Ili kuhakikisha kuwa teknolojia saidizi - kama vile visoma skrini - zinawasilisha kwa usahihi maana ya ikoni, maandishi ya ziada yaliyofichwa yanapaswa kujumuishwa na .sr-onlydarasa na kuhusishwa kwa uwazi na udhibiti wa fomu inayohusiana na kutumia aria-describedby. Vinginevyo, hakikisha kwamba maana (kwa mfano, ukweli kwamba kuna onyo kwa sehemu fulani ya maandishi) inawasilishwa kwa njia nyingine, kama vile kubadilisha maandishi ya halisi <label>yanayohusiana na udhibiti wa fomu.

Ingawa mifano ifuatayo tayari inataja hali ya uthibitishaji wa vidhibiti vya fomu husika katika <label>maandishi yenyewe, mbinu iliyo hapo juu (kutumia .sr-onlymaandishi na aria-describedby) imejumuishwa kwa madhumuni ya kielelezo.

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

Ikoni za hiari katika fomu za mlalo na za ndani

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

Aikoni za hiari zilizo na `.sr-only`lebo zilizofichwa

Ukitumia .sr-onlydarasa kuficha kidhibiti cha fomu <label>(badala ya kutumia chaguo zingine za kuweka lebo, kama vile aria-labelsifa), Bootstrap itarekebisha kiotomatiki nafasi ya ikoni pindi itakapoongezwa.

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

Kudhibiti ukubwa

Weka urefu kwa kutumia madarasa kama .input-lg, na weka upana kwa kutumia madarasa ya safu wima kama vile .col-lg-*.

Upimaji wa urefu

Unda vidhibiti vya fomu virefu au vifupi vinavyolingana na ukubwa wa vitufe.

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

Ukubwa wa vikundi vya fomu mlalo

Ukubwa wa lebo kwa haraka na vidhibiti vya fomu ndani .form-horizontalkwa kuongeza .form-group-lgau .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>

Upimaji wa safu wima

Funga ingizo katika safu wima za gridi, au kipengele chochote maalum cha mzazi, ili kutekeleza kwa urahisi upana unaohitajika.

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

Lebo za kitufe

Tumia madarasa ya vitufe kwenye <a>, <button>, au <input>kipengele.

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

Matumizi mahususi ya muktadha

Ingawa vikundi vya vitufe vinaweza kutumika <a>na <button>vipengee, <button>vipengee pekee ndivyo vinavyotumika ndani ya vipengele vyetu vya nav na upau wa urambazaji.

Viungo vinavyofanya kazi kama vifungo

Iwapo <a>vipengele vinatumika kufanya kama vitufe - kuanzisha utendakazi wa ndani ya ukurasa, badala ya kuelekea kwenye hati au sehemu nyingine ndani ya ukurasa wa sasa - vinapaswa pia kupewa role="button".

Utoaji wa kivinjari

Kama mbinu bora, tunapendekeza sana kutumia <button>kipengele wakati wowote inapowezekana ili kuhakikisha uwasilishaji unaolingana wa kivinjari.

Miongoni mwa mambo mengine, kuna hitilafu katika Firefox <30 ambayo inatuzuia kuweka vifungo line-heightvya <input>msingi, na kusababisha kutolingana kabisa na urefu wa vifungo vingine kwenye Firefox.

Chaguo

Tumia aina zozote za vitufe zinazopatikana ili kuunda kitufe chenye mtindo kwa haraka.

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

Kuwasilisha maana kwa teknolojia za usaidizi

Kutumia rangi ili kuongeza maana ya kitufe hutoa tu kielelezo cha kuona, ambacho hakitawasilishwa kwa watumiaji wa teknolojia saidizi - kama vile visoma skrini. Hakikisha kwamba maelezo yaliyoashiriwa na rangi ni dhahiri kutoka kwa maudhui yenyewe (maandishi yanayoonekana ya kitufe), au yanajumuishwa kupitia njia mbadala, kama vile maandishi ya ziada yaliyofichwa na .sr-onlydarasa.

Ukubwa

Ungependa vitufe vikubwa au vidogo? Ongeza .btn-lg, .btn-sm, au .btn-xskwa saizi za ziada.

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

Unda vitufe vya kiwango cha kuzuia—vile vinavyochukua upana kamili wa mzazi— kwa kuongeza .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>

Hali hai

Vifungo vitaonekana vikiwa vimebonyezwa (yenye mandharinyuma meusi zaidi, mpaka mweusi zaidi, na kivuli kidogo) zikiwashwa. Kwa <button>vipengele, hii inafanywa kupitia :active. Kwa <a>vipengele, imefanywa na .active. Walakini, unaweza kutumia .activekwenye <button>s (na kujumuisha aria-pressed="true"sifa) ikiwa unahitaji kuiga hali amilifu kwa utaratibu.

Kitufe kipengele

Hakuna haja ya kuongeza :activekwani ni darasa la uwongo, lakini ikiwa unahitaji kulazimisha mwonekano sawa, endelea na uongeze .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>

Kipengele cha nanga

Ongeza .activedarasa kwa <a>vifungo.

Kiungo cha msingi Kiungo

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

Jimbo la walemavu

Fanya vitufe vionekane visivyobofya kwa kufifisha na opacity.

Kitufe kipengele

Ongeza disabledsifa kwa <button>vifungo.

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

Utangamano wa kivinjari

Ukiongeza disabledsifa kwenye <button>, Internet Explorer 9 na chini itafanya maandishi kuwa kijivu na kivuli cha maandishi kibaya ambacho hatuwezi kurekebisha.

Kipengele cha nanga

Ongeza .disableddarasa kwa <a>vifungo.

Kiungo cha msingi Kiungo

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

Tunatumia .disabledkama darasa la matumizi hapa, sawa na .activedarasa la kawaida, kwa hivyo hakuna kiambishi awali kinachohitajika.

Tahadhari ya utendaji wa kiungo

Darasa hili hutumia pointer-events: nonekujaribu kuzima utendakazi wa kiungo cha <a>s, lakini kipengele hicho cha CSS bado hakijasanifishwa na hakitumiki kikamilifu katika Opera 18 na chini, au katika Internet Explorer 11. Kwa kuongezea, hata katika vivinjari vinavyotumia pointer-events: none, kibodi. urambazaji bado haujaathiriwa, kumaanisha kuwa watumiaji wanaoona wa kibodi na watumiaji wa teknolojia saidizi bado wataweza kuwezesha viungo hivi. Kwa hivyo ili kuwa salama, tumia JavaScript maalum kuzima viungo kama hivyo.

Picha za mwitikio

Picha katika Bootstrap 3 zinaweza kufanywa kuitikia kwa urahisi kupitia nyongeza ya .img-responsivedarasa. Hii inatumika max-width: 100%;, height: auto;na display: block;kwa picha ili iweze kukua vizuri kwa kipengele cha mzazi.

Ili kuweka katikati picha zinazotumia .img-responsivedarasa, tumia .center-blockbadala ya .text-center. Tazama sehemu ya madarasa ya wasaidizi kwa maelezo zaidi kuhusu .center-blockmatumizi.

Picha za SVG na IE 8-10

Katika Internet Explorer 8-10, picha za SVG zenye .img-responsiveukubwa usio na uwiano. Ili kurekebisha hii, ongeza width: 100% \9;inapobidi. Bootstrap haitumii hii kiotomatiki kwani inasababisha matatizo kwa miundo mingine ya picha.

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

Maumbo ya picha

Ongeza madarasa kwenye <img>kipengele ili uunde kwa urahisi picha katika mradi wowote.

Utangamano wa kivinjari

Kumbuka kwamba Internet Explorer 8 haina usaidizi kwa pembe za mviringo.

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

Rangi za muktadha

Onyesha maana kupitia rangi na madarasa machache ya matumizi ya mkazo. Hizi pia zinaweza kutumika kwa viungo na zitatiwa giza kwenye hover kama tu mitindo yetu chaguomsingi ya viungo.

Fusce dapibus, tellus ac cursus commodo, tortor 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.

Donec ullamcorper nulla non metus auctor fringilla.

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

Kushughulika na maalum

Wakati mwingine madarasa ya mkazo hayawezi kutumika kwa sababu ya umaalum wa kiteuzi kingine. Katika hali nyingi, suluhisho la kutosha ni kufunga maandishi yako <span>na darasa.

Kuwasilisha maana kwa teknolojia za usaidizi

Kutumia rangi ili kuongeza maana hutoa tu kielelezo cha kuona, ambacho hakitawasilishwa kwa watumiaji wa teknolojia saidizi - kama vile visoma skrini. Hakikisha kwamba maelezo yanayoashiriwa na rangi ni dhahiri kutoka kwa maudhui yenyewe (rangi za muktadha hutumiwa tu kuimarisha maana ambayo tayari iko kwenye maandishi/alama), au imejumuishwa kupitia njia mbadala, kama vile maandishi ya ziada yaliyofichwa na .sr-onlydarasa . .

Asili za muktadha

Sawa na madarasa ya rangi ya maandishi ya muktadha, weka kwa urahisi usuli wa kipengele kwa darasa lolote la muktadha. Vipengee vya nanga vitatiwa giza kwa kuelea, kama vile madarasa ya maandishi.

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.

Donec ullamcorper nulla non metus auctor fringilla.

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

Kushughulika na maalum

Wakati mwingine madarasa ya mandharinyuma hayawezi kutumika kwa sababu ya umahususi wa kiteuzi kingine. Katika hali zingine, suluhisho la kutosha ni kufunga yaliyomo kwenye kipengee chako <div>na darasa.

Kuwasilisha maana kwa teknolojia za usaidizi

Kama ilivyo kwa rangi za muktadha , hakikisha kwamba maana yoyote inayowasilishwa kupitia rangi pia inawasilishwa katika umbizo ambalo si wasilisho pekee.

Funga ikoni

Tumia aikoni ya jumla ya kufunga kwa kuondoa maudhui kama vile miundo na arifa.

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

Carets

Tumia carets kuonyesha utendaji na mwelekeo wa kunjuzi. Kumbuka kuwa caret chaguo-msingi itageuka kiotomatiki katika menyu kunjuzi .

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

Inaelea haraka

Elekeza kipengele kushoto au kulia na darasa. !importantimejumuishwa ili kuepuka masuala maalum. Madarasa pia yanaweza kutumika kama mchanganyiko.

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

Vizuizi vya yaliyomo katikati

Weka kipengele display: blockna katikati kupitia margin. Inapatikana kama mchanganyiko na darasa.

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

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

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

Safisha

Safisha kwa urahisi floats kwa kuongeza .clearfix kipengele cha mzazi . Hutumia kiboreshaji kidogo kama inavyojulikana na Nicolas Gallagher. Inaweza pia kutumika kama mchanganyiko.

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

Kuonyesha na kuficha yaliyomo

Lazimisha kipengele kuonyeshwa au kufichwa ( ikijumuisha kwa visoma skrini ) kwa kutumia .showna .hiddenmadarasa. Madarasa haya hutumia !importantili kuzuia mizozo maalum, kama vile inavyoelea haraka . Zinapatikana tu kwa kugeuza kiwango cha block. Wanaweza pia kutumika kama mchanganyiko.

.hideinapatikana, lakini haiathiri visoma skrini kila wakati na inaacha kutumika kama v3.0.1. Tumia .hiddenau .sr-onlybadala yake.

Zaidi ya hayo, .invisibleinaweza kutumika kugeuza tu mwonekano wa kipengele, kumaanisha displaykuwa hakijarekebishwa na kipengele bado kinaweza kuathiri mtiririko wa hati.

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

Kisoma skrini na maudhui ya kusogeza ya kibodi

Ficha kipengele kwenye vifaa vyote isipokuwa visoma skrini vilivyo na .sr-only. Changanya .sr-onlyna .sr-only-focusableili kuonyesha kipengele tena kinapolenga (kwa mfano na mtumiaji wa kibodi pekee). Inahitajika kwa kufuata mbinu bora za ufikivu . Inaweza pia kutumika kama mchanganyiko.

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

Uingizwaji wa picha

Tumia .text-hidedarasa au mixin ili kusaidia kubadilisha maandishi ya kipengele na picha ya usuli.

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

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

Kwa maendeleo ya haraka ya kutumia simu ya mkononi, tumia madarasa haya ya matumizi kwa kuonyesha na kuficha maudhui kwa kifaa kupitia hoja ya midia. Pia ni pamoja na madarasa ya matumizi ya kugeuza maudhui yanapochapishwa.

Jaribu kutumia hizi kwa msingi mdogo na uepuke kuunda matoleo tofauti kabisa ya tovuti moja. Badala yake, zitumie ili kukamilisha wasilisho la kila kifaa.

Madarasa yanayopatikana

Tumia mseto mmoja au mseto wa madarasa yanayopatikana kwa kubadilisha maudhui kwenye sehemu za kukatisha za tovuti ya kutazama.

	Vifaa vidogo vya ziadaSimu (<768px)	Vifaa vidogoKompyuta kibao (≥768px)	Vifaa vya katiKompyuta za mezani (≥992px)	Vifaa vikubwaKompyuta za mezani (≥1200px)
`.visible-xs-*`	Inaonekana	Imefichwa	Imefichwa	Imefichwa
`.visible-sm-*`	Imefichwa	Inaonekana	Imefichwa	Imefichwa
`.visible-md-*`	Imefichwa	Imefichwa	Inaonekana	Imefichwa
`.visible-lg-*`	Imefichwa	Imefichwa	Imefichwa	Inaonekana
`.hidden-xs`	Imefichwa	Inaonekana	Inaonekana	Inaonekana
`.hidden-sm`	Inaonekana	Imefichwa	Inaonekana	Inaonekana
`.hidden-md`	Inaonekana	Inaonekana	Imefichwa	Inaonekana
`.hidden-lg`	Inaonekana	Inaonekana	Inaonekana	Imefichwa

Kufikia v3.2.0, .visible-*-*madarasa ya kila sehemu ya kukanusha huja katika tofauti tatu, moja kwa kila displaythamani ya mali ya CSS iliyoorodheshwa hapa chini.

Kundi la madarasa	CSS`display`
`.visible-*-block`	`display: block;`
`.visible-*-inline`	`display: inline;`
`.visible-*-inline-block`	`display: inline-block;`

Kwa hivyo, kwa skrini ndogo ( ) za ziada xskwa mfano, .visible-*-*madarasa yanayopatikana ni: .visible-xs-block, .visible-xs-inline, na .visible-xs-inline-block.

Madarasa .visible-xs, .visible-sm, .visible-md, na .visible-lgpia yapo, lakini yameacha kutumika kama ya v3.2.0 . Ni takriban sawa na .visible-*-block, isipokuwa na kesi maalum za ziada za kugeuza <table>vipengele vinavyohusiana.

Madarasa ya kuchapisha

Sawa na madarasa ya kawaida ya mwitikio, tumia haya kwa kubadilisha maudhui ili kuchapishwa.

Madarasa	Kivinjari	Chapisha
`.visible-print-block` `.visible-print-inline` `.visible-print-inline-block`	Imefichwa	Inaonekana
`.hidden-print`	Inaonekana	Imefichwa

Darasa .visible-printpia lipo lakini limeacha kutumika kama v3.2.0. Ni takriban sawa na .visible-print-block, isipokuwa na kesi maalum za ziada za <table>vipengele vinavyohusiana.

Kesi za majaribio

Badilisha ukubwa wa kivinjari chako au upakie kwenye vifaa tofauti ili kujaribu aina za huduma zinazojibu.

Inaonekana kwenye...

Alama za tiki za kijani zinaonyesha kuwa kipengele kinaonekana katika kituo chako cha kutazama cha sasa.

Kidogo zaidi ✔ Inaonekana kwenye x-ndogo

Ndogo ✔ Inaonekana kwenye ndogo

Kati ✔ Inaonekana kwenye wastani

Kubwa ✔ Inaonekana kwa kubwa

Ziada ndogo na ndogo ✔ Inaonekana kwenye x-ndogo na ndogo

Kati na kubwa ✔ Inaonekana kati na kubwa

Ziada ndogo na za kati ✔ Inaonekana kwenye x-ndogo na kati

Ndogo na kubwa ✔ Inaonekana kwenye ndogo na kubwa

Ziada ndogo na kubwa ✔ Inaonekana kwenye x-ndogo na kubwa

Ndogo na kati ✔ Inaonekana kwenye ndogo na ya kati

Imefichwa kwenye...

Hapa, alama za kuteua za kijani pia zinaonyesha kipengele kimefichwa kwenye poti yako ya sasa ya kutazama.

Kidogo zaidi ✔ Imefichwa kwenye x-ndogo

Ndogo ✔ Imefichwa kwenye ndogo

Kati ✔ Imefichwa kwenye wastani

Kubwa ✔ Imefichwa kwenye kubwa

Ziada ndogo na ndogo ✔ Imefichwa kwenye x-ndogo na ndogo

Kati na kubwa ✔ Imefichwa kwenye kati na kubwa

Ziada ndogo na za kati ✔ Imefichwa kwenye x-ndogo na ya kati

Ndogo na kubwa ✔ Imefichwa kwa ndogo na kubwa

Ziada ndogo na kubwa ✔ Imefichwa kwenye x-ndogo na kubwa

Ndogo na kati ✔ Imefichwa kwenye ndogo na ya kati

CSS ya Bootstrap imeundwa kwa Chini, kichakataji awali chenye utendaji wa ziada kama vile vigeu, vichanganyiko, na vitendakazi vya kuunda CSS. Wale wanaotafuta kutumia chanzo Chini ya faili badala ya faili zetu za CSS zilizokusanywa wanaweza kutumia anuwai nyingi na michanganyiko tunayotumia katika mfumo mzima.

Vigeu vya gridi na vichanganyiko vimefunikwa ndani ya sehemu ya mfumo wa Gridi .

Kukusanya Bootstrap

Bootstrap inaweza kutumika kwa angalau njia mbili: na CSS iliyokusanywa au na chanzo cha faili Chini. Ili kukusanya faili za Chini, angalia sehemu ya Anza kwa jinsi ya kusanidi mazingira yako ya usanidi ili kutekeleza amri zinazohitajika.

Zana za ujumuishaji za wahusika wengine zinaweza kufanya kazi na Bootstrap, lakini hazihimiliwi na timu yetu kuu.

Vigezo

Vigezo hutumika katika mradi mzima kama njia ya kuweka kati na kushiriki thamani zinazotumiwa mara nyingi kama vile rangi, nafasi, au safu za fonti. Kwa uchanganuzi kamili, tafadhali angalia Kiteja .

Rangi

Tumia kwa urahisi mipango miwili ya rangi: kijivu na semantic. Rangi za kijivu hutoa ufikiaji wa haraka kwa vivuli vya rangi nyeusi vinavyotumiwa sana wakati semantiki inajumuisha rangi mbalimbali zilizowekwa kwa maadili muhimu ya muktadha.

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

Tumia yoyote kati ya vigeu hivi vya rangi jinsi zilivyo au uwape upya kwa viwezo vya maana zaidi kwa mradi wako.

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

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

Kiunzi

Vigezo vichache vya kubinafsisha kwa haraka vipengele muhimu vya kiunzi cha tovuti yako.

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

Viungo

Weka viungo vyako kwa urahisi na rangi inayofaa na thamani moja pekee.

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

Kumbuka kuwa @link-hover-colorhutumia chaguo la kukokotoa, zana nyingine nzuri kutoka kwa Chini, ili kuunda kiotomatiki rangi sahihi ya kielee juu. Unaweza kutumia darken, lighten, saturate, na desaturate.

Uchapaji

Weka kwa urahisi aina yako ya chapa, saizi ya maandishi, inayoongoza, na zaidi ukitumia vibadala vichache vya haraka. Bootstrap hutumia hizi pia kutoa mchanganyiko rahisi wa uchapaji.

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

Aikoni

Vigezo viwili vya haraka vya kubinafsisha eneo na jina la faili la ikoni zako.

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

Vipengele

Vipengee kote kwenye Bootstrap hutumia vigeu kadhaa vya chaguo-msingi kwa kuweka maadili ya kawaida. Hapa ni kawaida kutumika.

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

Mchanganyiko wa muuzaji

Michanganyiko ya wachuuzi ni michanganyiko ili kusaidia vivinjari vingi kwa kujumuisha viambishi awali vyote muhimu vya wachuuzi katika CSS yako iliyokusanywa.

Ukubwa wa sanduku

Weka upya muundo wa kisanduku cha vipengee vyako kwa mchanganyiko mmoja. Kwa muktadha, angalia nakala hii muhimu kutoka kwa Mozilla .

Mchanganyiko umeacha kutumika kama v3.2.0, kwa kuanzishwa kwa Autoprefixer. Ili kuhifadhi uoanifu wa kurudi nyuma, Bootstrap itaendelea kutumia mchanganyiko ndani hadi Bootstrap v4.

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

Pembe za mviringo

Leo vivinjari vyote vya kisasa vinaunga mkono mali isiyo na kiambishi awali border-radius. Kwa hivyo, hakuna .border-radius()mchanganyiko, lakini Bootstrap inajumuisha njia za mkato za kuzungusha haraka pembe mbili kwenye upande fulani wa kitu.

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

Sanduku (Tone) vivuli

Ikiwa hadhira unayolenga inatumia vivinjari na vifaa vya hivi punde na bora zaidi, hakikisha kuwa unatumia box-shadowkipengee hiki peke yake. Iwapo unahitaji usaidizi wa vifaa vya zamani vya Android (pre-v4) na iOS (kabla ya iOS 5), tumia mchanganyiko ulioacha kutumika ili kuchukua mahitaji.-webkit kiambishi awali kinachohitajika.

Mchanganyiko umeacha kutumika kuanzia v3.1.0, kwa kuwa Bootstrap haitumii rasmi mifumo iliyopitwa na wakati ambayo haitumii sifa ya kawaida. Ili kuhifadhi uoanifu wa kurudi nyuma, Bootstrap itaendelea kutumia mchanganyiko ndani hadi Bootstrap v4.

Hakikisha unatumia rgba()rangi katika vivuli vya kisanduku chako ili zisangane kwa urahisi iwezekanavyo na mandharinyuma.

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

Mpito

Mchanganyiko mwingi kwa kubadilika. Weka taarifa zote za mpito kwa moja, au taja ucheleweshaji tofauti na muda inavyohitajika.

Mchanganyiko umeacha kutumika kama v3.2.0, kwa kuanzishwa kwa Autoprefixer. Ili kuhifadhi uoanifu wa kurudi nyuma, Bootstrap itaendelea kutumia michanganyiko ndani hadi Bootstrap v4.

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

Mabadiliko

Zungusha, saizi, tafsiri (sogeza), au pindisha kitu chochote.

Mchanganyiko umeacha kutumika kama v3.2.0, kwa kuanzishwa kwa Autoprefixer. Ili kuhifadhi uoanifu wa kurudi nyuma, Bootstrap itaendelea kutumia michanganyiko ndani hadi Bootstrap v4.

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

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

Uhuishaji

Mchanganyiko mmoja wa kutumia sifa zote za uhuishaji za CSS3 katika tamko moja na michanganyiko mingine ya sifa mahususi.

Mchanganyiko umeacha kutumika kama v3.2.0, kwa kuanzishwa kwa Autoprefixer. Ili kuhifadhi uoanifu wa kurudi nyuma, Bootstrap itaendelea kutumia michanganyiko ndani hadi Bootstrap v4.

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

Uwazi

Weka uwazi kwa vivinjari vyote na upe njia filtermbadala kwa IE8.

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

Maandishi ya kishika nafasi

Toa muktadha wa vidhibiti vya fomu ndani ya kila sehemu.

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

Safu

Tengeneza safu wima kupitia CSS ndani ya kipengele kimoja.

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

Gradients

Geuza rangi zozote mbili kwa urahisi ziwe upindenyuzi wa mandharinyuma. Pata maendeleo zaidi na uweke mwelekeo, tumia rangi tatu, au tumia kipenyo cha radial. Ukiwa na mchanganyiko mmoja unapata sintaksia zote zilizoangaziwa utakazohitaji.

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

Unaweza pia kubainisha pembe ya kiwango cha kawaida cha rangi mbili, kipenyo cha mstari:

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

Ikiwa unahitaji upinde rangi ya kinyozi, hiyo ni rahisi pia. Bainisha rangi moja tu na tutafunika mstari mweupe unaong'aa.

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

Panda ante na utumie rangi tatu badala yake. Weka rangi ya kwanza, rangi ya pili, rangi ya pili kuacha (asilimia ya thamani kama 25%), na rangi ya tatu na mchanganyiko huu:

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

Vichwa juu! Iwapo utawahi kuhitaji kuondoa kipenyo, hakikisha kwamba umeondoa mahususi yoyote ya IE filterambayo huenda umeongeza. Unaweza kufanya hivyo kwa kutumia .reset-filter()mchanganyiko kando background-image: none;.

Mchanganyiko wa matumizi

Michanganyiko ya matumizi ni michanganyiko inayochanganya sifa zingine zisizohusiana za CSS ili kufikia lengo au kazi mahususi.

Safisha

Sahau kuongeza class="clearfix"kwa kipengele chochote na badala yake ongeza .clearfix()mchanganyiko inapofaa. Inatumia kiboreshaji kidogo kutoka kwa Nicolas Gallagher .

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

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

Kuweka katikati kwa usawa

Weka kwa haraka kipengele chochote ndani ya mzazi wake. Inahitaji widthau max-widthkuwekwa.

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

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

Wasaidizi wa ukubwa

Bainisha vipimo vya kitu kwa urahisi zaidi.

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

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

Maeneo ya maandishi yanayoweza kurejeshwa

Sanidi kwa urahisi chaguo za kubadilisha ukubwa kwa eneo lolote la maandishi, au kipengele kingine chochote. Chaguomsingi kwa tabia ya kawaida ya kivinjari ( both).

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

Inapunguza maandishi

Punguza maandishi kwa urahisi kwa ellipsis na mchanganyiko mmoja. Inahitaji kipengele kuwa blockau inline-blockkiwango.

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

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

Picha za retina

Bainisha njia mbili za picha na vipimo vya picha vya @1x, na Bootstrap itatoa swali la @2x la media. Ikiwa una picha nyingi za kutumika, zingatia kuandika picha yako ya retina CSS mwenyewe katika hoja moja ya maudhui.

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

Wakati Bootstrap imejengwa kwa Chini, pia ina bandari rasmi ya Sass . Tunaihifadhi katika hazina tofauti ya GitHub na kushughulikia masasisho kwa hati ya ubadilishaji.

Ni nini kimejumuishwa

Kwa kuwa bandari ya Sass ina repo tofauti na hutumikia hadhira tofauti kidogo, yaliyomo kwenye mradi hutofautiana sana na mradi mkuu wa Bootstrap. Hii inahakikisha bandari ya Sass inaoana na mifumo mingi ya msingi ya Sass iwezekanavyo.

Njia	Maelezo
`lib/`	Nambari ya vito ya Ruby (usanidi wa Sass, reli na viunganisho vya Compass)
`tasks/`	Hati za kibadilishaji (kugeuza mkondo wa Chini hadi Sass)
`test/`	Mkusanyiko wa vipimo
`templates/`	Faili ya kifurushi cha Dira
`vendor/assets/`	Sass, JavaScript, na faili za fonti
`Rakefile`	Kazi za ndani, kama vile kutafuta na kubadilisha

Tembelea hazina ya GitHub ya bandari ya Sass ili kuona faili hizi zikifanya kazi.

Ufungaji

Kwa maelezo kuhusu jinsi ya kusakinisha na kutumia Bootstrap kwa Sass, wasiliana na hazina ya GitHub readme . Ndiyo chanzo kilichosasishwa zaidi na inajumuisha maelezo ya matumizi ya Rails, Compass na miradi ya kawaida ya Sass.

Bootstrap kwa Sass

CSS

Muhtasari

HTML5 aina ya hati

Simu kwanza

Uchapaji na viungo

Normalize.css

Vyombo

Mfumo wa gridi ya taifa

Utangulizi

Maswali ya media

Chaguzi za gridi ya taifa

Mfano: Imepangwa kwa mlalo

Mfano: Chombo cha maji

Mfano: Simu ya rununu na kompyuta ya mezani

Mfano: Simu ya rununu, kompyuta kibao, eneo-kazi

Mfano: Kufunga safu

Safu wima inayojibu imewekwa upya

Kuweka safu wima

Safu wima za kuota

Kuagiza safu

Mchanganyiko mdogo na vigezo

Vigezo

Mchanganyiko

Mfano wa matumizi

Uchapaji

Vichwa

h1. Kichwa cha bootstrap

h2. Kichwa cha bootstrap

h3. Kichwa cha bootstrap

h4. Kichwa cha bootstrap

h5. Kichwa cha bootstrap

h6. Kichwa cha bootstrap

h1. Maandishi ya pili ya kichwa cha buti

h2. Maandishi ya pili ya kichwa cha buti

h3. Maandishi ya pili ya kichwa cha buti

h4. Maandishi ya pili ya kichwa cha buti

h5. Maandishi ya pili ya kichwa cha buti

h6. Maandishi ya pili ya kichwa cha buti

Nakala ya mwili

Nakala ya mwili inayoongoza

Imejengwa kwa Chini

Vipengele vya maandishi ya ndani

Maandishi yaliyowekwa alama

Maandishi yaliyofutwa

Maandishi ya kuvutia

Maandishi yaliyoingizwa

Maandishi yaliyopigiwa mstari

Nakala ndogo

Ujasiri

Italiki

Vipengele mbadala

Madarasa ya upatanishi

Madarasa ya mabadiliko

Vifupisho

Kifupi cha msingi

Uanzilishi

Anwani

Nukuu za kuzuia

Nukuu chaguomsingi ya kuzuia

Chaguo za dondoo za kuzuia

Kutaja chanzo

Maonyesho mbadala

Orodha

Haijaagizwa

Imeagizwa

Isiyo na mtindo

Katika mstari

Maelezo

Maelezo ya mlalo

Kupunguza kiotomatiki

Kanuni

Katika mstari

Ingizo la mtumiaji

Kizuizi cha msingi

Vigezo

Sampuli ya pato

Majedwali

Mfano wa msingi

Safu zenye mistari

Utangamano wa kivinjari

`:focus`Hali ya onyesho

Tahadhari kuhusu utendakazi wa kiungo cha`<a>`

Aikoni za hiari zilizo na `.sr-only`lebo zilizofichwa