Tora iyo yakaderera pane akakosha zvidimbu zveBootstrap zvivakwa, kusanganisira maitiro edu ekuvandudza, nekukurumidza, kwakasimba webhu kuvandudza.

HTML5 doctype

Bootstrap inoshandisa zvimwe zveHTML zvinhu uye CSS zvivakwa zvinoda kushandiswa kweHTML5 doctype. Isanganise pakutanga kwemapurojekiti ako ese.

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

Mobile kutanga

NeBootstrap 2, isu takawedzera sarudzo dzenhare dzehushamwari dzezvinhu zvakakosha zvechimiro. NeBootstrap 3, takanyora purojekiti kuti ive inoshamwaridzana kubva pakutanga. Panzvimbo pekuwedzera pane sarudzo dzenharembozha, dzakabikwa mukati chaimo. Muchokwadi , Bootstrap inhare yekutanga . Nharembozha yekutanga masitaera anogona kuwanikwa muraibhurari yese panzvimbo yemafaira akasiyana.

Kuti uve nechokwadi chekupa uye kubata kuswedera, wedzera iyo yekutarisa meta tag kune yako <head>.

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

Iwe unogona kudzima kugona kwekusimudzira pane nharembozha nekuwedzera user-scalable=nokune yekuona meta tag. Izvi zvinomisa kuswedera, zvichireva kuti vashandisi vanokwanisa chete kupururudza, uye zvinokonzeresa kuti saiti yako inzwe zvishoma senge application yemuno. Pakazara, isu hatikurudzire izvi pane yega saiti, saka chenjera!

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

Typography uye zvinongedzo

Bootstrap inoseta kuratidzwa kwepasirese, kutaipa, uye mataira ekubatanidza. Kunyanya, isu:

Set background-color: #fff;pabody
Shandisa iyo @font-family-base, @font-size-base, uye @line-height-basehunhu seyedu typographic base
Seta iyo yepasi rose yekubatanidza ruvara kuburikidza @link-coloruye shandisa chinongedzo pasi pemutsara chete pa:hover

Aya masitayera anogona kuwanikwa mukati scaffolding.less.

Normalize.css

Kuvandudza mashandisirwo ebrowser, tinoshandisa Normalize.css , chirongwa chakaitwa naNicolas Gallagher naJonathan Neal .

Containers

Bootstrap inoda chinhu chine chinhu chekuputira zviri mukati mesaiti uye imba yedu grid system. Unogona kusarudza imwe yemidziyo miviri yekushandisa mumapurojekiti ako. Ziva kuti, nekuda paddinguye nezvimwe, hapana mudziyo haugone.

Shandisa .containerkune inopindura yakagadziriswa yakafara mudziyo.

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

Shandisa .container-fluidkune yakazara hupamhi chigaba, chinotenderera hupamhi hwese hwekutarisa kwako.

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

Bootstrap inosanganisira inopindura, mobile first fluid grid system iyo inoyera zvakakodzera kusvika kumakoramu gumi nemaviri sezvo mudziyo kana saizi yekuona inowedzera. Inosanganisira makirasi akafanotsanangurwa esarudzo dzakareruka dzekuronga, pamwe nemisanganiswa ine simba yekugadzira mamwe semantic marongero .

Nhanganyaya

Grid masisitimu anoshandiswa kugadzira marongero epeji kuburikidza nenhevedzano yemitsara nemakoramu anoisa zvirimo zvako. Heino mashandiro anoita Bootstrap grid system:

Mitsara inofanira kuiswa mukati me .container(yakagadziriswa-hupamhi) kana .container-fluid(yakazara-hupamhi) kuitira kurongeka kwakakodzera uye padding.
Shandisa mitsara kugadzira mapoka akachinjika emakoramu.
Zvemukati zvinofanirwa kuiswa mukati memakoramu, uye makoramu chete ndiwo anogona kunge ari vana vemitsara.
Akafanotsanangurwa makirasi egidhi senge .rowuye .col-xs-4anowanikwa nekukurumidza kugadzira grid marongero. Mashoma musanganiswa anogona zvakare kushandiswa kune mamwe semantic marongero.
Makoramu anogadzira magita (magapu pakati pezvinyorwa zvekoramu) kuburikidza padding. Iyo padding inogadziriswa mumitsara yekutanga uye yekupedzisira koramu kuburikidza neasina kunaka margin pane .rows.
The negative margin ndosaka mienzaniso iri pazasi isingaonekwi. Izvo ndezvekuti zviri mukati megidhi columns zvirongedzerwe nezvisiri-grid zvemukati.
Grid columns inogadzirwa nekutsanangura nhamba yemakoramu gumi nemaviri anowanikwa aunoda kureba. Semuenzaniso, makoramu matatu akaenzana angashandisa matatu .col-xs-4.
Kana makoramu anopfuura gumi nemaviri akaiswa mukati memutsara mumwe chete, boka rega rega remamwe makoramu, sechikamu chimwe, richaputira pamutsetse mutsva.
Giridhi makirasi anoshanda kune zvishandiso zvine skrini yakakura kupfuura kana yakaenzana nesaizi yebreakpoint, uye anodarika makirasi egidhi akanangana nemidziyo midiki. Naizvozvo, semuenzaniso kushandisa chero .col-md-*kirasi kune chimwe chinhu hakuzongokanganisa masitayipi ayo pamidziyo yepakati asiwo pamidziyo mikuru kana .col-lg-*kirasi isipo.

Tarisa kumienzaniso yekushandisa misimboti iyi kukodhi yako.

Media mibvunzo

Isu tinoshandisa inotevera midhiya mibvunzo mumafaira edu Mashoma kugadzira makiyi ekutyora mugidhi system.

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

Isu tinombowedzera pane iyi midhiya mibvunzo kuti ibatanidze a max-widthyekumisa CSS kune yakamanikana seti yemidziyo.

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

Grid options

Ona maitiro eBootstrap grid system anoshanda pane akawanda maturusi ane tafura inoshanda.

	Midziyo midiki yakawedzera Mafoni (<768px)	Midziyo midiki Mahwendefa (≥768px)	Desktop dzemidziyo yepakati ( ≥992px )	Midziyo mikuru Desktops (≥1200px)
Grid maitiro	Horizontal nguva dzose	Yakapetwa kuti itange, yakachinjika pamusoro pemabreakpoint
Container yakafara	Hapana (otomatiki)	750px	970px	1170px
Chivakashure chekirasi	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`
# yembiru	12
Column width	Auto	~62px	~81px	~97px
Gutter width	30px (15px kudivi rega rega rekoramu)
Nestable	Ehe
Offsets	Ehe
Column kuronga	Ehe

Muenzaniso: Yakarongedzerwa-kune-yakachinjika

Uchishandisa seti imwe chete .col-md-*yemakirasi egidhi, unogona kugadzira yakakosha grid sisitimu iyo inotanga yakaturikidzana panhare mbozha uye mahwendefa emidziyo (iyo yakawedzera diki kusvika kudiki renji) isati yave yakachinjika padesktop (yepakati) zvishandiso. Isa grid column mune chero .row.

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

Muenzaniso: Fluid mudziyo

Shandura chero yakagadzika-hupamhi yegridi dhizaini kuita yakazara-hupamhi dhizaini nekushandura yako yekunze .containerkuti .container-fluid.

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

Muenzaniso: Nharembozha uye desktop

Haudi kuti makoramu ako angomira mumidziyo midiki? Shandisa iyo yakawedzera diki uye yepakati mudziyo grid makirasi nekuwedzera kumakoramu .col-xs-* .col-md-*ako. Ona muenzaniso pazasi kuti uwane zano riri nani rekuti zvese zvinoshanda sei.

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

Muenzaniso: Nharembozha, piritsi, desktop

Vaka pamuenzaniso wekare nekugadzira zvakatowanda uye zvine simba marongero ane .col-sm-*makirasi ehwendefa.

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

Muenzaniso: Column kuputira

Kana makoramu anopfuura gumi nemaviri akaiswa mukati memutsara mumwe chete, boka rega rega remamwe makoramu, sechikamu chimwe, richaputira pamutsetse mutsva.

.col-xs-9

.col-xs-4
Kubva 9 + 4 = 13 > 12, iyi 4-column-wide div inoputirwa pamutsetse mutsva seyuniti imwe yakabatana.

.col-xs-6 Makoramu anotevera
anoenderera mberi nemutsetse mutsva.

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

Responsive column rets

Nematanho mana emagidhi aripo iwe unosungirwa kumhanya mumatambudziko apo, pane mamwe mabreakpoints, makoramu ako haanyatso kujeka sezvo imwe yakareba kupfuura imwe. Kugadzirisa izvo, shandisa musanganiswa wea .clearfixuye yedu inopindura zvekushandisa makirasi .

.col-xs-6 .col-sm-3
Resize your viewport kana tarisa pafoni yako semuenzaniso.

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

Pamusoro pekuchenesa makoramu panzvimbo dzinoteerera, ungangoda kuseta patsva, zvinosundidzira, kana kudhonza . Ona izvi muchiito mumuenzaniso wegridi .

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

Bvisa magata

Bvisa marata kubva mumutsara uye iwo makoramu .row-no-guttersnekirasi.

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

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

.col-xs-6

<div class="row row-no-gutters">
  <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>
<div class="row row-no-gutters">
  <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>
<div class="row row-no-gutters">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>

Offsetting columns

Fambisa makoramu kurudyi uchishandisa .col-md-offset-*makirasi. Aya makirasi anowedzera kumucheto kwekuruboshwe kwekoramu *nemakoramu. Semuenzaniso, .col-md-offset-4inofamba .col-md-4pamusoro pemakoramu mana.

.col-md-4

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

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

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

Iwe unogona zvakare kudarika offsets kubva pasi regidhi tiers .col-*-offset-0nemakirasi.

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

Nesting columns

Kuti uise zvirimo zvako neiyo default grid, wedzera nyowani .rowuye seti .col-sm-*yemakoramu mukati meiyo iripo .col-sm-*column. Mitsara yakamira inofanira kusanganisira seti yemakoramu anowedzera kusvika gumi nemaviri kana mashoma (hazvidiwi kuti ushandise makoramu gumi nemaviri aripo).

Nhamba 1: .col-sm-9

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

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

Column kuronga

Shandura zviri nyore kurongeka kwemakoramu edu akavakirwa-mukati megidhi .col-md-push-*nemakirasi .col-md-pull-*ekugadzirisa.

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

.com-md-3 .col-md-pull-9

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

Zvishoma zvinosanganiswa uye zvinoshanduka

Pamusoro pemakirasi egidhi akavakwa ekukurumidza masisitimu, Bootstrap inosanganisira Mashoma machinjiro uye musanganiswa wekukurumidza kugadzira yako yakapusa, semantic marongero.

Variables

Zvinosiyana-siyana zvinotarisa huwandu hwemakoramu, hupamhi hweguta, uye nzvimbo yekubvunza midhiya panotangira makoramu anoyangarara. Isu tinoshandisa izvi kugadzira iyo yakafanotsanangurwa makirasi egidhi akanyorwa pamusoro, pamwe neyetsika musanganiswa akanyorwa pazasi.

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

Mixins

Mixins anoshandiswa pamwe chete negridhi zvinosiyana kugadzira semantic CSS yemakoramu ega ega.

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

Muenzaniso kushandiswa

Iwe unogona kushandura mavhezheni kune ako ega tsika tsika, kana kungo shandisa mamixins ane maitiro avo akasarudzika. Heino muenzaniso wekushandisa zvigadziriso zvekutanga kugadzira maviri-column marongero ane gap 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>

Misoro

Yese misoro yeHTML, <h1>kuburikidza ne <h6>, iripo. .h1kuburikidza .h6nemakirasi anowanikwawo, nekuti kana iwe uchida kufananidza manyorerwo efonti yemusoro asi uchiri kuda kuti chinyorwa chako chiratidzwe mukati.

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

Gadzira mavara akareruka, echipiri mune chero musoro une jenari <small>tag kana .smallkirasi.

h1. Bootstrap musoro Chinyorwa chechipiri

h2. Bootstrap musoro Chinyorwa chechipiri

h3. Bootstrap musoro Chinyorwa chechipiri

h4. Bootstrap musoro Chinyorwa chechipiri

h5. Bootstrap musoro Chinyorwa chechipiri

h6. Bootstrap musoro Chinyorwa chechipiri

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

Body copy

Bootstrap's global default font-sizendeye 14px , ine line-heightye1.428 . Izvi zvinoshandiswa kune <body>uye ndima dzese. Uye zvakare, <p>(ndima) inogashira muganho wepazasi wehafu yavo computed mutsara-urefu (10px nekusarudzika).

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. Duis 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 elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

<p>...</p>

Mutungamiri kopi yemuviri

Ita kuti ndima ibude pachena nekuwedzera .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

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

Yakavakwa neZvishoma

Chikero chetaipi chinobva pane zviviri Zvidiki zvitsauko muzvinyorwa.zvishoma : @font-size-baseuye @line-height-base. Yekutanga ndiyo base font-saizi inoshandiswa mukati mese uye yechipiri ndiyo base mutsetse-urefu. Isu tinoshandisa iwo akasiyana uye mamwe masvomhu akareruka kugadzira miganho, padding, uye mutsara-urefu hwemhando yedu yese nezvimwe. Gadzirisa ivo uye Bootstrap inogadzirisa.

Inline zvinyorwa zvinyorwa

Rugwaro rwakamaka

Kuti utarise kumhanya kwemavara nekuda kwekukosha kwaro mune imwe mamiriro, shandisa iyo <mark>tag.

Unogona kushandisa mamaki tag kuhighlighttext.

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

Mashoko akadzimwa

Pakuratidza ma blocks emavara akadzimwa shandisa <del>tag.

~~Mutsetse wemavara uyu unofanirwa kubatwa semavara akadzimwa.~~

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

Strikethrough text

Pakuratidza mabhuroko emavara asingachashandi shandisa <s>tag.

~~Mutsara wechinyorwa uyu unoitirwa kuti utorerwe seusisina chokwadi.~~

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

Mavara akaiswa

Pakuratidza kuwedzera kugwaro shandisa <ins>tag.

Mutsara wechinyorwa uyu unofanirwa kubatwa sewedzero kugwaro.

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

Chinyorwa chakatara

Kunyora pasi pasi shandisa <u>tag.

Mutsara wemavara uyu unozopa sekunyorwa kwazvakaitwa

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

Shandisa HTML's default emphasis tag ane huremu zvitaera.

Chinyorwa chidiki

Kuti usasimbise mukati kana mabhuroko ezvinyorwa, shandisa <small>tag kuseta mavara pa85% saizi yemubereki. Maelement emusoro anogashira ega font-sizeezvimedu zvematendere <small>.

Iwe unogona neimwe nzira kushandisa inline element .smallpachinzvimbo chechero <small>.

Mutsara wechinyorwa uyu unoitirwa kubatwa sechinyorwa chakanaka.

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

Bold

Zvekusimbisa chidimbu chemavara ane huremu hwefonti-huremu.

Chidimbu chinotevera chemavara chinoshandurwa semavara matema .

<strong>rendered as bold text</strong>

Kutsveyamisa mabhii

Zvekusimbisa chidimbu chemavara nemavara akatsveyama.

Chidimbu chinotevera chemavara chinoshandurwa semavara akatsveyamiswa .

<em>rendered as italicized text</em>

Alternate elements

Inzwa wakasununguka kushandisa <b>uye <i>muHTML5. <b>inoitirwa kuratidza mazwi kana mitsara pasina kuendesa kukosha kwekuwedzera asi <i>kazhinji iri yezwi, tekinoroji mazwi, nezvimwe.

Alignment makirasi

Gadzirisa zvinyorwa kune zvikamu zvine makirasi ekugadzirisa zvinyorwa.

Mashoko akarocherwa kuruboshwe.

Mavara akarongedzerwa nepakati.

Mavara anoenderana nekurudyi.

Rugwaro rwakarurama.

Hapana chinyorwa chekupeta.

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

Shanduko makirasi

Shandura zvinyorwa muzvikamu zvine makirasi emavara makuru.

Mavara akaderedzwa.

Mavara makuru.

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

Madimburiko

Kuitwa kwakamisikidzwa kweHTML's <abbr>element yekupfupisa uye acronyms kuratidza yakawedzera vhezheni pane hover. Madimburiko ane titlehunhu ane mwenje wepasi muganho uye cherubatsiro pane hover, ichipa mamwe mamiriro pane hover uye kune vashandisi veanobatsira matekinoroji.

Basic pfupiso

Muchidimbu chezwi rokuti attr .

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

Initialism

Wedzera .initialismkuchidimbu chemavara madiki zvishoma.

HTML ndicho chinhu chakanakisa kubva pachingwa chakachekwa.

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

Kero

Ipa ruzivo rwekufonera kumadzitateguru ari pedyo kana boka rose rebasa. Chengetedza fomati nekugumisa mitsetse yese ne <br>.

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

Zita
Rakazara [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>

Blockquotes

Zvekutora zvivharo zvemukati kubva kune imwe sosi mukati megwaro rako.

Default blockquote

Putira <blockquote>kutenderedza chero HTML se quote. Kuti uwane mazwi akatwasuka, tinokurudzira a <p>.

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

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

Blockquote sarudzo

Chimiro uye zvirimo zvinoshanduka kuti zvive nyore kusiyanisa pachiyero <blockquote>.

Kudoma kwakabva

Wedzera a <footer>yekuziva kwakabva. Peta zita rekwakabva basa mu <cite>.

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

Mumwe ane mukurumbira muna 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>

Alternate displays

Wedzera .blockquote-reversekune blockquote ine zvakamisikidzwa-kurudyi zvemukati.

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

Mumwe ane mukurumbira muna Source Title

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

Lists

Zvisina kurairwa

Rondedzero yezvinhu umo kurongeka kusina basa zvakajeka.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis mu pretium nisl aliquet
Nulla 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>

Ordered

Rondedzero yezvinhu umo kurongeka kunokosha zvakajeka.

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

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

Unstyled

Bvisa iyo yakasarudzika list-styleuye yekuruboshwe muganho pane rondedzero zvinhu (pakarepo vana chete). Izvi zvinongoshanda kune ipapo vana rondedzero zvinhu , zvichireva kuti iwe uchafanirwa kuwedzera kirasi kune chero rondedzero yakanyorwa zvakare.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis mu pretium nisl aliquet
Nulla 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>

Inline

Isa zvinhu zvese zvakarongwa pamutsara mumwe une display: inline-block;uye mamwe mapedhi akareruka.

Lorem ipsum
Phasellus iaculis
Nulla volutpat

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

Tsanangudzo

Rondedzero yematemu ane tsananguro dzawo.

Tsanangudzo mazita: Rondedzero yerondedzero yakakwana pakutsanangura mazwi.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.; Donec id elit non mi porta gravida at eget metus.
Malesuada porta: Etiam porta sem malesuada magna mollis euismod.

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

Tsanangudzo yakachinjika

Ita mazwi uye tsananguro mumutsara <dl>wakatarisana-ne-parutivi. Inotanga kurongedzerwa senge default <dl>s, asi kana iyo navbar ikawedzera, ita izvi.

Tsanangudzo mazita: Rondedzero yerondedzero yakakwana pakutsanangura mazwi.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.; Donec id elit non mi porta gravida at eget metus.
Malesuada porta: Etiam porta sem malesuada magna mollis euismod.
Felis euismod semper eget lacinia: Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

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

Auto-truncating

Tsanangudzo dzakachinjika dzichadimbura mazwi akareba zvekusakwana muchikamu chekuruboshwe ne text-overflow. Munzvimbo dzakatetepa dzekutarisa, ivo vanozochinja kune default stacked marongero.

Inline

Putira zvidimbu zvidimbu zvekodhi ne<code> .

Semuenzaniso, <section>inofanira kuputirwa se inline.

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

Kuiswa kwemushandisi

Shandisa iyo<kbd> kuratidza yekuisa iyo inowanzo pinda nekhibhodi.

Kuchinja madhairekitori, nyora cduchiteverwa nezita redhairekitori.
Kugadzirisa marongero, tinya 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>

Basic block

Shandisa <pre>kune akawanda mitsara yekodhi. Ita shuwa kutiza mabhuraketi chero emakona ari mukodhi kuti ukwanise kuburitsa.

<p>Eyemuenzaniso mavara pano...</p>

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

Iwe unogona kusarudza kuwedzera .pre-scrollablekirasi, iyo inoisa max-urefu hwe350px uye inopa y-axis scrollbar.

Variables

Pakuratidza zvinoshanduka shandisa <var>tag.

y = m x + b

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

Sample output

Kuratidza mabhuroki emuenzaniso kubuda kubva kuchirongwa shandisa iyo <samp>tag.

Ichi chinyorwa chinofanirwa kubatwa semuenzaniso wekubuda kubva kuchirongwa chekombuta.

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

Basic muenzaniso

Kune ekutanga masitaera - mwenje padding uye chete yakachinjika dividers - wedzera base kirasi .tablekune chero <table>. Zvinogona kuratidzika sezvisina basa, asi nekushandiswa kwakapararira kwematafura kune mamwe maplugins senge makarenda uye vanotora mazuva, isu takasarudza kuparadzanisa yedu tsika tafura masitayipi.

Optional table caption.
#	Zita rokutanga	Zita rokupedzisa	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@mafuta
3	Larry	Shiri	@twitter

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

Mitsara mitsetse

Shandisa .table-stripedkuwedzera zebra-striping kune chero mutsara wetafura mukati me <tbody>.

Cross-browser kuenderana

Matafura ane mitsetse akanyorwa kuburikidza :nth-childneCSS selector, iyo isingawanikwe muInternet Explorer 8.

#	Zita rokutanga	Zita rokupedzisa	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@mafuta
3	Larry	Shiri	@twitter

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

Bordered table

Wedzera .table-borderedkune miganhu kumativi ese etafura uye maseru.

#	Zita rokutanga	Zita rokupedzisa	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@mafuta
3	Larry	Shiri	@twitter

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

Hover mitsara

Wedzera .table-hoverkugonesa hover state patafura mitsara mukati me <tbody>.

#	Zita rokutanga	Zita rokupedzisa	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@mafuta
3	Larry	Shiri	@twitter

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

Tafura yakanyungudutswa

Wedzera .table-condensedkuita kuti matafura awedzere kuwirirana nekucheka cell padding nepakati.

#	Zita rokutanga	Zita rokupedzisa	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@mafuta
3	Larry the Shiri		@twitter

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

Contextual classes

Shandisa makirasi emukati kupenda mitsara yematafura kana maseru ega ega.

Kirasi	Tsanangudzo
`.active`	Isa ruvara rwehovha kune imwe mutsara kana sero
`.success`	Zvinoratidza chiito chakabudirira kana chakanaka
`.info`	Inoratidza shanduko yeruzivo rwakarerekera kana chiito
`.warning`	Inoratidza yambiro ingada kutariswa
`.danger`	Zvinoratidza chiitiko chine njodzi kana chingangove chakaipa

#	Musoro wechikamu	Musoro wechikamu	Musoro wechikamu
1	Column content	Column content	Column content
2	Column content	Column content	Column content
3	Column content	Column content	Column content
4	Column content	Column content	Column content
5	Column content	Column content	Column content
6	Column content	Column content	Column content
7	Column content	Column content	Column content
8	Column content	Column content	Column content
9	Column content	Column content	Column content

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

Kuendesa zvinoreva kunobatsira matekinoroji

Kushandisa ruvara kuwedzera zvazvinoreva kumutsara wetafura kana sero rega rega kunongopa chiratidzo chekuona, icho chisingazopirwe kune vashandisi vetekinoroji yekubatsira - senge screen readers. Ita shuwa kuti ruzivo rwunoratidzwa neruvara rwuri pachena kubva pane zvirimo (zvinyorwa zvinooneka mumutsara wetafura yakakodzera / sero), kana kuti inosanganisirwa neimwe nzira, senge mamwe mavara akavanzwa .sr-onlynekirasi.

Matafura anopindura

Gadzira matafura anopindura nekuputira chero .tablemukati .table-responsivekuti afambe akachinjika pamidziyo midiki (pasi pe768px). Kana uchiona pane chero chinhu chakakura kudarika 768px yakafara, hauzooni chero mutsauko mumatafura aya.

Vertical clipping/truncation

Matafura anopindura anoshandisa overflow-y: hidden, ayo anobvisa chero zvirimo zvinodarika kuzasi kana kumucheto kwetafura. Kunyanya, izvi zvinogona kudimbura mamenu ekudonha uye mamwe echitatu-bato majeti.

Firefox uye fieldsets

Firefox ine mamwe maitiro asina kunaka emumunda anosanganisira widthanovhiringa tafura inopindura. Izvi hazvigone kudhindwa pasina Firefox-chaiyo hack yatisingape muBootstrap :

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

Kuti uwane rumwe ruzivo, verenga iyi Stack Overflow mhinduro .

#	Musoro wetafura	Musoro wetafura	Musoro wetafura	Musoro wetafura	Musoro wetafura	Musoro wetafura
1	Tafura cell	Tafura cell	Tafura cell	Tafura cell	Tafura cell	Tafura cell
2	Tafura cell	Tafura cell	Tafura cell	Tafura cell	Tafura cell	Tafura cell
3	Tafura cell	Tafura cell	Tafura cell	Tafura cell	Tafura cell	Tafura cell

#	Musoro wetafura	Musoro wetafura	Musoro wetafura	Musoro wetafura	Musoro wetafura	Musoro wetafura
1	Tafura cell	Tafura cell	Tafura cell	Tafura cell	Tafura cell	Tafura cell
2	Tafura cell	Tafura cell	Tafura cell	Tafura cell	Tafura cell	Tafura cell
3	Tafura cell	Tafura cell	Tafura cell	Tafura cell	Tafura cell	Tafura cell

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

Basic muenzaniso

Mafomu ega ega anodzora anogamuchira otomatiki mamwe masitaera epasirese. Zvese zvinyorwa <input>, <textarea>, uye <select>zvinhu zvine .form-controlzvinomisikidzwa kune width: 100%;default. Putira mavara uye zvidzoreso mukati .form-groupkuitira nzvimbo yakakwana.

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

Usasanganise mafomu mapoka nemapoka ekuisa

Usasanganise mafomu mapoka zvakananga nemapoka ekuisa . Pane kudaro, isa boka rekuisa mukati meboka refomu.

Inline fomu

Wedzera kufomu .form-inlineyako (isingafanirwe kunge iri <form>) yeakatarisana nekuruboshwe uye inline-block zvinodzora. Izvi zvinongoshanda kune mafomu ari mukati mekuona nzvimbo dzinenge 768px yakafara.

Inogona kuda upamhi hwetsika

Zvinopinza uye width: 100%;zvakasarudzwa zvakashandiswa nekusingaperi muBootstrap. Mukati memafomu emukati, isu tinoisa zvakare kuti kune width: auto;akawanda ma controls anogona kugara pamutsetse mumwe chete. Zvichienderana nemagadzirirwo ako, humwe hupamhi hwetsika hunogona kudiwa.

Nguva dzose wedzera mavara

Vaverengi veScreen vanozonetseka nemafomu ako kana ukasasanganisira label yeese mapikisi. Kune aya mafomu emukati, unogona kuvanza mavara uchishandisa .sr-onlykirasi. Kune dzimwe nzira dzekupa label yekubatsira matekinoroji, senge aria-label, aria-labelledbykana titlehunhu. Kana pasina chimwe cheizvi chiripo, vaverengi vescreen vanogona kushandisa placeholderhunhu, kana huripo, asi cherechedza kuti kushandiswa placeholderkwechinzvimbo chedzimwe nzira dzekunyora hakuna kurairwa.

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

Horizontal fomu

Shandisa Bootstrap's predefined grid makirasi kurongedza mavara uye mapoka emafomu ekudzora mune yakachinjika marongero nekuwedzera .form-horizontalkune fomu (iro risingafanirwe kunge riri <form>). Kuita kudaro kunochinja .form-groups kuita segridi mitsara, saka hapana chikonzero che .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>

Zvidzoreso zvinotsigirwa

Mienzaniso yezvidzoreso zvefomu zvakajairwa zvinotsigirwa muchimiro chechimiro chechimiro.

Inputs

Mazhinji mafomu ekutonga, mavara-akavakirwa ekuisa ndima. Inosanganisira rutsigiro rwemhando dzese dzeHTML5: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, uye color.

Type declaration inodiwa

Zvinopinza zvichange zvakazara chete kana yavo typeyakaziviswa nemazvo.

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

Input groups

Kuti uwedzere mavara akasanganiswa kana mabhatani pamberi uye/kana mushure mechero mavara-based <input>, tarisa chikamu cheboka rekupinda .

Textarea

Form control inotsigira mitsetse yakawanda yemavara. Chinja rowshunhu sezvinodiwa.

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

Checkboxes nemaredhiyo

Mabhokisi ekutarisa ndeekusarudza imwe kana akati wandei sarudzo mune runyorwa, nepo maredhiyo ari ekusarudza imwe sarudzo kubva kune akawanda.

Mabhokisi ekutarisa akaremara neredhiyo zvinotsigirwa, asi kuti upe "zvisingabvumirwe" cursor pane hover yemubereki <label>, unozofanira kuwedzera .disabledkirasi kumubereki .radio, .radio-inline, .checkbox, kana .checkbox-inline.

Default (yakaturikidzana)

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

Inline cheki mabhokisi uye redhiyo

Shandisa iyo .checkbox-inlinekana .radio-inlinemakirasi panhevedzano yemabhokisi echeki kana maredhiyo kune zvinodzora zvinoonekwa pamutsetse mumwe chete.

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

Mabhokisi ekutarisa nemaredhiyo asina mavara mavara

Kana iwe usina mavara mukati meiyo <label>, iyo inoiswa yakaiswa sezvaungatarisira. Parizvino inoshanda chete pane asiri-inline cheki mabhokisi nemaredhiyo. Rangarira uchiri kupa imwe fomu yelabel yekubatsira matekinoroji (semuenzaniso, kushandisa 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>

Anosarudza

Ziva kuti mazhinji emamenu akasarudzika - ari muSafari uye Chrome - ane makona akatenderedzwa asingagone kugadziridzwa kuburikidza border-radiusnezvivakwa.

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

Kune <select>zvidzoreso zvine multiplehunhu, sarudzo dzakawanda dzinoratidzwa nekusingaperi.

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

Static control

Paunenge uchida kuisa mavara akajeka pedyo nepepa refomu mukati mefomu, shandisa .form-control-statickirasi 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

Isu tinobvisa masitaera ekutanga outlinepane mamwe mafomu ekutonga uye toisa a box-shadowpanzvimbo yayo ye :focus.

Demo `:focus`state

Muenzaniso uri pamusoro apa unoshandisa masitaira echinyakare muzvinyorwa zvedu kuratidza :focusnyika pane .form-control.

Disabled state

Wedzera iyo disabledboolean hunhu pane inopinza kudzivirira kusangana kwevashandisi. Mamepu akaremara anoita seakareruka uye not-allowedowedzera chitubu.

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

Disabled fieldsets

Wedzera disabledhunhu kune a <fieldset>kudzima zvese zvinodzora mukati menguva imwe <fieldset>chete.

Caveat nezve link mashandiro e`<a>`

Nekumisikidza, mabhurawuza anobata ese ekuzvarwa mafomu ekutonga ( <input>, <select>uye <button>zvinhu) mukati <fieldset disabled>seakaremara, kudzivirira zvese zviri zviviri keyboard uye mbeva kupindirana pazviri. Nekudaro, kana fomu rako richisanganisira <a ... class="btn btn-*">zvinhu, izvi zvinongopihwa maitiro e pointer-events: none. Sezvacherechedzwa muchikamu nezve yakaremara nyika yemabhatani (uye kunyanya muchikamu chidiki chezvibatiso), ichi CSS chivakwa hachisati chamira uye hachina kutsigirwa zvizere muOpera 18 nepasi, kana muInternet Explorer 11, uye yakahwina. 'Kudzivirira vashandisi vekhibhodi kuti vakwanise kutarisa kana kumisa aya malink. Saka kuti uve wakachengeteka, shandisa tsika JavaScript kudzima zvinongedzo zvakadaro.

Cross-browser kuenderana

Nepo Bootstrap ichizoshandisa masitaera aya mumabhurawuza ese, Internet Explorer 11 uye pazasi haitsigire zvizere disabledhunhu pane <fieldset>. Shandisa JavaScript yakajairwa kudzima iyo fieldset mumabrowser aya.

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

Readonly state

Wedzera iyo readonlyboolean hunhu pane yekuisa kudzivirira kugadziridzwa kweiyo kukosha kwekuisa. Zvekuverenga-chete zvinowoneka zvakareruka (sezvakangoita zvakadzimwa), asi chengetedza chiyero chekare.

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

Batsira mameseji

Mameseji erubatsiro eBlock level yezvidzoro zvefomu.

Kubatanidza mavara erubatsiro nemafomu ekudzora

Rubatsiro runofanira kuenderana nefomu rekutonga rine chekuita nekushandisa aria-describedbyhunhu. Izvi zvinova nechokwadi chekuti tekinoroji dzekubatsira - senge zviverengero zvemasikirini - zvichazivisa chinyorwa ichi chekubatsira kana mushandisi akatarisa kana kupinda mukutonga.

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

Validation inoti

Bootstrap inosanganisira yekusimbisa masitaera yekukanganisa, yambiro, uye budiriro nyika pamafomu ekudzora. Kushandisa, kuwedzera .has-warning, .has-error, kana .has-successkune chinhu chemubereki. Chero .control-label, .form-control, uye .help-blockmukati mechinhu ichocho chinogashira masitaera ekusimbisa.

Kuendesa yekusimbisa mamiriro kune anobatsira matekinoroji uye colorblind vashandisi

Kushandisa aya masitayipi ekusimbisa kuratidza mamiriro echimiro chekutonga kunongopa chinooneka, chine ruvara-chakavakirwa chiratidzo, icho chisingazopirwe kune vashandisi veanobatsira matekinoroji - akadai semascreen readers - kana kune colorblind vashandisi.

Ita shuwa kuti imwe nzira inoratidza nyika yapihwa zvakare. Semuyenzaniso, unogona kubatanidza ratidziro pamusoro penyika mugwaro rekutonga (sezvazviri mumuenzaniso <label>unotevera wekodhi), sanganisira Glyphicon (ine mamwe mavara akakodzera uchishandisa .sr-onlykirasi - ona mienzaniso yeGlyphicon ), kana nekupa kuwedzera rubatsiro text block. Kunyanya kune anobatsira matekinoroji, zvisizvo fomu zvidzoreso zvinogona zvakare kupihwa aria-invalid="true"hunhu.

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

Nezvisarudzo zvingasarudzwa

Iwe unogona zvakare kuwedzera sarudzo yemhinduro icons nekuwedzera .has-feedbackuye neiyo icon chaiyo.

Feedback icons inoshanda chete nemavara<input class="form-control"> zvinyorwa.

Icons, mavara, uye mapoka ekuisa

Kumisikidzwa nemaoko kwezvidhori zvemhinduro kunodiwa pazvipo zvisina zita uye kumapoka ekuisa ane akawedzera kurudyi. Iwe unokurudzirwa zvakanyanya kuti upe mavara ezvese zvinopinda nekuda kwezvikonzero zvekuwanikwa. Kana uchida kudzivirira mavara kuti asaonekwe, avige .sr-onlynekirasi. Kana iwe uchifanira kuita pasina mavara, gadzirisa topkukosha kweiyo mhinduro icon. Kune mapoka ekuisa, gadzirisa rightkukosha kune yakakodzera pixel kukosha zvichienderana nehupamhi hweaddon yako.

Kuendesa zvinoreva icon kune zvinobatsira tekinoroji

Kuti ive nechokwadi chekuti tekinoroji dzinobatsira - senge zviverengero zvemasikirini - dzinoburitsa zvinorehwa nechiratidzo, mamwe mavara akavanzika anofanirwa kuverengerwa .sr-onlynekirasi uye anonyatso kudyidzana nefomu rekutonga rine chekuita nekushandisa.aria-describedby . Neimwe nzira, ita shuwa kuti zvinorehwa (semuenzaniso, chokwadi chekuti pane yambiro yeimwe ndima yekupinda zvinyorwa) inounzwa mune imwewo fomu, sekushandura mameseji eiyo chaiyo <label>inobatana nekutonga fomu.

Kunyangwe iyo inotevera mienzaniso yatotaura nezve kusimbiswa kwechimiro chemaitiro avo ekutonga <label>mugwaro pacharo, nzira iri pamusoro (kushandisa .sr-onlychinyorwa uye aria-describedby) yakaverengerwa zvinangwa zvemifananidzo.

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

Optional icons mune yakachinjika uye inline mafomu

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

Optional icons ane zvakavanzika`.sr-only` mavara akavanzika

Kana iwe ukashandisa .sr-onlykirasi kuvanza fomu rekutonga's <label>(pane kushandisa dzimwe sarudzo dzekunyora, senge aria-labelhunhu), Bootstrap inogadzirisa otomatiki chinzvimbo cheiyo icon kana yawedzerwa.

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

Kudzora saizi

Seta hurefu uchishandisa makirasi akaita .input-lg, uye isa hupamhi uchishandisa grid column makirasi senge.col-lg-* .

Hurefu saizi

Gadzira marefu kana mapfupi emafomu ekutonga anoenderana nemabhatani saizi.

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

Horizontal fomu boka saizi

Kurumidza saizi mavara uye fomu zvidzoreso mukati .form-horizontalnekuwedzera .form-group-lgkana .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>

Column saizi

Putira zvinopinza mumakoramu egidhi, kana chero tsika yevabereki chinhu, kumanikidza zviri nyore upamhi hunodiwa.

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

Button tags

Shandisa mabhatani makirasi pane <a>, <button>, kana <input>chinhu.

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

Context-chaiyo kushandiswa

Nepo mabhatani makirasi anogona kushandiswa <a>uye <button>zvinhu, <button>zvinhu chete zvinotsigirwa mukati menav uye navbar zvikamu.

Zvisungo zvinoshanda semabhatani

Kana izvo <a>zvinhu zvakashandiswa kuita semabhatani - zvichikonzera mukati-peji kushanda, pane kuenda kune rimwe gwaro kana chikamu mukati meiyo peji peji - ivo vanofanirwawo kupihwa yakakodzera role="button".

Cross-browser rendering

Semaitiro akanakisa, isu tinokurudzira zvikuru kushandisa <button>chinhu pese pazvinogoneka kuve nechokwadi chekufananidza muchinjika-browser rendering.

Pakati pezvimwe zvinhu, pane bug muFirefox <30 inotitadzisa kuseta mabhatani line-heighte <input>--based, zvichiita kuti asanyatsoenderana nehurefu hwemamwe mabhatani paFirefox.

Options

Shandisa chero anowanikwa mabhatani makirasi kukurumidza kugadzira bhatani rakanyorwa.

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

Kuendesa zvinoreva kunobatsira matekinoroji

Kushandisa ruvara kuwedzera chirevo kubhatani kunongopa chiratidzo chekuona, icho chisingazopirwe kune vashandisi vetekinoroji yekubatsira - senge mascreen readers. Ita shuwa kuti ruzivo rwunoratidzwa neruvara rwuri pachena kubva kune zvirimo pachayo (zvinyorwa zvinooneka zvebhatani), kana kuti zvinosanganisirwa neimwe nzira, senge mamwe mavara akavanzwa .sr-onlynekirasi.

Saizi

Unoda mabhatani makuru kana madiki? Wedzera .btn-lg, .btn-sm, kana .btn-xsmamwe masaizi.

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

Gadzira mabhatani e block level — ayo anotambanudzira upamhi hwakazara hwemubereki — nekuwedzera .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>

Active state

Mabhatani anozoonekwa akadzvanywa (aine yakasviba kumashure, yakasviba muganho, uye inset mumvuri) kana ichishanda. Nezvezvinhu <button>, izvi zvinoitwa kuburikidza ne :active. Nezvezvinhu <a>, zvinoitwa ne .active. Nekudaro, iwe unogona kushandisa .activepa <button>s (uye sanganisira aria-pressed="true"hunhu) kana iwe uchinge uchinge uchinge uchinge uchinge uchinge uchinge uchinge uchinge uchingerwa mamiriro ehurongwa.

Bhatani chinhu

Hapana chikonzero chekuwedzera :activesezvo iri pseudo-kirasi, asi kana iwe uchida kumanikidza chitarisiko chimwe chete, enda mberi uwedzere .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

Wedzera .activekirasi <a>kumabhatani.

Primary link Link

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

Disabled state

Ita kuti mabhatani aite seasingabatike nekuadzima neshure ne opacity.

Bhatani chinhu

Wedzera disabledhunhu <button>kumabhatani.

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

Cross-browser kuenderana

Kana iwe ukawedzera disabledhunhu ku <button>, Internet Explorer 9 uye pazasi ichapa mavara grey ane akashata mavara-mumvuri watisingakwanise kugadzirisa.

Anchor element

Wedzera .disabledkirasi <a>kumabhatani.

Primary link Link

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

Isu tinoshandisa .disabledsekirasi yekushandisa pano, yakafanana .activenekirasi yakajairika, saka hapana prefix inodiwa.

Link functionality caveat

Kirasi iyi inoshandisa pointer-events: nonekuyedza kudzima mashandiro ekubatanidza kwe <a>s, asi iyo CSS pfuma haisati yamira uye haisati yanyatso kutsigirwa muOpera 18 nepasi, kana muInternet Explorer 11. Pamusoro pezvo, kunyangwe mumabhurawuza anotsigira pointer-events: none, keyboard. kufamba kunoramba kusingakanganisike, zvichireva kuti vanoona vashandisi vekhibhodi nevashandisi veanobatsira matekinoroji vachakwanisa kumisa aya malink. Saka kuti uve wakachengeteka, shandisa tsika JavaScript kudzima zvinongedzo zvakadaro.

Mifananidzo inopindura

Mifananidzo muBootstrap 3 inogona kuitwa inopindura-inoshamwaridzika kuburikidza nekuwedzera .img-responsivekwekirasi. Izvi zvinoshanda max-width: 100%;, height: auto;uye display: block;kumufananidzo kuitira kuti ukwire zvakanaka kune chinhu chemubereki.

Kuisa pakati mifananidzo inoshandisa .img-responsivekirasi, shandisa .center-blockpachinzvimbo che .text-center. Ona chikamu chezvidzidzo zvevabatsiri kuti uwane rumwe ruzivo nezve .center-blockmashandisiro.

SVG mifananidzo uye IE 8-10

MuInternet Explorer 8-10, mifananidzo yeSVG ine .img-responsiveyakakura zvisina mwero. Kugadzirisa izvi, wedzera width: 100% \9;pazvinenge zvakakodzera. Bootstrap haishandise izvi otomatiki sezvo zvichikonzera matambudziko kune mamwe mafomati emifananidzo.

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

Mifananidzo maumbirwo

Wedzera makirasi kune <img>chinhu kuti zvive nyore kutaira mifananidzo mune chero chirongwa.

Cross-browser kuenderana

Ramba uchifunga kuti Internet Explorer 8 haina tsigiro yemakona akatenderedzwa.

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

Mavara emamiriro ezvinhu

Taurira zvinorehwa kuburikidza neruvara uine mashoma emakirasi ekusimbisa ekushandisa. Izvi zvinogona zvakare kuiswa kune zvinongedzo uye zvichasviba pane hover senge yedu default link masitayipi.

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

Nullam id id nibh ultricies vehicula ut id elit.

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

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

Etiam porta sem malesuada magna mollis euismod.

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>

Kuita nehunhu

Dzimwe nguva makirasi ekusimbisa haagone kushandiswa nekuda kwekutsanangurwa kweimwe sarudzo. Muzviitiko zvakawanda, yakakwana workaround ndeyekuputira chinyorwa chako mune <span>nekirasi.

Kuendesa zvinoreva kunobatsira matekinoroji

Kushandisa ruvara kuwedzera zvinoreva kunongopa chiratidzo chekuona, icho chisingazopirwe kune vashandisi vetekinoroji yekubatsira - senge zvidzitiro zvekuverenga. Ita shuwa kuti ruzivo rwunoratidzwa nemuvara rwuri pachena kubva pane zviri mukati (mavara emukati anongoshandiswa kusimbisa zvinoreva izvo zvatovepo muzvinyorwa / mucherechedzo), kana inosanganisirwa neimwe nzira, senge mamwe mavara akavanzwa .sr-onlynekirasi . .

Mamiriro ezvinhu

Zvakafanana nemakirasi emavara emavara echinyorwa, nyore nyore kuseta kumashure kwechinhu kune chero kirasi yemamiriro. Anchor zvikamu zvichasviba pane hover, senge makirasi ezvinyorwa.

Nullam id id nibh ultricies vehicula ut id elit.

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

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

Etiam porta sem malesuada magna mollis euismod.

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>

Kuita nehunhu

Dzimwe nguva makirasi emamiriro ekunze haagone kushandiswa nekuda kwekutsanangurwa kweimwe sarudzo. Mune zvimwe zviitiko, yakakwana workaround ndeyekuputira chinhu chechinhu chako mune <div>nekirasi.

Kuendesa zvinoreva kunobatsira matekinoroji

Sezvinoita mavara emukati , ita shuwa kuti chero chirevo chinopikiswa kuburikidza neruvara chinounzwa muchimiro chisiri chekuratidzira chete.

Close icon

Shandisa generic yekuvhara icon yekudzinga zvirimo senge modal uye chenjedzo.

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

Carets

Shandisa magaro kuratidza kudonha mashandiro uye gwara. Ziva kuti iyo default caret inodzokera kumashure otomatiki mumamenu ekudonha .

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

Kukurumidza kuyangarara

Yangarara chinhu kuruboshwe kana kurudyi nekirasi. !importantinosanganisirwa kudzivirira nyaya dzakanangana. Makirasi anogonawo kushandiswa semisanganiswa.

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

Center content blocks

Seta chinhu display: blockuye pakati nepakati kuburikidza ne margin. Inowanikwa semusanganiswa uye kirasi.

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

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

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

Clearfix

Zviri nyore kujekesa floats nekuwedzera .clearfix kune chinhu chemubereki . Inoshandisa iyo micro clearfix sezvakafarirwa naNicolas Gallagher. Inogonawo kushandiswa semusanganiswa.

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

Kuratidza uye kuvanza zvemukati

Manikidza chinhu kuti chiratidzwe kana kuvanzwa ( kusanganisira yevaverengi vescreen ) nekushandiswa .showuye .hiddenmakirasi. Aya makirasi anoshandisa !importantkudzivirira kukonana kwakasiyana, kungofanana nekuyangarara kwekukurumidza . Ivo vanongowanikwa kune block level toggling. Vanogonawo kushandiswa semisanganiswa.

.hideiripo, asi haisi nguva dzose inokanganisa vaverengi vezvidzitiro uye inodzikiswa kubva pav3.0.1 . Shandisa .hiddenkana .sr-onlypanzvimbo.

Uyezve, .invisibleinogona kushandiswa kushandura chete kuoneka kwechinhu, zvichireva kuti displayhaina kuchinjwa uye chinhu chinogona kuramba chichikanganisa kuyerera kwegwaro.

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

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

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

Screen reader uye keyboard navigation content

Viga chinhu kune ese maturusi kunze kwekuverengera skrini ine .sr-only. Sanganisa .sr-onlynekuratidza .sr-only-focusablechinhu zvakare kana chakanangana (semuenzaniso nekhibhodi-chete mushandisi). Zvinodikanwa pakutevera nzira dzakanakisa dzekuwanikwa . Inogonawo kushandiswa semisanganiswa.

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

Kutsiva mufananidzo

Shandisa .text-hidekirasi kana mixin kubatsira kutsiva chinyorwa chechinhu nemufananidzo wekumashure.

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

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

Kuti uwedzere kusimudzira nharembozha, shandisa aya makirasi ekushandisa kuratidza uye kuviga zvirimo nemudziyo kuburikidza nemubvunzo wenhau. Zvinosanganisirwawo makirasi ekushandisa ekushandura zvirimo kana zvadhindwa.

Edza kushandisa izvi zvishoma uye dzivirira kugadzira shanduro dzakasiyana dzesaiti imwechete. Pane kudaro, zvishandise kuzadzisa mharidzo yemudziyo wega wega.

Makirasi aripo

Shandisa imwe chete kana musanganiswa wemakirasi aripo ekushandura zvirimo mukati mekuona mabreakpoints.

	Midziyo midiki yakawedzeraMafoni (<768px)	Zvigadzirwa zvidukuMahwendefa (≥768px)	Zvishandiso zvepakatiDesktops (≥992px)	Zvishandiso zvakakuraDesktops (≥1200px)
`.visible-xs-*`	Visible	Hidden	Hidden	Hidden
`.visible-sm-*`	Hidden	Visible	Hidden	Hidden
`.visible-md-*`	Hidden	Hidden	Visible	Hidden
`.visible-lg-*`	Hidden	Hidden	Hidden	Visible
`.hidden-xs`	Hidden	Visible	Visible	Visible
`.hidden-sm`	Visible	Hidden	Visible	Visible
`.hidden-md`	Visible	Visible	Hidden	Visible
`.hidden-lg`	Visible	Visible	Visible	Hidden

Kubva pav3.2.0, .visible-*-*makirasi ega ega ekutyora anouya mumisiyano mitatu, imwe yeCSS yega displayyega kukosha kwepfuma yakanyorwa pazasi.

Boka remakirasi	CSS`display`
`.visible-*-block`	`display: block;`
`.visible-*-inline`	`display: inline;`
`.visible-*-inline-block`	`display: inline-block;`

Saka, kune mamwe madiki ( xs) masikirini semuenzaniso, .visible-*-*makirasi aripo ndeaya: .visible-xs-block, .visible-xs-inline, uye .visible-xs-inline-block.

Iwo makirasi .visible-xs, .visible-sm, .visible-md, uye .visible-lgaripo, asi akaregwa kubva pav3.2.0 . Iwo anenge akaenzana ne .visible-*-block, kunze kwekunge nemamwe makesi akakosha ekuchinja-ane <table>hukama.

Dhinda makirasi

Zvakafanana nemakirasi enguva dzose anopindura, shandisa izvi kushandura zvinyorwa kuti zvidhindwe.

Makirasi	Browser	Dhinda
`.visible-print-block` `.visible-print-inline` `.visible-print-inline-block`	Hidden	Visible
`.hidden-print`	Visible	Hidden

Kirasi .visible-printiripo zvakare asi yakarambwa kubva pav3.2.0 . Inoda kuenzana ne .visible-print-block, kunze kwekunge nemamwe <table>makesi akakosha e-zvine hukama.

Test case

Rezesa bhurawuza rako kana kurodha pamidziyo yakasiyana kuti uedze makirasi anopindura ekushandisa.

Inoonekwa pa...

Macheki egirinhi anoratidza kuti chinhu chinoonekwa mune yako yazvino yekuona.

Kuwedzera kudiki ✔ Inoonekwa pa x-diki

Diki ✔ Inoonekwa padiki

Pakati ✔ Inoonekwa nepakati

Zvikuru ✔ Inoonekwa pahombe

Zvimwe zvidiki nezvidiki ✔ Inoonekwa pa x-diki nediki

Pakati nepakati ✔ Inoonekwa pakati nepakati

Kuwedzera diki nepakati ✔ Inoonekwa pa x-diki nepakati

Diki nehombe ✔ Inoonekwa padiki nehombe

Yakawedzera diki uye yakakura ✔ Inoonekwa pa x-diki nehombe

Diki nepakati ✔ Inoonekwa padiki nepakati

Zvakavigwa pa...

Pano, macheki egirini anoratidzawo kuti chinhu chakavigwa mune yako yazvino yekuona.

Kuwedzera kudiki ✔ Zvakavanzwa pa x-diki

Diki ✔ Zvakavigwa pane zviduku

Pakati ✔ Zvakavanzwa pakati

Zvikuru ✔ Yakavigwa pahombe

Zvimwe zvidiki nezvidiki ✔ Yakavigwa pa x-diki nediki

Pakati nepakati ✔ Zvakavanzwa pakati nepakati

Kuwedzera diki nepakati ✔ Yakavigwa pa x-diki nepakati

Diki nehombe ✔ Zvakavigwa padiki nehombe

Yakawedzera diki uye yakakura ✔ Yakavigwa pa x-diki uye hombe

Diki nepakati ✔ Zvakavigwa padiki nepakati

Bootstrap's CSS yakavakirwa paZvishoma, preprocessor ine mamwe maitiro senge akasiyana, musanganiswa, uye mabasa ekunyora CSS. Avo vari kutsvaga kushandisa sosi Mashoma mafaera panzvimbo yemafaira edu akaunganidzwa eCSS anogona kushandisa akawanda akasiyana uye masanganiswa atinoshandisa mukati mehurongwa.

Grid variables uye masanganiswa akafukidzwa mukati meiyo Grid system chikamu .

Kunyora Bootstrap

Bootstrap inogona kushandiswa nenzira dzinenge mbiri: neiyo CSS yakaunganidzwa kana nekwakabva Mashoma mafaera. Kuti uunganidze maFaera Mashoma, bvunza chikamu cheKutanga kuti ungaseta sei nharaunda yako yekusimudzira kuti uite mirairo inodiwa.

Maturusi ekubatanidza echitatu anogona kushanda neBootstrap, asi haatsigirwe nechikwata chedu chepakati.

Variables

Misiyano inoshandiswa mupurojekiti yese senzira yekuisa pakati uye kugovana hunhu hunowanzo shandiswa semavara, kupatsanurana, kana font stacks. Kuti uwane kuparara kwakazara, ndapota ona iyo Customizer .

Colors

Shandisa zviri nyore zvirongwa zviviri zvemavara: greyscale uye semantic. Grayscale mavara anopa kukurumidza kuwana kune anowanzo shandiswa mimvuri yedema nepo semantic inosanganisira akasiyana mavara akagoverwa kune zvine musoro mamiriro ezvinhu.

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

Shandisa chero yeaya mavara akasiyana sezvaari kana kuti aapezve kune zvimwe zvine musoro zvakasiyana zvepurojekiti yako.

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

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

Scaffolding

A mashoma emhando dzakasiyana dzekukurumidza kugadzirisa akakosha zvinhu zvesaiti yako skeleton.

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

Links

Nyora zvinyoreso zvinongedzo zvako zvine ruvara rwakakodzera neukoshi humwe chete.

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

Ziva kuti iyo @link-hover-colorinoshandisa basa, chimwe chinotyisa chishandiso kubva kuChidiki, kugadzira otomatiki kugadzira iyo chaiyo hover ruvara. Unogona kushandisa darken, lighten, saturate, uye desaturate.

Typography

Gadzirisa yako typeface, saizi yemavara, inotungamira, uye nezvimwe zvine mashoma anokurumidza kusiyanisa. Bootstrap inoshandisa izvi zvakare kuti ipe nyore typographic musanganiswa.

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

Icons

Maviri anokurumidza akasiyana ekugadzirisa nzvimbo uye zita refaira rezvidhori zvako.

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

Zvikamu

Zvikamu mukati meBootstrap zvinoshandisa mamwe madhizaini ekuseta zvakajairika. Heano anonyanya kushandiswa.

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

Vatengesi vanosanganisa

Vatengesi musanganiswa mamisanganiswa ekubatsira kutsigira akawanda mabhurawuza nekubatanidza ese akakodzera vatengesi prefixes muCSS yako yakaunganidzwa.

Bhokisi-kukura

Rongedzazve zvikamu zvako zvebhokisi modhi nemusanganiswa mumwe chete. Kuti uwane mamiriro, ona chinyorwa ichi chinobatsira kubva kuMozilla .

Iyo mixin inodzikiswa kubva kuv3.2.0 , nekuunza Autoprefixer. Kuchengetedza kumashure-kuenderana, Bootstrap icharamba ichishandisa mixin mukati kusvika Bootstrap v4.

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

Makona akakomberedzwa

Nhasi mabhurawuza ese emazuva ano anotsigira iyo isina-prefixed border-radiuspfuma. Saka nekudaro, hapana .border-radius()mixin, asi Bootstrap inosanganisira mapfupi ekukurumidza kutenderedza makona maviri kune rimwe divi rechinhu.

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

Bhokisi (Drop) mimvuri

Kana vateereri vako vari kushandisa azvino uye makuru mabhurawuza nemidziyo, ive shuwa yekungoshandisa iyo box-shadowpfuma yega. Kana iwe uchida rutsigiro rwekare Android (pre-v4) uye iOS zvishandiso (pre-iOS 5), shandisa yakarasika mixin kutora -webkitprefix inodiwa.

Iyo mixin inodzikiswa sev3.1.0 , sezvo Bootstrap isingatsigire zviri pamutemo mapuratifomu echinyakare asingatsigire midziyo yakajairwa. Kuchengetedza kumashure-kuenderana, Bootstrap icharamba ichishandisa mixin mukati kusvika Bootstrap v4.

Iva nechokwadi chekushandisa rgba()mavara mubhokisi rako mimvuri kuti isanganise seamless sezvinobvira nemashure.

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

Transitions

Multiple musanganiswa kuitira kushanduka. Seta ruzivo rwese rwekuchinja neimwe, kana tsanangura kunonoka kwakasiyana uye nguva sezvinodiwa.

Iwo mamixins akadzikiswa sev3.2.0, nekuunza Autoprefixer. Kuchengetedza kumashure-kuenderana, Bootstrap icharamba ichishandisa mamikisi mukati kusvika 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;
}

Shanduko

Tenderedza, kuyera, dudzira (fambisa), kana kutsveta chero chinhu.

Iwo mamixins akadzikiswa sev3.2.0, nekuunza Autoprefixer. Kuchengetedza kumashure-kuenderana, Bootstrap icharamba ichishandisa mamikisi mukati kusvika 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;
}

Animations

Musanganiswa mumwechete wekushandisa ese eCSS3's animation properties mune imwe chirevo uye mamwe masanganiswa ezvivakwa zvega.

Iwo mamixins akadzikiswa sev3.2.0, nekuunza Autoprefixer. Kuchengetedza kumashure-kuenderana, Bootstrap icharamba ichishandisa mamikisi mukati kusvika 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

Seta iyo opacity kune ese mabhurawuza uye ipa filteryekudzokera shure kweIE8.

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

Ruvara rwechibatiso

Ipa mamiriro ekugadzirisa fomu mukati mechikamu chimwe nechimwe.

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

Columns

Gadzira makoramu kuburikidza neCSS mukati mechinhu chimwe chete.

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

Gradients

Shandura chero mavara maviri zviri nyore kuita yekumashure gradient. Wana imwe yepamusoro uye isa nzira, shandisa mavara matatu, kana shandisa radial gradient. Nemusanganiswa mumwechete iwe unowana ese prefixed syntaxes iwe yauchazoda.

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

Iwe unogona zvakare kutsanangura kona yeakajairwa maviri-ruvara, mutsara gradient:

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

Kana iwe uchida barber-stripe style gradient, zviri nyore, zvakare. Ingotsanangura ruvara rumwe chete uye tichafukidza mutsetse muchena unopenya.

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

Simudza ante uye shandisa mavara matatu panzvimbo. Seta yekutanga ruvara, rwechipiri ruvara, rwechipiri ruvara rwekumira (yepakati kukosha se25%), uye yechitatu ruvara ine aya masanganiswa:

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

Musoro! Kana iwe uchizoda kubvisa gradient, ita shuwa kubvisa chero IE-chaiyo filteryaungave wakawedzera. Iwe unogona kuzviita nekushandisa musanganiswa .reset-filter()pamwe chete background-image: none;.

Utility mixs

Utility musanganiswa ndiwo musanganiswa unosanganisa neimwe nzira isina hukama CSS zvivakwa kuti uwane chakananga chinangwa kana basa.

Clearfix

Kanganwa kuwedzera class="clearfix"kune chero chinhu uye panzvimbo pacho wedzera .clearfix()mixin pazvinenge zvakakodzera. Inoshandisa iyo micro clearfix kubva kuna Nicolas Gallagher .

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

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

Horizontal centering

Kurumidza kuisa pakati pechero chinhu mukati memubereki wayo. Inoda widthkana max-widthkuiswa.

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

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

Saizi vabatsiri

Taura hukuru hwechinhu zviri nyore.

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

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

Resizable textareas

Gadzirisa zviri nyore sarudzo dzeresize kune chero textarea, kana chero chimwe chinhu. Defaults kune yakajairika browser maitiro ( both).

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

Kudimburira mavara

Nyoresa kutapudza mavara neellipsis nemusanganiswa mumwechete. Inoda kuti chinhu chive blockkana inline-blocknhanho.

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

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

Retina mifananidzo

Rondedzera nzira mbiri dzemifananidzo uye @1x chiyero chemufananidzo, uye Bootstrap ichapa @2x media query. Kana uine mifananidzo yakawanda yekushandira, funga kunyora retina mufananidzo wako CSS nemaoko mune imwechete media query.

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

Nepo Bootstrap yakavakirwa paZvishoma, ine zvakare yepamutemo Sass port . Isu tinoichengeta mune yakaparadzana GitHub repository uye tinobata zvigadziriso neshanduko script.

Chii chinosanganisirwa

Sezvo chiteshi cheSass chine repo yakaparadzana uye ichishandira vateereri vakasiyana zvishoma, zviri mukati meprojekiti zvinosiyana zvakanyanya kubva kune chikuru Bootstrap chirongwa. Izvi zvinoita kuti chiteshi cheSass chienderane neakawanda maSass-based system sezvinobvira.

Path	Tsanangudzo
`lib/`	Ruby gem kodhi (Sass kumisikidza, Rails uye Compass kubatanidzwa)
`tasks/`	Shanduro zvinyorwa (kutendeukira kumusoro Zvishoma kuenda kuSass)
`test/`	Compilation miedzo
`templates/`	Compass package inoratidza
`vendor/assets/`	Sass, JavaScript, uye mafonti mafaera
`Rakefile`	Mabasa emukati, senge rake uye shandura

Shanyira Sass port's GitHub repository kuti uone mafaera aya achiita.

Installation

Kuti uwane ruzivo rwekuisa nekushandisa Bootstrap yeSass, bvunza iyo GitHub repository readme . Ndiyo yakanyanya kusvika pazvino sosi uye inosanganisira ruzivo rwekushandisa neRails, Compass, uye yakajairwa Sass mapurojekiti.

Bootstrap yeSass

CSS

Overview

HTML5 doctype

Mobile kutanga

Typography uye zvinongedzo

Normalize.css

Containers

Grid system

Nhanganyaya

Media mibvunzo

Grid options

Muenzaniso: Yakarongedzerwa-kune-yakachinjika

Muenzaniso: Fluid mudziyo

Muenzaniso: Nharembozha uye desktop

Muenzaniso: Nharembozha, piritsi, desktop

Muenzaniso: Column kuputira

Responsive column rets

Bvisa magata

Offsetting columns

Nesting columns

Column kuronga

Zvishoma zvinosanganiswa uye zvinoshanduka

Variables

Mixins

Muenzaniso kushandiswa

Typography

Misoro

h1. Bootstrap musoro

h2. Bootstrap musoro

h3. Bootstrap musoro

h4. Bootstrap musoro

h5. Bootstrap musoro

h6. Bootstrap musoro

h1. Bootstrap musoro Chinyorwa chechipiri

h2. Bootstrap musoro Chinyorwa chechipiri

h3. Bootstrap musoro Chinyorwa chechipiri

h4. Bootstrap musoro Chinyorwa chechipiri

h5. Bootstrap musoro Chinyorwa chechipiri

h6. Bootstrap musoro Chinyorwa chechipiri

Body copy

Mutungamiri kopi yemuviri

Yakavakwa neZvishoma

Inline zvinyorwa zvinyorwa

Rugwaro rwakamaka

Mashoko akadzimwa

Strikethrough text

Mavara akaiswa

Chinyorwa chakatara

Chinyorwa chidiki

Bold

Kutsveyamisa mabhii

Alternate elements

Alignment makirasi

Shanduko makirasi

Madimburiko

Basic pfupiso

Initialism

Kero

Blockquotes

Default blockquote

Blockquote sarudzo

Kudoma kwakabva

Alternate displays

Lists

Zvisina kurairwa

Ordered

Unstyled

Inline

Tsanangudzo

Tsanangudzo yakachinjika

Auto-truncating

Code

Inline

Kuiswa kwemushandisi

Basic block

Variables

Sample output

Matafura

Basic muenzaniso

Mitsara mitsetse

Demo `:focus`state

Caveat nezve link mashandiro e`<a>`

Optional icons ane zvakavanzika`.sr-only` mavara akavanzika