Funa lowdown ku bitundu ebikulu eby'ebikozesebwa bya Bootstrap, omuli enkola yaffe ey'okukulaakulanya omukutu omulungi, ogw'amangu, ogw'amaanyi.

Ekika ky’ekiwandiiko ekya HTML5

Bootstrap ekozesa ebintu ebimu ebya HTML n'ebintu bya CSS ebyetaagisa okukozesa HTML5 doctype. Kiteekemu ku ntandikwa ya pulojekiti zo zonna.

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

Mobile okusooka

Nga tulina Bootstrap 2, twayongeddeko emisono egy’omukwano egy’essimu egy’okwesalirawo ku bintu ebikulu eby’enkola. Nga tulina Bootstrap 3, tuzzeemu okuwandiika pulojekiti eno okubeera ey’omukwano ku ssimu okuva ku ntandikwa. Mu kifo ky’okwongera ku sitayiro z’essimu ez’okwesalirawo, zifumbibwa ddala mu musingi. Mu butuufu, Bootstrap ye mobile esooka . Emisono gy’okusooka egy’oku ssimu gisobola okusangibwa mu tterekero lyonna mu kifo ky’okusangibwa mu fayiro ez’enjawulo.

Okukakasa okulaga obulungi n'okukwata ku zooming, yongera ku viewport meta tag ku <head>.

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

Osobola okulemesa obusobozi bw'okuzimba ku byuma ebikozesebwa ku ssimu ng'oyongera user-scalable=noku viewport meta tag. Kino kiremesa zooming, ekitegeeza nti abakozesa basobola okutambula kwokka, era kivaamu omukutu gwo okuwulira katono nga application enzaaliranwa. Okutwaliza awamu, kino tetukiteesaako ku buli mukutu, kale weegendereze!

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

Typography n’enkolagana

Bootstrap eteekawo okulaga okw'ensi yonna okusookerwako, okuwandiika, n'emisono gy'okuyunga. Okusingira ddala, ffe:

Teeka background-color: #fff;ku ...body
Kozesa @font-family-base, @font-size-base, @line-height-basen’ebintu ng’omusingi gwaffe ogw’okuwandiika
Teeka langi y'enkolagana ey'ensi yonna ng'oyita mu @link-colorera osiige ennyiriri eziriko ennyiriri zokka ku:hover

Emisono gino osobola okugisanga munda mu scaffolding.less.

Okufuula ebya bulijjo.css

Okusobola okulongoosa mu kulaga okusalako-browser, tukozesa Normalize.css , pulojekiti eyakolebwa Nicolas Gallagher ne Jonathan Neal .

Ebintu ebiteekebwamu ebintu

Bootstrap yeetaaga ekintu ekirimu okuzinga ebirimu ku mukutu n'okuteeka enkola yaffe eya grid. Oyinza okulondako ekimu ku bikozesebwa bibiri by’onookozesa mu pulojekiti zo. Weetegereze nti, olw'ebisingawo padding, tewali kibya kyonna kibeera nestable.

Kozesa .containerku kibya eky’obugazi obutakyukakyuka ekiddamu.

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

Kozesa .container-fluidku kibya eky'obugazi obujjuvu, nga kibuna obugazi bwonna obw'ekifo kyo eky'okulaba.

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

Bootstrap erimu enkola ya responsive, mobile first fluid grid system esaanira okutuuka ku mpagi 12 nga ekyuma oba viewport size yeeyongera. Mulimu kiraasi ezitegekeddwa edda okusobola okulonda ensengeka ennyangu, wamu ne mixins ez’amaanyi okukola ensengeka ezisingawo ez’amakulu .

Okwanjula

Enkola za grid zikozesebwa okukola ensengeka z’olupapula okuyita mu lunyiriri lw’ennyiriri n’ennyiriri ezirimu ebirimu byo. Laba engeri enkola ya Bootstrap grid gy'ekola:

Ennyiriri zirina okuteekebwa munda mu .container(fixed-width) oba .container-fluid(full-width) okusobola okusengeka obulungi n’okuzipakira.
Kozesa ennyiriri okukola ebibinja by’ennyiriri eby’okwebungulula.
Ebirimu birina okuteekebwa munda mu mpagi, era empagi zokka ze ziyinza okuba abaana ab’amangu ab’ennyiriri.
Ebika bya grid ebitegekeddwa edda nga .rowera .col-xs-4biriwo okukola amangu ensengeka za grid. Mixins entono nazo zisobola okukozesebwa ku layouts ezisingawo ez’amakulu.
Ennyiriri zikola emifulejje (ebituli wakati w’ebirimu empagi) nga ziyita mu padding. Padding eyo ekyusibwa mu layini ku mpagi esooka n’esembayo okuyita mu negativu margin ku .rows.
The negative margin y’ensonga lwaki ebyokulabirako wansi bifulumye. Kiba bwe kityo nti ebirimu munda mu mpagi za grid biba bitegekeddwa ennyiriri n'ebitali bya grid.
Ennyiriri za giridi zitondebwa nga olaga omuwendo gw’ennyiriri kkumi n’ebiri eziriwo z’oyagala okubunyisa. Okugeza, empagi ssatu ezenkanankana zandikozesezza ssatu .col-xs-4.
Singa empagi ezisukka mu 12 ziteekebwa mu lunyiriri lumu, buli kibinja ky’ennyiriri ez’enjawulo kijja, nga yuniti emu, okuzinga ku layini empya.
Grid classes zikola ku byuma ebirina obugazi bwa screen obusinga oba obwenkana obunene bwa breakpoint, era zisazaamu grid classes ezigendereddwa ku byuma ebitono. N’olwekyo, okugeza okukozesa .col-md-*kiraasi yonna ku elementi tekijja kukosa sitayiro yaayo yokka ku byuma ebya wakati wabula ne ku byuma ebinene singa .col-lg-*kiraasi eba tebaawo.

Tunuulira ebyokulabirako eby’okukozesa emisingi gino ku koodi yo.

Ebibuuzo by’emikutu gy’amawulire

Tukozesa ebibuuzo bino wammanga eby’emikutu mu fayiro zaffe eza Less okukola ebifo ebikulu ebimenya mu nkola yaffe eya grid.

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

Oluusi n’oluusi tugaziya ku bibuuzo bino eby’emikutu okussaamu a max-widthokukomya CSS ku kibinja ekifunda eky’ebyuma.

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

Ebintu eby’okulondako mu giridi

Laba engeri ebitundu by’enkola ya Bootstrap grid gye bikolamu mu byuma ebiwerako nga biriko emmeeza ekwatagana.

	Ebyuma ebitonotono eby'enjawulo Amasimu (<768px)	Ebyuma ebitonotono Tablets (≥768px) .	Ebyuma ebya wakati Desktops (≥992px) .	Ebyuma ebinene Desktops (≥1200px) .
Enneeyisa ya giridi	Horizontal ekiseera kyonna	Egudde okutandika, horizontal waggulu w’ebifo eby’okumenya
Obugazi bwa konteyina	Tewali (auto) .	750px nga bwe kiri	970px nga bwe kiri	1170px nga bwe kiri
Entandikwa y’ekibiina	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`
# wa empagi	12. 12
Obugazi bw’empagi	Auto	~62px	~81px	~97px
Obugazi bwa gutter	30px (15px ku buli ludda lw’ennyiriri)
Ebisu bibeera mu kisu	Yee
Ebikozesebwa mu kukyusakyusa	Yee
Okulagira empagi	Yee

Okugeza: Okutumbibwa-okutuuka ku bbanga

Nga okozesa ekibinja kimu ekya .col-md-*kiraasi za grid, osobola okukola enkola ya grid enkulu etandika ng’etumbidde ku byuma ebikozesebwa ku ssimu n’ebyuma bya tabuleti (ekitono ennyo okutuuka ku bbanga eritono ennyo) nga tonnafuuka horizontal ku byuma bya desktop (ebya wakati). Teeka empagi za grid mu buli .row.

.col-md-1 nga bwe kiri

.col-md-8 nga bwe kiri

.col-md-4 nga bwe kiri

.col-md-6 nga bwe kiri

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

Okugeza: Ekintu ekirimu amazzi

Fuula ensengeka yonna eya gridi ey'obugazi obutakyukakyuka mu nsengeka ey'obugazi obujjuvu ng'okyusa eky'ebweru kyo .containerokudda ku .container-fluid.

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

Okugeza: Essimu ne desktop

Toyagala mpagi zo kumala gatuuma mu byuma ebitonotono? Kozesa kiraasi za grid z'ebyuma ebitono n'ebya wakati eby'enjawulo ng'oyongera .col-xs-* .col-md-*ku mpagi zo. Laba ekyokulabirako wansi okufuna endowooza ennungi ku ngeri byonna gye bikolamu.

.kol-xs-12 .kolo-md-8

.kol-xs-6 .kolo-md-4

.col-xs-6 nga bwe kiri

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

Okugeza: Essimu, tabuleti, kompyuta

Zimba ku kyokulabirako ekyayita ng’okola ensengeka ezisingako n’amaanyi era ez’amaanyi nga zirina .col-sm-*kiraasi za tabuleti.

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

.kol-xs-6 .kolo-md-4

.kolo-xs-6 .kol-sm-4

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

Okugeza: Okuzinga empagi

Singa empagi ezisukka mu 12 ziteekebwa mu lunyiriri lumu, buli kibinja ky’ennyiriri ez’enjawulo kijja, nga yuniti emu, okuzinga ku layini empya.

.col-xs-9 nga bwe kiri

.col-xs-4
Okuva 9 + 4 = 13 > 12, div eno eya 4-column-wide efuna okuzingibwa ku layini empya nga yuniti emu ekwatagana.

.col-xs-6
Ennyiriri eziddako zigenda mu maaso ku layini empya.

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

Ennyiriri eziddamu ziddamu okuteekebwawo

Nga olina emitendera ena egya grids eziriwo ojja kuddukira mu nsonga nga, ku bifo ebimu eby’okumenya, empagi zo tezilongoosa bulungi nnyo nga emu ewanvu okusinga endala. Okutereeza ekyo, kozesa omugatte gwa a .clearfixne kiraasi zaffe ez’omugaso eziddamu .

.col-xs-6 .col-sm-3 Kyuusa sayizi y’ekifo
kyo eky’okulaba oba kikebere ku ssimu yo okugeza.

.kolo-xs-6 .kol-sm-3

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

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

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

Ng’oggyeeko okulongoosa empagi ku bifo ebimenya ebiddamu, oyinza okwetaaga okuddamu okuteekawo offsets, pushes, oba pulls . Kino laba mu bikolwa mu kyokulabirako kya grid .

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

Okukyusakyusa empagi

Tambuza ennyiriri ku ddyo ng’okozesa .col-md-offset-*kiraasi. Ebika bino byongera ku mabbali ga kkono ag’ennyiriri ku *mpagi. Okugeza, .col-md-offset-4etambula .col-md-4ku mpagi nnya.

.col-md-4 nga bwe kiri

.col-md-4 .col-md-okukyusakyusa-4

.col-md-3 .col-md-okukyusakyusa-3

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

Osobola n'okusazaamu offsets okuva ku grid tiers eza wansi ne .col-*-offset-0classes.

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

Empagi z’okuzimba ebisu

Okuteeka ebirimu byo n'ekisenge ekisookerwako, yongerako empya .rown'ekibinja ky'ennyiriri munda mu nnyiriri .col-sm-*eziriwo . .col-sm-*Ennyiriri eziteekeddwa mu kisenge zirina okubeeramu ekibinja ky’ennyiriri ezigatta okutuuka ku 12 oba wansi (tekyetaagisa kukozesa mpagi zonna 12 eziriwo).

Omutendera 1: .col-sm-9

Omutendera 2: .col-xs-8 .col-sm-6. Omutendera ogw’okubiri

Omutendera 2: .col-xs-4 .col-sm-6. Omutendera ogw’okubiri

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

Okulagira empagi

Kyangu okukyusa ensengeka y’ennyiriri zaffe eza grid ezizimbibwamu nga zirina .col-md-push-*ne .col-md-pull-*kiraasi ezikyusa.

.col-md-9 .col-md-okusika-3

.col-md-3 .kolo-md-okusika-9

<div class="row">
  <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>

Mixins n’ebikyukakyuka bitono

Ng’oggyeeko kiraasi za grid ezizimbibwa nga tezinnabaawo ez’ensengeka ez’amangu, Bootstrap erimu enkyukakyuka za Less ne mixins ez’okukola amangu ensengeka zo ennyangu, ez’amakulu.

Enkyukakyuka ezikyukakyuka

Enkyukakyuka zisalawo omuwendo gw’ennyiriri, obugazi bw’omudumu, n’ekifo eky’okubuuza emikutu gy’ogenda okutandikirako empagi ezitengejja. Tukozesa bino okukola ebika bya grid ebyategeezebwa edda ebiwandiikiddwa waggulu, awamu ne ku mixins ez’ennono eziragiddwa wansi.

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

Ebirungo ebitabuddwa

Mixins zikozesebwa wamu n’enkyukakyuka za grid okukola semantic CSS ku mpagi za grid ssekinnoomu.

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

Okugeza enkozesa

Osobola okukyusa enkyukakyuka ku miwendo gyo egy'ennono, oba okukozesa mixins n'emiwendo gyazo egy'enjawulo. Wano waliwo ekyokulabirako ky'okukozesa ensengeka ezisookerwako okukola ensengeka y'ennyiriri bbiri nga waliwo ekituli wakati.

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

Emitwe

Emitwe gyonna egya HTML, <h1>okuyita mu <h6>, giriwo. .h1okuyita mu .h6kiraasi nazo ziriwo, kubanga bw’oyagala okukwatagana n’ensengeka y’empandiika y’omutwe naye ng’okyayagala ekiwandiiko kyo okulagibwa mu layini.

h1. Omutwe gwa bootstrap	Ekitundu ekigumu 36px
h2. Omutwe gwa bootstrap	Ekitundu ekigumu 30px
h3. Omutwe gwa bootstrap	Ekitundu ekigumu 24px
h4. Omutwe gwa bootstrap	Ekitundu ekigumu 18px
h5. Omutwe gwa bootstrap	Ekitundu ekigumu 14px
h6. Omutwe gwa bootstrap	Ekitundu ekigumu 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>

Tonda ebiwandiiko ebitangaavu, eby’okubiri mu mutwe gwonna nga olina <small>akabonero aka bulijjo oba .smallekibiina.

h1. Omutwe gwa bootstrap Ebiwandiiko eby'okubiri

h2. Omutwe gwa bootstrap Ebiwandiiko eby'okubiri

h3. Omutwe gwa bootstrap Ebiwandiiko eby'okubiri

h4. Omutwe gwa bootstrap Ebiwandiiko eby'okubiri

h5. Omutwe gwa bootstrap Ebiwandiiko eby'okubiri

h6. Omutwe gwa bootstrap Ebiwandiiko eby'okubiri

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

Kopi y’omubiri

Bootstrap's global default font-sizeeri 14px , nga a line-heightya 1.428 . Kino kikozesebwa ku <body>n’ennyiriri zonna. Okugatta ku ekyo, <p>(obutundu) bafuna margin eya wansi ey’ekitundu kyabwe eky’obuwanvu bwa layini obubaliriddwa (10px nga bwe kibadde).

Nullam quis risus eget ekikuta ky’omusajja eky’okwewunda vel eu leo. Cum sociis natoque penatibus ne magnis dis parturient montes, nascetur okusekererwa mus. Nullam id dolor id nibh ebidduka ebidduka ebidduka.

Cum sociis natoque penatibus ne magnis dis parturient montes, nascetur okusekererwa mus. Donec ullamcorper nulla etali ya metus omusuubuzi fringilla. Duis mollis, est non commodo luctus, nisi erat ekika ky’omugongo, eget lacinia odio sem nec elit. Donec ullamcorper nulla etali ya metus omusuubuzi fringilla.

Maecenas sed diam eget risus varius blandit okutuula ate nga si magna. Donec id elit etali ya mi porta gravida ku eget metus. Duis mollis, est non commodo luctus, nisi erat ekika ky’omugongo, eget lacinia odio sem nec elit.

<p>...</p>

Kopi y’omubiri gw’okukulembera

Akatundu kafuule ak’enjawulo ng’ogattako .lead.

Vivamus sagittis lacus vel augue laoreet ekika kya faucibus eky’okugula ebintu. Duis mollis, est etali ya bugagga.

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

Yazimbibwa ne Less

Minzaani y'okuwandiika yeesigamiziddwa ku nkyukakyuka bbiri eza Less mu nkyukakyuka.less : @font-size-basene @line-height-base. Ekisooka ye base font-size ekozesebwa wonna ate ekyokubiri ye base line-height. Tukozesa enkyukakyuka ezo n’okubala okumu okwangu okukola margins, paddings, ne line-heights ez’ekika kyaffe kyonna n’ebirala. Zikole era Bootstrap ekwatagana.

Ebintu ebikozesebwa mu biwandiiko ebiri mu layini

Ebiwandiiko ebiriko akabonero

Ku lw’okulaga emisinde gy’ekiwandiiko olw’obukulu bwakyo mu mbeera endala, kozesa <mark>akabonero.

Osobola okukozesa mark tag oku...omutwe omukuluokuwandiika obubaka.

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

Ebiwandiiko ebisaziddwamu

Kulaga bulooka z'ebiwandiiko ezisaziddwamu kozesa <del>tag.

~~Layini eno ey’ekiwandiiko etegeeza okutwalibwa ng’ekiwandiiko ekisaziddwamu.~~

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

Okukuba okuyita mu biwandiiko

Kulaga bulooka z'ebiwandiiko ezitakyakwatagana kozesa <s>tag.

~~Olunyiriri luno olw’ebiwandiiko lugendereddwamu okutwalibwa ng’olutakyali lutuufu.~~

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

Ebiwandiiko ebiyingiziddwamu

Okulaga eby'ongera ku kiwandiiko kozesa <ins>tag.

Ennyiriri eno ey’ekiwandiiko etegeeza okutwalibwa ng’okugatta ku kiwandiiko.

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

Ebiwandiiko ebiriko akabonero wansi

Okulaga wansi ebiwandiiko kozesa <u>tag.

Layini eno ey’ekiwandiiko ejja kulaga nga bwe kiragiddwa wansi

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

Kozesa ebigambo ebiggumiza ebya HTML ebisookerwako nga biriko sitayiro ezitazitowa.

Ebiwandiiko ebitonotono

Ku de-emphaasizing inline oba blocks of text, kozesa <small>tag okuteeka ebiwandiiko ku 85% obunene bw'omuzadde. Ebintu eby'omutwe bifuna font-sizeebyabyo ku bintu ebiteekeddwa mu kisenge <small>.

Oyinza okukozesa ekintu ekiri mu layini nga .smallmu kifo kya <small>.

Layini eno ey’ebiwandiiko etegeeza okutwalibwa ng’ennukuta ennungi.

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

Okwekazza

Olw’okuggumiza ekitundu ky’ekiwandiiko nga kiriko font-weight esingako obuzito.

Ekitundu ky'ekiwandiiko kino wammanga kivvuunulwa ng'ekiwandiiko ekinene .

<strong>rendered as bold text</strong>

Ennukuta eziyitibwa Italics

Olw’okuggumiza akatundu k’ekiwandiiko nga kiriko ennukuta ensirifu.

Ekitundu ky'ekiwandiiko kino wammanga kivvuunulwa nga ekiwandiiko ekiwandiikiddwa mu italic .

<em>rendered as italicized text</em>

Ebintu ebikyukakyuka

Wulira nga oli wa ddembe okukozesa <b>era <i>mu HTML5. <b>kigendereddwamu okulaga ebigambo oba ebisoko awatali kutuusa bukulu bwa kwongerako ate nga <i>kisinga kuba kya ddoboozi, ebigambo eby’ekikugu n’ebirala.

Ebika by’okulaganya

Kyangu okuddamu okusengeka ebiwandiiko ku bitundu ebirina ebika by’okusengeka ebiwandiiko.

Ebiwandiiko ebiteekeddwa ku kkono.

Ebiwandiiko ebiteekeddwa wakati.

Ebiwandiiko ebiteekeddwa ku ddyo.

Ekiwandiiko ekituufu.

Tewali biwandiiko bya kuzinga.

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

Ebisulo by’enkyukakyuka

Kyuusa ebiwandiiko mu bitundu ebirina ebika by’okuwandiika ebiwandiiko ebikulu.

Ebiwandiiko ebitonotono.

Ebiwandiiko ebiriko ennukuta ennene.

Ebiwandiiko ebiwandiikiddwa mu nnukuta ennene.

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

Ebifupi ebifupi

Stylized implementation of HTML's <abbr>element for ebifupi n'enfunyiro okulaga enkyusa egaziyiziddwa ku hover. Ebifupi ebirina titleekintu birina ensalosalo eya wansi eriko ennukuta entangaavu n’akabonero k’obuyambi ku hover, okuwa ensonga endala ku hover n’eri abakozesa tekinologiya ayamba.

Ekifupi ekikulu

Enfunyiro y'ekigambo attribute ye attr .

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

Okusooka

Okwongerako .initialismku kifupi okufuna font-size entono katono.

HTML kye kintu ekisinga obulungi okuva ku mugaati ogwasalibwa.

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

Endagiriro

Waayo ebikwata ku jjajja asinga okumpi oba omubiri gwonna ogw’omulimu gw’oyinza okutuukirira. Kuuma ensengeka ng'omaliriza ennyiriri zonna ne <br>.

Twitter, Inc.
1355 Akatale Street, Suite 900
San Francisco, CA 94103
P: (123) 456-7890. Enkola y’okukozesa eddagala lino

Erinnya mu bujjuvu
[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>

Ebigambo ebiziyiza

Olw'okujuliza ebitundu by'ebirimu okuva mu nsibuko endala munda mu kiwandiiko kyo.

Ekiwandiiko ekisookerwako ekisookerwako

Zinga HTML<blockquote> yonna nga quote. Ku bigambo ebitereevu, tusaba .<p>

Lorem ipsum dolor okutuula amet, okusengejja amasavu elit. Namba enzijuvu posuere erat a ante.

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

Blockquote eby'okulonda

Enkyukakyuka mu sitayiro n'ebirimu olw'enjawulo ennyangu ku mutindo <blockquote>.

Okutuuma ensibuko erinnya

Okwongerako a <footer>for okuzuula ensibuko. Zinga erinnya ly'omulimu gw'ensibuko mu <cite>.

Lorem ipsum dolor okutuula amet, okusengejja amasavu elit. Namba enzijuvu posuere erat a ante.

Omuntu omututumufu mu Source Title

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

Okwolesebwa okulala

Okwongerako .blockquote-reverseku blockquote n'ebirimu ebiteekeddwa ku ddyo.

Lorem ipsum dolor okutuula amet, okusengejja amasavu elit. Namba enzijuvu posuere erat a ante.

Omuntu omututumufu mu Source Title

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

Enkalala

Etalagirwa

Olukalala lw’ebintu ebirimu ensengeka etaliiko nsonga mu bulambulukufu.

Lorem ipsum dolor tuula amet
Consectetur okusiiga elit
Ennamba enzijuvu molestie lorem ku massa
Facilisis mu kikuta kya pretium nisl
Nulla volutpat aliquam omubisi gw’enjuki
- Ekitundu ekiyitibwa Phasellus iaculis neque ekiyitibwa ekimera ekiyitibwa Phasellus
- Purus sodales eddagala eriyitibwa ultricies
- Ekiwandiiko ekiyitibwa Vestibulum laoreet portttitor sem
- Ac tristique libero volutpat ku bwesigwa ku
Faucibus porta lacus eriko ekikuta ky’omubiri ekiyitibwa fringilla vel
Aenean okutuula amet erat nunc
Eget omuwala lorem

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

Yalagirwa

Olukalala lw’ebintu omulagiriro mwe gukola mu bulambulukufu.

Lorem ipsum dolor tuula amet
Consectetur okusiiga elit
Ennamba enzijuvu molestie lorem ku massa
Facilisis mu kikuta kya pretium nisl
Nulla volutpat aliquam omubisi gw’enjuki
Faucibus porta lacus eriko ekikuta ky’omubiri ekiyitibwa fringilla vel
Aenean okutuula amet erat nunc
Eget omuwala lorem

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

Etaliiko sitayiro

Ggyawo margin eyasooka list-stylen'eya kkono ku bintu eby'olukalala (abaana ab'amangu bokka). Kino kikwata ku bintu byokka eby’olukalala lw’abaana ab’amangu , ekitegeeza nti ojja kwetaaga okwongerako ekibiina ku nkalala zonna eziteekeddwa mu kiyumba nazo.

Lorem ipsum dolor tuula amet
Consectetur okusiiga elit
Ennamba enzijuvu molestie lorem ku massa
Facilisis mu kikuta kya pretium nisl
Nulla volutpat aliquam omubisi gw’enjuki
- Ekitundu ekiyitibwa Phasellus iaculis neque ekiyitibwa ekimera ekiyitibwa Phasellus
- Purus sodales eddagala eriyitibwa ultricies
- Ekiwandiiko ekiyitibwa Vestibulum laoreet portttitor sem
- Ac tristique libero volutpat ku bwesigwa ku
Faucibus porta lacus eriko ekikuta ky’omubiri ekiyitibwa fringilla vel
Aenean okutuula amet erat nunc
Eget omuwala lorem

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

Mu layini

Teeka ebintu byonna eby’olukalala ku layini emu nga olina display: inline-block;ne padding ezimu ezitangaala.

Lorem ow’ekika kya ipsum
Ekitundu ekiyitibwa Phasellus iaculis ekiyitibwa ekitundu ekiyitibwa Phasellus
Nulla volutpat nga bwe kiri

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

Okunnyonnyola

Olukalala lw’ebigambo n’ennyonnyola ezikwatagana nabyo.

Enkalala z’ennyonnyola: Olukalala lw’ennyonnyola lutuukiridde okunnyonnyola ebigambo.
Euismod: Ensigo id ligula porta felis euismod ensigo eget lacinia odio sem nec elit.; Donec id elit etali ya mi porta gravida ku eget metus.
Malesuada eriko ensolo: Etiam porta sem omusajja omunene ennyo omuto.

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

Ennyonyola ey’okwebungulula

Kola ebigambo n’ennyonnyola mu <dl>layini ku mabbali. Etandika nga esimbye nga default <dl>s, naye navbar bw'egaziwa, kale bino bikole.

Enkalala z’ennyonnyola: Olukalala lw’ennyonnyola lutuukiridde okunnyonnyola ebigambo.
Euismod: Ensigo id ligula porta felis euismod ensigo eget lacinia odio sem nec elit.; Donec id elit etali ya mi porta gravida ku eget metus.
Malesuada eriko ensolo: Etiam porta sem omusajja omunene ennyo omuto.
Felis euismod ensigo eget lacinia: Fusce dapibus, tellus ac cursus commodo, tortor mauris ekizimbulukusa ekizimbulukusa, ut ekizimbulukusa masso justo okutuula amet risus.

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

Okusalako mu ngeri ey’okwekolako

Enkalala z'ennyonnyola ez'okwebungulula zijja kusalako ebigambo ebiwanvu ennyo okusobola okutuuka mu kisenge kya kkono ne text-overflow. Mu viewports enfunda, zijja kukyuka okudda ku default stacked layout.

Mu layini

Zinga ebitundutundu bya koodi ebiri mu layini ne <code>.

Okugeza, <section>erina okuzingibwa nga inline.

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

Okuyingiza kw’omukozesa

Kozesa <kbd>okulaga okuyingiza okutera okuyingizibwa nga oyita ku kibboodi.

Okukyusa dayirekita, wandiika cdng’ogoberere erinnya lya dayirekita.
Okukyusa ensengeka, nyweza 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>

Bbulooka enkulu

Kozesa <pre>ku layini eziwera eza koodi. Kakasa nti otolokako enkoona zonna mu koodi okusobola okulaga obulungi.

<p>Ekiwandiiko eky'okulabirako wano...</p>

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

Oyinza okugattako .pre-scrollablekiraasi, ejja okuteekawo max-height ya 350px era ewe y-axis scrollbar.

Enkyukakyuka ezikyukakyuka

Okulaga enkyukakyuka kozesa <var>tag.

y = m x + b

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

Ekyokulabirako ekifulumizibwa

Ku kulaga bulooka sample output okuva mu program kozesa <samp>tag.

Ekiwandiiko kino kigendereddwamu okutwalibwa ng’ekyokulabirako ekifulumizibwa okuva mu pulogulaamu ya kompyuta.

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

Ekyokulabirako ekikulu

Ku sitayiro enkulu —okupakinga ekitangaala n’okugabanya okw’okwebungulula kwokka —yongera ku kiraasi ey’omusingi .tableku yonna <table>. Kiyinza okulabika nga super redundant, naye okusinziira ku nkozesa ennene ey'emmeeza ku plugins endala nga kalenda n'abalonda ennaku, twasalawo okwawula emisono gyaffe egy'emmeeza egy'enjawulo.

Ebigambo by’emmeeza eby’okwesalirawo.
# .	Erinnya erisooka	Erinnya erisemba	Erinnya ly'omukozesa
1.	Mark	Otto bwe yabadde	@mdo
2.	Yakobo	Thornton nga bwe kiri	@obunene
3.	Larry	Ekinyonyi	@twitter

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

Ennyiriri eziriko emisono

Kozesa .table-stripedokwongera ku zebra-striping ku lunyiriri lwonna olw'emmeeza munda mu <tbody>.

Okukwatagana kwa cross-browser

Emmeeza eziriko emisono zikolebwako sitayiro nga ziyita mu :nth-childCSS selector, etasangibwa mu Internet Explorer 8.

# .	Erinnya erisooka	Erinnya erisemba	Erinnya ly'omukozesa
1.	Mark	Otto bwe yabadde	@mdo
2.	Yakobo	Thornton nga bwe kiri	@obunene
3.	Larry	Ekinyonyi	@twitter

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

Emmeeza eriko ensalosalo

Gattako .table-borderedfor borders ku njuyi zonna ez'emmeeza n'obutoffaali.

# .	Erinnya erisooka	Erinnya erisemba	Erinnya ly'omukozesa
1.	Mark	Otto bwe yabadde	@mdo
2.	Yakobo	Thornton nga bwe kiri	@obunene
3.	Larry	Ekinyonyi	@twitter

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

Hover ennyiriri

Okwongerako .table-hoverokusobozesa embeera ya hover ku nnyiriri z'emmeeza munda mu <tbody>.

# .	Erinnya erisooka	Erinnya erisemba	Erinnya ly'omukozesa
1.	Mark	Otto bwe yabadde	@mdo
2.	Yakobo	Thornton nga bwe kiri	@obunene
3.	Larry	Ekinyonyi	@twitter

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

Emmeeza efuuse enfuufu

Okwongerako .table-condensedokufuula emmeeza okubeera enzibu ng’osala cell padding mu bitundu bibiri.

# .	Erinnya erisooka	Erinnya erisemba	Erinnya ly'omukozesa
1.	Mark	Otto bwe yabadde	@mdo
2.	Yakobo	Thornton nga bwe kiri	@obunene
3.	Larry Ekinyonyi		@twitter

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

Ebisulo ebikwata ku mbeera

Kozesa kiraasi ezikwata ku mbeera okukuba langi ku nnyiriri z’emmeeza oba obutoffaali obw’enjawulo.

Essomo	Okunnyonnyola
`.active`	Eteeka langi ya hover ku lunyiriri oba akasenge akalala
`.success`	Kiraga ekikolwa ekituuse ku buwanguzi oba ekirungi
`.info`	Kiraga enkyukakyuka oba ekikolwa eky’amawulire ekitaliimu ludda
`.warning`	Kiraga okulabula okuyinza okwetaaga okufaayo
`.danger`	Kiraga ekikolwa eky’akabi oba ekiyinza okuba ekibi

# .	Omutwe gw’ennyiriri	Omutwe gw’ennyiriri	Omutwe gw’ennyiriri
1.	Ebirimu mu mpagi	Ebirimu mu mpagi	Ebirimu mu mpagi
2.	Ebirimu mu mpagi	Ebirimu mu mpagi	Ebirimu mu mpagi
3.	Ebirimu mu mpagi	Ebirimu mu mpagi	Ebirimu mu mpagi
4.	Ebirimu mu mpagi	Ebirimu mu mpagi	Ebirimu mu mpagi
5.	Ebirimu mu mpagi	Ebirimu mu mpagi	Ebirimu mu mpagi
6.	Ebirimu mu mpagi	Ebirimu mu mpagi	Ebirimu mu mpagi
7.	Ebirimu mu mpagi	Ebirimu mu mpagi	Ebirimu mu mpagi
8.	Ebirimu mu mpagi	Ebirimu mu mpagi	Ebirimu mu mpagi
9.	Ebirimu mu mpagi	Ebirimu mu mpagi	Ebirimu mu mpagi

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

Okutuusa amakulu mu tekinologiya ayamba

Okukozesa langi okwongera amakulu ku lunyiriri lw’emmeeza oba akasenge ak’omuntu kinnoomu kiwa ekiraga ekirabika kyokka, ekitajja kutuusibwa eri abakozesa tekinologiya ayamba – gamba ng’ebisoma ku ssirini. Kakasa nti amawulire agalagirwa langi oba geeyoleka okuva mu birimu byennyini (ekiwandiiko ekirabika mu lunyiriri/akasenge k’emmeeza akakwatagana), oba gateekebwamu okuyita mu ngeri endala, gamba ng’ebiwandiiko ebirala ebikwekebwa ne .sr-onlykiraasi.

Emmeeza eziddamu

Tonda emmeeza eziddamu ng’ozinga .tablemu yonna .table-responsiveokuzifuula okutambula mu bbanga ku byuma ebitono (wansi wa 768px). Bw’oba olaba ku kintu kyonna ekinene okusinga 768px obugazi, tojja kulaba njawulo yonna mu mmeeza zino.

Okusala/okusalako mu ngeri eyeesimbye

Emmeeza eziddamu zikozesa overflow-y: hidden, esalako ebirimu byonna ebisukka wansi oba waggulu ku mbiriizi z’emmeeza. Okusingira ddala, kino kiyinza okusalako menu ezikka wansi ne widgets endala ez’ekibiina eky’okusatu.

Firefox ne fieldsets

Firefox erina ebimu ku bitali bizibu fieldset styling involving widthnti kutaataaganya emmeeza okuddamu. Kino tekiyinza kusazibwamu nga tewali hack eyeetongodde eya Firefox gye tutawa mu Bootstrap:

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

Okumanya ebisingawo, soma eky'okuddamu kino ekya Stack Overflow .

# .	Omutwe gw’emmeeza	Omutwe gw’emmeeza	Omutwe gw’emmeeza	Omutwe gw’emmeeza	Omutwe gw’emmeeza	Omutwe gw’emmeeza
1.	Akasengejja k’emmeeza	Akasengejja k’emmeeza	Akasengejja k’emmeeza	Akasengejja k’emmeeza	Akasengejja k’emmeeza	Akasengejja k’emmeeza
2.	Akasengejja k’emmeeza	Akasengejja k’emmeeza	Akasengejja k’emmeeza	Akasengejja k’emmeeza	Akasengejja k’emmeeza	Akasengejja k’emmeeza
3.	Akasengejja k’emmeeza	Akasengejja k’emmeeza	Akasengejja k’emmeeza	Akasengejja k’emmeeza	Akasengejja k’emmeeza	Akasengejja k’emmeeza

# .	Omutwe gw’emmeeza	Omutwe gw’emmeeza	Omutwe gw’emmeeza	Omutwe gw’emmeeza	Omutwe gw’emmeeza	Omutwe gw’emmeeza
1.	Akasengejja k’emmeeza	Akasengejja k’emmeeza	Akasengejja k’emmeeza	Akasengejja k’emmeeza	Akasengejja k’emmeeza	Akasengejja k’emmeeza
2.	Akasengejja k’emmeeza	Akasengejja k’emmeeza	Akasengejja k’emmeeza	Akasengejja k’emmeeza	Akasengejja k’emmeeza	Akasengejja k’emmeeza
3.	Akasengejja k’emmeeza	Akasengejja k’emmeeza	Akasengejja k’emmeeza	Akasengejja k’emmeeza	Akasengejja k’emmeeza	Akasengejja k’emmeeza

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

Ekyokulabirako ekikulu

Ebifuga ffoomu ssekinnoomu bifuna otomatika sitayiro ezimu ez’ensi yonna. Ebiwandiiko byonna <input>, <textarea>, <select>n'ebintu ebirina .form-controlbiteekebwa ku width: 100%;nga bwe kibadde. Zinga ebiwandiiko n’ebifuga mu .form-groupokusobola okufuna ebanga erisinga obulungi.

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

Totabula bibinja bya ffoomu n'ebibinja by'okuyingiza

Totabula bibinja bya ffoomu butereevu n'ebibinja by'okuyingiza . Wabula, teeka ekibinja ky'okuyingiza munda mu kibinja kya ffoomu.

Ffoomu mu layini

Yongera .form-inlineku ffoomu yo (ekitaliiko kuba <form>) ku bifuga ebiteekeddwa ku kkono ne mu layini-block. Kino kikwata ku foomu zokka eziri mu bifo eby'okulaba nga waakiri 768px obugazi.

Kiyinza okwetaaga obugazi obw’ennono

Ebiyingizibwa n'okulonda width: 100%;bikozeseddwa nga bwe kibadde mu Bootstrap. Munda mu ffoomu eziri mu layini, tuzzaawo ekyo ku width: auto;olwo ebifuga ebingi bisobole okubeera ku layini emu. Okusinziira ku nsengeka yo, obugazi obw’enjawulo obw’enjawulo buyinza okwetaagisa.

Bulijjo yongera ku bubonero

Abasoma ku ssirini bajja kufuna obuzibu ku foomu zo singa tossaamu kabonero ku buli ky’oyingiza. Ku foomu zino eziri mu layini, osobola okukweka ebiwandiiko ng’okozesa .sr-onlyekibiina. Waliwo enkola endala ez’okuwa akabonero ku tekinologiya ayamba, gamba nga aria-label, aria-labelledbyoba titleekintu. Singa tewali n’emu ku bino ebaawo, abasomi ku screen bayinza okuddukira mu kukozesa placeholderekintu ekyo, bwe kiba nga kiriwo, naye weetegereze nti okukozesa placeholderng’ekifo ky’enkola endala ez’okuwandiika ebigambo tekiba kirungi.

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

Ekifaananyi eky’okwebungulula

Kozesa Bootstrap's predefined grid classes okulaganya ebiwandiiko n'ebibinja by'ebifuga foomu mu nteekateeka ey'okwebungulula ng'oyongera .form-horizontalku foomu (ekitaliiko kuba a <form>). Okukola ekyo kikyusa .form-groups okweyisa nga ennyiriri za giridi, kale tekyetaagisa .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>

Ebifuga ebiwagirwa

Eby'okulabirako by'ebifuga foomu eya bulijjo ebiwagirwa mu nsengeka ya foomu ey'ekyokulabirako.

Ebiyingizibwa

Okufuga foomu okusinga okumanyibwa, ennimiro z’okuyingiza ezesigamiziddwa ku biwandiiko. Mulimu obuwagizi eri ebika byonna ebya HTML5: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, ne color.

Okulangirira ekika kyetaagisa

Ebiyingizibwa bijja kuba bya sitayiro mu bujjuvu singa ebyabyo bilangirirwa typebulungi.

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

Ebibinja ebiyingiza

Okwongerako ekiwandiiko oba obutambi obugattibwa nga tebunnabaawo ne/oba oluvannyuma lw'ekiwandiiko kyonna ekyesigamiziddwa ku kiwandiiko <input>, kebera ekitundu ky'ekibiina ky'okuyingiza .

Ekitundu ky’ebiwandiiko

Okufuga foomu ewagira ennyiriri eziwera ez’ebiwandiiko. Kyusa rowsattribute nga bwe kyetaagisa.

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

Ebibokisi ebikebera ne leediyo

Ebibokisi ebikebera biba bya kulonda ekintu kimu oba ebiwerako mu lukalala, ate leediyo za kulonda ekintu kimu okuva mu bingi.

Ebibokisi ebikebera ne leediyo ezilema biwagirwa, naye okuwa akabonero "ekitali kikkirizibwa" ku hover y'omuzadde <label>, ojja kwetaaga okwongera .disabledekibiina ku muzadde .radio, .radio-inline, .checkbox, oba .checkbox-inline.

Ekisookerwako (ekitumbibwa) .

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

Ebibokisi ebikebera mu layini ne leediyo

Kozesa .checkbox-inlineoba .radio-inlinekiraasi ku lunyiriri lw’ebibokisi oba leediyo ku bifuga ebirabika ku layini y’emu.

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

Checkboxes ne radios ezitaliimu biwandiiko bya label

Singa tolina kiwandiiko munda mu <label>, ekiyingizibwa kiteekebwa mu kifo nga bw'osuubira. Mu kiseera kino ekola ku checkboxes ezitali za inline ne radios zokka. Jjukira okukyawa engeri emu ey’akabonero ku tekinologiya ayamba (okugeza, okukozesa 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>

Alondawo

Weetegereze nti menu nnyingi ezirondeddwamu enzaaliranwa —kwe kugamba mu Safari ne Chrome —zirina enkoona ezeetooloovu ezitasobola kukyusibwa nga ziyita mu border-radiusbintu.

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

Ku <select>bifuga ebirina multipleekintu, eby'okulonda ebingi biragiddwa nga bwe kibadde.

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

Okufuga okutambula (static control).

Bw’oba weetaaga okuteeka ekiwandiiko ekitali kya bulijjo okumpi n’akabonero ka foomu munda mu foomu, kozesa .form-control-staticekibiina ku <p>.

<form class="form-horizontal">
  <div class="form-group">
    <label class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <p class="form-control-static">[email protected]</p>
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword" placeholder="Password">
    </div>
  </div>
</form>

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only">Email</label>
    <p class="form-control-static">[email protected]</p>
  </div>
  <div class="form-group">
    <label for="inputPassword2" class="sr-only">Password</label>
    <input type="password" class="form-control" id="inputPassword2" placeholder="Password">
  </div>
  <button type="submit" class="btn btn-default">Confirm identity</button>
</form>

Embeera y’okussa essira

Tuggyawo outlinesitayiro ezisookerwako ku bifuga ffoomu ezimu ne tussa a box-shadowmu kifo kyayo ku :focus.

Demo `:focus`state

Ekyokulabirako waggulu okuyingiza kukozesa emisono egy'ennono mu biwandiiko byaffe okulaga :focusembeera ku .form-control.

Embeera ebalema

Okwongerako ekintu kya disabledboolean ku kiyingizibwa okuziyiza enkolagana z'abakozesa. Ebiyingizibwa ebilemeddwa birabika nga bitangaavu era nga kwongerako not-allowedcursor.

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

Ennimiro ezilemeddwa

Okwongerako disabledattribute ku a <fieldset>okulemesa ebifuga byonna munda <fieldset>mu omulundi gumu.

Okulabula ku nkola y'okuyunga eya`<a>`

Nga bwekiba, browsers zijja kutwala byonna ebifuga ffoomu enzaaliranwa ( <input>, <select>ne <button>elements) munda mu a <fieldset disabled>nga ebiremeseddwa, okulemesa byombi keyboard ne mouse enkolagana ku byo. Naye singa ffoomu yo nayo erimu <a ... class="btn btn-*">ebintu, bino bijja kuweebwa sitayiro ya pointer-events: none. Nga bwe kyayogerwa mu kitundu ekikwata ku mbeera elemeseddwa ku buttons (n’okusingira ddala mu kitundu ekitono eky’ebintu ebinanga), ekintu kino ekya CSS tekinnaba ku mutindo era tekinnawagirwa mu bujjuvu mu Opera 18 ne wansi, oba mu Internet Explorer 11, era kyawangula 't okulemesa abakozesa keyboard okusobola okussa essira oba okukola links zino. Kale okusobola okuba n’obukuumi, kozesa JavaScript eya bulijjo okulemesa enkolagana ng’ezo.

Okukwatagana kwa cross-browser

Wadde nga Bootstrap ejja kukozesa emisono gino mu browser zonna, Internet Explorer 11 ne wansi tewagira mu bujjuvu disabledattribute ku a <fieldset>. Kozesa JavaScript eya bulijjo okulemesa fieldset mu browser zino.

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

Okusoma kwokka gamba

Okwongerako ekintu kya readonlyboolean ku kiyingizibwa okuziyiza okukyusa omuwendo gw'ekiyingizibwa. Ebiyingizibwa ebisomebwa byokka birabika nga bitangaavu (nga ebiyingizibwa ebiremeseddwa), naye bikuume cursor eya bulijjo.

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

Ekiwandiiko ekiyamba

Block level obuyambi text ku bifuga foomu.

Okukwataganya ekiwandiiko ky'obuyambi n'ebifuga foomu

Ekiwandiiko ky’obuyambi kirina okukwatagana mu bulambulukufu n’okufuga foomu kye kikwatagana n’okukozesa aria-describedbyekintu. Kino kijja kukakasa nti tekinologiya ayamba – nga ebisoma ku ssirini – ajja kulangirira ekiwandiiko kino eky’obuyambi ng’omukozesa assa essira oba ng’ayingira mu kufuga.

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

Okukakasa kugamba

Bootstrap erimu emisono gy'okukakasa ensobi, okulabula, n'embeera z'obuwanguzi ku bifuga foomu. Okukozesa, yongera .has-warning, .has-error, oba .has-successku kintu ekizadde. .control-label, , yonna .form-controlera .help-blockmunda mu elementi eyo ejja kufuna emisono gy'okukakasa.

Okutuusa embeera y’okukakasa eri tekinologiya ayamba n’abakozesa abazibe ba langi

Okukozesa emisono gino egy’okukakasa okulaga embeera y’okufuga foomu kiwa kwokka okulaga, okulaga okwesigamiziddwa ku langi, okutajja kutuusibwa eri abakozesa tekinologiya ayamba - gamba ng’abasoma ku ssirini - oba eri abakozesa abazibe ba langi.

Kakasa nti ekiraga embeera endala nakyo kiweebwa. Okugeza, oyinza okussaamu akabonero akakwata ku mbeera mu kiwandiiko ky’ekifuga ffoomu <label>kyennyini (nga bwe kiri mu kyokulabirako kya koodi kino wammanga), okussaamu Glyphicon (n’ekiwandiiko ekirala ekituufu ng’okozesa .sr-onlyekibiina - laba ebyokulabirako bya Glyphicon ), oba ng’owaayo obuyambi obw'enjawulo okuziyiza ebiwandiiko . Okusingira ddala ku tekinologiya ayamba, ebifuga foomu ebitali bituufu nabyo bisobola okuweebwa ekintu aria-invalid="true".

<div class="form-group has-success">
  <label class="control-label" for="inputSuccess1">Input with success</label>
  <input type="text" class="form-control" id="inputSuccess1" aria-describedby="helpBlock2">
  <span id="helpBlock2" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
</div>
<div class="form-group has-warning">
  <label class="control-label" for="inputWarning1">Input with warning</label>
  <input type="text" class="form-control" id="inputWarning1">
</div>
<div class="form-group has-error">
  <label class="control-label" for="inputError1">Input with error</label>
  <input type="text" class="form-control" id="inputError1">
</div>
<div class="has-success">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxSuccess" value="option1">
      Checkbox with success
    </label>
  </div>
</div>
<div class="has-warning">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxWarning" value="option1">
      Checkbox with warning
    </label>
  </div>
</div>
<div class="has-error">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxError" value="option1">
      Checkbox with error
    </label>
  </div>
</div>

Nga olina ebifaananyi eby’okwesalirawo

Osobola n’okugattako ebifaananyi by’okuddamu eby’okwesalirawo ng’oyongeddeko .has-feedbackn’akabonero akatuufu.

Ebifaananyi by’okuddamu bikola n’ebintu byokka eby’ebiwandiiko <input class="form-control">.

Ebifaananyi, ebiwandiiko, n'ebibinja by'okuyingiza

Okuteeka ebifaananyi by’okuddamu mu ngalo kyetaagisa ku biyingizibwa ebitaliiko kabonero n’ebibinja by’ebiyingizibwa ebirina eky’okugattako ku ddyo. Okubirizibwa nnyo okuwa ebiwandiiko ku biyingizibwa byonna olw’ensonga z’okutuuka ku bantu. Bw’oba oyagala okulemesa ebiwandiiko okulaga, bikweke ne .sr-onlykiraasi. Bw’oba olina okukola nga tolina bubonero, tereeza topomuwendo gw’akabonero k’okuddamu. Ku bibinja by'okuyingiza, tereeza rightomuwendo ku muwendo gwa pixel ogusaanira okusinziira ku bugazi bwa addon yo.

Okutuusa amakulu g’ekifaananyi eri tekinologiya ayamba

Okukakasa nti tekinologiya ayamba – nga ebisoma ku ssirini – atuusa bulungi amakulu g’akabonero, ebiwandiiko ebirala ebikwekebwa birina okuteekebwa mu .sr-onlykibiina era ne bikwatagana mu bulambulukufu n’okufuga foomu kwe kukwatagana n’okukozesa aria-describedby. Ekirala, kakasa nti amakulu (okugeza, eky’okuba nti waliwo okulabula ku kifo ekimu eky’okuyingiza ekiwandiiko) gatuusibwa mu ngeri endala, gamba ng’okukyusa ekiwandiiko ky’ekyo ekituufu <label>ekikwatagana n’okufuga ffoomu.

Newankubadde nga ebyokulabirako bino wammanga byayogera dda ku mbeera y’okukakasa eby’okufuga kwabwe okwa ffoomu mu <label>kiwandiiko kyennyini, enkola eyo waggulu (nga tukozesa .sr-onlyekiwandiiko ne aria-describedby) ebadde eyingiziddwamu olw’ebigendererwa eby’okulaga.

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

Ebifaananyi eby’okwesalirawo mu ngeri ez’okwebungulula n’ez’omu layini

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

Ebifaananyi eby’okwesalirawo `.sr-only`ebiriko ebiwandiiko ebikwekebwa

Singa okozesa .sr-onlyekibiina okukweka form control's <label>(okusinga okukozesa labeling options endala, nga aria-labelattribute), Bootstrap ejja kutereeza automatically ekifo ky'akabonero nga kimaze okugattibwako.

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

Fuga okugerageranya obunene

Teeka obugulumivu ng'okozesa kiraasi nga .input-lg, era teeka obugazi ng'okozesa kiraasi z'ennyiriri za giridi nga .col-lg-*.

Okugerageranya obuwanvu

Tonda ebifuga ffoomu ebiwanvu oba ebimpi ebikwatagana ne sayizi za button.

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

Enkula y’ebibinja by’ebifaananyi eby’okwebungulula

Yanguwa sayizi ebiwandiiko n'ebifuga okukola munda .form-horizontalng'ogattako .form-group-lgoba .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>

Okugerageranya obunene bw’empagi

Zinga ebiyingizibwa mu mpagi za giridi, oba ekintu kyonna eky’omuzadde eky’ennono, okwanguyirwa okunyweza obugazi obweyagaza.

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

Ebiwandiiko ebiraga obutambi

Kozesa ebika bya button ku <a>, <button>, oba <input>elementi.

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

Enkozesa eyeetongodde ku mbeera

Wadde nga button classes zisobola okukozesebwa ku <a>ne <button>elements, <button>elements zokka ze ziwagirwa munda mu bitundu byaffe ebya nav ne navbar.

Links ezikola nga buttons

Singa <a>ebintu bikozesebwa okukola nga buttons – okutandikawo emirimu mu lupapula, okusinga okugenda mu kiwandiiko ekirala oba ekitundu munda mu lupapula oluliwo kati – nabyo bisaana okuweebwa esaanira role="button".

Okulaga ku cross-browser

Nga enkola esinga obulungi, tusaba nnyo okukozesa <button>elementi buli lwe kiba kisoboka okukakasa okukwatagana cross-browser rendering.

Mu bintu ebirala, waliwo ekizibu mu Firefox <30 ekitulemesa okuteekawo obutambi obusinziira ku line-heightof <input>-, ekibuleetera obutakwatagana bulungi na buwanvu bwa button endala ku Firefox.

Eby’okulondako

Kozesa kiraasi yonna eya button eriwo okukola amangu button eriko sitayiro.

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

Okutuusa amakulu mu tekinologiya ayamba

Okukozesa langi okwongera amakulu ku bbaatuuni kiwa ekiraga ekirabika kyokka, ekitajja kutuusibwa eri abakozesa tekinologiya ayamba – gamba ng’ebisoma ku ssirini. Kakasa nti amawulire agalagirwa langi oba geeyoleka okuva mu birimu byennyini (ebiwandiiko ebirabika ebya bbaatuuni), oba biyingizibwa okuyita mu ngeri endala, gamba ng’ebiwandiiko ebirala ebikwekebwa ne .sr-onlykiraasi.

Sayizi ezitali zimu

Fancy buttons ennene oba entono? Okwongerako .btn-lg, .btn-sm, oba .btn-xsokufuna sayizi endala.

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

Tonda buttons za block level —ezo ezibuna obugazi bwonna obw’omuzadde — nga ossaako .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>

Embeera ekola

Buttons zijja kulabika nga zinyigiddwa (nga zirina background enzirugavu, ensalosalo enzirugavu, n'ekisiikirize ekiyingiziddwa) nga zikola. Ku <button>elementi, kino kikolebwa nga kiyita mu :active. Ku <a>elementi, kikoleddwa ne .active. Naye, oyinza okukozesa .activeku <button>s (n'okussaamu aria-pressed="true"ekintu) singa oba weetaaga okukoppa embeera ekola mu pulogulaamu.

Ekintu kya button

Tekyetaagisa kwongerako :activenga bwe kiri pseudo-class, naye bw'oba weetaaga okukaka endabika y'emu, genda mu maaso osseeko .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>

Ekintu ekinyweza ennanga

Okwongera .activeekibiina ku <a>buttons.

Enkolagana enkulu Okuyunga

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

Embeera ebalema

Fuula buttons okulabika nga teziyinza kunyiga nga zizikira emabega ne opacity.

Ekintu kya button

Okwongera disabledekintu ku <button>buttons.

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

Okukwatagana kwa cross-browser

Singa ogattako disabledattribute ku a <button>, Internet Explorer 9 ne wansi ejja kulaga ebiwandiiko enzirugavu n’ekiwandiiko-ekisiikirize ekibi kye tutasobola kutereeza.

Ekintu ekinyweza ennanga

Okwongera .disabledekibiina ku <a>buttons.

Enkolagana enkulu Okuyunga

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

Tukozesa .disablednga kiraasi y’omugaso wano, okufaananako ne .activekiraasi eya bulijjo, kale tewali ntandikwa yeetaagibwa.

Okulabula ku nkola y’okuyunga

Kiraasi eno ekozesa pointer-events: noneokugezaako okulemesa enkola y’enkolagana ya <a>s, naye ekyo CSS ekintu tekinnaba ku mutindo era tekinnawagirwa mu bujjuvu mu Opera 18 ne wansi, oba mu Internet Explorer 11. Okugatta ku ekyo, ne mu browser ezikola okuwagira pointer-events: none, keyboard navigation esigala nga tekoseddwa, ekitegeeza nti abakozesa keyboard abalaba n’abakozesa tekinologiya ayamba bakyasobola okukola links zino. Kale okusobola okuba n’obukuumi, kozesa JavaScript eya bulijjo okulemesa enkolagana ng’ezo.

Ebifaananyi ebiddamu

Ebifaananyi mu Bootstrap 3 bisobola okufuulibwa responsive-friendly nga biyita mu kwongerako .img-responsiveekibiina. Kino kikola max-width: 100%;, height: auto;ne display: block;ku kifaananyi kisobole okugerageranya obulungi ku elementi omuzadde.

Okuteeka wakati ebifaananyi ebikozesa .img-responsiveekibiina, kozesa .center-blockmu kifo kya .text-center. Laba ekitundu ky'ebibiina by'abayambi okumanya ebisingawo ku .center-blocknkozesa.

Ebifaananyi bya SVG ne IE 8-10

Mu Internet Explorer 8-10, ebifaananyi bya SVG ne .img-responsivebiba bya sayizi etali ya kigero. Kino okukitereeza, yongerako width: 100% \9;we kyetaagisa. Bootstrap kino tekikola mu ngeri ya otomatiki kuba kireeta obuzibu ku nkola endala ez'ebifaananyi.

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

Ebifaananyi by’ebifaananyi

Okwongerako kiraasi ku <img>elementi okusobola okwanguyirwa okukola sitayiro y’ebifaananyi mu pulojekiti yonna.

Okukwatagana kwa cross-browser

Kuuma mu mutima nti Internet Explorer 8 ebulwa obuwagizi eri enkoona ezeetooloovu.

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

Langi ezikwata ku mbeera

Tuusa amakulu ng’oyita mu langi n’engalo ntono ez’okussa essira ku bibiina by’omugaso. Bino era biyinza okukozesebwa ku nkolagana era bijja kuzikizibwa ku hover nga bwe kiri ku sitayiro zaffe ez'enkolagana ezisookerwako.

Fusce dapibus, tellus ac ekivuma commodo, okutulugunya mauris nibh.

Nullam id dolor id nibh ebidduka ebidduka ut id elit.

Duis mollis, est non commodo luctus, ekintu ekitali kya mugaso, ekiwuka ekiyitibwa porttitor ligula.

Maecenas sed diam eget risus varius blandit okutuula ate nga si magna.

Etiam porta sem omusajja omunene ennyo omuto.

Donec ullamcorper nulla etali ya metus omusuubuzi 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>

Okukola ku nsonga ezitali zimu

Oluusi ebika by’okussa essira tebisobola kukozesebwa olw’obutonde obw’enjawulo obw’omusunsuzi omulala. Emirundi egisinga, eky’okukola ekimala kwe kuzinga ekiwandiiko kyo mu a <span>n’ekibiina.

Okutuusa amakulu mu tekinologiya ayamba

Okukozesa langi okwongera amakulu kiwa ekiraga ekirabika kyokka, ekitajja kutuusibwa eri abakozesa tekinologiya ayamba – gamba ng’ebisoma ku ssirini. Kakasa nti amawulire agalagirwa langi oba geeyoleka okuva mu birimu byennyini (langi eziri mu mbeera zikozesebwa kwokka okunyweza amakulu agaliwo edda mu kiwandiiko/akabonero), oba gateekebwamu okuyita mu ngeri endala, gamba ng’ebiwandiiko ebirala ebikwekebwa ne .sr-onlykiraasi .

Ebintu ebikwata ku mbeera

Okufaananako ne kiraasi za langi z’ebiwandiiko eby’omutwe, kyangu okuteeka ennyuma y’ekintu ku kiraasi yonna ey’ensonga. Ebitundu bya anchor bijja kuzikizibwa ku hover, nga kiraasi z'ebiwandiiko.

Nullam id dolor id nibh ebidduka ebidduka ut id elit.

Duis mollis, est non commodo luctus, ekintu ekitali kya mugaso, ekiwuka ekiyitibwa porttitor ligula.

Maecenas sed diam eget risus varius blandit okutuula ate nga si magna.

Etiam porta sem omusajja omunene ennyo omuto.

Donec ullamcorper nulla etali ya metus omusuubuzi 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>

Okukola ku nsonga ezitali zimu

Oluusi ebika by’emabega eby’embeera tebisobola kukozesebwa olw’obutonde obw’enjawulo obw’omusunsuzi omulala. Mu mbeera ezimu, eky’okukola ekimala kwe kuzinga ebirimu mu elementi yo mu a <div>ne kiraasi.

Okutuusa amakulu mu tekinologiya ayamba

As with contextual colors , kakasa nti amakulu gonna agaweebwa okuyita mu langi nago gatuusibwa mu nkola etali ya kwanjula kwokka.

Ggalawo ekifaananyi

Kozesa akabonero k'okuggalawo aka bulijjo okugoba ebirimu nga modals n'okulabula.

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

Ebirala ebiyitibwa Carets

Kozesa carets okulaga enkola y’okugwa wansi n’obulagirizi. Weetegereze nti caret eya bulijjo ejja kudda emabega mu ngeri ey'otoma mu menu ezigwa .

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

Ebitengejja eby’amangu

Lengejja elementi ku kkono oba ku ddyo ne kiraasi. !importantkiyingizibwamu okwewala ensonga ezikwata ku specificity. Ebisulo nabyo bisobola okukozesebwa nga mixins.

<div class="pull-left">...</div>
<div class="pull-right">...</div>

// Classes
.pull-left {
  float: left !important;
}
.pull-right {
  float: right !important;
}

// Usage as mixins
.element {
  .pull-left();
}
.another-element {
  .pull-right();
}

Ebiziyiza ebirimu wakati

Teeka elementi okutuuka display: blockne wakati ng'oyita mu margin. Esangibwa nga mixin ne class.

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

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

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

Okulongoosa

Kyangu okulongoosa floats nga ogatta .clearfix ku elementi omuzadde . Akozesa micro clearfix nga bwe yamanyisibwa Nicolas Gallagher. Era asobola okukozesebwa nga mixin.

<!-- Usage as a class -->
<div class="clearfix">...</div>

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

// Usage as a mixin
.element {
  .clearfix();
}

Okulaga n’okukweka ebirimu

Kaka ekintu okulagibwa oba okukwekebwa ( nga mw’otwalidde n’abasoma ku ssirini ) n’okukozesa .showne .hiddenkiraasi. Ebika bino bikozesa !importantokwewala okukontana okw’enjawulo, nga bwe kiri ku biwujjo eby’amangu . Zibeerawo ku block level toggling yokka. Era zisobola okukozesebwa nga mixins.

.hideeriwo, naye tekikosa bulijjo basoma ku ssirini era evudde ku v3.0.1. Kozesa .hiddenoba .sr-onlymu kifo ky’ekyo.

Ekirala, .invisibleesobola okukozesebwa okukyusakyusa okulabika kw’ekintu kyokka, ekitegeeza nti kyayo displaytekikyusiddwa era ekintu ekyasobola okukosa entambula y’ekiwandiiko.

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

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

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

Screen reader ne keyboard ebirimu ebigenda mu maaso

Kweka elementi ku byuma byonna okuggyako ebisoma screen nga biriko .sr-only. Gatta .sr-onlyne .sr-only-focusableokuddamu okulaga elementi nga etunuuliddwa (okugeza omukozesa wa keyboard yekka). Ekyetaagisa okugoberera enkola ennungi ez'okutuuka ku bantu . Era asobola okukozesebwa nga mixins.

<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>

// Usage as a mixin
.skip-navigation {
  .sr-only();
  .sr-only-focusable();
}

Okukyusa ebifaananyi

Kozesa .text-hideekibiina oba mixin okuyamba okukyusa ebirimu by'ekiwandiiko ky'ekintu n'ekifaananyi eky'emabega.

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

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

Okusobola okukulaakulanya amangu essimu, kozesa ebika bino eby’omugaso okulaga n’okukweka ebirimu okusinziira ku kyuma ng’oyita mu kubuuza emikutu. Era mulimu ebika by’omugaso eby’okukyusakyusa ebirimu nga bikubiddwa.

Gezaako okukozesa bino ku musingi omutono era weewale okukola enkyusa ez’enjawulo ddala ez’omukutu gwe gumu. Mu kifo ky’ekyo, zikozese okujjuliza ennyanjula ya buli kyuma.

Ebisulo ebiriwo

Kozesa ekimu oba omugatte gwa kiraasi eziriwo okukyusa ebirimu okuyita mu bifo eby'okumenyawo eby'okulaba.

	Ebyuma ebitonotono eby’enjawuloAmasimu (<768px) .	Ebyuma ebitonotonoEmpeke (≥768px) .	Ebyuma ebya wakatiEbikozesebwa ku mmeeza (≥992px)	Ebyuma ebineneEbikozesebwa ku mmeeza (≥1200px) .
`.visible-xs-*`	Kirabika	Okukweekebwa	Okukweekebwa	Okukweekebwa
`.visible-sm-*`	Okukweekebwa	Kirabika	Okukweekebwa	Okukweekebwa
`.visible-md-*`	Okukweekebwa	Okukweekebwa	Kirabika	Okukweekebwa
`.visible-lg-*`	Okukweekebwa	Okukweekebwa	Okukweekebwa	Kirabika
`.hidden-xs`	Okukweekebwa	Kirabika	Kirabika	Kirabika
`.hidden-sm`	Kirabika	Okukweekebwa	Kirabika	Kirabika
`.hidden-md`	Kirabika	Kirabika	Okukweekebwa	Kirabika
`.hidden-lg`	Kirabika	Kirabika	Kirabika	Okukweekebwa

Okuva ku v3.2.0, .visible-*-*kiraasi za buli breakpoint zijja mu nkyukakyuka ssatu, emu ku buli CSS displayproperty value ewandiikiddwa wansi.

Ekibinja ky’ebibiina	CSS`display`
`.visible-*-block`	`display: block;`
`.visible-*-inline`	`display: inline;`
`.visible-*-inline-block`	`display: inline-block;`

Kale, ku screens entono ennyo ( xs) okugeza, .visible-*-*kiraasi eziriwo ze zino: .visible-xs-block, .visible-xs-inline, ne .visible-xs-inline-block.

Ebika .visible-xs, .visible-sm, .visible-md, era .visible-lgnabyo biriwo, naye bivudde ku v3.2.0 . Ziri nga zenkanankana ne .visible-*-block, okuggyako nga zirina ensonga ez’enjawulo ez’enjawulo <table>ez’ebintu ebikwatagana n’okukyusakyusa.

Ebisulo by’okukuba ebitabo

Okufaananako n’ebibiina ebiddamu ebya bulijjo, kozesa bino okukyusa ebirimu okukuba mu kyapa.

Ebisulo by’abayizi	Omukutu gwa Browser	Kuba mu kyapa
`.visible-print-block` `.visible-print-inline` `.visible-print-inline-block`	Okukweekebwa	Kirabika
`.hidden-print`	Kirabika	Okukweekebwa

Kiraasi .visible-printnayo eriwo naye evudde ku v3.2.0. Kiringankana ne .visible-print-block, okuggyako nga waliwo ensonga ez’enjawulo ez’enjawulo <table>ez’ebintu ebikwatagana -.

Emisango gy’okukeberebwa

Kyuusa obunene bwa browser yo oba load ku byuma eby’enjawulo okugezesa kiraasi z’ebikozesebwa ebiddamu.

Kirabika ku...

Obubonero obwa kiragala bulaga nti ekintu kirabika mu kifo kyo eky'okulaba ekiriwo kati.

Ebitono ennyo ✔ Kirabika ku x-small

Tono ✔ Kirabika ku butono

Midiyamu ✔ Kirabika ku medium

Gazi ✔ Kirabika ku kinene

Extra obutono n’obutono ✔ Kirabika ku x-obutono n'obutono

Wa wakati n’ennene ✔ Kirabika ku kya wakati n'ekinene

Extra obutono ate nga bwa wakati ✔ Erabika ku x-small ne medium

Entono n’ennene ✔ Kirabika ku butono n'obunene

Extra obutono ate nga bunene ✔ Kirabika ku x-entono n'ennene

Entono ate nga za wakati ✔ Kirabika ku butono ne wakati

Ekwekeddwa ku...

Wano, obubonero bwa kiragala era bulaga nti elementi ekwekeddwa mu viewport yo eriwo kati.

Ebitono ennyo ✔ Ekwekeddwa ku x-small

Tono ✔ Ekwekeddwa ku butono

Midiyamu ✔ Ekwekeddwa ku medium

Gazi ✔ Ekwekeddwa ku binene

Extra obutono n’obutono ✔ Ekwekeddwa ku x-entono n'entono

Wa wakati n’ennene ✔ Ekwekeddwa ku medium ne large

Extra obutono ate nga bwa wakati ✔ Ekwekeddwa ku x-small ne medium

Entono n’ennene ✔ Ekwekebwa ku butono n'obunene

Extra obutono ate nga bunene ✔ Ekwekeddwa ku x-entono n'ennene

Entono ate nga za wakati ✔ Ekwekebwa ku butono n'obw'omu makkati

CSS ya Bootstrap ezimbiddwa ku Less, preprocessor erimu emirimu egy’enjawulo nga variables, mixins, n’emirimu gy’okukung’aanya CSS. Abo abanoonya okukozesa fayiro za source Less mu kifo kya fayiro zaffe eza CSS ezikung’aanyiziddwa basobola okukozesa enkyukakyuka nnyingi ne mixins ze tukozesa mu nkola yonna.

Enkyukakyuka za Grid ne mixins zikwatibwako mu kitundu kya Grid system .

Okukunganya Bootstrap

Bootstrap esobola okukozesebwa mu ngeri ezitakka wansi wa bbiri: ne CSS ekunganyiziddwa oba ne fayiro za source Less. Okukungaanya fayiro za Less, weebuuze ku kitundu Getting Started ku ngeri y'okuteekawo embeera yo ey'enkulaakulana okuddukanya ebiragiro ebyetaagisa.

Ebikozesebwa mu kukungaanya eby’ekibiina eky’okusatu biyinza okukola ne Bootstrap, naye tebiwagirwa ttiimu yaffe enkulu.

Enkyukakyuka ezikyukakyuka

Enkyukakyuka zikozesebwa mu pulojekiti yonna ng’engeri y’okussa wakati n’okugabana emiwendo egyakozesebwa ennyo nga langi, ebanga, oba ebisenge by’empandiika. Okumanya ebisingawo, laba Customizer .

Langi za langi

Kyangu okukozesa ensengeka za langi bbiri: enzirugavu ne semantic. Langi ez’enzirugavu ziwa amangu okutuuka ku bisiikirize eby’ekiddugavu ebitera okukozesebwa ate eby’amakulu birimu langi ez’enjawulo eziweereddwa emiwendo egy’ensonga egy’amakulu.

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

Kozesa ekimu ku bikyukakyuka bya langi zino nga bwe kiri oba ddamu okuzigaba ku nkyukakyuka ezisingako amakulu ku pulojekiti yo.

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

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

Okukola ebikondo

Enkyukakyuka entonotono ez’okulongoosa amangu ebintu ebikulu eby’amagumba g’omukutu gwo.

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

Enkolagana

Kyangu okukola sitayiro ku links zo ne langi entuufu nga olina omuwendo gumu gwokka.

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

Weetegereze nti the @link-hover-colorekozesa omulimu, ekintu ekirala eky’entiisa okuva mu Less, okukola otomatiki langi ya hover entuufu. Osobola okukozesa darken, lighten, saturate, ne desaturate.

Okuwandiika ebitabo

Kyangu okuteekawo ensengeka yo, obunene bw’ebiwandiiko, okukulembera, n’ebirala ng’okozesa enkyukakyuka entonotono ez’amangu. Bootstrap ekozesa bino nga bwe kiri okuwa mixins ennyangu ez'okuwandiika.

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

Ebifaananyi ebiraga ebifaananyi

Enkyukakyuka bbiri ez'amangu ez'okulongoosa ekifo n'erinnya lya fayiro y'ebifaananyi byo.

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

Ebitundu ebikola omubiri

Ebitundu mu Bootstrap yonna bikozesa enkyukakyuka ezimu ezisookerwako okuteekawo emiwendo egya bulijjo. Bino bye bisinga okukozesebwa.

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

Omutunzi mixins

Vendor mixins ye mixins okuyamba okuwagira browser eziwera nga ossaamu entandikwa zonna ezikwatagana ez'omutunzi mu CSS yo ekung'aanyiziddwa.

Okukola obunene bw’ebibokisi

Reset your components' box model ne mixin emu. Okumanya ebikwata ku nsonga eno, laba ekiwandiiko kino ekiyamba okuva mu Mozilla .

Mixin evudde ku v3.2.0, nga ereese Autoprefixer. Okukuuma backwards-compatibility, Bootstrap ejja kusigala ng'ekozesa mixin munda okutuusa Bootstrap v4.

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

Enkoona ezeetooloovu

Leero browser zonna ez’omulembe ziwagira ekintu ekitali kya ntandikwa border-radius. Nga bwekiri, tewali .border-radius()mixin, naye Bootstrap erimu shortcuts ez’okuzingulula amangu enkoona bbiri ku ludda olumu olw’ekintu.

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

Ebisiikirize bya Bokisi (Drop).

Bw’oba ng’abantu b’ogenderera bakozesa browser n’ebyuma ebisembyeyo era ebisinga obukulu, kakasa nti omala kukozesa box-shadowkintu ekyo ku bwakyo. Bw’oba weetaaga obuwagizi eri ebyuma ebikadde ebya Android (pre-v4) ne iOS (pre-iOS 5), kozesa mixin etakozesebwa okulonda -webkitentandikwa eyeetaagisa.

Mixin evudde ku v3.1.0, okuva Bootstrap bwetawagira mu butongole platforms ezikaddiye ezitawagira kintu kya mutindo. Okukuuma backwards-compatibility, Bootstrap ejja kusigala ng'ekozesa mixin munda okutuusa Bootstrap v4.

Kakasa nti okozesa rgba()langi mu bisiikirize byo eby’ekibokisi zisobole okukwatagana obulungi nga bwe kisoboka n’ebifaananyi eby’emabega.

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

Enkyukakyuka

Mixins eziwera okusobola okukyukakyuka. Teeka amawulire gonna ag'enkyukakyuka n'ekimu, oba lambika okulwawo n'obudde obw'enjawulo nga bwe kyetaagisa.

Mixins ziggyibwawo okuva ku v3.2.0 , nga ziyingiziddwa Autoprefixer. Okukuuma backwards-compatibility, Bootstrap ejja kusigala ng'ekozesa mixins munda okutuusa 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;
}

Enkyukakyuka

Zingulula, okugerageranya, okuvvuunula (tambuza), oba okuserengeta ekintu kyonna.

Mixins ziggyibwawo okuva ku v3.2.0 , nga ziyingiziddwa Autoprefixer. Okukuuma backwards-compatibility, Bootstrap ejja kusigala ng'ekozesa mixins munda okutuusa 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;
}

Ebifaananyi ebirina obulamu

Mixin emu ey'okukozesa byonna eby'ebintu bya CSS3 eby'okulaga obulamu mu kulangirira okumu ne mixins endala ez'ebintu eby'omuntu kinnoomu.

Mixins ziggyibwawo okuva ku v3.2.0 , nga ziyingiziddwa Autoprefixer. Okukuuma backwards-compatibility, Bootstrap ejja kusigala ng'ekozesa mixins munda okutuusa 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;
}

Obutategeera bulungi

Teeka opacity ku browser zonna era filterowee fallback ku IE8.

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

Ekiwandiiko ky’ekifo

Okuwa embeera y’okufuga foomu munda mu buli nnimiro.

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

Empagi

Okukola ennyiriri nga oyita mu CSS munda mu elementi emu.

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

Ebikyukakyuka (gradients).

Kyangu okufuula langi zonna ebbiri mu background gradient. Funa ebisingawo era oteekewo obulagirizi, kozesa langi ssatu, oba kozesa radial gradient. Nga olina mixin emu ofuna syntaxes zonna ezisookerwako z'ogenda okwetaaga.

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

Osobola n’okulaga enkoona ya langi bbiri eza bulijjo, ensengekera ya layini:

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

Bw’oba weetaaga barber-stripe style gradient, ekyo nakyo kyangu. Just specify a single color era tujja kubikkako omuguwa omweru ogutangalijja.

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

Up the ante era okozese langi ssatu mu kifo ky’ekyo. Teeka langi esooka, langi eyookubiri, langi eyokubiri okuyimirira (omuwendo gw’ebitundu ku kikumi nga 25%), ne langi eyokusatu ne mixins zino:

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

Emitwe gigulumivu! Singa oba weetaaga okuggyawo gradient, kakasa nti oggyawo IE-specific yonna filtergy’oyinza okuba nga wayongeddeko. Ekyo osobola okukikola ng'okozesa .reset-filter()mixin ku mabbali background-image: none;.

Ebikozesebwa mu kukola mixins

Utility mixins ze mixins ezigatta eby'obugagga bya CSS ebitali bikwatagana okutuukiriza ekigendererwa oba omulimu ogw'enjawulo.

Okulongoosa

Yerabire okugatta class="clearfix"ku elementi yonna mu kifo ky’ekyo osseeko .clearfix()mixin we kisaanidde. Akozesa micro clearfix okuva mu Nicolas Gallagher .

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

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

Okuteeka wakati mu bbanga (horizontal centering).

Yanguwa wakati elementi yonna munda mu muzadde waayo. Yeetaaga widthoba max-widthokuteekebwawo.

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

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

Abayambi abakola sayizi

Laga ebipimo by’ekintu mu ngeri ennyangu.

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

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

Ebitundu by’ebiwandiiko ebikyusibwa obunene

Kyangu okutegeka ebyokulonda okukyusa obunene ku textarea yonna, oba ekintu ekirala kyonna. Ebisookerwako ku nneeyisa ya bbulawuzi eya bulijjo ( both).

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

Okusalako ebiwandiiko

Kyangu okusalako ekiwandiiko n'akabonero akalaga nti olina mixin emu. Yeetaaga element okubeera blockoba inline-blocklevel.

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

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

Ebifaananyi bya Retina

Laga amakubo g'ebifaananyi abiri n'ebipimo by'ekifaananyi @1x, era Bootstrap ejja kuwa okubuuza kw'emikutu gya @2x. Bw’oba olina ebifaananyi bingi by’olina okuweereza, lowooza ku kuwandiika ekifaananyi kyo eky’amaaso CSS mu ngalo mu kubuuza okumu okw’emikutu.

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

Nga Bootstrap ezimbiddwa ku Less, era erina omwalo omutongole ogwa Sass . Tugikuuma mu tterekero lya GitHub ery’enjawulo era tukwata ebipya n’ekiwandiiko ky’okukyusa.

Ebirimu

Okuva omwalo gwa Sass bwe gulina repo ey’enjawulo era nga guweereza abalabi ab’enjawulo katono, ebirimu mu pulojekiti byawukana nnyo ku pulojekiti enkulu eya Bootstrap. Kino kikakasa nti omwalo gwa Sass gukwatagana n’enkola nnyingi ezesigamiziddwa ku Sass nga bwe kisoboka.

Ekkubo	Okunnyonnyola
`lib/`	Ruby gem code (okusengeka Sass, okugatta Rails ne Compass)
`tasks/`	Ebiwandiiko ebikyusa (okukyusa waggulu Less okudda mu Sass) .
`test/`	Ebigezo by’okukung’aanya
`templates/`	Ekipapula kya kkampasi manifest
`vendor/assets/`	Sass, JavaScript, ne fayiro z’empandiika
`Rakefile`	Emirimu egy’omunda, gamba nga rake ne convert

Kyalira etterekero lya GitHub erya Sass port okulaba fayiro zino nga zikola.

Okuteeka mu nkola

Okumanya engeri y'okuteeka n'okukozesa Bootstrap for Sass, weebuuze ku tterekero lya GitHub readme . Ye nsibuko esinga okuba ey’omulembe era erimu amawulire agakozesebwa ne Rails, Compass, ne pulojekiti za Sass eza mutindo.

Bootstrap ya Sass

CSS

Okulaba okutwalira awamu

Ekika ky’ekiwandiiko ekya HTML5

Mobile okusooka

Typography n’enkolagana

Okufuula ebya bulijjo.css

Ebintu ebiteekebwamu ebintu

Enkola ya grid

Okwanjula

Ebibuuzo by’emikutu gy’amawulire

Ebintu eby’okulondako mu giridi

Okugeza: Okutumbibwa-okutuuka ku bbanga

Okugeza: Ekintu ekirimu amazzi

Okugeza: Essimu ne desktop

Okugeza: Essimu, tabuleti, kompyuta

Okugeza: Okuzinga empagi

Ennyiriri eziddamu ziddamu okuteekebwawo

Okukyusakyusa empagi

Empagi z’okuzimba ebisu

Okulagira empagi

Mixins n’ebikyukakyuka bitono

Enkyukakyuka ezikyukakyuka

Ebirungo ebitabuddwa

Okugeza enkozesa

Okuwandiika ebitabo

Emitwe

h1. Omutwe gwa bootstrap

h2. Omutwe gwa bootstrap

h3. Omutwe gwa bootstrap

h4. Omutwe gwa bootstrap

h5. Omutwe gwa bootstrap

h6. Omutwe gwa bootstrap

h1. Omutwe gwa bootstrap Ebiwandiiko eby'okubiri

h2. Omutwe gwa bootstrap Ebiwandiiko eby'okubiri

h3. Omutwe gwa bootstrap Ebiwandiiko eby'okubiri

h4. Omutwe gwa bootstrap Ebiwandiiko eby'okubiri

h5. Omutwe gwa bootstrap Ebiwandiiko eby'okubiri

h6. Omutwe gwa bootstrap Ebiwandiiko eby'okubiri

Kopi y’omubiri

Kopi y’omubiri gw’okukulembera

Yazimbibwa ne Less

Ebintu ebikozesebwa mu biwandiiko ebiri mu layini

Ebiwandiiko ebiriko akabonero

Ebiwandiiko ebisaziddwamu

Okukuba okuyita mu biwandiiko

Ebiwandiiko ebiyingiziddwamu

Ebiwandiiko ebiriko akabonero wansi

Ebiwandiiko ebitonotono

Okwekazza

Ennukuta eziyitibwa Italics

Ebintu ebikyukakyuka

Ebika by’okulaganya

Ebisulo by’enkyukakyuka

Ebifupi ebifupi

Ekifupi ekikulu

Okusooka

Endagiriro

Ebigambo ebiziyiza

Ekiwandiiko ekisookerwako ekisookerwako

Blockquote eby'okulonda

Okutuuma ensibuko erinnya

Okwolesebwa okulala

Enkalala

Etalagirwa

Yalagirwa

Etaliiko sitayiro

Mu layini

Okunnyonnyola

Ennyonyola ey’okwebungulula

Okusalako mu ngeri ey’okwekolako

Koodi

Mu layini

Okuyingiza kw’omukozesa

Bbulooka enkulu

Enkyukakyuka ezikyukakyuka

Ekyokulabirako ekifulumizibwa

Emmeeza

Ekyokulabirako ekikulu

Ennyiriri eziriko emisono

Okukwatagana kwa cross-browser

Demo `:focus`state

Okulabula ku nkola y'okuyunga eya`<a>`

Ebifaananyi eby’okwesalirawo `.sr-only`ebiriko ebiwandiiko ebikwekebwa