Shakisha hasi kumurongo wingenzi wibikorwa remezo bya Bootstrap, harimo nuburyo bwacu bwo kurushaho gutera imbere, byihuse, bikomeye.

HTML5

Bootstrap ikoresha ibintu bimwe na bimwe bya HTML hamwe na CSS isaba gukoresha inyandiko ya HTML5. Shyiramo intangiriro yimishinga yawe yose.

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

Igendanwa mbere

Hamwe na Bootstrap 2, twongeyeho uburyo bwa mobile bugendanwa kubintu byingenzi byingenzi. Hamwe na Bootstrap 3, twongeye kwandika umushinga wo kuba inshuti igendanwa kuva tugitangira. Aho kongeramo uburyo bwa mobile igendanwa, batetse neza muribanze. Mubyukuri, Bootstrap ni mobile mbere . Imiterere yambere ya mobile irashobora kuboneka mubitabo byose aho kuba muri dosiye zitandukanye.

Kugirango wemeze neza kandi ukore zooming, ongeraho kureba meta tagi yawe <head>.

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

Urashobora guhagarika ubushobozi bwo guhinduranya kubikoresho bigendanwa wongeyeho user-scalable=nokureba kuri meta tag. Ibi birahagarika zooming, bivuze ko abakoresha bashoboye gusa kuzunguruka, nibisubizo kurubuga rwawe ukumva bisa nkibisabwa kavukire. Muri rusange, ibi ntabwo tubisaba kurubuga rwose, koresha rero ubwitonzi!

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

Imyandikire hamwe

Bootstrap ishyiraho ibanze kwisi yose, imyandikire, hamwe nuburyo bwo guhuza. By'umwihariko, twe:

Shyira background-color: #fff;kuribody
Koresha i @font-family-base,, @font-size-basena @line-height-baseIbiranga nkimyandikire yacu
Shiraho ibara ryisi yose unyuze @link-colorkandi ushyire kumurongo uhuza gusa:hover

Ubu buryo bushobora kuboneka imbere scaffolding.less.

Ubusanzwe.css

Kugirango tunonosore amashusho yambukiranya, dukoresha Normalize.css , umushinga wa Nicolas Gallagher na Jonathan Neal .

Ibikoresho

Bootstrap isaba ikintu kirimo gupfundikira ibiri kurubuga no kubika sisitemu ya gride. Urashobora guhitamo kimwe mubintu bibiri kugirango ukoreshe mumishinga yawe. Menya ko, bitewe paddingnibindi byinshi, nta kintu na kimwe kirimo.

Koresha .containerkubikoresho byubugari byashubijwe neza.

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

Koresha .container-fluidubugari bwuzuye kontineri, uzenguruke ubugari bwose bwo kureba.

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

Bootstrap ikubiyemo sisitemu yitabiriwe, igendanwa ya mbere ya gride ya sisitemu igereranya neza inkingi zigera kuri 12 uko igikoresho cyangwa ubunini bwo kureba bwiyongera. Harimo ibyiciro byateganijwe mbere yuburyo bworoshye bwo guhitamo, kimwe nuruvange rukomeye rwo kubyara ibisobanuro byinshi .

Intangiriro

Sisitemu ya gride ikoreshwa mugukora page page binyuze murukurikirane rwimirongo ninkingi bikubiyemo ibikubiyemo. Dore uko sisitemu ya Bootstrap ikora:

Imirongo igomba gushyirwa muri .container(ubugari bwagutse) cyangwa .container-fluid(ubugari bwuzuye) kugirango ihuze neza na padi.
Koresha umurongo kugirango ukore amatsinda atambitse yinkingi.
Ibirimo bigomba gushyirwa mu nkingi, kandi inkingi zonyine zishobora kuba abana b'imirongo.
Byateganijwe mbere ya grid ibyiciro nka .rowkandi .col-xs-4birahari mugukora byihuse imiterere ya grid. Imvange nkeya irashobora kandi gukoreshwa muburyo bwinshi bwo gusobanura.
Inkingi zirema imyanda (icyuho kiri hagati yinkingi) ikoresheje padding. Iyo padi isibanganya umurongo kumurongo wambere nuwanyuma ukoresheje margin mbi kuri .rows.
Impamvu mbi niyo mpamvu ingero zikurikira zishaje. Nukugirango ibikubiye muri grid inkingi bitondekanye nibintu bitari grid.
Inkingi ya gride yaremewe mukugaragaza umubare winkingi cumi zibiri wifuza kuzenguruka. Kurugero, inkingi eshatu zingana zikoresha eshatu .col-xs-4.
Niba inkingi zirenga 12 zishyizwe mumurongo umwe, buri tsinda ryinyongera zinkingi, nkigice kimwe, zizingira kumurongo mushya.
Ibyiciro bya gride bikurikizwa kubikoresho bifite ubugari bwa ecran irenze cyangwa ingana nubunini bwa point point, kandi urengere gride ibyiciro bigenewe ibikoresho bito. Kubwibyo, urugero gukoresha .col-md-*icyiciro icyo aricyo cyose ntabwo bizagira ingaruka kumyandikire yabikoresho biciriritse gusa ahubwo no kubikoresho binini niba .col-lg-*ishuri ridahari.

Reba ingero zo gushyira mu bikorwa aya mahame kuri kode yawe.

Ibibazo by'itangazamakuru

Twifashishije ibibazo byitangazamakuru bikurikira muri dosiye zacu Ntoya kugirango dukore urufunguzo rwibanze muri sisitemu ya gride.

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

Rimwe na rimwe twaguka kuri ibyo bibazo byitangazamakuru kugirango dushyiremo max-widthimipaka CSS kumurongo mugufi wibikoresho.

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

Amahitamo ya gride

Reba uburyo ibintu bya sisitemu ya Bootstrap ikora mubikoresho byinshi hamwe nameza meza.

	Ibikoresho bito byiyongera Terefone (<768px)	Ibikoresho bito Ibinini (68768px)	Ibikoresho biciriritse Ibiro (≥992px)	Ibikoresho binini Ibiro (≥1200px)
Imyitwarire ya gride	Utambitse igihe cyose	Yasenyutse kugirango utangire, utambitse hejuru yumwanya
Ubugari bwa kontineri	Nta na kimwe (auto)	750px	970px	1170px
Icyiciro cyambere	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`
# yinkingi	12
Ubugari bw'inkingi	Imodoka	~ 62px	~ 81px	~ 97px
Ubugari	30px (15px kuri buri ruhande rw'inkingi)
Nestable	Yego
Offsets	Yego
Gutumiza inkingi	Yego

Urugero: Bishyizwe kuri-horizontal

Ukoresheje umurongo umwe wibyiciro bya .col-md-*gride, urashobora gukora sisitemu shingiro ya gride itangira gutondekanya kubikoresho bigendanwa hamwe nibikoresho bya tablet (byoroheje bito kugeza bito) mbere yo gutambuka kubikoresho bya desktop (hagati). Shyira grid inkingi muri buri .row.

.col-md-1

.col-md-8

.col-md-4

.col-md-6

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

Urugero: Igikoresho cyamazi

Hindura icyaricyo cyose cyagutse cya grid imiterere muburyo bwuzuye bwubugari uhindura hanze yawe .containerkuri .container-fluid.

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

Urugero: Igendanwa na desktop

Ntushaka ko inkingi zawe zishira mubikoresho bito? Koresha ibikoresho byoroheje kandi biciriritse bya gride ibyiciro wongeyeho .col-xs-* .col-md-*inkingi zawe. Reba urugero rukurikira kugirango ubone igitekerezo cyiza cyukuntu byose bikora.

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

Urugero: Igendanwa, tablet, desktop

Wubake kurugero rwabanje mukurema ndetse imbaraga nyinshi kandi zikomeye hamwe .col-sm-*namasomo ya tablet.

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

Urugero: Gupfunyika inkingi

Niba inkingi zirenga 12 zishyizwe mumurongo umwe, buri tsinda ryinyongera zinkingi, nkigice kimwe, zizingira kumurongo mushya.

.col-xs-9

.col-xs-4
Kuva 9 + 4 = 13> 12, iyi div-4-ubugari ya div irazenguruka kumurongo mushya nkigice kimwe gihuza.

.col-xs-6
Inkingi zikurikira zirakomeza kumurongo mushya.

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

Inkingi isubiza

Hamwe nimirongo ine ya gride iboneka ugomba guhura nibibazo aho, aho bigarukira, inkingi zawe ntizisobanutse neza nkuko imwe ari ndende kurenza iyindi. Kugirango ukosore, koresha uruvange rwa a .clearfixhamwe nibisubizo byingirakamaro byamasomo .

.col-xs-6 .col-sm-3
Hindura uko ureba cyangwa urebe kuri terefone yawe urugero.

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

Usibye gusiba inkingi kumurongo ushubije, ushobora gukenera gusubiramo offsets, gusunika, cyangwa gukurura . Reba ibi mubikorwa murugero rwa grid .

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

Kuraho imyanda

Kuraho imyanda kumurongo kandi ni inkingi hamwe .row-no-guttersnishuri.

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

Kureka inkingi

Himura inkingi iburyo ukoresheje .col-md-offset-*amasomo. Aya masomo yongerera ibumoso bwinkingi *yinkingi. Kurugero, .col-md-offset-4yimuka .col-md-4hejuru yinkingi enye.

.col-md-4

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

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

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

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

Urashobora kandi kurenga offsets kuva murwego rwo hasi rwa grid hamwe .col-*-offset-0namasomo.

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

Inkingi

Kugirango ushire ibikubiyemo hamwe na gride isanzwe, ongeramo ibishya .rowkandi ushireho .col-sm-*inkingi muburyo buriho .col-sm-*. Imirongo yatoranijwe igomba gushiramo urutonde rwinkingi ziyongera kuri 12 cyangwa nkeya (ntibisabwa ko ukoresha inkingi 12 zose ziboneka).

Urwego 1: .col-sm-9

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

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

Gutumiza inkingi

Byoroshe guhindura gahunda yuburyo bwubatswe muri grid inkingi hamwe .col-md-push-*namasomo .col-md-pull-*yo guhindura.

.col-md-9 .col-md-gusunika-3

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

Imvange nkeya nibihinduka

Usibye ibyiciro bya gride byateguwe kugirango byihute, Bootstrap ikubiyemo impinduka nke hamwe nivanga kugirango byihute kubyara ibintu byoroheje, bisobanutse.

Ibihinduka

Ibihinduka bigena umubare winkingi, ubugari bwamazi, hamwe nibitangazamakuru byabajijwe aho utangirira kureremba inkingi. Dukoresha ibi kugirango tubyare ibyiciro byateganijwe byateganijwe hejuru, kimwe no kuvanga ibicuruzwa byavuzwe haruguru.

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

Imvange

Imvange zikoreshwa zifatanije na gride ihindagurika kugirango itange ibisobanuro bya CSS kubisobanuro bya grid inkingi.

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

Urugero

Urashobora guhindura ibihinduka kubiciro byawe bwite, cyangwa ugakoresha gusa ivanga nagaciro kabo gasanzwe. Dore urugero rwo gukoresha igenamiterere risanzwe kugirango ukore imiterere-inkingi ebyiri hamwe nu cyuho hagati.

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

Imitwe

Imitwe yose ya HTML, <h1>binyuze <h6>, irahari. .h1binyuze .h6mumasomo nayo arahari, kuberako mugihe ushaka guhuza imyandikire yimyandikire yumutwe ariko ugashaka ko inyandiko yawe yerekanwa kumurongo.

h1. Umutwe wa Bootstrap	Semibold 36px
h2. Umutwe wa Bootstrap	Semibold 30px
h3. Umutwe wa Bootstrap	Semibold 24px
h4. Umutwe wa Bootstrap	Semibold 18px
h5. Umutwe wa Bootstrap	Semibold 14px
h6. Umutwe wa Bootstrap	Semibold 12px

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

Kora urumuri rworoshye, inyandiko yinyongera mumutwe uwo ariwo wose hamwe na <small>tagi rusange cyangwa urwego .small.

h1. Bootstrap umutwe wicyiciro cya kabiri

h2. Bootstrap umutwe wicyiciro cya kabiri

h3. Bootstrap umutwe wicyiciro cya kabiri

h4. Bootstrap umutwe wicyiciro cya kabiri

h5. Bootstrap umutwe wicyiciro cya kabiri

h6. Bootstrap umutwe wicyiciro cya kabiri

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

Kopi yumubiri

Bootstrap isanzwe isanzwe font-sizeni 14px , hamwe line-heightna 1.428 . Ibi birakoreshwa kuri i <body>na paragarafu zose. Mubyongeyeho, <p>(paragarafu) yakira marike yo hepfo ya kimwe cya kabiri cyabazwe umurongo-uburebure (10px kubwa mbere).

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

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur comiculus 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 icara amet non magna. Donec id elit non mi porta gravida kuri eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

<p>...</p>

Kiyobora umubiri

Kora igika kigaragara wongeyeho .lead.

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

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

Yubatswe na Buke

Igipimo cyimyandikire ishingiye kubintu bibiri bito bihinduka mubihinduka.less : @font-size-basena @line-height-base. Iya mbere ni ishingiro ryimyandikire-nini ikoreshwa mugihe cyose naho icya kabiri ni umurongo-muremure. Dukoresha ibyo bihinduka hamwe nimibare yoroshye yo gukora marge, padi, hamwe numurongo-muremure wubwoko bwacu nibindi byinshi. Hindura kandi uhindure imiterere ya Bootstrap.

Shyiramo ibice byanditse

Ikimenyetso cyanditse

Kugirango ugaragaze imikorere yinyandiko kubera akamaro kayo murundi rwego, koresha <mark>tagi.

Urashobora gukoresha ikirango kurishyira ahagaragarainyandiko.

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

Inyandiko yasibwe

Kugirango werekane ibice byanditse byasibwe koresha <del>tagi.

~~Uyu murongo winyandiko ugenewe gufatwa nkumwandiko wasibwe.~~

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

Umwandiko utangaje

Kugirango werekane ibice byinyandiko bitagifite akamaro koresha <s>tagi.

~~Uyu murongo winyandiko ugenewe gufatwa nkibikiri ukuri.~~

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

Shyiramo inyandiko

Kugirango werekane ibyongewe kumyandiko koresha <ins>tagi.

Uyu murongo winyandiko ugenewe gufatwa nkinyongera ku nyandiko.

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

Umurongo ushushanyijeho

Kugirango ushire ahanditse inyandiko koresha <u>tagi.

Uyu murongo winyandiko uzatanga nkuko byashizwe kumurongo

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

Koresha HTML yibanze yibanze hamwe nuburyo bworoshye.

Inyandiko nto

Kugirango ushimangire kumurongo cyangwa guhagarika inyandiko, koresha <small>tagi kugirango ushireho inyandiko kuri 85% ubunini bwababyeyi. Imitwe yimitwe yakira ibyabo font-sizekubintu byashizwe <small>.

Urashobora gukoresha ubundi buryo bwo kumurongo hamwe numwanya .smallwa buriwese <small>.

Uyu murongo winyandiko ugenewe gufatwa nkicapiro ryiza.

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

Ubutinyutsi

Kubitsindagira agace k'inyandiko hamwe n'imyandikire iremereye.

Igice gikurikira cyinyandiko gitangwa nkinyandiko itinyutse .

<strong>rendered as bold text</strong>

Ubutaliyani

Kubitsindagira agace k'inyandiko hamwe na italike.

Igice gikurikira cyinyandiko gitangwa nkinyandiko itomoye .

<em>rendered as italicized text</em>

Ibindi bintu

Umva ko ukoresha <b>kandi<i> muri HTML5. <b>igamije kwerekana amagambo cyangwa interuro uterekanye akamaro kiyongereye mugihe <i>ahanini ari ijwi, amagambo ya tekiniki, nibindi.

Guhuza amasomo

Byoroshye guhindura inyandiko kubice hamwe nibyiciro byo guhuza inyandiko.

Ibumoso bwahujwe.

Hagati ihuza inyandiko.

Umwandiko uhujwe neza.

Inyandiko ifite ishingiro.

Nta nyandiko yo gupfunyika.

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

Amasomo yo guhinduka

Hindura inyandiko mubice hamwe namasomo yinyuguti nkuru.

Inyandiko ntoya.

Inyandiko iri hejuru.

Inyuguti nkuru.

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

Amagambo ahinnye

Gushyira mubikorwa uburyo bwa HTML <abbr>kubintu bigufi hamwe namagambo ahinnye kugirango yerekane verisiyo yagutse kuri hover. Amagambo ahinnye hamwe atitle ikiranga afite urumuri ruto ruri munsi yumupaka hamwe nugufasha indanga kuri hover, itanga ibisobanuro byinyongera kuri hover no kubakoresha tekinoroji ifasha.

Amagambo ahinnye

Amagambo ahinnye yijambo ikiranga ni attr .

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

Intangiriro

Ongeraho .initialismmu magambo ahinnye yimyandikire ntoya.

HTML nikintu cyiza kuva gukata imigati.

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

Aderesi

Tanga amakuru yamakuru kuri ba sogokuruza hafi cyangwa umubiri wose wakazi. Komeza imiterere urangiza imirongo yose hamwe <br>.

Twitter, Inc
1355 Umuhanda w isoko, Suite 900
San Francisco, CA 94103
P: (123) 456-7890

Izina ryuzuye
[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>

Inzitizi

Kugirango usubiremo ibice bikubiye mubindi bisobanuro biri mu nyandiko yawe.

Mburabuzi

Kuzenguruka <blockquote>kuri HTML iyo ari yo yose. Kubisobanuro bitaziguye, turasaba a <p>.

Lorem ipsum dolor icara amet, consectetur adipiscing elit. Byuzuye posuere erat ante.

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

Guhitamo

Imiterere nibirimo bihinduka kubintu byoroshye gutandukana kurwego rusanzwe <blockquote>.

Kwita izina isoko

Ongeraho a <footer>kugirango umenye inkomoko. Kuzuza izina ryinkomoko yakazi muri <cite>.

Lorem ipsum dolor icara amet, consectetur adipiscing elit. Byuzuye posuere erat ante.

Umuntu uzwi muri Source Umutwe

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

Ubundi buryo bwo kwerekana

Ongeraho .blockquote-reversekuri blokquote hamwe nibirimo-iburyo.

Lorem ipsum dolor icara amet, consectetur adipiscing elit. Byuzuye posuere erat ante.

Umuntu uzwi muri Source Umutwe

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

Urutonde

Urutonde rwibintu bitondekanya neza .

Lorem ipsum dolor icara amet
Consectetur adipiscing elit
Integer molestie lorem kuri massa
Facilisis muri pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat kuri
Faucibus porta lacus fringilla vel
Aenean bicara amet erat nunc
Eget porttitor lorem

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

Rutegetse

Urutonde rwibintu byateganijwe bifite akamaro.

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

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

Unstyled

Kuraho ibisanzwe list-stylen'ibumoso kuruhande rwibintu (abana bahita gusa). Ibi bireba gusa abana kurutonde rwibintu , bivuze ko uzakenera kongeramo urwego kurutonde urwo arirwo rwose.

Lorem ipsum dolor icara amet
Consectetur adipiscing elit
Integer molestie lorem kuri massa
Facilisis muri pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat kuri
Faucibus porta lacus fringilla vel
Aenean bicara amet erat nunc
Eget porttitor lorem

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

Umurongo

Shira ibintu byose kurutonde kumurongo umwe hamwe display: inline-block;na padi yoroheje.

Lorem ipsum
Phasellus iaculis
Nulla volutpat

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

Ibisobanuro

Urutonde rwamagambo hamwe nibisobanuro bifitanye isano.

Urutonde rwibisobanuro: Urutonde rwibisobanuro ni rwiza rwo gusobanura amagambo.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.; Donec id elit non mi porta gravida kuri eget metus.
Malesuada porta: Etiam porta sem maleuada magna mollis euismod.

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

Ibisobanuro bitambitse

Kora amagambo nibisobanuro <dl>kumurongo kumurongo. Gutangira gutondekanya nkibisanzwe <dl>s, ariko iyo navbar yagutse, kora ibi.

Urutonde rwibisobanuro: Urutonde rwibisobanuro ni rwiza rwo gusobanura amagambo.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.; Donec id elit non mi porta gravida kuri eget metus.
Malesuada porta: Etiam porta sem maleuada magna mollis euismod.
Felis euismod semper eget lacinia: Fusce dapibus, tellus ac cursus commodo, iyicarubozo mauris condimentum nibh, ut fermentum massa justo icara amet risus.

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

Gucisha bugufi

Urutonde rutambitse urutonde ruzagabanya amagambo maremare cyane kugirango ahuze inkingi yibumoso hamwe text-overflow. Mubyerekezo bigufi, bizahinduka muburyo busanzwe buteganijwe.

Umurongo

Kuzuza ibice bya kode hamwe <code>.

Kurugero, <section>bigomba gupfunyika nkumurongo.

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

Umukoresha

Koresha i <kbd>kugirango werekane ibyinjijwe mubisanzwe byinjiye muri clavier.

Guhindura ububiko, andika cdukurikizaho izina ryubuyobozi.
Guhindura igenamiterere, kanda 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>

Inzitizi y'ibanze

Koresha <pre>imirongo myinshi ya code. Witondere guhunga inguni iyo ari yo yose muri kode kugirango itangwe neza.

<p> Icyitegererezo hano ... </p>

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

Urashobora guhitamo.pre-scrollable , ruzashyiraho uburebure bwa 350px hanyuma utange y-axis umuzingo.

Ibihinduka

Kugirango werekane impinduka koresha <var>tagi.

y = m x + b

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

Icyitegererezo gisohoka

Kugirango werekane guhagarika icyitegererezo gisohoka muri porogaramu koresha <samp>tagi.

Iyi nyandiko igamije gufatwa nkicyitegererezo gisohoka muri porogaramu ya mudasobwa.

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

Urugero rwibanze

Kuburyo bwibanze - urumuri rworoshye kandi rutandukanya gusa - ongeraho urwego shingiro .tablekuri buriwese <table>. Birashobora gusa nkibirenze urugero, ariko urebye ikoreshwa ryinshi ryameza kubindi bicomeka nka kalendari hamwe nabatoranya amatariki, twahisemo gutandukanya imiterere yimiterere yacu.

Imbonerahamwe yanditswemo.
#	Izina	Izina ryanyuma	Izina ryukoresha
1	Ikimenyetso	Otto	@mdo
2	Yakobo	Thornton	@fat
3	Larry	Inyoni	@twitter

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

Imirongo ikurikiranye

Koresha .table-stripedkugirango wongereho zebra-gukuramo kumurongo uwo ariwo wose wameza muri <tbody>.

Guhuza-mushakisha

Imbonerahamwe yanditswemo yanditswe hifashishijwe :nth-childCSS itoranya, itaboneka muri Internet Explorer 8.

#	Izina	Izina ryanyuma	Izina ryukoresha
1	Ikimenyetso	Otto	@mdo
2	Yakobo	Thornton	@fat
3	Larry	Inyoni	@twitter

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

Imeza ihana imbibi

Ongeraho .table-borderedimipaka kumpande zose zameza na selile.

#	Izina	Izina ryanyuma	Izina ryukoresha
1	Ikimenyetso	Otto	@mdo
2	Yakobo	Thornton	@fat
3	Larry	Inyoni	@twitter

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

Komeza umurongo

Ongeraho .table-hoverkugirango ushoboze kugendagenda kumurongo kumeza kumurongo a <tbody>.

#	Izina	Izina ryanyuma	Izina ryukoresha
1	Ikimenyetso	Otto	@mdo
2	Yakobo	Thornton	@fat
3	Larry	Inyoni	@twitter

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

Imeza

Ongeraho .table-condensedkugirango imbonerahamwe irusheho gukata uduce twa selile mo kabiri.

#	Izina	Izina ryanyuma	Izina ryukoresha
1	Ikimenyetso	Otto	@mdo
2	Yakobo	Thornton	@fat
3	Inyoni		@twitter

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

Amasomo ajyanye

Koresha amasomo ajyanye n'amabara kumurongo cyangwa selile imwe.

Icyiciro	Ibisobanuro
`.active`	Koresha ibara rya hover kumurongo runaka cyangwa selile
`.success`	Yerekana igikorwa cyatsinze cyangwa cyiza
`.info`	Yerekana impinduka zidafite aho zibogamiye cyangwa ibikorwa
`.warning`	Yerekana umuburo ushobora gukenera kwitabwaho
`.danger`	Yerekana ibikorwa biteje akaga cyangwa bishobora kuba bibi

#	Umutwe	Umutwe	Umutwe
1	Ibirimo	Ibirimo	Ibirimo
2	Ibirimo	Ibirimo	Ibirimo
3	Ibirimo	Ibirimo	Ibirimo
4	Ibirimo	Ibirimo	Ibirimo
5	Ibirimo	Ibirimo	Ibirimo
6	Ibirimo	Ibirimo	Ibirimo
7	Ibirimo	Ibirimo	Ibirimo
8	Ibirimo	Ibirimo	Ibirimo
9	Ibirimo	Ibirimo	Ibirimo

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

Gutanga ibisobanuro kubuhanga bufasha

Gukoresha ibara kugirango wongere ibisobanuro kumurongo wameza cyangwa selile kugiti cye bitanga gusa icyerekezo cyerekana, kitazashyikirizwa abakoresha tekinoroji ifasha - nkabasoma ecran. Menya neza ko amakuru yerekanwe n'ibara agaragara uhereye kubirimo ubwabyo (inyandiko igaragara mu mbonerahamwe ikurikira / umurongo), cyangwa igashyirwa mu bundi buryo, nk'inyandiko y'inyongera ihishe hamwe .sr-onlyn'ishuri.

Imbonerahamwe isubiza

Kora imbonerahamwe isubiza mugupfunyika icyaricyo .tablecyose .table-responsivekugirango itume izenguruka itambitse kubikoresho bito (munsi ya 768px). Iyo urebye ikintu cyose kirenze 768px ubugari, ntuzabona itandukaniro muribi mbonerahamwe.

Gukata neza / guhagarika

Imbonerahamwe ishubije ikoresha overflow-y: hidden, ikuraho ibintu byose birenze hepfo cyangwa hejuru yimeza. By'umwihariko, ibi birashobora gukuramo ibice byamanutse hamwe nandi mashyaka ya gatatu.

Firefox hamwe nimirima

Firefox ifite stile yuburyo bubi burimo widthkubangamira imbonerahamwe isubiza. Ibi ntibishobora kurengerwa nta Firefox yihariye hack tutabikora muri Bootstrap:

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

Kubindi bisobanuro, soma iki gisubizo cyuzuye .

#	Umutwe	Umutwe	Umutwe	Umutwe	Umutwe	Umutwe
1	Akazu kameza	Akazu kameza	Akazu kameza	Akazu kameza	Akazu kameza	Akazu kameza
2	Akazu kameza	Akazu kameza	Akazu kameza	Akazu kameza	Akazu kameza	Akazu kameza
3	Akazu kameza	Akazu kameza	Akazu kameza	Akazu kameza	Akazu kameza	Akazu kameza

#	Umutwe	Umutwe	Umutwe	Umutwe	Umutwe	Umutwe
1	Akazu kameza	Akazu kameza	Akazu kameza	Akazu kameza	Akazu kameza	Akazu kameza
2	Akazu kameza	Akazu kameza	Akazu kameza	Akazu kameza	Akazu kameza	Akazu kameza
3	Akazu kameza	Akazu kameza	Akazu kameza	Akazu kameza	Akazu kameza	Akazu kameza

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

Urugero rwibanze

Ifishi ya buri muntu igenzura ihita yakira isi yose. Byose byanditse <input>, <textarea>hamwe <select>nibintu hamwe .form-controlbyashizweho width: 100%;kubisanzwe. Kuzuza ibirango hamwe nubugenzuzi .form-groupkugirango ubone umwanya mwiza.

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

Ntukavange amatsinda yo gushiraho hamwe nitsinda ryinjiza

Ntukavange amatsinda yuburyo butaziguye hamwe nitsinda ryinjiza . Ahubwo, shyira itsinda ryinjiza imbere yitsinda ryitsinda.

Ifishi y'umurongo

Ongeraho kumpapuro .form-inlinezawe (zitagomba kuba a <form>) kubumoso-buhujwe na inline-blok igenzura. Ibi birareba gusa kumiterere mubireba byibuze 768px ubugari.

Birashobora gusaba ubugari bwihariye

Iyinjiza nuguhitamo width: 100%;byashyizwe mubikorwa muri Bootstrap. Muburyo bwa inline, dusubiramo ko kubigenzura width: auto;byinshi bishobora gutura kumurongo umwe. Ukurikije imiterere yawe, ubugari bwinyongera bushobora gukenerwa.

Buri gihe ongeraho ibirango

Abasomyi ba ecran bazagira ibibazo kumpapuro zawe niba udashyizemo ikirango kuri buri cyinjijwe. Kuri iyi fomu yumurongo, urashobora guhisha ibirango ukoresheje urwego .sr-only. Hariho ubundi buryo butandukanye bwo gutanga ikirango cya tekinoroji ifasha, nka aria-label, aria-labelledbycyangwa titleikiranga. Niba nta na kimwe muri ibyo gihari, abasomyi ba ecran barashobora kwitabaza gukoresha placeholderikiranga, niba gihari, ariko menya ko gukoresha placeholdernkuwasimbuye ubundi buryo bwo kuranga ibimenyetso bitagiriwe inama.

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

Ifishi itambitse

Koresha Bootstrap ibyiciro byateganijwe mbere kugirango uhuze ibirango hamwe nitsinda ryuburyo bugenzura muburyo butambitse wongeyeho .form-horizontalifishi (itagomba kuba a <form>). Kubikora uhindura .form-groups kugirango witware nka grid umurongo, ntabwo rero bikenewe .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>

Gushyigikirwa

Ingero zuburyo busanzwe bugenzurwa bushyigikiwe nurugero rwimiterere.

Inyongeramusaruro

Byinshi mubisanzwe bigenzura, inyandiko-shingiro yinjiza. Harimo inkunga yubwoko bwose bwa HTML5 : text,,,,,,,,,,,, na . _ _ _ _ _passworddatetimedatetime-localdatemonthtimeweeknumberemailurlsearchtelcolor

Andika imenyekanisha risabwa

Iyinjiza izaba yuzuye gusa niba ibyatangajwe typeneza.

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

Amatsinda yinjiza

Ongeraho inyandiko ihuriweho cyangwa buto mbere na / cyangwa nyuma yinyandiko iyo ari yo yose <input>, reba ibyinjijwe mumatsinda .

Textarea

Ifishi igenzura ishyigikira imirongo myinshi yinyandiko. Hindura rowsikiranga nkuko bikenewe.

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

Agasanduku na radiyo

Kugenzura agasanduku ni uguhitamo kimwe cyangwa byinshi murutonde, mugihe amaradiyo yo guhitamo inzira imwe muri benshi.

Isanduku yamugaye hamwe na radio birashyigikirwa, ariko kugirango utange "inyemerewe" indanga kuri hover yababyeyi , <label>uzakenera kongeramo .disabledishuri kubabyeyi .radio,, cyangwa ..radio-inline.checkbox.checkbox-inline

Ibisanzwe (byegeranye)

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

Shyiramo agasanduku na radio

Koresha .checkbox-inlinecyangwa .radio-inlineibyiciro kurukurikirane rwibisanduku cyangwa amaradiyo kubigenzura bigaragara kumurongo umwe.

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

Agasanduku na radiyo nta nyandiko yanditse

Niba udafite inyandiko muri i <label>, ibyinjijwe bihagaze nkuko ubyiteze. Kugeza ubu ikora gusa kubisanduku itari kumurongo. Wibuke gutanga ubundi buryo bwa label ya tekinoroji ifasha (urugero, gukoresha 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>

Guhitamo

Menya ko abantu benshi kavukire batoranijwe - cyane cyane muri Safari na Chrome - bazengurutse inguni zidashobora guhinduka binyuze border-radiusmumitungo.

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

Kugenzura <select>hamwe na multiplekiranga, amahitamo menshi yerekanwe kubisanzwe.

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

Igenzura rihamye

Mugihe ukeneye gushyira inyandiko isanzwe kuruhande rwikirango muburyo, koresha urwego .form-control-statickuri a <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>

Wibande kuri leta

Dukuraho outlineimisusire isanzwe kumpapuro zimwe na zimwe igenzura hanyuma tugashyira a box-shadowmu mwanya wabyo :focus.

Leta `:focus`yerekana

Ingero zavuzwe haruguru zinjiza zikoresha uburyo bwihariye mubyangombwa byacu kugirango twerekane :focusleta kuri a .form-control.

Leta yamugaye

Ongeraho disabledikiranga boolean kumurongo kugirango wirinde imikoranire yabakoresha. Ibimuga byahagaritswe bigaragara byoroshye kandi wongere not-allowedindanga.

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

Imirima yahagaritswe

Ongeramo disabledikiranga kuri a <fieldset>kugirango uhagarike igenzura ryose <fieldset>icyarimwe.

Caveat kubyerekeye guhuza imikorere ya`<a>`

Mburabuzi, mushakisha izajya ifata imiterere kavukire yose ( <input>, <select>nibintu <button>) imbere <fieldset disabled>nkuwamugaye, ikumira clavier nimbeba kuri bo. Ariko, niba ifishi yawe nayo irimo <a ... class="btn btn-*">ibintu, ibi bizahabwa gusa uburyo bwa pointer-events: none. Nkuko byavuzwe mu gice cyerekeye leta yamugaye kuri buto (na cyane cyane mu gice cyibice bya ankeri), uyu mutungo wa CSS nturashyirwaho kandi ntabwo ushyigikiwe byuzuye muri Opera 18 na munsi, cyangwa muri Internet Explorer 11, kandi uratsinda 'kubuza abakoresha clavier kubasha kwibanda cyangwa gukora iyi link. Kugirango rero ugire umutekano, koresha JavaScript yihariye kugirango uhagarike amahuza nkaya.

Guhuza-mushakisha

Mugihe Bootstrap izakoresha ubu buryo muri mushakisha zose, Internet Explorer 11 na hepfo ntabwo ishigikira byimazeyo disabledikiranga kuri a <fieldset>. Koresha JavaScript yihariye kugirango uhagarike ikibanza muri izi mushakisha.

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

Vuga neza

Ongeraho readonlyikiranga boolean kumurongo kugirango wirinde guhindura agaciro kinjiza. Gusoma-gusa ibyinjira bigaragara byoroheje (kimwe ninjiza zamugaye), ariko gumana indanga isanzwe.

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

Gufasha inyandiko

Hagarika urwego rufasha inyandiko kumpapuro zigenzura.

Guhuza inyandiko ifasha hamwe nuburyo bugenzura

Ubufasha bwanditse bugomba guhuzwa neza nuburyo bwo kugenzura bifitanye isano no gukoresha aria-describedbyikiranga. Ibi bizemeza ko tekinoroji ifasha - nk'abasomyi ba ecran - izatangaza iyi nyandiko ifasha mugihe uyikoresha yibanze cyangwa yinjiye kugenzura.

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

Kwemeza

Bootstrap ikubiyemo uburyo bwo kwemeza amakosa, kuburira, hamwe nubutsinzi bwerekana kugenzura imiterere. Gukoresha, Ongeraho .has-warning, .has-errorCyangwa .has-successKubintu Byababyeyi. Icyo ari cyo cyose .control-label, .form-controlkandi .help-blockmuri kiriya kintu kizakira uburyo bwo kwemeza.

Gutanga ibyemezo byemewe kugirango bifashe tekinoroji hamwe nabakoresha amabara

Gukoresha ubu buryo bwo kwemeza kugirango werekane imiterere yubugenzuzi butanga gusa ishusho, yerekana ibara ryerekana ibimenyetso, bitazashyikirizwa abakoresha tekinoroji ifasha - nk'abasomyi ba ecran - cyangwa kubakoresha amabara.

Menya neza ko ubundi buryo bwo kwerekana leta butangwa. Kurugero, urashobora gushiramo igitekerezo kijyanye na leta mumyandiko igenzura <label>ubwayo (nkuko bigenda murugero rukurikira kode), shyiramo Glyphicon (hamwe nibindi bisobanuro ukoresheje .sr-onlyishuri - reba ingero za Glyphicon ), cyangwa utanga an infashanyo yinyongera guhagarika. By'umwihariko kubijyanye na tekinoroji ifasha, kugenzura imiterere itemewe nayo ishobora guhabwa aria-invalid="true"ikiranga.

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

Nibishushanyo

Urashobora kandi kongeramo ibitekerezo byubushakashatsi utabishaka wongeyeho .has-feedbackhamwe nigishushanyo cyiburyo.

Udushushondanga two gukora gusa hamwe <input class="form-control">nibintu byanditse.

Udushushondanga, ibirango, hamwe nitsinda ryinjiza

Intoki zihererekanyabubasha amashusho arakenewe kubisubizo bidafite ikirango no kubitsinda ryinjiza hamwe na on-on iburyo. Urashishikarizwa gutanga ibirango kubintu byose byinjira kubwimpamvu ziboneka. Niba ushaka kubuza ibirango kutagaragara, uhishe hamwe .sr-onlynishuri. Niba ugomba gukora udafite ibirango, hindura topagaciro k'igitekerezo cyo gutanga ibitekerezo. Kubitsinda ryitsinda, hindura rightagaciro kuri pigiseli ikwiye bitewe n'ubugari bwa addon yawe.

Gutanga igisobanuro ibisobanuro byikoranabuhanga rifasha

Kugirango umenye neza ko tekinoroji ifasha - nk'abasomyi ba ecran - yerekana neza ibisobanuro by'ishusho, inyandiko yinyongera ihishe igomba gushyirwa hamwe .sr-onlynishuri kandi igahuzwa neza nuburyo bugenzurwa bijyanye no gukoresha aria-describedby. Ubundi, menya neza ko ibisobanuro (kurugero, kuba hariho umuburo kumurongo runaka winjira) watanzwe mubundi buryo, nko guhindura inyandiko yibyukuri<label> bifitanye isano no kugenzura ifishi.

Nubwo ingero zikurikira zimaze kuvuga imiterere yo kwemeza imiterere yabyo igenzura mu <label>nyandiko ubwayo, tekinike yavuzwe haruguru (ukoresheje .sr-onlyinyandiko na aria-describedby) yashyizwemo intego zerekana.

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

Udushushanyo twahisemo muburyo butambitse no kumurongo

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

Udushushondanga twihitirwa hamwe `.sr-only`nibirango byihishe

Niba ukoresheje urwego .sr-onlykugirango uhishe ifishi igenzura <label>(kuruta gukoresha ubundi buryo bwo kuranga ibimenyetso aria-label, nkibiranga), Bootstrap izahita ihindura imyanya yikimenyetso imaze kongerwaho.

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

Kugenzura ingano

Shiraho uburebure ukoresheje amasomo nka .input-lg, hanyuma ushireho ubugari ukoresheje grid inkingi ibyiciro nka .col-lg-*.

Uburebure

Kora uburebure burebure cyangwa bugufi bugenzura bihuza ubunini bwa buto.

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

Imiterere ya horizontal ingano

Ingano yihuse ibirango na form igenzura imbere .form-horizontalwongeyeho .form-group-lgcyangwa .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>

Ingano yinkingi

Kuzuza inyongeramusaruro muri grid inkingi, cyangwa ikintu icyo aricyo cyose cyababyeyi, kugirango byoroshye ubugari bwifuzwa.

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

Utubuto

Koresha buto ibyiciro kuri an <a>, <button>cyangwa <input>element.

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

Imikoreshereze yihariye

Mugihe ibyiciro bya buto bishobora gukoreshwa kubintu , gusa <a>ibintu birashyigikirwa muri nav na navbar.<button><button>

Ihuza ikora nka buto

Niba <a>ibice bikoreshwa mugukora nka buto - gukurura urupapuro-mikorere, aho kugana kurundi nyandiko cyangwa igice kurupapuro rwubu - bagomba no guhabwa ibikwiye role="button".

Kwerekana amashusho

Nkumwitozo mwiza, turasaba cyane gukoresha <button>element igihe cyose bishoboka kugirango tumenye guhuza kwambukiranya amashusho.

Mubindi bintu, hariho ikosa muri Firefox <30 ritubuza gushiraho igenamiterere line-heightrya <input>buto-ishingiye, bigatuma badahuza neza nuburebure bwizindi buto kuri Firefox.

Amahitamo

Koresha icyaricyo cyose kiboneka cyamasomo kugirango ukore vuba buto.

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

Gutanga ibisobanuro kubuhanga bufasha

Gukoresha ibara kugirango wongere ibisobanuro kuri buto gusa itanga icyerekezo kigaragara, kitazashyikirizwa abakoresha tekinoroji ifasha - nk'abasoma ecran. Menya neza ko amakuru yerekanwe n'ibara agaragara uhereye kubirimo ubwabyo (inyandiko igaragara ya buto), cyangwa igashyirwa muburyo butandukanye, nk'inyandiko yinyongera ihishe hamwe .sr-onlynishuri.

Ingano

Ibyiza binini cyangwa bito? Ongeraho .btn-lg, .btn-smcyangwa .btn-xskubindi binini.

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

Kora urwego rwo guhagarika buto-izenguruka ubugari bwuzuye bwababyeyi - wongeyeho .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>

Leta ikora

Utubuto tuzagaragara gukanda (hamwe numwijima wijimye, umupaka wijimye, no gushiramo igicucu) mugihe ukora. Kubintu <button>, ibi bikorwa binyuze :active. Kubintu <a>, byakozwe hamwe .active. Ariko, urashobora gukoresha .activekuri <button>s (kandi ushizemo aria-pressed="true"ikiranga) mugihe ukeneye kwigana leta ikora gahunda.

Ikintu cya buto

Ntibikenewe ko wongera :activenkuko ari pseudo-urwego, ariko niba ukeneye guhatira isura imwe, jya imbere wongere .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>

Ikintu cya Anchor

Ongeraho urwego .activekuri <a>buto.

Ihuza ryibanze Ihuza

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

Leta yamugaye

Kora utubuto dusa nkudashobora kubisubiza inyuma opacity.

Ikintu cya buto

Ongeramo disabledikiranga kuri <button>buto.

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

Guhuza-mushakisha

Niba wongeyeho disabledikiranga kuri a <button>, Internet Explorer 9 na hepfo izatanga inyandiko imvi hamwe nigicucu kibi-igicucu tudashobora gukosora.

Ikintu cya Anchor

Ongeraho urwego .disabledkuri <a>buto.

Ihuza ryibanze Ihuza

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

Dukoresha .disablednkibyiciro byingirakamaro hano, bisa nicyiciro rusange .active, ntabwo rero prefix isabwa.

Ihuza imikorere caveat

Iri somo rikoresha pointer-events: nonekugerageza guhagarika imikorere yimikorere ya <a>s, ariko uwo mutungo wa CSS nturashyirwaho kandi ntabwo ushyigikiwe byuzuye muri Opera 18 na munsi, cyangwa muri Internet Explorer 11. Byongeye kandi, no muri mushakisha ikora inkunga pointer-events: none, clavier kugendana bikomeje kutagira ingaruka, bivuze ko abakoresha clavier babonye hamwe nabakoresha tekinoroji ifasha bazakomeza gukora iyo miyoboro. Kugirango rero ugire umutekano, koresha JavaScript yihariye kugirango uhagarike amahuza nkaya.

Amashusho asubiza

Amashusho muri Bootstrap 3 arashobora gukorwa muburyo bworoshye-wongeyeho .img-responsiveishuri. Ibi birakurikizwa max-width: 100%;, height: auto;no display: block;kubishusho kuburyo bipima neza kubintu byababyeyi.

Guhuza amashusho akoresha urwego .img-responsive, koresha .center-blockaho .text-center. Reba icyiciro cyabafasha igice kugirango ubone ibisobanuro birambuye kubyerekeye .center-blockimikoreshereze.

SVG amashusho na IE 8-10

Muri Internet Explorer 8-10, amashusho ya SVG afite .img-responsiveubunini butagereranywa. Kugira ngo ukosore ibi, ongera width: 100% \9;aho bikenewe. Bootstrap ntabwo ikoreshwa muburyo bwikora kuko itera ingorane kumiterere yandi mashusho.

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

Imiterere y'amashusho

Ongeraho amasomo kubintu <img>byoroshye gushushanya amashusho mumushinga uwo ariwo wose.

Guhuza-mushakisha

Wibuke ko Internet Explorer 8 ibura inkunga kumpande zegeranye.

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

Amabara asanzwe

Tanga ibisobanuro ukoresheje ibara hamwe nintoki zo gushimangira amasomo yingirakamaro. Ibi birashobora kandi gukoreshwa kumihuza kandi bizacura umwijima kuri hover nkuburyo busanzwe bwo guhuza.

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

Nullam id dolor id nibh ultricies vehicula ut id elit.

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

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

Etiam porta sem maleuada 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>

Gukemura ibibazo byihariye

Rimwe na rimwe, amasomo yo gushimangira ntashobora gukoreshwa kubera umwihariko wundi watoranije. Mu bihe byinshi, akazi gahagije ni ugupfunyika inyandiko yawe <span>hamwe nishuri.

Gutanga ibisobanuro kubuhanga bufasha

Gukoresha ibara kugirango wongere ibisobanuro bitanga gusa icyerekezo cyerekana, kitazashyikirizwa abakoresha tekinoroji ifasha - nk'abasoma ecran. Menya neza ko amakuru yerekanwe nibara yaba agaragara mubirimo ubwabyo (amabara avugwa akoreshwa gusa mugushimangira ibisobanuro bimaze kugaragara mubyanditswe / ikimenyetso), cyangwa bigashyirwa muburyo butandukanye, nkinyandiko yinyongera ihishe hamwe .sr-onlynishuri .

Amavu n'amavuko

Bisa nibisobanuro byanditseho ibara ryamasomo, byoroshye gushiraho inyuma yibintu kurwego urwo arirwo rwose. Ibice bya Anchor bizijimye kuri hover, kimwe namasomo yinyandiko.

Nullam id dolor id nibh ultricies vehicula ut id elit.

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

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

Etiam porta sem maleuada 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>

Gukemura ibibazo byihariye

Rimwe na rimwe, ibyiciro byibanze ntibishobora gukoreshwa kubera umwihariko wundi watoranije. Rimwe na rimwe, akazi gahagije ni ugupfunyika ibintu byawe muri <div>hamwe nishuri.

Gutanga ibisobanuro kubuhanga bufasha

Kimwe namabara asobanutse , menya neza ko igisobanuro icyo aricyo cyose cyatanzwe binyuze mumabara nacyo gitangwa muburyo butagaragajwe gusa.

Funga agashusho

Koresha igishushanyo rusange cyo gufunga kugirango wirukane ibirimo nka moderi no kumenyesha.

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

Carets

Koresha carets kugirango werekane imikorere yamanuka nicyerekezo. Menya neza ko caret isanzwe izahita ihinduka muri menu yataye .

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

Kureremba vuba

Fata ikintu ibumoso cyangwa iburyo hamwe nishuri. !importantirimo kugirango wirinde ibibazo byihariye. Amasomo arashobora kandi gukoreshwa nka mixin.

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

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

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

Guhagarika ibirimo hagati

Shiraho ikintu kuri display: blockna hagati ukoresheje margin. Biraboneka nka mixin hamwe nishuri.

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

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

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

Ibisobanuro

Byoroshye gusiba floats wongeyeho .clearfix kubintu byababyeyi . Koresha micro clearfix nkuko ikunzwe na Nicolas Gallagher. Irashobora kandi gukoreshwa nka mixin.

<!-- Usage as a class -->
<div class="clearfix">...</div>

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

// Usage as a mixin
.element {
  .clearfix();
}

Kwerekana no guhisha ibirimo

Hata ikintu kugirango cyerekanwe cyangwa cyihishe ( harimo nabasomyi ba ecran.show ) hamwe no gukoresha .hiddenamasomo. Aya masomo akoresha !importantkugirango yirinde amakimbirane yihariye, kimwe no kureremba byihuse . Baraboneka gusa kumurongo wo guhagarika. Birashobora kandi gukoreshwa nkivanga.

.hideirahari, ariko ntabwo buri gihe igira ingaruka kubasomyi ba ecran kandi iteshwa agaciro nka v3.0.1. Koresha .hiddencyangwa .sr-onlyaho.

Byongeye kandi, .invisibleirashobora gukoreshwa muguhindura gusa kugaragara kwikintu, bivuze ko displaykidahinduwe kandi ikintu gishobora kugira ingaruka kumyandiko.

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

Isoma rya ecran hamwe nibirimo byo kugendana na clavier

Hisha ikintu kubikoresho byose usibye abasoma ecran hamwe .sr-only. Huza .sr-onlyhamwe .sr-only-focusablekugirango werekane ikintu nanone iyo cyibanze (urugero: ukoresha clavier-gusa). Birakenewe gukurikiza uburyo bwiza bwo kugerwaho . Irashobora kandi gukoreshwa nka mixin.

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

Gusimbuza amashusho

Koresha urwego .text-hidecyangwa kuvanga kugirango ufashe gusimbuza ibintu byanditse hamwe nishusho yinyuma.

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

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

Kugirango iterambere ryihuta-ryimikorere, koresha aya masomo yingirakamaro kugirango werekane kandi uhishe ibirimo ukoresheje ibikoresho ukoresheje itangazamakuru. Harimo kandi amasomo yingirakamaro yo guhinduranya ibintu iyo byacapwe.

Gerageza gukoresha ibi bigarukira kandi wirinde gukora verisiyo zitandukanye zurubuga rumwe. Ahubwo, koresha kugirango wuzuze buri gikoresho cyerekana.

Amasomo aboneka

Koresha kimwe cyangwa guhuza ibyiciro bihari kugirango uhindure ibintu hirya nohino.

	Ibikoresho bito byiyongereyeTerefone (<768px)	Ibikoresho bitoIbinini (68768px)	Ibikoresho biciriritseIbiro (≥992px)	Ibikoresho bininiIbiro (≥1200px)
`.visible-xs-*`	Biboneka	Hihishe	Hihishe	Hihishe
`.visible-sm-*`	Hihishe	Biboneka	Hihishe	Hihishe
`.visible-md-*`	Hihishe	Hihishe	Biboneka	Hihishe
`.visible-lg-*`	Hihishe	Hihishe	Hihishe	Biboneka
`.hidden-xs`	Hihishe	Biboneka	Biboneka	Biboneka
`.hidden-sm`	Biboneka	Hihishe	Biboneka	Biboneka
`.hidden-md`	Biboneka	Biboneka	Hihishe	Biboneka
`.hidden-lg`	Biboneka	Biboneka	Biboneka	Hihishe

Nko kuri v3.2.0, .visible-*-*ibyiciro kuri buri cyiciro biza muburyo butatu, kimwe kuri buri displaymutungo wa CSS urutonde hepfo.

Itsinda ry'amasomo	CSS`display`
`.visible-*-block`	`display: block;`
`.visible-*-inline`	`display: inline;`
`.visible-*-inline-block`	`display: inline-block;`

Noneho, kubindi byoroheje ( xs) byerekanwa kurugero, .visible-*-*ibyiciro bihari ni : .visible-xs-block,, .visible-xs-inlinena .visible-xs-inline-block.

Ibyiciro .visible-xs,,, kandi birahari, ariko .visible-smbirateshwa agaciro nka v3.2.0 . Bingana hafi , usibye nibindi bidasanzwe byihariye byo guhinduranya ibintu bifitanye isano..visible-md.visible-lg.visible-*-block<table>

Shira amasomo

Bisa nibyiciro bisanzwe byitabira, koresha ibi kugirango uhindure ibintu kugirango bicapwe.

Amasomo	Mucukumbuzi	Icapa
`.visible-print-block` `.visible-print-inline` `.visible-print-inline-block`	Hihishe	Biboneka
`.hidden-print`	Biboneka	Hihishe

Icyiciro .visible-printnacyo kirahari ariko cyataye agaciro guhera v3.2.0. Nibigereranyo bihwanye na .visible-print-block, usibye nibindi bidasanzwe byihariye kubintu <table>bifitanye isano.

Imanza

Hindura amashusho yawe cyangwa umutwaro kubikoresho bitandukanye kugirango ugerageze ibyiciro byingirakamaro.

Biboneka ku ...

Icyatsi kibisi cyerekana ikintu kigaragara muburyo bwawe bwo kureba.

Ntoya Biboneka kuri x-nto

Ntoya Biboneka kuri bito

Hagati Biboneka hagati

Kinini Biboneka kuri nini

Byoroheje na bito Biboneka kuri x-nto na nto

Hagati kandi nini Biboneka ku kigero kinini kandi kinini

Ibindi bito n'ibiciriritse Biboneka kuri x-nto na hagati

Ntoya nini Biboneka kuri bito na binini

Byoroheje na binini Biboneka kuri x-nto na nini

Ntoya na hagati Biboneka kuri bito n'ibiciriritse

Hihishe ku ...

Hano, icyatsi kibisi nacyo cyerekana ikintu cyihishe muburyo bwawe bwo kureba.

Ntoya Yihishe kuri x-nto

Ntoya Yihishe kuri gito

Hagati Yihishe hagati

Kinini Yihishe kuri nini

Byoroheje na bito Yihishe kuri x-nto na nto

Hagati kandi nini Yihishe hagati na nini

Ibindi bito n'ibiciriritse Byihishe kuri x-ntoya na hagati

Ntoya nini Byihishe kuri bito na binini

Byoroheje na binini Yihishe kuri x-nto na nini

Ntoya na hagati Byihishe kuri bito n'ibiciriritse

CSS ya Bootstrap yubatswe kuri Buke, progaramu itunganijwe hamwe nibikorwa byinyongera nkibihinduka, ivanga, nibikorwa byo gukusanya CSS. Abashaka gukoresha inkomoko Idosiye nkeya aho kuba dosiye yacu ya CSS yakusanyije barashobora gukoresha impinduka nyinshi hamwe na mixin dukoresha murwego rwose.

Impinduka za gride hamwe nivanga bitwikiriye mugice cya sisitemu .

Gukusanya Bootstrap

Bootstrap irashobora gukoreshwa byibuze muburyo bubiri: hamwe na CSS yakozwe cyangwa hamwe ninkomoko Idosiye nkeya. Gukusanya amadosiye make, baza Igice cyo Gutangira uburyo bwo gushiraho ibidukikije byiterambere kugirango ukore amategeko akenewe.

Igice cya gatatu cyo gukusanya ibikoresho gishobora gukorana na Bootstrap, ariko ntibishyigikiwe nitsinda ryacu ryibanze.

Ibihinduka

Ibihinduka bikoreshwa mumushinga wose nkuburyo bwo guhuza no gusangira indangagaciro zikoreshwa nkamabara, intera, cyangwa imyandikire yimyandikire. Kumeneka yuzuye, nyamuneka reba Customizer .

Amabara

Byoroshye gukoresha ikoreshwa ryamabara abiri: ibara ryinshi nubusobanuro. Ibara rya graycale ritanga uburyo bwihuse kubisanzwe bikoreshwa mugicucu cyumukara mugihe ibisobanuro birimo amabara atandukanye yahawe agaciro keza.

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

Koresha icyaricyo cyose cyamabara ahindagurika uko ari cyangwa uyohereze kubindi bisobanuro bihinduka kumushinga wawe.

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

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

Gukubita

Intoki zingirakamaro kugirango uhindure byihuse ibintu byingenzi bigize skeleton yurubuga rwawe.

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

Ihuza

Byoroshye gutunganya amahuza yawe hamwe nibara ryiza hamwe nagaciro kamwe gusa.

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

Menya ko @link-hover-colorikoresha imikorere, ikindi gikoresho giteye ubwoba kuva Gito, kugirango uhite ukora ibara ryiburyo ryiza. Urashobora gukoresha darken,,, lightenna saturate.desaturate

Imyandikire

Byoroshye gushiraho imyandikire yawe, ingano yinyandiko, kuyobora, nibindi byinshi hamwe na bike bihinduka. Bootstrap ikoresha ibyo kimwe kugirango itange imashini yoroshye.

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

Udushushondanga

Ibintu bibiri byihuse kugirango uhindure ahantu hamwe nizina ryizina ryibishushanyo byawe.

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

Ibigize

Ibigize muri Bootstrap ikoresha bimwe mubihinduka kugirango ushireho indangagaciro. Hano harakoreshwa cyane.

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

Abacuruzi bavanga

Abacuruzi bavanga ni imvange kugirango ifashe gushyigikira mushakisha nyinshi ushizemo ibicuruzwa byose byabacuruzi bijyanye na CSS yawe.

Ingano

Ongera usubize ibice byawe 'agasanduku k'icyitegererezo hamwe na mixin imwe. Kubireba, reba iyi ngingo ifasha kuva muri Mozilla .

Ivanga ryataye agaciro guhera kuri v3.2.0, hamwe no gutangiza Autoprefixer. Kugirango ubungabunge inyuma-guhuza, Bootstrap izakomeza gukoresha mixin imbere kugeza Bootstrap v4.

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

Inguni zegeranye

Uyu munsi mushakisha zose zigezweho zishyigikira border-radiusimitungo idateganijwe. Nkibyo, nta .border-radius()mixin, ariko Bootstrap ikubiyemo shortcuts zo kuzenguruka vuba impande ebyiri kuruhande runaka rwikintu.

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

Agasanduku (Igitonyanga) igicucu

Niba abo ukurikirana ukoresha amashusho agezweho kandi akomeye kandi akomeye, menya neza gukoresha box-shadowumutungo wenyine. Niba ukeneye inkunga ya Android ishaje (pre-v4) hamwe nibikoresho bya iOS (pre-iOS 5), koresha mixin itaye agaciro kugirango utore -webkitprefix isabwa.

Ivanga ryataye agaciro guhera kuri v3.1.0, kubera ko Bootstrap idashyigikira kumugaragaro urubuga rushaje rudashyigikira umutungo usanzwe. Kugirango ubungabunge inyuma-guhuza, Bootstrap izakomeza gukoresha mixin imbere kugeza Bootstrap v4.

Witondere gukoresha rgba()amabara mugasanduku kawe kugirango uhuze kuburyo bushoboka hamwe ninyuma.

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

Inzibacyuho

Imvange nyinshi zo guhinduka. Shiraho amakuru yinzibacyuho yose hamwe, cyangwa ugaragaze gutinda nigihe kirekire nkuko bikenewe.

Imvange zateshejwe agaciro nka v3.2.0, hamwe no gutangiza Autoprefixer. Kugirango ubungabunge inyuma-guhuza, Bootstrap izakomeza gukoresha imvange imbere kugeza 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;
}

Guhinduka

Kuzenguruka, gupima, guhindura (kwimuka), cyangwa kugoreka ikintu icyo aricyo cyose.

Imvange zateshejwe agaciro nka v3.2.0, hamwe no gutangiza Autoprefixer. Kugirango ubungabunge inyuma-guhuza, Bootstrap izakomeza gukoresha imvange imbere kugeza 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;
}

Animasiyo

Imvange imwe yo gukoresha ibintu byose bya animasiyo ya CSS3 muri déclaration imwe nindi ivanga kubintu byihariye.

Imvange zateshejwe agaciro nka v3.2.0, hamwe no gutangiza Autoprefixer. Kugirango ubungabunge inyuma-guhuza, Bootstrap izakomeza gukoresha imvange imbere kugeza 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;
}

Amahirwe

Shiraho opacite kuri mushakisha zose hanyuma utange filterkugaruka kuri IE8.

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

Umwandiko

Tanga imiterere yo kugenzura imiterere muri buri murima.

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

Inkingi

Gukora inkingi ukoresheje CSS mubintu bimwe.

.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

Byoroshye guhindura amabara ayo ari yo yose muburyo bwinyuma. Shaka byinshi kandi ushireho icyerekezo, koresha amabara atatu, cyangwa ukoreshe radiyo ya radiyo. Hamwe na mixin imwe ubona ibisobanuro byose byateganijwe uzakenera.

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

Urashobora kandi kwerekana inguni yibisanzwe bibiri-amabara, umurongo ugereranya:

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

Niba ukeneye kogosha-umurongo wuburyo bwa gradient, ibyo biroroshye, kandi. Gusa vuga ibara rimwe hanyuma tuzarengere umurongo wera usobanutse.

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

Hejuru ya ante hanyuma ukoreshe amabara atatu aho. Shiraho ibara ryambere, ibara rya kabiri, ibara rya kabiri ibara rihagarara (agaciro k'ijanisha nka 25%), naho ibara rya gatatu hamwe n'uruvange:

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

Umutwe! Mugihe ukeneye gukuraho gradient, menya neza gukuraho IE yihariye filterushobora kuba wongeyeho. Urashobora kubikora ukoresheje .reset-filter()mixin kuruhande background-image: none;.

Imvange zingirakamaro

Imikoreshereze yingirakamaro ni ivanga rihuza ubundi umutungo wa CSS udafitanye isano kugirango ugere ku ntego cyangwa umurimo runaka.

Ibisobanuro

Wibagiwe kongeramo class="clearfix"ikintu icyo aricyo cyose hanyuma wongereho .clearfix()mixin aho bikenewe. Koresha micro clearfix kuva Nicolas Gallagher .

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

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

Gutambika kuri horizontal

Byihuse shyira ikintu icyo aricyo cyose mubabyeyi. Irasaba widthcyangwa max-widthgushyirwaho.

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

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

Abafasha

Kugaragaza ibipimo byikintu byoroshye.

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

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

Inyandiko zishobora kuboneka

Byoroshye gushiraho uburyo bwo guhindura imiterere ya textarea iyariyo yose, cyangwa ikindi kintu icyo aricyo cyose. Mburabuzi imyitwarire isanzwe ya mushakisha ( both).

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

Guhagarika inyandiko

Byoroshye kugabanya inyandiko hamwe na ellipsis hamwe na mixin imwe. Irasaba ikintu kuba blockcyangwa inline-blockurwego.

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

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

Retina

Kugaragaza inzira ebyiri zishusho hamwe nubunini bwa @ 1x, kandi Bootstrap izatanga ikibazo cya @ 2x itangazamakuru. Niba ufite amashusho menshi yo gukora, tekereza kwandika ishusho yawe ya retina CSS intoki mubibazo bimwe byitangazamakuru.

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

Mugihe Bootstrap yubatswe kuri Less, ifite kandi icyambu cya Sass cyemewe . Turayibungabunga mububiko butandukanye bwa GitHub kandi dukoresha ibishya hamwe ninyandiko yo guhindura.

Harimo iki

Kubera ko icyambu cya Sass gifite repo itandukanye kandi ikorera abayumva batandukanye, ibiri mumushinga bitandukanye cyane numushinga mukuru wa Bootstrap. Ibi byemeza ko icyambu cya Sass gihuye na sisitemu nyinshi zishingiye kuri Sass.

Inzira	Ibisobanuro
`lib/`	Kode ya amabuye y'agaciro (Iboneza rya Sass, Rail na Compass integrated)
`tasks/`	Guhindura inyandiko (guhindukira hejuru Hasi Kuri Sass)
`test/`	Ibizamini byo gukusanya
`templates/`	Porogaramu ya compass igaragara
`vendor/assets/`	Sass, JavaScript, na dosiye yimyandikire
`Rakefile`	Imirimo y'imbere, nka rake no guhindura

Sura ububiko bwa Sass port ya GitHub kugirango urebe amadosiye akora.

Kwinjiza

Kumakuru yukuntu washyiraho no gukoresha Bootstrap kuri Sass, baza ububiko bwa GitHub . Nibisanzwe bigezweho kandi bikubiyemo amakuru yo gukoresha hamwe na Rail, Compass, hamwe nimishinga isanzwe ya Sass.

Bootstrap ya Sass

CSS

Incamake

HTML5

Igendanwa mbere

Imyandikire hamwe

Ubusanzwe.css

Ibikoresho

Sisitemu ya sisitemu

Intangiriro

Ibibazo by'itangazamakuru

Amahitamo ya gride

Urugero: Bishyizwe kuri-horizontal

Urugero: Igikoresho cyamazi

Urugero: Igendanwa na desktop

Urugero: Igendanwa, tablet, desktop

Urugero: Gupfunyika inkingi

Inkingi isubiza

Kuraho imyanda

Kureka inkingi

Inkingi

Gutumiza inkingi

Imvange nkeya nibihinduka

Ibihinduka

Imvange

Urugero

Imyandikire

Imitwe

h1. Umutwe wa Bootstrap

h2. Umutwe wa Bootstrap

h3. Umutwe wa Bootstrap

h4. Umutwe wa Bootstrap

h5. Umutwe wa Bootstrap

h6. Umutwe wa Bootstrap

h1. Bootstrap umutwe wicyiciro cya kabiri

h2. Bootstrap umutwe wicyiciro cya kabiri

h3. Bootstrap umutwe wicyiciro cya kabiri

h4. Bootstrap umutwe wicyiciro cya kabiri

h5. Bootstrap umutwe wicyiciro cya kabiri

h6. Bootstrap umutwe wicyiciro cya kabiri

Kopi yumubiri

Kiyobora umubiri

Yubatswe na Buke

Shyiramo ibice byanditse

Ikimenyetso cyanditse

Inyandiko yasibwe

Umwandiko utangaje

Shyiramo inyandiko

Umurongo ushushanyijeho

Inyandiko nto

Ubutinyutsi

Ubutaliyani

Ibindi bintu

Guhuza amasomo

Amasomo yo guhinduka

Amagambo ahinnye

Amagambo ahinnye

Intangiriro

Aderesi

Inzitizi

Mburabuzi

Guhitamo

Kwita izina isoko

Ubundi buryo bwo kwerekana

Urutonde

Urutonde

Rutegetse

Unstyled

Umurongo

Ibisobanuro

Ibisobanuro bitambitse

Gucisha bugufi

Kode

Umurongo

Umukoresha

Inzitizi y'ibanze

Ibihinduka

Icyitegererezo gisohoka

Imbonerahamwe

Urugero rwibanze

Imirongo ikurikiranye

Leta `:focus`yerekana

Caveat kubyerekeye guhuza imikorere ya`<a>`

Udushushondanga twihitirwa hamwe `.sr-only`nibirango byihishe