Tirohanga

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 atu user-scalable=noki te tohu tohu tauranga tirohanga. Ka mono tenei i te topa, ko te tikanga ka taea e nga kaiwhakamahi te panuku noa, ka puta te ahua o to pae 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">

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>

Pūnaha mātiti

Kei roto i te Bootstrap tetahi punaha matiti wai tuatahi waea pūkoro e tika ana kia eke ki te 12 nga pou i te mea 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 whakauru i tetahi .col-md-*karaehe ki tetahi huānga ka kore noa e pa ki tana whakaahuatanga 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-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-8
.col-md-4
.col-md-4
.col-md-4
.col-md-4
.col-md-6
.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 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6
.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
.col-xs-6 .col-sm-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
.col-xs-6 .col-sm-3
.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 waahi, te pana, te kume 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>

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

Kuputuhi

Nga Upoko

Ko nga pane HTML katoa, <h1>ma te <h6>, e waatea ana. .h1i roto i .h6nga karaehe e waatea ana, ina hiahia koe ki te whakataurite i te momo momotuhi o te upoko engari kei te pirangi tonu koe kia whakaatuhia to tuhinga ki roto.

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 waahanga 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 o te 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 nga kupu ki roto i nga waahanga me nga karaehe whakapaipai kupu.

Kuputuhi iti.

Kuputuhi pūmatua.

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 acronym hei whakaatu i te putanga whakaroa 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.

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Tauoti molestie lorem me massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean noho amet erat nunc
  8. Eget porttitor lorem
<ol>
  <li>...</li>
</ol>

Kore-ahua

Tango i te list-styletawhē taunoa me te taha mauī i runga i ngā tūemi rārangi (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 karaehe mo nga raarangi 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 nga tauranga tiro whaiti, ka huri ki te tahora tapae taunoa.

Waehere

Raina

Takaia nga mahanga rarangi-roto o te waehere me 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-scrollable karaehe, 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>

Ripanga

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

Puka

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.

He tauira kupu awhina taumata paraka i konei.

<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

Tāpirihia .form-inlineki tō puka (kaore he a <form>) mō ngā mana tīaroaro mauī me te paraka-raina. Ka pa ana tenei ki nga puka kei 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>
$
.00
<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 e Bootstrap ki te whakahāngai i nga tapanga me nga roopu mana whakahaere ki te whakatakotoranga 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 karekau he take .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 haua me nga reo irirangi, 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, or .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>

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.

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

He paraka kupu awhina ka pakaru ki tetahi raina hou ka toro atu pea ki tua atu i te rarangi kotahi.
<label class="sr-only" for="inputHelpBlock">Input with help text</label>
<input type="text" id="inputHelpBlock" class="form-control" aria-describedby="helpBlock">
...
<span id="helpBlock" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>

Ko nga korero whakamana

Kei a Bootstrap nga momo whakamana mo te hapa, te whakatupato, me nga ahuatanga angitu i runga i nga mana puka. Hei whakamahi, tāpiri .has-warning, .has-error, .has-successki te huānga matua rānei. 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 paraka kuputuhi awhina taapiri . Mo nga hangarau awhina, ka taea hoki te whakatau i nga mana puka muhu he aria-invalid="true"huanga.

He paraka kupu awhina ka pakaru ki tetahi raina hou ka toro atu pea ki tua atu i te rarangi kotahi.
<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 e koe te taapiri i nga tohu urupare me te taapiri me .has-feedbackte 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.

(angitu)
(whakatupato)
(hapa)
@
(angitu)
<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 raina

(angitu)
@
(angitu)
<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>
(angitu)

@
(angitu)
<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-onlyKo nga tohu taapiri me nga tapanga huna

Mena ka whakamahi koe i te .sr-onlykaraehe ki te huna i te 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.

(angitu)
@
(angitu)
<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>

Patene

Nga tohu paatene

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

Hononga
<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 tatou 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 tūtohu matou ki te whakamahi i te <button>huānga ina 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 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 tearia-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 mena ka 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 kaore ano kia paerewatia taua taonga CSS, kaore ano kia tino tautokona 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.

Whakaahua

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.

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

Nga karaehe kaiawhina

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 mohio kei te kitea nga korero e tohuhia ana e te tae mai i te ihirangi ake (ko nga tae horopaki ka whakamahia noa hei whakakaha i te tikanga kua mau i roto i te tuhinga/tohu), ka whakauruhia ranei ma etahi atu tikanga, penei i etahi atu tuhinga huna ki te .sr-onlyakomanga. .

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

Ehara i te mea mo te whakamahi i roto i nga navbars

Hei whakahāngai i nga waahanga i roto i nga pae whakatere me nga karaehe whaipainga, whakamahia , hei utu .navbar-leftranei .navbar-right. Tirohia nga tuhinga navbar mo nga taipitopito.

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 engari ko nga kaipānui mata whai .sr-only. Whakakotahitia .sr-onlyki .sr-only-focusablete whakaatu ano i te huānga ina e aro 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();
}

Nga taputapu urupare

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
.visible-sm-* Ka kitea
.visible-md-* Ka kitea
.visible-lg-* Ka kitea
.hidden-xs Ka kitea Ka kitea Ka kitea
.hidden-sm Ka kitea Ka kitea Ka kitea
.hidden-md Ka kitea Ka kitea Ka kitea
.hidden-lg Ka kitea Ka kitea Ka kitea

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 CSSdisplay
.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, me .visible-lgte 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
.visible-print-block
.visible-print-inline
.visible-print-inline-block
Ka kitea
.hidden-print Ka kitea

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.

✔ Ka kitea i runga i te x-iti
✔ Ka kitea i runga i te iti
Waenga ✔ Ka kitea i runga i te reo
✔ Ka kitea i runga i te rahi
✔ Ka kitea i runga i te x-iti me te iti
✔ Ka kitea i runga i te reo me te rahi
✔ Ka kitea i runga i te x-iti me te reo
✔ Ka kitea i runga i te iti me te rahi
✔ Ka kitea i runga i te x-iti me te rahi
✔ Ka kitea i runga i te iti me te reo

Huna ki runga...

I konei, ko nga tohutaki kaariki e tohu ana kei te huna te huānga ki to tauranga tirohanga o naianei.

✔ Huna ki te x-iti
✔ Huna ki runga iti
Waenga ✔ Huna ki te reo
✔ Huna ki runga nui
✔ Huna ki te x-iti me te iti
✔ Huna ki te reo me te rahi
✔ Huna ki te x-iti me te reo
✔ Huna ki te iti me te rahi
✔ Huna ki te x-iti me te rahi
✔ Huna ki te iti me te reo

Whakamahi Iti

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;

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,lightensaturate , 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 mea kua whakakorehia . hei tiki i te -webkitprefix e hiahiatia ana.

Kua whakakorehia te ranunga 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.

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.

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

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.

.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 ki te taapiri class="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);
}

Ma te whakamahi i a Sass

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

I te mea he repo motuhake to te tauranga Sass, he rerekee te hunga whakarongo, he rereke nga korero o te kaupapa mai i te kaupapa matua Bootstrap. Ma tenei ka whakarite kia rite te tauranga Sass ki te maha o nga punaha Sass ka taea.

Ara Whakaahuatanga
lib/ Waehere kohatu Ruby (Sass whirihoranga, Rails and Compass integrations)
tasks/ Kahurihuri tuhi (ka huri whakarunga iti ki te Sass)
test/ Nga whakamatautau whakahiato
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