Fumana maemo a tlase ho likarolo tsa mantlha tsa lits'ebetso tsa Bootstrap, ho kenyeletsoa le mokhoa oa rona oa nts'etsopele ea webo e betere, e potlakileng le e matla.

HTML5 mofuta oa litokomane

Bootstrap e sebelisa likarolo tse itseng tsa HTML le thepa ea CSS e hlokang ts'ebeliso ea HTML5 doctype. E kenyelletse qalong ea merero eohle ea hau.

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

Mobile pele

Ka Bootstrap 2, re kentse mekhoa ea boikhethelo e bonolo ea mehala bakeng sa likarolo tsa bohlokoa tsa moralo. Ka Bootstrap 3, re ngotse projeke hape hore e be bonolo ho tloha qalong. Sebakeng sa ho eketsa ka mefuta ea boikhethelo ea li-mobile, li behiloe ka har'a mantlha. Ebile , Bootstrap ke mobile pele . Mefuta ea pele ea mobile e ka fumanoa ho laeborari eohle ho fapana le lifaeleng tse arohaneng.

Ho etsa bonnete ba ho fana ka mokhoa o nepahetseng le ho atametsa ka ho ama, eketsa tag ea "viewport " ho <head>.

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

O ka tima bokhoni ba ho atametsa lisebelisoa tsa mehala ka ho kenyelletsa user-scalable=nometa tag ea ponelopele. Sena se thibela ho atametsa, ho bolelang hore basebelisi ba khona ho tsamaisa, 'me se etsa hore sebaka sa hau sa marang-rang se ikutloe se batla se tšoana le sesebelisoa sa hau. Ka kakaretso, ha re khothaletse sena sebakeng se seng le se seng sa marang-rang, kahoo e-ba hlokolosi!

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

Typography le lihokela

Bootstrap e beha ponts'o ea mantlha ea lefats'e, typography, le mekhoa ea lihokelo. Ka ho khetheha, re:

Beha background-color: #fff;holim'abody
Sebelisa @font-family-base, @font-size-base, le @line-height-baselitšoaneleho e le motheo oa rona oa typographic
Beha 'mala oa lihokelo tsa lefats'e ka @link-colorho sebelisa mehala ea likhokahano feela ho eona:hover

Mekhoa ena e ka fumanoa ka hare scaffolding.less.

Normalize.css

Bakeng sa ntlafatso e ntlafalitsoeng ea sebatli, re sebelisa Normalize.css , projeke ea Nicolas Gallagher le Jonathan Neal .

Lijana

Bootstrap e hloka ntho e nang le karolo ho phuthela litaba tsa sebaka sa marang-rang le ho beha sistimi ea rona ea grid. U ka khetha e 'ngoe ea lijana tse peli tseo u ka li sebelisang mererong ea hau. Hlokomela hore, ka lebaka la paddingle ho feta, ha ho setshelo se sa tsitsang.

Sebelisa .containerbakeng sa setshelo sa bophara bo tsitsitseng se arabelang.

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

Sebelisa .container-fluidbakeng sa setshelo sa bophara bo felletseng, se nkang bophara bohle ba sebaka sa hau sa pono.

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

Bootstrap e kenyelletsa sistimi e arabelang, ea pele ea mokelikeli oa mokelikeli o lekaneng ho fihla ho likholomo tse 12 ha sesebelisoa kapa boholo ba sebaka sa pono se ntse se eketseha. E kenyelletsa litlelase tse boletsoeng esale pele bakeng sa likhetho tse bonolo tsa moralo, hammoho le li-mixins tse matla bakeng sa ho hlahisa meralo e mengata ea semantic .

Selelekela

Sistimi ea li-grid e sebelisoa ho theha meralo ea maqephe ka letoto la mela le likholomo tse bolokang litaba tsa hau. Mona ke kamoo sistimi ea grid ea Bootstrap e sebetsang kateng:

Mela e tlameha ho behoa ka har'a .container(bophara bo tsitsitseng) kapa .container-fluid(bophara bo felletseng) bakeng sa tlhophiso e nepahetseng le padding.
Sebelisa mela ho theha lihlopha tse tšekaletseng tsa likholomo.
Litaba li tlameha ho beoa ka har'a mela, 'me ke likholomo feela tseo e ka bang bana ba haufi ba mela.
Lihlopha tse hlalositsoeng esale pele li rata .row'me .col-xs-4lia fumaneha bakeng sa ho etsa meralo ea grid kapele. Metsoako e fokolang e ka boela ea sebelisoa bakeng sa meralo e mengata ea semantic.
Likholomo li theha li-gutters (likheo lipakeng tsa litaba tsa kholomo) ka padding. Padding eo e fokotsoa ka mela bakeng sa kholomo ea pele le ea ho qetela ka moeli o fosahetseng ho .rows.
Moeli o mobe ke ka lebaka leo mehlala e ka tlase e seng ea bohlokoa. Ke hore litaba tse ka har'a likholomo tsa grid li tsamaisane le litaba tseo e seng tsa grid.
Litšiea tsa grid li entsoe ka ho hlakisa palo ea likholomo tse leshome le metso e 'meli tse fumanehang tseo u lakatsang ho li qeta. Mohlala, likholomo tse tharo tse lekanang li ka sebelisa tse tharo .col-xs-4.
Haeba likholomo tse fetang 12 li behiloe ka har'a mola o le mong, sehlopha ka seng sa likholomo tse eketsehileng, e le yuniti e le 'ngoe, se tla thatela moleng o mocha.
Lihlopha tsa grid li sebetsa ho lisebelisoa tse nang le bophara ba skrine bo boholo ho feta kapa bo lekanang le li-breakpoint sizes, 'me li fete li-grid tse lebisitsoeng ho lisebelisoa tse nyane. Ka hona, mohlala, ho sebelisa sehlopha sefe kapa sefe .col-md-*ho element ho ke ke ha ama setaele sa eona ho lisebelisoa tse mahareng feela empa hape le lisebelisoa tse kholo haeba .col-lg-*sehlopha se le sieo.

Sheba mehlala ea ho sebelisa melao-motheo ena khoutu ea hau.

Lipotso tsa mecha ea litaba

Re sebelisa lipotso tse latelang tsa media ho lifaele tsa rona tse Nyane ho theha lintlha tsa bohlokoa ho sistimi ea rona ea marang-rang.

/* 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 linako tse ling re atolosa lipotso tsena ho kenyelletsa max-widthho fokotsa CSS ho lisebelisoa tse fokolang.

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

Likhetho tsa grid

Bona hore na likarolo tsa sistimi ea Bootstrap li sebetsa joang ho lisebelisoa tse ngata tse nang le tafole e sebetsang.

	Lisebelisoa tse nyane tsa mohala (<768px)	Matlapa a lisebelisoa tse nyane (≥768px)	Li-Desktop tsa lisebelisoa tse mahareng (≥992px)	Lisebelisoa tse kholo tsa Desktop (≥1200px)
Boitšoaro ba grid	E tšekaletseng ka linako tsohle	E putlahile ho qala, e tšekaletseng ka holim'a libaka tsa phomolo
Bophara ba setshelo	Ha ho letho (auto)	750px	970px	1170px
Sehlongoapele sa sehlopha	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`
# ea likholomo	12
Bophara ba kholomo	Auto	~62px	~81px	~97px
Bophara ba sekoti	30px (15px ka lehlakoreng le leng la kholomo)
Nestable	Ee
Li-offsets	Ee
Ho laela ka kholomo	Ee

Mohlala: E phuthetsoe ho ea ho e tšekaletseng

U sebelisa sehlopha se le seng sa .col-md-*lihlopha tsa gridi, u ka theha sistimi ea grid e qalang e behiloe lisebelisoa tsa mohala le lisebelisoa tsa li-tablet (tse nyane ho isa ho tse nyane) pele e ka ba e otlolohileng ho lisebelisoa tsa komporo (bohareng). Beha likholomo tsa grid ho efe kapa efe .row.

.col-md-1

.col-md-8

.col-md-4

.col-md-6

<div class="row">
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>

Mohlala: Setshelo sa metsi

Fetolela sebopeho sefe kapa sefe sa marang-rang sa bophara bo tsitsitseng hore se be sebopeho sa bophara bo felletseng ka ho fetola bokantle ba hau .containerho ba .container-fluid.

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

Mohlala: Mobile le desktop

Ha u batle hore likholomo tsa hau li kenelle ka har'a lisebelisoa tse nyane? Sebelisa litlelase tse ling tse nyane le tse mahareng tsa grid ka ho eketsa likholomo .col-xs-* .col-md-*tsa hau. Sheba mohlala o ka tlase bakeng sa mohopolo o betere oa hore na tsohle li sebetsa joang.

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

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

.col-xs-6

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

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

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

Mohlala: Mobile, tablet, desktop

Theha holim'a mohlala o fetileng ka ho theha meralo e matla le e matla le ho feta ka .col-sm-*litlelase tsa matlapa.

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

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

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

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

Mohlala: Ho phuthela khola

Haeba likholomo tse fetang 12 li behiloe ka har'a mola o le mong, sehlopha ka seng sa likholomo tse eketsehileng, e le yuniti e le 'ngoe, se tla thatela moleng o mocha.

.col-xs-9

.col-xs-4
Ho tloha ha 9 + 4 = 13 > 12, div ena ea kholomo e 4 e phuthoa moleng o mocha joalo ka yuniti e le 'ngoe e kopaneng.

.col-xs-6 Likholomo tse
latelang li tsoela pele moleng o mocha.

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

Lits'ebetso tsa kholomo e arabelang

Ka mekhahlelo e mene ea li-grid tse fumanehang u tla tlameha ho tobana le mathata moo, ka linako tse ling, litšiea tsa hau li sa hlake hantle kaha e 'ngoe e telele ho feta e' ngoe. Ho lokisa seo, sebelisa motsoako oa a .clearfixle litlelase tsa rona tsa lisebelisoa tse arabelang .

.col-xs-6 .col-sm-3
Resize your viewport kapa e hlahlobe fonong ea hao ho etsa mohlala.

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

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

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

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

Ntle le ho hlakola likholomo libakeng tse arabelang, ho ka 'na ha hlokahala hore u lokise li-offsets, pushes, kapa pulls bocha . Sheba sena ka liketso mohlaleng oa marang-rang .

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

Litšiea tsa offsetting

Tsamaisa likholomo ka ho le letona u sebelisa .col-md-offset-*lihlopha. Lihlopha tsena li eketsa karolo e ka ho le letšehali ea kholomo ka *likholomo. Ka mohlala, .col-md-offset-4e tsamaea .col-md-4ka holim'a likholomo tse 'nè.

.col-md-4

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

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

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

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

U ka boela ua hlakola li-offsets tse tsoang ho li-grid tse tlase ka .col-*-offset-0litlelase.

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

Litšiea tsa Nesting

Ho beha litaba tsa hau ka gridi ea kamehla, eketsa likholomo tse ncha .rowka .col-sm-*har'a .col-sm-*kholomo e teng. Mela e hlophiloeng e tlameha ho kenyelletsa sehlopha sa likholomo tse kopanyang ho fihla ho 12 kapa ka tlase ho moo (ha ho hlokahale hore u sebelise likholomo tse 12 tse teng).

Mohato oa 1: .col-sm-9

Mohato oa 2: .col-xs-8 .col-sm-6

Mohato oa 2: .col-xs-4 .col-sm-6

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

Ho laela ka kholomo

Fetola ha bonolo tatellano ea litšiea tsa rona tse .col-md-push-*hahelletsoeng kahare ka .col-md-pull-*litlelase tsa ho fetola.

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

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

Metsoako e fokolang le mefuta e fapaneng

Ntle le litlelase tsa grid tse ahiloeng esale pele bakeng sa meralo e potlakileng, Bootstrap e kenyelletsa mefuta e Nyenyane le metsoako bakeng sa ho iketsetsa meralo ea hau e bonolo, ea semantic kapele.

Lintho tse fapaneng

Lintho tse feto-fetohang li etsa qeto ea palo ea litšiea, bophara ba gutter, le sebaka sa lipotso tsa mecha ea litaba moo ho ka qalang litšiea tse phaphametseng. Re sebelisa tsena ho hlahisa lihlopha tsa marang-rang tse hlalositsoeng ka holimo, hammoho le li-mixins tse tloaelehileng tse thathamisitsoeng ka tlase.

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

Metsoako

Li-mixins li sebelisoa hammoho le mefuta e fapaneng ea grid ho hlahisa CSS ea semantic bakeng sa likholomo tsa grid ka bomong.

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

Tšebeliso ea mohlala

U ka fetola mefuta e fapaneng ho ea ho litekanyetso tsa hau tsa tloaelo, kapa u sebelise li-mixins ka boleng ba tsona ba kamehla. Mohlala ke ona oa ho sebelisa li-setting tsa kamehla ho theha sebopeho sa likholomo tse peli se nang le lekhalo lipakeng.

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

Lihlooho

Lihlooho tsohle tsa HTML, <h1>ho ea ho <h6>, li fumaneha. .h1ka .h6litlelase le tsona lia fumaneha, bakeng sa ha u batla ho ts'oana le setaele sa fonte sa sehlooho empa u ntse u batla hore mongolo oa hau o hlahisoe inline.

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

Etsa mongolo o bobebe, oa bobeli sehloohong sefe kapa sefe ka <small>tag e akaretsang kapa .smallsehlopha.

h1. Sehlooho sa Bootstrap Mongolo wa bobedi

h2. Sehlooho sa Bootstrap Mongolo wa bobedi

h3. Sehlooho sa Bootstrap Mongolo wa bobedi

h4. Sehlooho sa Bootstrap Mongolo wa bobedi

h5. Sehlooho sa Bootstrap Mongolo wa bobedi

h6. Sehlooho sa Bootstrap Mongolo wa 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>

Kopi ea 'mele

Boemo ba lefatše ka bophara ba Bootstrap font-sizeke 14px , bo nang line-heightle 1.428 . Sena se sebetsa <body>lirapeng tsohle. Ho feta moo, <p>(lirapa) li fumana moeli o ka tlase oa halofo ea bophahamo ba line-boemo ba tsona (10px ka ho sa feleng).

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

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

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

<p>...</p>

Kopi ea 'mele oa moetapele

Etsa hore serapa se hlahelle ka ho eketsa .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Ke mollis, e seng commodo luctus.

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

E hahiloe ka Ho Nyane

Sekala sa typographic se theiloe holim'a mefuta e 'meli e Nyane ka mefuta-futa.ka tlase : @font-size-basele @line-height-base. Ea pele ke boholo ba fonte e sebelisoang hohle 'me ea bobeli ke bophahamo ba mohala. Re sebelisa mefuta eo le lipalo tse bonolo ho theha marang-rang, li-padding, le bophahamo ba mela ea mefuta eohle ea rona le tse ling. Iketsetse tsona 'me u ikamahanye le Bootstrap.

Lintlha tsa mongolo tse ka har'a mela

Mongolo o tšoailoeng

Bakeng sa ho totobatsa sengoloa ka lebaka la bohlokoa ba sona moelelong o mong, sebelisa <mark>tag.

U ka sebelisa letšoao la letšoao hototobatsamongolo.

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

Mongolo o hlakotsoeng

Bakeng sa ho bonts'a li-block tsa mongolo tse hlakotsoeng sebelisa <del>tag.

~~Mola ona oa mongolo o reretsoe ho nkuoa e le mongolo o hlakotsoeng.~~

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

Sengoloa se hlabollang

Bakeng sa ho bonts'a li-block tsa mongolo tse seng li sa sebetse sebelisa <s>tag.

~~Mola ona oa mongolo o reretsoe ho nkuoa o se o sa nepahala.~~

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

Mongolo o kentsoeng

Bakeng sa ho bontša tlatsetso tokomaneng sebelisa <ins>tag.

Mola ona oa mongolo o reretsoe ho nkoa e le tlatsetso tokomaneng.

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

Mongolo o sehetsweng

Ho thalla mongolo sebelisa <u>tag.

Mola ona oa mongolo o tla fana ka mokhoa o thaliloeng

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

Sebelisa li-tag tsa khatiso tsa HTML tse nang le mekhoa e bobebe.

Mongolo o monyane

Bakeng sa ho nyenyefatsa ka har'a mola kapa li-block tsa mongolo, sebelisa <small>theke ho beha mongolo ho 85% ea boholo ba motsoali. Lihlooho tsa lihlooho li fumana tsa tsona font-sizebakeng sa sehlaha<small> likarolo tse behiloeng.

U ka sebelisa inline element .smallsebakeng sa efe kapa efe <small>.

Mola ona oa mongolo o reretsoe ho nkoa e le mongolo o motle.

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

Sebete

Bakeng sa ho totobatsa sekhechana sa mongolo ka boima bo boima ba fonte.

Sekhechana se latelang sa mongolo se ngotsoe joalo ka mongolo o motenya .

<strong>rendered as bold text</strong>

Mongolo o tšekaletseng

Bakeng sa ho totobatsa sekhechana sa mongolo ka mongolo o tšekaletseng.

Sekhechana se latelang sa mongolo se ngotsoe joalo ka mongolo o tšekaletseng .

<em>rendered as italicized text</em>

Lintlha tse ling

Ikutloe u lokolohile ho sebelisa <b>le <i>ho HTML5. <b>e reretsoe ho totobatsa mantsoe kapa lipoleloana ntle le ho fana ka bohlokoa bo eketsehileng ha <i>boholo e le ea lentsoe, mantsoe a theknoloji, joalo-joalo.

Lihlopha tsa ho tsamaisana

Hlophisa mongolo habonolo ho likarolo ka litlelase tsa tatellano ea mongolo.

Mongolo o tsamaellaneng le leqele.

Mongolo o tsepameng bohareng.

Mongolo o tsepameng ka ho le letona.

Mongolo o lokafalitsoeng.

Ha ho mongolo o phuthetsoeng.

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

Lihlopha tsa phetoho

Fetolela mongolo ka likarolo ka lihlopha tsa mongolo o moholo.

Mongolo o tlase.

Mongolo o moholo.

Mongolo o ngotsoeng ka litlhaku tse kholo.

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

Likgutsufatso

Ts'ebetsong e hlophisitsoeng ea HTML's <abbr>element bakeng sa khutsufatso le li-acronyms ho bonts'a mofuta o atolositsoeng ho hover. Likgutsufatso tse nang le titlesebopeho li na le moeli o ka tlase o nang le matheba a bobebe le sekhesa sa thuso ho hover, tse fanang ka moelelo o eketsehileng mabapi le hover le ho basebelisi ba mahlale a thusang.

Kgutsufatso ya motheo

Kgutsufatso ya lentsoe tšobotsi ke attr .

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

Boikemisetso ba ho qala

Eketsa .initialismho khutsufatso ea boholo ba fonte e nyane hanyane.

HTML ke ntho e ntle ka ho fetisisa ho tloha ha bohobe bo sehiloeng.

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

Liaterese

Hlahisa lintlha tsa ho ikopanya le moholo-holo ea haufi kapa sehlopha sohle sa mosebetsi. Boloka fomete ka ho qetella mela eohle ka <br>.

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

Lebitso le
felletseng [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>

Mantsoe a thibelang

Bakeng sa ho qotsa li-block tsa litaba tse tsoang mohloling o mong ka har'a tokomane ea hau.

Blockquote ea kamehla

Qetella HTML<blockquote> efe kapa efe joalo ka qotso. Bakeng sa mantsoe a qotsitsoeng ka kotloloho, re khothaletsa a .<p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pokello e felletseng e na le palo e kholo.

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

Likhetho tsa blockquote

Setaele le dikahare di fetoha bakeng sa diphapano tse bonolo tsa maemo a <blockquote>.

Ho reha mohloli

Kenya a <footer>bakeng sa ho tseba mohloli. Qetella lebitso la mosebetsi oa mohloli ka <cite>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pokello e felletseng e na le palo e kholo.

Motho ea tummeng ho Mohloli 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>

Lipontšo tse ling

Eketsa .blockquote-reversebakeng sa blockquote e nang le litaba tse tsamaellanang le tokelo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pokello e felletseng e na le palo e kholo.

Motho ea tummeng ho Mohloli Title

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

Manane

Ha ea laeloa

Lethathamo la lintho tseo tatellano e sa tsotelleng ka ho hlaka.

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

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

E laetsoe

Lethathamo la lintho tseo tatellano e bohlokoa ka ho hlaka.

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

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

Unstyled

Tlosa moeli oa kamehla list-stylele o ka ho le letšehali linthong tsa lenane (bana ba hona joale feela). Sena se sebetsa feela ho lenane la lintho tse fumanehang hanghang tsa bana , ho bolelang hore o tla hloka ho kenyelletsa sehlopha bakeng sa manane afe kapa afe a behiloeng.

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

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

E mocheng

Beha lintho tsohle tsa lethathamo moleng o le mong o nang display: inline-block;le mabone a mabone.

Lorem ipsum
Phasellus iaculis
Nulla volutpat

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

Tlhaloso

Lethathamo la mantsoe a nang le litlhaloso tse amanang le ona.

Manane a tlhaloso: Lethathamo la litlhaloso le nepahetse bakeng sa ho hlalosa mantsoe.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.; Donec id elit non mi porta gravida at eget metus.
Malesuada porta: Etiam porta sem malesuada magna mollis euismod.

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

Tlhaloso e tshekaletseng

Etsa mantsoe le litlhaloso ka ho <dl>latellana. E qala e behiloe joalo ka default <dl>s, empa ha navbar e hola, etsa joalo ka tsona.

Manane a tlhaloso: Lethathamo la litlhaloso le nepahetse bakeng sa ho hlalosa mantsoe.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.; Donec id elit non mi porta gravida at eget metus.
Malesuada porta: Etiam porta sem malesuada magna mollis euismod.
Felis euismod semper eget lacinia: Fusce dapibus, tellus ac cursus commodo, tor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

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

Ho fokotsa ka ho iketsa

Manane a litlhaloso a tšekaletseng a tla fokotsa mantsoe a malelele haholo hore a ka kena kholomong e ka ho le letšehali le text-overflow. Libopong tsa pono tse tšesaane, li tla fetohela ho sebopeho sa tlhophiso ea kamehla.

E mocheng

Qetella likotoana tse nyane tsa khoutu ka<code> .

Ka mohlala, <section>e lokela ho phutheloa joalo ka inline.

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

Kenyelletso ea mosebelisi

Sebelisa le<kbd> ho bonts'a keno eo hangata e kengoang ka keyboard.

Ho fetola li-directory, thaepa cde lateloe ke lebitso la directory.
Ho edita di-setting, 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>

Thibelo ea motheo

Sebelisa <pre>bakeng sa mela e mengata ea khoutu. Etsa bonnete ba hore u balehile masakaneng afe kapa afe a khouto bakeng sa phetolelo e nepahetseng.

<p>Mohlala oa mongolo mona...</p>

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

U ka khetha ho eketsa.pre-scrollable sehlopha ka boikhethelo, se tla beha bolelele ba 350px mme se fane ka y-axis scrollbar.

Lintho tse fapaneng

Bakeng sa ho bonts'a lintho tse fapaneng sebelisa <var>tag.

y = m x + b

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

Sephetho sa mohlala

Bakeng sa ho bonts'a li-block tsa sampole e hlahisoang ho tsoa lenaneong sebelisa <samp>tag.

Sengoloa sena se reretsoe ho nkuoa e le mohlala o tsoang ho lenaneo la komporo.

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

Mohlala oa motheo

Bakeng sa setaele sa mantlha - padding e bobebe le li-divider tse tšekaletseng feela - eketsa sehlopha sa mantlha .tableho eng kapa eng <table>. E kanna ea utloahala e le thata haholo, empa ka lebaka la ts'ebeliso e atileng ea litafole bakeng sa li-plugins tse ling joalo ka lialmanaka le batho ba khethang matsatsi, re khethile ho khetholla mekhoa ea rona ea litafole.

Tlhaloso ea tafole ea boikhethelo.
#	Lebitso la pele	Fane	Username
1	Tšoaea	Otto	@mdo
2	Jakobo	Thornton	@mafura
3	Larry	Nonyana	@twitter

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

Mela e methalo

Sebelisa .table-stripedho kenya liqoaha-striping moleng ofe kapa ofe oa tafole ka har'a <tbody>.

Khokahano ea sebatli

Litafole tse metsero li entsoe ka sekhetho sa :nth-childCSS, se sa fumaneheng ho Internet Explorer 8.

#	Lebitso la pele	Fane	Username
1	Tšoaea	Otto	@mdo
2	Jakobo	Thornton	@mafura
3	Larry	Nonyana	@twitter

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

Tafole e moeling

Eketsa .table-borderedbakeng sa meeli ka mahlakoreng 'ohle a tafole le lisele.

#	Lebitso la pele	Fane	Username
1	Tšoaea	Otto	@mdo
2	Jakobo	Thornton	@mafura
3	Larry	Nonyana	@twitter

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

Tsamaisa mela

Eketsa .table-hoverho nolofalletsa boemo ba hover holim'a mela ea tafole ka har'a <tbody>.

#	Lebitso la pele	Fane	Username
1	Tšoaea	Otto	@mdo
2	Jakobo	Thornton	@mafura
3	Larry	Nonyana	@twitter

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

Tafole e khutsitseng

Eketsa .table-condensedho etsa hore litafole li kopane haholoanyane ka ho khaola lisele tsa lisele ka halofo.

#	Lebitso la pele	Fane	Username
1	Tšoaea	Otto	@mdo
2	Jakobo	Thornton	@mafura
3	Larry Nonyana		@twitter

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

Lihlopha tsa maemo

Sebelisa litlelase tsa maemo ho mebala methalong ea litafole kapa liseleng ka bomong.

Sehlopha	Tlhaloso
`.active`	E sebelisa 'mala oa hover molaetseng kapa seleng e itseng
`.success`	E bontsha ketso e atlehileng kapa e ntle
`.info`	E supa phetoho kapa ketso e rutang e sa nke lehlakore
`.warning`	E bontša temoso e ka 'nang ea hloka ho eloa hloko
`.danger`	E supa ketso e kotsi kapa e ka bang mpe

#	Sehlooho sa khola	Sehlooho sa khola	Sehlooho sa khola
1	Likahare tsa kholomo	Likahare tsa kholomo	Likahare tsa kholomo
2	Likahare tsa kholomo	Likahare tsa kholomo	Likahare tsa kholomo
3	Likahare tsa kholomo	Likahare tsa kholomo	Likahare tsa kholomo
4	Likahare tsa kholomo	Likahare tsa kholomo	Likahare tsa kholomo
5	Likahare tsa kholomo	Likahare tsa kholomo	Likahare tsa kholomo
6	Likahare tsa kholomo	Likahare tsa kholomo	Likahare tsa kholomo
7	Likahare tsa kholomo	Likahare tsa kholomo	Likahare tsa kholomo
8	Likahare tsa kholomo	Likahare tsa kholomo	Likahare tsa kholomo
9	Likahare tsa kholomo	Likahare tsa kholomo	Likahare tsa 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>

Ho fetisa moelelo ho litheknoloji tse thusang

Ho sebelisa 'mala ho eketsa moelelo oa tafole kapa sele e le 'ngoe ho fana feela ka pontšo ea pono, e ke keng ea fetisetsoa ho basebelisi ba theknoloji e thusang - joalo ka libali tsa skrine. Netefatsa hore tlhahisoleseding e hlalosoang ke 'mala e hlakile ho tsoa ho litaba ka botsona (sengoliloeng se hlahang moleng o amehang oa tafole/sele), kapa se kenyelelitsoe ka mekhoa e meng, joalo ka mongolo oa tlatsetso o patiloeng le .sr-onlysehlopha.

Litafole tse arabelang

Theha litafole tse arabelang ka ho phuthela eng kapa eng .tableho .table-responsiveli etsa hore li tsamaee li tšekaletse lisebelisoa tse nyane (tlasa 768px). Ha u sheba ntho leha e le efe e kholo ho feta 768px ka bophara, u ke ke ua bona phapang ea letho litafoleng tsena.

Keketso e emeng e otlolohileng

Litafole tse arabelang li sebelisa overflow-y: hidden, e tlosang litaba life kapa life tse fetang bokatlase kapa lipheletsong tse kaholimo tsa tafole. Haholo-holo, sena se ka fokotsa menyetla ea ho theoha le li-widget tse ling tsa motho oa boraro.

Firefox le li-fieldsets

Firefox e na le setaele se sa hlakang sa lebala se kenyelletsang widthse sitisang tafole e arabelang. Sena se ke ke sa hlakoloa ntle le ts'ebetso e ikhethileng ea Firefox eo re sa faneng ka eona ho Bootstrap:

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

Ho fumana lintlha tse ling, bala karabo ena ea Stack Overflow .

#	Sehlooho sa tafole	Sehlooho sa tafole	Sehlooho sa tafole	Sehlooho sa tafole	Sehlooho sa tafole	Sehlooho sa tafole
1	Tafole sele	Tafole sele	Tafole sele	Tafole sele	Tafole sele	Tafole sele
2	Tafole sele	Tafole sele	Tafole sele	Tafole sele	Tafole sele	Tafole sele
3	Tafole sele	Tafole sele	Tafole sele	Tafole sele	Tafole sele	Tafole sele

#	Sehlooho sa tafole	Sehlooho sa tafole	Sehlooho sa tafole	Sehlooho sa tafole	Sehlooho sa tafole	Sehlooho sa tafole
1	Tafole sele	Tafole sele	Tafole sele	Tafole sele	Tafole sele	Tafole sele
2	Tafole sele	Tafole sele	Tafole sele	Tafole sele	Tafole sele	Tafole sele
3	Tafole sele	Tafole sele	Tafole sele	Tafole sele	Tafole sele	Tafole sele

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

Mohlala oa motheo

Litaolo tsa liforomo tsa motho ka mong li fumana setaele se itseng lefatšeng ka bophara. Lingoliloeng tsohle <input>, <textarea>, le <select>likarolo tse nang le .form-controltsona li hlophisitsoe width: 100%;ka mokhoa oa kamehla. Koahela lileibole le li-control ho .form-groupfumana sebaka se lekaneng.

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

Se ke oa kopanya lihlopha tsa lihlopha le lihlopha tsa ho kenya

Se ke oa kopanya lihlopha tsa lihlopha ka kotloloho le lihlopha tsa ho kenya letsoho . Ho e-na le hoo, beha sehlopha se kenyang ka hare ho sehlopha sa liforomo.

Foromo ea moleng

Eketsa .form-inlineforomong ea hau (e sa tlamehang ho ba a <form>) bakeng sa li-control tse tsamaellanang le leqele le li-inline-block. Sena se sebetsa feela ho liforomo tse ka har'a libaka tsa pono tse bophara ba 768px.

E kanna ea hloka bophara bo ikhethileng

Maikutlo le likhetho li width: 100%;sebelisitsoe ka mokhoa oa kamehla ho Bootstrap. Ka har'a liforomo tsa inline, re seta bocha hore width: auto;litsamaiso tse ngata li ka lula moleng o le mong. Ho ipapisitse le sebopeho sa hau, ho ka hlokahala bophara bo eketsehileng ba tloaelo.

Kenya lileibole kamehla

Babali ba skrini ba tla ba le bothata ka liforomo tsa hau haeba u sa kenyelle leibole bakeng sa mongolo o mong le o mong. Bakeng sa liforomo tsena tsa inline, u ka pata lileibole u sebelisa .sr-onlysehlopha. Ho na le mekhoa e meng ea ho fana ka leibole bakeng sa mahlale a thusang, joalo ka aria-label, aria-labelledbykapa titletšobotsi. Haeba ha ho le e 'ngoe ea tsena e teng, babali ba skrineng ba ka sebelisa placeholdertšobotsi, haeba ba le teng, empa hlokomela hore tšebeliso ea placeholdersebaka sa mekhoa e meng ea ho ngola ha e ea eletsoa.

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

Sebopeho se otlolohileng

Sebelisa lihlopha tse boletsoeng esale pele tsa grid ea Bootstrap ho hokahanya lileibole le lihlopha tsa taolo ea liforomo ka mokhoa o otlolohileng ka ho kenyelletsa .form-horizontalforomo (e sa tlamehang ho ba <form>). Ho etsa joalo ho fetola .form-groups ho sebetsa joalo ka mela ea marang-rang, kahoo ha ho hlokahale hore .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>

Litaolo tse tšehelitsoeng

Mehlala ea li-control tse tloaelehileng tsa liforomo tse tšehetsoeng ka sebopeho sa sebopeho sa mohlala.

Lintho tse kenang

Taolo ea mefuta e atileng haholo, likarolo tsa mongolo tse thehiloeng ho mongolo. E kenyelletsa tšehetso bakeng sa mefuta eohle ea HTML5: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, le color.

Mofuta oa phatlalatso oa hlokahala

Litlhahiso li tla ngoloa ka botlalo ha feela li typephatlalalitsoe ka nepo.

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

Kena lihlopha

Ho kenya mongolo kapa likonopo tse kopaneng pele le/kapa ka mor'a mongolo ofe kapa ofe <input>, hlahloba karolo ea sehlopha sa ho kenya .

Textarea

Taolo ea foromo e ts'ehetsang mela e mengata ea mongolo. Fetola rowstšobotsi ha ho hlokahala.

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

Li-checkbox le liea-le-moea

Li-checkbox ke tsa ho khetha khetho e le 'ngoe kapa tse' maloa lethathamong, ha liea-le-moea e le tsa ho khetha khetho e le 'ngoe ho tse ngata.

Mabokose le liea-le-moea tse holofetseng lia tšehetsoa, empa ho fana ka "cursor" e "sa lumelloeng" holima motsoali <label>, o tla hloka ho kenya .disabledsehlopha ho motsoali .radio, .radio-inline, .checkbox, kapa .checkbox-inline.

Ea kamehla (e phuthetsoe)

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

Mabokose a marang-rang le liea-le-moea

Sebelisa .checkbox-inlinekapa .radio-inlinelitlelase letotong la li-checkbox kapa liea-le-moea bakeng sa li-control tse hlahang moleng o le mong.

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

Mabokose le liea-le-moea tse se nang mongolo

Haeba ha u na mongolo ka har'a <label>, tlhahiso e behiloe ka tsela eo u neng u ka e lebella. Hajoale e sebetsa feela ho li-checkbox le liea-le-moea tse seng molaong. Hopola ho fana ka mofuta o mong oa leibole bakeng sa mahlale a thusang (mohlala, ho sebelisa 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>

Khetha

Hlokomela hore limmapa tse ngata tse khethiloeng - e leng Safari le Chrome - li na le likhutlo tse pota-potileng tse ke keng tsa fetoloa ka border-radiusthepa.

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

Bakeng sa <select>litsamaiso tse nang le multipletšobotsi, likhetho tse ngata li hlahisoa ka mokhoa oa kamehla.

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

Taolo e tsitsitseng

Ha o hloka ho beha mongolo o hlakileng haufi le leibole ea foromo ka har'a foromo, sebelisa .form-control-staticsehlopha ho <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 ba ho tsepamisa maikutlo

Re tlosa outlinelitaele tsa kamehla litaolong tsa mefuta e meng ebe re sebelisa a box-shadowsebakeng sa eona bakeng sa :focus.

`:focus`Boemo ba demo

Mohlala o ka holimo o sebelisa mekhoa e tloahelehileng litokomaneng tsa rona ho bontša :focusboemo ba .form-control.

Boemo ba bokooa

Kenya disabledsemelo sa boolean ho se kentsoeng ho thibela litšebelisano tsa basebelisi. Lisebelisoa tse holofetseng li bonahala li le bobebe ebe li kenya not-allowedsekhesa.

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

Li-fieldsets tse holofetseng

Kenya disabledtšobotsi ho a <fieldset>ho tima litsamaiso tsohle ka har'a <fieldset>hang-hang.

Caveat mabapi le tshebetso ya kgokahanyo ea`<a>`

Ka nako e sa lekanyetsoang, libatli li tla tšoara litsamaiso tsohle tsa mofuta oa tlhaho ( <input>, <select>le <button>likarolo ) ka har'a sesebelisoa se <fieldset disabled>holofalitsoeng, ho thibela ho sebelisana ha keyboard le mouse ho tsona. Leha ho le joalo, haeba foromo ea hau e kenyelletsa le <a ... class="btn btn-*">likarolo, tsena li tla fuoa feela mokhoa oa pointer-events: none. Joalo ka ha ho boletsoe karolong e mabapi le boemo ba batho ba holofetseng bakeng sa likonopo (haholo-holo karolong e ka tlase bakeng sa likarolo tsa ankora), thepa ena ea CSS ha e e-so be boemong ba maemo ebile ha e e-so tšehetsoe ka botlalo ho Opera 18 le ka tlase, kapa ho Internet Explorer 11, 'me e hapuoe. thibela basebelisi ba keyboard ho tsepamisa maikutlo kapa ho kenya lihokelo tsena tšebetsong. Kahoo ho bolokeha, sebelisa JavaScript e tloaelehileng ho tima lihokelo tse joalo.

Khokahano ea sebatli

Leha Bootstrap e tla sebelisa mekhoa ena ho libatli tsohle, Internet Explorer 11 le ka tlase ha li tšehetse disabledtšobotsi ka botlalo ho <fieldset>. Sebelisa JavaScript e tloaelehileng ho tima "fieldset" ho libatli tsena.

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

E bala feela

Kenya readonlysemelo sa boolean ho se kentsweng ho thibela phetoho ya boleng ba se kentsweng. Melaetsa ea ho bala feela e bonahala e le bobebe (feela joalo ka lintho tse kentsoeng tse koetsoeng), empa boloka khesara e tloaelehileng.

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

Mongolo oa thuso

Thibela mongolo oa thuso bakeng sa ho laola liforomo.

Ho amahanya mongolo oa thuso le li-control tsa sebopeho

Mongolo oa thuso o lokela ho amahanngoa ka ho hlaka le taolo ea foromo eo e amanang le ho sebelisa aria-describedbysemelo. Sena se tla etsa bonnete ba hore litheknoloji tse thusang - joalo ka libali tsa skrine - li tla phatlalatsa mongolo ona oa thuso ha mosebelisi a tsepamisitse maikutlo kapa a kena 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>

E bolela ho netefatsa

Bootstrap e kenyelletsa mekhoa ea netefatso bakeng sa phoso, temoso, le maemo a katleho ho taolo ea liforomo. Ho sebelisa, eketsa .has-warning, .has-error, kapa .has-successho element element. Any .control-label, .form-control, 'me .help-blockka har'a karolo eo e tla fumana mekhoa ea netefatso.

Ho fetisetsa boemo ba netefatso ho litheknoloji tse thusang le basebelisi ba sa boneng mebala

Ho sebelisa mekhoa ena ea ho netefatsa ho bontša boemo ba taolo ea foromo ho fana feela ka pontšo ea ponahalo, e thehiloeng ho mebala, e ke keng ea fetisetsoa ho basebelisi ba theknoloji e thusang - joalo ka libali tsa skrine - kapa ho basebelisi ba sa boneng mebala.

Netefatsa hore ho fanoe ka sesupo se seng sa naha. Mohlala, o ka kenyelletsa leseli mabapi le boemo ho sengoloa sa taolo ea sebopeho <label>(joalo ka ha ho le joalo mohlaleng o latelang oa khoutu), kenyelletsa Glyphicon (e nang le mongolo o mong o nepahetseng o sebelisang .sr-onlysehlopha - bona mehlala ea Glyphicon ), kapa ka ho fana ka thuso e eketsehileng thibela mongolo . Haholo-holo bakeng sa litheknoloji tse thusang, li-control tse sa sebetseng li ka fuoa aria-invalid="true"tšobotsi.

<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 li-icon tsa boikhethelo

U ka boela ua eketsa li-icon tsa boikhethelo ka ho kenyelletsa .has-feedbackle letšoao le nepahetseng.

Matšoao a maikutlo a sebetsa feela ka <input class="form-control">likarolo tsa mongolo.

Li-icon, lileibole le lihlopha tsa ho kenya

Ho hlokahala hore ho behoe li-icon tsa maikutlo ka letsoho bakeng sa lintho tse kentsoeng ntle le leibole le bakeng sa lihlopha tse kenyang tse nang le tlatsetso ka ho le letona. U khothaletsoa ka matla ho fana ka lileibole bakeng sa lintlha tsohle bakeng sa mabaka a phihlello. Haeba u lakatsa ho thibela lileibole ho hlaha, li pate le .sr-onlysehlopha. Haeba u tlameha ho etsa ntle le lileibole, fetola topboleng ba letšoao la maikutlo. Bakeng sa lihlopha tse kenyang, fetola rightboleng ho boleng bo loketseng ba pixel ho latela bophara ba addon ea hau.

Ho fetisa moelelo oa letšoao ho litheknoloji tse thusang

Ho etsa bonnete ba hore litheknoloji tse thusang - joalo ka libali tsa skrineng - li fetisa moelelo oa setšoantšo ka nepo, mongolo o mong o patiloeng o tlameha ho kenyelletsoa .sr-onlysehlopheng 'me o amahanngoa ka ho hlaka le taolo ea foromo eo e amanang le ho e sebelisa aria-describedby. Ntle le moo, etsa bonnete ba hore moelelo (mohlala, taba ea hore ho na le tlhokomeliso bakeng sa karolo e itseng ea mongolo) o hlahisoa ka mokhoa o mong, joalo ka ho fetola mongolo oa 'nete <label>o amanang le taolo ea sebopeho.

Le ge mehlala ye e latelago e šetše e bolela ka seemo sa netefatšo ya ditaolo tša dibopego ka go fapana mo <label>sengwalong ka bosona, thekniki ye ya ka godimo (go šomiša .sr-onlysengwalo le aria-describedby) e kenyeleditšwe merero ya go swantš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>

Li-icon tsa boikhethelo ka mefuta e otlolohileng le e kahare

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

Li-icon tsa boikhethelo tse nang le `.sr-only`lileibole tse patiloeng

Haeba u sebelisa .sr-onlysehlopha ho pata liforomo tsa taolo <label>(ho fapana le ho sebelisa likhetho tse ling tsa ho ngola, joalo ka aria-labelsemelo), Bootstrap e tla ikamahanya le maemo a aekhone hang ha e se e kentsoe.

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

Beha bophahamo u sebelisa litlelase joalo ka .input-lg, 'me u behe bophara u sebelisa lihlopha tsa kholomo tsa grid joalo ka .col-lg-*.

Tekanyo ea bophahamo

Etsa li-control tse telele kapa tse khuts'oane tse tsamaellanang le boholo ba likonopo.

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

Mefuta e otlolohileng ea lihlopha tsa boholo

Ka potlako lileibole tsa boholo le ho theha li-control ka hare .form-horizontalka ho eketsa .form-group-lgkapa .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>

Tekanyo ea kholomo

Koaela lintho tse kenang ka har'a likholomo tsa grid, kapa ntho leha e le efe e tloaelehileng ea motsoali, ho tiisa bophara bo lakatsehang habonolo.

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

Li-tag tsa konopo

Sebelisa lihlopha tsa likonopo ho <a>, <button>, kapa <input>element.

<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šebeliso e ikhethileng ea maemo

Leha li-button class li ka sebelisoa <a>le <button>likarolo, ke <button>likarolo feela tse tšehetsoang ka har'a likarolo tsa rona tsa nav le navbar.

Lihokelo tse sebetsang joalo ka likonopo

Haeba <a>likarolo li sebelisoa ho sebetsa e le likonopo - ho qala ts'ebetso ea leqephe, ho e-na le ho ea tokomaneng e 'ngoe kapa karolo e ka har'a leqephe la hona joale - li lokela ho fuoa hape e loketseng role="button".

Phano ea sebatli

Joalo ka mokhoa o motle, re khothaletsa haholo ho sebelisa <button>element ha ho khoneha ho etsa bonnete ba hore o tsamaisana le phetolelo ea sebatli.

Har'a lintho tse ling, ho na le kokoanyana ho Firefox <30 e re thibelang ho beha li-buttons line-heighttsa <input>-based, e leng se etsang hore li se ke tsa tšoana hantle le bophahamo ba likonopo tse ling ho Firefox.

Dikgetho

Sebelisa litlelase life kapa life tse fumanehang ho etsa konopo e hlophisitsoeng kapele.

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

Ho fetisa moelelo ho litheknoloji tse thusang

Ho sebelisa 'mala ho eketsa moelelo oa konopo ho fana feela ka pontšo ea pono, e ke keng ea fetisetsoa ho basebelisi ba theknoloji e thusang - joalo ka libali tsa skrine. Netefatsa hore tlhahisoleseding e hlalosoang ke 'mala e hlakile ho tsoa ho litaba ka boeona (sengoliloeng se bonahalang sa konopo), kapa se kenyelelitsoe ka mekhoa e meng, joalo ka mongolo o eketsehileng o patiloeng le .sr-onlysehlopha.

Boholo

U batla likonopo tse kholoanyane kapa tse nyane? Kenya .btn-lg, .btn-sm, kapa .btn-xsbakeng sa boholo bo eketsehileng.

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

Etsa likonopo tsa "block level" - tse fetang bophara ba motsoali - ka ho eketsa .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 bo sebetsang

Likonopo li tla hlaha li hatisitsoe (ka bokamorao bo lefifi, moeli o motšo, le moriti o kenang) ha o sebetsa. Bakeng sa <button>likarolo, sena se etsoa ka :active. Bakeng sa <a>likarolo, e etsoa ka .active. Leha ho le joalo, u ka sebelisa .activeho <button>s ('me u kenyelle aria-pressed="true"tšobotsi) haeba u hloka ho pheta boemo bo sebetsang ka mokhoa oa lenaneo.

Karolo ea konopo

Ha ho na tlhoko ea ho eketsa :activekaha ke sehlopha sa pseudo, empa haeba u hloka ho qobella ponahalo e ts'oanang, tsoela pele 'me u kenye .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>

Anchor element

Kenya .activesehlopha ho <a>likonopo.

Sehokelo sa mantlha Sehokelo

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

Etsa hore likonopo li shebahale li sa tobetse ka ho li fifala ka opacity.

Karolo ea konopo

Kenya disabledtšobotsi ho <button>likonopo.

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

Khokahano ea sebatli

Haeba u eketsa disabledtšobotsi ho <button>, Internet Explorer 9 le ka tlase e tla hlahisa mongolo o moputsoa ka moriti o mobe oa mongolo oo re sitoang ho o lokisa.

Anchor element

Kenya .disabledsehlopha ho <a>likonopo.

Sehokelo sa mantlha Sehokelo

<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 sebelisa .disablede le sehlopha sa lisebelisoa mona, se ts'oanang le .activesehlopha se tloaelehileng, kahoo ha ho hlokahale prefix.

Khokahano ea ts'ebetso ea caveat

Sehlopha sena se sebelisa pointer-events: noneho leka ho tima ts'ebetso ea lihokelo tsa <a>s, empa thepa eo ea CSS ha e so tloaelehe ebile ha e e-so tšehetsoe ka botlalo ho Opera 18 le ka tlase, kapa ho Internet Explorer 11. Ho feta moo, esita le ho libatli tse tšehetsang pointer-events: none, keyboard. navigation e lula e sa amehe, ho bolelang hore basebelisi ba boneng ba keyboard le basebelisi ba mahlale a thusang ba ntse ba tla khona ho kenya likhokahanyo tsena. Kahoo ho bolokeha, sebelisa JavaScript e tloaelehileng ho tima lihokelo tse joalo.

Litšoantšo tse arabelang

Litšoantšo tse ho Bootstrap 3 li ka etsoa hore li arabele ka ho kenyelletsa .img-responsivesehlopha. Sena se sebetsa max-width: 100%;, height: auto;le display: block;ho setšoantšo e le hore se lekane hantle ho karolo ea motsoali.

Ho beha litšoantšo tse sebelisang .img-responsivesehlopha, sebelisa .center-blockho e-na le .text-center. Sheba karolo ea litlelase tsa bathusi bakeng sa lintlha tse ling mabapi le .center-blocktšebeliso.

Litšoantšo tsa SVG le IE 8-10

Ho Internet Explorer 8-10, litšoantšo tsa SVG tse nang .img-responsivele boholo bo sa lekaneng. Ho lokisa sena, eketsa width: 100% \9;moo ho hlokahalang. Bootstrap ha e sebelise sena ka bo eona kaha e baka mathata ho lifomate tse ling tsa litšoantšo.

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

Libopeho tsa setšoantšo

Kenya litlelase ho <img>element ho seta litšoantšo habonolo morerong ofe kapa ofe.

Khokahano ea sebatli

Hopola hore Internet Explorer 8 ha e na tšehetso bakeng sa likhutlo tse chitja.

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

Mebala ea maemo

Hlahisa moelelo ka mebala ka lihlopha tse 'maloa tsa lisebelisoa tsa khatiso. Tsena li kanna tsa sebelisoa ho lihokelo mme li tla fifala hover joalo ka mekhoa ea rona ea lihokelo tsa kamehla.

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

Nullam id dolor id nibh ultricies vehicula ut id elit.

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

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

Etiam porta sem malesuada magna mollis euismod.

E entse hore ullamcorper nulla non metus auctor fringilla.

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

Ho sebetsana le lintlha tse khethehileng

Ka linako tse ling lihlopha tsa khatiso li ke ke tsa sebelisoa ka lebaka la ho khetheha ha mokhethoa e mong. Maemong a mangata, tharollo e lekaneng ke ho phuthela mongolo oa hau ka <span>sehlopha.

Ho fetisa moelelo ho litheknoloji tse thusang

Ho sebelisa mebala ho eketsa moelelo ho fana feela ka pontšo ea pono, e ke keng ea fetisetsoa ho basebelisi ba theknoloji e thusang - joalo ka sebali sa skrine. Netefatsa hore tlhahisoleseling e hlahisoang ke 'mala e hlakile ho tsoa ho litaba ka botsona (mebala ea maemo e sebelisoa feela ho tiisa moelelo o seng o ntse o le teng mongolong/markup), kapa e kenyellelitsoe ka mekhoa e meng, joalo ka mongolo o mong o patiloeng le .sr-onlysehlopha. .

Semelo sa maemo

Joalo ka litlelase tsa mebala ea mongolo oa maemo, beha habonolo bokamorao ba element ho sehlopha sefe kapa sefe sa maemo. Likarolo tsa anchor li tla fifala ha li hover, joalo ka litlelase tsa mongolo.

Nullam id dolor id nibh ultricies vehicula ut id elit.

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

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

Etiam porta sem malesuada magna mollis euismod.

E entse hore ullamcorper nulla non metus auctor fringilla.

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

Ho sebetsana le lintlha tse khethehileng

Ka nako e 'ngoe litlelase tsa maemo a holimo ha li khone ho sebelisoa ka lebaka la khetho e 'ngoe. Maemong a mang, mokhoa o lekaneng oa ho sebetsa ke ho thatela litaba tsa element ea hau ka <div>sehlopha.

Ho fetisa moelelo ho litheknoloji tse thusang

Joalo ka mebala ea maemo , etsa bonnete ba hore moelelo ofe kapa ofe o fetisoang ka 'mala le ona o hlahisoa ka mokhoa o sa hlahisoeng.

Koala letšoao

Sebelisa lets'oao le akaretsang la ho koala ho qhelela litaba tse kang mekhoa le litlhokomeliso.

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

Carets

Sebelisa li-carets ho bonts'a ts'ebetso ea ho theoha le tataiso. Hlokomela hore "default caret" e tla khutlela morao ka bo eona ho li-menu tsa dropup .

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

Ho phaphamala kapele

Phaphamisa ntho ka ho le letšehali kapa ho le letona ka sehlopha. !importante kenyelelitsoe ho qoba litaba tse khethehileng. Lihlopha li ka boela tsa sebelisoa e le metsoako.

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

Li-block tsa litaba tse bohareng

Beha ntlha ho display: blockle bohareng ka margin. E fumaneha e le motsoako 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();
}

Hlakisa

Hlakola ha bonolo floats ka ho eketsa .clearfix karolo ea motsoali . E sebelisa micro clearfix joalo ka ha e tumme ke Nicolas Gallagher. E ka boela ea sebelisoa e le 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();
}

Ho bontša le ho pata litaba

Qobella ho bonts'oa kapa ho patoa ( ho kenyeletsoa le babali ba skrineng ) ka ts'ebeliso ea .showle .hiddenlitlelase. Litlelase tsena li sebelisa !importantho qoba likhohlano tse ikhethang, joalo ka liphaphatha tse potlakileng . Li fumaneha feela bakeng sa toggling ea block level. Li ka boela tsa sebelisoa e le metsoako.

.hidee teng, empa ha se kamehla e amang babali ba skrine 'me e theohile joalo ka v3.0.1 . Sebelisa .hiddenkapa .sr-onlyho fapana le hoo.

Ho feta moo, .invisiblee ka sebelisoa ho fetola ponahalo ea ntho feela, ho bolelang hore displayha e ea fetoloa mme element e ntse e ka ama phallo ea 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();
}

Sebali sa skrine le litaba tsa ho sesa ka keyboard

Pata ntho ho lisebelisoa tsohle ntle le sebali sa skrine se nang le .sr-only. Kopanya .sr-onlyle .sr-only-focusableho bontša element hape ha e tsepamisitsoe maikutlo (mohlala, ke mosebelisi oa keyboard-feela). Hoa hlokahala ho latela mekhoa e metle ea phihlello . E ka boela ea sebelisoa e le metsoako.

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

Phetoho ea setšoantšo

Sebelisa .text-hidesehlopha kapa mixin ho thusa ho fetola mongolo oa element ka setšoantšo sa bokamorao.

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

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

Bakeng sa nts'etsopele e potlakileng ea ho sebelisa mehala, sebelisa litlelase tsena tsa ts'ebeliso ho bonts'a le ho pata litaba ka sesebelisoa ka potso ea media. Ho boetse ho kenyelelitsoe litlelase tsa lisebelisoa bakeng sa ho fetola litaba ha li hatisoa.

Leka ho sebelisa tsena ka mokhoa o fokolang 'me u qobe ho theha mefuta e fapaneng ka ho felletseng ea sebaka se le seng. Ho e-na le hoo, li sebelise ho tlatselletsa tlhahiso ea sesebelisoa ka seng.

Lihlopha tse fumanehang

Sebelisa sehlopha se le seng kapa se kopantsoeng sa lihlopha tse teng bakeng sa ho fetola litaba ho pholletsa le libaka tsa ho shebella.

	Lisebelisoa tse nyane tse eketsehilengMehala (<768px)	Lisebelisoa tse nyaneMatlapa (≥768px)	Lisebelisoa tse maharengLi-desktop (≥992px)	Lisebelisoa tse kholoLi-desktop (≥1200px)
`.visible-xs-*`	Tse bonahalang	E patiloe	E patiloe	E patiloe
`.visible-sm-*`	E patiloe	Tse bonahalang	E patiloe	E patiloe
`.visible-md-*`	E patiloe	E patiloe	Tse bonahalang	E patiloe
`.visible-lg-*`	E patiloe	E patiloe	E patiloe	Tse bonahalang
`.hidden-xs`	E patiloe	Tse bonahalang	Tse bonahalang	Tse bonahalang
`.hidden-sm`	Tse bonahalang	E patiloe	Tse bonahalang	Tse bonahalang
`.hidden-md`	Tse bonahalang	Tse bonahalang	E patiloe	Tse bonahalang
`.hidden-lg`	Tse bonahalang	Tse bonahalang	Tse bonahalang	E patiloe

Ho tloha ka v3.2.0, litlelase tsa sebaka se seng le se seng sa khefutso li tla ka mefuta e meraro, e le 'ngoe bakeng sa boleng bo bong le bo bong ba thepa ea .visible-*-*CSS e thathamisitsoeng ka tlase.display

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

Kahoo, bakeng sa xsli-skrini tse nyenyane ( ) tse eketsehileng, mohlala, .visible-*-*lihlopha tse teng ke: .visible-xs-block, .visible-xs-inline, le .visible-xs-inline-block.

Litlelase .visible-xs, .visible-sm, .visible-md, 'me .visible-lgli teng, empa li tlositsoe ho tloha v3.2.0 . Li batla li lekana le .visible-*-block, ntle le ka linyeoe tse khethehileng tsa <table>toggling-element element.

Litlelase tsa khatiso

Joalo ka litlelase tse tloaelehileng tse arabelang, sebelisa tsena ho fetolela litaba hore li hatisoe.

Lihlopha	Sebatli	Hatisa
`.visible-print-block` `.visible-print-inline` `.visible-print-inline-block`	E patiloe	Tse bonahalang
`.hidden-print`	Tse bonahalang	E patiloe

Sehlopha le sona se .visible-printteng empa ha se sa sebetsa joalo ka v3.2.0 . E batla e lekana le .visible-print-block, ntle le ka linyeoe tse khethehileng tsa <table>likarolo tse amanang.

Linyeoe tsa liteko

Fetola boholo ba sebatli sa hau kapa kenya lisebelisoa tse fapaneng ho leka likarolo tsa ts'ebeliso e sebetsang.

E bonahala ho...

Lits'oants'o tse tala li bonts'a hore ntho e ea bonahala sebakeng sa hau sa pono sa hajoale.

E nyane haholo ✔ E bonahala ho x-e nyane

Nyenyane ✔ E bonahala ho tse nyane

Mahareng ✔ E bonahala bohareng

E kholoanyane ✔ E bonahala ka boholo

Tse ding tse nyane le tse nyane ✔ E bonahala ho x-e nyane le e nyane

Bohareng le bo boholo ✔ E bonahala ho tse mahareng le tse kholo

Tse nyane le tse mahareng tse eketsehileng ✔ E bonahala ho x-e nyane le e mahareng

Tse nyane le tse kgolo ✔ E bonahala ho tse nyane le tse kholo

E nyane haholo le e kgolo ✔ E bonahala ho x-e nyane le e kholo

Tse nyane le tse mahareng ✔ E bonahala ho tse nyane le tse mahareng

E patiloe ho...

Mona, li-checkmark tse tala li boetse li bonts'a hore karolo e patiloe sebakeng sa hau sa pono sa hajoale.

E nyane haholo ✔ E patiloe ho x-e nyane

Nyenyane ✔ E patiloe ho tse nyane

Mahareng ✔ E patiloe sebakeng se bohareng

E kholoanyane ✔ E patiloe holim'a tse kholo

Tse ding tse nyane le tse nyane ✔ E patiloe ho x-e nyane le e nyane

Bohareng le bo boholo ✔ E patiloe ho tse mahareng le tse kholo

Tse nyane le tse mahareng tse eketsehileng ✔ E patiloe ho x-e nyane le e mahareng

Tse nyane le tse kgolo ✔ E patiloe ho tse nyane le tse kholo

E nyane haholo le e kgolo ✔ E patiloe ho x-e nyane le e kholo

Tse nyane le tse mahareng ✔ E patiloe ho tse nyane le tse mahareng

Bootstrap's CSS e hahiloe ho Less, preprocessor e nang le ts'ebetso e eketsehileng joalo ka mefuta-futa, li-mixins, le mesebetsi ea ho bokella CSS. Ba batlang ho sebelisa mohloli Lifaele tse fokolang ho e-na le lifaele tsa rona tse hlophisitsoeng tsa CSS ba ka sebelisa mefuta e mengata ea mefuta-futa le metsoako eo re e sebelisang ho pholletsa le moralo.

Mefuta e fapaneng ea li-grid le metsoako e koahetsoe ka har'a karolo ea Grid system .

Ho kopanya Bootstrap

Bootstrap e ka sebelisoa bonyane ka litsela tse peli: ka CSS e hlophisitsoeng kapa ka mohloli Lifaele tse fokolang. Ho bokella lifaele tse Nyane, sheba karolo ea Ho Qala bakeng sa mokhoa oa ho seta tikoloho ea hau ea ntlafatso ho tsamaisa litaelo tse hlokahalang.

Lisebelisoa tsa ho bokella batho ba bang li ka sebetsa le Bootstrap, empa ha li tšehetsoe ke sehlopha sa rona sa mantlha.

Lintho tse fapaneng

Liphetoho li sebelisoa morerong oohle e le mokhoa oa ho beha bohareng le ho arolelana boleng bo sebelisoang hangata joalo ka mebala, sebaka, kapa mekotla ea litlhaku. Bakeng sa karohano e felletseng, ka kopo bona Customizer .

Mebala

Sebelisa habonolo merero e 'meli ea mebala: grayscale le semantic. Mebala e boputsoa e fana ka phihlello e potlakileng ho meriti e sebelisoang hangata ea botsho ha semantic e kenyelletsa mebala e fapaneng e abetsoeng maemo a bohlokoa a maemo.

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

Sebelisa leha e le efe ea mefuta ena ea mebala kamoo e leng kateng kapa u e fe hape ho mefuta e meng e nang le moelelo bakeng sa morero oa hau.

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

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

Sekafola

Liphetoho tse 'maloa bakeng sa ho etsa lintho tsa bohlokoa ka potlako tsa skeleton ea sebaka sa hau sa marang-rang.

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

Lihokelo

Beha lihokelo tsa hau habonolo ka 'mala o nepahetseng ka boleng bo le bong 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 hore lisebelisoa li @link-hover-colorsebelisa ts'ebetso, sesebelisoa se seng se makatsang se tsoang ho Less, ho iketsetsa 'mala o nepahetseng oa hover. U ka sebelisa darken, lighten, saturate, le desaturate.

Tlhaloso ea litlhaku

Beha mongolo oa hau habonolo, boholo ba mongolo, moetapele, le tse ling ka mefuta e 'maloa e potlakileng. Bootstrap e sebelisa tsena hape ho fana ka metsoako e bonolo ea typographic.

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

Litšoantšo

Mefuta e 'meli e potlakileng ea ho etsa sebaka le lebitso la faele la litšoantšo tsa hau.

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

Likaroloana

Lisebelisoa ho pholletsa le Bootstrap li sebelisa mefuta e meng ea kamehla bakeng sa ho beha litekanyetso tse tloaelehileng. Mona ke tse sebelisoang haholo.

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

Metsoako ea barekisi

Metsoako ea barekisi ke metsoako e thusang ho ts'ehetsa libatli tse ngata ka ho kenyelletsa li-prefixes tsohle tse amehang ho CSS ea hau e hlophisitsoeng.

Boholo ba mabokose

Seta bocha mofuta oa lebokose la likarolo tsa hau ka motsoako o le mong. Bakeng sa moelelo oa taba, bona sengoloa sena se thusang ho tsoa ho Mozilla .

Motsoako o theohile joalo ka v3.2.0 , ka kenyelletso ea Autoprefixer. Ho boloka ho lumellana ka morao, Bootstrap e tla tsoelapele ho sebelisa mixin ka hare ho 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;
}

Likhutlo tse chitja

Kajeno libatli tsohle tsa sejoale-joale li tšehetsa thepa e sa hlophisoang pele border-radius. Ka hona, ha ho na .border-radius()mixin, empa Bootstrap e kenyelletsa likhutšoane bakeng sa ho pota-pota likhutlo tse peli ka lehlakoreng le itseng la ntho.

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

Lebokose (Drop) meriti

Haeba bamameli ba hau ba sebelisang libatli le lisebelisoa tsa morao-rao tse kholo ka ho fetisisa, etsa bonnete ba hore u sebelisa box-shadowthepa ka bobona. Haeba o hloka tšehetso bakeng sa lisebelisoa tsa khale tsa Android (pre-v4) le iOS (pele ho iOS 5), sebelisa motsoako o lahliloeng ho nka sehlongwapele se hlokahalang-webkit .

Motsoako o theohile ho tloha v3.1.0 , kaha Bootstrap ha e tšehetse ka molao li-platform tse siiloeng ke nako tse sa tšehetseng thepa e tloaelehileng. Ho boloka tšebelisano-morao, Bootstrap e tla tsoelapele ho sebelisa mixin kahare ho fihlela Bootstrap v4.

Etsa bonnete ba hore u sebelisa rgba()mebala ka har'a liriti tsa lebokose la hau e le hore li kopane ka mokhoa o hlakileng ka hohle kamoo ho ka khonehang le semelo.

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

Liphetoho

Metsoako e mengata bakeng sa ho feto-fetoha ha maemo. Beha lintlha tsohle tsa phetoho ka e le 'ngoe, kapa bolela tieho le nako e fapaneng kamoo ho hlokahalang.

Li-mixins li tlositsoe ho tloha v3.2.0 , ka kenyelletso ea Autoprefixer. Ho boloka ho lumellana ka morao, Bootstrap e tla tsoelapele ho sebelisa li-mixins ka hare ho 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;
}

Liphetoho

Fetola, seka, fetolela (sutha), kapa khopa ntho efe kapa efe.

Li-mixins li tlositsoe ho tloha v3.2.0 , ka kenyelletso ea Autoprefixer. Ho boloka ho lumellana ka morao, Bootstrap e tla tsoelapele ho sebelisa li-mixins ka hare ho 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;
}

Lipopae

Motsoako o le mong oa ho sebelisa lisebelisoa tsohle tsa animation tsa CSS3 phatlalatsong e le 'ngoe le metsoako e meng bakeng sa thepa ka bomong.

Li-mixins li tlositsoe ho tloha v3.2.0 , ka kenyelletso ea Autoprefixer. Ho boloka ho lumellana ka morao, Bootstrap e tla tsoelapele ho sebelisa li-mixins ka hare ho 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;
}

Opacity

Beha opacity bakeng sa libatli tsohle 'me u fane ka mokhoa oa filterho khutlela morao bakeng sa IE8.

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

Mongolo oa sebapali

Fana ka moelelo oa taolo ea liforomo ka har'a sebaka se seng le se seng.

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

Likholomo

Hlahisa likholomo ka CSS ka har'a element e le 'ngoe.

.content-columns(@width; @count; @gap) {
  -webkit-column-width: @width;
     -moz-column-width: @width;
          column-width: @width;
  -webkit-column-count: @count;
     -moz-column-count: @count;
          column-count: @count;
  -webkit-column-gap: @gap;
     -moz-column-gap: @gap;
          column-gap: @gap;
}

Gradients

Fetolela mebala efe kapa efe e 'meli habonolo hore e be bokamorao ba gradient. Tsoela pele haholoanyane 'me u hlophise tsela, sebelisa mebala e meraro, kapa sebelisa radial gradient. Ka motsoako o le mong o fumana li-syntaxes tsohle tseo u tla li hloka.

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

U ka boela ua hlakisa sekhutlo sa mebala e 'meli e tloaelehileng, e nang le mela:

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

Haeba o hloka setaele sa barber-stripe, ho bonolo, le hona. Hlalosa 'mala o le mong feela 'me re tla koahela mola o mosoeu o benyang.

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

Phahamisa ante 'me u sebelise mebala e meraro ho e-na le hoo. Beha 'mala oa pele,' mala oa bobeli, 'mala oa bobeli o emisa (karolo ea palo e kang 25%), le' mala oa boraro o nang le metsoako ena:

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

Hlokomela! Haeba o hloka ho tlosa gradient, etsa bonnete ba hore o tlosa mofuta ofe kapa ofe oa IE filteroo o ka bang o o kentse. U ka etsa joalo ka ho sebelisa .reset-filter()mixin hammoho background-image: none;.

Lisebelisoa tse kopanyang

Lisebelisoa tsa motsoako ke metsoako e kopanyang thepa ea CSS e sa amaneng ho fihlela sepheo kapa mosebetsi o itseng.

Hlakisa

Lebala ho eketsa class="clearfix"ntho leha e le efe mme ho e-na le hoo eketsa .clearfix()mixin moo ho loketseng. E sebelisa " micro clearfix" ho tsoa ho Nicolas Gallagher .

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

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

Horizontal centering

Ka potlako beha ntho efe kapa efe ka har'a motsoali oa eona. E hloka widthkapa max-widthe behoe.

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

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

Bathusi ba boholo

Hlalosa litekanyo tsa ntho habonolo.

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

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

Libaka tse ka fetolehang habonolo

Lokisetsa habonolo likhetho tsa resize bakeng sa textarea efe kapa efe, kapa ntho efe kapa efe. Li-default ho boitšoaro bo tloaelehileng ba sebatli ( both).

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

Ho fokotsa mongolo

Fokotsa mongolo habonolo ka ellipsis ka motsoako o le mong. E hloka hore element e be blockkapa inline-blockboemo.

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

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

Litšoantšo tsa retina

Hlalosa litsela tse peli tsa litšoantšo le litekanyo tsa setšoantšo sa @ 1x, 'me Bootstrap e tla fana ka potso ea media ea @2x. Haeba u na le litšoantšo tse ngata tseo u ka li sebelisang, nahana ka ho ngola CSS setšoantšo sa retina ka bowena potsong e le 'ngoe ea litaba.

.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 ha Bootstrap e hahiloe ho Nyenyane, e boetse e na le boema-kepe ba semmuso ba Sass . Re e boloka sebakeng se arohaneng sa GitHub mme re sebetsana le lintlafatso ka mongolo oa phetoho.

Se kenyellelitsoeng

Kaha boema-kepe ba Sass bo na le repo e arohaneng mme e sebeletsa bamameli ba fapaneng hanyane, litaba tsa projeke li fapana haholo le projeke ea mantlha ea Bootstrap. Sena se netefatsa hore boema-kepe ba Sass bo tsamaisana le litsamaiso tse ngata tse thehiloeng ho Sass kamoo ho ka khonehang.

Tsela	Tlhaloso
`lib/`	Ruby gem code (sebopeho sa Sass, Rails le Compass kopanyo)
`tasks/`	Lingoloa tsa converter (ho fetohela tlase ho tlase ho Sass)
`test/`	Litlhahlobo tsa ho bokella
`templates/`	Pontšo ea sephutheloana sa Compass
`vendor/assets/`	Sass, JavaScript, le lifaele tsa fonte
`Rakefile`	Mesebetsi ea ka hare, joalo ka rake le convert

Etela polokelo ea GitHub ea Sass port ho bona lifaele tsena li sebetsa.

Ho kenya

Ho fumana leseli mabapi le mokhoa oa ho kenya le ho sebelisa Bootstrap bakeng sa Sass, sheba buka ea polokelo ea GitHub . Ke mohloli oa morao-rao 'me o kenyelletsa lintlha tse ka sebelisoang le Rails, Compass, le merero e tloaelehileng ea Sass.

Bootstrap bakeng sa Sass

CSS

Kakaretso

HTML5 mofuta oa litokomane

Mobile pele

Typography le lihokela

Normalize.css

Lijana

Sistimi ea grid

Selelekela

Lipotso tsa mecha ea litaba

Likhetho tsa grid

Mohlala: E phuthetsoe ho ea ho e tšekaletseng

Mohlala: Setshelo sa metsi

Mohlala: Mobile le desktop

Mohlala: Mobile, tablet, desktop

Mohlala: Ho phuthela khola

Lits'ebetso tsa kholomo e arabelang

Litšiea tsa offsetting

Litšiea tsa Nesting

Ho laela ka kholomo

Metsoako e fokolang le mefuta e fapaneng

Lintho tse fapaneng

Metsoako

Tšebeliso ea mohlala

Tlhaloso ea litlhaku

Lihlooho

h1. Sehlooho sa Bootstrap

h2. Sehlooho sa Bootstrap

h3. Sehlooho sa Bootstrap

h4. Sehlooho sa Bootstrap

h5. Sehlooho sa Bootstrap

h6. Sehlooho sa Bootstrap

h1. Sehlooho sa Bootstrap Mongolo wa bobedi

h2. Sehlooho sa Bootstrap Mongolo wa bobedi

h3. Sehlooho sa Bootstrap Mongolo wa bobedi

h4. Sehlooho sa Bootstrap Mongolo wa bobedi

h5. Sehlooho sa Bootstrap Mongolo wa bobedi

h6. Sehlooho sa Bootstrap Mongolo wa bobedi

Kopi ea 'mele

Kopi ea 'mele oa moetapele

E hahiloe ka Ho Nyane

Lintlha tsa mongolo tse ka har'a mela

Mongolo o tšoailoeng

Mongolo o hlakotsoeng

Sengoloa se hlabollang

Mongolo o kentsoeng

Mongolo o sehetsweng

Mongolo o monyane

Sebete

Mongolo o tšekaletseng

Lintlha tse ling

Lihlopha tsa ho tsamaisana

Lihlopha tsa phetoho

Likgutsufatso

Kgutsufatso ya motheo

Boikemisetso ba ho qala

Liaterese

Mantsoe a thibelang

Blockquote ea kamehla

Likhetho tsa blockquote

Ho reha mohloli

Lipontšo tse ling

Manane

Ha ea laeloa

E laetsoe

Unstyled

E mocheng

Tlhaloso

Tlhaloso e tshekaletseng

Ho fokotsa ka ho iketsa

Khoutu

E mocheng

Kenyelletso ea mosebelisi

Thibelo ea motheo

Lintho tse fapaneng

Sephetho sa mohlala

Litafole

Mohlala oa motheo

Mela e methalo

Khokahano ea sebatli

`:focus`Boemo ba demo

Caveat mabapi le tshebetso ya kgokahanyo ea`<a>`

Li-icon tsa boikhethelo tse nang le `.sr-only`lileibole tse patiloeng