Hwetša lowdown ka dikarolo tše bohlokwa tša mananeokgoparara a Bootstrap, go akaretšwa le mokgwa wa rena wa tlhabollo ya wepe ye kaone, ye e akgofilego, ye maatla.

Mohuta wa doctype ya HTML5

Bootstrap e dira tšhomišo ya dielemente tše itšego tša HTML le dithoto tša CSS tšeo di nyakago tšhomišo ya doctype ya HTML5. E akaretše mathomong a diprotšeke tša gago ka moka.

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

Mobile pele

Ka Bootstrap 2, re ile ra tlaleletša ka mekgwa ya boikhethelo ya bogwera bja sellathekeng bakeng sa dikarolo tše bohlokwa tša tlhako. Ka Bootstrap 3, re ngwadile gape projeke gore e be le bogwera bja sellathekeng go tloga mathomong. Go e na le go tlaleletša ka mekgwa ya sellathekeng ya boikhethelo, ba apewa thwii ka gare ga mokokotlo. Ge e le gabotse, Bootstrap ke sellathekeng pele . Mekgwa ya pele ya sellathekeng e ka hwetšwa go ralala le bokgobapuku ka moka go e na le ka difaeleng tše di aroganego.

Go netefatša phetolelo ya maleba le go godiša go kgoma, oketša leswao la meta la lefelo la go lebelela go <head>.

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

O ka šitiša bokgoni bja go godiša go didirišwa tša sellathekeng ka go tlaleletša user-scalable=nogo thepo ya meta ya lefelo la go lebelela. Se se šitiša go godiša, go ra gore badiriši ba kgona go sepelasepela fela, gomme se feletša ka gore sebaka sa gago se ikwe go se nene go swana le tirišo ya setlogo. Ka kakaretšo, ga re kgothaletše se setšeng se sengwe le se sengwe, ka gona diriša tlhokomelo!

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

Typography le dikgokagano

Bootstrap e beakanya pontšho ya motheo ya lefase ka bophara, thaepo, le mekgwa ya kgokagano. Ka go lebanya, re:

Beha background-color: #fff;kabody
Šomiša @font-family-base, @font-size-base, le @line-height-basedika bjalo ka motheo wa rena wa go thaepa
Beakanya mmala wa kgokagano ya lefase ka bophara ka @link-colorgomme o diriše methalo ya kgokagano fela go:hover

Mekgwa ye e ka hwetšwa ka gare ga scaffolding.less.

Tlwaetša.css

Bakeng sa phetolelo e kaonefaditšwego ya sefapano-sephephediši, re diriša Normalize.css , e lego projeke ya Nicolas Gallagher le Jonathan Neal .

Ditshelo

Bootstrap e nyaka elemente yeo e nago le go phuthela dikagare tša sebaka le go bea tshepedišo ya rena ya keriti. O ka kgetha e nngwe ya ditshelo tše pedi tšeo o tlago go di diriša diprotšekeng tša gago. Hlokomela gore, ka lebaka la paddingle go feta, ga go le e tee ya setshelo seo se nago le sehlaga.

Diriša .containerbakeng sa setshelo sa bophara bjo bo sa fetogego seo se arabelago.

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

Šomiša .container-fluidbakeng sa setshelo sa bophara bjo bo tletšego, se akaretša bophara ka moka bja lefelo la gago la go lebelela.

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

Bootstrap e akaretša tshepedišo ya keriti ya seela sa mathomo yeo e arabelago, ya sellathekeng yeo e lekanyetšago ka tshwanelo go fihla go dikholomo tše 12 ge bogolo bja sedirišwa goba lefelo la go lebelela bo oketšega. E akaretša diklase tše di hlalošitšwego e sa le pele bakeng sa dikgetho tše bonolo tša peakanyo, gammogo le di- mixin tše matla bakeng sa go tšweletša dipeakanyo tše dintši tša semantiki .

Matseno

Ditshepedišo tša keriti di šomišwa go hlama dipeakanyo tša letlakala ka lelokelelo la methaladi le dikholomo tšeo di beago diteng tša gago. Mona ke kamoo tshepedišo ya keriti ya Bootstrap e šomago ka gona:

Methaladi e swanetše go bewa ka gare ga .container(bophara bjo bo sa fetogego) goba .container-fluid(bophara bjo bo tletšego) bakeng sa go logaganya le go tlatša gabotse.
Šomiša methaladi go hlama dihlopha tše di rapaletšego tša dikholomo.
Diteng di swanetše go bewa ka gare ga dikholomo, gomme ke dikholomo fela tšeo e ka bago bana ba ka pela ba methaladi.
Diklase tša keriti tše di hlalošitšwego e sa le pele di swana .rowle le .col-xs-4di hwetšagala bakeng sa go dira dipeakanyo tša keriti ka pela. Di-mixin tše nnyane le tšona di ka šomišwa go dipeakanyo tše ntši tša semantiki.
Dikholomo di hlola diphaephe (dikgoba magareng ga diteng tša dikholomo) ka padding. Padding yeo e offset ka methaladi ya kholomo ya mathomo le ya mafelelo ka margin ye mpe go .rows.
Moedi wo o fošagetšego ke ka lebaka leo mehlala ye e lego ka mo tlase e tšweleditšwego ka ntle. Ke gore diteng ka gare ga dikholomo tša keriti di lokeletšwe ka diteng tšeo e sego tša keriti.
Dikholomo ta keriti di hlolwa ka go laeta palo ya dikholomo te lesomepedi te di lego gona teo o nyakago go di span. Ka mohlala, dikholomo tše tharo tše di lekanago di be di tla diriša tše tharo .col-xs-4.
Ge e le gore dikholomo tša go feta tše 12 di beilwe ka gare ga mothalo o tee, sehlopha se sengwe le se sengwe sa dikholomo tša tlaleletšo se tla, bjalo ka yuniti e tee, se phuthela godimo ga mothaladi wo mofsa.
Diklase tša keriti di šoma go didirišwa tšeo di nago le bophara bja skrine bjo bogolo go feta goba bjo bo lekanago le bogolo bja ntlha ya go kgaotša, gomme di tloša diklase tša keriti tšeo di nepišitšwego go didirišwa tše nnyane. Ka fao, mohlala, go diriša .col-md-*sehlopha sefe goba sefe go elemente go ka se ame fela setaele sa yona go didirišwa tša magareng eupša gape le go didirišwa tše kgolo ge e le gore .col-lg-*sehlopha se se gona.

Lebelela mehlala ya go diriša melawana ye go khoutu ya gago.

Dipotšišo tša boraditaba

Re šomiša dipotšišo tše di latelago tša boraditaba ka go difaele tša rena tša Ka fase go hlama dintlha tša go kgaotša tša bohlokwa ka tshepedišong ya rena ya keriti.

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

Ka dinako tše dingwe re katološa dipotšišo tše tša boraditaba go akaretša a max-widthgo lekanyetša CSS go sete ye tshesane ya didirišwa.

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

Dikgetho tša keriti

Bona ka moo dikarolo tša tshepedišo ya keriti ya Bootstrap di šomago ka gona go ralala le didirišwa tše ntši ka tafola ye e nago le seatla.

	Didirišwa tše nnyane tše dingwe Difouno (<768px) .	Didirišwa tše nnyane Matlapa (≥768px) .	Disebediswa tse mahareng Desktops (≥992px) .	Disebediswa tse khōlō Desktops (≥1200px) .
Boitshwaro bja keriti	E rapaletšego ka dinako tšohle	E phuhlame go thoma, e rapaletšego ka godimo ga dintlha tša go kgaotša
Bophara ba setshelo	Ga go le e tee (auto) .	750px e le	970px e le	1170px e le
Sehlongwapele sa sehlopha	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`
# ya dikholomo	12.
Bophara ba kholomo	Auto	~ 62px	~ 81px	~ 97px
Bophara ba gutter	30px (15px ka lehlakoreng le leng le le leng la kholomo) .
E ka beha dihlaga	Ee
Di-offset	Ee
Go laela ka dikholomo	Ee

Mohlala: E kgobokeditšwe-go-ya go rapalala

Ka go šomiša sete e tee ya .col-md-*diklase tša keriti, o ka hlama tshepedišo ya motheo ya keriti yeo e thomago e kgobokeditšwe go didirišwa tša sellathekeng le didirišwa tša letlapa (lefelo le lenyenyane kudu go ya go le lenyenyane) pele o fetoga go rapalala go didirišwa tša komporong (ya magareng). Bea dikholomo tša keriti go efe goba efe .row.

.kol-md-1

.kol-md-8 e le

.kol-md-4

.kol-md-6 e

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

Mohlala: Setshelo sa seela

Fetoša peakanyo efe goba efe ya keriti ya bophara bjo bo sa fetogego go ba peakanyo ya bophara bjo bo tletšego ka go fetoša ya gago ya ka ntle .containergo .container-fluid.

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

Mohlala: Mobile le komporong

Ga o nyake gore dikholomo tša gago di fo kgoboketšwa ka gare ga didirišwa tše dinyenyane? Šomiša diklase tša keriti ya sedirišwa se senyenyane le sa magareng sa tlaleletšo ka go tlaleletša .col-xs-* .col-md-*go dikholomo tša gago. Bona mohlala wo o lego ka mo tlase bakeng sa kgopolo e kaone ya kamoo ka moka di šomago ka gona.

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

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

.kol-xs-6

<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>

Mohlala: Mobile, letlapa, komporong

Aga godimo ga mohlala wa go feta ka go hlama dipeakanyo tše di fetogago le tše maatla le go feta ka .col-sm-*diklase tša letlapa.

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

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

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

Mohlala: Go phuthela kholomo

Ge e le gore dikholomo tša go feta tše 12 di beilwe ka gare ga mothalo o tee, sehlopha se sengwe le se sengwe sa dikholomo tša tlaleletšo se tla, bjalo ka yuniti e tee, se phuthela godimo ga mothaladi wo mofsa.

.kol-xs-9

.col-xs-4
Ka ge 9 + 4 = 13 > 12, div ye ya bophara bja dikholomo tše 4 e phuthelwa godimo ga mola wo mofsa bjalo ka yuniti e tee ye e latelanago.

.col-xs-6
Dikholomo tše di latelago di tšwela pele go bapa le mothaladi wo mofsa.

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

Di-reset tša kholomo tše di arabelago

Ka maemo a mane a digridi tše di lego gona o tlamegile go kitima ka gare ga ditaba moo, mafelong a itšego a go kgaotša, dikholomo tša gago di sa hlakišego gabotse gabotse ka ge e nngwe e le e telele go feta e nngwe. Go lokiša seo, diriša motswako wa a .clearfixle diklase tša rena tša utility tšeo di arabelago .

.col-xs-6 .col-sm-3
Fetoša bogolo bja lefelo la gago la go lebelela goba o le hlahlobje mo founong ya gago bakeng sa mohlala.

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

Go tlaleletša go go hlwekiša kholomo mafelong a go kgaotša ao a arabelago, o ka swanelwa ke go seta gape di-offset, go kgorometša goba go goga . Bona se ka tiro mohlaleng wa keriti .

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

Go lefela dikholomo

Suthiša dikholomo go ya go le letona o šomiša .col-md-offset-*diklase. Diklase tše di oketša mošito wa nngele wa kholomo ka *dikholomo. Go fa mohlala, e .col-md-offset-4sepela .col-md-4godimo ga dikholomo tše nne.

.kol-md-4

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

.kol-md-3 .kol-md-offset-3

.kol-md-6 .kol-md-offset-3

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

O ka boela wa tloša di-offset go tšwa go maemo a tlase a keriti ka .col-*-offset-0diklase.

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

Dikholomo tša go bea dihlaga

Go tsenya diteng tša gago ka keriti ya go se fetoge, oketša ye mpsha .rowle sete ya .col-sm-*dikholomo ka gare ga .col-sm-*kholomo ye e lego gona. Methaladi ye e tsentšwego ka gare e swanetše go akaretša sete ya dikholomo tšeo di oketšago go fihla go 12 goba ka fase ga moo (ga go nyakege gore o šomiše dikholomo ka moka tše 12 tše di lego gona).

Maemo a 1: .col-sm-9

Maemo a 2: .kol-xs-8 .kol-sm-6

Maemo a 2: .kol-xs-4 .kol-sm-6

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

Go laela ka dikholomo

Fetoša gabonolo tatelano ya dikholomo tša rena tša keriti tše di agetšwego ka gare ka .col-md-push-*le .col-md-pull-*dihlopha tša sefetoši.

.kol-md-9 .kol-md-kgorometša-3

.kol-md-3 .kol-md-goga-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>

Less mixins le diphetogo

Go tlaleletša go diklase tša keriti tše di agilwego pele bakeng sa dipeakanyo tša ka pela, Bootstrap e akaretša diphetogo tše Nnyane le di-mixin bakeng sa go tšweletša ka pela dipeakanyo tša gago tše bonolo, tša semantiki.

Diphetogo

Diphetogo di laola palo ya dikholomo, bophara bja gutter, le ntlha ya potšišo ya boraditaba yeo go yona go thongwago dikholomo tša go phaphamala. Re šomiša tše go tšweletša diklase tša keriti tše di hlalošitšwego e sa le pele tšeo di ngwadilwego ka mo godimo, gammogo le bakeng sa di-mixin tša tlwaelo tšeo di lokeleditšwego ka mo tlase.

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

Ditswaki

Di-mixin di šomišwa mmogo le diphetogo tša keriti go tšweletša CSS ya semantiki ya dikholomo tša keriti ka botee.

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

Mohlala wa tšhomišo

O ka fetola diphetogo go boleng bja gago bja tlwaelo, goba wa no šomiša di-mixin ka dikelo tša tšona tša go se fetoge. Mohlala wa go šomiša dipeakanyo tša go se fetoge go hlama peakanyo ya dikholomo tše pedi ka sekgoba magareng ke wo.

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

Dihlogo tša ditaba

Dihlogo ka moka tša HTML, <h1>go fihla go <h6>, di a hwetšagala. .h1ka .h6diklase le tšona di a hwetšagala, bakeng sa ge o nyaka go swana le setaele sa fonte ya hlogo eupša o sa nyaka gore sengwalwa sa gago se bontšhwe ka gare ga mothaladi.

h1. Hlogo ya bootstrap	Semibold 36px
h2. Hlogo ya bootstrap	Semibold 30px
h3. Hlogo ya bootstrap	Semibold 24px
h4. Hlogo ya bootstrap	Semibold 18px
h5. Hlogo ya bootstrap	Semibold 14px
h6. Hlogo ya bootstrap	Semibold 12px

<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>

Hlama sengwalwa se bofefo, sa bobedi hlogong efe goba efe ka <small>leswao la kakaretšo goba .smallsehlopha.

h1. Hlogo ya bootstrap Sengwalwa sa bobedi

h2. Hlogo ya bootstrap Sengwalwa sa bobedi

h3. Hlogo ya bootstrap Sengwalwa sa bobedi

h4. Hlogo ya bootstrap Sengwalwa sa bobedi

h5. Hlogo ya bootstrap Sengwalwa sa bobedi

h6. Hlogo ya bootstrap Sengwalwa sa bobedi

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

Khopi ya mmele

Bootstrap ya lefatše default font-sizeke 14px , le a line-heightya 1.428 . Se se dirišwa go <body>le dirapa ka moka. Go tlaleletša, <p>(ditemana) di amogela moedi wa ka fase wa seripagare sa bona sa mola-bophagamo bjo bo balwago (10px ka go ikemela).

Nullam quis risus eget urna mollis e kgabišitšwego vel eu leo. Cum sociis natoque penatibus le magnis dis pelego montes, nascetur ya go segiša mus. Nullam id dolor id nibh dikoloi tša dikoloi.

Cum sociis natoque penatibus le magnis dis pelego montes, nascetur ya go segiša mus. Donec ullamcorper lefeela bao e sego metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper lefeela bao e sego metus auctor fringilla.

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

<p>...</p>

Khopi ya mmele ya go eta pele

Dira gore serapa se tšwelele ka go oketša .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus motšweletši wa dilo. Duis mollis, est yeo e sego ya commodo luxus.

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

E agilwe ka Ka tlase

Sekala sa go thaepa se theilwe godimo ga diphetogo tše pedi tša Ka fase ka go diphetogo.less : @font-size-basele @line-height-base. Ya pele ke motheo wa fonte-bogolo bjo bo šomišitšwego gohle gomme ya bobedi ke motheo wa mola-bophagamo. Re šomiša diphetogo tšeo le dipalo tše dingwe tše bonolo go hlama margins, paddings, le line-heights ya mohuta wa rena ka moka le tše dingwe. Customize bona le Bootstrap ikamahanya le maemo.

Dielemente tša sengwalwa sa ka gare ga mothaladi

Sengwalwa se se swailwego

Bakeng sa go tšweletša go kitima ga sengwalwa ka lebaka la kamano ya sona ka gare ga seemo se sengwe, šomiša <mark>thepo.

O ka šomiša thepo ya leswao golaetšasengwalwa.

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

Sengwalwa se se phumotšwego

Bakeng sa go laetša diboloko tša sengwalwa tšeo di phumotšwego šomiša <del>leswao.

~~Mothaladi wo wa sengwalwa o reretšwe go swarwa bjalo ka sengwalwa seo se phumotšwego.~~

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

Strikethrough sengwalwa

Bakeng sa go laetša diboloko tša sengwalwa tšeo di sa hlwego di le maleba šomiša <s>thepo.

~~Mothaladi wo wa sengwalo o reretšwe go swarwa bjalo ka wo o sa hlwego o nepagala.~~

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

Sengwalwa se se tsentšwego

Bakeng sa go laetša ditlaleletšo go tokomane šomiša <ins>thepo.

Mothaladi wo wa sengwalwa o reretšwe go swarwa bjalo ka tlaleletšo go tokumente.

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

Sengwalwa se se thaletšwego

Go thalela sengwalwa šomiša <u>thepo.

Mothaladi wo wa sengwalwa o tla tšweletša bjalo ka ge o thaletšwe

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

Dira tšhomišo ya dithepo tša kgatelelo tša go se fetoge tša HTML ka mekgwa ye bofefo.

Sengwalwa se sennyane

Bakeng sa go tloša kgatelelo ya ka gare goba diboloko tša sengwalwa, šomiša <small>thepo go beakanya sengwalwa go 85% ya bogolo bja motswadi. Dielemente tša hlogo di amogela tša tšona bakeng sa dielemente tše di font-sizetsentšwego ka gare ga sehlaga .<small>

O ka šomiša ka tsela ye nngwe elemente ya ka gare ga mothaladi .smallka legatong la efe goba efe <small>.

Mothaladi wo wa sengwalwa o reretšwe go swarwa bjalo ka mongwalo wo mobotse.

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

Bokoto

Bakeng sa go gatelela seripa sa sengwalwa ka boima bja fonte-boima.

Seripa se se latelago sa sengwalwa se tšweletšwa bjalo ka sengwalwa se se motenya .

<strong>rendered as bold text</strong>

Ditlhaka tše di sekamego

Bakeng sa go gatelela seripa sa sengwalwa ka mongwalo o sekamego.

Seripa se se latelago sa sengwalwa se fetolelwa bjalo ka sengwalwa se se sekamego .

<em>rendered as italicized text</em>

Dielemente tše dingwe

Ikwe o lokologile go diriša <b>le <i>ka HTML5. <b>e reretšwe go tšweletša mantšu goba dipolelwana ntle le go fetišetša bohlokwa bja tlaleletšo mola <i>e le kudu ya lentšu, mareo a sethekniki, bjalobjalo.

Diklase tša go logaganya

Beakanya sengwalwa gape gabonolo go dikarolo ka diklase ta go logaganya sengwalwa.

Sengwalwa se se logaganywago ka go le letshadi.

Sengwalwa se se logagantšwego bogareng.

Sengwalwa se se logaganywago ka go le letona.

Sengwalwa se se lokafaditšwego.

Ga go na sengwalwa sa go phuthela.

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

Diklase tša phetogo

Fetoša sengwalwa ka dikarolo ka diklase tša go ngwala ka ditlhaka tše kgolo tša sengwalwa.

Sengwalwa se senyenyane.

Sengwalwa sa ditlhaka tše kgolo.

Sengwalwa se se ngwadilwego ka ditlhaka tše kgolo.

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

Dikhutsofatšo

Stylized phethagatšo ya HTML ya <abbr>elemente bakeng sa dikgutsufatšo le acronyms ho bontša atoloswa phetolelo ka hover. Dikhutsofatšo tše di nago le titleseka di na le mollwane wa ka fase wa marontho a bofefo le sešupanako sa thušo ge go hover, go fa seemo sa tlaleletšo ka go hover le go badiriši ba theknolotši ya go thuša.

Khutsufatšo ya motheo

Khutsufatšo ya seka sa lentšu ke attr .

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

Botho bja mathomo

Oketša .initialismgo khutsofatšo ya bogolo bja fonte bjo bonyenyane go se nene.

HTML ke selo se sebotse kudu ga e sa le go tloga ka bogobe bjo bo segilwego.

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

Diaterese

Hlagiša tshedimošo ya kgokagano ya rakgolokhukhu wa kgauswi goba mmele ka moka wa mošomo. Boloka go fometa ka go fediša methalo ka moka ka <br>.

Twitter, Inc.
1355 Seterateng sa Mmaraka, Suite 900
San Francisco, CA 94103
P: (123) 456-7890

Leina ka botlalo
[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>

Ditsopolwa tša go thibela

Bakeng sa go tsopola diboloko tša diteng go tšwa mothopong wo mongwe ka gare ga tokumente ya gago.

Setsopolwa sa go thibela sa tlwaelo

Phuthelela HTML<blockquote> efe goba efe bjalo ka setsopolwa. Bakeng sa ditsopolwa tše di otlologilego, re kgothaletša go .<p>

Lorem ipsum dolor lula amet, consectetur adipiscing elit. Palo e feletseng posuere erat a ante.

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

Dikgetho tša go thibela

Diphetogo tša setaele le diteng bakeng sa diphetogo tše bonolo godimo ga maemo <blockquote>.

Go reela mothopo leina

Oketša a <footer>bakeng sa go hlaola mothopo. Phuthelela leina la mošomo wa mothopo ka go <cite>.

Lorem ipsum dolor lula amet, consectetur adipiscing elit. Palo e feletseng posuere erat a ante.

Motho yo a tumilego ka go 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>

Dipontšho tše dingwe

Oketša .blockquote-reversebakeng sa blockquote ka diteng tše di logaganywago ka go le letona.

Lorem ipsum dolor lula amet, consectetur adipiscing elit. Palo e feletseng posuere erat a ante.

Motho yo a tumilego ka go Source Title

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

Mananeo

E sa laelwago

Lenaneo la dilo tšeo go tšona tatelano e se nago taba ka go lebanya.

Lorem ipsum dolor dula amet
Consectetur adipiscing ya maemo a godimo
Palo e feletseng molestie lorem ka massa
Facilisis ka pretium nisl aliquet
Nulla volutpat aliquam ya go swana le yona
- Phasellus iaculis e tšoanang
- Purus sodales di-ultricies
- Vestibulum laoreet ya go rwala dithoto sem
- A k tristique libero volutpat ka
Faucibus porta lacus e leng e le e nyenyane ea vel
Aenean dula amet erat nunc
Eget porttitor lorem ya go rwala dilo

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

E laetšwe

Lenaneo la dilo tšeo go tšona tatelano e lego bohlokwa ka go lebanya.

Lorem ipsum dolor dula amet
Consectetur adipiscing ya maemo a godimo
Palo e feletseng molestie lorem ka massa
Facilisis ka pretium nisl aliquet
Nulla volutpat aliquam ya go swana le yona
Faucibus porta lacus e leng e le e nyenyane ea vel
Aenean dula amet erat nunc
Eget porttitor lorem ya go rwala dilo

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

E sa setaele

Tlosa list-stylemoedi wa kamehla le wa nngele ho dintho tsa lenane (bana ba kapele feela). Se se šoma fela go dilo tša lenaneo la bana ba ka pela , go ra gore o tla swanelwa ke go oketša sehlopha bakeng sa mananeo afe goba afe ao a tsentšwego ka gare ga sehlaga gape.

Lorem ipsum dolor dula amet
Consectetur adipiscing ya maemo a godimo
Palo e feletseng molestie lorem ka massa
Facilisis ka pretium nisl aliquet
Nulla volutpat aliquam ya go swana le yona
- Phasellus iaculis e tšoanang
- Purus sodales di-ultricies
- Vestibulum laoreet ya go rwala dithoto sem
- A k tristique libero volutpat ka
Faucibus porta lacus e leng e le e nyenyane ea vel
Aenean dula amet erat nunc
Eget porttitor lorem ya go rwala dilo

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

Ka gare ga mothaladi

Bea dilo ka moka tša lenaneo mothalong o tee ka display: inline-block;le padding ye nngwe ya seetša.

Lorem ipsum ya go swana le yona
Phasellus ya go swana le yona
Nula volutpat

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

Tlhalošo

Lenaneo la mareo le ditlhaloso tša ona tše di sepedišanago le ona.

Mananeo a tlhaloso: Lenaneo la tlhalošo le phethagetše bakeng sa go hlaloša mareo.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.; Donec id elit e seng mi porta gravida ka eget metus.
Malesuada porta ya go tswalela: Etiam porta sem malesuada ea mollis euismod.

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

Tlhaloso e rapameng

Dira mareo le ditlhalošo ka <dl>mothalong godimo ka thoko. E thoma e kgobokeditšwe bjalo ka <dl>s ya go se fetoge, eupša ge navbar e atološwa, ka fao dira tše.

Mananeo a tlhaloso: Lenaneo la tlhalošo le phethagetše bakeng sa go hlaloša mareo.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.; Donec id elit e seng mi porta gravida ka eget metus.
Malesuada porta ya go tswalela: Etiam porta sem malesuada ea mollis euismod.
Felis euismod semper eget lacinia: Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa feela dula amet risus.

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

Go kgaola ka go itiriša

Mananeo a tlhalošo ya go rapalala a tla kgaola mareo ao a lego matelele kudu go ka tsena ka kholomong ya nngele ka text-overflow. Ka go dipono tša go lebelela tše tshesane, di tla fetogela go peakanyo ya go kgoboketšwa ya go se fetoge.

Ka gare ga mothaladi

Phuthelela dikarolwana tša ka gare ga mothaladi tša khoutu ka <code>.

Ka mohlala, <section>e swanetše go phuthelwa bjalo ka inline.

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

Tsenyo ya mosebedisi

Šomiša <kbd>go laetša tsenyo yeo ka tlwaelo e tsenywago ka khiiboto.

Go fetola ditšhupetšo, thaepa gomme o cdlatelwe ke leina la ditšhupetšo.
Go rulaganya dipeakanyo, tobetsa 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>

Bloko ya motheo

Šomiša <pre>bakeng sa mela e mentši ya khoutu. Kgonthiša gore o tšhaba maswaodikga afe goba afe a khutlo ka khoutung bakeng sa phetolelo e swanetšego.

<p>Mohlala wa sengwalwa mo...</p>

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

O ka boikgethelo eketsa .pre-scrollablesehlopha, e leng tla beha max-bophahamo ba 350px le fana ka y-axis scrollbar.

Diphetogo

Bakeng sa go bontšha diphetogo šomiša <var>thepo.

y = m x + b

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

Dipholo tsa mohlala

Bakeng sa ho bontša diboloko mohlala dipholo tsa ho tloha lenaneo sebelisa <samp>tag.

Sengwalwa se se reretšwe go swarwa bjalo ka setšweletšwa sa mohlala go tšwa lenaneong la khomphutha.

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

Mohlala wa motheo

Bakeng sa setaele sa motheo—go tlatša seetša le dikarolo tše di rapaletšego feela—okeletša sehlopha sa motheo .tablego selo le ge e le sefe <table>. E ka bonagala e le e sa nyakegego kudu, eupša ka baka la tšhomišo e atilego ya ditafola bakeng sa di-plugin tše dingwe go swana le dialmanaka le dikgethi tša letšatšikgwedi, re kgethile go arola mekgwa ya rena ya tafola ya tlwaelo.

Tlhaloso ya tafola ya boikgethelo.
# .	Leina	Sefane	Lebitso la mosebedisi
1. 1.	Mareka	Otto o ile a re	@mdo
2.	Jakobo	Thornton o ile a hlokomela	@lekhura
3.	Larry o ile a re	Nonyana	@ twitter e le

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

Methaladi ya methalo

Šomiša .table-stripedgo oketša zebra-striping go mothaladi ofe goba ofe wa tafola ka gare ga <tbody>.

Go sepelelana ga sefapano sa sephephediši

Ditafola tša methalo di rulagantšwe ka setaele ka :nth-childmokgethi wa CSS, wo o sa hwetšagalego go Internet Explorer 8.

# .	Leina	Sefane	Lebitso la mosebedisi
1. 1.	Mareka	Otto o ile a re	@mdo
2.	Jakobo	Thornton o ile a hlokomela	@lekhura
3.	Larry o ile a re	Nonyana	@ twitter e le

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

Tafole e nang le mellwane

Oketša .table-borderedbakeng sa mellwane ka mahlakoreng ka moka a tafola le disele.

# .	Leina	Sefane	Lebitso la mosebedisi
1. 1.	Mareka	Otto o ile a re	@mdo
2.	Jakobo	Thornton o ile a hlokomela	@lekhura
3.	Larry o ile a re	Nonyana	@ twitter e le

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

Hover methaladi

Oketša .table-hovergo kgontšha seemo sa go hover godimo ga methaladi ya tafola ka gare ga <tbody>.

# .	Leina	Sefane	Lebitso la mosebedisi
1. 1.	Mareka	Otto o ile a re	@mdo
2.	Jakobo	Thornton o ile a hlokomela	@lekhura
3.	Larry o ile a re	Nonyana	@ twitter e le

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

Tafole e khutsofaditšwego

Oketša .table-condensedgo dira gore ditafola di kopane kudu ka go sega padding ya disele ka bogare.

# .	Leina	Sefane	Lebitso la mosebedisi
1. 1.	Mareka	Otto o ile a re	@mdo
2.	Jakobo	Thornton o ile a hlokomela	@lekhura
3.	Larry ya Nonyana		@ twitter e le

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

Diklase tša diteng

Šomiša diklase tša diteng go mebala methalo ya tafola goba disele ka botee.

Phapoši	Tlhalošo
`.active`	E diriša mmala wa go hover go mothaladi wo o itšego goba sele
`.success`	E laetša tiro ye e atlegilego goba ye botse
`.info`	E laetša phetogo ya tshedimošo yeo e sa tšeego lehlakore goba tiro
`.warning`	E bontšha temošo yeo e ka nyakago tlhokomelo
`.danger`	E bontšha tiro e kotsi goba yeo e ka bago e mpe

# .	Hlogo ya kholomo	Hlogo ya kholomo	Hlogo ya kholomo
1. 1.	Diteng tša kholomo	Diteng tša kholomo	Diteng tša kholomo
2.	Diteng tša kholomo	Diteng tša kholomo	Diteng tša kholomo
3.	Diteng tša kholomo	Diteng tša kholomo	Diteng tša kholomo
4.	Diteng tša kholomo	Diteng tša kholomo	Diteng tša kholomo
5. 5.	Diteng tša kholomo	Diteng tša kholomo	Diteng tša kholomo
6.	Diteng tša kholomo	Diteng tša kholomo	Diteng tša kholomo
7. 7.	Diteng tša kholomo	Diteng tša kholomo	Diteng tša kholomo
8.	Diteng tša kholomo	Diteng tša kholomo	Diteng tša kholomo
9.	Diteng tša kholomo	Diteng tša kholomo	Diteng tša kholomo

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

Go fetišetša tlhalošo go theknolotši ya go thuša

Go šomiša mmala go oketša tlhalošo go mothaladi wa tafola goba sele ka botee go fa fela taetšo ya go bonwa, yeo e ka se fetišwego go badiriši ba theknolotši ya go thuša – go swana le babadi ba skrine. Netefatša gore tshedimošo yeo e bontšhitšwego ka mmala e ka ba e bonagala gabotse go tšwa diteng ka botšona (sengwalwa se se bonagalago mo mothalong/seleng ya tafola ya maleba), goba e akaretšwa ka mekgwa ye mengwe, go swana le sengwalwa sa tlaleletšo seo se utilwego le .sr-onlysehlopha.

Ditafola tše di arabelago

Hlama ditafola tše di arabelago ka go phuthela efe goba efe .tableka gare .table-responsivego dira gore di sepele ka go rapalala go didirišwa tše nnyane (ka fase ga 768px). Ge o lebelela go selo se sengwe le se sengwe se segolo go feta 768px ka bophara, o ka se bone phapano le ge e le efe ditafoleng tše.

Go kgaola/go kgaola ka go ema thwii

Ditafola tše di arabelago di diriša overflow-y: hidden, yeo e kgaolago diteng dife goba dife tšeo di fetago mapheko a ka tlase goba a godimo a tafola. Ka mo go kgethegilego, se se ka kgaola dimenu tša go theoga le didirišwa tše dingwe tša mokgatlo wa boraro.

Firefox le di-fieldset

Firefox e na le setaele se sengwe sa fieldset se se sa kgahlišego seo se akaretšago widthseo se šitišago tafola yeo e arabelago. Se se ka se tlošwe ntle le go thuba mo go itšego ga Firefox mo re sa go neeleng ka go Bootstrap:

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

Bakeng sa tshedimošo ye ntši, bala karabo ye ya go tlala ga Mokgobo .

# .	Hlogo ya tafola	Hlogo ya tafola	Hlogo ya tafola	Hlogo ya tafola	Hlogo ya tafola	Hlogo ya tafola
1. 1.	Sele ya tafola	Sele ya tafola	Sele ya tafola	Sele ya tafola	Sele ya tafola	Sele ya tafola
2.	Sele ya tafola	Sele ya tafola	Sele ya tafola	Sele ya tafola	Sele ya tafola	Sele ya tafola
3.	Sele ya tafola	Sele ya tafola	Sele ya tafola	Sele ya tafola	Sele ya tafola	Sele ya tafola

# .	Hlogo ya tafola	Hlogo ya tafola	Hlogo ya tafola	Hlogo ya tafola	Hlogo ya tafola	Hlogo ya tafola
1. 1.	Sele ya tafola	Sele ya tafola	Sele ya tafola	Sele ya tafola	Sele ya tafola	Sele ya tafola
2.	Sele ya tafola	Sele ya tafola	Sele ya tafola	Sele ya tafola	Sele ya tafola	Sele ya tafola
3.	Sele ya tafola	Sele ya tafola	Sele ya tafola	Sele ya tafola	Sele ya tafola	Sele ya tafola

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

Mohlala wa motheo

Ditaolo tša foromo ya motho ka o tee ka o tee ka go iketla di amogela setaele se sengwe sa lefase ka bophara. Dielemente ka moka tša sengwalwa <input>, <textarea>, le ka di beakantšwe go ka go ikemela. Phuthelela dileibole le ditaolo ka bakeng sa sekgoba se se loketšego.<select>.form-controlwidth: 100%;.form-group

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

O se ke wa hlakanya dihlopha tša foromo le dihlopha tša tsenyo

O se ke wa hlakanya dihlopha tša foromo thwii le dihlopha tša tsenyo . Go e na le moo, bea sehlopha sa tsenyo ka gare ga sehlopha sa foromo.

Foromo ya ka gare ga mothaladi

Oketša .form-inlinego foromo ya gago (yeo e sa swanelago go ba <form>) bakeng sa ditaolo tša go logaganya ka go le letshadi le tša go thibela ka gare ga mothaladi. Se se šoma fela go diforomo ka gare ga dipono tša go lebelela tšeo di nago le bonyane bja 768px ka bophara.

E ka nyaka bophara bja tlwaelo

Ditshenyegelo le dikgetho di width: 100%;dirišitše ka go ikemela ka go Bootstrap. Ka gare ga diforomo tša ka gare ga mothaladi, re seta seo gape go width: auto;gore ditaolo tše ntši di kgone go dula moleng o tee. Go ya ka peakanyo ya gago, go ka nyakega bophara bja tlaleletšo bja tlwaelo.

Ka mehla oketša dileibole

Babadi ba skrine ba tla ba le bothata ka diforomo tša gago ge o sa akaretše leina la tsenyo ye nngwe le ye nngwe. Bakeng sa diforomo te ta ka gare ga mothaladi, o ka uta dileibole o omia .sr-onlysehlopha. Go na le mekgwa ye mengwe ye mengwe ya go fa leina la theknolotši ya go thuša, go swana le aria-label, aria-labelledbygoba titleseka. Ge e le gore ga go le e tee ya tše yeo e lego gona, babadi ba skrine ba ka retologela go šomiša placeholderseka, ge e le gona, eupša ela hloko gore tšhomišo ya placeholderbjalo ka legato la mekgwa ye mengwe ya go swaya ga e eletšwe.

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

Foromo e rapameng

Šomiša diklase tša keriti tše di hlalošitšwego e sa le pele tša Bootstrap go logaganya dileibole le dihlopha tša ditaolo tša foromo ka peakanyo ye e rapaletšego ka go tlaleletša .form-horizontalgo foromo (yeo e sa swanelago go ba a <form>). Go dira bjalo go fetoša .form-groups go itshwara bjalo ka methaladi ya keriti, ka fao ga go nyakege gore .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>

Ditaolo tše di thekgwago

Mehlala ya ditaolo tša foromo ya maemo tšeo di thekgwago ka go peakanyo ya foromo ya mohlala.

Ditseno

Taolo ya foromo ye e tlwaelegilego kudu, mafelo a tsenyo ao a theilwego godimo ga sengwalwa. E akaretša thekgo ya mehuta ka moka ya HTML5: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, le color.

Mohuta kgoeletšo e a nyakega

Ditseno di tla bewa setaele ka botlalo fela ge e le gore tša tšona typedi tsebagaditšwe gabotse.

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

Dihlopha tša go tsenya

Go oketša sengwalwa se se kopantšwego goba dikonope pele le/goba ka morago ga sengwalwa sefe goba sefe seo se theilwego godimo ga sengwalwa <input>, hlahloba karolo ya sehlopha sa tsenyo .

Lefelo la sengwalwa

Taolo ya foromo yeo e thekgago methalo ye mentši ya sengwalwa. Fetoša rowsseka ge go nyakega.

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

Mapokisi a go hlahloba le diradio

Mapokisi a go hlahloba ke a go kgetha kgetho e tee goba tše mmalwa lenaneong, mola diradio e le tša go kgetha kgetho e tee go tšwa go tše dintši.

Mapokisi a go hlahloba le diradio tše di golofetšego di a thekgwa, eupša go fa khesara ya "yeo e sa dumelelwago" go hover ya motswadi <label>, o tla swanelwa ke go oketša .disabledsehlopha go motswadi .radio, .radio-inline, .checkbox, goba .checkbox-inline.

Default (e kgobokeditšwe) .

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

Mapokisi a go hlahloba ka gare ga mothaladi le diradio

Šomiša diklase tša .checkbox-inlinegoba .radio-inlinego lelokelelo la mapokisi a go hlahloba goba diradio bakeng sa ditaolo tšeo di tšwelelago mothalong o tee.

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

Mapokisi a go hlahloba le diradio tše di se nago sengwalwa sa leina

Ge o ka se be le sengwalwa ka gare ga <label>, tsenyo e bewa bjalo ka ge o be o tla letela. Ga bjale e šoma fela go mapokisi a go hlahloba ao e sego a ka gare ga mothaladi le diradio. Gopola go sa dutše o nea mohuta o itšego wa leina bakeng sa thekinolotši ya go thuša (mohlala, go diriša 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>

E kgetha

Hlokomela gore dimenu tše dintši tša go kgetha tša setlogo—e lego go Safari le Chrome—di na le dikhutlo tše di kgokologilego tšeo di ka se fetošwego ka border-radiusdithoto.

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

Bakeng sa <select>ditaolo tše di nago le multipleseka, dikgetho tše ntši di bontšhwa ka go ikemela.

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

Taolo ya static

Ge o nyaka go bea sengwalwa se se sa raraganago kgauswi le leina la foromo ka gare ga foromo, šomiša .form-control-staticsehlopha godimo ga <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>

Boemo bja go tsepamiša kgopolo

Re tloša outlinemekgwa ya go se fetoge go ditaolo tše dingwe tša foromo gomme re diriša a box-shadowlegatong la yona bakeng sa :focus.

Demo `:focus`mmuso

Tsenyo ya mohlala ye e lego ka mo godimo e šomiša mekgwa ya tlwaelo ka go ditokomane tša rena go bontšha :focusseemo go .form-control.

Boemo bjo bo golofetšego

Oketša disabledseka sa boolean go tsenyo go thibela ditirišano tša modiriši. Ditseno tše di golofetšego di tšwelela di le bofefo gomme tša oketša not-allowedkhesara.

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

Di-fieldset tše di golofetšego

Oketša disabledseka go a <fieldset>go šitiša ditaolo ka moka ka gare ga <fieldset>ka nako e tee.

Temoso ka kgokagano tshebetso ya`<a>`

Ka go ikemela, diphensele di tla swara ditaolo ka moka tša foromo ya setlogo ( <input>, <select>le <button>dielemente) ka gare ga a <fieldset disabled>bjalo ka tšeo di golofetšego, go thibela bobedi ditirišano tša khiiboto le toeba go tšona. Le ge go le bjalo, ge e le gore foromo ya gago gape e akaretša <a ... class="btn btn-*">dielemente, tše di tla fiwa fela setaele sa pointer-events: none. Bjalo ka ge go lemogilwe karolong yeo e lego mabapi le boemo bjo bo golofetšego bakeng sa dikonope (gomme ka mo go kgethegilego karolong e nyenyane bakeng sa dielemente tša ankora), thepa ye ya CSS ga se ya hlwa e bewa maemong e bile ga e thekgwe ka botlalo go Opera 18 le ka tlase, goba go Internet Explorer 11, gomme e fentše 't thibela badiriši ba khiiboto go kgona go tsepamiša kgopolo goba go tsenya tirišong dikgokagano tše. Ka gona gore o bolokege, diriša JavaScript ya tlwaelo go šitiša dikgokagano tše bjalo.

Go sepelelana ga sefapano sa sephephediši

Le ge Bootstrap e tla diriša mekgwa ye go diphensele ka moka, Internet Explorer 11 le ka tlase ga e thekge ka botlalo disabledseka go a <fieldset>. Šomiša JavaScript ya tlwaelo go šitiša sete ya tšhemo go diphensele tše.

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

Bolela feela

Oketša readonlyseka sa boolean go tsenyo go thibela phetošo ya boleng bja tsenyo. Ditseno tša go bala fela di bonala di le bofefo (go swana le ditseno tše di golofetšego), eupša boloka khesara ya maemo.

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

Sengwalwa sa thušo

Sengwalwa sa thušo sa maemo a thibelo bakeng sa ditaolo tša foromo.

Go tswalanya sengwalwa sa thušo le ditaolo tša foromo

Sengwalwa sa thušo se swanetše go tswalanywa ka go lebanya le taolo ya foromo yeo e amanago le go šomiša aria-describedbyseka. Se se tla netefatša gore theknolotši ya go thuša – go swana le dibadi tša skrine – di tla tsebagatša sengwalwa se sa thušo ge modiriši a tsepamiša kgopolo goba a tsena taolong.

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

Netefatšo e bolela

Bootstrap e akaretša mekgwa ya netefatšo ya phošo, temošo, le maemo a katlego go ditaolo tša foromo. Go šomiša, oketša .has-warning, .has-error, goba .has-successgo elemente ya motswadi. Le ge e le efe .control-label, .form-control, le .help-blockka gare ga elemente yeo e tla amogela mekgwa ya netefatšo.

Go fetišetša mmušo wa netefatšo go theknolotši ya go thuša le badiriši ba difofu tša mmala

Go šomiša mekgwa ye ya netefatšo go laetša seemo sa taolo ya foromo go fa fela taetšo ye e bonwago, ye e theilwego godimo ga mebala, yeo e ka se fetišetšwego go badiriši ba theknolotši ya go thuša - go swana le babadi ba skrine - goba go badiriši bao ba sa foufetšego mmala.

Netefatša gore sešupo se sengwe sa mmušo le sona se a fiwa. Go fa mohlala, o ka akaretša tšhupetšo ka ga mmušo ka go <label>sengwalwa sa taolo ya foromo ka boyona (bjalo ka ge go le bjalo mohlaleng wa khoutu wo o latelago), akaretša Glyphicon (ka sengwalwa se sengwe sa maleba o šomiša .sr-onlysehlopha - bona mehlala ya Glyphicon ), goba ka go fa an thibelo ya sengwalwa ya thušo ya tlaleletšo . Ka go lebanya bakeng sa theknolotši ya go thuša, ditaolo tša foromo tše di sa šomego le tšona di ka abelwa aria-invalid="true"seka.

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

Ka diaekhone boikhethelo

O ka oketša gape le diaekhone tša ditshwayotshwayo tša boikhethelo ka tlaleletšo ya .has-feedbackle leswao la go ja.

Diaekhone tša ditshwaotshwao di šoma fela ka <input class="form-control">dielemente tša sengwalwa.

Diaekhone, dileibole, le dihlopha tša tsenyo

Go bewa ka seatla ga diaekhone tša ditshwayotshwayo go a nyakega bakeng sa ditseno tšeo di se nago leina le bakeng sa dihlopha tša ditseno tšeo di nago le tlaleletšo ka go le letona. O hlohleletšwa ka maatla go fa dileibole tša ditseno ka moka ka mabaka a phihlelelo. Ge o nyaka go thibela dileibole go bontšhwa, di uta le .sr-onlysehlopha. Ge e le gore o swanetše go dira ntle le dileibole, beakanya topboleng bja leswao la ditshwaotshwao. Bakeng sa dihlopha tša tsenyo, beakanya rightboleng go boleng bja maleba bja dipiksele go ya ka bophara bja addon ya gago.

Go fetišetša tlhalošo ya seswantšho go theknolotši ya go thuša

Go netefatša gore theknolotši ya go thuša – go swana le dibadi tša skrine – di fetišetša ka nepagalo tlhalošo ya leswao, sengwalwa sa tlaleletšo seo se utilwego se swanetše go akaretšwa le .sr-onlyphapoši gomme se tswalanywe ka go lebanya le taolo ya foromo yeo e amanago le go e šomiša aria-describedby. Ka go fapana le moo, netefatša gore tlhalošo (mohlala, taba ya gore go na le temošo ya tšhemo ye e itšego ya go tsenya sengwalwa) e fetišetšwa ka mokgwa wo mongwe, go swana le go fetoša sengwalwa sa nnete seo se <label>amanago le taolo ya foromo.

Le ge e le gore mehlala ye e latelago e šetše e bolela ka seemo sa netefatšo ya ditaolo tša yona tša sebopego ka go latelana mo <label>sengwalong ka bosona, thekniki ye e lego ka mo godimo (go šomiša .sr-onlysengwalwa le aria-describedby) e akareditšwe ka mabaka a go bontšha.

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

Diaekhone tša boikhethelo ka dibopego tše di rapaletšego le tša ka gare ga mothaladi

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

Diaekhone tša boikhethelo tšeo di nago le `.sr-only`dileibole tše di utilwego

Ge o šomiša .sr-onlysehlopha go uta taolo ya foromo ya <label>(go e na le go šomiša dikgetho tše dingwe tša go swaya, go swana le aria-labelseka), Bootstrap e tla beakanya ka go iketla maemo a leswao ge le šetše le okeditšwe.

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

Laola go lekanyetša bogolo

Beakanya bophagamo o šomiša diklase tša go swana le .input-lg, gomme o beakantše bophara o šomiša diklase tša kholomo ya keriti go swana le .col-lg-*.

Go lekanyetša bophagamo

Hlama ditaolo tša foromo tše telele goba tše kopana tšeo di swanago le bogolo bja dikonope.

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

Bogolo bja sehlopha sa foromo ya go rapalala

Ka pela bogolo bja dileibole le ditaolo tša foromo ka gare .form-horizontalka go tlaleletša .form-group-lggoba .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>

Go lekanyetša bogolo bja kholomo

Phuthelela ditseno ka dikholomong ta keriti, goba elemente efe goba efe ya motswadi ya tlwaelo, go gapeletsa gabonolo bophara bjo bo nyakegago.

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

Dithegi tša konope

Šomiša diklase tša konope go <a>, <button>, goba <input>elemente.

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

Tšhomišo ye e itšego ya seemo

Le ge diklase tša konope di ka šomišwa go <a>le <button>dielemente, ke fela <button>dielemente tšeo di thekgwago ka gare ga dikarolo tša rena tša nav le navbar.

Dikgokagano tšeo di šomago bjalo ka dikonope

Ge e le gore <a>dielemente di šomišwa go šoma bjalo ka dikonope – go hlohleletša mošomo wa ka gare ga letlakala, go e na le go sepelasepela go tokumente ye nngwe goba karolo ka gare ga letlakala la bjale – di swanetše go fiwa gape role="button".

Go fetolela ga sefapano sa sephephediši

Bjalo ka mokgwa wo mokaone, re kgothaletša kudu go šomiša <button>elemente neng le neng ge go kgonega go netefatša go swana ga phetolelo ya sefapano-sephephediši.

Gare ga tše dingwe, go na le phošo go Firefox <30 yeo e re thibelago go beakanya dikonope tše di theilwego godimo ga line-heightof <input>-, e dira gore di se swane gabotse le botelele bja dikonope tše dingwe go Firefox.

Dikgetho

Šomiša efe goba efe ya diklase tša konope tše di lego gona go hlama konope ya setaele ka pela.

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

Go fetišetša tlhalošo go theknolotši ya go thuša

Go šomiša mmala go oketša tlhalošo go konope go fa fela taetšo ya go bonwa, yeo e ka se fetišwego go badiriši ba theknolotši ya go thuša – go swana le babadi ba skrine. Netefatša gore tshedimošo yeo e bontšhitšwego ka mmala e ka ba e bonagala gabotse go tšwa diteng ka botšona (sengwalwa se se bonagalago sa konope), goba e akaretšwa ka mekgwa ye mengwe, go swana le sengwalwa sa tlaleletšo seo se utilwego le .sr-onlysehlopha.

Bogolo

Fancy dikonope tše kgolo goba tše nnyane? Oketša .btn-lg, .btn-sm, goba .btn-xsbakeng sa bogolo bjo bo oketšegilego.

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

Hlama dikonope tša maemo a go thibela—tšeo di akaretšago bophara bjo bo tletšego bja motswadi—ka go oketša .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>

Boemo bjo bo šomago

Dikonope di tla tšwelela di tobetšwe (ka bokamorago bjo bo lefsifsi, mollwane wo moso, le moriti wa go tsenywa) ge di šoma. Bakeng sa <button>dielemente, se se dirwa ka :active. Bakeng sa <a>dielemente, e dirilwe ka .active. Le ge go le bjalo, o ka šomiša .activego <button>s (le go akaretša aria-pressed="true"seka) ge o ka swanelwa ke go boeletša boemo bjo bo šomago ka lenaneo.

Elemente ya konopo

Ga go nyakege gore o oketše :activeka ge e le sehlopha sa maaka, eupša ge e ba o nyaka go gapeletša ponagalo e swanago, tšwela pele gomme o oketše .active.

<button type="button" class="btn btn-primary btn-lg active">Primary button</button>
<button type="button" class="btn btn-default btn-lg active">Button</button>

Ankora elemente

Oketša .activesehlopha go <a>dikonope.

Kgokagano ya mathomo Amanya

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

Boemo bjo bo golofetšego

Dira gore dikonope di bonagale di sa kgotle ka go di fifala morago ka opacity.

Elemente ya konopo

Oketša disabledseka go <button>dikonope.

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

Go sepelelana ga sefapano sa sephephediši

Ge o oketša disabledseka go a <button>, Internet Explorer 9 le ka fase e tla dira gore sengwalwa se be bohlokwa ka sengwalwa-moriti wo o šišimišago wo re ka se kgonego go o lokiša.

Ankora elemente

Oketša .disabledsehlopha go <a>dikonope.

Kgokagano ya mathomo Amanya

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

Re šomiša .disabledbjalo ka sehlopha sa utility mo, go swana le .activesehlopha se se tlwaelegilego, ka fao ga go nyakege hlogo ya pele.

Kgokaganya tshebetso temošo

Sehlopha sena se sebelisa pointer-events: noneho leka ho thibela tshebetso ya kgokagano ya <a>s, empa hore CSS thepa ha e so standardized le ha e ka botlalo tšehetsoa ka Opera 18 le ka tlase, kapa ka Internet Explorer 11. Ho phaella moo, esita le ka diphensele hore etsa tšehetso pointer-events: none, khiboto go sepelasepela go dula go sa amege, go ra gore badiriši ba khiiboto bao ba bonago le badiriši ba theknolotši ya go thuša ba sa dutše ba tla kgona go tsenya dikgokagano tše tirišong. Ka gona gore o bolokege, diriša JavaScript ya tlwaelo go šitiša dikgokagano tše bjalo.

Diswantšho tše di arabelago

Images ka Bootstrap 3 ka etswa arabela-botsoalle ka tlaleletso ea .img-responsivesehlopha. Se se šoma max-width: 100%;, height: auto;le display: block;go seswantšho gore se lekale gabotse go elemente ya motswadi.

Go tsepamiša diswantšho tšeo di šomišago .img-responsivesehlopha, šomiša .center-blockgo e na le .text-center. Bona karolo ya diklase tša bathuši go hwetša dintlha tše dingwe ka ga .center-blocktšhomišo.

SVG litšoantšo le IE 8-10

Ka Internet Explorer 8-10, SVG litšoantšo le .img-responsiveba disproportionately boholo. Go lokiša se, oketša width: 100% \9;moo go nyakegago. Bootstrap ga e diriše se ka go itiragalela ka ge e baka mathata go dibopego tše dingwe tša diswantšho.

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

Dibopego tša seswantšho

Oketša diklase go <img>elemente go setaele gabonolo diswantšho mo porojekeng efe goba efe.

Go sepelelana ga sefapano sa sephephediši

Dula o gopola gore Internet Explorer 8 e hloka thekgo ya dikhutlo tše di kgokologilego.

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

Mebala ya seemo

Fetiša moelelo ka mmala ka seatla se se tletšego sa diklase tša go gatelela tša mohola. Tše di ka dirišwa gape go dikgokagano gomme di tla fifala ge di hover go swana le ditaele tša rena tša dikgokagano tša go se fetoge.

Fusce dapibus, tellus ac go rogama komodo, tortor mauris nibh.

Nullam id dolor id nibh dikoloi tša dikoloi ut id elit.

Duis mollis, est non commodo luctus, nisi erat ligula ya go rwala dithoto.

Maecenas sed diam eget risus varius blandit dula amet e seng magna.

Etiam porta sem malesuada ea mollis euismod.

Donec ullamcorper lefeela bao e sego metus auctor fringilla.

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

Go šomana le go lebanya

Ka nako ye nngwe diklase tša kgatelelo di ka se dirišwe ka lebaka la go kgethegile ga mokgethi yo mongwe. Maemong a mantši, tharollo ye e lekanego ke go phuthela sengwalwa sa gago ka a <span>ka klase.

Go fetišetša tlhalošo go theknolotši ya go thuša

Go šomiša mmala go oketša tlhalošo go fa fela taetšo ya go bonwa, yeo e ka se fetišwego go badiriši ba theknolotši ya go thuša – go swana le babadi ba skrine. Netefatša gore tshedimošo yeo e bontšhwago ka mmala e ka ba e bonagala gabotse go tšwa diteng ka botšona (mebala ya diteng e šomišwa fela go tiišetša tlhalošo yeo e šetšego e le gona mo sengwalong/go swaya), goba e akaretšwa ka mekgwa ye mengwe, go swana le sengwalwa sa tlaleletšo seo se utilwego le .sr-onlysehlopha .

Ditlogo tša diteng

Go swana le diklase ta mebala ya sengwalwa sa diteng, beakanya gabonolo bokamorago bja elemente go sehlopha sefe goba sefe sa seemo. Dikarolo tša ankora di tla fifala ge di hover, go swana le diklase tša sengwalwa.

Nullam id dolor id nibh dikoloi tša dikoloi ut id elit.

Duis mollis, est non commodo luctus, nisi erat ligula ya go rwala dithoto.

Maecenas sed diam eget risus varius blandit dula amet e seng magna.

Etiam porta sem malesuada ea mollis euismod.

Donec ullamcorper lefeela bao e sego metus auctor fringilla.

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

Go šomana le go lebanya

Ka nako ye nngwe diklase tša morago tša diteng di ka se dirišwe ka lebaka la go kgethegile ga mokgethi yo mongwe. Maemong a mangwe, tharollo ye e lekanego ke go phuthela diteng tša elemente ya gago ka gare ga a <div>le sehlopha.

Go fetišetša tlhalošo go theknolotši ya go thuša

Go swana le ka mebala ya diteng , kgonthiša gore tlhalošo efe goba efe yeo e fetišetšwago ka mmala le yona e fetišetšwa ka sebopego seo e sego sa tlhagišo feela.

Tswala letshwao

Šomiša leswao la go tswalela la kakaretšo bakeng sa go nyatša diteng go swana le di-modal le ditemošo.

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

Dikhathare

Diriša di-caret go laetša mošomo wa go theoga le tlhahlo. Hlokomela gore caret ya go se fetoge e tla bušetša morago ka go itiragalela ka go dimenu tša go theoga .

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

Diphaphamadi tša ka pela

Phaphamala elemente go ya ka go le letshadi goba ka go le letona ka sehlopha. !importante akaretšwa go efoga ditaba tša go kgethegile. Diklase di ka šomišwa gape bjalo ka di-mixin.

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

Diboloko tša diteng tša bogareng

Beakanya elemente go display: blockle bogareng ka margin. E hwetšagala bjalo ka mixin le sehlopha.

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

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

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

Hlakiša

Hlakola s gabonolo floatka go tlaleletša .clearfix go elemente ya motswadi . E diriša micro clearfix bjalo ka ge e tumišitšwe ke Nicolas Gallagher. E ka šomišwa gape bjalo ka 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();
}

Go bontšha le go uta diteng

Gapeletša elemente go bontšhwa goba go utollwa ( go akaretšwa bakeng sa babadi ba skrine ) ka tšhomišo ya .showle .hiddendiklase. Diklase tše di diriša !importantgo phema dithulano tša go lebanya, go fo swana le diphaphamadi tša ka pela . Di hwetšagala feela bakeng sa go fetoša maemo a go thibela. Di ka šomišwa gape bjalo ka mixins.

.hidee hwetšagala, eupša ga se ka mehla e amago babadi ba skrine gomme e tlogetšwe go tloga go v3.0.1. Diriša .hiddengoba .sr-onlygo e na le moo.

Go feta fao, .invisiblee ka šomišwa go fetoša fela go bonagala ga elemente, go ra gore ya yona displayga e fetošwe gomme elemente e sa dutše e ka ama phallo ya tokomane.

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

Sebadi sa skrine le dikagare tša go sepelasepela tša khiiboto

Pata elemente go didirišwa ka moka ntle le babadi ba skrine ka .sr-only. Kopanya .sr-onlyle .sr-only-focusablego bontšha elemente gape ge e tsepame (mohlala, ke modiriši wa khiiboto fela). Go nyakega bakeng sa go latela mekgwa ye mekaone ya phihlelelo . E ka šomišwa gape bjalo ka 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();
}

Go tšeelwa legato ga seswantšho

Šomiša .text-hidesehlopha goba mixin go thuša go tšea legato la diteng tša sengwalwa sa elemente ka seswantšho sa ka morago.

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

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

Bakeng sa tlhabollo ya ka pela yeo e nago le bogwera bja sellathekeng, šomiša diklase tše tša mohola bakeng sa go bontšha le go uta diteng ka sedirišwa ka potšišo ya methopo ya ditaba. Gape go akaretšwa diklase tša mohola tša go fetoša diteng ge di gatišitšwe.

Leka go diriša tše ka motheo o lekanyeditšwego gomme o pheme go hlama diphetolelo tše di fapanego ka mo go feletšego tša lefelo le tee. Go e na le moo, di diriše go tlaleletša thero ya sedirišwa se sengwe le se sengwe.

Diklase tše di lego gona

Šomiša e tee goba kopanyo ya diklase tše di lego gona bakeng sa go fetoša diteng go ralala le dintlha tša go kgaotša tša pono ya pono.

	Disebediswa tse nyenyane tse eketsehilengDifouno (<768px) .	Didirišwa tše dinyenyaneMatlapa (≥768px) .	Didirišwa tša magarengDi-desktop (≥992px) .	Didirišwa tše dikgoloDi-desktop (≥1200px) .
`.visible-xs-*`	Go bonagala	Fihlilwe	Fihlilwe	Fihlilwe
`.visible-sm-*`	Fihlilwe	Go bonagala	Fihlilwe	Fihlilwe
`.visible-md-*`	Fihlilwe	Fihlilwe	Go bonagala	Fihlilwe
`.visible-lg-*`	Fihlilwe	Fihlilwe	Fihlilwe	Go bonagala
`.hidden-xs`	Fihlilwe	Go bonagala	Go bonagala	Go bonagala
`.hidden-sm`	Go bonagala	Fihlilwe	Go bonagala	Go bonagala
`.hidden-md`	Go bonagala	Go bonagala	Fihlilwe	Go bonagala
`.hidden-lg`	Go bonagala	Go bonagala	Go bonagala	Fihlilwe

Go tloga go v3.2.0, .visible-*-*diklase tša ntlha ye nngwe le ye nngwe ya go kgaotša di tla ka diphetogo tše tharo, e tee bakeng sa displayboleng bjo bongwe le bjo bongwe bja thepa ya CSS bjo bo lokeleditšwego ka mo tlase.

Sehlopha sa diklase	CSS`display`
`.visible-*-block`	`display: block;`
`.visible-*-inline`	`display: inline;`
`.visible-*-inline-block`	`display: inline-block;`

Ka fao, bakeng sa diskrini tše nnyane tše di oketšegilego ( xs) mohlala, .visible-*-*diklase tše di lego gona ke: .visible-xs-block, .visible-xs-inline, le .visible-xs-inline-block.

Diklase .visible-xs, .visible-sm, .visible-md, le .visible-lggape di gona, eupša di tlogetšwe go tloga go v3.2.0 . Di ka ba di lekana le .visible-*-block, ntle le ka maemo a tlaleletšo a kgethegilego a <table>dielemente tše di amanago le toggling -.

Diklase tša go phrintha

Go swana le diklase tša ka mehla tša go arabela, šomiša tše bakeng sa go fetoša diteng bakeng sa go gatiša.

Diklase	Sephephediši	Phrintha
`.visible-print-block` `.visible-print-inline` `.visible-print-inline-block`	Fihlilwe	Go bonagala
`.hidden-print`	Go bonagala	Fihlilwe

Sehlopha .visible-printle sona se gona eupša se tlogetšwe go tloga ka v3.2.0. E ka ba e lekana le .visible-print-block, ntle le ka maemo a tlaleletšo a kgethegilego a <table>dielemente tše di amanago le -.

Dikgetse tša diteko

Fetoša bogolo bja sephephediši sa gago goba o laetše go didirišwa tše di fapanego go leka diklase tša utility tše di arabelago.

E bonagala go...

Maswao a go hlahloba a matala a laetša gore elemente e a bonagala ka go lefelo la gago la bjale la go lebelela.

E nyenyane e eketsehileng ✔ E bonahala ka x-small

Nnyane ✔ E bonahala ka tse nyenyane

Dirišwago ✔ E bonahala ka mahareng

Kgolo ✔ E bonahala ka kgolo

E nyenyane e eketsehileng le e nyenyane ✔ E bonagala go x-ye nnyane le ye nnyane

Bogare le bjo bogolo ✔ E bonahala ka mahareng le a maholo

E nyenyane e eketsehileng le e mahareng ✔ E bonahala ka x-small le mahareng

E nyenyane le e kgolo ✔ E bonahala ka tse nyenyane le tse khōlō

E nyenyane e eketsehileng le e khōlō ✔ E bonagala go x-ye nnyane le ye kgolo

E nyenyane le e mahareng ✔ E bonahala ka tse nyenyane le tse mahareng

E utilwe godimo ga...

Mo, maswao a go hlahloba a matala gape a laetša gore elemente e utilwe ka go lefelo la gago la bjale la go lebelela.

E nyenyane e eketsehileng ✔ E patiloe ka x-small

Nnyane ✔ E patiloe ka tse nyenyane

Dirišwago ✔ E utilwe ka mahareng

Kgolo ✔ E patiloe ka kgolo

E nyenyane e eketsehileng le e nyenyane ✔ E patiloe ka x-nyenyane le e nyenyane

Bogare le bjo bogolo ✔ E patiloe ka mahareng le kgolo

E nyenyane e eketsehileng le e mahareng ✔ E patiloe ka x-nyenyane le mahareng

E nyenyane le e kgolo ✔ E patiloe ka tse nyenyane le tse khōlō

E nyenyane e eketsehileng le e khōlō ✔ E patiloe ka x-nyenyane le e khōlō

E nyenyane le e mahareng ✔ E patiloe ka tse nyenyane le tse mahareng

CSS ya Bootstrap e agilwe godimo ga Less, e lego preprocessor yeo e nago le mošomo wa tlaleletšo go swana le diphetogo, mixins, le mešomo ya go kgoboketša CSS. Bao ba nyakago go diriša difaele tša mohlodi tše Nnyane go e na le difaele tša rena tša CSS tšeo di kgobokeditšwego ba ka diriša diphetogo tše dintši le di-mixin tšeo re di dirišago go ralala le tlhako.

Diphetogo tša keriti le ditswaki di akaretšwa ka gare ga karolo ya tshepedišo ya Keriti .

Go kgoboketša Bootstrap

Bootstrap e ka šomišwa ka bonyane ditsela tše pedi: ka CSS ye e kgobokeditšwego goba ka difaele tša mohlodi tše nnyane. Go kgoboketša difaele tša Ka fase, lebelela karolo ya Go Thoma bakeng sa ka moo o ka beakanyago tikologo ya gago ya tlhabollo go sepetša ditaelo tše di nyakegago.

Didirišwa tša go kgoboketša tša mokgatlo wa boraro di ka šoma le Bootstrap, eupša ga di thekgwe ke sehlopha sa rena sa motheo.

Diphetogo

Diphetogo di šomišwa go ralala le porojeke ka moka bjalo ka tsela ya go tsenya bogareng le go abelana dikelo tše di šomišwago ka tlwaelo go swana le mebala, sekgoba, goba mekgobo ya difonte. Bakeng sa go thubega mo go feletšego, hle bona Sedirišwa sa go Tlwaetša .

Mebala

Habonolo etsa tshebediso ya dikema tse peli mebala: greyscale le semantiki. Mebala ya sekala sa bohlokwa e fa phihlelelo ya ka pela go meriti ye e šomišwago ka tlwaelo ya boso mola semantiki e akaretša mebala ye e fapanego yeo e abetšwego dikelo tša diteng tše di nago le mohola.

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

Šomiša efe goba efe ya diphetogo tše tša mebala ka fao di lego ka gona goba o di abele gape go diphetogo tše di nago le mohola kudu tša porojeke ya gago.

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

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

Go dira sefala

Diphetogo tše mmalwa bakeng sa go tlwaetša ka pela dikarolo tše bohlokwa tša marapo a sebaka sa gago.

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

Dikgokagano

Habonolo setaele dikgokelo tsa hao ka mmala o nepahetseng le boleng bo le 'ngoe feela.

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

Hlokomela gore the @link-hover-colore šomiša mošomo, sedirišwa se sengwe se se makatšago go tšwa go Less, go bopa ka go itiriša mmala wa go hover wa go nepagala. O ka šomiša darken, lighten, saturate, le desaturate.

Go thaepa

Beakanya mongwalo wa gago wa go ngwala gabonolo, bogolo bja sengwalwa, go eta pele, le tše dingwe ka diphetogo tše mmalwa tša ka pela. Bootstrap e diriša tše gape go nea di- mixin tše bonolo tša go thaepa.

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

Diaekhone

Diphetogo tše pedi tša ka pela tša go tlwaetša lefelo le leina la faele la diaekhone tša gago.

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

Dikarolo

Dikarolo go ralala le Bootstrap di dira tšhomišo ya diphetogo tše dingwe tša go se fetoge bakeng sa go beakanya dikelo tše di tlwaelegilego. Ke tše tšeo di dirišwago kudu.

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

Di-mixin tša morekiši

Di-mixin tša barekiši ke di-mixin go thuša go thekga diphensele tše dintši ka go akaretša dihlongwapele ka moka tša maleba tša morekiši go CSS ya gago yeo e kgobokeditšwego.

Go beakanya bogolo bja lepokisi

Seta gape dikarolo tša gago 'mohlala wa lepokisi ka mixin e tee. Bakeng sa taba e dikologilego, bona sehlogo se se thušago go tšwa go Mozilla .

The mixin e deprecated e le ya v3.2.0, ka matseno a Autoprefixer. Go boloka go sepelelana ga morago, Bootstrap e tla tšwela pele go diriša mixin ka gare go fihlela Bootstrap v4.

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

Dikhutlo tše di kgokologilego

Lehono diphensele ka moka tša sebjalebjale di thekga border-radiusthepa yeo e sego ya pele. Ka ge go le bjalo, ga go na .border-radius()mixin, eupša Bootstrap e akaretša dikgaoletšo tša go dikologa ka pela dikhutlo tše pedi ka lehlakoreng le itšego la selo.

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

Meriti ya Lebokose (Lerotholi).

Ge e ba batheetši ba gago bao o ba lebeletšego ba diriša diphensele le didirišwa tša morago-rago le tše dikgolo kudu, kgonthišetša gore o fo diriša box-shadowthoto yeo ka boyona. Ge e ba o nyaka thekgo ya didirišwa tša kgale tša Android (pele ga v4) le iOS (pele ga iOS 5), diriša mixin yeo e sa dirišwego go topa -webkithlogo ye e nyakegago.

Mixin e tlogetšwe go tloga go v3.1.0, ka ge Bootstrap e sa thekge semmušo diforamo tšeo di fetilwego ke nako tšeo di sa thekgego thepa ya maemo. Go boloka go sepelelana ga morago, Bootstrap e tla tšwela pele go diriša mixin ka gare go fihlela Bootstrap v4.

Kgonthiša gore o šomiša rgba()mebala ka meriting ya gago ya lepokisi gore e kopane ka ntle le mathata ka mo go kgonegago le dimelo.

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

Diphetogo

Di-mixin tše dintši bakeng sa go feto-fetoga le maemo. Beakanya tshedimošo ka moka ya phetogo ka e tee, goba o laetše tiego le nako ye e arogilego ge go nyakega.

The mixins ba deprecated e le ya v3.2.0, ka matseno a Autoprefixer. Go boloka go sepelelana ga morago, Bootstrap e tla tšwela pele go diriša di-mixin ka gare go fihlela 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;
}

Diphetogo

Dikološa, sekala, fetolela (šuthiša), goba sekamiša selo sefe goba sefe.

The mixins ba deprecated e le ya v3.2.0, ka matseno a Autoprefixer. Go boloka go sepelelana ga morago, Bootstrap e tla tšwela pele go diriša di-mixin ka gare go fihlela 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;
}

Ditshwantšho tša go phela

Mixin e tee ya go šomiša dithoto ka moka tša dipopaye tša CSS3 ka kgoeletšong e tee le di-mixin tše dingwe tša dithoto tša motho ka o tee ka o tee.

The mixins ba deprecated e le ya v3.2.0, ka matseno a Autoprefixer. Go boloka go sepelelana ga morago, Bootstrap e tla tšwela pele go diriša di-mixin ka gare go fihlela 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;
}

Go se bonagale gabotse

Beha opacity bakeng sa diphensele tsohle le fana ka filterfallback bakeng sa IE8.

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

Sengwalwa sa seswari sa lefelo

Fana ka seemo sa ditaolo tša foromo ka gare ga tšhemo ye nngwe le ye nngwe.

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

Dikholomo

Hlagiša dikholomo ka CSS ka gare ga elemente e tee.

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

Dikelo tša go sepelelana

Fetolela gabonolo mebala efe goba efe ye mebedi go ba gradient ya ka morago. Hwetša e tšwetšego pele kudu gomme o bea tlhahlo, diriša mebala e meraro goba o diriše radial gradient. Ka mixin e tee o hwetša dipolelopolelo ka moka tša pele tšeo o tlago go di hloka.

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

O ka laetša gape khutlo ya kelo ya maemo ya mebala ye mebedi, ya mothalo:

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

Ge o nyaka gradient ya setaele sa mothalo wa go kuta moriri, seo se bonolo, le sona. E no laetša mmala o tee gomme re tla apeša mothalo wo mošweu wo o bonagalago.

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

Godimo ga ante gomme o šomiše mebala ye meraro go e na le moo. Beakanya mmala wa mathomo, mmala wa bobedi, go ema ga mmala wa mmala wa bobedi (boleng bja phesente go swana le 25%), le mmala wa boraro ka di-mixin tše:

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

Dihlogo godimo! Ge e ba o ka tsoga o swanetše go tloša gradient, kgonthišetša gore o tloša IE-specific efe goba efe yeo filtero ka bago o e okeditše. O ka dira seo ka go diriša .reset-filter()mixin go bapa le background-image: none;.

Di-mixin tša mohola

Di-mixin tša mohola ke di-mixin tšeo di kopanyago dithoto tša CSS tšeo ka tsela ye nngwe di sa amanago go fihlelela pakane ye e itšego goba mošomo.

Hlakiša

Lebala go tlaleletša class="clearfix"go elemente efe goba efe gomme go e na le moo o tlaleletše .clearfix()mixin moo go swanetšego. E diriša micro clearfix go tšwa go Nicolas Gallagher .

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

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

Go tsepama ga go rapalala

Kapejana bogareng elemente efe goba efe ka gare ga motswadi wa yona. E nyaka widthgoba max-widthgo bewa.

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

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

Bathuši ba go lekanyetša bogolo

Laetša ditekanyo tša selo gabonolo.

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

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

Mafelo a sengwalwa ao a ka fetošwago bogolo

Beakanya dikgetho tša go fetoša bogolo gabonolo tša lefelo lefe goba lefe la sengwalwa, goba elemente efe goba efe ye nngwe. Di-default go boitshwaro bjo bo tlwaelegilego bja sephephediši ( both).

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

Go kgaola sengwalwa

Kgaola sengwalwa gabonolo ka ellipsis ka mixin e tee. E nyaka gore elemente e be blockgoba e be inline-blockmaemong.

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

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

Retina diswantšho

Laetša ditsela tše pedi tša seswantšho le ditekanyo tša seswantšho tša @1x, gomme Bootstrap e tla fa potšišo ya boraditaba ya @2x. Ge e ba o na le diswantšho tše dintši tšeo o swanetšego go di hlankela, nagana ka go ngwala CSS ya gago ya seswantšho sa retina ka seatla potšišong e tee ya methopo ya ditaba.

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

Le ge Bootstrap e agilwe go Less, e bile e na le boema-kepe bja semmušo bja Sass . Re e hlokomela ka polokelong ya GitHub ye e arogilego gomme re swara diapdeite ka sengwalwa sa phetošo.

Seo se akareditšwego

Ka ge boema-kepe bja Sass bo e-na le repo e arogilego gomme bo hlankela batheetši ba fapanego ganyenyane, dikagare tša projeke di fapana kudu le projeke e kgolo ya Bootstrap. Se se netefatša gore boemakepe bja Sass bo sepelelana le ditshepedišo tše ntši tše di theilwego go Sass ka mo go kgonegago.

Tsela	Tlhalošo
`lib/`	Ruby lehakoe khoutu (Sass phetolo, Rails le Compass kopanyo) .
`tasks/`	Dingwalwa tša sefetoledi (go fetoša godimo ga noka Less go Sass) .
`test/`	Diteko tša go kgoboketša
`templates/`	Khamphase sephutheloana iponahatsa
`vendor/assets/`	Sass, JavaScript, le difaele tša fonte
`Rakefile`	Mešomo ya ka gare, go swana le go raka le go fetolela

Etela polokelo ya GitHub ya boema-kepe bja Sass go bona difaele tše di šoma.

Go hlongwa

Bakeng sa tshedimošo ya kamoo o ka tsenyago le go diriša Bootstrap bakeng sa Sass, lebelela polokelo ya GitHub readme . Ke mothopo wa moragorago kudu gomme o akaretša tshedimošo ya go šomišwa le Diporo, Khamphase, le diprotšeke tša maemo tša Sass.

Bootstrap bakeng sa Sass

CSS

Kakaretšo

Mohuta wa doctype ya HTML5

Mobile pele

Typography le dikgokagano

Tlwaetša.css

Ditshelo

Tshepedišo ya keriti

Matseno

Dipotšišo tša boraditaba

Dikgetho tša keriti

Mohlala: E kgobokeditšwe-go-ya go rapalala

Mohlala: Setshelo sa seela

Mohlala: Mobile le komporong

Mohlala: Mobile, letlapa, komporong

Mohlala: Go phuthela kholomo

Di-reset tša kholomo tše di arabelago

Go lefela dikholomo

Dikholomo tša go bea dihlaga

Go laela ka dikholomo

Less mixins le diphetogo

Diphetogo

Ditswaki

Mohlala wa tšhomišo

Go thaepa

Dihlogo tša ditaba

h1. Hlogo ya bootstrap

h2. Hlogo ya bootstrap

h3. Hlogo ya bootstrap

h4. Hlogo ya bootstrap

h5. Hlogo ya bootstrap

h6. Hlogo ya bootstrap

h1. Hlogo ya bootstrap Sengwalwa sa bobedi

h2. Hlogo ya bootstrap Sengwalwa sa bobedi

h3. Hlogo ya bootstrap Sengwalwa sa bobedi

h4. Hlogo ya bootstrap Sengwalwa sa bobedi

h5. Hlogo ya bootstrap Sengwalwa sa bobedi

h6. Hlogo ya bootstrap Sengwalwa sa bobedi

Khopi ya mmele

Khopi ya mmele ya go eta pele

E agilwe ka Ka tlase

Dielemente tša sengwalwa sa ka gare ga mothaladi

Sengwalwa se se swailwego

Sengwalwa se se phumotšwego

Strikethrough sengwalwa

Sengwalwa se se tsentšwego

Sengwalwa se se thaletšwego

Sengwalwa se sennyane

Bokoto

Ditlhaka tše di sekamego

Dielemente tše dingwe

Diklase tša go logaganya

Diklase tša phetogo

Dikhutsofatšo

Khutsufatšo ya motheo

Botho bja mathomo

Diaterese

Ditsopolwa tša go thibela

Setsopolwa sa go thibela sa tlwaelo

Dikgetho tša go thibela

Go reela mothopo leina

Dipontšho tše dingwe

Mananeo

E sa laelwago

E laetšwe

E sa setaele

Ka gare ga mothaladi

Tlhalošo

Tlhaloso e rapameng

Go kgaola ka go itiriša

Khoutu ya

Ka gare ga mothaladi

Tsenyo ya mosebedisi

Bloko ya motheo

Diphetogo

Dipholo tsa mohlala

Ditafola

Mohlala wa motheo

Methaladi ya methalo

Go sepelelana ga sefapano sa sephephediši

Demo `:focus`mmuso

Temoso ka kgokagano tshebetso ya`<a>`

Diaekhone tša boikhethelo tšeo di nago le `.sr-only`dileibole tše di utilwego