Haere ki raro i nga waahanga matua o te hanganga o Bootstrap, tae atu ki ta maatau huarahi ki te whakawhanaketanga paetukutuku pai ake, tere ake, kaha ake.

HTML5 momo tuhinga

Ka whakamahi a Bootstrap i etahi huānga HTML me etahi taonga CSS e hiahia ana ki te whakamahi i te momo tuhinga HTML5. Whakauruhia ki te timatanga o o kaupapa katoa.

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

Waea pūkoro tuatahi

Ma te Bootstrap 2, i taapirihia e matou nga momo momo waea pūkoro mo nga waahanga matua o te anga. Ma te Bootstrap 3, kua tuhi ano matou i te kaupapa kia noho hoa mo te waea mai i te timatanga. Engari ki te taapiri i nga momo momo pūkoro, ka tunua ki roto tonu. Inaa , ko Bootstrap te pūkoro tuatahi . Ka kitea nga momo waea tuatahi puta noa i te whare pukapuka katoa, kaua ki nga konae motuhake.

Hei whakarite i te whakaputa tika me te topa pa, taapirihia te tohu meta tauranga tirohanga ki to <head>.

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

Ka taea e koe te whakakore i nga kaha topa i runga i nga taputapu pūkoro ma te taapiri user-scalable=noki te tohu tohu meta tauranga. Ka mono tenei i te topa, ko te tikanga ka taea e nga kaiwhakamahi te panuku noa, ka puta he ahua ake o to papaanga ki te tono taketake. I te katoa, kaore matou e taunaki i tenei i runga i nga waahi katoa, na kia tupato!

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

Tuhituhi me nga hononga

Ka whakatakotohia e Bootstrap nga whakaaturanga taketake o te ao, te tuhi tuhi, me nga momo hono. Ina koa, ko taatau:

Whakatakotoria background-color: #fff;ki rungabody
Whakamahia te @font-family-base, @font-size-base, me @line-height-basenga huanga hei turanga tuhi
Tautuhia te tae hono o te ao ma @link-colorte whakamahi i nga tohu hono ki runga anake:hover

Ka kitea enei momo i roto scaffolding.less.

Normalize.css

Mo te pai ake o te whakawhiti tirotiro tirotiro, whakamahia Normalize.css , he kaupapa na Nicolas Gallagher me Jonathan Neal .

Nga ipu

Me whai huānga kei roto a Bootstrap hei takai i nga ihirangi o te pae me te whakanoho i to maatau punaha matiti. Ka taea e koe te whiriwhiri tetahi o nga ipu e rua hei whakamahi i o kaupapa. Kia mahara, na te mea paddingme te maha atu, kaore tetahi ipu e noho kohanga.

Whakamahia .containermo te ipu whanui pumau.

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

Whakamahia .container-fluidmo te ipu whanui tonu, me te whanui katoa o to tauranga tirohanga.

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

Kei roto i te Bootstrap tetahi punaha matiti wai tuatahi waea pūkoro e tika ana kia eke ki te 12 nga pou ka piki te rahi o te taputapu, te tauranga tiro ranei. Kei roto i nga karaehe kua tautuhia mo nga whiringa tahora ngawari, me nga whakaurunga kaha mo te whakaputa i nga whakatakotoranga kupu .

Kupu Whakataki

Ka whakamahia nga punaha matiti hei hanga tahora wharangi ma roto i nga rarangi rarangi me nga pou e noho ana i to ihirangi. Anei te mahi a te punaha matiti Bootstrap:

Me whakanoho nga rarangi ki roto i te .container(whanui-tonu) ranei .container-fluid(whanui-katoa) kia tika ai te tirohanga me te papa.
Whakamahia nga rarangi hei hanga i nga roopu whakapae o nga pou.
Me whakauru nga ihirangi ki roto i nga pou, a ko nga pou anake pea he tamariki tonu o nga rarangi.
Ko nga karaehe matiti kua tautuhia kua rite .row, .col-xs-4e waatea ana mo te hanga tere i nga whakatakotoranga matiti. Ka taea hoki te whakamahi i nga whakaurunga iti ake mo nga whakatakotoranga reo.
Ka hangaia e nga pou nga awaawa (nga waahi i waenga i nga ihirangi pou) ma padding. Ka whakatikitia taua papa ki nga rarangi mo te pou tuatahi me te pou whakamutunga ma te tawhē kino i .rowte s.
Ko te tawhē tōraro he aha ngā tauira i raro nei i waho. Ko te tikanga kia whakararangihia nga ihirangi o roto i nga pou matiti ki nga ihirangi matiti-kore.
Ka hangaia nga pou matiti ma te tohu i te maha o nga pou tekau ma rua e waatea ana e hiahia ana koe ki te hora. Hei tauira, e toru nga pou rite ka whakamahi kia toru .col-xs-4.
Ki te neke atu i te 12 nga pou ka whakauruhia ki roto i te rarangi kotahi, ka takai ia roopu o nga pou taapiri, hei waeine kotahi, ki tetahi raina hou.
Ka pa nga karaehe matiti ki nga taputapu he nui ake te whanui o te mata, he rite ranei ki nga rahinga wehenga, ka whakakore i nga karaehe matiti e whaaia ana ki nga taputapu iti ake. No reira, hei tauira, ko te whakamahi i tetahi .col-md-*karaehe ki tetahi huānga ka kore noa e pa ki tana whakaahua ki nga taputapu reo engari ki nga taputapu nui mena karekau he .col-lg-*karaehe.

Titiro ki nga tauira mo te whakamahi i enei maataapono ki to waehere.

Uiui pāpāho

Ka whakamahia e matou nga patai pāpāho e whai ake nei i roto i a maatau konae iti ake hei hanga i nga waahanga wehenga matua i roto i ta maatau punaha matiti.

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

I etahi wa ka whakawhanuihia e matou enei patai pāpāho ki te whakauru i te max-widthki te whakawhāiti i te CSS ki tetahi huinga taputapu whaiti.

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

Kōwhiringa mātiti

Tirohia te mahi a nga ahuatanga o te punaha matiti Bootstrap puta noa i nga taputapu maha me te tepu pai.

	Nga taputapu iti atu Waea (<768px)	Nga taputapu iti Papa (≥768px)	Nga taputapu Waenga Papamahi (≥992px)	Nga taputapu nui Papamahi (≥1200px)
Te whanonga matiti	Whakapae i nga wa katoa	I tiango ki te tiimata, whakapae i runga ake i nga waahi pakaru
Whānui ipu	Kore (aunoa)	750px	970px	1170px
Pimua karaehe	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`
# o nga pou	12
Whānui tīwae	Aunoa	~62px	~81px	~97px
Te whanui o te awaawa	30px (15px ki ia taha o te tīwae)
Nestable	Ae
Wehenga	Ae
Whakaraupapa tīwae	Ae

Tauira: Tāpae-ki-whakapae

Ma te whakamahi i te huinga kotahi o .col-md-*nga karaehe matiti, ka taea e koe te hanga i tetahi punaha matiti taketake ka tiimata ki runga i nga taputapu pūkoro me nga taputapu papa (te awhe iti ki te iti) i mua i te noho whakapae i runga i nga taputapu papamahi (waenganui). Whakanohoia nga pou matiti ki tetahi .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>

Tauira: ipu wai

Hurihia tetahi tahora matiti whanui-whanui ki te tahora whanui-katoa ma te huri i to waho .containerrawa ki .container-fluid.

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

Tauira: Waea pūkoro me te papamahi

Kare koe e hiahia kia tapae noa o pou ki roto i nga taputapu iti? Whakamahia nga karaehe matiti taputapu iti me te reo ma te taapiri atu .col-xs-* .col-md-*ki o pou. Tirohia te tauira i raro nei mo te whakaaro pai ake mo te mahi katoa.

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

Tauira: Pukoro, papa, papamahi

Hangaia i runga i te tauira o mua ma te hanga i nga whakatakotoranga hihiri me te kaha me nga .col-sm-*karaehe papa.

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

Tauira: Te takai tīwae

Ki te neke atu i te 12 nga pou ka whakauruhia ki roto i te rarangi kotahi, ka takai ia roopu o nga pou taapiri, hei waeine kotahi, ki tetahi raina hou.

.col-xs-9

.col-xs-4
Mai i te 9 + 4 = 13 > 12, ka takaia tenei wehenga 4-tīwae-whanui ki tetahi raina hou hei wae piri tahi.

.col-xs-6 Ka
haere tonu nga pou o muri mai i te raina hou.

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

Ka tautuhia nga pou whakautu

Na nga taumata e wha o nga matiti e waatea ana ka raru koe ki etahi take, i etahi waahi, karekau e tino marama o pou i te mea he teitei ake tetahi i tetahi. Hei whakatika i tera, whakamahia te huinga o a .clearfixme a maatau akomanga whaipainga urupare .

.col-xs-6 .col-sm-3
Whakarahihia to tauranga tirohanga, tirohia ranei i runga i to waea hei tauira.

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

I tua atu i te whakakore i nga pou i nga waahi pakaru urupare, ka hiahia pea koe ki te tautuhi i nga waahanga, te pana, te kumea ranei . Tirohia tenei mahi i roto i te tauira matiti .

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

Tangohia nga awaawa

Tangohia nga awaawa mai i te rarangi me nga pou kei te taha o te .row-no-guttersakomanga.

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

Whangai nga pou

Nukuhia nga pou ki te taha matau ma te whakamahi i .col-md-offset-*nga karaehe. Ka whakanuia e enei karaehe te tawhē mauī o te tīwae mā ngā *tīwae. Hei tauira, .col-md-offset-4neke .col-md-4atu i nga pou e wha.

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

Ka taea hoki e koe te whakakore i nga taapiri mai i nga taumata matiti iti me .col-*-offset-0nga karaehe.

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

Nga pou kohanga

Hei whakakohanga i to ihirangi ki te matiti taunoa, taapirihia he huinga pou hou .rowme te huinga o .col-sm-*nga pou ki roto i te tīwae tīariari .col-sm-*. Ko nga rarangi kohanga me whakauru he huinga pou ka taapiri ake ki te 12, iti ake ranei (kaore e hiahiatia kia whakamahi koe i nga pou 12 e waatea ana).

Taumata 1: .col-sm-9

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

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

Whakaraupapa tīwae

Huri ngawari te raupapa o a maatau pou matiti i roto .col-md-push-*me .col-md-pull-*nga karaehe whakarereke.

.col-md-9 .col-md-pana-3

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

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

He iti ake nga ranunga me nga taurangi

I tua atu i nga karaehe matiti kua oti te hanga mo nga whakatakotoranga tere, kei roto i te Bootstrap he iti ake nga taurangi me nga whakaurunga mo te whakaputa tere i o ake whakatakotoranga ngawari me te reo.

Taurangi

Ka whakatauhia e nga taurangi te maha o nga pou, te whanui o te awaawa, me te waahi patai pāpāho hei timata i nga pou maanu. Ka whakamahia e matou enei ki te whakaputa i nga karaehe matiti kua tautuhia i runga ake nei, tae atu ki nga ranunga ritenga kua whakarārangihia i raro nei.

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

Whakaranu

Ka whakamahia nga Mixins i te taha o nga taurangi matiti hei whakaputa i te CSS tohu mo nga pou matiti takitahi.

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

Te whakamahi tauira

Ka taea e koe te whakarereke i nga taurangi ki o ake uara ritenga, ka whakamahi noa ranei i nga ranunga me o raatau uara taunoa. Anei he tauira mo te whakamahi i nga tautuhinga taunoa ki te hanga tahora pou-rua me te mokowhiti i waenga.

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

Nga Upoko

Ko nga pane HTML katoa, <h1>ma te <h6>, e waatea ana. .h1kei .h6te waatea ano nga karaehe, ina hiahia koe ki te whakarite i te momo momotuhi o te pane engari kei te pirangi tonu koe kia whakaatuhia to tuhinga.

h1. Upoko Bootstrap	36px iti
h2. Upoko Bootstrap	30px te roa
h3. Upoko Bootstrap	24px whiti
h4. Upoko Bootstrap	18px iti
h5. Upoko Bootstrap	14px iti
h6. Upoko Bootstrap	12px iti

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

Waihangahia he kupu mama, he kupu tuarua ki tetahi pane me te <small>tohu tohu, te .smallkaraehe ranei.

h1. Pane Bootstrap Kuputuhi tuarua

h2. Pane Bootstrap Kuputuhi tuarua

h3. Pane Bootstrap Kuputuhi tuarua

h4. Pane Bootstrap Kuputuhi tuarua

h5. Pane Bootstrap Kuputuhi tuarua

h6. Pane Bootstrap Kuputuhi tuarua

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

Te kape tinana

Ko te taunoa o te ao katoa a Bootstrap font-sizehe 14px , me line-heightte 1.428 . Ka whakamahia tenei ki te <body>me nga kowae katoa. I tua atu, ka <p>whiwhi (kowae) te tawhwh o raro o te haurua o te teitei o te raina-rorohiko (10px te taunoa).

Ko te ahua o te ahua o te ahua o te ahua o te whakapaipai. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

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

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

<p>...</p>

Te kape tinana arahi

Whakanuia tetahi kowae ma te taapiri .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, he kore noa.

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

Hanga me te Iti

Ko te tauine patopato e ahu mai ana i nga taurangi iti e rua i roto i nga taurangi.less : @font-size-baseme @line-height-base. Ko te tuatahi ko te rahi o te momotuhi i whakamahia puta noa, ko te tuarua ko te teitei o te raina turanga. Ka whakamahia e matou aua taurangi me etahi pangarau ngawari ki te hanga i nga tawhē, papa, me te teitei raina o o maatau momo katoa me etahi atu. Whakaritea, ka urutau a Bootstrap.

Huānga kuputuhi rōraina

Kuputuhi kua tohua

Mo te whakaatu i te rere o te tuhinga na te mea e tika ana ki tetahi atu horopaki, whakamahia te <mark>tohu.

Ka taea e koe te whakamahi i te tohu tohu kimiramirakuputuhi.

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

Kuputuhi kua mukua

Mo te tohu poraka o te kuputuhi kua mukua whakamahia te <del>tohu.

~~Ko te tikanga o tenei rarangi kuputuhi ka kiia he tuhinga kua mukua.~~

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

Kupu piro

Mo te tohu i nga poraka o nga tuhinga kua kore e whai kiko, whakamahia te <s>tohu.

~~Ko te tikanga o tenei rarangi kuputuhi ka kiia kua kore e tika.~~

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

Kuputuhi whakauru

Mo te tohu taapiri ki te tuhinga whakamahia te <ins>tohu.

Ko te tikanga o tenei rarangi tuhinga hei taapiri ki te tuhinga.

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

Kuputuhi tararo

Hei tāraro i te kuputuhi whakamahia te <u>tūtohu.

Ko tenei rarangi o te kuputuhi ka huri hei tararo

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

Whakamahia nga tohu tohu taunoa a HTML me nga momo ngawari.

Kuputuhi iti

Mo te whakakore i te rarangi-roto, poraka ranei o te kuputuhi, whakamahia te <small>tohu hei tautuhi i te kuputuhi ki te 85% te rahi o te matua. Ka whiwhi nga huānga pane i a raatau ake font-sizemo nga huānga kohanga <small>.

Ka taea e koe te whakamahi i tetahi huānga rōraina .smallhei whakakapi i tetahi <small>.

Ko te tikanga o tenei rarangi o te kuputuhi kia rite ki te tuhi pai.

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

Maia

Mo te whakakoi i tetahi snippet o te kuputuhi me te taumaha momotuhi-taimaha.

Ko te mahanga kuputuhi e whai ake nei ka huri hei kuputuhi maia .

<strong>rendered as bold text</strong>

Titaha

Mo te whakanui i tetahi kohanga o te tuhinga me te titaha.

Ko te snippet o te kuputuhi e whai ake nei ka huri hei tuhinga whakatītaha .

<em>rendered as italicized text</em>

Huānga kē

Kia pai ki te whakamahi <b>me <i>te HTML5. <b>Ko te tikanga ki te whakanui i nga kupu, kinga kianga ranei me te kore e kawe i te hiranga atu i <i>te nuinga o te waa mo te reo, kupu hangarau, aha atu.

Nga karaehe whakatikatika

He ngawari ki te whakatika i nga tuhinga ki nga waahanga me nga karaehe whakatika kuputuhi.

Kuputuhi tiaaro maui.

Kuputuhi tirohia ki waenganui.

Kupu tiaro matau.

Kuputuhi tika.

Kore kupu takai.

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

Nga karaehe huringa

Hurihia te kuputuhi ki roto i nga waahanga me nga karaehe whakapaipai kupu.

Kuputuhi iti.

Kuputuhi pūmatua.

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

Whakapoto

Whakamahinga whakaahua o te huānga HTML <abbr>mo nga whakapoto me nga acronyms hei whakaatu i te putanga whakawhanui ki te whakaparo. Ko nga whakapototanga whai titlehuanga he taitapa iraiti o raro me te pehu awhina i runga i te whakaparo, e whakarato ana i etahi atu horopaki mo te whakaparo me nga kaiwhakamahi hangarau awhina.

Whakapoto taketake

He whakapototanga o te kupu huanga ko attr .

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

Te timatanga

Tāpirihia .initialismki tētahi whakarāpopototanga mō te momotuhi iti ake.

Ko te HTML te mea pai mai i te taro tapatapahi.

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

Wāhitau

Whakaatuhia nga korero whakapā mo te tipuna tata, mo te katoa o te mahi. Tiakina te whakahōputu mā te whakamutu i ngā rārangi katoa ki te <br>.

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

Ingoa Katoa
[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>

Poraka korero

Mo te whakahua i nga poraka ihirangi mai i tetahi atu puna i roto i to tuhinga.

Kīanga poraka taunoa

Takaia <blockquote>tetahi HTML hei korero. Mo nga korero tika, ka tūtohu matou he <p>.

Kei te noho tonu koe, ka whakatauhia e koe. Integer posuere erat a ante.

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

Kōwhiringa Poraka

He rereke te ahua me te ihirangi mo nga rereketanga ngawari i runga i te paerewa <blockquote>.

Te whakaingoa i tetahi puna

Tāpirihia he <footer>mo te tautuhi i te puna. Takaia te ingoa o te puna mahi ki <cite>.

Kei te noho tonu koe, ka whakatauhia e koe. Integer posuere erat a ante.

He tangata rongonui i te Taitara Puna

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

Whakaaturanga rereke

Taapirihia .blockquote-reversemo te kupu poraka me nga ihirangi tiro-matau.

Kei te noho tonu koe, ka whakatauhia e koe. Integer posuere erat a ante.

He tangata rongonui i te Taitara Puna

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

Nga rarangi

Kore ota

He rarangi o nga mea kaore e tino whai tikanga te ota.

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

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

Kua whakahaua

He rarangi o nga mea e tino whai kiko ana te ota.

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

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

Kore-ahua

Tango i te tawhē taunoa list-styleme te taha maui ki te rārangi tūemi (tamariki tonu anake). E pa ana tenei ki nga mea e whakarārangihia ana e nga tamariki tonu , ko te tikanga me taapiri koe i te akomanga mo nga rarangi kohanga.

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

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

Raina

Whakanohoia nga mea rarangi katoa ki runga i te raina kotahi display: inline-block;me etahi kapi marama.

Lorem ipsum
Phasellus iaculis
Nulla volutpat

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

Whakaahuatanga

He rarangi kupu me o raatau whakaahuatanga e pa ana.

Nga rarangi whakaahuatanga: Ko te rarangi whakaahuatanga he tino pai mo te tautuhi kupu.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.; Donec id elit non mi porta gravida and eget metus.
Malesuada porta: Etiam porta sem malesuada magna mollis euismod.

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

Whakaahuatanga whakapae

Whakaritehia nga kupu me nga whakaahuatanga ki te <dl>rarangi taha-taha. Ka timata ki te tapae penei i te taunoa <dl>s, engari ka nui haere te pae whakaterenga, me mahi enei.

Nga rarangi whakaahuatanga: Ko te rarangi whakaahuatanga he tino pai mo te tautuhi kupu.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.; Donec id elit non mi porta gravida and eget metus.
Malesuada porta: Etiam porta sem malesuada magna mollis euismod.
Felis euismod semper eget lacinia: Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

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

Te tapahi-aunoa

Ka tapahia e nga rarangi whakaahuatanga whakapae nga kupu he roa rawa kia uru ki te pou maui me te text-overflow. I roto i nga tauranga whaiti, ka huri ki te tahora tapae taunoa.

Raina

Takaia nga mahanga rarangi-roto o te waehere ki te <code>.

Hei tauira, <section>me takai hei rarangi.

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

Whakauru kaiwhakamahi

Whakamahia te <kbd>hei tohu i te whakaurunga ka whakauruhia ma te papapātuhi.

Hei huri i nga whaiaronga, patohia cdme te ingoa o te whaiaronga.
Hei whakatika i nga tautuhinga, pehia 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>

Poraka taketake

Whakamahia <pre>mo nga rarangi maha o te waehere. Me mawhiti i nga koki taiapa i roto i te waehere mo te whakaputa tika.

<p>Tauira kupu ki konei...</p>

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

Ka taea e koe te taapiri i te .pre-scrollablekaraehe, ka whakatauhia te teitei-nui o te 350px me te whakarato i te pae panuku tuaka-y.

Taurangi

Mo te tohu taurangi whakamahia te <var>tohu.

y = m x + b

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

Putanga tauira

Mo te tohu poraka tauira putanga mai i tetahi papatono whakamahia te <samp>tohu.

Ko te tikanga o tenei tuhinga ka kiia hei tauira putanga mai i te kaupapa rorohiko.

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

Tauira taketake

Mo te whakaahua taketake—te papaa marama me nga wehewehe whakapae anake—taapirihia te karaehe turanga .tableki tetahi <table>. Ko te ahua he nui rawa atu, engari na te kaha o te whakamahi ripanga mo etahi atu monomai penei i nga maramataka me nga kaikokoti ra, kua whiriwhiria e matou ki te wehe i a maatau momo ripanga ritenga.

Tapanga ripanga kōwhiringa.
#	Ingoa Tuatahi	Ingoa Whakamutunga	Ingoa Kaiwhakamahi
1	Mark	Otto	@mdo
2	ko Hakopa	Toronton	@ngako
3	Larry	te Manu	@twitter

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

Nga rarangi tarekare

Whakamahia .table-stripedki te taapiri i te zebra-striping ki tetahi rarangi ripanga i roto i te <tbody>.

Hototahitanga whakawhiti-tirotiro

Ko nga ripanga purepure ka whakaahua ma te :nth-childkaiwhiriwhiri CSS, kaore i te waatea i te Internet Explorer 8.

#	Ingoa Tuatahi	Ingoa Whakamutunga	Ingoa Kaiwhakamahi
1	Mark	Otto	@mdo
2	ko Hakopa	Toronton	@ngako
3	Larry	te Manu	@twitter

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

Tepu taitapa

Tāpirihia .table-borderedhe taitapa ki ngā taha katoa o te ripanga me ngā pūtau.

#	Ingoa Tuatahi	Ingoa Whakamutunga	Ingoa Kaiwhakamahi
1	Mark	Otto	@mdo
2	ko Hakopa	Toronton	@ngako
3	Larry	te Manu	@twitter

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

Whakaparo rarangi

Tāpirihia .table-hoverkia taea ai te ahua whakaparo ki nga rarangi ripanga i roto i te <tbody>.

#	Ingoa Tuatahi	Ingoa Whakamutunga	Ingoa Kaiwhakamahi
1	Mark	Otto	@mdo
2	ko Hakopa	Toronton	@ngako
3	Larry	te Manu	@twitter

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

Tepu whakapoapoa

Taapirihia .table-condensedkia pai ake ai nga teepu ma te tapahi i nga papaa pūtau kia haurua.

#	Ingoa Tuatahi	Ingoa Whakamutunga	Ingoa Kaiwhakamahi
1	Mark	Otto	@mdo
2	ko Hakopa	Toronton	@ngako
3	Larry te Manu		@twitter

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

Nga karaehe horopaki

Whakamahia nga karaehe horopaki ki te kara i nga rarangi ripanga me nga pūtau takitahi.

Karaehe	Whakaahuatanga
`.active`	Ka hoatu te tae whakaparo ki tetahi rarangi, pūtau ranei
`.success`	Ka tohu i te mahi angitu, pai ranei
`.info`	E tohu ana i te huringa korero, mahi ranei
`.warning`	Ka tohu i tetahi whakatupato me aro
`.danger`	Ka tohu i tetahi mahi kino, kino ranei

#	Upoko tīwae	Upoko tīwae	Upoko tīwae
1	ihirangi tīwae	ihirangi tīwae	ihirangi tīwae
2	ihirangi tīwae	ihirangi tīwae	ihirangi tīwae
3	ihirangi tīwae	ihirangi tīwae	ihirangi tīwae
4	ihirangi tīwae	ihirangi tīwae	ihirangi tīwae
5	ihirangi tīwae	ihirangi tīwae	ihirangi tīwae
6	ihirangi tīwae	ihirangi tīwae	ihirangi tīwae
7	ihirangi tīwae	ihirangi tīwae	ihirangi tīwae
8	ihirangi tīwae	ihirangi tīwae	ihirangi tīwae
9	ihirangi tīwae	ihirangi tīwae	ihirangi tīwae

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

Te kawe i te tikanga ki nga hangarau awhina

Ma te whakamahi i te tae ki te taapiri i te tikanga ki te rarangi ripanga, ki te pūtau takitahi ranei, he tohu ataata anake, kaore e tukuna ki nga kaiwhakamahi o nga hangarau awhina - penei i nga kaipanui mata. Me mohio kei te kitea nga korero e tohuhia ana e te tae mai i te ihirangi ake (te tuhinga ka kitea i roto i te rarangi ripanga/putau e tika ana), ka whakaurua ranei ma etahi atu huarahi, penei i etahi atu tuhinga huna ki te .sr-onlyakomanga.

Tepu whakautu

Waihangahia nga ripanga urupare ma te takai i tetahi .tableki roto .table-responsivekia panuku whakapae ki runga i nga taputapu iti (i raro iho i te 768px). Ina tiro ki tetahi mea nui ake i te 768px te whanui, kare koe e kite i tetahi rereketanga o enei ripanga.

Tope poutū/tapahi

Ka whakamahia e nga ripanga urupare te overflow-y: hidden, ka tope i nga ihirangi kei tua atu i nga tapa o raro, o runga ranei o te ripanga. Ina koa, ka taea e tenei te tango i nga tahua takaiho me etahi atu widget-tuatoru.

Firefox me nga huinga mara

Kei a Firefox etahi taahua tuutuu mara tukeke widthe raru ana te ripanga urupare. Kaore e taea te whakakore i tenei me te kore he hack motuhake mo Firefox kaore e tukuna e matou ki Bootstrap:

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

Mo etahi atu korero, panuihia tenei whakautu Stack Overflow .

#	Ripanga pane	Ripanga pane	Ripanga pane	Ripanga pane	Ripanga pane	Ripanga pane
1	Pūtau ripanga	Pūtau ripanga	Pūtau ripanga	Pūtau ripanga	Pūtau ripanga	Pūtau ripanga
2	Pūtau ripanga	Pūtau ripanga	Pūtau ripanga	Pūtau ripanga	Pūtau ripanga	Pūtau ripanga
3	Pūtau ripanga	Pūtau ripanga	Pūtau ripanga	Pūtau ripanga	Pūtau ripanga	Pūtau ripanga

#	Ripanga pane	Ripanga pane	Ripanga pane	Ripanga pane	Ripanga pane	Ripanga pane
1	Pūtau ripanga	Pūtau ripanga	Pūtau ripanga	Pūtau ripanga	Pūtau ripanga	Pūtau ripanga
2	Pūtau ripanga	Pūtau ripanga	Pūtau ripanga	Pūtau ripanga	Pūtau ripanga	Pūtau ripanga
3	Pūtau ripanga	Pūtau ripanga	Pūtau ripanga	Pūtau ripanga	Pūtau ripanga	Pūtau ripanga

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

Tauira taketake

Ka whiwhi aunoa nga mana puka takitahi i etahi ahua o te ao. Katoa nga tuhinga <input>, <textarea>, me <select>nga huānga me .form-controlte mea kua tautuhia ki width: 100%;te taunoa. Takaia nga tapanga me nga mana whakahaere .form-groupmo te mokowhiti tino pai.

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

Kaua e hanumi nga roopu roopu me nga roopu whakauru

Kaua e hanumi tika nga roopu ki nga roopu whakauru . Engari, kohanga te roopu whakauru ki roto o te roopu puka.

Puka Raina

Taapirihia .form-inlineki to puka (kaore he a <form>) mo nga mana whaka-maui me te paraka-raina. Ka pa ana tenei ki nga puka i roto i nga tauranga tirohanga 768px te whanui.

Ka hiahia pea nga whanui ritenga

Ko nga whakaurunga me nga kowhiringa kua width: 100%;tono taunoa ki Bootstrap. I roto i nga puka-raina, ka tautuhia e matou kia width: auto;noho ai nga mana maha ki te raina kotahi. I runga i to tahora, ka hiahiatia etahi atu whanui ritenga.

Tāpiri tapanga i nga wa katoa

Ka raru nga kaipanui mata ki o puka mena kaore koe e whakauru i tetahi tapanga mo ia whakaurunga. Mo enei puka-roto, ka taea e koe te huna i nga tapanga ma te whakamahi i te .sr-onlyakomanga. He huarahi ke atu ano mo te whakarato tapanga mo nga hangarau awhina, penei i te aria-label, huanga aria-labelledbyranei . titleMena karekau tetahi o enei, ka huri pea nga kaipanui mata ki te whakamahi i te placeholderhuanga, mena kei reira, engari me mahara ko te whakamahi placeholderhei whakakapi mo etahi atu tikanga tapanga kaore i te tohutohuhia.

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

Puka whakapae

Whakamahia nga karaehe matiti kua tautuhia-mua a Bootstrap ki te whakahāngai i nga tapanga me nga roopu mana o te puka ki te tahora whakapae ma te taapiri .form-horizontalki te puka (kaore he <form>). Ma te mahi pera ka huri .form-groups ki te noho hei rarangi matiti, no reira kaore he take mo .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>

Mana tautoko

He tauira o nga mana puka paerewa e tautokohia ana i roto i te tauira tahora puka.

Nga whakaurunga

Ko te nuinga o te whakahaere puka, nga mara whakauru-a-tuhi. He tautoko mo nga momo HTML5 katoa: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, me color.

Momo whakapuakanga e hiahiatia ana

Ka whakaingoatia katoatia nga whakauru mena typeka tika te whakaatu.

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

Rōpū whakauru

Hei taapiri i nga kupu whakauru, i nga paatene ranei i mua, i muri ranei i muri i tetahi tuhinga-tuhi <input>, tirohia te waahanga roopu whakauru .

Textarea

Mana puka e tautoko ana i nga rarangi kuputuhi maha. Hurihia rowste huanga ina tika.

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

Pouakataki me nga reo irirangi

Ko nga pouakataki mo te kowhiri i tetahi, maha ranei nga whiringa i roto i te rarangi, ko nga reo irirangi hei kowhiri i tetahi waahanga mai i te maha.

Kei te tautokohia nga pouakataki me nga reo irirangi kua haua, engari ki te whakarato i te pehu "kaore e whakaaetia" i runga i te whakaparo o te matua <label>, me tapiri e koe te .disabledkaraehe ki te matua .radio, .radio-inline, .checkbox, ranei.checkbox-inline .

Taunoa (tāpae)

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

Nga pouakataki raina me nga reo irirangi

Whakamahia nga karaehe .checkbox-inlineranei .radio-inlinei runga i nga raupapa pouakataki, irirangi ranei mo nga mana ka puta ki te raina kotahi.

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

Pouakataki me nga reo irirangi kaore he kupu tapanga

Mena karekau he kupu i roto i te <label>, ka tuuhia te urunga kia rite ki to hiahia. I tenei wa ka mahi noa i runga i nga pouakataki kore-roto me nga reo irirangi. Kia mahara ki te whakarato tonu i etahi momo tapanga mo nga hangarau awhina (hei tauira, te whakamahi 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>

Ka whiriwhiri

Kia mahara he maha nga tahua kowhiringa Maori—ara i Safari me Chrome—he kokonga porotaka kaore e taea te whakarereke ma border-radiusnga rawa.

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

Mo <select>nga mana whai multiplehuanga, he maha nga whiringa ka whakaatuhia ma te taunoa.

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

Mana pateko

Ina hiahia koe ki te whakatakoto i nga kupu tuhi ki te taha o te tapanga puka i roto i te puka, whakamahia te .form-control-staticakomanga ki runga i te <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>

Arotahi āhua

Ka tangohia e matou nga ahua taunoa outlinei runga i etahi mana ahua ka hoatu he box-shadowhei whakakapi mo :focus.

`:focus`State demo

Ko te tauira whakaurunga i runga ake nei ka whakamahi i nga momo ritenga i roto i a maatau tuhinga hei whakaatu i te :focusahua ki runga i te .form-control.

Te ahua haua

Tāpirihia te disabledhuanga boolean i runga i te whakaurunga hei aukati i nga taunekeneke a te kaiwhakamahi. Ka marama ake nga whakaurunga haua me te taapiri i te not-allowedpehu.

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

Kua monoa nga huinga mara

Tāpirihia te disabledhuanga ki a <fieldset>hei mono i nga mana katoa i roto i te <fieldset>wa kotahi.

He whakatupato mo te mahi hono o`<a>`

Ma te taunoa, ka whakatauhia e nga kaitirotiro nga mana ahua taketake katoa ( <input>, <select>me <button>nga huānga) i roto i te he <fieldset disabled>kua monokia, ka aukati i nga taunekeneke papapātuhi me te kiore ki runga. Heoi, mena kei roto ano i to ahua nga <a ... class="btn btn-*">huānga, ka hoatu he momo pointer-events: none. Ka rite ki te korero i te waahanga mo te ahua haua mo nga paatene (me te waahanga iti mo nga huānga punga), kaore ano kia paerewatia tenei taonga CSS, kaore ano kia tino tautokona i roto i te Opera 18 me raro iho, i te Internet Explorer 11 ranei, ka toa. 'kaore e taea e nga kaiwhakamahi papapātuhi te arotahi, te whakahohe ranei i enei hononga. Na kia noho haumaru, whakamahia JavaScript ritenga ki te whakakore i aua hononga.

Hototahitanga whakawhiti-tirotiro

Ahakoa ka hoatu e Bootstrap enei momo ki nga kaitirotiro katoa, kaore a Internet Explorer 11 me raro iho e tautoko i te disabledhuanga i runga i te <fieldset>. Whakamahia te JavaScript ritenga hei whakakore i te huinga mara i roto i enei kaitirotiro.

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

Panui anake te ahua

Tāpirihia te readonlyhuanga boolean ki runga i te whakaurunga hei aukati i te whakarereketanga o te uara o te whakauru. Ko nga whakauru panui-anake ka ngawari ake (penei i nga whakaurunga haua), engari ka mau tonu te pehu paerewa.

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

Kupu awhina

Paraka taumata kupu awhina mo nga mana puka.

Te hono kupu awhina me nga mana puka

Ko te kupu awhina me tino hono ki te mana puka e pa ana ki te whakamahi i te aria-describedbyhuanga. Ma tenei ka whakarite ko nga hangarau awhina - penei i nga kaipanui mata - ka panui i tenei tuhinga awhina ina arotahi te kaiwhakamahi, ka uru ranei ki te mana whakahaere.

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

Ko nga korero whakamana

Kei roto i te Bootstrap nga momo whakamana mo te hapa, te whakatupato, me nga ahuatanga angitu i runga i nga mana puka. Hei whakamahi, taapiri .has-warning, .has-error, .has-successki te huānga matua ranei. Ko nga .control-label, .form-control, me .help-blockroto i taua huānga ka whiwhi i nga momo whakamana.

Te kawe i te mana whakamana ki nga hangarau awhina me nga kaiwhakamahi matapo

Ma te whakamahi i enei momo whakamana hei tohu i te ahua o te mana o te puka, ka hoatu he tohu whakaata, he tohu-tae noa, e kore e tukuna ki nga kaiwhakamahi hangarau awhina - penei i nga kaipanui mata - ki nga kaiwhakamahi matapo.

Me whakarite ka tukuna ano he tohu tohu mo te kawanatanga. Hei tauira, ka taea e koe te whakauru i tetahi tohu mo te ahua ki roto i te tuhinga o te mana puka <label>ake (penei i te tauira o te waehere e whai ake nei), whakauruhia he Glyphicon (me nga tuhinga rereke e tika ana ma te whakamahi i te .sr-onlykaraehe - tirohia nga tauira Glyphicon ), ma te whakarato ranei i te poraka kuputuhi awhina taapiri . Mo nga hangarau awhina, ka taea hoki te whakatau i nga mana puka muhu he aria-invalid="true"huanga.

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

Me nga tohu taapiri

Ka taea hoki te taapiri i nga tohu urupare me te taapiri o.has-feedback te ata tika.

Ka mahi noa nga tohu urupare me nga <input class="form-control">huānga kuputuhi.

Ata, tapanga, me nga roopu whakauru

Ko te tuunga a-ringa o nga tohu urupare e hiahiatia ana mo nga whakaurunga kaore he tapanga me nga roopu whakauru he taapiri kei te taha matau. E tino akiakihia ana koe ki te whakarato tapanga mo nga whakaurunga katoa mo nga take whai waahi. Mena kei te pirangi koe ki te aukati i nga tapanga kia kaua e whakaatuhia, hunahia ki te .sr-onlyakomanga. Mena me mahi kaore he tapanga, whakatikahia te topuara o te tohu urupare. Mo nga roopu whakauru, whakatikahia te rightuara ki te uara pika tika i runga i te whanui o to taapiri.

Te kawe i te tikanga o te tohu ki nga hangarau awhina

Kia tika ai te kawe o nga hangarau awhina - penei i nga kaipanui mata - te tikanga o te tohu, me whakauru etahi atu tuhinga huna ki te .sr-onlykaraehe me te hono atu ki te mana puka e pa ana ki te whakamahi aria-describedby. Hei tauira, me whakarite ko te tikanga (hei tauira, ko te mea he whakatupato mo tetahi mara whakauru kupu) ka tukuna ki etahi atu ahua, penei i te whakarereke i te tuhinga o te mea <label>e hono ana ki te mana puka.

Ahakoa kua whakahuahia e nga tauira e whai ake nei te ahua whakamana o o raatau mana whakahaere i roto i te <label>tuhinga ake, ko te tikanga o runga ake nei (ma te whakamahi i te .sr-onlytuhinga me te aria-describedby) kua whakaurua hei kaupapa whakaata.

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

Ko nga ata whiriwhiri i roto i nga ahua whakapae me te raarangi

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

`.sr-only`Ko nga tohu taapiri me nga tapanga huna

Mena ka whakamahi koe i te .sr-onlykaraehe ki te huna i nga mana o te puka <label>(kaore i te whakamahi i etahi atu whiringa tapanga, penei i te aria-labelhuanga), ka whakatika aunoa a Bootstrap i te tuunga o te ata ina kua taapirihia.

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

Whakahaere rahinga

Tautuhia nga teitei ma te whakamahi i nga karaehe penei .input-lg, me te tautuhi whanui ma te whakamahi i nga karaehe rarangi matiti penei .col-lg-*.

Te rahi o te teitei

Waihangahia nga mana puka teitei ake, poto ake ranei e rite ana ki nga rahi o te paatene.

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

Te rahi o nga roopu ahua whakapae

Kia tere te rahi o nga tapanga me te hanga i nga mana o roto .form-horizontalma te taapiri .form-group-lg, .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>

Rahinga tīwae

Tākaitia ngā tāuru ki ngā tīwae mātiti, ki tētahi huānga matua ritenga rānei, kia ngāwari ai te whakaū i ngā whānui e hiahiatia ana.

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

Nga tohu paatene

Whakamahia nga karaehe paatene ki te <a>, <button>, <input>huānga ranei.

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

Te whakamahinga horopaki-motuhake

Ahakoa ka taea te whakamahi i nga karaehe patene <a>me <button>nga huānga, ko <button>nga huānga anake e tautokohia ana i roto i o maatau waahanga nav me te navbar.

Ko nga hononga hei patene

Mēnā <a>ka whakamahia ngā huānga hei patene – hei whakaoho i te mahi i roto i te wharangi, kaua ki te whakatere ki tetahi atu tuhinga, waahanga ranei i roto i te wharangi o naianei – me hoatu ano he role="button".

Whakawhiti tirotiro tirotiro

Hei mahi pai rawa atu, ka tino taunaki matou ki te whakamahi i te <button>huānga i nga wa katoa ka taea ki te whakarite kia rite te whakaputanga whakawhiti tirotiro.

I roto i etahi atu mea, he pepeke kei Firefox <30 e aukati ana i a maatau ki te whakatakoto i nga paatene line-heighto <input>-e hangai ana, ka kore e rite ki te teitei o etahi atu paatene i runga i a Firefox.

Kōwhiringa

Whakamahia tetahi o nga karaehe paatene e waatea ana ki te hanga tere i te paatene kua tohua.

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

Te kawe i te tikanga ki nga hangarau awhina

Ko te whakamahi i te tae ki te taapiri i te tikanga ki te paatene he tohu tirohanga noa iho, e kore e tukuna ki nga kaiwhakamahi o nga hangarau awhina - penei i nga panui mata. Me mohio kei te kitea nga korero e tohuhia ana e te tae mai i te ihirangi ake (te tuhinga ka kitea o te paatene), ka whakauruhia ranei ma etahi atu huarahi, penei i etahi atu tuhinga huna ki te .sr-onlyakomanga.

Rahi

Kei te pirangi koe ki nga paatene nui, iti ake ranei? Tāpirihia .btn-lg, .btn-sm, .btn-xsmo etahi atu rahinga ranei.

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

Waihangahia nga patene taumata paraka—ko era e whanui ana i te whanui o te matua—ma te taapiri .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>

Te ahua kaha

Ka puta nga paatene ka pehia (he pouri ake te papamuri, he taitapa pouri ake, me te atarangi whakauru) ina hohe. Mo <button>nga huānga, ka mahia tenei ma te :active. Mo <a>nga huānga, kua oti ki te .active. Heoi, ka taea e koe te whakamahi .activei runga i <button>te s (me te whakauru i te aria-pressed="true"huanga) mena ka hiahia koe ki te whakahoki i te ahua hohe ma te hotaka.

Huānga Pātene

Kaore he take ki te taapiri :activei te mea he karaehe pseudo, engari ki te hiahia koe ki te akiaki i te ahua ano, haere ki mua me te taapiri .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>

Huānga punga

Tāpirihia te .activeakomanga ki ngā <a>pātene.

Hononga tuatahi Hononga

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

Te ahua haua

Hangaia nga paatene kia kore e taea te panui ma te memeha ki muri me te opacity.

Huānga Pātene

Tāpirihia te disabledhuanga ki ngā <button>pātene.

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

Hototahitanga whakawhiti-tirotiro

Mena ka taapirihia e koe te disabledhuanga ki te <button>, ka whakahinahia e te Internet Explorer 9 me raro iho te kuputuhi me te atarangi kupu kino e kore e taea e matou te whakatika.

Huānga punga

Tāpirihia te .disabledakomanga ki ngā <a>pātene.

Hononga tuatahi Hononga

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

Ka whakamahia e matou .disabledhei karaehe whaipainga i konei, he rite ki te .activekaraehe noa, no reira karekau he prefix e hiahiatia ana.

hono hono taumahinga whakatupato

Ka whakamahia e tenei karaehe pointer-events: noneki te ngana ki te whakakore i te taumahinga hono o <a>s, engari ko taua taonga CSS kaore ano kia paerewa, kaore ano kia tino tautokohia i Opera 18 me raro iho, i te Internet Explorer 11 ranei pointer-events: none. kare tonu te whakaterenga e pa ana, ko te tikanga ka taea tonu e nga kaiwhakamahi papapātuhi me nga kaiwhakamahi hangarau awhina te whakahohe i enei hononga. Na kia noho haumaru, whakamahia JavaScript ritenga ki te whakakore i aua hononga.

Ko nga whakaahua whakautu

Ko nga whakaahua i roto i te Bootstrap 3 ka taea te whakautu-hoa ma te taapiri o te .img-responsiveakomanga. E pa ana tenei max-width: 100%;, height: auto;me display: block;te ahua kia pai te pauna ki te huānga matua.

Hei whakakotahi i nga whakaahua e whakamahi ana i te .img-responsivekaraehe, whakamahia .center-blockhei utu mo te .text-center. Tirohia te wahanga o nga karaehe kaiawhina mo etahi atu korero mo te .center-blockwhakamahinga.

Whakaahua SVG me IE 8-10

I roto i te Internet Explorer 8-10, ko nga whakaahua SVG me nga whakaahua .img-responsivehe rereke te rahi. Hei whakatika i tenei, taapiri width: 100% \9;i nga waahi e tika ana. Kare a Bootstrap e whakamahi aunoa i tenei na te mea ka raru etahi atu ahua ahua.

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

Nga ahua whakaahua

Taapirihia nga karaehe ki tetahi <img>huānga kia ngawari te hanga whakaahua ki tetahi kaupapa.

Hototahitanga whakawhiti-tirotiro

Kia maumahara kaore he tautoko a Internet Explorer 8 mo nga kokonga porotaka.

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

Nga tae horopaki

Whakaatuhia te tikanga ma te tae me te iti o nga karaehe whaipainga. Ka pa ano enei ki nga hononga ka pouri i runga i te whakaparo pera i a maatau momo hononga taunoa.

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

Ko te ingoa o nga mea katoa ka taea e koe.

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

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

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

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

Te mahi motuhake

I etahi wa kaore e taea te whakamahi i nga karaehe whakahirahira na te mea motuhake o tetahi atu kaiwhiriwhiri. I te nuinga o nga wa, he rawaka te mahi ko te takai i to tuhinga ki roto <span>me te akomanga.

Te kawe i te tikanga ki nga hangarau awhina

Ko te whakamahi i te tae ki te taapiri i te tikanga he tohu tirohanga noa iho, kaore e tukuna ki nga kaiwhakamahi hangarau awhina - penei i nga kaipanui mata. Me whakarite ko nga korero e tohuhia ana e te tae ka kitea mai i te ihirangi ake (ko nga tae horopaki ka whakamahia noa hei whakakaha i te tikanga kua mau ki roto i te tuhinga/tohu), ka whakaurua ranei ma etahi atu tikanga, penei i etahi atu tuhinga huna ki te .sr-onlyakomanga. .

Nga horopaki horopaki

He rite ki nga karaehe tae kuputuhi horopaki, he ngawari ki te tautuhi i te papamuri o tetahi huānga ki tetahi karaehe horopaki. Ka pouri nga waahanga punga i runga i te whakaparo, pera i nga karaehe tuhinga.

Ko te ingoa o nga mea katoa ka taea e koe.

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

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

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

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

Te mahi motuhake

I etahi wa kaore e taea te whakamahi i nga karaehe papamuri na te mea motuhake o tetahi atu kaiwhiriwhiri. I etahi wa, he rawaka te otinga ko te takai i nga ihirangi o to huānga ki roto <div>me te akomanga.

Te kawe i te tikanga ki nga hangarau awhina

Pērā i ngā tae horopaki , āta whakarite ko ngā tikanga katoa e tukuna ana ma te tae ka tukuna ano i roto i te whakatakotoranga ehara i te whakaatu pono.

Katia te ata

Whakamahia te ata kati mo te whakakore i nga ihirangi penei i nga tikanga me nga matohi.

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

Kaitiaki

Whakamahia nga tohu hei tohu i te mahi takaiho me te ahunga. Kia mahara ka huri aunoa te tiaki taunoa ki nga tahua takaake .

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

Ka tere tere

Manu tetahi huānga ki te taha maui, ki te taha matau ranei me tetahi akomanga. !importantkua whakauruhia ki te karo i nga take motuhake. Ka taea hoki te whakamahi i nga karaehe hei ranunga.

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

Pokapū ihirangi poraka

Whakatakotoria he huānga ki display: blockte pokapū mā margin. Kei te waatea hei ranunga me te akomanga.

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

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

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

Whakatikatika

Maamaa ma floatte taapiri .clearfix ki te huānga matua . Ka whakamahi i te micro clearfix i rongonuihia e Nicolas Gallagher. Ka taea hoki te whakamahi hei ranunga.

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

Te whakaatu me te huna i nga ihirangi

Whakahauhia tetahi huānga kia whakaatuhia, huna ranei ( tae atu ki nga kaipanui mata ) me te whakamahi .showme .hiddennga karaehe. Ka whakamahia e enei karaehe !importantki te karo i nga taupatupatu motuhake, penei i nga tere tere . E waatea ana mo te takahuri taumata paraka. Ka taea hoki te whakamahi hei ranunga.

.hidekei te waatea, engari kaore e pa ki nga kaipanui mata i nga wa katoa, ka whakakorehia i te v3.0.1. Whakamahia .hidden, .sr-onlyhei utu ranei.

I tua atu, .invisibleka taea te whakamahi ki te takahuri noa i te tirohanga o tetahi huānga, ko te tikanga displaykaore i whakarereketia ka taea tonu e te huānga te pa ki te rere o te tuhinga.

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

Panui mata me te ihirangi whakatere papapātuhi

Hunahia he huānga ki nga taputapu katoa haunga nga kaipānui mata whai .sr-only. Whakakotahitia .sr-onlyki .sr-only-focusablete whakaatu ano i te huānga i te wa e arotahi ana (hei tauira, na te kaiwhakamahi papapātuhi-anake). E tika ana mo te whai i nga whakaritenga pai rawa atu . Ka taea hoki te whakamahi hei ranunga.

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

Whakakapi whakaahua

Whakamahia te .text-hidekaraehe, te ranunga ranei hei awhina i te whakakapi i te ihirangi kuputuhi o tetahi huānga ki te ahua papamuri.

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

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

Kia tere ake te whakawhanaketanga hoa-rorohiko, whakamahia enei karaehe whaipainga hei whakaatu me te huna i nga ihirangi ma te taputapu ma te patai pāpāho. Kei roto ano ko nga karaehe whaipainga mo te takahuri ihirangi ina taia.

Whakamātauria ki te whakamahi i enei i runga i te kaupapa iti me te karo i te hanga i nga putanga rereke katoa o te waahi kotahi. Engari, whakamahia hei whakakii i nga whakaaturanga o ia taputapu.

Nga karaehe e waatea ana

Whakamahia he huinga kotahi, he huinga ranei o nga karaehe e waatea ana mo te takahuri i nga ihirangi puta noa i nga waahi waahi tirohanga.

	Nga taputapu iti atuWaea (<768px)	Nga taputapu itiPapa (≥768px)	Nga taputapu WaengaPapamahi (≥992px)	Nga taputapu nuiPapamahi (≥1200px)
`.visible-xs-*`	Ka kitea	Hunahuna	Hunahuna	Hunahuna
`.visible-sm-*`	Hunahuna	Ka kitea	Hunahuna	Hunahuna
`.visible-md-*`	Hunahuna	Hunahuna	Ka kitea	Hunahuna
`.visible-lg-*`	Hunahuna	Hunahuna	Hunahuna	Ka kitea
`.hidden-xs`	Hunahuna	Ka kitea	Ka kitea	Ka kitea
`.hidden-sm`	Ka kitea	Hunahuna	Ka kitea	Ka kitea
`.hidden-md`	Ka kitea	Ka kitea	Hunahuna	Ka kitea
`.hidden-lg`	Ka kitea	Ka kitea	Ka kitea	Hunahuna

Mai i te v3.2.0, .visible-*-*e toru nga rereketanga o nga karaehe mo ia waahi wehenga, kotahi mo ia displayuara taonga CSS kua whakarārangihia i raro nei.

Rōpū akomanga	CSS`display`
`.visible-*-block`	`display: block;`
`.visible-*-inline`	`display: inline;`
`.visible-*-inline-block`	`display: inline-block;`

Na, mo nga mata iti ( xs) hei tauira, ko nga .visible-*-*karaehe e waatea ana ko: .visible-xs-block, .visible-xs-inline, me .visible-xs-inline-block.

Ko nga karaehe .visible-xs, .visible-sm, .visible-md, a .visible-lgkei te noho ano, engari kua whakakorehia hei v3.2.0 . He rite tonu ki te .visible-*-block, engari me etahi atu keehi motuhake mo te takahuri <table>i nga huānga e pa ana.

Nga karaehe tuhi

He rite ki nga karaehe whakautu auau, whakamahia enei mo te takahuri i nga ihirangi mo te ta.

Karaehe	Pūtirotiro	Tā
`.visible-print-block` `.visible-print-inline` `.visible-print-inline-block`	Hunahuna	Ka kitea
`.hidden-print`	Ka kitea	Hunahuna

Kei te noho ano te karaehe .visible-printengari kua whakakorehia i te v3.2.0. He rite tonu ki te .visible-print-block, engari me etahi atu keehi motuhake mo <table>nga huānga e pa ana.

Nga keehi whakamatautau

Whakanuia to kaitirotiro, utaina ranei i runga i nga taputapu rereke hei whakamatautau i nga karaehe whaipainga urupare.

Ka kitea ki...

Ko nga tohutaki kakariki e tohu ana ka kitea te huānga ki to tauranga tirohanga o naianei.

He iti ake ✔ Ka kitea i runga i te x-iti

Iti ✔ Ka kitea i runga i te iti

Waenga ✔ Ka kitea i runga i te reo

Nui ✔ Ka kitea i runga i te rahi

He iti me te iti ✔ Ka kitea i runga i te x-iti me te iti

Waenga me te rahi ✔ Ka kitea i runga i te reo me te rahi

He iti me te reo ✔ Ka kitea i runga i te x-iti me te reo

Iti me te rahi ✔ Ka kitea i runga i te iti me te rahi

He iti me te rahi ✔ Ka kitea i runga i te x-iti me te rahi

Iti me te reo ✔ Ka kitea i runga i te iti me te reo

Huna ki runga...

I konei, ka tohu ano nga tohutaki kaariki kei te huna te huānga ki to tauranga tirohanga o naianei.

He iti ake ✔ Huna ki te x-iti

Iti ✔ Huna ki runga iti

Waenga ✔ Huna ki te reo

Nui ✔ Huna ki runga nui

He iti me te iti ✔ Huna ki te x-iti me te iti

Waenga me te rahi ✔ Huna ki te reo me te rahi

He iti me te reo ✔ Huna ki te x-iti me te reo

Iti me te rahi ✔ Huna ki te iti me te rahi

He iti me te rahi ✔ Huna ki te x-iti me te rahi

Iti me te reo ✔ Huna ki te iti me te reo

Ko te CSS a Bootstrap i hangaia i runga i te Iti, he kaitukatuka me etahi atu mahi penei i nga taurangi, whakauru, me nga mahi mo te whakahiato CSS. Ko te hunga e rapu ana ki te whakamahi i te puna He iti ake nga konae hei utu i a maatau konae CSS kua whakahiato ka taea te whakamahi i nga taurangi maha me nga ranunga ka whakamahia e matou puta noa i te angamahi.

Ko nga taurangi matiti me nga whakaranu kei roto i te waahanga punaha Matiti .

Te whakahiato Bootstrap

Ka taea te whakamahi i te Bootstrap i roto i nga huarahi e rua: me te CSS kua whakahiato me te puna He iti ake nga konae. Hei whakahiato i nga konae iti ake, tirohia te wahanga Timata mo te whakarite i to taiao whanaketanga hei whakahaere i nga whakahau e tika ana.

Ka mahi tahi nga taputapu whakahiato tuatoru me Bootstrap, engari kaore i te tautokohia e to taatau roopu matua.

Taurangi

Ka whakamahia nga taurangi puta noa i te kaupapa katoa hei huarahi ki te whakakotahi me te tiri i nga uara e whakamahia nuitia ana penei i te tae, te mokowhiti, te taapu momotuhi ranei. Mo te wehewehenga katoa, tirohia koa te Kaiwhakarite .

Nga Tae

Kia ngawari ki te whakamahi i nga kaupapa tae e rua: te tauine hina me te tohu. Ko nga tae o te kirikiri he tere te uru ki nga atarangi pango e whakamahia nuitia ana, engari kei roto i te reo kupu nga momo tae kua tohua ki nga uara horopaki whai kiko.

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

Whakamahia tetahi o enei taurangi tae i te mea kei a raatau, ka huri ranei ki nga taurangi whai kiko mo to kaupapa.

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

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

Tauira

He maha nga taurangi mo te whakarite tere i nga huānga matua o te anga o to pae.

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

Hononga

Whakapaihia o hononga ki te tae tika me te uara kotahi.

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

Kia mahara ko te @link-hover-colorwhakamahi i tetahi mahi, tetahi atu taputapu whakamataku mai i te Iti, hei hanga aunoa i te tae whakaparo tika. Ka taea e koe te whakamahi darken, lighten, saturate, me desaturate.

Kuputuhi

Whakaritea ngawari to momotuhi, te rahi o te kuputuhi, te kaiarahi, me te maha atu me etahi taurangi tere. Ka whakamahia e Bootstrap enei ki te whakarato i nga whakaurunga tuhi ngawari.

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

Tohu

E rua nga huringa tere mo te whakarite i te waahi me te ingoa konae o au ata.

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

Waehanga

Ko nga waahanga puta noa i te Bootstrap ka whakamahi i etahi taurangi taunoa mo te whakarite uara noa. Anei nga mea e whakamahia nuitia ana.

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

Nga ranunga kaihoko

Ko nga whakaranu a te Kaihoko he ranunga hei awhina i te tautoko i nga kaitirotiro maha ma te whakauru i nga tohu tohu kaihoko katoa i roto i to CSS kua whakahiato.

Pouaka-rahi

Tautuhi ano i te tauira pouaka o ou wae me te whakakotahitanga kotahi. Mo te horopaki, tirohia tenei tuhinga awhina mai i Mozilla .

Kua whakakorehia te ranunga mai i te v3.2.0, me te whakaurunga o Autoprefixer. Hei pupuri i te hototahi whakamuri, ka whakamahi tonu a Bootstrap i te ranunga o roto tae noa ki te Bootstrap v4.

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

Koki porotaka

I tenei ra ka tautoko nga kaitirotiro hou katoa i te taonga kore-prefixed border-radius. No reira, karekau he .border-radius()ranunga, engari kei a Bootstrap nga pokatata mo te huri tere i nga kokonga e rua ki tetahi taha o tetahi mea.

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

Pouaka (Maturuturu) atarangi

Mena kei te whakamahi to hunga whakarongo ki nga kaitirotiro me nga taputapu hou me te tino pai, me whakamahi noa i te box-shadowrawa. Mena kei te hiahia tautoko koe mo nga taputapu Android tawhito (mua-v4) me nga taputapu iOS (mua-iOS 5), whakamahia te mixin kua whakakorehia hei tiki i te -webkitprefix e hiahiatia ana.

Kua whakakorehia te mixin mai i te v3.1.0, na te mea kaore a Bootstrap e tautoko mana i nga papaa tawhito kaore i te tautoko i nga taonga paerewa. Hei pupuri i te hototahi whakamuri, ka whakamahi tonu a Bootstrap i te ranunga o roto tae noa ki te Bootstrap v4.

Kia kaha ki te whakamahi i rgba()nga tae i roto i to atarangi pouaka kia pai te whakakotahi me nga papamuri.

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

Nga whakawhitinga

He maha nga ranunga mo te ngawari. Tautuhia nga korero whakawhiti katoa ki te kotahi, whakapūtāhia he whakaroa me te roanga motuhake ina hiahiatia.

Kua whakakorehia nga ranunga mai i te v3.2.0, me te whakaurunga o Autoprefixer. Hei pupuri i te hototahi whakamuri, ka whakamahi tonu a Bootstrap i nga whakaurunga o roto tae noa ki te 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;
}

Huringa

Hurihia, tauine, whakamaori (nekehia), whiria ranei tetahi mea.

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

Hangarau

He ranunga kotahi mo te whakamahi i nga ahuatanga hākoritanga katoa o CSS3 i roto i te whakapuakanga kotahi me etahi atu ranunga mo nga taonga takitahi.

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

Opacity

Tautuhia te opacity mo nga kaitirotiro katoa me te whakahoki mai filtermo IE8.

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

Kuputuhi waahi

Whakaratohia he horopaki mo nga mana puka i roto i ia mara.

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

Ngā tīwae

Waihangahia nga pou ma te CSS i roto i te huānga kotahi.

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

Rōnaki

Me ngawari te huri i nga tae e rua hei rōnaki papamuri. Kia matatau ake, ka whakatakoto huarahi, whakamahia kia toru nga tae, whakamahia ranei te rōnaki radial. Ma te whakakotahitanga kotahi ka whiwhi koe i nga wetereo prefixed katoa e hiahia ana koe.

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

Ka taea hoki te whakapūtā te koki o te paerewa rua-tae, rōnaki rārangi:

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

Mena kei te hiahia koe i te rōnaki kāhua kākahu makawe, he ngawari hoki. Tauwhāitihia he tae kotahi ka whakakikoruatia e matou he karaehe ma.

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

Whakanuia te ante ka whakamahi kia toru nga tae. Tautuhia te tae tuatahi, te tae tuarua, te mutu o te tae o te tae tuarua (he uara ōrau rite 25%), me te tae tuatoru me enei ranunga:

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

Mahunga ake! Mena ka hiahia koe ki te tango i te rōnaki, me tango e koe etahi IE-motuhake filterkua tapiritia e koe. Ka taea e koe ma te whakamahi i te .reset-filter()ranunga ki te taha background-image: none;.

Whakaranu taputapu

Ko nga whakauru taputapu he ranunga e whakakotahi ana i nga ahuatanga CSS kore e hono ki te whakatutuki i tetahi whaainga, mahi ranei.

Whakatikatika

Wareware tāpiriclass="clearfix" ki tetahi huānga me te taapiri i te .clearfix()ranunga ina tika. Ka whakamahi i te whakatika moroiti mai i a Nicolas Gallagher .

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

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

Whakawaenga waenganui

Whakakotahitia tetahi huānga ki roto i tona matua.Me whakarite width, max-widthme whakarite ranei.

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

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

Kaiawhina rahi

He ngawari ake te tautuhi i nga rahi o tetahi mea.

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

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

Nga waahi kuputuhi ka taea te whakarereke

Me ngawari te whirihora i nga whiringa whakarereke mo tetahi waahanga kuputuhi, tetahi atu huānga ranei. Taunoa ki te whanonga pūtirotiro noa (both ).

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

Te tapahi kupu

Tapahia ngawari te kuputuhi me te ellipsis me te whakakotahitanga kotahi. Me whai huānga ki te taumata, ki te taumata blockranei inline-block.

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

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

Whakaahua retina

Tauwhāitihia nga ara atahanga e rua me nga rahi atahanga @1x, a ka homai e Bootstrap he patai pāpāho @2x. Mena he maha nga whakaahua hei mahi, whakaarohia te tuhi a-ringa i to whakaahua retina CSS ki roto i te patai pāpāho kotahi.

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

Ahakoa kei te hangaia a Bootstrap ki runga Iti, kei a ia ano tetahi tauranga Sass mana . Ka puritia e matou ki roto i te putunga motuhake a GitHub me te whakahaere i nga whakahoutanga me te tuhinga whakahuri.

He aha kei roto

Since the Sass port has a separate repo and serves a slightly different audience, the contents of the project differ greatly from the main Bootstrap project. This ensures the Sass port is as compatible with as many Sass-based systems as possible.

Path	Description
`lib/`	Ruby gem code (Sass configuration, Rails and Compass integrations)
`tasks/`	Converter scripts (turning upstream Less to Sass)
`test/`	Compilation tests
`templates/`	Whakaatu mōkihi kāpehu
`vendor/assets/`	Sass, JavaScript, me nga konae momotuhi
`Rakefile`	Nga mahi o roto, penei i te rake me te huri

Tirohia te putunga putunga GitHub o te tauranga Sass kia kite i enei konae e mahi ana.

Tāutatanga

Mo nga korero mo te whakauru me te whakamahi i a Bootstrap mo Sass, tirohia te panui purongo GitHub . Koinei te puna hou o te ra me nga korero mo te whakamahi me nga kaupapa Rails, Compass, me nga kaupapa Sass paerewa.

Bootstrap mo Sass

CSS

Tirohanga

HTML5 momo tuhinga

Waea pūkoro tuatahi

Tuhituhi me nga hononga

Normalize.css

Nga ipu

Pūnaha mātiti

Kupu Whakataki

Uiui pāpāho

Kōwhiringa mātiti

Tauira: Tāpae-ki-whakapae

Tauira: ipu wai

Tauira: Waea pūkoro me te papamahi

Tauira: Pukoro, papa, papamahi

Tauira: Te takai tīwae

Ka tautuhia nga pou whakautu

Tangohia nga awaawa

Whangai nga pou

Nga pou kohanga

Whakaraupapa tīwae

He iti ake nga ranunga me nga taurangi

Taurangi

Whakaranu

Te whakamahi tauira

Kuputuhi

Nga Upoko

h1. Upoko Bootstrap

h2. Upoko Bootstrap

h3. Upoko Bootstrap

h4. Upoko Bootstrap

h5. Upoko Bootstrap

h6. Upoko Bootstrap

h1. Pane Bootstrap Kuputuhi tuarua

h2. Pane Bootstrap Kuputuhi tuarua

h3. Pane Bootstrap Kuputuhi tuarua

h4. Pane Bootstrap Kuputuhi tuarua

h5. Pane Bootstrap Kuputuhi tuarua

h6. Pane Bootstrap Kuputuhi tuarua

Te kape tinana

Te kape tinana arahi

Hanga me te Iti

Huānga kuputuhi rōraina

Kuputuhi kua tohua

Kuputuhi kua mukua

Kupu piro

Kuputuhi whakauru

Kuputuhi tararo

Kuputuhi iti

Maia

Titaha

Huānga kē

Nga karaehe whakatikatika

Nga karaehe huringa

Whakapoto

Whakapoto taketake

Te timatanga

Wāhitau

Poraka korero

Kīanga poraka taunoa

Kōwhiringa Poraka

Te whakaingoa i tetahi puna

Whakaaturanga rereke

Nga rarangi

Kore ota

Kua whakahaua

Kore-ahua

Raina

Whakaahuatanga

Whakaahuatanga whakapae

Te tapahi-aunoa

Waehere

Raina

Whakauru kaiwhakamahi

Poraka taketake

Taurangi

Putanga tauira

Ripanga

Tauira taketake

Nga rarangi tarekare

`:focus`State demo

He whakatupato mo te mahi hono o`<a>`

`.sr-only`Ko nga tohu taapiri me nga tapanga huna