Kuma lowdown eka swiphemu swa nkoka swa switirhisiwa swa Bootstrap, ku katsa na endlelo ra hina ro antswa, ku hatlisa, ku tiya ka nhluvukiso wa webu.

Xivumbeko xa doctype xa HTML5

Bootstrap yi tirhisa swiaki swo karhi swa HTML na swihlawulekisi swa CSS leswi lavaka ku tirhisiwa ka HTML5 doctype. Yi katse eku sunguleni ka tiphurojeke ta wena hinkwato.

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

Mobile ku sungula

Hi Bootstrap 2, hi engeterile switayele swa xinghana swa tiselfoni leswi nga hlawuriwa eka swiyenge swa nkoka swa rimba. Hi Bootstrap 3, hi tsarile hi vuntshwa phurojeke leswaku yi va na xinghana eka tiselfoni ku sukela eku sunguleni. Ematshan’weni yo engetela eka switayele swa tiselfoni leswi nga hlawuriwa, swi bakiwile kunene endzeni ka xisekelo. Entiyisweni, Bootstrap i mobile ro sungula . Switayele swo sungula swa tiselfoni swi nga kumeka eka layiburari hinkwayo ematshan’weni yo kumeka eka tifayela leti hambaneke.

Ku tiyisisa ku hundzuluxela lokunene na ku khumba ku kurisa, engetela meta tag ya viewport eka <head>.

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

U nga tshikisa vuswikoti byo kurisa eka switirhisiwa swa tiselfoni hi ku engetela user-scalable=noeka thegi ya meta ya viewport. Leswi swi tshikisa ku kurisa, leswi vulaka leswaku vatirhisi va kota ku rhendzeleka ntsena, naswona swi endla leswaku sayiti ya wena yi titwa yi fananyana ni xitirhisiwa xa ntumbuluko. Hi ku angarhela, a hi swi bumabumeli leswi eka sayiti yin’wana ni yin’wana, hikwalaho tirhisa vuxiyaxiya!

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

Thayipo na swihlanganisi

Bootstrap yi veka nkombiso wa masungulo wa misava hinkwayo, thayipo, na switayele swa vuhlanganisi. Hi ku kongoma, hi:

Seta background-color: #fff;eka ...body
Tirhisa swihlawulekisi swa @font-family-base, @font-size-base, na @line-height-basetanihi xisekelo xa hina xa ku thayipa
Seta muvala wa xihlanganisi xa misava hinkwayo hi ku tirhisa @link-colorivi u tirhisa switsalo swa xihlanganisi ntsena eka:hover

Switayili leswi swi nga kumeka endzeni ka scaffolding.less.

Endla leswaku swi va swa ntolovelo.css

Ku kuma ku antswisiwa ka ku hundzuluxela ka xihambano xa swihlamusela-marito, hi tirhisa Normalize.css , phurojeke ya Nicolas Gallagher na Jonathan Neal .

Swikhomela-ndhawu

Bootstrap yi lava element leyi nga na ku phutsela swilo swa sayiti na ku veka sisiteme ya hina ya gridi. U nga ha hlawula xin’wana xa swikhomela-ndhawu swimbirhi leswi u nga ta swi tirhisa eka tiphurojeke ta wena. Xiya leswaku, hikwalaho ka paddingna swin’wana, ku hava xigwitsirisi lexi nga nestable.

Tirhisa .containereka xigwitsirisi xa ku anama loku nga cinciki lexi hlamulaka.

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

Tirhisa .container-fluideka xigwitsirisi xa ku anama loku heleleke, lexi hlanganisaka ku anama hinkwako ka xivono xa wena.

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

Bootstrap yi katsa sisiteme ya gridi ya mati yo sungula leyi hlamulaka, leyi fambafambaka leyi hi ndlela leyi faneleke yi ringanisaka ku fika eka 12 wa tikholomu loko xitirhisiwa kumbe vukulu bya viewport byi ri karhi byi andza. Yi katsa titlilasi leti hlamuseriweke ka ha ri emahlweni eka swihlawulekisi swo olova swa maendlelo, xikan’we na ti -mixin ta matimba to tumbuluxa swivumbeko swo tala swa semantiki .

Manghenelo

Tisisiteme ta gridi ti tirhisiwa ku tumbuluxa swivumbeko swa matluka hi ku tirhisa nxaxamelo wa tilayini na tikholomu leti hlayisaka nhundzu ya wena. Hi leyi ndlela leyi sisiteme ya giridi ya Bootstrap yi tirhaka ha yona:

Tilayini tifanele ku vekiwa endzeni ka .container(fixed-width) kumbe .container-fluid(full-width) kuva ti ringanisiwa kahle xikan’we naku padding.
Tirhisa tilayini ku endla mintlawa leyi nga etlhelo ya tikholomu.
Vuxokoxoko byi fanele ku vekiwa endzeni ka tikholomu, naswona i tikholomu ntsena leti nga vaka vana va le kusuhi va tilayini.
Titlilasi ta gridi leti hlamuseriweke ka ha ri emahlweni ti fana .rowna naswona .col-xs-4ta kumeka ku endla swivumbeko swa gridi hi ku hatlisa. Ti mixins letintsongo tinga tlhela ti tirhisiwa eka swivumbeko swotala swa semantiki.
Tikholomu ti endla ti gutters (swivandla exikarhi ka leswi nga endzeni ka tikholomu) hi ku tirhisa padding. Padding yoleyo yi offset hi tilayini ta kholomo yo sungula na yo hetelela hi ku tirhisa margin yo biha eka .rows.
Margin yo biha hi yona mhaka leyi swikombiso leswi nga laha hansi swi humesiweke ehandle. I leswaku nhundzu endzeni ka tikholomu ta gridi yi layiniwile na nhundzu leyi nga riki ya gridi.
Tikholomu ta gridi ti endliwa hi ku boxa nhlayo ya khume mbirhi wa tikholomu leti kumekaka leti u lavaka ku ti hlanganisa. Hi xikombiso, tikholomu tinharhu leti ringanaka a ti ta tirhisa tinharhu .col-xs-4.
Loko ku vekiwa tikholomu to tlula 12 endzeni ka layini yin’we, ntlawa wun’wana ni wun’wana wa tikholomu leti engetelekeke wu ta, tanihi yuniti yin’we, wu phutsela eka layini leyintshwa.
Titlilasi ta gridi ti tirha eka switirhisiwa leswi nga na ku anama ka xikirini lexikulu kumbe ku ringana na vukulu bya breakpoint, naswona ti tlula titlilasi ta gridi leti kongomisiweke eka switirhisiwa leswitsongo. Hikwalaho, xikombiso ku tirhisa .col-md-*tlilasi yihi na yihi eka elemente a swi nge khumbi ntsena xitayili xa yona eka switirhisiwa swa le xikarhi kambe na le ka switirhisiwa leswikulu loko .col-lg-*tlilasi yi nga ri kona.

Languta eka swikombiso swo tirhisa misinya leyi ya milawu eka khodi ya wena.

Swivutiso swa vuhangalasi bya mahungu

Hi tirhisa swivutiso swa midiya leswi landzelaka eka tifayela ta hina ta Less ku tumbuluxa swiphemu swa nkoka swa ku tshoveka eka sisiteme ya hina ya giridi.

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

Minkarhi yin’wana hi ndlandlamuxa swivutiso leswi swa vuhangalasi bya mahungu ku katsa a max-widthku ringanyeta CSS eka sete yo koma ya switirhisiwa.

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

Swihlawulekisi swa gridi

Vona ndlela leyi swiphemu swa sisiteme ya giridi ya Bootstrap swi tirhaka ha yona eka switirhisiwa swo tala leswi nga ni tafula leri nga ni mavoko.

	Switirhisiwa leswitsongo leswi engetelekeke Tifoni (<768px) .	Switirhisiwa leswitsongo Tithebulete (≥768px) .	Switirhisiwa swa le xikarhi Tidesktop (≥992px) .	Switirhisiwa leswikulu Tidesktop (≥1200px) .
Mahanyelo ya gridi	Horizontal nkarhi hinkwawo	Ku wile ku sungula, ku rhetela ehenhla ka tindhawu to tshoveka
Ku anama ka xigwitsirisi	Ku hava (auto) .	750px	970px	1170px hi ku
Xirhangi xa tlilasi	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`
# ya tikholomu	12.
Ku anama ka kholomo	Auto	~62px	~81px	~97px
Ku anama ka gutter	30px (15px eka tlhelo rin’wana ni rin’wana ra kholomo) .
Swi nga ni swisaka	Ina
Ti-offset	Ina
Ku oda ka tikholomu	Ina

Xikombiso: Ku hlanganisiwa-ku-ya-eka-horizontal

Hi ku tirhisa sete yin’we ya .col-md-*titlilasi ta giridi, u nga endla sisiteme ya giridi ya xisekelo leyi sungulaka yi hlengeletiwile eka switirhisiwa swa tiselfoni na switirhisiwa swa tithebulete (nhlayo leyitsongo swinene ku ya eka leyitsongo) u nga si va leyi nga etlhelo eka switirhisiwa swa le desktop (ya le xikarhi). Veka tikholomu ta gridi eka yin'wana na yin'wana .row.

.kolo-md-1

.kolo-md-8

.kolo-md-4

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

Xikombiso: Xigwitsirisi xa mati

Pfuxeta xivumbeko xihi na xihi xa gridi xa ku anama loku nga cinciki xi va xivumbeko xa ku anama loku heleleke hi ku cinca xa wena xa le handle swinene .containerxi va .container-fluid.

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

Xikombiso: Mobile na desktop

A wu lavi leswaku tikholomu ta wena ti hlangana ntsena eka switirhisiwa leswitsongo? Tirhisa titlilasi ta gridi ya switirhisiwa leswitsongo na swa le xikarhi leswi engetelekeke hi ku engetela .col-xs-* .col-md-*eka tikholomu ta wena. Vona xikombiso lexi nga laha hansi ku kuma mianakanyo yo antswa ya ndlela leyi hinkwaswo swi tirhaka ha yona.

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

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

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

Xikombiso: Movha, thebulete, desktop

.col-sm-*Aka eka xikombiso lexi hundzeke hi ku tumbuluxa swivumbeko leswi cinca-cincaka swinene ni leswi nga ni matimba swinene leswi nga ni titlilasi ta tithebulete .

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

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

.kolo-xs-6 .kolo-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>

Xikombiso: Ku phutsela ka tikholomu

Loko ku vekiwa tikholomu to tlula 12 endzeni ka layini yin’we, ntlawa wun’wana ni wun’wana wa tikholomu leti engetelekeke wu ta, tanihi yuniti yin’we, wu phutsela eka layini leyintshwa.

.kolo-xs-9

.col-xs-4
Tanihi leswi 9 + 4 = 13 > 12, div leyi ya 4-kholomo yo anama yi phutseriwe eka layini leyintshwa tanihi yuniti yin’we leyi hlanganeke.

.col-xs-6
Tikholomu leti landzelaka ti ya emahlweni hi layini leyintshwa.

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

Ku vuyiseriwa ka kholomo leyi hlamulaka

Hi ti tiers ta mune ta ti grids leti kumekaka u boheke ku tsutsumela eka timhaka laha, eka tindzhawu tokarhi to tshoveka, tikholomu ta wena tinga basiki kahle tani hileswi yin’wana yi leheke kutlula yin’wana. Ku lulamisa sweswo, tirhisa ku hlanganisiwa ka a .clearfixna titlilasi ta hina ta vukorhokeri leti hlamulaka .

.col-xs-6 .col-sm-3
Cinca sayizi ya xivono xa wena kutani u xi languta eka riqingho ra wena ku kuma xikombiso.

.kolo-xs-6 .kolo-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>

Ku engetela eka ku basisiwa ka kholomo eka tindhawu to tshoveka leti hlamulaka, u nga ha lava ku tlhela u veka ti-offset, ku susumetiwa kumbe ku koka . Vona leswi hi xiendlo eka xikombiso xa gridi .

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

Ku tlherisela endzhaku tikholomu

Susa tikholomu exineneni hi ku tirhisa .col-md-offset-*titlilasi. Titlilasi leti ti engetela margin ya ximatsi ya kholomo hi *tikholomu. Hi xikombiso, .col-md-offset-4yi famba .col-md-4ehenhla ka tikholomu ta mune.

.kolo-md-4

.col-md-4 .col-md-xikarhi-4

.col-md-3 .col-md-xikarhi-3

.col-md-6 .col-md-xikarhi-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 nga ha tlhela u tlula ti-offset ku suka eka swiyenge swa le hansi swa gridi hi .col-*-offset-0titlilasi.

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

Tikholomu to endla swisaka

Ku hlanganisa nhundzu ya wena hi gridi ya ntolovelo, engetela leyintshwa .rowna sete ya .col-sm-*tikholomu endzeni ka .col-sm-*kholomo leyi nga kona. Tilayini leti pfaleriweke ti fanele ku katsa sete ya tikholomu leti hlanganisaka ku fika eka 12 kumbe ehansi (a swi bohi leswaku u tirhisa tikholomu hinkwato ta 12 leti kumekaka).

Xiyimo xa 1: .col-sm-9

Xiyimo xa 2: .col-xs-8 .col-sm-6

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

Ku oda ka tikholomu

Cinca hi ku olova ku landzelelana ka tikholomu ta hina ta gridi leti akiweke endzeni hi .col-md-push-*na .col-md-pull-*titlilasi ta vacinci.

.col-md-9 .kol-md-ku susumeta-3

.col-md-3 .kol-md-ku koka-9

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

Less mixins na swilo leswi cinca-cincaka

Ku engetela eka titlilasi ta gridi leti akiweke ka ha ri emahlweni ta swivumbeko swo hatlisa, Bootstrap yi katsa swilo leswi cinca-cincaka swa Less na mixins ku hatlisa ku tumbuluxa swivumbeko swa wena swo olova, swa semantiki.

Swilo leswi cinca-cincaka

Swilo leswi cinca-cincaka swi veka nhlayo ya tikholomu, ku anama ka gutter, na ndhawu ya xivutiso xa midiya leyi ku nga ta sungula tikholomu leti papamalaka eka yona. Hi tirhisa leswi ku tumbuluxa titlilasi ta gridi leti hlamuseriweke ka ha ri emahlweni leti tsariweke laha henhla, xikan’we na ti mixins ta ntolovelo leti xaxametiweke laha hansi.

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

Ti- mixins

Mixins yi tirhisiwa swin’we na swilo leswi cinca-cincaka swa gridi ku tumbuluxa CSS ya semantiki ya tikholomu ta gridi yin’wana na yin’wana.

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

Xikombiso xa matirhiselo

U nga cinca swilo leswi cinca-cincaka eka mimpimo ya wena ya ntolovelo, kumbe u tirhisa ntsena ti-mixin hi mimpimo ya tona ya ntolovelo. Hi lexi xikombiso xa ku tirhisa swiletelo swa ntolovelo ku endla xivumbeko xa tikholomu timbirhi lexi nga ni xivandla exikarhi.

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

Tinhloko-mhaka

Tinhlokomhaka hinkwato ta HTML, <h1>ku ya eka <h6>, ta kumeka. .h1hi ku tirhisa .h6titlilasi na tona ta kumeka, ta loko u lava ku fambisana na xitayili xa fonto ya nhlokomhaka kambe wa ha lava leswaku tsalwa ra wena ri kombisiwa endzeni ka layini.

h1. Nhlokomhaka ya bootstrap	Semibold ya xirhendzevutani 36px
h2. Nhlokomhaka ya bootstrap	Semibold ya xirhendzevutani 30px
h3. Nhlokomhaka ya bootstrap	Semibold ya 24px
h4. Nhlokomhaka ya bootstrap	Semibold ya 18px
h5. Nhlokomhaka ya bootstrap	Semibold ya 14px
h6. Nhlokomhaka ya bootstrap	Semibold ya 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>

<small>Endla tsalwa ro olova, ra vumbirhi eka nhlokomhaka yihi na yihi hi thegi ya xivumbeko xa le henhla kumbe .smalltlilasi.

h1. Nhlokomhaka ya bootstrap Tsalwa ra vumbirhi

h2. Nhlokomhaka ya bootstrap Tsalwa ra vumbirhi

h3. Nhlokomhaka ya bootstrap Tsalwa ra vumbirhi

h4. Nhlokomhaka ya bootstrap Tsalwa ra vumbirhi

h5. Nhlokomhaka ya bootstrap Tsalwa ra vumbirhi

h6. Nhlokomhaka ya bootstrap Tsalwa ra vumbirhi

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

Khopi ya miri

Bootstrap ya misava hinkwayo ya xiviri font-sizei 14px , na a line-heightya 1.428 . Leswi swi tirhisiwa eka <body>na tindzimana hinkwato. Ku engetela kwalaho, <p>(tindzimana) ti kuma margin ya le hansi ya hafu ya line-height ya tona leyi hlayiweke (10px hi ku tiyimisela).

Nullam quis risus eget xitombo xa xirhendzevutani lexi khavisiweke vel eu leo. Cum sociis natoque penatibus na magnis leyi nga na ku veleka, nascetur ridiculus mus. Nullam id dolor id nibh mimovha ya switsongwatsongwana.

Cum sociis natoque penatibus na magnis leyi nga na ku veleka, nascetur ridiculus mus. Donec ullamcorper nulla leyi nga riki na metus auctor ya swilo leswi nga riki swa nkoka. Duis mollis, est non commodo luctus, nisi erat xirho xa xirhendzevutani, xitsongwatsongwana xa xirhendzevutani xa xirhendzevutani. Donec ullamcorper nulla leyi nga riki na metus auctor ya swilo leswi nga riki swa nkoka.

Maecenas sed diam eget risus varius blandit yi tshama eka yona leyi nga riki na magna. Donec id elit leyi nga riki na mi porta gravida eka eget metus. Duis mollis, est non commodo luctus, nisi erat xirho xa xirhendzevutani, xitsongwatsongwana xa xirhendzevutani xa xirhendzevutani.

<p>...</p>

Khopi ya miri leyi rhangelaka

Endla leswaku ndzimana yi va leyi hambaneke hi ku engetela .lead.

Vivamus sagittis lacus vel augue laoreet xitsonga xitsonga xitsonga xitsonga xitsonga xitsonga xitsonga xitsonga xitsonga xitsonga xitsonga xitsonga xitsonga. Duis mollis, est leyi nga riki ya xiyimo xa le henhla.

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

Yi akiwile hi Switsongo

Xikalo xa ku thayipa xi sekeriwe eka swilo swimbirhi leswi cinca-cincaka swa Less eka swilo leswi cinca-cincaka.less : @font-size-basena @line-height-base. Xo sungula i base font-size leyi tirhisiweke hinkwako kasi xa vumbirhi i base line-height. Hi tirhisa swilo sweswo leswi cinca-cincaka ni tinhlayo tin’wana to olova ku endla ti- margin, ti-padding, ni ti-line-height ta muxaka wa hina hinkwawo ni swin’wana. Va customize na Bootstrap yi pfumelelana na swona.

Swiaki swa tsalwa ra le ndzeni ka layini

Tsalwa leri funghiweke

Ku kombisa ku tsutsuma ka tsalwa hikwalaho ka ku yelana ka rona eka xiyimo xin’wana, tirhisa <mark>thegi.

U nga tirhisa thegi ya mfungho kuswa nkokatsalwa.

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

Tsalwa leri susiweke

Ku kombisa swibokisana swa matsalwa leswi susiweke tirhisa <del>thegi.

~~Layini leyi ya tsalwa yi endleriwe ku tekiwa tanihi tsalwa leri susiweke.~~

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

Ku hlasela hi ku tirhisa tsalwa

Ku kombisa swibokisana swa tsalwa leswi nga ha riki swa nkoka tirhisa <s>thegi.

~~Layini leyi ya tsalwa yi endleriwe ku tekiwa tanihi leyi nga ha riki ntiyiso.~~

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

Tsalwa leri nghenisiweke

Ku kombisa ku engeteriwa eka tsalwa tirhisa <ins>thegi.

Layini leyi ya tsalwa yi endleriwe ku tekiwa tanihi ku engeteriwa eka tsalwa.

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

Tsalwa leri thaleriweke ehansi

Ku thalela tsalwa ehansi tirhisa <u>thegi.

Layini leyi ya tsalwa yi ta hundzuluxela tanihi laha yi thaleriweke ha kona

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

Tirhisa tithegi ta ku kandziyisa ta HTML ta ntolovelo leti nga ni switayele swo olova.

Tsalwa leritsongo

Ku susa ku kandziyisa inline kumbe swibokisana swa tsalwa, tirhisa <small>thegi ku veka tsalwa eka 85% wa vukulu bya mutswari. Swiaki swa nhlokomhaka swi amukela swa swona font-sizeeka swiaki leswi pfanganisiweke <small>.

U nga ha tirhisa hi ndlela yin’wana xiaki xa le ndzeni ka layini lexi nga ni .smallematshan’weni ya xin’wana ni xin’wana <small>.

Layini leyi ya tsalwa yi endleriwe ku tekiwa tanihi matsalelo lamanene.

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

Titshembha

Ku kandziyisa xiphemu xa tsalwa hi font-weight yo tika swinene.

Xiphemu lexi landzelaka xa tsalwa xi hundzuluxeriwe tanihi tsalwa ro dzwihala .

<strong>rendered as bold text</strong>

Switlhokovetselo swa xitaliki

Ku kandziyisa xiphemu xa tsalwa leri tsariweke hi matsalelo yo olova.

Xiphemu lexi landzelaka xa tsalwa xi hundzuluxeriwe tanihi tsalwa leri tsariweke hi ku olova .

<em>rendered as italicized text</em>

Swiaki leswi cinca-cincaka

Titwele u ntshunxekile ku tirhisa <b>na <i>hi HTML5. <b>yi endleriwe ku kombisa marito kumbe swivulwa handle ko hundzisela nkoka lowu engetelekeke kasi <i>ngopfungopfu i ya rito, marito ya xithekiniki, na swin’wana.

Titlilasi ta ku ringanisa

Hi ku olova hlela nakambe tsalwa eka swiphemu leswi nga na titlilasi ta ku ringanisa matsalwa.

Tsalwa leri ringanisiweke hi tlhelo ra ximatsi.

Tsalwa leri ringanisiweke exikarhi.

Tsalwa leri ringanisiweke hi tlhelo ra xinene.

Tsalwa leri lulamisiweke.

Ku hava tsalwa ro phutsela.

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

Titlilasi ta ku hundzuka

Hundzuluxa tsalwa eka swiphemu leswi nga na titlilasi ta ku tsala hi maletere lamakulu.

Tsalwa leri nga ni maletere lamatsongo.

Tsalwa lerikulu.

Tsalwa leri tsariweke hi maletere lamakulu.

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

Swipfuxeto

Ku tirhisiwa ka xitayili ka <abbr>elemente ya HTML ya swipfuxeto na swihlamusela-marito ku kombisa vuhundzuluxeri lebyi andlariweke eka hover. Swipfuxeto leswi nga na titlexihlawulekisi swi na ndzilakano wa le hansi lowu nga na mathonsi yo vonikela na xikombiso xa mpfuneto eka hover, leswi nyikaka mongo wo engetela eka hover na vatirhisi va thekinoloji yo pfuneta.

Xifunengeto xa xisekelo

Xifunengeto xa rito attribute i attr .

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

Ku sungula

Engetela .initialismeka xifunengeto xa font-size leyitsongonyana.

HTML i nchumu lowunene ngopfu ku sukela eka xinkwa lexi tsemiweke.

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

Tiadirese

Nyika vuxokoxoko byo tihlanganisa bya kokwa wa le kusuhi kumbe miri hinkwawo wa ntirho. Hlayisa ku fometa hi ku heta mitila hinkwayo hi <br>.

Twitter, Inc.
1355 Xitarata xa Makete, Xikamarana xa 900
San Francisco, CA 94103
P: (123) 456-7890

Vito leri heleleke
ro [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>

Switlhokovetselo swa swibokisana

Ku tshaha swibokisana swa nhundzu ku suka eka xihlovo xin’wana endzeni ka tsalwa ra wena.

Xibokisana xa xiviri

Pfuxeta HTML<blockquote> yihi na yihi tanihi xitlhokovetselo. Eka swikombo leswi kongomeke, hi ringanyeta leswaku .<p>

Lorem ipsum dolor tshama amet, consectetur adipiscing xiyimo xa le henhla. Nhlayo leyi heleleke ya posuere erat a ante.

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

Swihlawulekisi swa blockquote

Xitayili na ku cinca ka nhundzu eka ku hambana ko olova eka mpimanyeto <blockquote>.

Ku thya xihlovo vito

Engetela a <footer>ya ku vona xihlovo. Pfuxeta vito ra ntirho wa xihlovo eka <cite>.

Lorem ipsum dolor tshama amet, consectetur adipiscing xiyimo xa le henhla. Nhlayo leyi heleleke ya posuere erat a ante.

Munhu loyi a dumeke eka Source Title

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

Swikombiso swin’wana

Engetelani .blockquote-reverseku kuma blockquote leyi nga na swilo leswi ringanisiweke hi tlhelo ra xinene.

Lorem ipsum dolor tshama amet, consectetur adipiscing xiyimo xa le henhla. Nhlayo leyi heleleke ya posuere erat a ante.

Munhu loyi a dumeke eka Source Title

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

Minxaxamelo ya swilo

A swi odariwanga

Nxaxamelo wa swilo leswi eka swona ku landzelelana ku nga riki na nkoka hi ku kongoma.

Lorem ipsum dolor tshama amet
Consectetur leyi nga ni mafurha yo tala
Nhlayo leyi heleleke ya molestie lorem eka massa
Facilisis eka xirhendzevutani xa pretium nisl aliquet
Nulla volutpat xitsonga xitsonga xitsonga xitsonga
- Xiphemu xa xirhendzevutani xa iaculis neque
- Purus sodales ya switsongwatsongwana swa ultricies
- Vestibulum laoreet xirho xa xirhendzevutani sem
- Ac tristique libero xitsonga xitsonga xitsonga xitsonga
Faucibus porta lacus xihlala xa xirhendzevutani xa xirhendzevutani
Aenean tshama amet erat nunc
Eget porttitor xitsonga xitsonga

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

Ku odariwile

Nxaxamelo wa swilo leswi eka swona ku landzelelana ku nga na nkoka hi ku kongoma.

Lorem ipsum dolor tshama amet
Consectetur leyi nga ni mafurha yo tala
Nhlayo leyi heleleke ya molestie lorem eka massa
Facilisis eka xirhendzevutani xa pretium nisl aliquet
Nulla volutpat xitsonga xitsonga xitsonga xitsonga
Faucibus porta lacus xihlala xa xirhendzevutani xa xirhendzevutani
Aenean tshama amet erat nunc
Eget porttitor xitsonga xitsonga

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

Ku nga ri na xitayili

Susa list-stylemargin ya ntolovelo na ya ximatsi eka swilo swa nxaxamelo (vana va xihatla ntsena). Leswi swi tirha ntsena eka swilo swa nxaxamelo wa vana va xihatla , leswi vulaka leswaku u ta lava ku engetela tlilasi ya minxaxamelo yihi na yihi leyi pfanganisiweke na yona.

Lorem ipsum dolor tshama amet
Consectetur leyi nga ni mafurha yo tala
Nhlayo leyi heleleke ya molestie lorem eka massa
Facilisis eka xirhendzevutani xa pretium nisl aliquet
Nulla volutpat xitsonga xitsonga xitsonga xitsonga
- Xiphemu xa xirhendzevutani xa iaculis neque
- Purus sodales ya switsongwatsongwana swa ultricies
- Vestibulum laoreet xirho xa xirhendzevutani sem
- Ac tristique libero xitsonga xitsonga xitsonga xitsonga
Faucibus porta lacus xihlala xa xirhendzevutani xa xirhendzevutani
Aenean tshama amet erat nunc
Eget porttitor xitsonga xitsonga

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

Inline

Veka swilo hinkwaswo swa nxaxamelo eka layini yin’we na display: inline-block;na swin’wana swo olova swo padding.

Lorem ipsum yi vula leswaku
Xiphemu xa phasellus iaculis
Nulla xitsonga xitsonga

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

Nhlamuselo

Nxaxamelo wa marito lama nga ni tinhlamuselo leti fambisanaka na wona.

Minxaxamelo ya tinhlamuselo: Nxaxamelo wa tinhlamuselo wu hetisekile ku hlamusela marito.
Euismod: Vestibulum id ligula porta felis euismod xitombo xa xitombo xa xitombo xa xitombo xa xitombo xa xitombo xa xitombo.; Donec id elit leyi nga riki na mi porta gravida eka eget metus.
Malesuada ya xitsonga: Etiam porta sem malesuada leyikulu leyi nga ni vuxiyaxiya.

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

Nhlamuselo ya horizontal

Endla marito na tinhlamuselo eka <dl>layini hi tlhelo na tlhelo. Ku sungula ku stacked ku fana na default <dl>s, kambe loko navbar yi andlala, tano endla leswi.

Minxaxamelo ya tinhlamuselo: Nxaxamelo wa tinhlamuselo wu hetisekile ku hlamusela marito.
Euismod: Vestibulum id ligula porta felis euismod xitombo xa xitombo xa xitombo xa xitombo xa xitombo xa xitombo xa xitombo.; Donec id elit leyi nga riki na mi porta gravida eka eget metus.
Malesuada ya xitsonga: Etiam porta sem malesuada leyikulu leyi nga ni vuxiyaxiya.
Felis euismod xitombo xa xitombo: Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum masa justo tshama amet risus.

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

Ku tsemiwa hi ku tisungulela

Minxaxamelo ya tinhlamuselo leyi nga etlhelo yi ta tsema marito lama leheke ngopfu leswaku ma nga ngheni eka kholomo ya ximatsi hi text-overflow. Eka swivono leswitsongo, swi ta cinca eka xivumbeko xa ntolovelo lexi hlanganisiweke.

Inline

Pfuxeta swiphemu swa khodi ya le ndzeni ka layini hi <code>.

Hi xikombiso, <section>yi fanele yi phutseriwe tanihi leyi nga endzeni ka layini.

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

Ku nghenisa ka mutirhisi

Tirhisa <kbd>ku kombisa ku nghenisa loku hi ntolovelo ku nghenisiwaka hi ku tirhisa khibhodi.

Ku cinca swikombo, thayipa u cdlandzela vito ra swikombo.
Ku hlela swiyimiso, cinca 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>

Xibokisana xa xisekelo

Tirhisa <pre>eka milayeni yo tala ya khodi. Tiyiseka leswaku u balekela swikhomela-ndhawu swihi na swihi swa angle eka khodi leswaku u ta hundzuluxela kahle.

<p>Xikombiso xa tsalwa laha...</p>

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

U nga ha engetela .pre-scrollabletlilasi hi ku hlawula, leyi nga ta veka max-height ya 350px naswona yi nyika y-axis scrollbar.

Swilo leswi cinca-cincaka

Ku kombisa swilo leswi cinca-cincaka tirhisa <var>thegi.

y = m x + b

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

Xikombiso xa vuhumelerisi

Ku kombisa swibokisana xikombiso xa vuhumelerisi ku suka eka nongonoko tirhisa <samp>thegi.

Tsalwa leri ri endleriwe ku tekiwa tanihi xikombiso xa vuhumelerisi lebyi humaka eka nongonoko wa khompyuta.

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

Xikombiso xa xisekelo

Eka xitayili xa xisekelo—ku pfariwa ko olova ni ku avanyisa loku nga etlhelo ntsena—engetela tlilasi ya le hansi .tableeka yin’wana ni yin’wana <table>. Swi nga ha vonaka swi ri super redundant, kambe hi ku nyikiwa ku tirhisiwa lokukulu ka matafula eka ti-plugin tin’wana to fana na tikhalendara na vahlawuri va masiku, hi hlawurile ku hambanyisa switayele swa hina swa tafula ra ntolovelo.

Xifaniso xa tafula lexi nga hlawuriwa.
# .	Vito rosungula	Xivongo	Vito ra mutirhisi
1.	Marka	Otto	@mdo
2.	Yakobe	Thornton	@mafurha
3.	Larry	Xinyenyana	@twitter

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

Tilayini leti nga ni mitila

Tirhisa .table-stripedku engetela zebra-striping eka layini yihi na yihi ya tafula endzeni ka <tbody>.

Ku fambisana ka cross-browser

Matafula ya mitila ya endliwa hi xitayili hi ku tirhisa :nth-childxihlawulekisi xa CSS, lexi nga kumeki eka Internet Explorer 8.

# .	Vito rosungula	Xivongo	Vito ra mutirhisi
1.	Marka	Otto	@mdo
2.	Yakobe	Thornton	@mafurha
3.	Larry	Xinyenyana	@twitter

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

Tafula leri nga ni ndzilakano

Engetelani .table-borderedku kuma mindzilakano eka matlhelo hinkwawo ya tafula na tisele.

# .	Vito rosungula	Xivongo	Vito ra mutirhisi
1.	Marka	Otto	@mdo
2.	Yakobe	Thornton	@mafurha
3.	Larry	Xinyenyana	@twitter

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

Hover tilayini

Engetela .table-hoverku endla leswaku xiyimo xa hover xi tirha eka tilayini ta tafula endzeni ka <tbody>.

# .	Vito rosungula	Xivongo	Vito ra mutirhisi
1.	Marka	Otto	@mdo
2.	Yakobe	Thornton	@mafurha
3.	Larry	Xinyenyana	@twitter

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

Tafula leri hlanganisiweke

Engetelani .table-condensedku endla leswaku matafula ya hlangana swinene hiku tsema cell padding hi hafu.

# .	Vito rosungula	Xivongo	Vito ra mutirhisi
1.	Marka	Otto	@mdo
2.	Yakobe	Thornton	@mafurha
3.	Larry wa Xinyenyana		@twitter

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

Titlilasi ta mongo

Tirhisa titlilasi ta mongo ku penda tilayini ta tafula kumbe tisele ha yin’we.

Tlilasi	Nhlamuselo
`.active`	Tirhisa muvala wa hover eka layini yo karhi kumbe sele
`.success`	Swi kombisa goza leri humeleleke kumbe lerinene
`.info`	Swi kombisa ku cinca loku nga riki na xihlawuhlawu loku dyondzisaka kumbe xiendlo
`.warning`	Swi kombisa xilemukiso lexi nga ha lavaka nyingiso
`.danger`	Swi kombisa goza leri nga ni khombo kumbe leri nga ha vaka ro biha

# .	Nhlokomhaka ya kholomo	Nhlokomhaka ya kholomo	Nhlokomhaka ya kholomo
1.	Nhundzu ya kholomo	Nhundzu ya kholomo	Nhundzu ya kholomo
2.	Nhundzu ya kholomo	Nhundzu ya kholomo	Nhundzu ya kholomo
3.	Nhundzu ya kholomo	Nhundzu ya kholomo	Nhundzu ya kholomo
4.	Nhundzu ya kholomo	Nhundzu ya kholomo	Nhundzu ya kholomo
5.	Nhundzu ya kholomo	Nhundzu ya kholomo	Nhundzu ya kholomo
6.	Nhundzu ya kholomo	Nhundzu ya kholomo	Nhundzu ya kholomo
7.	Nhundzu ya kholomo	Nhundzu ya kholomo	Nhundzu ya kholomo
8.	Nhundzu ya kholomo	Nhundzu ya kholomo	Nhundzu ya kholomo
9.	Nhundzu ya kholomo	Nhundzu ya kholomo	Nhundzu ya 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>

Ku hundzisela nhlamuselo eka thekinoloji yo pfuneta

Ku tirhisa muvala ku engetela nhlamuselo eka layini ya tafula kumbe sele yin’wana na yin’wana swi nyika ntsena xikombiso xa xivono, lexi nga ta ka xi nga hundziseriwi eka vatirhisi va thekinoloji yo pfuneta – ku fana na swihlaya swa xikirini. Tiyisisa leswaku mahungu lama kombisiweke hi muvala ya le rivaleni eka nhundzu hi yoxe (tsalwa leri vonakaka eka layini/sele ya tafula leyi faneleke), kumbe ya katsiwa hi tindlela tin’wana, to tanihi tsalwa ro engetela leri fihliweke na .sr-onlytlilasi.

Matafula lama hlamulaka

Endla matafula lama hlamulaka hi ku phutsela yin’wana ni yin’wana .tableku .table-responsiveendla leswaku ma rhendzeleka hi ndlela yo olova eka switirhisiwa leswitsongo (ehansi ka 768px). Loko u languta eka nchumu wun’wana ni wun’wana lowukulu ku tlula 768px hi ku anama, a wu nge voni ku hambana eka matafula lawa.

Ku tsemiwa/ku tsemiwa loku yimisiweke

Matafula lama hlamulaka ma tirhisa overflow-y: hidden, lama tsemaka rungula rihi na rihi leri hundzaka emakumu ya le hansi kumbe ya le henhla ya tafula. Ngopfu-ngopfu, leswi swi nga tsema timenyu leti nga ehansi ni switirhisiwa swin’wana swa vanhu van’wana.

Firefox na switirhisiwa swa nsimu

Firefox yi na swin’wana swo kavanyeta fieldset styling leswi katsaka widthleswi kavanyetaka tafula ro hlamula. Leswi a swi nge tluriwi handle ka hack leyi kongomeke ya Firefox leyi hi nga yi nyikeliki eka Bootstrap:

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

Ku kuma vuxokoxoko byo tala, hlaya nhlamulo leyi ya Stack Overflow .

# .	Nhlokomhaka ya tafula	Nhlokomhaka ya tafula	Nhlokomhaka ya tafula	Nhlokomhaka ya tafula	Nhlokomhaka ya tafula	Nhlokomhaka ya tafula
1.	Sele ya tafula	Sele ya tafula	Sele ya tafula	Sele ya tafula	Sele ya tafula	Sele ya tafula
2.	Sele ya tafula	Sele ya tafula	Sele ya tafula	Sele ya tafula	Sele ya tafula	Sele ya tafula
3.	Sele ya tafula	Sele ya tafula	Sele ya tafula	Sele ya tafula	Sele ya tafula	Sele ya tafula

# .	Nhlokomhaka ya tafula	Nhlokomhaka ya tafula	Nhlokomhaka ya tafula	Nhlokomhaka ya tafula	Nhlokomhaka ya tafula	Nhlokomhaka ya tafula
1.	Sele ya tafula	Sele ya tafula	Sele ya tafula	Sele ya tafula	Sele ya tafula	Sele ya tafula
2.	Sele ya tafula	Sele ya tafula	Sele ya tafula	Sele ya tafula	Sele ya tafula	Sele ya tafula
3.	Sele ya tafula	Sele ya tafula	Sele ya tafula	Sele ya tafula	Sele ya tafula	Sele ya tafula

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

Xikombiso xa xisekelo

Vulawuri bya xivumbeko bya munhu hi xiyexe byi amukela hi ku tisungulela switayili swo karhi swa misava hinkwayo. Hinkwaswo tsalwa <input>, <textarea>, na <select>swiaki leswi nga na .form-controlswi vekiwile eka width: 100%;hi ku tiyimisela. Pfuxeta malebvu na swilawuri endzeni .form-groupleswaku u kuma xivandla lexinene.

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

U nga hlanganisi mintlawa ya tifomo na mintlawa ya swingheniso

U nga hlanganisi mintlawa ya tifomo hi ku kongoma na mintlawa ya swingheniso . Ematshan’weni ya sweswo, nest ntlawa wa swingheniso endzeni ka ntlawa wa fomo.

Fomo ya le ndzeni ka layini

Engetela .form-inlineeka fomo ya wena (leyi nga fanelangiki ku va <form>) ya vulawuri bya left-aligned na inline-block. Leswi swi tirha ntsena eka tifomo endzeni ka swivono leswi nga kwalomu ka 768px hi ku anama.

Swi nga ha lava ku anama ka ntolovelo

Ti inputs na ti selects ti width: 100%;tirhisiwile hi ku tiyimisela eka Bootstrap. Endzeni ka tifomo ta le ndzeni ka layini, hi tlherisela sweswo eka width: auto;leswaku vulawuri byo tala byi ta tshama eka layini yin’we. Ku ya hi ndlela leyi u vekiweke ha yona, ku nga ha laveka ku anama loku engetelekeke ka ntolovelo.

Minkarhi hinkwayo engetela malebvu

Vahlayi va xikirini va ta va na xiphiqo hi tifomo ta wena loko u nga katsi lebula eka ku nghenisa kun’wana na kun’wana. Eka tifomo leti ta le ndzeni ka layini, u nga fihla malebvu hi ku tirhisa .sr-onlytlilasi. Ku na tindlela tin’wana to nyika lebula ya thekinoloji yo pfuneta, ku fana na aria-label, aria-labelledbykumbe titlexihlawulekisi. Loko ku nga ri na xin’we xa leswi lexi nga kona, vahlayi va xikirini va nga ha tirhisa placeholderxihlawulekisi, loko xi ri kona, kambe xiya leswaku ku tirhisiwa ka placeholdertanihi ku siva tindlela tin’wana to lebula a swi tsundzuxiwi.

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

Xivumbeko xa horizontal

Tirhisa titlilasi ta giridi leti hlamuseriweke ka ha ri emahlweni ta Bootstrap ku ringanisa malebvu na mintlawa ya vulawuri bya fomo eka xivumbeko xa horizontal hi ku engetela .form-horizontaleka fomo (leswi nga fanelangiki ku va a <form>). Ku endla tano swi cinca .form-groups ku tikhoma tanihi tilayini ta gridi, hikwalaho a ku na xilaveko xa .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>

Swilawuri leswi seketeriwaka

Swikombiso swa vulawuri bya xivumbeko xa ntolovelo lebyi seketeriwaka eka xivumbeko xa xivumbeko xa xikombiso.

Swilo leswi nghenisiwaka

Vulawuri bya xivumbeko lebyi tolovelekeke ngopfu, tinsimu to nghenisa leti simekiweke eka tsalwa. Ku katsa nseketelo wa tinxaka hinkwato ta HTML5: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, na color.

Xitiviso xa thayipa xa laveka

Swilo leswi nghenisiwaka swi ta endliwa hi xitayili ntsena loko swa swona typeswi tivisiwile kahle.

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

Mintlawa yo nghenisa

Ku engetela tsalwa leri hlanganisiweke kumbe swikomba-nkarhi emahlweni na/kumbe endzhaku ka tsalwa rihi na rihi leri sekeriweke eka tsalwa <input>, languta xiphemu xa ntlawa wa ku nghenisa .

Ndhawu ya matsalwa

Vulawuri bya xivumbeko lebyi seketelaka mitila yo tala ya tsalwa. Cinca rowsxihlawulekisi tanihilaha swi lavekaka hakona.

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

Mabokisi yo kambela ni swiya-ni-moya

Mabokisi yo kambela i ya ku hlawula xin’we kumbe swo hlayanyana eka nxaxamelo, kasi swiya-ni-moya i swa ku hlawula ndlela yin’we eka yo tala.

Mabokisi yo kambela lama nga tirhiki na swiya-ni-moya swa seketeriwa, kambe ku nyika xikombiso xa "leswi nga pfumeleriwangiki" eka hover ya mutswari <label>, u ta fanela ku engetela .disabledtlilasi eka mutswari .radio, .radio-inline, .checkbox, kumbe .checkbox-inline.

Xihlawulekisi (xi hlengeletiwile) .

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

Mabokisi yo kambela ya le ndzeni ka layini ni swiya-ni-moya

Tirhisa titlilasi ta .checkbox-inlinekumbe .radio-inlineeka nxaxamelo wa mabokisi yo kambela kumbe swiya-ni-moya eka swilawuri leswi humelelaka eka layini yin’we.

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

Mabokisi yo kambela na swiya-ni-moya leswi nga riki na tsalwa ra lebula

Loko u fanele u nga ri na tsalwa endzeni ka <label>, ku nghenisa ku vekiwa tanihilaha u nga langutelaka hakona. Sweswi yi tirha ntsena eka mabokisi yo kambela lama nga riki ya le ndzeni ka inthanete ni swiya-ni-moya. Tsundzuka ku ha nyika xivumbeko xo karhi xa lebula ya thekinoloji yo pfuneta (xikombiso, ku tirhisa 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>

Ku hlawula

Xiya leswaku timenyu to tala ta native select—ku nga eka Safari na Chrome—ti ni tikhoneni leti rhendzelekaka leti nga cinciwiki hi ku tirhisa border-radiusswilo.

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

Eka <select>vulawuri lebyi nga na multiplexihlawulekisi, swihlawulekisi swo tala swi kombisiwa hi ku tiyimisela.

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

Vulawuri bya xiyimo xa le henhla

Loko u lava ku veka tsalwa ro olova ekusuhi ni lebula ya fomo endzeni ka fomo, tirhisa .form-control-statictlilasi eka <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>

Xiyimo xa ku kongomisa

Hi susa outlineswitayele swa ntolovelo eka vulawuri byin’wana bya fomo ivi hi tirhisa a box-shadowematshan’weni ya yona ya :focus.

`:focus`Xiyimo xa demo

Nyingiso wa xikombiso lexi nga laha henhla wu tirhisa switayele swa ntolovelo eka matsalwa ya hina ku kombisa :focusxiyimo eka .form-control.

Xiyimo xa vulema

Engetela disabledxihlawulekisi xa boolean eka input ku sivela ku tirhisana ka vatirhisi. Swingheniso leswi nga tirhiki swi vonaka swi olova naswona swi engetela not-allowedxikombiso.

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

Tisete ta tinsimu leti nga tirhiki

Engetela disabledxihlawulekisi eka a <fieldset>ku tshikisa vulawuri hinkwabyo endzeni ka <fieldset>hi nkarhi wun’we.

Xitsundzuxo mayelana na ntirho wa link wa`<a>`

Hi ku tiyimisela, swihlamusela-marito swi ta khoma vulawuri hinkwabyo bya xivumbeko xa ntumbuluko ( <input>, <select>na <button>swiaki) endzeni ka a <fieldset disabled>tanihi leswi nga tirhiki, swi sivela ku tirhisana ka khibhodi na mbeva eka swona. Kambe loko fomo ya wena yi tlhela yi katsa <a ... class="btn btn-*">swiaki, leswi swi ta nyikiwa ntsena xitayili xa pointer-events: none. Hilaha swi kombisiweke hakona eka xiyenge lexi vulavulaka hi xiyimo lexi nga tirhiki xa swikomba-nkarhi (naswona hi ku kongoma eka xiyengentsongo xa swiaki swa anchor), nhundzu leyi ya CSS a yi si ringanisiwa naswona a yi seketeriwi hi ku helela eka Opera 18 na le hansi, kumbe eka Internet Explorer 11, naswona yi hlule 't sivela vatirhisi va khibhodi ku kota ku kongomisa kumbe ku tirhisa swihlanganisi leswi. Kutani leswaku u hlayiseka, tirhisa JavaScript leyi endleriweke wena ku tshikisa swihlanganisi swo tano.

Ku fambisana ka cross-browser

Loko Bootstrap yi ta tirhisa switayele leswi eka swihlamusela-marito hinkwaswo, Internet Explorer 11 na le hansi a yi seketeli hi ku helela disabledxihlawulekisi eka <fieldset>. Tirhisa JavaScript ya ntolovelo ku tshikisa fieldset eka swihlamusela-marito leswi.

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

Xivulavulelo xo hlaya ntsena

Engetela readonlyxihlawulekisi xa boolean eka xingheniso ku sivela ku cinciwa ka nkoka wa xingheniso. Swingheniso leswi hlayiwaka ntsena swi vonaka swi olova (ku fana ni swingheniso leswi nga tirhiki), kambe hlayisa xikombiso xa ntolovelo.

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

Tsalwa ra mpfuneto

Tsalwa ra mpfuneto wa xiyimo xa xibokisana xa vulawuri bya fomo.

Ku hlanganisa tsalwa ra mpfuneto na vulawuri bya fomo

Tsalwa ra mpfuneto ri fanele ku fambelanisiwa hi ku kongoma na vulawuri bya fomo lebyi ri fambelanaka na ku tirhisa aria-describedbyxihlawulekisi. Leswi swi ta tiyisisa leswaku thekinoloji yo pfuneta – ku fana na swihlaya swa xikirini – swi ta tivisa tsalwa leri ra mpfuneto loko mutirhisi a kongomisa kumbe ku nghena eka vulawuri.

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

Ku tiyisisa swi vula leswaku

Bootstrap yi katsa switayele swa ku tiyisisa swihoxo, xilemukiso, na swiyimo swa ku humelela eka vulawuri bya fomo. Ku tirhisa, engetela .has-warning, .has-error, kumbe .has-successeka xiaki xa mutswari. .control-label, , yin’wana na yin’wana .form-controlna le .help-blockndzeni ka elemente yoleyo yi ta amukela switayele swa ku tiyisisa.

Ku hundzisela xiyimo xa ku tiyisisa eka thekinoloji yo pfuneta na vatirhisi lava nga voniki mihlovo

Ku tirhisa switayele leswi swa ku tiyisisa ku kombisa xiyimo xa vulawuri bya xivumbeko swi nyika ntsena xikombiso lexi voniwaka, lexi simekiweke eka mihlovo, lexi nga ta hundziseriwa eka vatirhisi va thekinoloji yo pfuneta - ku fana na swihlaya swa xikirini - kumbe eka vatirhisi lava nga voniki mihlovo.

Tiyisisa leswaku xikombiso xin’wana xa mfumo na xona xa nyikiwa. Xikombiso, u nga katsa xitsundzuxo mayelana na xiyimo eka <label>tsalwa ra vulawuri bya fomo hi roxe (tanihi leswi swi nga xiswona eka xikombiso xa khodi lexi landzelaka), u katsa Glyphicon (hi tsalwa rin’wana leri faneleke hi ku tirhisa .sr-onlytlilasi - vona swikombiso swa Glyphicon ), kumbe hi ku nyika mpfuneto wo engetela wa tsalwa ra block. Hi ku kongoma eka thekinoloji yo pfuneta, vulawuri bya xivumbeko lebyi nga tirhiki na byona byi nga averiwa aria-invalid="true"xihlawulekisi.

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

Hi swifaniso leswi nga hlawuriwa

U nga ha tlhela u engetela swifaniso swa mbuyelo leswi nga hlawuriwa hi ku engeteriwa ka .has-feedbackna xifaniso xa xinene.

Swifaniso swa mbuyelo swi tirha ntsena na <input class="form-control">swiaki swa matsalwa.

Swifaniso, malebvu, na mintlawa ya swingheniso

Ku vekiwa hi voko ka swifaniso swa mbuyelo swa laveka eka swingheniso leswi nga riki na lebula na mintlawa ya swingheniso leyi nga na xiengetelo exineneni. U khutaziwa swinene ku nyika malebvu ya switirhisiwa hinkwaswo hi swivangelo swa ku fikelela. Loko u lava ku sivela ku kombisiwa ka malebvu, ma tumbete ni .sr-onlytlilasi. Loko u fanele ku endla handle ka malebvu, lulamisa topnkoka wa xifaniso xa mbuyelo. Eka mintlawa ya swingheniso, lulamisa rightntikelo eka ntikelo wa pixel lowu faneleke ku ya hi ku anama ka addon ya wena.

Ku hundzisela nhlamuselo ya xifaniso eka thekinoloji yo pfuneta

Ku tiyisisa leswaku thekinoloji yo pfuneta – yo fana na swihlaya swa xikirini – swi hundzisela kahle nhlamuselo ya xifaniso, tsalwa ro engetela leri fihliweke ri fanele ku katsiwa na .sr-onlytlilasi naswona ri fambelanisiwa hi ku kongoma na vulawuri bya fomo lebyi byi fambelanaka na ku tirhisa aria-describedby. Hi ndlela yin’wana, tiyisisa leswaku nhlamuselo (xikombiso, mhaka ya leswaku ku na xilemukiso xa nsimu yo karhi yo nghenisa tsalwa) yi hundziseriwa hi xivumbeko xin’wana, ku fana na ku cinca tsalwa ra xiviri leri <label>fambelanaka na vulawuri bya xivumbeko.

Hambileswi swikombiso leswi landzelaka se swi boxa xiyimo xa ku tiyisisiwa ka vulawuri bya swona bya xivumbeko eka <label>tsalwa hi roxe, thekiniki leyi nga laha henhla (hi ku tirhisa .sr-onlytsalwa na aria-describedby) yi katsiwile hi xikongomelo xo kombisa.

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

Swifaniso leswi nga hlawuriwa hi swivumbeko swa horizontal na inline

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

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

Swifaniso leswi nga hlawuriwa leswi nga ni `.sr-only`malebvu lama fihliweke

Loko u tirhisa .sr-onlytlilasi ku fihla vulawuri bya fomo <label>(ematshan’weni yo tirhisa swihlawulekisi swin’wana swo lebula, swo tanihi aria-labelxihlawulekisi), Bootstrap yi ta lulamisa hi yoxe ndhawu ya xifaniso loko se xi engeteriwile.

<div class="form-group has-success has-feedback">
  <label class="control-label sr-only" for="inputSuccess5">Hidden label</label>
  <input type="text" class="form-control" id="inputSuccess5" aria-describedby="inputSuccess5Status">
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputSuccess5Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-success has-feedback">
  <label class="control-label sr-only" for="inputGroupSuccess4">Input group with success</label>
  <div class="input-group">
    <span class="input-group-addon">@</span>
    <input type="text" class="form-control" id="inputGroupSuccess4" aria-describedby="inputGroupSuccess4Status">
  </div>
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputGroupSuccess4Status" class="sr-only">(success)</span>
</div>

Lawula ku pima mpimo

Seta ku tlakuka hi ku tirhisa titlilasi to fana na .input-lg, na ku veka ku anama hi ku tirhisa titlilasi ta kholomo ya gridi ku fana na .col-lg-*.

Ku pima mpimo wa ku leha

Endla vulawuri bya xivumbeko byo leha kumbe byo koma lebyi fambelanaka na vukulu bya swikomba-nkarhi.

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

Vukulu bya ntlawa wa xivumbeko xa horizontal

Hi ku hatlisa sayizi malebvu na vulawuri bya xivumbeko endzeni .form-horizontalhi ku engetela .form-group-lgkumbe .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>

Ku pima mpimo wa tikholomu

Pfuxeta swingheniso eka tikholomu ta gridi, kumbe elemente yihi na yihi ya mutswari ya ntolovelo, ku sindzisa hi ku olova ku anama loku lavekaka.

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

Tithegi ta swikomba-nkarhi

Tirhisa titlilasi ta swikomba-nkarhi eka <a>, <button>, kumbe <input>elemente.

<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">

Matirhiselo lama kongomeke ya mongo

Loko titlilasi ta buti ti nga tirhisiwa eka <a>na <button>swiaki, i <button>swiaki ntsena leswi seketeriwaka endzeni ka swiphemu swa hina swa nav na navbar.

Swihlanganisi leswi tirhaka tanihi swikomba-nkarhi

Loko <a>swiaki swi tirhisiwa ku tirha tanihi swikomba-nkarhi – ku hlohlotela ntirho wa le ndzeni ka tluka, ku tlula ku famba eka tsalwa rin’wana kumbe xiyenge endzeni ka tluka ra sweswi – swi fanele ku tlhela swi nyikiwa role="button".

Ku hundzuluxeriwa ka xihlamusela-marito xa xihambano

Tanihi endlelo lerinene, hi ringanyeta swinene ku tirhisa <button>elemente nkarhi wun’wana na wun’wana loko swi koteka ku tiyisisa ku fambelana ka ku hundzuluxela ka cross-browser.

Exikarhi ka swin’wana, ku na xihoxo eka Firefox <30 lexi hi sivelaka ku veka swikomba-ndlela leswi sekeriweke eka of -, leswi endlaka leswaku swi nga fambisani kahle ni ku tlakuka ka swikomba-nkarhi swin’wana eka Firefox line-height.<input>

Swihlawulekisi

Tirhisa yin’wana ni yin’wana ya titlilasi ta swikomba-nkarhi leti nga kona ku hatlisa u endla buti leyi nga ni xitayili.

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

Ku hundzisela nhlamuselo eka thekinoloji yo pfuneta

Ku tirhisa muvala ku engetela nhlamuselo eka buti swi nyika ntsena xikombiso xa xivono, lexi nga ta ka xi nga hundziseriwi eka vatirhisi va thekinoloji yo pfuneta – ku fana na swihlaya swa xikirini. Tiyisisa leswaku rungula leri kombisiweke hi muvala ri le rivaleni eka leswi nga endzeni hi roxe (tsalwa leri vonakaka ra buti), kumbe ri katsiwa hi tindlela tin’wana, to tanihi tsalwa leri engetelekeke leri fihliweke ni .sr-onlytlilasi.

Tisayizi

Xana u fanisa swikomba-nkarhi leswikulu kumbe leswitsongo? Engetela .btn-lg, .btn-sm, kumbe .btn-xsku kuma tisayizi leti engetelekeke.

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

Endla swikomba-ndlela swa block level—leswi hlanganisaka ku anama hinkwako ka mutswari—hi ku engetela .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>

Xiyimo lexi tirhaka

Tiboto ti ta vonaka ti tshikileriwile (ti ri ni ndzhaku ka ntima, ndzilakano wa ntima ni ndzhuti lowu nghenisiweke) loko ti ri karhi ti tirha. Eka <button>swiaki, leswi swi endliwa hi ku tirhisa :active. Eka <a>swiaki, swi endliwa hi .active. Kambe, u nga tirhisa .activeeka <button>s (naswona u katsa aria-pressed="true"xihlawulekisi) loko u lava ku phindha xiyimo lexi tirhaka hi phurogireme.

Xiphemu xa buti

A swi bohi ku engetela :activetanihi leswi ku nga pseudo-class, kambe loko u lava ku sindzisa ku languteka loku fanaka, yana emahlweni u engetela .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>

Xiaki xa anchor

Engetela .activetlilasi eka <a>swikomba-nkarhi.

Xihlanganisi xa le henhla Hlanganisa

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

Xiyimo xa vulema

Endla leswaku swikomba-nkarhi swi languteka swi nga tikhomi hi ku swi fada endzhaku hi opacity.

Xiphemu xa buti

Engetela disabledxihlawulekisi eka <button>swikomba-nkarhi.

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

Ku fambisana ka cross-browser

Loko u engetela disabledxihlawulekisi eka a <button>, Internet Explorer 9 na le hansi yi ta endla leswaku tsalwa ri va ra grey hi text-shadow yo nyenyetsa leyi hi nga ta ka hi nga yi lulamisi.

Xiaki xa anchor

Engetela .disabledtlilasi eka <a>swikomba-nkarhi.

Xihlanganisi xa le henhla Hlanganisa

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

Hi tirhisa .disabledtanihi tlilasi ya vukorhokeri laha, ku fana na .activetlilasi leyi tolovelekeke, hikwalaho ku hava xirhangi lexi lavekaka.

Xitsundzuxo xa ntirho wa link

Tlilasi leyi yi tirhisa pointer-events: noneku ringeta ku tshikisa ntirho wa xihlanganisi wa <a>s, kambe nhundzu yoleyo ya CSS a yi si ringanisiwa naswona a yi seketeriwi hi ku helela eka Opera 18 ni le hansi, kumbe eka Internet Explorer 11. Ku engetela kwalaho, hambi ku ri eka swihlamusela-marito leswi endlaka nseketelo pointer-events: none, khibhodi ku famba-famba ku tshama ku nga khumbekanga, leswi vulaka leswaku vatirhisi va khibhodi lava vonaka na vatirhisi va thekinoloji yo pfuneta va ha ta kota ku tirhisa swihlanganisi leswi. Kutani leswaku u hlayiseka, tirhisa JavaScript leyi endleriweke wena ku tshikisa swihlanganisi swo tano.

Swifaniso leswi hlamulaka

Swifaniso eka Bootstrap 3 swi nga endliwa swi hlamula-friendly hi ku engeteriwa ka .img-responsivetlilasi. Leswi swi tirha max-width: 100%;, height: auto;na display: block;le ka xifaniso leswaku xi ringanisa kahle eka elemente ya mutswari.

Ku veka swifaniso exikarhi leswi tirhisaka .img-responsivetlilasi, tirhisa .center-blockematshan’weni ya .text-center. Vona xiyenge xa titlilasi ta vapfuni ku kuma vuxokoxoko byo tala mayelana na .center-blockmatirhiselo.

Swifaniso swa SVG na IE 8-10

Eka Internet Explorer 8-10, swifaniso swa SVG leswi .img-responsivenga ni vukulu lebyi nga ringaniki. Leswaku u lulamisa leswi, engetela width: 100% \9;laha swi lavekaka kona. Bootstrap a yi tirhisi leswi hi ku tisungulela tanihileswi swi vangaka swiphiqo eka tifomati tin’wana ta swifaniso.

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

Swivumbeko swa swifaniso

Engetelani titlilasi eka <img>elemente ku olova ku endla swifaniso eka phurojeke yihi na yihi.

Ku fambisana ka cross-browser

Hlayisa emiehleketweni leswaku Internet Explorer 8 yi pfumala nseketelo wa tikhoneni leti rhendzelekaka.

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

Mihlovo ya mongo

Humesa nhlamuselo hi ku tirhisa mihlovo hi voko ra titlilasi ta vukorhokeri byo kandziyisa. Leswi swi nga ha tlhela swi tirhisiwa eka swihlanganisi naswona swi ta va munyama eka hover ku fana na switayele swa hina swa swihlanganisi swa ntolovelo.

Fusce dapibus, tellus ac xihlambanyiso xa xivundza, tortor mauris nibh.

Nullam id dolor id nibh ultricies mimovha ut id elit.

Duis mollis, est non commodo luctus, xitsongwatsongwana xa xirhendzevutani xa xirhendzevutani.

Maecenas sed diam eget risus varius blandit yi tshama eka yona leyi nga riki na magna.

Etiam porta sem malesuada leyikulu leyi nga ni vuxiyaxiya.

Donec ullamcorper nulla leyi nga riki na metus auctor ya swilo leswi nga riki swa nkoka.

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

Ku tirhana ni ku kongoma

Minkarhi yin’wana titlilasi to kandziyisa a ti nge tirhisiwi hikwalaho ka ku kongoma ka muhlawuri un’wana. Hakanyingi, ndlela leyi eneleke yo tshungula i ku phutsela tsalwa ra wena hi a <span>na tlilasi.

Ku hundzisela nhlamuselo eka thekinoloji yo pfuneta

Ku tirhisa muvala ku engetela nhlamuselo swi nyika ntsena xikombiso xa xivono, lexi nga ta ka xi nga hundziseriwi eka vatirhisi va thekinoloji yo pfuneta – ku fana na swihlaya swa xikirini. Tiyisisa leswaku mahungu lama kombisiweke hi muvala ya le rivaleni eka nhundzu hi yoxe (mihlovo ya mongo yi tirhisiwa ntsena ku tiyisisa nhlamuselo leyi se yi nga kona eka tsalwa/ximaki), kumbe ku katsiwa hi ku tirhisa tindlela tin’wana, ku fana na tsalwa ro engetela leri fihliweke na .sr-onlytlilasi .

Swivumbeko swa mongo

Ku fana na titlilasi ta mihlovo ya tsalwa ra mongo, veka hi ku olova ndzhaku ka elemente eka tlilasi yihi na yihi ya mongo. Swiphemu swa anchor swi ta va munyama eka hover, ku fana na titlilasi ta matsalwa.

Nullam id dolor id nibh ultricies mimovha ut id elit.

Duis mollis, est non commodo luctus, xitsongwatsongwana xa xirhendzevutani xa xirhendzevutani.

Maecenas sed diam eget risus varius blandit yi tshama eka yona leyi nga riki na magna.

Etiam porta sem malesuada leyikulu leyi nga ni vuxiyaxiya.

Donec ullamcorper nulla leyi nga riki na metus auctor ya swilo leswi nga riki swa nkoka.

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

Ku tirhana ni ku kongoma

Minkarhi yin’wana titlilasi ta le ndzhaku ta xiyimo a ti nge tirhisiwi hikwalaho ka ku kongoma ka muhlawuri un’wana. Eka swiyimo swin’wana, ndlela leyi eneleke yo tshungula i ku phutsela nhundzu ya elemente ya wena hi a <div>na tlilasi.

Ku hundzisela nhlamuselo eka thekinoloji yo pfuneta

Ku fana na mihlovo ya mongo , tiyisisa leswaku nhlamuselo yihi na yihi leyi hundziseriwaka hi ku tirhisa mihlovo na yona yi hundziseriwa hi xivumbeko lexi nga riki xa nkombiso ntsena.

Pfala xifaniso

Tirhisa xifaniso xa ku pfala xa generic ku bakanya swilo swo fana na ti modals na switsundzuxo.

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

Tikhereti

Tirhisa ti carets ku kombisa ntirho wa dropdown na nkongomiso. Xiya leswaku caret ya ntolovelo yi ta tlhelela endzhaku hi yoxe eka timenyu leti rhetaka .

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

Ku papamala hi ku hatlisa

Papamala elemente kuya eximatsini kumbe exineneni na tlilasi. !importantyi katsiwile ku papalata timhaka ta ku kongoma. Titlilasi tinga tlhela titirhisiwa tani hi mixins.

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

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

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

Swibokisana swa nhundzu ya le xikarhi

Seta elemente eka display: blockna le xikarhi hi ku tirhisa margin. Yi kumeka tani hi mixin na class.

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

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

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

Clearfix

Hlawula s hi ku olova floathi ku engetela .clearfix eka xiaki xa mutswari . Ku tirhisa micro clearfix tani hi leswi swi tivekeke ngopfu hi Nicolas Gallagher. Swinga tlhela switirhisiwa tani hi 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();
}

Ku kombisa na ku tumbeta leswi nga endzeni

Sindzisa elemente ku kombisiwa kumbe ku fihliwa ( ku katsa na vahlayi va xikirini ) hi ku tirhisa .showna .hiddentitlilasi. Titlilasi leti ti tirhisa !importantku papalata ku lwisana ka swilo leswi kongomeke, ku fana ni ku papamala hi ku hatlisa . Ti kumeka ntsena eka ku cinca-cinca ka levele ya block. Tinga tlhela titirhisiwa tani hi mixins.

.hideyi kumeka, kambe a hi minkarhi hinkwayo yi khumbaka swihlaya swa xikirini naswona yi nga ha tirhisiwi ku sukela eka v3.0.1. Tirhisa .hiddenkumbe .sr-onlyematshan’weni ya sweswo.

Ku tlula kwalaho, .invisibleyi nga tirhisiwa ku cinca-cinca ntsena ku vonaka ka elemente, leswi vulaka leswaku ya yona displaya yi cinciwanga naswona elemente ya ha kota ku khumba ku khuluka ka tsalwa.

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

Xihlaya xa xikirini na swilo swo famba-famba swa khibhodi

Fihla elemente eka switirhisiwa hinkwaswo handle ka swihlaya swa xikirini leswi nga na .sr-only. Hlanganisa .sr-onlyna .sr-only-focusableku kombisa elemente nakambe loko yi kongomisiwile (xikombiso hi mutirhisi wa khibhodi ntsena). Swi laveka ku landzelela maendlelo lamanene ya ku fikelela . Swinga tlhela switirhisiwa tani hi mixins.

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

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

Ku cinciwa ka swifaniso

Tirhisa .text-hidetlilasi kumbe mixin ku pfuneta ku siva nhundzu ya tsalwa ra elemente hi xifaniso xa le ndzhaku.

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

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

Ku kuma nhluvukiso wo hatlisa lowu nga na xinghana eka tiselfoni, tirhisa titlilasi leti ta vukorhokeri byo kombisa na ku tumbeta swilo hi xitirhisiwa hi ku tirhisa xivutiso xa vuhangalasi bya mahungu. Nakambe ku katsiwile titlilasi ta vukorhokeri byo cinca-cinca swilo loko swi kandziyisiwa.

Ringeta ku tirhisa leswi hi mpimo lowu pimiweke naswona papalata ku endla vuhundzuluxeri lebyi hambaneke hi ku helela bya sayiti yin’we. Ematshan’weni ya sweswo, ti tirhise leswaku u tatisa ndlela leyi xitirhisiwa xin’wana ni xin’wana xi vulavulaka ha yona.

Titlilasi leti kumekaka

Tirhisa yin’we kumbe nhlanganelo wa titlilasi leti nga kona ku cinca-cinca nhundzu ku tsemakanya tindhawu to wisa ta xivono.

	Switirhisiwa leswitsongo leswi engetelekekeTifoni (<768px) .	Switirhisiwa leswitsongoTiphilisi (≥768px) .	Switirhisiwa swa le xikarhiTideskithophu (≥992px) .	Switirhisiwa leswikuluTideskithophu (≥1200px) .
`.visible-xs-*`	Swi vonaka	Tumbetile	Tumbetile	Tumbetile
`.visible-sm-*`	Tumbetile	Swi vonaka	Tumbetile	Tumbetile
`.visible-md-*`	Tumbetile	Tumbetile	Swi vonaka	Tumbetile
`.visible-lg-*`	Tumbetile	Tumbetile	Tumbetile	Swi vonaka
`.hidden-xs`	Tumbetile	Swi vonaka	Swi vonaka	Swi vonaka
`.hidden-sm`	Swi vonaka	Tumbetile	Swi vonaka	Swi vonaka
`.hidden-md`	Swi vonaka	Swi vonaka	Tumbetile	Swi vonaka
`.hidden-lg`	Swi vonaka	Swi vonaka	Swi vonaka	Tumbetile

Ku sukela eka v3.2.0, .visible-*-*titlilasi ta breakpoint yin’wana na yin’wana ti ta hi ku hambana kanharhu, yin’we eka nkoka wun’wana na wun’wana displaywa nhundzu ya CSS leyi xaxametiweke laha hansi.

Ntlawa wa titlilasi	CSS`display`
`.visible-*-block`	`display: block;`
`.visible-*-inline`	`display: inline;`
`.visible-*-inline-block`	`display: inline-block;`

Kutani, eka swikirini leswitsongo leswi engetelekeke ( xs) hi xikombiso, .visible-*-*titlilasi leti nga kona hi leti: .visible-xs-block, .visible-xs-inline, na .visible-xs-inline-block.

Titlilasi ta .visible-xs, .visible-sm, .visible-md, na .visible-lgtona ti kona, kambe ti nga ha tirhisiwi ku sukela eka v3.2.0 . Ti kwalomu ka ku ringana na .visible-*-block, handle ka swiyimo swo hlawuleka swo engetela <table>swa swiaki leswi fambelanaka na ku cinca-cinca.

Titlilasi to gandlisa

Ku fana ni titlilasi ta nkarhi na nkarhi leti hlamulaka, tirhisa leti ku cinca-cinca swilo leswaku u ta kandziyisiwa.

Titlilasi	Xihlamusela-marito	Ku gandlisa
`.visible-print-block` `.visible-print-inline` `.visible-print-inline-block`	Tumbetile	Swi vonaka
`.hidden-print`	Swi vonaka	Tumbetile

Tlilasi .visible-printna yona yi kona kambe yi nga ha tirhisiwi ku sukela eka v3.2.0 . Yi kwalomu ka ku ringana na .visible-print-block, handle ka swiyimo swo hlawuleka swo engetela swa <table>swiaki leswi fambelanaka na -.

Milandzu ya swikambelo

Cinca sayizi ya browser ya wena kutani u layicha eka switirhisiwa swo hambana ku kambela titlilasi ta vukorhokeri leti hlamulaka.

Swi vonaka eka...

Swikombiso swa rihlaza swi kombisa elemente ya vonaka eka xivono xa wena xa sweswi.

Switsongo swinene ✔ Swi vonaka eka x-small

Xitsongo ✔ Swi vonaka eka leswitsongo

Xikarhi ✔ Swi vonaka eka medium

Lexikulu ✔ Swi vonaka eka leswikulu

Swintsongo swinene na leswintsongo ✔ Swi vonaka eka x-small na small

Xikarhi na lexikulu ✔ Swi vonaka eka swa le xikarhi ni leswikulu

Swintsongo swinene na swa le xikarhi ✔ Swi vonaka eka x-small na medium

Switsongo ni leswikulu ✔ Swi vonaka eka leswitsongo ni leswikulu

Switsongo swinene na leswikulu ✔ Swi vonaka eka x-small na leyikulu

Switsongo na swa le xikarhi ✔ Swi vonaka eka leswitsongo ni swa le xikarhi

Ku fihliwile eka...

Laha, swikombiso swa rihlaza swi tlhela swi kombisa leswaku elemente yi fihliwile eka xivono xa wena xa sweswi.

Switsongo swinene ✔ Yi fihliwile eka x-small

Xitsongo ✔ Yi fihliwile eka leswitsongo

Xikarhi ✔ Yi fihliwile eka medium

Lexikulu ✔ Yi fihliwile eka leyikulu

Swintsongo swinene na leswintsongo ✔ Yi fihliwile eka x-small na small

Xikarhi na lexikulu ✔ Yi fihliwile eka ya le xikarhi na leyikulu

Swintsongo swinene na swa le xikarhi ✔ Yi fihliwile eka x-small na medium

Switsongo ni leswikulu ✔ Yi tumbetiwe eka leswitsongo ni leswikulu

Switsongo swinene na leswikulu ✔ Yi fihliwile eka x-small na leyikulu

Switsongo na swa le xikarhi ✔ Yi fihliwile eka leswitsongo na swa le xikarhi

CSS ya Bootstrap yi akiwile eka Less, preprocessor leyi nga na ntirho wo engetela ku fana na swilo leswi cinca-cincaka, mixins, na mintirho yo hlengeleta CSS. Lava va lavaka ku tirhisa tifayela ta xihlovo xa Less ematshan’weni ya tifayela ta hina ta CSS leti hlengeletiweke va nga tirhisa swilo swo tala leswi cinca-cincaka ni ti- mixin leti hi ti tirhisaka eka rimba hinkwaro.

Swilo leswi cinca-cincaka swa gridi na mixins swi katsiwile endzeni ka xiyenge xa sisiteme ya Gridi .

Ku hlengeleta Bootstrap

Bootstrap yi nga tirhisiwa hi tindlela timbirhi: hi CSS leyi hlengeletiweke kumbe hi tifayela ta xihlovo xa Less. Ku hlengeleta tifayela ta Less, languta xiyenge xa Ku Sungula ku kuma ndlela yo lulamisa ndhawu ya wena ya nhluvukiso ku tirhisa swileriso leswi lavekaka.

Switirhisiwa swa nhlengeleto wa vanhu va vunharhu swi nga tirha na Bootstrap, kambe a swi seketeriwi hi ntlawa wa hina wa nkoka.

Swilo leswi cinca-cincaka

Swilo leswi cinca-cincaka swi tirhisiwa eka phurojeke hinkwayo tanihi ndlela yo hlanganisa na ku avelana mimpimo leyi tirhisiwaka ngopfu ku fana na mihlovo, ku hambana, kumbe switachi swa tifonto. Ku kuma ku tshoveka loku heleleke, hi kombela u vona Customizer .

Mihlovo

Hi ku olova tirhisa swikimi swimbirhi swa mihlovo: greyscale na semantic. Mihlovo ya greyscale yi nyika mfikelelo wo hatlisa eka tinxaka leti tirhisiwaka ngopfu ta ntima kasi semantiki yi katsa mihlovo yo hambana leyi averiweke mimpimo ya xiyimo leyi nga na nhlamuselo.

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

Tirhisa xin’wana na xin’wana xa swilo leswi swa mihlovo tanihi leswi swi nga xiswona kutani u swi avela nakambe eka swilo leswi cinca-cincaka leswi nga ni nhlamuselo swinene eka phurojeke ya wena.

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

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

Ku endliwa ka swigolonyana

Swilo swo hlayanyana leswi cinca-cincaka swo hatlisa swi cinca-cinca swiaki swa nkoka swa marhambu ya sayiti ya wena.

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

Swihlanganisi

Hi ku olova xitayili swihlanganisi swa wena hi muvala lowu faneleke hi ntikelo wun’we ntsena.

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

Xiya leswaku the @link-hover-coloryi tirhisa ntirho, xitirhisiwa xin’wana xo hlamarisa ku suka eka Less, ku endla hi ku tisungulela muvala lowu faneleke wa hover. U nga tirhisa darken, lighten, saturate, na desaturate.

Ku thayipa

Seta hi ku olova thayipi ya wena, mpimo wa tsalwa, ku rhangela ni swin’wana hi swilo swi nga ri swingani leswi cinca-cincaka hi ku hatlisa. Bootstrap yi tirhisa leswi xikan’we naku nyika ti mixins to olova ta 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;

Swifaniso swa swifaniso

Swilo swimbirhi leswi cinca-cincaka swo hatlisa swo cinca ndhawu ni vito ra fayili ya swifaniso swa wena.

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

Swiphemu swa kona

Swiphemu eka Bootstrap hinkwayo swi tirhisa swin’wana leswi cinca-cincaka swa xiviri ku veka mimpimo leyi tolovelekeke. Hi leswi leswi tirhisiwaka ngopfu.

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

Ti mixins ta vaxavisi

Ti-mixin ta vaxavisi i ti-mixin ku pfuneta ku seketela swihlamusela-marito swo tala hi ku katsa swirhangi hinkwaswo swa vaxavisi leswi faneleke eka CSS ya wena leyi hlengeletiweke.

Ku ringanisiwa ka mabokisi

Seta modele wa bokisi ra swiphemu swa wena hi mixin yin’we. Leswaku u kuma mongo, vona xihloko lexi lexi pfunaka lexi humaka eka Mozilla .

Mixin yi nga ha tirhisiwi ku sukela eka v3.2.0, hi ku nghenisiwa ka Autoprefixer. Ku hlayisa ku fambisana ka le ndzhaku, Bootstrap yi ta ya emahlweni yi tirhisa mixin endzeni ku fikela eka Bootstrap v4.

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

Tikhoneni leti rhendzelekeke

Namuntlha swihlamusela-marito hinkwaswo swa manguva lawa swi seketela border-radiusnhundzu leyi nga riki na swirhangi. Hi ndlela yaleyo, akuna .border-radius()mixin, kambe Bootstrap yi katsa swipfuxeto swo hatlisa swo rhendzeleka na tikhoneni timbirhi eka tlhelo ro karhi ra nchumu.

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

Bokisi (Drop) mindzhuti

Loko vayingiseri va wena lava u va kongomisaka va tirhisa swihlamusela-marito ni switirhisiwa swa sweswinyana ni leswikulu, tiyiseka leswaku u tirhisa ntsena box-shadowndhawu yoleyo hi yoxe. Loko u lava nseketelo wa switirhisiwa swa khale swa Android (pre-v4) na iOS (pre-iOS 5), tirhisa mixin leyi nga ha tirhisiwiki ku teka -webkitxirhangi lexi lavekaka.

Mixin yi herisiwile ku sukela eka v3.1.0 , tanihileswi Bootstrap yi nga seketeliki ximfumo tipulatifomo leti hundzeriweke hi nkarhi leti nga seketeliki nhundzu ya ntolovelo. Ku hlayisa ku fambisana ka le ndzhaku, Bootstrap yi ta ya emahlweni yi tirhisa mixin endzeni ku fikela eka Bootstrap v4.

Tiyiseka leswaku u tirhisa rgba()mihlovo eka mindzhuti ya wena ya mabokisi leswaku yi hlangana kahle hilaha swi nga kotekaka hakona ni swifaniso swa le ndzhaku.

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

Ku cinca-cinca

Ti mixins to tala leswaku ti olova. Seta vuxokoxoko hinkwabyo bya ku cinca hi rin’we, kutani u boxa ku hlwela loku hambaneke na nkarhi tanihilaha swi lavekaka hakona.

Ti mixins ti nga ha tirhisiwi ku sukela eka v3.2.0, hi ku nghenisiwa ka Autoprefixer. Ku hlayisa ku fambisana ka le ndzhaku, Bootstrap yi ta ya emahlweni yi tirhisa mixins endzeni ku fikela eka 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;
}

Ku hundzuka ka swilo

Jikisa, xikalo, hundzuluxela (fambisa) kumbe ku rhetela nchumu wihi na wihi.

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

Swifaniso leswi hanyaka

Mixin yin’we yo tirhisa hinkwaswo swa CSS3’s animation properties eka xitiviso xin’we na mixin yin’wana ya swihlawulekisi swa munhu hi xiyexe.

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

Ku nga voni kahle

Seta opacity ya swihlamusela-marito hinkwaswo naswona u nyika filterfallback ya IE8.

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

Tsalwa ra xikhomela-ndhawu

Nyika mongo wa vulawuri bya fomo endzeni ka nsimu yin’wana na yin’wana.

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

Tikholomu

Endla tikholomu hi ku tirhisa CSS endzeni ka elemente yin’we.

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

Ti-gradient

Hi ku olova hundzula mihlovo yihi na yihi yimbirhi yi va gradient ya le ndzhaku. Endla nhluvuko swinene naswona u veka ndlela, tirhisa mihlovo yinharhu kumbe u tirhisa radial gradient. Hi mixin yin’we u kuma ti syntax hinkwato ta prefixed leti u nga ta ti lava.

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

U nga ha tlhela u boxa angle ya standard ya mihlovo yimbirhi, linear gradient:

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

Loko u lava gradient ya xitayili xa barber-stripe, sweswo swa olova, na swona. Ntsena boxa muvala wun’we kutani hi ta funengeta xirhendzevutana xo basa lexi vonakaka kahle.

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

Up the ante u tirhisa mihlovo yinharhu ematshan’wini ya sweswo. Seta muvala wo sungula, muvala wa vumbirhi, ku yima ka muvala wa muvala wa vumbirhi (nhlayo ya tiphesente yo fana na 25%), na muvala wa vunharhu hi ti- mixin leti:

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

Tinhloko ta le henhla! Loko u fanele u tshuka u lava ku susa gradient, tiyiseka leswaku u susa IE-specific yihi na yihi leyi filteru nga ha vaka u yi engetele. U nga endla sweswo hi ku tirhisa .reset-filter()mixin etlhelo ka background-image: none;.

Ti mixins ta vukorhokeri

Ti-mixin ta vukorhokeri i ti-mixin leti hlanganisaka swihlawulekisi swa CSS leswi nga fambelaniki hi ndlela yin’wana ku fikelela pakani yo karhi kumbe ntirho.

Clearfix

Rivala ku engetela class="clearfix"eka element yin’wana na yin’wana naswona ematshan’wini ya sweswo u engetela .clearfix()mixin laha swi faneleke. U tirhisa micro clearfix ku suka eka Nicolas Gallagher .

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

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

Ku vekiwa exikarhi ka horizontal

Hi ku hatlisa exikarhi ka elemente yihi na yihi endzeni ka mutswari wa yona. Swi lava widthkumbe max-widthku vekiwa.

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

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

Vapfuni va ku pima mpimo

Boxa swipimelo swa nchumu hi ku olova.

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

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

Tindhawu ta matsalwa leti nga cinciwaka mpimo

Hi ku olova lulamisa swihlawulekisi swa ku cinca sayizi ya ndhawu yihi na yihi ya tsalwa, kumbe xiaki xin’wana na xin’wana. Swihlawulekisi swa mahanyelo ya ntolovelo ya xihlamusela-marito ( both).

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

Ku tsema tsalwa

Tsema tsalwa hi ku olova hi ellipsis hi mixin yin’we. Swi lava element ku va blockkumbe inline-blocklevel.

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

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

Swifaniso swa retina

Boxa tindlela timbirhi ta swifaniso na tidimenxini ta xifaniso xa @1x, naswona Bootstrap yi ta nyika xivutiso xa midiya xa @2x. Loko u ri na swifaniso swo tala swo tirhela, anakanya hi ku tsala xifaniso xa wena xa retina CSS hi voko eka xivutiso xin’we xa midiya.

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

Loko Bootstrap yi akiwile eka Less, yitlhela yiva na port ya ximfumo ya Sass . Hi yi hlayisa eka vuhlayiselo bya GitHub lebyi hambaneke naswona hi khoma ku pfuxetiwa hi tsalwa ra ku hundzula.

Leswi swi katsiweke

Tanihi leswi ribuwa ra Sass ri nga na repo leyi hambaneke naswona ri tirhelaka vayingiseri lava hambaneke nyana, leswi nga endzeni ka phurojeke swi hambana swinene na phurojeke leyikulu ya Bootstrap. Leswi swi tiyisisa leswaku port ya Sass yi fambisana na tisisiteme to tala leti simekiweke eka Sass hilaha swi nga kotekaka hakona.

Ndlela	Nhlamuselo
`lib/`	Khodi ya ruby gem (ku lulamisiwa ka Sass, ku hlanganisiwa ka Rails na Compass) .
`tasks/`	Switshuriwa swa xihundzuluxi (ku hundzula le henhla ka Less ku ya eka Sass) .
`test/`	Swikambelo swa ku hlengeleta
`templates/`	Xipaci xa khampasi manifest
`vendor/assets/`	Sass, JavaScript, na tifayela ta fonto
`Rakefile`	Mintirho ya le ndzeni, yo tanihi ku rake ni ku hundzula

Endzela vuhlayiselo bya GitHub bya Sass port ku vona tifayela leti ti ri karhi ti tirha.

Ku vekiwa ka swilo

Ku kuma vuxokoxoko bya ndlela yo nghenisa na ku tirhisa Bootstrap for Sass, languta vuhlayiselo bya GitHub readme . I xihlovo xa nkarhi wa sweswi swinene naswona xi katsa vuxokoxoko byo tirhisiwa na Rails, Compass, na tiphurojeke ta Sass ta ntolovelo.

Xitirhisiwa xa ku pfula xa Sass

CSS

Nkatsakanyo

Xivumbeko xa doctype xa HTML5

Mobile ku sungula

Thayipo na swihlanganisi

Endla leswaku swi va swa ntolovelo.css

Swikhomela-ndhawu

Endlelo ra gridi

Manghenelo

Swivutiso swa vuhangalasi bya mahungu

Swihlawulekisi swa gridi

Xikombiso: Ku hlanganisiwa-ku-ya-eka-horizontal

Xikombiso: Xigwitsirisi xa mati

Xikombiso: Mobile na desktop

Xikombiso: Movha, thebulete, desktop

Xikombiso: Ku phutsela ka tikholomu

Ku vuyiseriwa ka kholomo leyi hlamulaka

Ku tlherisela endzhaku tikholomu

Tikholomu to endla swisaka

Ku oda ka tikholomu

Less mixins na swilo leswi cinca-cincaka

Swilo leswi cinca-cincaka

Ti- mixins

Xikombiso xa matirhiselo

Ku thayipa

Tinhloko-mhaka

h1. Nhlokomhaka ya bootstrap

h2. Nhlokomhaka ya bootstrap

h3. Nhlokomhaka ya bootstrap

h4. Nhlokomhaka ya bootstrap

h5. Nhlokomhaka ya bootstrap

h6. Nhlokomhaka ya bootstrap

h1. Nhlokomhaka ya bootstrap Tsalwa ra vumbirhi

h2. Nhlokomhaka ya bootstrap Tsalwa ra vumbirhi

h3. Nhlokomhaka ya bootstrap Tsalwa ra vumbirhi

h4. Nhlokomhaka ya bootstrap Tsalwa ra vumbirhi

h5. Nhlokomhaka ya bootstrap Tsalwa ra vumbirhi

h6. Nhlokomhaka ya bootstrap Tsalwa ra vumbirhi

Khopi ya miri

Khopi ya miri leyi rhangelaka

Yi akiwile hi Switsongo

Swiaki swa tsalwa ra le ndzeni ka layini

Tsalwa leri funghiweke

Tsalwa leri susiweke

Ku hlasela hi ku tirhisa tsalwa

Tsalwa leri nghenisiweke

Tsalwa leri thaleriweke ehansi

Tsalwa leritsongo

Titshembha

Switlhokovetselo swa xitaliki

Swiaki leswi cinca-cincaka

Titlilasi ta ku ringanisa

Titlilasi ta ku hundzuka

Swipfuxeto

Xifunengeto xa xisekelo

Ku sungula

Tiadirese

Switlhokovetselo swa swibokisana

Xibokisana xa xiviri

Swihlawulekisi swa blockquote

Ku thya xihlovo vito

Swikombiso swin’wana

Minxaxamelo ya swilo

A swi odariwanga

Ku odariwile

Ku nga ri na xitayili

Inline

Nhlamuselo

Nhlamuselo ya horizontal

Ku tsemiwa hi ku tisungulela

Khodi

Inline

Ku nghenisa ka mutirhisi

Xibokisana xa xisekelo

Swilo leswi cinca-cincaka

Xikombiso xa vuhumelerisi

Matafula

Xikombiso xa xisekelo

Tilayini leti nga ni mitila

Ku fambisana ka cross-browser

`:focus`Xiyimo xa demo

Xitsundzuxo mayelana na ntirho wa link wa`<a>`

Swifaniso leswi nga hlawuriwa leswi nga ni `.sr-only`malebvu lama fihliweke