Pezani zotsika pazida zazikulu za zomangamanga za Bootstrap, kuphatikiza njira yathu yopangira mawebusayiti abwinoko, othamanga, amphamvu.

HTML5 doctype

Bootstrap imagwiritsa ntchito zinthu zina za HTML ndi CSS zomwe zimafuna kugwiritsa ntchito HTML5 doctype. Phatikizanipo kumayambiriro kwa ntchito zanu zonse.

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

Mobile choyamba

Ndi Bootstrap 2, tawonjezera masitayelo okonda mafoni pazinthu zazikulu za chimango. Ndi Bootstrap 3, talembanso pulojekitiyi kuti ikhale yothandizana ndi mafoni kuyambira pachiyambi. M'malo mowonjezera masitayelo am'manja, amawotchedwa pachimake. M'malo mwake, Bootstrap ndi foni yoyamba . Masitayilo oyambira am'manja atha kupezeka mulaibulale yonse m'malo mwa mafayilo osiyana.

Kuti muwonetsetse kumasulira koyenera ndi kukhudza kukulitsa, onjezani meta tag yowonera pa <head>.

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

Mutha kuletsa zooming pazida zam'manja powonjezera user-scalable=nopa meta tag yowonera. Izi zimalepheretsa kuyang'ana, kutanthauza kuti ogwiritsa ntchito amatha kusuntha, ndipo zimapangitsa kuti tsamba lanu lizimva ngati pulogalamu yanu. Ponseponse, sitikupangira izi patsamba lililonse, chifukwa chake samalani!

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

Kujambula ndi maulalo

Bootstrap imayika mawonedwe oyambira padziko lonse lapansi, typography, ndi masitayilo a ulalo. Makamaka, ife:

Khalani background-color: #fff;pabody
Gwiritsani ntchito @font-family-base, @font-size-base, ndi mawonekedwe @line-height-basemonga typographic maziko athu
Khazikitsani mtundu wa ulalo wapadziko lonse kudzera @link-colorndikugwiritsa ntchito mizere ya ulalo pokha:hover

Masitayelo awa amapezeka mkati scaffolding.less.

Normalize.css

Pakumasulira kopitilira muyeso, timagwiritsa ntchito Normalize.css , pulojekiti ya Nicolas Gallagher ndi Jonathan Neal .

Zotengera

Bootstrap imafuna chinthu chomwe chili ndi chinthu kuti chimangire zomwe zili patsamba ndikukhazikitsa gridi yathu. Mutha kusankha chimodzi mwazotengera ziwiri zomwe mungagwiritse ntchito pamapulojekiti anu. Dziwani kuti, chifukwa paddingndi zina, palibe chidebe chomwe chili ndi nestable.

Gwiritsani .containerntchito chidebe chomvera chokhazikika chokhazikika.

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

Gwiritsani .container-fluidntchito chidebe chokulirapo chathunthu, kutengera m'lifupi lonse la malo anu owonera.

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

Bootstrap imaphatikizapo makina omvera, oyambira oyambira amadzimadzi omwe amafika pamizere 12 pomwe chipangizocho kapena kukula kwa malo owonera kumachulukira. Zimaphatikizapo makalasi okonzedweratu kuti asankhe masanjidwe osavuta, komanso zosakaniza zamphamvu zopangira masanjidwe ambiri a semantic .

Mawu Oyamba

Makina opangira ma gridi amagwiritsidwa ntchito popanga masanjidwe amasamba kudzera mumizere ingapo ndi mizati yomwe imasunga zomwe zili zanu. Umu ndi momwe dongosolo la grid Bootstrap limagwirira ntchito:

Mizere iyenera kuyikidwa mkati mwa .container(m'lifupi-wokhazikika) kapena .container-fluid(m'lifupi-wonse) kuti muyanitse bwino ndi zomatira.
Gwiritsani ntchito mizere kupanga magulu opingasa amizere.
Zomwe zili mkati ziyenera kuyikidwa m'mizere, ndipo magawo okhawo ndi omwe angakhale ana amizere.
Makasitomala ofotokozedweratu ngati .rowndipo .col-xs-4akupezeka kuti apange masanjidwe a gridi mwachangu. Zosakaniza zocheperako zitha kugwiritsidwanso ntchito pamasanjidwe ambiri a semantic.
Mizati imapanga ngalande (mipata pakati pa zomwe zili pamndandanda) kudzera pa padding. Padding imeneyo imasinthidwa m'mizere yoyambira ndi yomaliza kudzera m'mphepete mwa .rows.
Mtsinje wolakwika ndi chifukwa chake zitsanzo zili m'munsizi ndizoposa. Ndiko kuti zomwe zili mkati mwamagulu a gridi zikhale ndi zomwe sizili mu gridi.
Magawo a gridi amapangidwa pofotokoza kuchuluka kwa magawo khumi ndi awiri omwe mukufuna kukhala nawo. Mwachitsanzo, mizati itatu yofanana ingagwiritse ntchito katatu .col-xs-4.
Ngati mizati yopitilira 12 yayikidwa pamzere umodzi, gulu lirilonse la zigawo zowonjezera, ngati gawo limodzi, likulungidwa pamzere watsopano.
Makalasi a gridi amagwira ntchito pazida zokhala ndi chinsalu chokulirapo kuposa kapena chofanana ndi kukula kwake, komanso kupitilira makalasi a grid omwe amayang'ana pazida zing'onozing'ono. Choncho, mwachitsanzo kugwiritsa ntchito .col-md-*kalasi iliyonse ku chinthu sichidzangokhudza makongoletsedwe ake pazida zapakatikati komanso pazida zazikulu ngati .col-lg-*kalasi palibe.

Yang'anani ku zitsanzo zogwiritsira ntchito mfundozi pa code yanu.

Mafunso pa media

Timagwiritsa ntchito mafunso otsatirawa pamafayilo athu Ocheperako kuti tipange ma breakpoints mu grid system yathu.

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

Nthawi zina timafutukula mafunso awa kuti aphatikize a max-widthkuchepetsa CSS ku zida zocheperako.

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

Zosankha zamagulu

Onani momwe machitidwe a gridi ya Bootstrap amagwirira ntchito pazida zingapo zokhala ndi tebulo lothandizira.

	Mafoni ang'onoang'ono (<768px)	Mapiritsi ang'onoang'ono (≥768px)	Ma Desktop a zida zapakatikati ( ≥992px )	Zida Zazida zazikulu (≥1200px)
Khalidwe la grid	Yopingasa nthawi zonse	Yagubuduzika kuti iyambike, yopingasa pamwamba pa zopingasa
M'lifupi mwake	Palibe (yokha)	750px	970px pa	1170px
Chiyambi cha kalasi	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`
# ya mizati	12
M'lifupi mwake	Zadzidzidzi	~62px	~81px	~97px
Kuchuluka kwa ngalande	30px (15px mbali iliyonse ya ndime)
Nestable	Inde
Zowonongeka	Inde
Kuyitanitsa ndindalama	Inde

Chitsanzo: Zotsatizana mopingasa

Pogwiritsa ntchito gulu limodzi .col-md-*lamagulu agululi, mutha kupanga makina oyambira omwe amayambira pazida zam'manja ndi zida zam'manja (zocheperako mpaka zazing'ono) zisanakhale zopingasa pakompyuta (zapakatikati). Ikani magawo a gridi iliyonse .row.

.col-md-1

.col-md-8

.col-md-4

.col-md-6

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

Chitsanzo: Chidebe chamadzimadzi

Sinthani masanjidwe aliwonse amtundu wa gridi kukhala m'lifupi mwake mwakusintha mawonekedwe anu akunja .containerkukhala .container-fluid.

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

Chitsanzo: Pafoni ndi pakompyuta

Kodi simukufuna kuti mizati yanu ingowunjika muzida zing'onozing'ono? Gwiritsani ntchito makalasi owonjezera ang'onoang'ono ndi apakatikati powonjezera pamindandanda .col-xs-* .col-md-*yanu. Onani chitsanzo pansipa kuti mudziwe bwino momwe zonsezi zimagwirira ntchito.

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

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

.col-xs-6

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

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

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

Chitsanzo: Pafoni, tabuleti, pakompyuta

Mangani pa chitsanzo cham'mbuyomu popanga masanjidwe amphamvu kwambiri komanso amphamvu okhala ndi .col-sm-*makalasi a piritsi.

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

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

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

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

Chitsanzo: Kumanga mizati

Ngati mizati yopitilira 12 yayikidwa pamzere umodzi, gulu lirilonse la zigawo zowonjezera, ngati gawo limodzi, likulungidwa pamzere watsopano.

.col-xs-9

.col-xs-4
Popeza 9 + 4 = 13 > 12, div ya 4-column-wide iyi imakutidwa pamzere watsopano ngati gawo limodzi lolumikizana.

.col-xs-6
Mizati yotsatira ikupitilira pamzere watsopano.

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

Kukhazikitsanso magawo omvera

Ndi magawo anayi a ma gridi omwe alipo, mutha kukumana ndi zovuta zomwe, nthawi zina, mizati yanu siyimveka bwino chifukwa imodzi ndi yayitali kuposa inzake. Kuti mukonze izi, gwiritsani ntchito kuphatikiza a ndi makalasi.clearfix athu ofunikira omvera .

.col-xs-6 .col-sm-3
Sinthani malo anu owonera kapena yang'anani pa foni yanu mwachitsanzo.

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

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

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

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

Kuphatikiza pa kukonza magawo pazigawo zongoyankha, mungafunike kukonzanso zosinthira, zokankhira, kapena zokoka . Onani izi muzochitika mu grid chitsanzo .

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

Kuchepetsa mizati

Sunthani mizati kumanja pogwiritsa ntchito .col-md-offset-*makalasi. Makalasi awa amawonjezera malire akumanzere kwa gawo ndi magawo *. Mwachitsanzo, .col-md-offset-4amasuntha .col-md-4mizati inayi.

.col-md-4

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

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

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

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

Muthanso kupitilira zosinthika kuchokera pamagulu otsika a gridi ndi .col-*-offset-0makalasi.

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

Mizati ya zisa

Kuti mutsegule zomwe zili ndi gridi yokhazikika, onjezani magawo atsopano .rowndi magulu omwe ali .col-sm-*mgulu lomwe lilipo .col-sm-*. Mizere yokhazikitsidwa iyenera kukhala ndi magawo 12 kapena kucheperapo (sikufunika kuti mugwiritse ntchito magawo 12 onse omwe alipo).

Gawo 1: .col-sm-9

Gawo 2: .col-xs-8 .col-sm-6

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

Kuyitanitsa ndindalama

Sinthani mosavuta dongosolo lamagulu athu omangidwira mkati ndi .col-md-push-*makalasi .col-md-pull-*osintha.

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

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

Zosakaniza zochepa ndi zosinthika

Kuphatikiza pa makalasi a gridi omangidwiratu kuti amasanjidwe mwachangu, Bootstrap imaphatikizanso Zocheperako ndi zosakaniza kuti mupange mwachangu masanjidwe anu osavuta, a semantic.

Zosintha

Zosintha zimatsimikizira kuchuluka kwa mizati, m'lifupi mwa ngalande, ndi malo ochezera a pawailesi pomwe amayambira mizati yoyandama. Timagwiritsa ntchito izi kupanga makalasi a gridi omwe afotokozedwa pamwambapa, komanso zosakaniza zomwe zalembedwa pansipa.

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

Zosakaniza

Mixins amagwiritsidwa ntchito molumikizana ndi ma gridi osiyanasiyana kuti apange CSS ya semantic pamizere ya gridi iliyonse.

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

Kugwiritsa ntchito chitsanzo

Mutha kusintha zosinthika kukhala zomwe mumakonda, kapena ingogwiritsani ntchito zosakaniza zomwe zili ndi zikhalidwe zawo. Nachi chitsanzo chogwiritsa ntchito zosintha zosasinthika kuti mupange masanjidwe a magawo awiri okhala ndi kusiyana pakati.

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

Mitu

Mitu yonse ya HTML, <h1>kupyolera mu <h6>, ilipo. .h1kudzera .h6m'makalasi amapezekanso, chifukwa mukafuna kufananiza masitayilo amutu koma mukufunabe kuti mawu anu aziwonetsedwa pamzere.

h1 ndi. Mutu wa bootstrap	Semibold 36px
h2 ndi. Mutu wa bootstrap	Semibold 30px
h3 ndi. Mutu wa bootstrap	Semibold 24px
h4 ndi. Mutu wa bootstrap	Semibold 18px
h5 ndi. Mutu wa bootstrap	Semibold 14px
h6 ndi. Mutu wa bootstrap	Semibold 12px

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

Pangani mawu opepuka, achiwiri pamutu uliwonse wokhala ndi <small>tag yachidule kapena .smallkalasi.

h1 ndi. Mutu wa bootstrap Mawu achiwiri

h2 ndi. Mutu wa bootstrap Mawu achiwiri

h3 ndi. Mutu wa bootstrap Mawu achiwiri

h4 ndi. Mutu wa bootstrap Mawu achiwiri

h5 ndi. Mutu wa bootstrap Mawu achiwiri

h6 ndi. Mutu wa bootstrap Mawu achiwiri

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

Thupi kope

Kusakhazikika kwapadziko lonse kwa Bootstrap font-sizendi 14px , yokhala line-heightndi 1.428 . Izi zikugwiritsidwa ntchito ku <body>ndime zonse. Kuphatikiza apo, <p>(ndime) zimalandira malire apakati a theka la kutalika kwa mzere wawo (10px mwachisawawa).

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

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

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

<p>...</p>

kope lotsogolera thupi

Pangani ndime kukhala yodziwika bwino powonjezera .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Chifukwa chake, si commodo luctus.

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

Zomangidwa ndi Zochepa

Sikelo ya typographic imachokera pazigawo ziwiri Zochepa mu variables.less : @font-size-basendi @line-height-base. Choyamba ndi kukula kwa font komwe kumagwiritsidwa ntchito ponsepo ndipo chachiwiri ndi kutalika kwa mzere woyambira. Timagwiritsa ntchito masinthidwe amenewo ndi masamu osavuta kupanga mizere, ma padding, ndi kutalika kwa mzere wamitundu yathu yonse ndi zina zambiri. Sinthani Mwamakonda Anu ndikusintha kwa Bootstrap.

Zolemba zapaintaneti

Mawu olembedwa

Kuti muwonetse kuchuluka kwa mawu chifukwa cha kufunikira kwake munkhani ina, gwiritsani ntchito <mark>tag.

Mutha kugwiritsa ntchito chizindikirocho kutiwunikiranimawu.

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

Mawu achotsedwa

Kuti muwonetse zolemba zomwe zachotsedwa gwiritsani ntchito <del>tag.

~~Mzerewu walemba uyenera kutengedwa ngati malemba ochotsedwa.~~

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

Strikethrough text

Kuti muwonetse mabulogu omwe sali ofunikira gwiritsani ntchito <s>tag.

~~Mzerewu uyenera kuwonedwa ngati wosalondola.~~

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

Mawu oyikidwa

Kuti muwonetse zowonjezera pa chikalatacho gwiritsani ntchito <ins>tag.

Mzerewu walemba uyenera kutengedwa ngati chowonjezera pa chikalatacho.

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

Zolemba pansi

Kuti mutsindikire mawu gwiritsani ntchito <u>tag.

Mzere wa mawuwa uwonetsa ngati watsindikira

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

Gwiritsani ntchito ma tag otsindika a HTML okhala ndi masitayelo opepuka.

Mawu ochepa

Kuti musatsindike pakati kapena midadada ya mawu, gwiritsani ntchito <small>chizindikirocho kuti muyike mawu pa 85% kukula kwa kholo. Mitu yamutu imalandira yawoyawo font-sizepazinthu zomwe zasungidwa <small>.

Mutha kugwiritsa ntchito chinthu chamkati .smallm'malo mwa chilichonse <small>.

Mzere wa mawu awa akuyenera kuwonedwa ngati kusindikizidwa bwino.

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

Zolimba

Kuti mutsindike kachidutswa kakang'ono ka zilembo zolemera mafonti.

Kaduka kakang'ono kotsatira kamene kali ndi mawu akuda kwambiri .

<strong>rendered as bold text</strong>

Mawu Opendekeka

Potsindika kaduka kakang'ono ka mawu okhala ndi mawu opendekera.

Kaduka kakang'ono kotsatira kalembedwe ka mawu opendekera .

<em>rendered as italicized text</em>

Zinthu zina

Khalani omasuka kugwiritsa ntchito <b>komanso <i>mu HTML5. <b>cholinga chake ndi kuwunikira mawu kapena ziganizo popanda kuwonetsa kufunikira kowonjezera pomwe <i>nthawi zambiri zimakhala za mawu, mawu aukadaulo, ndi zina.

Makalasi ogwirizana

Sinthani mawu mosavuta ku zigawo zokhala ndi makalasi oyika mawu.

Mawu olowera kumanzere.

Mawu olumikizidwa pakati.

Mawu olowera kumanja.

Mawu ovomerezeka.

Palibe zolemba.

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

Maphunziro a kusintha

Sinthani mawu kukhala zigawo ndi makalasi a zilembo zazikulu.

Mawu ocheperako.

Mawu apamwamba.

Zolemba zazikulu.

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

Chidule cha mawu

Kukhazikitsa kosinthika kwazinthu za HTML <abbr>zofupikitsa ndi ma acronyms kuti awonetse mtundu wokulitsidwa pa hover. Mawu achidule okhala ndi tanthauzo titleali ndi malire apansi a madontho opepuka komanso cholozera chothandizira pa hover, zomwe zimapereka mawu owonjezera pa hover ndi kwa ogwiritsa ntchito matekinoloje othandizira.

Chidule chachidule

Chidule cha mawu akuti attr .

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

Chiyambi

Onjezani .initialismku chidule cha kukula kwa mawonekedwe ang'onoang'ono.

HTML ndiye chinthu chabwino kwambiri kuyambira mkate wodulidwa.

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

Maadiresi

Perekani zidziwitso za makolo apafupi kapena gulu lonse lantchito. Sungani masanjidwe pomaliza mizere yonse ndi <br>.

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

Dzina
Lathunthu [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>

Mawu a blockquotes

Kuti mugwire mawu midadada kuchokera kugwero lina mkati mwazolemba zanu.

Ma blockquote osasinthika

Mangirirani HTML<blockquote> iliyonse ngati mawu. Kwa mawu olunjika, timalimbikitsa a .<p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere ndi ante.

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

Zosankha za blockquote

Kusintha kwa masitayelo ndi zomwe zili pakusintha kosavuta pamiyezo <blockquote>.

Kutchula gwero

Onjezani a <footer>kuti muzindikire kochokera. Manga dzina la gwero ntchito mu <cite>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere ndi ante.

Wina wotchuka mu Source Title

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

Mawonekedwe osiyanasiyana

Onjezani .blockquote-reverseku blockquote yokhala ndi zolondola.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere ndi ante.

Wina wotchuka mu Source Title

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

Mndandanda

Osalamulidwa

Mndandanda wazinthu zomwe dongosololi lilibe kanthu .

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

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

Adalamulidwa

Mndandanda wazinthu zomwe dongosololi limafunikira momveka bwino.

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

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

Osatchulidwa

Chotsani malire okhazikika list-stylendi akumanzere pazida zamndandanda (ana apompopompo okha). Izi zimagwiranso ntchito pa mndandanda wazinthu zomwe zangotsala pang'ono za ana , kutanthauza kuti mudzafunikanso kuwonjezera kalasi pamndandanda uliwonse womwe wasungidwa.

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

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

Motsatana

Ikani zinthu zonse pamndandanda umodzi wokhala display: inline-block;ndi zotchingira zowala.

Lorem ipsum
Phasellus iaculis
Nulla volutpat

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

Kufotokozera

Mndandanda wa mawu omwe ali ndi mafotokozedwe ogwirizana nawo.

Mndandanda wamafotokozedwe: Mndandanda wamafotokozedwe ndi abwino kufotokozera mawu.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.; Donec id ili si mi porta gravida ndi eget metus.
Malesuada porta: Etiam porta sem malesuada magna mollis euismod.

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

Kufotokozera kopingasa

Pangani mawu ndi mafotokozedwe <dl>motsatira mbali ndi mbali. Imayamba kumangika ngati kusakhazikika <dl>s, koma navbar ikakula, chitani izi.

Mndandanda wamafotokozedwe: Mndandanda wamafotokozedwe ndi abwino kufotokozera mawu.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.; Donec id ili si mi porta gravida ndi eget metus.
Malesuada porta: Etiam porta sem malesuada magna mollis euismod.
Felis euismod semper eget lacinia: Fusce dapibus, tellus ac cursus commodo, tor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

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

Auto-kudulira

Mafotokozedwe opingasa adzafupikitsa mawu omwe ndi aatali kwambiri kuti asakwane kumanzere ndi text-overflow. Pamalo ocheperako, asintha kukhala mawonekedwe osakhazikika.

Motsatana

Manga zilembo zam'munsi zamakhodi ndi <code>.

Mwachitsanzo, <section>iyenera kukulungidwa ngati inline.

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

Zolemba za ogwiritsa

Gwiritsani ntchito <kbd>kuwonetsa zolowetsa zomwe nthawi zambiri zimalowetsedwa kudzera pa kiyibodi.

Kusintha maulalo, lembani cdndikutsatiridwa ndi dzina lachikwatu.
Kuti musinthe makonda, dinani 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>

Choyambirira block

Gwiritsani <pre>ntchito mizere ingapo yamakhodi. Onetsetsani kuti mwathawa m'mabokosi aliwonse mu code kuti mumasulire bwino.

<p>Zitsanzo zalemba apa...</p>

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

Mutha kuwonjezera .pre-scrollablekalasi, yomwe ingakhazikitse kutalika kwa 350px ndikupereka y-axis scrollbar.

Zosintha

Kuti muwonetse zosinthika gwiritsani ntchito <var>tag.

y = mx + b _

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

Zitsanzo zotuluka

Kuti muwonetse midadada yotuluka kuchokera ku pulogalamu gwiritsani ntchito <samp>tag.

Mawuwa akuyenera kutengedwa ngati chitsanzo chotuluka pakompyuta.

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

Chitsanzo choyambirira

Pamakongoletsedwe oyambira - zotchingira zopepuka komanso zogawa zopingasa zokha - onjezerani gulu loyambira .tableku chilichonse <table>. Zitha kuwoneka ngati zosafunikira, koma chifukwa cha kufalikira kwa matebulo a mapulagini ena monga makalendala ndi osankha masiku, tasankha kudzipatula masitaelo athu a tebulo.

Mawu ofotokozera a tebulo.
#	Dzina loyamba	Dzina lomaliza	Dzina lolowera
1	Mark	Otto	@mdo
2	Yakobo	Thornton	@mafuta
3	Larry	Mbalame	@twitter

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

Mizere yamizeremizere

Gwiritsani .table-stripedntchito kuwonjezera mbidzi-mizere pamzere uliwonse wa tebulo mkati mwa <tbody>.

Kugwirizana kwa msakatuli

Matebulo amizere amapangidwa kudzera pa :nth-childchosankha cha CSS, chomwe sichipezeka mu Internet Explorer 8.

#	Dzina loyamba	Dzina lomaliza	Dzina lolowera
1	Mark	Otto	@mdo
2	Yakobo	Thornton	@mafuta
3	Larry	Mbalame	@twitter

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

Gome lokhala ndi malire

Onjezani .table-borderedmalire kumbali zonse za tebulo ndi ma cell.

#	Dzina loyamba	Dzina lomaliza	Dzina lolowera
1	Mark	Otto	@mdo
2	Yakobo	Thornton	@mafuta
3	Larry	Mbalame	@twitter

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

Yendani m'mizere

Onjezani .table-hoverkuti mutsegule chiwongolero pamizere ya tebulo mkati mwa <tbody>.

#	Dzina loyamba	Dzina lomaliza	Dzina lolowera
1	Mark	Otto	@mdo
2	Yakobo	Thornton	@mafuta
3	Larry	Mbalame	@twitter

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

Tebulo lofupikitsidwa

Onjezani .table-condensedkuti ma tebulo azikhala ophatikizika podula ma cell padding pakati.

#	Dzina loyamba	Dzina lomaliza	Dzina lolowera
1	Mark	Otto	@mdo
2	Yakobo	Thornton	@mafuta
3	Larry Mbalame		@twitter

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

Maphunziro a Contextual

Gwiritsani ntchito makalasi okhazikika kuti musankhe mizere yamatebulo kapena ma cell amodzi.

Kalasi	Kufotokozera
`.active`	Imayika mtundu wa hover pa mzere kapena selo linalake
`.success`	Imawonetsa kuchita bwino kapena koyenera
`.info`	Imawonetsa kusintha kosalowerera ndale kapena zochita
`.warning`	Limasonyeza chenjezo limene lingafunike chisamaliro
`.danger`	Imawonetsa zochitika zowopsa kapena zoyipa

#	Mutu wagawo	Mutu wagawo	Mutu wagawo
1	Zamkatimu	Zamkatimu	Zamkatimu
2	Zamkatimu	Zamkatimu	Zamkatimu
3	Zamkatimu	Zamkatimu	Zamkatimu
4	Zamkatimu	Zamkatimu	Zamkatimu
5	Zamkatimu	Zamkatimu	Zamkatimu
6	Zamkatimu	Zamkatimu	Zamkatimu
7	Zamkatimu	Zamkatimu	Zamkatimu
8	Zamkatimu	Zamkatimu	Zamkatimu
9	Zamkatimu	Zamkatimu	Zamkatimu

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

Kupereka tanthauzo ku matekinoloje othandizira

Kugwiritsa ntchito mtundu kuti muwonjezere tanthauzo pamizere ya tebulo kapena selo la munthu aliyense kumangopereka chizindikiritso, chomwe sichidzaperekedwa kwa ogwiritsa ntchito matekinoloje othandizira - monga zowerengera zowonera. Onetsetsani kuti chidziwitso cha mtunduwo ndi chodziwikiratu kuchokera pazomwe zili (zolemba zowonekera mumzere wa tebulo/selo), kapena zikuphatikizidwa ndi njira zina, monga zolemba zina zobisika ndi .sr-onlykalasi.

Matebulo omvera

Pangani matebulo omvera mwa kukulunga chilichonse .tablekuti .table-responsiveazitha kuyenda mozungulira pazida zing'onozing'ono (pansi pa 768px). Mukawona chilichonse chokulirapo kuposa 768px, simudzawona kusiyana kulikonse pamatebulo awa.

Kudula molunjika/kudulira

Matebulo omvera amagwiritsa ntchito overflow-y: hidden, yomwe imadula chilichonse chomwe chimadutsa pansi kapena m'mphepete mwa tebulo. Makamaka, izi zitha kudulira mindandanda yotsitsa ndi ma widget ena a chipani chachitatu.

Firefox ndi masamba

Firefox ili ndi masitayelo ovuta widthomwe amasokoneza tebulo loyankha. Izi sizingalephereke popanda kuthyolako kwa Firefox komwe sitipereka mu Bootstrap:

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

Kuti mudziwe zambiri, werengani yankho la Stack Overflow iyi .

#	Mutu wapatebulo	Mutu wapatebulo	Mutu wapatebulo	Mutu wapatebulo	Mutu wapatebulo	Mutu wapatebulo
1	Table cell	Table cell	Table cell	Table cell	Table cell	Table cell
2	Table cell	Table cell	Table cell	Table cell	Table cell	Table cell
3	Table cell	Table cell	Table cell	Table cell	Table cell	Table cell

#	Mutu wapatebulo	Mutu wapatebulo	Mutu wapatebulo	Mutu wapatebulo	Mutu wapatebulo	Mutu wapatebulo
1	Table cell	Table cell	Table cell	Table cell	Table cell	Table cell
2	Table cell	Table cell	Table cell	Table cell	Table cell	Table cell
3	Table cell	Table cell	Table cell	Table cell	Table cell	Table cell

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

Chitsanzo choyambirira

Kuwongolera mawonekedwe amunthu payekha kumangolandira masitayelo apadziko lonse lapansi. Zonse zolembedwa <input>, <textarea>, ndi <select>zinthu zomwe .form-controlzili nazo zimakhazikitsidwa width: 100%;mwachisawawa. Mangani zilembo ndi zowongolera .form-groupkuti mutalikirane bwino.

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

Osasakaniza magulu amagulu ndi magulu olowa

Osasakaniza magulu amagulu mwachindunji ndi magulu olowa . M'malo mwake, sungani gulu lolowera mkati mwa gulu la mawonekedwe.

Fomu yapaintaneti

Onjezani .form-inlineku fomu yanu (yomwe sikuyenera kukhala a <form>) pazowongolera zolowera kumanzere komanso zopingasa pamzere. Izi zimangokhudza mafomu omwe ali mkati mwa mawonedwe omwe ali osachepera 768px m'lifupi.

Zingafune makulidwe amtundu

Zolowetsa ndi zosankhidwa zagwiritsidwa width: 100%;ntchito mwachisawawa mu Bootstrap. M'mawonekedwe apaintaneti, timayikanso kuti width: auto;maulamuliro angapo amatha kukhala pamzere womwewo. Kutengera masanjidwe anu, makulidwe owonjezera owonjezera angafunike.

Onjezani zolemba nthawi zonse

Owerenga pazenera adzakhala ndi vuto ndi mafomu anu ngati simuphatikiza zilembo zilizonse. Pama fomu apaintaneti, mutha kubisa zilembozo pogwiritsa ntchito .sr-onlykalasi. Palinso njira zina zoperekera chizindikiro chaukadaulo wothandizira, monga aria-label, aria-labelledbykapena mawonekedwe title. Ngati palibe chimodzi mwa izi, owerenga skrini amatha kugwiritsa ntchito mawonekedwewo placeholder, ngati alipo, koma dziwani kuti kugwiritsa placeholderntchito m'malo mwa njira zina zolembera sikulangizidwa.

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

Chopingasa mawonekedwe

Gwiritsani ntchito makalasi a gululi omwe afotokozedwa kale a Bootstrap kuti mugwirizane ndi zilembo ndi magulu a zowongolera munjira yopingasa powonjezera .form-horizontalmawonekedwe (omwe sakuyenera kukhala <form>). Kuchita izi kumasintha .form-groupkukhala ngati mizere ya gridi, kotero palibe chifukwa cha .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>

Maulamuliro othandizira

Zitsanzo za maulamuliro amtundu wokhazikika omwe amathandizidwa mu mawonekedwe achitsanzo.

Zolowetsa

Nthawi zambiri mawonekedwe owongolera, magawo otengera mawu. Mulinso chithandizo chamitundu yonse ya HTML5: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, ndi color.

Lembani chilengezo chofunikira

Zolowetsa zidzasinthidwa kwathunthu ngati zalengezedwa typebwino.

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

Magulu olowetsa

Kuti muwonjezere mawu ophatikizika kapena mabatani musanayambe komanso/kapena pambuyo pa mawu aliwonse <input>, onani gawo la gulu lolowera .

Textarea

Kuwongolera mafomu komwe kumathandizira mizere ingapo yamalemba. Sinthani rowsmawonekedwe ngati pakufunika.

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

Mabokosi ndi mawailesi

Mabokosi amasankha chimodzi kapena zingapo pamndandanda, pomwe mawayilesi ndi osankha njira imodzi kuchokera ambiri.

Mabokosi oyendera ndi mawayilesi olemala amathandizidwa, koma kuti mupereke cholozera "chosaloledwa" pa hover ya kholo <label>, mufunika kuwonjezera .disabledkalasi ku kholo .radio, .radio-inline, .checkbox, kapena .checkbox-inline.

Zofikira (zosanjikiza)

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

Mabokosi apaintaneti ndi mawayilesi

Gwiritsani ntchito .checkbox-inlinekapena .radio-inlinemakalasi pamabokosi angapo kapena mawayilesi pazowongolera zomwe zimawonekera pamzere womwewo.

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

Mabokosi ndi mawayilesi opanda zolemba

Ngati mulibe mawu mkati mwa <label>, zolowetsazo zimakhala momwe mukuyembekezera. Pakali pano imagwira ntchito pamabokosi ndi mawayilesi omwe sali pa intaneti. Kumbukirani kuperekabe mtundu wina wa zilembo zamatekinoloje othandizira (mwachitsanzo, kugwiritsa ntchito 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>

Amasankha

Zindikirani kuti makonda ambiri omwe amasankhidwa - omwe ali mu Safari ndi Chrome - ali ndi ngodya zozungulira zomwe sizingasinthidwe kudzera pa border-radiuskatundu.

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

Pazowongolera <select>zomwe zili ndi mawonekedwe multiple, zosankha zingapo zimawonetsedwa mwachisawawa.

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

Kulamulira mosasunthika

Mukafuna kuyika mawu osamveka bwino pafupi ndi chilembo cha fomu, gwiritsani ntchito .form-control-statickalasi pa <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>

Focus state

Timachotsa outlinemasitayelo okhazikika paziwongolero zamitundu box-shadowndikuyika a m'malo mwake :focus.

Demo `:focus`state

Zomwe zili pamwambazi zimagwiritsa ntchito masitayelo anthawi zonse muzolemba zathu kuwonetsa :focusdziko pa .form-control.

Dziko olumala

Onjezani mawonekedwe a disabledboolean pazolowetsa kuti mupewe kuyanjana kwa ogwiritsa ntchito. Zolowera zolemala zimawoneka zopepuka ndikuwonjezera not-allowedcholozera.

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

Magawo olemala

Onjezani zomwe zili disabledku a <fieldset>kuti muletse zowongolera zonse zomwe zili mkati mwa <fieldset>nthawi imodzi.

Chenjezo la magwiridwe antchito a ulalo`<a>`

Mwachikhazikitso, asakatuli azitha kuyang'anira mawonekedwe onse ( <input>, <select>ndi <button>zinthu) mkati <fieldset disabled>mwazolephereka, kulepheretsa kuyanjana kwa kiyibodi ndi mbewa pa iwo. Komabe, ngati mawonekedwe anu alinso ndi <a ... class="btn btn-*">zinthu, izi zidzangopatsidwa kalembedwe ka pointer-events: none. Monga taonera m'chigawo chokhudza anthu olumala a mabatani (ndipo makamaka mugawo laling'ono la nangula), katundu wa CSS sanakhazikitsidwebe ndipo sakuthandizidwa mokwanira mu Opera 18 ndi pansi, kapena mu Internet Explorer 11, ndipo adapambana. 'Letsani ogwiritsa ntchito kiyibodi kuti azitha kuyang'ana kapena kuyambitsa maulalo awa. Chifukwa chake kuti mukhale otetezeka, gwiritsani ntchito JavaScript kuti mulepheretse maulalo oterowo.

Kugwirizana kwa msakatuli

Ngakhale Bootstrap idzagwiritsa ntchito masitayelo awa mu asakatuli onse, Internet Explorer 11 ndi pansipa sizigwirizana ndi disabledmawonekedwe a <fieldset>. Gwiritsani ntchito JavaScript yokhazikika kuti muyimitse gawo la asakatuli awa.

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

Werengani kokha

Onjezani mawonekedwe a readonlyboolean pazolowetsa kuti mupewe kusintha kwa mtengo wake. Zolowetsa zowerengera zokha zimawoneka zopepuka (monga zolowetsa zozimitsidwa), koma sungani cholozera chokhazikika.

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

Thandizani mawu

Mawu othandizira mulingo wa block pazowongolera mawonekedwe.

Gwirizanitsani zolemba zothandizira ndi zowongolera mawonekedwe

Mawu othandizira akuyenera kulumikizidwa momveka bwino ndi mawonekedwe omwe akukhudzana ndi kugwiritsa ntchito mawonekedwe aria-describedby. Izi ziwonetsetsa kuti matekinoloje othandizira - monga owerenga skrini - adzalengeza mawu othandizira pamene wogwiritsa ntchito akuyang'ana kapena alowa mu ulamuliro.

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

Zotsimikizira

Bootstrap imaphatikizapo masitayelo ovomerezeka a zolakwika, chenjezo, ndikuchita bwino pakuwongolera mawonekedwe. Kuti mugwiritse ntchito, kuwonjezera .has-warning, .has-error, kapena .has-successkuzinthu zamakolo. Any .control-label, .form-control, ndipo .help-blockmkati mwa chinthucho adzalandira masitaelo ovomerezeka.

Kupereka dziko lovomerezeka kwa matekinoloje othandizira ndi ogwiritsa ntchito colorblind

Kugwiritsa ntchito masitayelo otsimikizirawa kuti awonetse momwe mawonekedwe akuwongolera kumangopereka chiwonetsero chamitundu, chomwe sichidzaperekedwa kwa ogwiritsa ntchito matekinoloje othandizira - monga owerenga skrini - kapena kwa ogwiritsa ntchito osaona.

Onetsetsani kuti palinso chisonyezero cha dziko. Mwachitsanzo, mutha kuphatikizirapo malingaliro okhudza momwe zinthu zilili m'mawu owongolera ( <label>monga momwe zilili pachitsanzo chotsatirachi), phatikizani Glyphicon (ndi mawu ena oyenerera pogwiritsa ntchito .sr-onlykalasi - onani zitsanzo za Glyphicon ), kapena popereka Thandizo lothandizira malemba block. Makamaka pamakina othandizira, zowongolera zosavomerezeka zitha kuperekedwanso mawonekedwe aria-invalid="true".

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

Ndi zithunzi zomwe mungasankhe

Mutha kuwonjezeranso zithunzi zomwe mwasankha ndikuwonjezera .has-feedbackndi chithunzi choyenera.

Zithunzi zoyankha zimangogwira ntchito ndi zolemba <input class="form-control">.

Zizindikiro, zolemba, ndi magulu olowetsa

Kuyika pamanja pazithunzi za mayankho ndikofunikira pazolowetsa zopanda zilembo komanso magulu omwe ali ndi zowonjezera kumanja. Mukulimbikitsidwa kuti mupereke zilembo pazolowetsa zonse pazifukwa zopezeka. Ngati mukufuna kuti zilembo zisawonetsedwe, zibiseni ndi .sr-onlykalasi. Ngati mukuyenera kutero popanda zilembo, sinthani topkufunikira kwa chithunzi cha mayankho. Pamagulu olowetsa, sinthani rightmtengowo kukhala mtengo woyenerera wa pixel kutengera kukula kwa addon yanu.

Kupereka tanthauzo lachifaniziro ku matekinoloje othandizira

Kuwonetsetsa kuti matekinoloje othandizira - monga zowerengera zowonera - akupereka tanthauzo lachizindikiro molondola, mawu owonjezera obisika ayenera kuphatikizidwa ndi .sr-onlykalasi ndikulumikizidwa momveka bwino ndi mawonekedwe omwe amagwirizana nawo aria-describedby. Kapenanso, onetsetsani kuti tanthauzo (mwachitsanzo, kuti pali chenjezo la gawo linalake lolowera) limaperekedwa mwanjira ina, monga kusintha mawu enieni <label>okhudzana ndi kuwongolera mawonekedwe.

Ngakhale zitsanzo zotsatirazi zikutchula kale za kutsimikizika kwa mawonekedwe awo omwe amawongolera <label>m'malemba omwewo, njira yomwe ili pamwambayi (pogwiritsa ntchito .sr-onlymalemba ndi aria-describedby) yaphatikizidwa kuti iwonetsere.

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

Mafano osankha m'njira zopingasa komanso zamkati

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

Zithunzi zomwe mungasankhe zokhala ndi `.sr-only`zilembo zobisika

Ngati mugwiritsa ntchito .sr-onlykalasi kubisa mawonekedwe owongolera <label>(m'malo mogwiritsa ntchito zina zolembera, monga mawonekedwe aria-label), Bootstrap imangosintha mawonekedwe a chithunzicho chikawonjezedwa.

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

Kuwongolera kukula

Khazikitsani utali pogwiritsa ntchito makalasi monga .input-lg, ndipo ikani m'lifupi pogwiritsa ntchito makalasi amtundu wa grid monga .col-lg-*.

Kutalika kwa kukula

Pangani zowongolera zazitali kapena zazifupi zomwe zimagwirizana ndi kukula kwa mabatani.

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

Makulidwe amagulu opingasa mawonekedwe

Kukula mwachangu zilembo ndikuwongolera mawonekedwe mkati .form-horizontalmwa kuwonjezera .form-group-lgkapena .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>

Kukula kwa mizati

Manga zolowa m'magawo a gridi, kapena chinthu chilichonse cha makolo, kuti mutsirize kukula komwe mukufuna.

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

Ma tag a batani

Gwiritsani ntchito batani la makalasi pa <a>, <button>, kapena<input> element.

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

Kugwiritsa ntchito mokhazikika

Ngakhale makalasi a mabatani amatha kugwiritsidwa ntchito <a>ndi <button>zinthu, zinthu zokha <button>ndizomwe zimathandizidwa mkati mwa nav ndi navbar.

Maulalo amakhala ngati mabatani

Ngati <a>zinthuzo zikugwiritsidwa ntchito ngati mabatani - kuyambitsa ntchito zapatsamba, m'malo mopita ku chikalata china kapena gawo lomwe lili mkati mwa tsamba lamakono - ayeneranso kupatsidwa zoyenera role="button".

Kumasulira kwakusakatula

Monga njira yabwino kwambiri, timalimbikitsa kugwiritsa ntchito <button>chinthucho ngati kuli kotheka kuti mutsimikizire kuti zikugwirizana ndi mawonekedwe akusakatula.

Mwa zina, pali cholakwika mu Firefox <30 chomwe chimatilepheretsa kukhazikitsa mabatani line-heighta <input>-based, kuwapangitsa kuti asafanane ndi kutalika kwa mabatani ena pa Firefox.

Zosankha

Gwiritsani ntchito mabatani aliwonse omwe alipo kuti mupange batani losinthidwa mwachangu.

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

Kupereka tanthauzo ku matekinoloje othandizira

Kugwiritsa ntchito mtundu kuti muwonjezere tanthauzo ku batani kumangopereka chiwonetsero chazithunzi, chomwe sichidzaperekedwa kwa ogwiritsa ntchito matekinoloje othandizira - monga owerenga pazenera. Onetsetsani kuti chidziwitso chotchulidwa ndi mtunduwo ndi chodziwikiratu kuchokera pazomwe zili (zolemba zowonekera pa batani), kapena zikuphatikizidwa ndi njira zina, monga zolemba zina zobisika ndi .sr-onlykalasi.

Makulidwe

Mukufuna mabatani akulu kapena ang'onoang'ono? Onjezani .btn-lg, .btn-sm, kapena .btn-xsma size owonjezera.

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

Pangani mabatani a mulingo wa block—omwe amatambasula kukula kwa kholo lonse— powonjezera .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>

Dziko logwira ntchito

Mabatani adzawoneka atapanikizidwa (ndi maziko akuda, malire akuda, ndi mthunzi wamkati) akamagwira ntchito. Kwa <button>zinthu, izi zimachitika kudzera pa :active. Kwa <a>zinthu, zachitika ndi .active. Komabe, mutha kugwiritsa ntchito .activepa <button>s (ndikuphatikizanso mawonekedwe aria-pressed="true") ngati mungafunike kubwereza zomwe zikuchitika mwadongosolo.

Chinthu cha batani

Palibe chifukwa chowonjezera :activechifukwa ndi gulu lachinyengo, koma ngati mukufuna kukakamiza mawonekedwe omwewo, pitirirani ndikuwonjezera .active.

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

Anchor element

Onjezani .activekalasi ku <a>mabatani.

Mgwirizano woyamba Lumikizani

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

Dziko olumala

Pangani mabatani kuti awoneke ngati osadina powatsitsimutsanso ndi opacity.

Chinthu cha batani

Onjezani mawonekedwe disabledku <button>mabatani.

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

Kugwirizana kwa msakatuli

Mukawonjeza disabledmawonekedwe a <button>, Internet Explorer 9 ndi pansipa ipangitsa mawu kukhala imvi ndi chithunzi choyipa chomwe sitingathe kukonza.

Anchor element

Onjezani .disabledkalasi ku <a>mabatani.

Mgwirizano woyamba Lumikizani

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

Timagwiritsa ntchito .disabledngati gulu lothandizira pano, lofanana ndi gulu wamba .active, kotero palibe mawu oyamba omwe amafunikira.

Link magwiridwe antchito chenjezo

Kalasi iyi imagwiritsa ntchito pointer-events: nonekuyesa kuletsa magwiridwe antchito a ulalo wa <a>s, koma katundu wa CSS sanakhazikitsidwebe ndipo sakuthandizidwa mokwanira mu Opera 18 ndi pansipa, kapena mu Internet Explorer 11. Kuphatikiza apo, ngakhale msakatuli omwe amathandizira pointer-events: none, kiyibodi kuyenda sikunakhudzidwe, kutanthauza kuti ogwiritsa ntchito kiyibodi omwe amawona komanso ogwiritsa ntchito matekinoloje othandizira azitha kuyatsa maulalowa. Chifukwa chake kuti mukhale otetezeka, gwiritsani ntchito JavaScript kuti mulepheretse maulalo oterowo.

Zithunzi zomvera

Zithunzi zomwe zili mu Bootstrap 3 zitha kupangidwa kukhala zomvera powonjezera .img-responsivekalasi. Izi zimagwiranso ntchito max-width: 100%;, height: auto;komanso display: block;pa chithunzicho kuti chikhale bwino ku chinthu cha makolo.

Kuti muike pakati zithunzi zomwe zimagwiritsa ntchito .img-responsivekalasi, gwiritsani ntchito .center-blockm'malo mwa .text-center. Onani gawo la makalasi othandizira kuti mumve zambiri za .center-blockkagwiritsidwe ntchito.

Zithunzi za SVG ndi IE 8-10

Mu Internet Explorer 8-10, zithunzi za SVG zomwe .img-responsivezili ndi kukula kwake ndizosafanana. Kuti mukonze izi, onjezerani width: 100% \9;ngati kuli kofunikira. Bootstrap siigwiritsa ntchito izi zokha chifukwa imayambitsa zovuta pamitundu ina yazithunzi.

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

Mawonekedwe azithunzi

Onjezani makalasi kuzinthu kuti <img>musinthe mosavuta zithunzi zamapulojekiti aliwonse.

Kugwirizana kwa msakatuli

Kumbukirani kuti Internet Explorer 8 ilibe chithandizo pamakona ozungulira.

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

Mitundu yosiyanasiyana

Fotokozerani tanthauzo kudzera mumitundu ndi makalasi ochepa otsimikiza. Izi zitha kugwiritsidwanso ntchito pa maulalo ndipo zidzadetsedwa pa hover monga masitayelo athu osakhazikika.

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

Nullam id dolor id nibh ultricies vehicula ut id elit.

Ndife mollis, si commodo luctus, si erat porttitor ligula.

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

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

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

Kuchita ndi tsatanetsatane

Nthawi zina makalasi otsindika sangathe kugwiritsidwa ntchito chifukwa cha kusankhidwa kwa wina. Nthawi zambiri, njira yokwanira ndiyo kukulunga mawu anu <span>ndi kalasi.

Kupereka tanthauzo ku matekinoloje othandizira

Kugwiritsa ntchito utoto kuti muwonjezere tanthauzo kumangopereka chithunzithunzi, chomwe sichidzaperekedwa kwa ogwiritsa ntchito matekinoloje othandizira - monga owerenga pazenera. Onetsetsani kuti chidziwitso cha mtunduwo ndi chodziwikiratu kuchokera pazomwe zili (mitundu yamtunduwu imangogwiritsidwa ntchito kulimbikitsa tanthauzo lomwe lilipo kale m'mawu / kuyika), kapena ikuphatikizidwa ndi njira zina, monga zolemba zina zobisika ndi .sr-onlykalasi. .

Mbiri yakale

Mofanana ndi makalasi amtundu wa zolemba, ikani mosavuta maziko a chinthu ku kalasi iliyonse. Zida za nangula zidzadetsedwa pa hover, monga makalasi amawu.

Nullam id dolor id nibh ultricies vehicula ut id elit.

Ndife mollis, si commodo luctus, si erat porttitor ligula.

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

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

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

Kuchita ndi tsatanetsatane

Nthawi zina makalasi akumbuyo sangathe kugwiritsidwa ntchito chifukwa cha kusankhidwa kwamtundu wina. Nthawi zina, njira yokwanira ndiyo kukulunga zomwe zili muzinthu zanu <div>ndi kalasi.

Kupereka tanthauzo ku matekinoloje othandizira

Monga momwe zilili ndi mitundu ya zinthu , onetsetsani kuti tanthauzo lililonse loperekedwa kudzera mumtundu uliwonse likuperekedwanso m'njira yomwe siili yowonetsera.

Tsekani chizindikiro

Gwiritsani ntchito chizindikiro chapafupi chotseka pochotsa zinthu monga ma modals ndi zidziwitso.

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

Carets

Gwiritsani ntchito ma carets kuti muwonetse magwiridwe antchito ndi njira. Zindikirani kuti chisamaliro chokhazikika chidzasinthiratu m'ma menyu otsitsa .

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

Zoyandama mwachangu

Sungani chinthu kumanzere kapena kumanja ndi kalasi. !importantimaphatikizidwa kuti tipewe zovuta zenizeni. Makalasi amathanso kugwiritsidwa ntchito ngati zosakaniza.

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

midadada yapakati

Khazikitsani chinthu kukhala display: blockndi pakati kudzera pa margin. Imapezeka ngati mixin ndi kalasi.

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

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

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

Clearfix

Kumveka bwino floats powonjezera .clearfix ku chinthu cha makolo . Amagwiritsa ntchito micro clearfix monga kutchuka kwa Nicolas Gallagher. Itha kugwiritsidwanso ntchito ngati 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();
}

Kuwonetsa ndikubisa zomwe zili

Limbikitsani chinthu kuti chiwonetsedwe kapena kubisika ( kuphatikiza zowerengera zowonera ) pogwiritsa ntchito .showndi .hiddenmakalasi. Maphunzirowa amagwiritsidwa ntchito !importantkupewa mikangano yeniyeni, monga momwe zimayandama mwachangu . Amangopezeka pakusintha ma block level. Atha kugwiritsidwanso ntchito ngati zosakaniza.

.hidelikupezeka, koma sizimakhudza nthawi zonse owerenga zenera ndipo limachotsedwa ngati v3.0.1 . Gwiritsani ntchito .hiddenkapena .sr-onlym'malo mwake.

Kuphatikiza apo, .invisiblezitha kugwiritsidwa ntchito kusintha mawonekedwe a chinthu, kutanthauza kuti displaysichinasinthidwe ndipo chinthucho chikhoza kukhudzabe kuyenda kwa chikalatacho.

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

Zowerengera pazenera ndi zowonera kiyibodi

Bisani chinthu pazida zonse kupatula zowerenga zenera zomwe zili ndi .sr-only. Phatikizani .sr-onlyndi .sr-only-focusablekuti muwonetsenso chinthucho chikayang'ana kwambiri (mwachitsanzo ndi wogwiritsa ntchito kiyibodi yekha). Zofunikira pakutsata njira zabwino zopezeka . Itha kugwiritsidwanso ntchito ngati zosakaniza.

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

Kusintha chithunzi

Gwiritsani ntchito .text-hidekalasi kapena mixin kuti musinthe zomwe zili patsamba ndi chithunzi chakumbuyo.

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

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

Kuti chitukuko chikhale chosavuta kugwiritsa ntchito mafoni, gwiritsani ntchito makalasi othandizirawa kuti muwonetse ndi kubisa zomwe zili ndi chipangizocho kudzera pafunso lazama TV. Kuphatikizidwanso ndi makalasi othandizira osinthira zinthu zikasindikizidwa.

Yesani kugwiritsa ntchito izi pang'onopang'ono ndikupewa kupanga mitundu yosiyana ya tsamba lomwelo. M'malo mwake, zigwiritseni ntchito kuti zigwirizane ndi mawonekedwe a chipangizo chilichonse.

Makalasi opezeka

Gwiritsani ntchito makalasi amodzi kapena ophatikizira omwe alipo kuti musinthe zomwe zili pagawo lowonera.

	Zida zazing'ono zowonjezeraMafoni (<768px)	Zida zazing'onoMapiritsi (≥768px)	Zida zapakatikatiMakompyuta (≥992px)	Zida zazikuluMakompyuta (≥1200px)
`.visible-xs-*`	Zowoneka	Zobisika	Zobisika	Zobisika
`.visible-sm-*`	Zobisika	Zowoneka	Zobisika	Zobisika
`.visible-md-*`	Zobisika	Zobisika	Zowoneka	Zobisika
`.visible-lg-*`	Zobisika	Zobisika	Zobisika	Zowoneka
`.hidden-xs`	Zobisika	Zowoneka	Zowoneka	Zowoneka
`.hidden-sm`	Zowoneka	Zobisika	Zowoneka	Zowoneka
`.hidden-md`	Zowoneka	Zowoneka	Zobisika	Zowoneka
`.hidden-lg`	Zowoneka	Zowoneka	Zowoneka	Zobisika

Pofika pa v3.2.0, .visible-*-*makalasi a chigawo chilichonse amabwera m'mitundu itatu, imodzi pamtengo uliwonse wa CSS displaywomwe walembedwa pansipa.

Gulu la makalasi	CSS`display`
`.visible-*-block`	`display: block;`
`.visible-*-inline`	`display: inline;`
`.visible-*-inline-block`	`display: inline-block;`

Chifukwa chake, pazowonjezera zazing'ono ( xs) zowonera mwachitsanzo, .visible-*-*makalasi omwe alipo ndi awa: .visible-xs-block, .visible-xs-inline, ndi .visible-xs-inline-block.

Makalasi .visible-xs, .visible-sm, .visible-md, .visible-lgkomanso alipo, koma achotsedwa pa v3.2.0 . Amakhala ofanana ndi .visible-*-block, kupatulapo ndi zina zapadera <table>zosinthira zinthu zokhudzana ndi kusintha.

Sindikizani makalasi

Mofanana ndi makalasi omvera okhazikika, gwiritsani ntchito izi posintha zinthu kuti zisindikizidwe.

Maphunziro	Msakatuli	Sindikizani
`.visible-print-block` `.visible-print-inline` `.visible-print-inline-block`	Zobisika	Zowoneka
`.hidden-print`	Zowoneka	Zobisika

Kalasiyi .visible-printiliponso koma idachotsedwa ngati v3.2.0 . Ndi pafupifupi ofanana ndi .visible-print-block, kupatulapo ndi zina zapadera za <table>-zinthu zokhudzana.

Mayesero a milandu

Sinthani kukula kwa msakatuli wanu kapena tsegulani pazida zosiyanasiyana kuti muyese makalasi ogwiritsa ntchito.

Zowoneka pa...

Zizindikiro zobiriwira zikuwonetsa kuti chinthucho chikuwoneka patsamba lanu lapano.

Zowonjezera zazing'ono ✔ Imawonekera pa x-yaing'ono

Wamng'ono ✔ Zowoneka pang'ono

Wapakati ✔ Imawonekera pakatikati

Chachikulu ✔ Imawonekera pachilichonse

Zowonjezera zazing'ono ndi zazing'ono ✔ Zowoneka pa x-zing'ono ndi zazing'ono

Zapakati ndi zazikulu ✔ Imawonekera pakatikati ndi zazikulu

Zowonjezera zazing'ono ndi zapakati ✔ Imawonekera pa x-yaing'ono ndi yapakati

Zing'onozing'ono ndi zazikulu ✔ Zowoneka pazing'ono ndi zazikulu

Zowonjezera zazing'ono ndi zazikulu ✔ Imawonekera pa x-yaing'ono ndi yayikulu

Yaing'ono ndi yapakati ✔ Imawonekera pa yaying'ono ndi yapakati

Zabisika pa...

Apa, zolembera zobiriwira zikuwonetsanso kuti chinthucho chabisika pamawonedwe anu apano.

Zowonjezera zazing'ono ✔ Zobisika pa x-zing'ono

Wamng'ono ✔ Zobisika pang'ono

Wapakati ✔ Zobisika pakati

Chachikulu ✔ Zobisika pachikulu

Zowonjezera zazing'ono ndi zazing'ono ✔ Zobisika pa x-zing'ono ndi zazing'ono

Zapakati ndi zazikulu ✔ Zobisika pakati ndi zazikulu

Zowonjezera zazing'ono ndi zapakati ✔ Hidden on x-small and medium

Small and large ✔ Zobisika pa zazing'ono ndi zazikulu

Extra small and large ✔ Zobisika pa x-yaing'ono ndi yayikulu

Yaing'ono ndi yapakati ✔ Hidden on small and medium

Bootstrap's CSS imamangidwa pa Zochepa, preprocessor yokhala ndi zina zowonjezera monga zosinthika, zosakaniza, ndi ntchito zopanga CSS. Omwe akuyang'ana kugwiritsa ntchito gwero Mafayilo Ochepa m'malo mwa mafayilo athu a CSS omwe adapangidwa amatha kugwiritsa ntchito mitundu ingapo ndi zosakaniza zomwe timagwiritsa ntchito pamapangidwe onse.

Zosintha za gridi ndi zosakaniza zimaphimbidwa mkati mwa gawo la Grid system .

Kupanga Bootstrap

Bootstrap ingagwiritsidwe ntchito m'njira zosachepera ziwiri: ndi CSS yopangidwa kapena ndi gwero Mafayilo Ochepa. Kuti muphatikize mafayilo Ochepa, onani gawo la Poyambira momwe mungakhazikitsire malo anu otukuka kuti muyendetse malamulo ofunikira.

Zida zophatikizira gulu lachitatu zitha kugwira ntchito ndi Bootstrap, koma sizimathandizidwa ndi gulu lathu lalikulu.

Zosintha

Zosintha zimagwiritsidwa ntchito mu polojekiti yonse ngati njira yokhazikitsira pakati ndikugawana zinthu zomwe zimagwiritsidwa ntchito nthawi zambiri monga mitundu, masitayilo, kapena mafonti. Kuti mumve zambiri, chonde onani Customizer .

Mitundu

Gwiritsani ntchito mitundu iwiri yosavuta: imvi ndi semantic. Mitundu ya grayscale imapereka mwayi wofikira mwachangu ku mithunzi yakuda yomwe imagwiritsidwa ntchito nthawi zambiri pomwe semantic imaphatikizapo mitundu yosiyanasiyana yomwe imaperekedwa kuzinthu zofunikira.

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

Gwiritsani ntchito mtundu uliwonse wamitundu iyi momwe ilili kapena muwagawirenso kumitundu yofunikira kwambiri ya polojekiti yanu.

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

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

Kumanga

Zosintha zingapo kuti musinthe mwachangu zinthu zazikulu zamafupa atsamba lanu.

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

Maulalo

Sinthani maulalo anu mosavuta ndi mtundu woyenera wokhala ndi mtengo umodzi wokha.

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

Dziwani kuti @link-hover-coloramagwiritsa ntchito, chida china chodabwitsa kuchokera ku Zochepa, kuti apange mtundu woyenera wa hover. Mutha kugwiritsa ntchito darken, lighten, saturate, ndi desaturate.

Kujambula

Khazikitsani zilembo zanu mosavuta, kukula kwa mawu, kutsogola, ndi zina zambiri pogwiritsa ntchito zosintha mwachangu. Bootstrap imagwiritsa ntchito izi komanso kupereka zosakaniza zosavuta za 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;

Zithunzi

Mitundu iwiri yofulumira yosinthira malo ndi dzina lafayilo la zithunzi zanu.

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

Zigawo

Zida mu Bootstrap zimagwiritsa ntchito zosintha zina zokhazikika pokhazikitsa zomwe zimafanana. Nazi zomwe zimagwiritsidwa ntchito kwambiri.

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

Osakaniza osakaniza

Zosakaniza za ogulitsa ndi zosakaniza zothandizira kuthandizira asakatuli angapo pophatikiza ma prefixes onse oyenera mu CSS yanu yopangidwa.

Kukula kwa bokosi

Bwezerani bokosi lachigawo chanu ndi chosakaniza chimodzi. Kuti mumve zambiri, onani nkhaniyi yothandiza kuchokera ku Mozilla .

Kusakaniza kumachotsedwa ngati v3.2.0, ndikuyambitsa Autoprefixer. Kuti musunge kuyanjana kwa mmbuyo, Bootstrap ipitiliza kugwiritsa ntchito mixin mkati mpaka Bootstrap v4.

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

Ngodya zozungulira

Masiku ano asakatuli onse amakono amathandizira border-radiuskatundu wopanda prefixed. Mwakutero, palibe .border-radius()mixin, koma Bootstrap imaphatikizapo njira zazifupi zozungulira mwachangu ngodya ziwiri kumbali inayake ya chinthu.

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

Bokosi (Drop) mithunzi

Ngati omvera anu akugwiritsa ntchito asakatuli aposachedwa komanso zida zazikulu, onetsetsani kuti mwangogwiritsa ntchito box-shadowmalowo okha. Ngati mukufuna chithandizo cha zipangizo zakale za Android (pre-v4) ndi iOS (iOS 5 isanayambe), gwiritsani ntchito mixin yomwe yachotsedwa kuti mutenge -webkitchiyambi chofunikira.

Kusakaniza kumachotsedwa ngati v3.1.0, popeza Bootstrap sichigwirizana ndi nsanja zakale zomwe sizigwirizana ndi katundu wamba. Kuti musunge kuyanjana kwa mmbuyo, Bootstrap ipitiliza kugwiritsa ntchito mixin mkati mpaka Bootstrap v4.

Onetsetsani kuti mumagwiritsa ntchito rgba()mitundu mumithunzi yamabokosi anu kuti igwirizane momasuka momwe mungathere ndi maziko.

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

Kusintha

Zosakaniza zingapo kuti muzitha kusinthasintha. Khazikitsani zosintha zonse ndi imodzi, kapena tchulani kuchedwa ndi nthawi yomwe ikufunika.

Zosakaniza zimachotsedwa ngati v3.2.0 , ndikuyambitsa Autoprefixer. Kuti musunge kuyanjana chakumbuyo, Bootstrap ipitiliza kugwiritsa ntchito zosakaniza mkati mpaka 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;
}

Kusintha

Sinthani, sikeni, masulirani (sunthani), kapena potoza chinthu chilichonse.

Zosakaniza zimachotsedwa ngati v3.2.0 , ndikuyambitsa Autoprefixer. Kuti musunge kuyanjana chakumbuyo, Bootstrap ipitiliza kugwiritsa ntchito zosakaniza mkati mpaka Bootstrap v4.

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

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

Makanema

Kusakaniza kumodzi kogwiritsa ntchito makanema ojambula a CSS3 mu chilengezo chimodzi ndi zosakaniza zina zamtundu uliwonse.

Zosakaniza zimachotsedwa ngati v3.2.0 , ndikuyambitsa Autoprefixer. Kuti musunge kuyanjana chakumbuyo, Bootstrap ipitiliza kugwiritsa ntchito zosakaniza mkati mpaka Bootstrap v4.

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

Opacity

Khazikitsani kuwala kwa asakatuli onse ndikupereka filterkubweza kwa IE8.

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

Mawu oyika malo

Perekani nkhani zowongolera mawonekedwe mkati mwa gawo lililonse.

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

Mizati

Pangani mizati kudzera pa CSS mkati mwa chinthu chimodzi.

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

Ma gradients

Sinthani mosavuta mitundu iwiri iliyonse kukhala gradient yakumbuyo. Pitani patsogolo kwambiri ndikukhazikitsa kolowera, gwiritsani ntchito mitundu itatu, kapena gwiritsani ntchito ma radial gradient. Ndi kuphatikiza kumodzi mumapeza ma syntaxes onse omwe mungafune.

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

Mutha kutchulanso ngodya yamitundu iwiri, mizere yozungulira:

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

Ngati mukufuna mizere yometa, ndizosavuta, nanunso. Ingotchulani mtundu umodzi ndipo tidzakuta mizere yoyera yowoneka bwino.

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

Pamwamba pa ante ndikugwiritsa ntchito mitundu itatu m'malo mwake. Khazikitsani mtundu woyamba, wachiwiri, mtundu wachiwiri woyimitsa (mtengo wamtengo wapatali ngati 25%), ndi mtundu wachitatu wokhala ndi zosakaniza izi:

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

Mungodziwiratu! Ngati mungafunike kuchotsa gradient, onetsetsani kuti mwachotsa chilichonse cha IE chomwe filtermungawonjezere. Mutha kuchita izi pogwiritsa ntchito .reset-filter()mixin pamodzi background-image: none;.

Zosakaniza zothandiza

Zosakaniza zothandiza ndi zosakaniza zomwe zimaphatikiza zinthu zina za CSS zosagwirizana kuti zikwaniritse cholinga kapena ntchito inayake.

Clearfix

Iwalani kuwonjezera class="clearfix"pa chinthu chilichonse ndipo m'malo mwake onjezerani .clearfix()mixin ngati kuli koyenera. Amagwiritsa ntchito micro clearfix kuchokera kwa Nicolas Gallagher .

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

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

Chopingasa pakati

Ikani mwachangu chinthu chilichonse mkati mwa kholo lake. Imafunika widthkapena max-widthkukhazikitsidwa.

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

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

Wothandizira saizi

Tchulani miyeso ya chinthu mosavuta.

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

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

Malemba osinthika

Konzani zosankha zosinthira mosavuta zamtundu uliwonse, kapena china chilichonse. Zosintha pamachitidwe a msakatuli wabwinobwino ( both).

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

Kuchepetsa mawu

Chepetsani mawu mosavuta ndi ellipsis ndi chosakaniza chimodzi. Imafunika chinthu kukhala blockkapena inline-blockmlingo.

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

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

Zithunzi za retina

Tchulani njira ziwiri zazithunzi ndi @1x kukula kwazithunzi, ndipo Bootstrap ipereka @2x media query. Ngati muli ndi zithunzi zambiri zoti mugwiritse ntchito, ganizirani kulemba chithunzi chanu cha retina CSS pamanja pafunso limodzi lazakanema.

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

Ngakhale Bootstrap imamangidwa Pang'ono, ilinso ndi doko lovomerezeka la Sass . Timachisunga munkhokwe ya GitHub ndikusintha zosintha ndi script yosinthira.

Zomwe zikuphatikizidwa

Popeza doko la Sass lili ndi repo lapadera ndipo limatumikira anthu osiyana pang'ono, zomwe zili mu polojekitiyi zimasiyana kwambiri ndi polojekiti yayikulu ya Bootstrap. Izi zimatsimikizira kuti doko la Sass likugwirizana ndi machitidwe ambiri a Sass momwe angathere.

Njira	Kufotokozera
`lib/`	Nambala yamtengo wapatali ya Ruby (Masinthidwe a Sass, Ma Rail ndi Compass kuphatikiza)
`tasks/`	Zolemba zosinthira (kutembenukira kumtunda Pang'ono kupita ku Sass)
`test/`	Mayeso ophatikiza
`templates/`	Chiwonetsero cha phukusi la Compass
`vendor/assets/`	Sass, JavaScript, ndi mafayilo amtundu
`Rakefile`	Ntchito zamkati, monga rake ndikusintha

Pitani ku Sass port's GitHub repository kuti muwone mafayilowa akugwira ntchito.

Kuyika

Kuti mumve zambiri zamomwe mungayikitsire ndikugwiritsa ntchito Bootstrap ya Sass, onani tsamba la GitHub lowerenga . Ndilo gwero laposachedwa kwambiri ndipo limaphatikizapo zambiri zogwiritsidwa ntchito ndi Rails, Compass, ndi mapulojekiti wamba a Sass.

Bootstrap kwa Sass

CSS

Mwachidule

HTML5 doctype

Mobile choyamba

Kujambula ndi maulalo

Normalize.css

Zotengera

Grid system

Mawu Oyamba

Mafunso pa media

Zosankha zamagulu

Chitsanzo: Zotsatizana mopingasa

Chitsanzo: Chidebe chamadzimadzi

Chitsanzo: Pafoni ndi pakompyuta

Chitsanzo: Pafoni, tabuleti, pakompyuta

Chitsanzo: Kumanga mizati

Kukhazikitsanso magawo omvera

Kuchepetsa mizati

Mizati ya zisa

Kuyitanitsa ndindalama

Zosakaniza zochepa ndi zosinthika

Zosintha

Zosakaniza

Kugwiritsa ntchito chitsanzo

Kujambula

Mitu

h1 ndi. Mutu wa bootstrap

h2 ndi. Mutu wa bootstrap

h3 ndi. Mutu wa bootstrap

h4 ndi. Mutu wa bootstrap

h5 ndi. Mutu wa bootstrap

h6 ndi. Mutu wa bootstrap

h1 ndi. Mutu wa bootstrap Mawu achiwiri

h2 ndi. Mutu wa bootstrap Mawu achiwiri

h3 ndi. Mutu wa bootstrap Mawu achiwiri

h4 ndi. Mutu wa bootstrap Mawu achiwiri

h5 ndi. Mutu wa bootstrap Mawu achiwiri

h6 ndi. Mutu wa bootstrap Mawu achiwiri

Thupi kope

kope lotsogolera thupi

Zomangidwa ndi Zochepa

Zolemba zapaintaneti

Mawu olembedwa

Mawu achotsedwa

Strikethrough text

Mawu oyikidwa

Zolemba pansi

Mawu ochepa

Zolimba

Mawu Opendekeka

Zinthu zina

Makalasi ogwirizana

Maphunziro a kusintha

Chidule cha mawu

Chidule chachidule

Chiyambi

Maadiresi

Mawu a blockquotes

Ma blockquote osasinthika

Zosankha za blockquote

Kutchula gwero

Mawonekedwe osiyanasiyana

Mndandanda

Osalamulidwa

Adalamulidwa

Osatchulidwa

Motsatana

Kufotokozera

Kufotokozera kopingasa

Auto-kudulira

Kodi

Motsatana

Zolemba za ogwiritsa

Choyambirira block

Zosintha

Zitsanzo zotuluka

Matebulo

Chitsanzo choyambirira

Mizere yamizeremizere

Kugwirizana kwa msakatuli

Demo `:focus`state

Chenjezo la magwiridwe antchito a ulalo`<a>`

Zithunzi zomwe mungasankhe zokhala ndi `.sr-only`zilembo zobisika