Kunin ang lowdown sa mga pangunahing bahagi ng imprastraktura ng Bootstrap, kabilang ang aming diskarte sa mas mahusay, mas mabilis, mas malakas na web development.

HTML5 doctype

Gumagamit ang Bootstrap ng ilang partikular na elemento ng HTML at mga katangian ng CSS na nangangailangan ng paggamit ng HTML5 doctype. Isama ito sa simula ng lahat ng iyong proyekto.

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

Mobile muna

Sa Bootstrap 2, nagdagdag kami ng mga opsyonal na istilong pang-mobile para sa mga pangunahing aspeto ng framework. Sa Bootstrap 3, muling isinulat namin ang proyekto upang maging mobile friendly mula sa simula. Sa halip na magdagdag sa mga opsyonal na istilo ng mobile, ang mga ito ay inihurnong mismo sa core. Sa katunayan, ang Bootstrap ay mobile muna . Matatagpuan ang mga istilong pang-mobile sa buong library sa halip na sa magkahiwalay na mga file.

Upang matiyak ang wastong pag-render at pag-zoom ng pagpindot, idagdag ang viewport meta tag sa iyong <head>.

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

Maaari mong i-disable ang mga kakayahan sa pag-zoom sa mga mobile device sa pamamagitan ng pagdaragdag user-scalable=nosa viewport meta tag. Hindi nito pinapagana ang pag-zoom, ibig sabihin ay nakakapag-scroll lang ang mga user, at nagreresulta sa pakiramdam ng iyong site na parang isang native na application. Sa pangkalahatan, hindi namin ito inirerekomenda sa bawat site, kaya mag-ingat!

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

Typography at mga link

Nagtatakda ang Bootstrap ng mga pangunahing global display, typography, at mga istilo ng link. Sa partikular, kami ay:

Itakda background-color: #fff;sabody
Gamitin ang @font-family-base, @font-size-base, at mga @line-height-basekatangian bilang aming typographic base
Itakda ang pangkalahatang kulay ng link sa pamamagitan ng @link-colorat ilapat ang mga underline ng link sa:hover

Ang mga istilong ito ay matatagpuan sa loob ng scaffolding.less.

Normalize.css

Para sa pinahusay na cross-browser rendering, ginagamit namin ang Normalize.css , isang proyekto nina Nicolas Gallagher at Jonathan Neal .

Mga lalagyan

Ang Bootstrap ay nangangailangan ng isang naglalaman ng elemento upang balutin ang mga nilalaman ng site at ilagay ang aming grid system. Maaari kang pumili ng isa sa dalawang lalagyan na gagamitin sa iyong mga proyekto. Tandaan na, dahil sa paddingat higit pa, walang lalagyan ang nestable.

Gamitin .containerpara sa isang tumutugon na nakapirming lapad na lalagyan.

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

Gamitin .container-fluidpara sa isang buong lapad na lalagyan, na sumasaklaw sa buong lapad ng iyong viewport.

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

Kasama sa Bootstrap ang isang tumutugon, mobile first fluid grid system na naaangkop na sumusukat ng hanggang 12 column habang tumataas ang laki ng device o viewport. Kabilang dito ang mga paunang natukoy na klase para sa madaling mga pagpipilian sa layout, pati na rin ang makapangyarihang mga mix para sa pagbuo ng mas maraming semantic na layout .

Panimula

Ginagamit ang mga grid system para sa paglikha ng mga layout ng page sa pamamagitan ng isang serye ng mga row at column na naglalaman ng iyong content. Narito kung paano gumagana ang Bootstrap grid system:

Dapat ilagay ang mga row sa loob ng isang .container(fixed-width) o .container-fluid(full-width) para sa tamang pagkakahanay at padding.
Gumamit ng mga row para gumawa ng mga pahalang na pangkat ng mga column.
Ang nilalaman ay dapat ilagay sa loob ng mga hanay, at ang mga hanay lamang ang maaaring maging agarang mga anak ng mga hilera.
Ang mga paunang natukoy na klase ng grid ay gusto .rowat .col-xs-4magagamit para sa mabilis na paggawa ng mga layout ng grid. Ang mas kaunting mixin ay maaari ding gamitin para sa mas maraming semantic na layout.
Lumilikha ang mga column ng mga gutter (mga puwang sa pagitan ng nilalaman ng column) sa pamamagitan ng padding. Ang padding na iyon ay na-offset sa mga row para sa una at huling column sa pamamagitan ng negatibong margin sa .rows.
Ang negatibong margin ang dahilan kung bakit outdented ang mga halimbawa sa ibaba. Ito ay upang ang nilalaman sa loob ng mga hanay ng grid ay nakahanay sa nilalamang hindi grid.
Ang mga grid column ay nilikha sa pamamagitan ng pagtukoy sa bilang ng labindalawang available na column na gusto mong i-span. Halimbawa, tatlong pantay na column ang gagamit ng tatlo .col-xs-4.
Kung higit sa 12 column ang inilagay sa loob ng iisang row, ang bawat pangkat ng mga karagdagang column ay, bilang isang unit, magbalot sa isang bagong linya.
Nalalapat ang mga klase ng grid sa mga device na may lapad ng screen na mas malaki kaysa sa o katumbas ng mga laki ng breakpoint, at na-override ang mga klase ng grid na naka-target sa mas maliliit na device. Samakatuwid, hal. paglalapat ng anumang .col-md-*klase sa isang elemento ay hindi lamang makakaapekto sa pag-istilo nito sa mga medium na device kundi pati na rin sa malalaking device kung .col-lg-*walang klase.

Tumingin sa mga halimbawa para sa paglalapat ng mga prinsipyong ito sa iyong code.

Mga query sa media

Ginagamit namin ang mga sumusunod na query sa media sa aming Mas kaunting mga file upang gawin ang mga pangunahing breakpoint sa aming grid system.

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

Paminsan-minsan, pinapalawak namin ang mga query sa media na ito upang isama ang isang max-widthupang limitahan ang CSS sa isang mas makitid na hanay ng mga device.

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

Mga pagpipilian sa grid

Tingnan kung paano gumagana ang mga aspeto ng Bootstrap grid system sa maraming device na may madaling gamiting talahanayan.

	Mga napakaliit na device Mga Telepono (<768px)	Mga maliliit na device Mga Tablet (≥768px)	Mga katamtamang device na Desktop (≥992px)	Mga Desktop ng malalaking device (≥1200px)
Pag-uugali ng grid	Pahalang sa lahat ng oras	Na-collapse upang magsimula, pahalang sa itaas ng mga breakpoint
Lapad ng lalagyan	Wala (auto)	750px	970px	1170px
Prefix ng klase	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`
# ng mga column	12
Lapad ng haligi	Auto	~62px	~81px	~97px
Lapad ng kanal	30px (15px sa bawat gilid ng column)
Nestable	Oo
Mga offset	Oo
Pag-order ng column	Oo

Halimbawa: Stacked-to-horizontal

Gamit ang iisang hanay ng mga .col-md-*klase ng grid, maaari kang lumikha ng pangunahing sistema ng grid na magsisimulang naka-stack sa mga mobile device at tablet device (ang sobrang maliit hanggang sa maliit na hanay) bago maging pahalang sa mga desktop (medium) na device. Maglagay ng mga hanay ng grid sa alinmang .row.

.col-md-1

.col-md-8

.col-md-4

.col-md-6

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

Halimbawa: Lalagyan ng likido

Gawing full-width na layout ang anumang layout ng fixed-width na grid sa pamamagitan ng pagpapalit ng iyong pinakalabas .containersa .container-fluid.

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

Halimbawa: Mobile at desktop

Ayaw mo bang mag-stack lang ang iyong mga column sa mas maliliit na device? Gamitin ang sobrang maliit at katamtamang mga klase ng grid ng device sa pamamagitan ng pagdaragdag .col-xs-* .col-md-*sa iyong mga column. Tingnan ang halimbawa sa ibaba para sa isang mas mahusay na ideya kung paano gumagana ang lahat.

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

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

.col-xs-6

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

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

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

Halimbawa: Mobile, tablet, desktop

Bumuo sa nakaraang halimbawa sa pamamagitan ng paggawa ng mas dynamic at makapangyarihang mga layout na may mga .col-sm-*klase ng tablet.

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

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

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

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

Halimbawa: Column wrapping

Kung higit sa 12 column ang inilagay sa loob ng iisang row, ang bawat pangkat ng mga karagdagang column ay, bilang isang unit, magbalot sa isang bagong linya.

.col-xs-9

.col-xs-4
Dahil 9 + 4 = 13 > 12, ang 4-column-wide div na ito ay nababalot sa isang bagong linya bilang isang magkadikit na unit.

.col-xs-6 Ang
mga kasunod na column ay nagpapatuloy sa bagong linya.

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

Nagre-reset ng tumutugong column

Sa apat na tier ng mga grids na available, tiyak na makakaranas ka ng mga isyu kung saan, sa ilang partikular na breakpoint, ang iyong mga column ay hindi masyadong malinaw dahil ang isa ay mas matangkad kaysa sa isa. Upang ayusin iyon, gumamit ng kumbinasyon ng a .clearfixat aming mga tumutugon na mga klase ng utility .

.col-xs-6 .col-sm-3
Baguhin ang laki ng iyong viewport o tingnan ito sa iyong telepono para sa isang halimbawa.

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

Bilang karagdagan sa pag-clear ng column sa mga tumutugong breakpoint, maaaring kailanganin mong i- reset ang mga offset, push, o pull . Tingnan ito sa pagkilos sa halimbawa ng grid .

<div class="row">
  <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
  <div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
</div>

<div class="row">
  <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
  <div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div>
</div>

Pag-offset ng mga column

Ilipat ang mga column sa kanan gamit ang mga .col-md-offset-*klase. Ang mga klase na ito ay nagdaragdag sa kaliwang margin ng isang column sa pamamagitan ng mga *column. Halimbawa, .col-md-offset-4gumagalaw .col-md-4sa apat na column.

.col-md-4

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

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

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

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

Maaari mo ring i-override ang mga offset mula sa mga mas mababang grid tier na may mga .col-*-offset-0klase.

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

Mga nesting column

Upang i-nest ang iyong content sa default na grid, magdagdag ng bago .rowat hanay ng mga .col-sm-*column sa loob ng isang kasalukuyang .col-sm-*column. Ang mga nested row ay dapat na may kasamang hanay ng mga column na nagdaragdag ng hanggang 12 o mas kaunti (hindi kinakailangan na gamitin mo ang lahat ng 12 available na column).

Level 1: .col-sm-9

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

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

<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-xs-8 col-sm-6">
        Level 2: .col-xs-8 .col-sm-6
      </div>
      <div class="col-xs-4 col-sm-6">
        Level 2: .col-xs-4 .col-sm-6
      </div>
    </div>
  </div>
</div>

Pag-order ng column

Madaling baguhin ang pagkakasunud-sunod ng aming mga built-in na grid column na may mga .col-md-push-*klase ng .col-md-pull-*modifier.

.col-md-9 .col-md-push-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>

Mas kaunting mixin at variable

Bilang karagdagan sa mga prebuilt na klase ng grid para sa mabilis na mga layout, kasama sa Bootstrap ang Mas kaunting mga variable at mix para sa mabilis na pagbuo ng sarili mong simple at semantic na mga layout.

Mga variable

Tinutukoy ng mga variable ang bilang ng mga column, ang lapad ng gutter, at ang media query point kung saan sisimulan ang mga lumulutang na column. Ginagamit namin ang mga ito upang bumuo ng mga paunang natukoy na klase ng grid na nakadokumento sa itaas, pati na rin para sa mga custom na mix na nakalista sa ibaba.

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

Mixins

Ginagamit ang mga mixin kasabay ng mga variable ng grid upang makabuo ng semantic CSS para sa mga indibidwal na column ng grid.

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

Halimbawa ng paggamit

Maaari mong baguhin ang mga variable sa sarili mong mga custom na value, o gamitin lang ang mga mixin kasama ng kanilang mga default na value. Narito ang isang halimbawa ng paggamit ng mga default na setting upang lumikha ng layout na may dalawang hanay na may pagitan.

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

Mga pamagat

Lahat ng HTML heading, sa <h1>pamamagitan ng <h6>, ay available. .h1through .h6classes ay magagamit din, dahil kapag gusto mong itugma ang font styling ng isang heading ngunit gusto mo pa ring ipakita ang iyong text inline.

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

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

Gumawa ng mas magaan, pangalawang text sa anumang heading na may generic <small>na tag o .smallklase.

h1. Bootstrap heading Pangalawang text

h2. Bootstrap heading Pangalawang text

h3. Bootstrap heading Pangalawang text

h4. Bootstrap heading Pangalawang text

h5. Bootstrap heading Pangalawang text

h6. Bootstrap heading Pangalawang text

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

Kopya ng katawan

Ang global default ng Bootstrap font-sizeay 14pxline-height , na may 1.428 . Ito ay inilapat sa <body>at sa lahat ng mga talata. Bilang karagdagan, <p>ang (mga talata) ay tumatanggap ng mas mababang margin ng kalahati ng kanilang nakalkulang taas ng linya (10px bilang default).

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

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

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

<p>...</p>

Lead body copy

Gawing kakaiba ang isang talata sa pamamagitan ng pagdaragdag ng .lead.

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

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

Itinayo gamit ang Mas Kaunti

Ang typographic scale ay batay sa dalawang Less variables sa variables.less : @font-size-baseat @line-height-base. Ang una ay ang base font-size na ginamit sa kabuuan at ang pangalawa ay ang base line-height. Ginagamit namin ang mga variable na iyon at ilang simpleng matematika para gawin ang mga margin, padding, at line-height ng lahat ng aming uri at higit pa. I-customize ang mga ito at ang Bootstrap ay umaangkop.

Mga elemento ng inline na teksto

May markang teksto

Para sa pag-highlight ng isang run ng text dahil sa kaugnayan nito sa ibang konteksto, gamitin ang <mark>tag.

Maaari mong gamitin ang mark tag sahighlighttext.

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

Tinanggal ang text

Para sa pagpahiwatig ng mga bloke ng teksto na natanggal gamitin ang <del>tag.

~~Ang linya ng text na ito ay nilalayong ituring bilang tinanggal na text.~~

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

Strikethrough text

Para sa pagtukoy ng mga bloke ng text na hindi na nauugnay gamitin ang <s>tag.

~~Ang linya ng text na ito ay nilalayong ituring na hindi na tumpak.~~

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

Ipinasok ang teksto

Para sa pagpahiwatig ng mga karagdagan sa dokumento gamitin ang <ins>tag.

Ang linya ng text na ito ay nilalayong ituring bilang karagdagan sa dokumento.

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

May salungguhit na teksto

Para salungguhitan ang text gamitin ang <u>tag.

Ire-render ang linyang ito ng text bilang may salungguhit

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

Gamitin ang mga default na tag ng emphasis ng HTML na may mga magaan na istilo.

Maliit na text

Para sa de-emphasizing inline o block ng text, gamitin ang <small>tag para itakda ang text sa 85% na laki ng parent. Ang mga elemento ng heading ay tumatanggap ng sarili nilang font-sizepara sa nested<small> elemento.

Maaari kang alternatibong gumamit ng inline na elemento na may .smallkapalit ng alinmang <small>.

Ang linya ng text na ito ay nilalayong ituring bilang fine print.

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

Matapang

Para sa pagbibigay-diin sa isang snippet ng text na may mas mabigat na font-weight.

Ang sumusunod na snippet ng text ay nai-render bilang bold text .

<strong>rendered as bold text</strong>

Italiko

Para sa pagbibigay-diin sa isang snippet ng text na may italics.

Ang sumusunod na snippet ng text ay nai-render bilang italicized na text .

<em>rendered as italicized text</em>

Mga kahaliling elemento

Huwag mag-atubiling gamitin <b>at <i>sa HTML5. <b>ay nilalayong i-highlight ang mga salita o parirala nang hindi nagbibigay ng karagdagang kahalagahan habang <i>kadalasan ay para sa boses, teknikal na termino, atbp.

Mga klase sa pagkakahanay

Madaling i-realign ang text sa mga bahagi na may mga klase ng text alignment.

Naka-align sa kaliwa ang text.

Naka-align sa gitnang text.

Naka-align sa kanan na teksto.

Makatuwirang teksto.

Walang balot na text.

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

Mga klase ng pagbabago

Ibahin ang anyo ng teksto sa mga bahagi na may mga klase ng text capitalization.

Maliit na titik ang teksto.

Malaking titik ang teksto.

Naka-capitalize na teksto.

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

Mga pagdadaglat

Naka-istilong pagpapatupad ng <abbr>elemento ng HTML para sa mga pagdadaglat at acronym upang ipakita ang pinalawak na bersyon sa hover. Ang mga abbreviation na may titleattribute ay may light dotted bottom border at help cursor sa hover, na nagbibigay ng karagdagang konteksto sa hover at sa mga user ng mga pantulong na teknolohiya.

Pangunahing pagdadaglat

Ang pagdadaglat ng salitang attribute ay attr .

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

Inisyalismo

Idagdag .initialismsa isang abbreviation para sa isang bahagyang mas maliit na laki ng font.

Ang HTML ay ang pinakamagandang bagay mula noong hiniwang tinapay.

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

Mga address

Ipakita ang impormasyon sa pakikipag-ugnayan para sa pinakamalapit na ninuno o sa buong katawan ng trabaho. Panatilihin ang pag-format sa pamamagitan ng pagtatapos ng lahat ng mga linya sa <br>.

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

Buong Pangalan
[email protected]

<address>
  <strong>Twitter, Inc.</strong><br>
  1355 Market Street, Suite 900<br>
  San Francisco, CA 94103<br>
  <abbr title="Phone">P:</abbr> (123) 456-7890
</address>

<address>
  <strong>Full Name</strong><br>
  <a href="mailto:#">[email protected]</a>
</address>

Blockquotes

Para sa pagsipi ng mga bloke ng nilalaman mula sa ibang pinagmulan sa loob ng iyong dokumento.

Default na blockquote

I- wrap sa <blockquote>paligid ng anumang HTML bilang ang quote. Para sa mga tuwid na panipi, inirerekomenda namin ang isang <p>.

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

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

Mga pagpipilian sa blockquote

Mga pagbabago sa istilo at nilalaman para sa mga simpleng variation sa isang pamantayan <blockquote>.

Pagpapangalan ng pinagmulan

Magdagdag ng isang <footer>para sa pagtukoy sa pinagmulan. I-wrap ang pangalan ng source work sa <cite>.

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

Isang taong sikat sa Pamagat ng Pinagmulan

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

Mga kahaliling display

Magdagdag .blockquote-reversepara sa isang blockquote na may nakahanay sa kanan na nilalaman.

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

Isang taong sikat sa Pamagat ng Pinagmulan

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

Mga listahan

Hindi nakaayos

Isang listahan ng mga item kung saan ang pagkakasunud-sunod ay hindi tahasang mahalaga.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at masa
Facilisis sa 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 umupo amet erat nunc
Eget porttitor lorem

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

Inutusan

Isang listahan ng mga item kung saan ang pagkakasunud-sunod ay tahasang mahalaga.

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

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

Walang istilo

Alisin ang default list-styleat kaliwang margin sa mga item sa listahan (mga agarang bata lamang). Nalalapat lang ito sa mga item ng immediate na listahan ng mga bata , ibig sabihin, kakailanganin mo ring idagdag ang klase para sa anumang mga naka-nest na listahan.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at masa
Facilisis sa 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 umupo amet erat nunc
Eget porttitor lorem

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

Nasa linya

Ilagay ang lahat ng mga item sa listahan sa isang linya na may display: inline-block;at ilang light padding.

Lorem ipsum
Phasellus iaculis
Nulla volutpat

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

Paglalarawan

Isang listahan ng mga termino kasama ng kanilang mga nauugnay na paglalarawan.

Mga listahan ng paglalarawan: Ang isang listahan ng paglalarawan ay perpekto para sa pagtukoy ng mga termino.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.; Donec id elit non mi porta gravida at eget metus.
Malesuada porta: Etiam porta sem malesuada magna mollis euismod.

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

Pahalang na paglalarawan

Gumawa ng mga termino at paglalarawan <dl>nang magkatabi. Nagsisimulang nakasalansan tulad ng mga default <dl>na s, ngunit kapag lumawak ang navbar, gawin din ang mga ito.

Mga listahan ng paglalarawan: Ang isang listahan ng paglalarawan ay perpekto para sa pagtukoy ng mga termino.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.; Donec id elit non mi porta gravida at eget metus.
Malesuada porta: Etiam porta sem malesuada magna mollis euismod.
Felis euismod semper eget lacinia: Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

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

Awtomatikong pagputol

Ang mga listahan ng pahalang na paglalarawan ay puputulin ang mga terminong masyadong mahaba upang magkasya sa kaliwang hanay ng text-overflow. Sa mas makitid na viewport, magbabago sila sa default na nakasalansan na layout.

Nasa linya

I-wrap ang mga inline na snippet ng code gamit ang <code>.

Halimbawa, <section>dapat na balot bilang inline.

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

input ng user

Gamitin ang <kbd>upang isaad ang input na karaniwang ipinapasok sa pamamagitan ng keyboard.

Upang lumipat ng mga direktoryo, i-type cdang sinusundan ng pangalan ng direktoryo.
Upang i-edit ang mga setting, pindutin ang 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>

Pangunahing bloke

Gamitin <pre>para sa maraming linya ng code. Tiyaking takasan ang anumang mga anggulong bracket sa code para sa wastong pag-render.

<p>Sample text dito...</p>

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

Maaari mong opsyonal na idagdag ang .pre-scrollableklase, na magtatakda ng max-height na 350px at magbibigay ng y-axis scrollbar.

Mga variable

Para sa pagtukoy ng mga variable gamitin ang <var>tag.

y = m x + b

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

Sample na output

Para sa pagpahiwatig ng mga bloke ng sample na output mula sa isang programa gamitin ang <samp>tag.

Ang tekstong ito ay nilalayong ituring bilang sample na output mula sa isang computer program.

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

Pangunahing halimbawa

Para sa pangunahing pag-istilo—light padding at mga pahalang na divider lang—idagdag ang base class .tablesa alinmang <table>. Maaaring mukhang sobrang kalabisan, ngunit dahil sa malawakang paggamit ng mga talahanayan para sa iba pang mga plugin tulad ng mga kalendaryo at mga tagapili ng petsa, pinili naming ihiwalay ang aming mga custom na istilo ng talahanayan.

Opsyonal na caption ng talahanayan.
#	Pangalan	Huling pangalan	Username
1	marka	Otto	@mdo
2	Jacob	Thornton	@mataba
3	Larry	ang ibon	@twitter

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

Mga guhit na hilera

Gamitin .table-stripedupang magdagdag ng zebra-striping sa anumang hilera ng talahanayan sa loob ng <tbody>.

Cross-browser compatibility

Ang mga striped na talahanayan ay naka-istilo sa pamamagitan ng :nth-childCSS selector, na hindi available sa Internet Explorer 8.

#	Pangalan	Huling pangalan	Username
1	marka	Otto	@mdo
2	Jacob	Thornton	@mataba
3	Larry	ang ibon	@twitter

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

Bordered table

Idagdag .table-borderedpara sa mga hangganan sa lahat ng panig ng talahanayan at mga cell.

#	Pangalan	Huling pangalan	Username
1	marka	Otto	@mdo
2	Jacob	Thornton	@mataba
3	Larry	ang ibon	@twitter

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

Mag-hover ng mga row

Idagdag .table-hoverupang paganahin ang isang hover state sa mga hilera ng talahanayan sa loob ng isang <tbody>.

#	Pangalan	Huling pangalan	Username
1	marka	Otto	@mdo
2	Jacob	Thornton	@mataba
3	Larry	ang ibon	@twitter

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

Condensed table

Idagdag .table-condensedupang gawing mas compact ang mga talahanayan sa pamamagitan ng pagputol ng cell padding sa kalahati.

#	Pangalan	Huling pangalan	Username
1	marka	Otto	@mdo
2	Jacob	Thornton	@mataba
3	Larry the Bird		@twitter

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

Mga klase sa konteksto

Gumamit ng mga klase sa konteksto upang kulayan ang mga hilera ng talahanayan o indibidwal na mga cell.

Klase	Paglalarawan
`.active`	Inilalapat ang kulay ng hover sa isang partikular na row o cell
`.success`	Nagsasaad ng matagumpay o positibong aksyon
`.info`	Nagsasaad ng neutral na pagbabago o pagkilos na nagbibigay-kaalaman
`.warning`	Nagsasaad ng babala na maaaring nangangailangan ng pansin
`.danger`	Nagsasaad ng mapanganib o potensyal na negatibong pagkilos

#	Heading ng column	Heading ng column	Heading ng column
1	Nilalaman ng column	Nilalaman ng column	Nilalaman ng column
2	Nilalaman ng column	Nilalaman ng column	Nilalaman ng column
3	Nilalaman ng column	Nilalaman ng column	Nilalaman ng column
4	Nilalaman ng column	Nilalaman ng column	Nilalaman ng column
5	Nilalaman ng column	Nilalaman ng column	Nilalaman ng column
6	Nilalaman ng column	Nilalaman ng column	Nilalaman ng column
7	Nilalaman ng column	Nilalaman ng column	Nilalaman ng column
8	Nilalaman ng column	Nilalaman ng column	Nilalaman ng column
9	Nilalaman ng column	Nilalaman ng column	Nilalaman ng column

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

Naghahatid ng kahulugan sa mga pantulong na teknolohiya

Ang paggamit ng kulay upang magdagdag ng kahulugan sa isang table row o indibidwal na cell ay nagbibigay lamang ng isang visual na indikasyon, na hindi ibibigay sa mga gumagamit ng mga pantulong na teknolohiya - tulad ng mga screen reader. Tiyaking ang impormasyong tinutukoy ng kulay ay maaaring halata mula sa nilalaman mismo (ang nakikitang teksto sa nauugnay na row/cell ng talahanayan), o kasama sa pamamagitan ng mga alternatibong paraan, gaya ng karagdagang tekstong nakatago sa .sr-onlyklase.

Mga tumutugon na talahanayan

Lumikha ng mga tumutugon na talahanayan sa pamamagitan ng pag-wrap ng anuman .tableupang .table-responsivegawin silang mag-scroll nang pahalang sa maliliit na device (sa ilalim ng 768px). Kapag tumitingin sa anumang mas malaki sa 768px ang lapad, hindi ka makakakita ng anumang pagkakaiba sa mga talahanayang ito.

Vertical clipping/truncation

Gumagamit ang mga tumutugong talahanayan ng overflow-y: hidden, na kumukuha ng anumang nilalaman na lampas sa ibaba o itaas na mga gilid ng talahanayan. Sa partikular, maaari nitong i-clip off ang mga dropdown na menu at iba pang mga widget ng third-party.

Firefox at mga fieldset

Ang Firefox ay may ilang awkward na fieldset styling na kinasasangkutan widthna nakakasagabal sa responsive table. Hindi ito ma-override nang walang hack na tukoy sa Firefox na hindi namin ibinibigay sa Bootstrap:

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

Para sa higit pang impormasyon, basahin itong sagot sa Stack Overflow .

#	Pamagat ng talahanayan	Pamagat ng talahanayan	Pamagat ng talahanayan	Pamagat ng talahanayan	Pamagat ng talahanayan	Pamagat ng talahanayan
1	Table cell	Table cell	Table cell	Table cell	Table cell	Table cell
2	Table cell	Table cell	Table cell	Table cell	Table cell	Table cell
3	Table cell	Table cell	Table cell	Table cell	Table cell	Table cell

#	Pamagat ng talahanayan	Pamagat ng talahanayan	Pamagat ng talahanayan	Pamagat ng talahanayan	Pamagat ng talahanayan	Pamagat ng talahanayan
1	Table cell	Table cell	Table cell	Table cell	Table cell	Table cell
2	Table cell	Table cell	Table cell	Table cell	Table cell	Table cell
3	Table cell	Table cell	Table cell	Table cell	Table cell	Table cell

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

Pangunahing halimbawa

Ang mga indibidwal na kontrol sa form ay awtomatikong nakakatanggap ng ilang pandaigdigang istilo. Ang lahat ng textual <input>, <textarea>, at mga <select>elementong may .form-controlay nakatakda sa bilang width: 100%;default. I-wrap ang mga label at kontrol .form-grouppara sa pinakamainam na espasyo.

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

Huwag paghaluin ang mga pangkat ng form sa mga pangkat ng pag-input

Huwag direktang paghaluin ang mga grupo ng form sa mga pangkat ng input . Sa halip, i-nest ang input group sa loob ng form group.

Inline na form

Idagdag .form-inlinesa iyong form (na hindi kailangang maging a <form>) para sa left-aligned at inline-block na mga kontrol. Nalalapat lang ito sa mga form sa loob ng mga viewport na hindi bababa sa 768px ang lapad.

Maaaring mangailangan ng mga custom na lapad

Ang mga input at pinili ay width: 100%;inilapat bilang default sa Bootstrap. Sa loob ng mga inline na form, ni-reset namin iyon upang width: auto;maraming mga kontrol ang maaaring manatili sa parehong linya. Depende sa iyong layout, maaaring kailanganin ang mga karagdagang custom na lapad.

Palaging magdagdag ng mga label

Magkakaroon ng problema ang mga screen reader sa iyong mga form kung hindi ka magsasama ng label para sa bawat input. Para sa mga inline na form na ito, maaari mong itago ang mga label gamit ang .sr-onlyklase. May mga karagdagang alternatibong paraan ng pagbibigay ng label para sa mga pantulong na teknolohiya, gaya ng aria-label, aria-labelledbyo titleattribute. Kung wala sa mga ito, maaaring gamitin ng mga screen reader ang placeholderkatangian, kung mayroon, ngunit tandaan na ang paggamit ng placeholderbilang kapalit para sa iba pang paraan ng pag-label ay hindi pinapayuhan.

<form class="form-inline">
  <div class="form-group">
    <label for="exampleInputName2">Name</label>
    <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
  </div>
  <div class="form-group">
    <label for="exampleInputEmail2">Email</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="[email protected]">
  </div>
  <button type="submit" class="btn btn-default">Send invitation</button>
</form>

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputEmail3">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
  </div>
  <div class="form-group">
    <label class="sr-only" for="exampleInputPassword3">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Remember me
    </label>
  </div>
  <button type="submit" class="btn btn-default">Sign in</button>
</form>

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
    <div class="input-group">
      <div class="input-group-addon">$</div>
      <input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
      <div class="input-group-addon">.00</div>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Transfer cash</button>
</form>

Pahalang na anyo

Gamitin ang mga paunang natukoy na klase ng grid ng Bootstrap upang ihanay ang mga label at grupo ng mga kontrol sa form sa isang pahalang na layout sa pamamagitan ng pagdaragdag .form-horizontalsa form (na hindi kailangang maging isang <form>). Ang paggawa nito ay nagbabago .form-groups upang kumilos bilang mga hilera ng grid, kaya hindi na kailangan para sa .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>

Mga suportadong kontrol

Mga halimbawa ng mga karaniwang kontrol ng form na sinusuportahan sa isang halimbawang layout ng form.

Mga input

Ang pinakakaraniwang kontrol sa form, mga field ng input na nakabatay sa text. May kasamang suporta para sa lahat ng uri ng HTML5: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, at color.

Kinakailangan ang deklarasyon ng uri

Ang mga input ay ganap lamang na mai-istilo kung ang mga typeito ay maayos na idineklara.

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

Mga pangkat ng input

Upang magdagdag ng pinagsamang text o mga button bago at/o pagkatapos ng anumang text-based <input>, tingnan ang bahagi ng input group .

Textarea

Kontrol ng form na sumusuporta sa maraming linya ng teksto. Baguhin rowsang katangian kung kinakailangan.

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

Mga checkbox at radyo

Ang mga checkbox ay para sa pagpili ng isa o ilang mga opsyon sa isang listahan, habang ang mga radyo ay para sa pagpili ng isang opsyon mula sa marami.

Sinusuportahan ang mga naka-disable na checkbox at radyo, ngunit upang magbigay ng "hindi pinapayagan" na cursor sa hover ng magulang <label>, kakailanganin mong idagdag ang .disabledklase sa magulang .radio, .radio-inline, .checkbox, o .checkbox-inline.

Default (nakasalansan)

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

Mga inline na checkbox at radyo

Gamitin ang .checkbox-inlineo mga .radio-inlineklase sa isang serye ng mga checkbox o radyo para sa mga kontrol na lumalabas sa parehong linya.

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

Mga checkbox at radyo na walang label na text

Kung wala kang text sa loob ng <label>, ang input ay nakaposisyon gaya ng iyong inaasahan. Kasalukuyang gumagana lamang sa mga non-inline na checkbox at radyo. Tandaan na magbigay pa rin ng ilang anyo ng label para sa mga pantulong na teknolohiya (halimbawa, gamit ang 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>

Pinipili

Tandaan na maraming katutubong piling menu—lalo na sa Safari at Chrome—ay may mga pabilog na sulok na hindi maaaring baguhin sa pamamagitan ng mga border-radiusproperty.

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

Para <select>sa mga kontrol na may multiplekatangian, maraming opsyon ang ipinapakita bilang default.

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

Static na kontrol

Kapag kailangan mong maglagay ng plain text sa tabi ng isang label ng form sa loob ng isang form, gamitin ang .form-control-staticklase sa isang <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>

Estado ng focus

Inalis namin ang mga default na outlineistilo sa ilang mga kontrol sa form at inilapat ang isang box-shadowbilang kapalit nito para sa :focus.

Demo `:focus`state

Ang halimbawang input sa itaas ay gumagamit ng mga custom na istilo sa aming dokumentasyon upang ipakita ang :focusestado sa isang .form-control.

Estadong may kapansanan

Idagdag ang disabledkatangian ng boolean sa isang input upang maiwasan ang mga pakikipag-ugnayan ng user. Lumilitaw na mas magaan ang mga naka-disable na input at nagdaragdag ng not-allowedcursor.

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

Naka-disable ang mga fieldset

Idagdag ang disabledattribute sa isang <fieldset>upang i-disable ang lahat ng kontrol sa loob ng <fieldset>sabay-sabay.

Caveat tungkol sa pag-andar ng link ng`<a>`

Bilang default, ituturing ng mga browser ang lahat ng mga kontrol ng native na form ( <input>, <select>at mga <button>elemento) sa loob ng isang <fieldset disabled>bilang hindi pinagana, na pumipigil sa parehong mga pakikipag-ugnayan sa keyboard at mouse sa mga ito. Gayunpaman, kung kasama rin sa iyong form <a ... class="btn btn-*">ang mga elemento, bibigyan lamang ang mga ito ng istilong pointer-events: none. Tulad ng nabanggit sa seksyon tungkol sa disabled state para sa mga button (at partikular sa sub-section para sa anchor elements), ang CSS property na ito ay hindi pa na-standardize at hindi pa ganap na sinusuportahan sa Opera 18 at mas mababa, o sa Internet Explorer 11, at nanalo. Hindi pinipigilan ang mga gumagamit ng keyboard na makapag-focus o ma-activate ang mga link na ito. Kaya para maging ligtas, gumamit ng custom na JavaScript upang huwag paganahin ang mga naturang link.

Cross-browser compatibility

Habang ilalapat ng Bootstrap ang mga istilong ito sa lahat ng browser, hindi ganap na sinusuportahan ng Internet Explorer 11 at mas mababa ang disabledkatangian sa isang <fieldset>. Gumamit ng custom na JavaScript upang huwag paganahin ang fieldset sa mga browser na ito.

<form>
  <fieldset disabled>
    <div class="form-group">
      <label for="disabledTextInput">Disabled input</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
    </div>
    <div class="form-group">
      <label for="disabledSelect">Disabled select menu</label>
      <select id="disabledSelect" class="form-control">
        <option>Disabled select</option>
      </select>
    </div>
    <div class="checkbox">
      <label>
        <input type="checkbox"> Can't check this
      </label>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </fieldset>
</form>

Readonly state

Idagdag ang readonlyboolean attribute sa isang input para maiwasan ang pagbabago ng value ng input. Ang mga read-only na input ay lumilitaw na mas magaan (tulad ng mga hindi pinaganang input), ngunit panatilihin ang karaniwang cursor.

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

Text ng tulong

I-block ang text ng tulong sa antas para sa mga kontrol sa form.

Pag-uugnay ng text ng tulong sa mga kontrol ng form

Ang text ng tulong ay dapat na tahasang nauugnay sa kontrol ng form na nauugnay sa paggamit ng aria-describedbykatangian. Titiyakin nito na ang mga pantulong na teknolohiya - tulad ng mga screen reader - ay iaanunsyo ang text ng tulong na ito kapag ang user ay tumutok o pumasok sa kontrol.

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

Mga estado ng pagpapatunay

Kasama sa Bootstrap ang mga istilo ng pagpapatunay para sa error, babala, at mga estado ng tagumpay sa mga kontrol ng form. Upang gamitin, idagdag ang .has-warning, .has-error, o .has-successsa parent na elemento. Anumang .control-label, .form-control, at .help-blocksa loob ng elementong iyon ay makakatanggap ng mga istilo ng pagpapatunay.

Naghahatid ng validation state sa mga pantulong na teknolohiya at colorblind na user

Ang paggamit sa mga istilo ng pagpapatunay na ito upang tukuyin ang estado ng isang kontrol ng form ay nagbibigay lamang ng isang visual, batay sa kulay na indikasyon, na hindi ipaparating sa mga gumagamit ng mga pantulong na teknolohiya - gaya ng mga screen reader - o sa mga user na colorblind.

Tiyakin na ang isang alternatibong indikasyon ng estado ay ibinibigay din. Halimbawa, maaari kang magsama ng pahiwatig tungkol sa estado sa <label>mismong text ng control ng form (gaya ng kaso sa sumusunod na halimbawa ng code), magsama ng Glyphicon (na may naaangkop na alternatibong text gamit ang .sr-onlyklase - tingnan ang mga halimbawa ng Glyphicon ), o sa pamamagitan ng pagbibigay ng karagdagang block ng text ng tulong . Partikular para sa mga pantulong na teknolohiya, ang mga di-wastong kontrol sa form ay maaari ding magtalaga ng isang aria-invalid="true"katangian.

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

Gamit ang mga opsyonal na icon

Maaari ka ring magdagdag ng mga opsyonal na icon ng feedback kasama ang pagdaragdag ng .has-feedbackat ang tamang icon.

Gumagana lang ang mga icon ng feedback sa mga text na <input class="form-control">elemento.

Mga icon, label, at input group

Ang manu-manong pagpoposisyon ng mga icon ng feedback ay kinakailangan para sa mga input na walang label at para sa mga pangkat ng input na may add-on sa kanan. Lubos kang hinihikayat na magbigay ng mga label para sa lahat ng mga input para sa mga dahilan ng pagiging naa-access. Kung nais mong pigilan ang pagpapakita ng mga label, itago ang mga ito sa .sr-onlyklase. Kung kailangan mong gawin nang walang mga label, ayusin ang tophalaga ng icon ng feedback. Para sa mga pangkat ng input, isaayos ang rightvalue sa isang naaangkop na pixel value depende sa lapad ng iyong addon.

Paghahatid ng kahulugan ng icon sa mga pantulong na teknolohiya

Upang matiyak na ang mga pantulong na teknolohiya - tulad ng mga screen reader - ay naihatid nang tama ang kahulugan ng isang icon, ang karagdagang nakatagong teksto ay dapat isama sa .sr-onlyklase at tahasang nauugnay sa kontrol ng form na nauugnay sa paggamit ng aria-describedby. Bilang kahalili, tiyakin na ang kahulugan (halimbawa, ang katotohanang mayroong babala para sa isang partikular na field ng pagpasok ng teksto) ay ipinaparating sa ibang anyo, gaya ng pagbabago ng teksto ng aktwal na <label>nauugnay sa kontrol ng form.

Bagama't binanggit na ng mga sumusunod na halimbawa ang estado ng pagpapatunay ng kani-kanilang mga kontrol sa form sa <label>mismong teksto, ang pamamaraan sa itaas (gamit ang .sr-onlyteksto at aria-describedby) ay isinama para sa mga layunin ng paglalarawan.

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

Opsyonal na mga icon sa pahalang at inline na anyo

<form class="form-horizontal">
  <div class="form-group has-success has-feedback">
    <label class="control-label col-sm-3" for="inputSuccess3">Input with success</label>
    <div class="col-sm-9">
      <input type="text" class="form-control" id="inputSuccess3" aria-describedby="inputSuccess3Status">
      <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
      <span id="inputSuccess3Status" class="sr-only">(success)</span>
    </div>
  </div>
  <div class="form-group has-success has-feedback">
    <label class="control-label col-sm-3" for="inputGroupSuccess2">Input group with success</label>
    <div class="col-sm-9">
      <div class="input-group">
        <span class="input-group-addon">@</span>
        <input type="text" class="form-control" id="inputGroupSuccess2" aria-describedby="inputGroupSuccess2Status">
      </div>
      <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
      <span id="inputGroupSuccess2Status" class="sr-only">(success)</span>
    </div>
  </div>
</form>

<form class="form-inline">
  <div class="form-group has-success has-feedback">
    <label class="control-label" for="inputSuccess4">Input with success</label>
    <input type="text" class="form-control" id="inputSuccess4" aria-describedby="inputSuccess4Status">
    <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
    <span id="inputSuccess4Status" class="sr-only">(success)</span>
  </div>
</form>
<form class="form-inline">
  <div class="form-group has-success has-feedback">
    <label class="control-label" for="inputGroupSuccess3">Input group with success</label>
    <div class="input-group">
      <span class="input-group-addon">@</span>
      <input type="text" class="form-control" id="inputGroupSuccess3" aria-describedby="inputGroupSuccess3Status">
    </div>
    <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
    <span id="inputGroupSuccess3Status" class="sr-only">(success)</span>
  </div>
</form>

Opsyonal na mga icon na may mga nakatagong `.sr-only`label

Kung gagamitin mo ang .sr-onlyklase upang itago ang kontrol ng form <label>(sa halip na gumamit ng iba pang mga opsyon sa pag-label, gaya ng aria-labelattribute), awtomatikong isasaayos ng Bootstrap ang posisyon ng icon kapag naidagdag na ito.

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

Kontrolin ang laki

Magtakda ng mga taas gamit ang mga klase tulad ng .input-lg, at magtakda ng mga lapad gamit ang mga klase ng hanay ng grid tulad ng .col-lg-*.

Pagsusukat ng taas

Gumawa ng mas mataas o mas maikling mga kontrol sa form na tumutugma sa mga laki ng button.

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

Mga laki ng pangkat ng pahalang na anyo

Mabilis na sukatin ang mga label at bumuo ng mga kontrol sa loob .form-horizontalsa pamamagitan ng pagdaragdag .form-group-lgo .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>

Pagsusukat ng column

I-wrap ang mga input sa mga grid column, o anumang custom na parent element, para madaling maipatupad ang mga gustong lapad.

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

Mga tag ng pindutan

Gamitin ang mga klase ng button sa isang <a>, <button>, o <input>elemento.

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

Paggamit na tukoy sa konteksto

Habang ang mga klase ng button ay maaaring gamitin sa <a>at mga <button>elemento, <button>mga elemento lamang ang sinusuportahan sa loob ng aming mga bahagi ng nav at navbar.

Mga link na kumikilos bilang mga pindutan

Kung ang mga <a>elemento ay ginagamit upang kumilos bilang mga pindutan - na nagti-trigger ng in-page na functionality, sa halip na mag-navigate sa isa pang dokumento o seksyon sa loob ng kasalukuyang pahina - dapat din silang bigyan ng naaangkop na role="button".

Pag-render ng cross-browser

Bilang pinakamahusay na kasanayan, lubos naming inirerekomenda ang paggamit ng <button>elemento hangga't maaari upang matiyak na tumutugma ang cross-browser na pag-render.

Sa iba pang mga bagay, mayroong isang bug sa Firefox <30 na pumipigil sa amin na itakda ang line-heightmga <input>button na batay sa, na nagiging sanhi ng mga ito na hindi eksaktong tumugma sa taas ng iba pang mga pindutan sa Firefox.

Mga pagpipilian

Gamitin ang alinman sa mga available na klase ng button para mabilis na makalikha ng isang naka-istilong button.

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

Naghahatid ng kahulugan sa mga pantulong na teknolohiya

Ang paggamit ng kulay upang magdagdag ng kahulugan sa isang button ay nagbibigay lamang ng isang visual na indikasyon, na hindi ibibigay sa mga gumagamit ng mga pantulong na teknolohiya - tulad ng mga screen reader. Siguraduhin na ang impormasyon na tinutukoy ng kulay ay maaaring halata mula sa nilalaman mismo (ang nakikitang teksto ng button), o kasama sa pamamagitan ng mga alternatibong paraan, tulad ng karagdagang teksto na nakatago sa .sr-onlyklase.

Mga sukat

Gusto mo ba ng mas malaki o mas maliit na mga pindutan? Magdagdag ng .btn-lg, .btn-sm, o .btn-xspara sa mga karagdagang laki.

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

Gumawa ng mga block level na button—yaong sumasaklaw sa buong lapad ng isang magulang—sa pamamagitan ng pagdaragdag ng .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>

Aktibong estado

Ang mga pindutan ay lalabas na pinindot (na may mas madilim na background, mas madilim na hangganan, at inset na anino) kapag aktibo. Para <button>sa mga elemento, ginagawa ito sa pamamagitan ng :active. Para sa<a> sa mga elemento, tapos na ito sa .active. Gayunpaman, maaari mong gamitin .activesa <button>s (at isama ang aria-pressed="true"katangian) kung kailangan mong kopyahin ang aktibong estado sa programmatically.

Elemento ng pindutan

Hindi na kailangang magdagdag:active dahil isa itong pseudo-class, ngunit kung kailangan mong pilitin ang parehong hitsura, magpatuloy at magdagdag ng .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>

Elemento ng anchor

Idagdag ang .activeklase sa<a>button.

Pangunahing link Link

<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg active" role="button">Link</a>

Estadong may kapansanan

Gawing hindi ma-click ang mga button sa pamamagitan ng pag-fade sa kanila pabalik gamit ang opacity.

Elemento ng pindutan

Idagdag ang disabledattribute sa mga <button>button.

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

Cross-browser compatibility

Kung idaragdag mo ang disabledattribute sa isang <button>, ang Internet Explorer 9 at mas mababa ay magre-render ng text na kulay abo na may masamang text-shadow na hindi namin maaayos.

Elemento ng anchor

Idagdag ang .disabledklase sa mga <a>button.

Pangunahing link Link

<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>

Ginagamit namin .disabledbilang isang utility class dito, katulad ng karaniwang .activeklase, kaya walang prefix ang kinakailangan.

Babala sa pagpapaandar ng link

Ginagamit ng klase na ito pointer-events: noneupang subukang i-disable ang functionality ng link ng <a>s, ngunit ang CSS property na iyon ay hindi pa na-standardize at hindi pa ganap na sinusuportahan sa Opera 18 at mas mababa, o sa Internet Explorer 11. Bilang karagdagan, kahit na sa mga browser na sumusuporta sa pointer-events: none, keyboard nananatiling hindi naaapektuhan ang nabigasyon, ibig sabihin ay maa-activate pa rin ng mga nakikitang user ng keyboard at mga user ng mga pantulong na teknolohiya ang mga link na ito. Kaya para maging ligtas, gumamit ng custom na JavaScript upang huwag paganahin ang mga naturang link.

Mga larawang tumutugon

Ang mga imahe sa Bootstrap 3 ay maaaring gawing responsive-friendly sa pamamagitan ng pagdaragdag ng .img-responsiveklase. Nalalapat ito max-width: 100%;, height: auto;at display: block;sa larawan upang mai-scale ito nang maayos sa parent element.

Upang isentro ang mga larawang gumagamit ng .img-responsiveklase, gamitin .center-blocksa halip na .text-center. Tingnan ang seksyon ng mga helper class para sa higit pang mga detalye tungkol sa .center-blockpaggamit.

Mga larawang SVG at IE 8-10

Sa Internet Explorer 8-10, ang mga larawang may SVG .img-responsiveay hindi katimbang. Upang ayusin ito, magdagdag width: 100% \9;kung saan kinakailangan. Hindi ito awtomatikong inilalapat ng Bootstrap dahil nagdudulot ito ng mga komplikasyon sa iba pang mga format ng larawan.

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

Mga hugis ng imahe

Magdagdag ng mga klase sa isang <img>elemento upang madaling mag-istilo ng mga larawan sa anumang proyekto.

Cross-browser compatibility

Tandaan na ang Internet Explorer 8 ay walang suporta para sa mga bilugan na sulok.

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

Mga kulay sa konteksto

Ihatid ang kahulugan sa pamamagitan ng kulay na may kaunting diin sa mga klase ng utility. Ang mga ito ay maaari ding ilapat sa mga link at magdidilim sa pag-hover tulad ng aming mga default na istilo ng link.

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

Nullam id dolor id nibh ultricies vehicula ut id elit.

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

Maecenas sed diam eget risus varius blandit 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>

Pagharap sa pagtitiyak

Minsan hindi mailalapat ang mga klase ng diin dahil sa pagiging tiyak ng ibang tagapili. Sa karamihan ng mga kaso, ang isang sapat na solusyon ay ang pagbalot ng iyong teksto sa isang <span>kasama ng klase.

Naghahatid ng kahulugan sa mga pantulong na teknolohiya

Ang paggamit ng kulay upang magdagdag ng kahulugan ay nagbibigay lamang ng visual na indikasyon, na hindi ibibigay sa mga gumagamit ng mga pantulong na teknolohiya - tulad ng mga screen reader. Siguraduhin na ang impormasyong tinutukoy ng kulay ay maaaring halata mula sa nilalaman mismo (ang mga kulay sa konteksto ay ginagamit lamang upang palakasin ang kahulugan na naroroon na sa teksto/markup), o isinama sa pamamagitan ng mga alternatibong paraan, tulad ng karagdagang teksto na nakatago sa .sr-onlyklase .

Mga background sa konteksto

Katulad ng mga klase ng kulay ng teksto sa konteksto, madaling itakda ang background ng isang elemento sa anumang klase sa konteksto. Ang mga bahagi ng anchor ay magdidilim sa pag-hover, tulad ng mga klase ng teksto.

Nullam id dolor id nibh ultricies vehicula ut id elit.

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

Maecenas sed diam eget risus varius blandit 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>

Pagharap sa pagtitiyak

Minsan hindi mailalapat ang mga klase sa background sa konteksto dahil sa pagiging tiyak ng isa pang tagapili. Sa ilang mga kaso, ang isang sapat na solusyon ay ang pagbalot ng nilalaman ng iyong elemento sa isang <div>gamit ang klase.

Naghahatid ng kahulugan sa mga pantulong na teknolohiya

Tulad ng mga kulay ayon sa konteksto , tiyakin na ang anumang kahulugang ipinaparating sa pamamagitan ng kulay ay inihahatid din sa isang format na hindi puro presentasyon.

Isara ang icon

Gamitin ang generic na icon ng malapit para sa pag-dismiss ng content tulad ng mga modal at alerto.

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

Carets

Gumamit ng mga caret para isaad ang dropdown na functionality at direksyon. Tandaan na ang default na caret ay awtomatikong ibabalik sa mga dropup na menu .

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

Mabilis na lumutang

Lutang ang isang elemento sa kaliwa o kanan na may isang klase. !importantay kasama upang maiwasan ang mga isyu sa pagtitiyak. Ang mga klase ay maaari ding gamitin bilang mga mixin.

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

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

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

Mga bloke ng nilalaman sa gitna

Magtakda ng elemento sa display: blockat igitna sa pamamagitan ng margin. Magagamit bilang isang mixin at klase.

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

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

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

I-clearfix

Madaling i-clear ang floats sa pamamagitan ng pagdaragdag .clearfix sa parent element . Ginagamit ang micro clearfix na pinasikat ni Nicolas Gallagher. Maaari ring gamitin bilang isang mixin.

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

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

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

Nagpapakita at nagtatago ng nilalaman

Pilitin ang isang elemento na ipakita o itago ( kabilang ang para sa mga screen reader ) sa paggamit ng .showat mga .hiddenklase. Ginagamit ng mga klase na ito !importantupang maiwasan ang mga salungatan sa pagtitiyak, tulad ng quick floats . Available lang ang mga ito para sa block level toggling. Maaari rin silang magamit bilang mga mixin.

.hideay available, ngunit hindi ito palaging nakakaapekto sa mga screen reader at hindi na ginagamit simula sa v3.0.1. Gamitin .hiddeno .sr-onlysa halip.

Higit pa rito, .invisiblemaaaring gamitin upang i-toggle lamang ang visibility ng isang elemento, ibig sabihin displayay hindi ito binago at ang elemento ay maaari pa ring makaapekto sa daloy ng dokumento.

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

Ang nilalaman ng screen reader at nabigasyon sa keyboard

Itago ang isang elemento sa lahat ng device maliban sa mga screen reader na may .sr-only. Pagsamahin .sr-onlysa .sr-only-focusableupang ipakita muli ang elemento kapag ito ay nakatutok (hal ng isang keyboard-only na user). Kinakailangan para sa pagsunod sa pinakamahuhusay na kagawian sa pagiging naa -access . Maaari ding gamitin bilang mixins.

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

Pagpapalit ng larawan

Gamitin ang .text-hideklase o mixin upang makatulong na palitan ang nilalaman ng teksto ng isang elemento ng isang larawan sa background.

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

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

Para sa mas mabilis na pag-develop sa mobile, gamitin ang mga utility class na ito para sa pagpapakita at pagtatago ng content ayon sa device sa pamamagitan ng media query. Kasama rin ang mga utility class para sa pag-toggle ng content kapag naka-print.

Subukang gamitin ang mga ito sa limitadong batayan at iwasang gumawa ng ganap na magkakaibang mga bersyon ng parehong site. Sa halip, gamitin ang mga ito upang umakma sa presentasyon ng bawat device.

Magagamit na mga klase

Gumamit ng isa o kumbinasyon ng mga available na klase para sa pag-toggle ng content sa mga breakpoint ng viewport.

	Mga sobrang maliliit na deviceMga Telepono (<768px)	Maliit na deviceMga tablet (≥768px)	Mga medium na deviceMga Desktop (≥992px)	Malaking deviceMga Desktop (≥1200px)
`.visible-xs-*`	Nakikita	Nakatago	Nakatago	Nakatago
`.visible-sm-*`	Nakatago	Nakikita	Nakatago	Nakatago
`.visible-md-*`	Nakatago	Nakatago	Nakikita	Nakatago
`.visible-lg-*`	Nakatago	Nakatago	Nakatago	Nakikita
`.hidden-xs`	Nakatago	Nakikita	Nakikita	Nakikita
`.hidden-sm`	Nakikita	Nakatago	Nakikita	Nakikita
`.hidden-md`	Nakikita	Nakikita	Nakatago	Nakikita
`.hidden-lg`	Nakikita	Nakikita	Nakikita	Nakatago

Mula sa v3.2.0, ang mga .visible-*-*klase para sa bawat breakpoint ay may tatlong variation, isa para sa bawat CSS displayproperty value na nakalista sa ibaba.

Grupo ng mga klase	CSS`display`
`.visible-*-block`	`display: block;`
`.visible-*-inline`	`display: inline;`
`.visible-*-inline-block`	`display: inline-block;`

Kaya, para sa mga extrang maliliit na ( xs) screen halimbawa, ang mga available .visible-*-*na klase ay: .visible-xs-block, .visible-xs-inline, at .visible-xs-inline-block.

Ang mga klase .visible-xs, .visible-sm, .visible-md, at .visible-lgumiiral din, ngunit hindi na ginagamit simula sa v3.2.0 . Ang mga ito ay tinatayang katumbas .visible-*-blockng , maliban sa mga karagdagang espesyal na kaso para sa mga <table>elementong nauugnay sa pag-toggle.

Mga klase sa pag-print

Katulad ng mga regular na tumutugon na klase, gamitin ang mga ito para sa pag-toggle ng nilalaman para sa pag-print.

Mga klase	Browser	Print
`.visible-print-block` `.visible-print-inline` `.visible-print-inline-block`	Nakatago	Nakikita
`.hidden-print`	Nakikita	Nakatago

.visible-printUmiiral din ang klase ngunit hindi na ginagamit noong v3.2.0. Ito ay tinatayang katumbas .visible-print-blockng , maliban sa mga karagdagang espesyal na kaso para sa <table>mga elementong nauugnay.

Mga kaso ng pagsubok

Baguhin ang laki ng iyong browser o mag-load sa iba't ibang device upang subukan ang mga tumutugon na klase ng utility.

Nakikita sa...

Isinasaad ng mga berdeng checkmark na nakikita ang elemento sa iyong kasalukuyang viewport.

Sobrang liit ✔ Nakikita sa x-small

Maliit ✔ Nakikita sa maliit

Katamtaman ✔ Nakikita sa medium

Malaki ✔ Nakikita sa malaki

Extra maliit at maliit ✔ Nakikita sa x-maliit at maliit

Katamtaman at malaki ✔ Nakikita sa katamtaman at malaki

Sobrang maliit at katamtaman ✔ Nakikita sa x-small at medium

Maliit at malaki ✔ Nakikita sa maliit at malaki

Extra maliit at malaki ✔ Nakikita sa x-maliit at malaki

Maliit at katamtaman ✔ Nakikita sa maliit at katamtaman

Nakatago sa...

Dito, ipinapahiwatig din ng mga berdeng checkmark na nakatago ang elemento sa iyong kasalukuyang viewport.

Sobrang liit ✔ Nakatago sa x-small

Maliit ✔ Nakatago sa maliit

Katamtaman ✔ Nakatago sa medium

Malaki ✔ Nakatago sa malaki

Extra maliit at maliit ✔ Nakatago sa x-maliit at maliit

Katamtaman at malaki ✔ Nakatago sa katamtaman at malaki

Sobrang maliit at katamtaman ✔ Nakatago sa x-small at medium

Maliit at malaki ✔ Nakatago sa maliit at malaki

Extra maliit at malaki ✔ Nakatago sa x-maliit at malaki

Maliit at katamtaman ✔ Nakatago sa maliit at katamtaman

Ang CSS ng Bootstrap ay binuo sa Less, isang preprocessor na may karagdagang functionality tulad ng mga variable, mixin, at function para sa pag-compile ng CSS. Ang mga gustong gumamit ng source Mas kaunting file sa halip na ang aming pinagsama-samang CSS file ay maaaring gumamit ng maraming variable at mixin na ginagamit namin sa buong framework.

Ang mga variable at mix ng grid ay sakop sa seksyong Grid system .

Kino-compile ang Bootstrap

Maaaring gamitin ang Bootstrap sa hindi bababa sa dalawang paraan: gamit ang pinagsama-samang CSS o gamit ang source Mas kaunting mga file. Upang i-compile ang Mas kaunting mga file, kumonsulta sa seksyong Pagsisimula para sa kung paano i-setup ang iyong development environment upang patakbuhin ang mga kinakailangang command.

Maaaring gumana sa Bootstrap ang mga tool sa compilation ng third party, ngunit hindi sinusuportahan ng aming pangunahing team ang mga ito.

Mga variable

Ginagamit ang mga variable sa buong proyekto bilang isang paraan para i-centralize at ibahagi ang mga karaniwang ginagamit na value tulad ng mga kulay, spacing, o mga stack ng font. Para sa kumpletong breakdown, pakitingnan ang Customizer .

Mga kulay

Madaling gamitin ang dalawang scheme ng kulay: grayscale at semantic. Ang mga grayscale na kulay ay nagbibigay ng mabilis na access sa mga karaniwang ginagamit na kulay ng itim habang ang semantiko ay kinabibilangan ng iba't ibang kulay na itinalaga sa mga makabuluhang halaga sa konteksto.

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

Gamitin ang alinman sa mga variable na ito ng kulay kung ano ang mga ito o italaga ang mga ito sa mas makabuluhang mga variable para sa iyong proyekto.

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

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

plantsa

Ilang mga variable para sa mabilis na pag-customize ng mga pangunahing elemento ng skeleton ng iyong site.

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

Mga link

Madaling i-istilo ang iyong mga link gamit ang tamang kulay na may isang halaga lamang.

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

Tandaan na ang @link-hover-colorgumagamit ng isang function, isa pang kahanga-hangang tool mula sa Less, upang awtomatikong gumawa ng tamang kulay ng hover. Maaari mong gamitin ang darken, lighten, saturate, at desaturate.

Typography

Madaling itakda ang iyong typeface, laki ng text, nangungunang, at higit pa gamit ang ilang mabilis na variable. Ginagamit din ng Bootstrap ang mga ito para makapagbigay ng madaling pagsasama-sama ng typographic.

@font-family-sans-serif:  "Helvetica Neue", Helvetica, Arial, sans-serif;
@font-family-serif:       Georgia, "Times New Roman", Times, serif;
@font-family-monospace:   Menlo, Monaco, Consolas, "Courier New", monospace;
@font-family-base:        @font-family-sans-serif;

@font-size-base:          14px;
@font-size-large:         ceil((@font-size-base * 1.25)); // ~18px
@font-size-small:         ceil((@font-size-base * 0.85)); // ~12px

@font-size-h1:            floor((@font-size-base * 2.6)); // ~36px
@font-size-h2:            floor((@font-size-base * 2.15)); // ~30px
@font-size-h3:            ceil((@font-size-base * 1.7)); // ~24px
@font-size-h4:            ceil((@font-size-base * 1.25)); // ~18px
@font-size-h5:            @font-size-base;
@font-size-h6:            ceil((@font-size-base * 0.85)); // ~12px

@line-height-base:        1.428571429; // 20/14
@line-height-computed:    floor((@font-size-base * @line-height-base)); // ~20px

@headings-font-family:    inherit;
@headings-font-weight:    500;
@headings-line-height:    1.1;
@headings-color:          inherit;

Mga icon

Dalawang mabilis na variable para sa pag-customize ng lokasyon at filename ng iyong mga icon.

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

Mga bahagi

Ang mga bahagi sa buong Bootstrap ay gumagamit ng ilang default na variable para sa pagtatakda ng mga karaniwang halaga. Narito ang pinakakaraniwang ginagamit.

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

Mga mix ng vendor

Ang mga mixin ng vendor ay mga mixin upang tumulong sa pagsuporta sa maraming browser sa pamamagitan ng pagsasama ng lahat ng nauugnay na prefix ng vendor sa iyong pinagsama-samang CSS.

Sukat ng kahon

I-reset ang modelo ng kahon ng iyong mga bahagi gamit ang isang mixin. Para sa konteksto, tingnan ang kapaki-pakinabang na artikulong ito mula sa Mozilla .

Ang mixin ay hindi na ginagamit simula sa v3.2.0, kasama ang pagpapakilala ng Autoprefixer. Upang mapanatili ang backwards-compatibility, patuloy na gagamitin ng Bootstrap ang mixin sa loob hanggang sa Bootstrap v4.

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

Mga bilugan na sulok

Ngayon, sinusuportahan ng lahat ng modernong browser ang hindi prefix na border-radiusproperty. Dahil dito, walang .border-radius()mixin, ngunit ang Bootstrap ay may kasamang mga shortcut para sa mabilis na pag-ikot ng dalawang sulok sa isang partikular na bahagi ng isang bagay.

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

Mga anino ng Kahon (Drop).

Kung ang iyong target na audience ay gumagamit ng pinakabago at pinakamahusay na mga browser at device, siguraduhing gamitin lang ang box-shadowproperty nang mag-isa. Kung kailangan mo ng suporta para sa mas lumang Android (pre-v4) at iOS device (pre-iOS 5), gamitin ang hindi na ginagamit na mixin para kunin ang kinakailangang -webkitprefix.

Hindi na ginagamit ang mixin noong v3.1.0, dahil hindi opisyal na sinusuportahan ng Bootstrap ang mga lumang platform na hindi sumusuporta sa karaniwang property. Upang mapanatili ang backwards-compatibility, patuloy na gagamitin ng Bootstrap ang mixin sa loob hanggang sa Bootstrap v4.

Siguraduhing gumamit rgba()ng mga kulay sa mga anino ng iyong kahon upang magkatugma ang mga ito nang walang putol hangga't maaari sa mga background.

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

Mga transition

Maramihang mga mix para sa flexibility. Itakda ang lahat ng impormasyon ng transition sa isa, o tumukoy ng hiwalay na pagkaantala at tagal kung kinakailangan.

Ang mga mixin ay hindi na ginagamit simula sa v3.2.0, kasama ang pagpapakilala ng Autoprefixer. Para mapanatili ang backwards-compatibility, patuloy na gagamitin ng Bootstrap ang mga mixin sa loob hanggang sa 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;
}

Mga pagbabago

Iikot, sukat, isalin (ilipat), o i-skew ang anumang bagay.

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

Mga animation

Isang solong mixin para sa paggamit ng lahat ng mga katangian ng animation ng CSS3 sa isang deklarasyon at iba pang mixin para sa mga indibidwal na katangian.

.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

Itakda ang opacity para sa lahat ng browser at magbigay ng filterfallback para sa IE8.

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

Text ng placeholder

Magbigay ng konteksto para sa mga kontrol ng form sa loob ng bawat field.

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

Mga hanay

Bumuo ng mga column sa pamamagitan ng CSS sa loob ng isang elemento.

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

Mga gradient

Madaling gawing background gradient ang alinmang dalawang kulay. Maging mas advanced at magtakda ng direksyon, gumamit ng tatlong kulay, o gumamit ng radial gradient. Sa isang solong mixin makukuha mo ang lahat ng mga prefix na syntax na kakailanganin mo.

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

Maaari mo ring tukuyin ang anggulo ng isang karaniwang dalawang kulay, linear gradient:

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

Kung kailangan mo ng barber-stripe style gradient, madali din iyon. Tumukoy lamang ng isang kulay at mag-o-overlay kami ng isang translucent na puting guhit.

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

Itaas ang ante at gumamit ng tatlong kulay sa halip. Itakda ang unang kulay, ang pangalawang kulay, ang paghinto ng kulay ng pangalawang kulay (isang porsyento na halaga tulad ng 25%), at ang pangatlong kulay sa mga mix na ito:

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

Heads up! Kung sakaling kailanganin mong mag-alis ng gradient, tiyaking alisin ang anumang partikular na IE na filtermaaaring naidagdag mo. Magagawa mo iyon sa pamamagitan ng paggamit ng .reset-filter()mixin sa tabi background-image: none;.

Mga mix ng utility

Ang mga utility mix ay mga mixin na pinagsasama-sama ang hindi nauugnay na mga katangian ng CSS upang makamit ang isang partikular na layunin o gawain.

I-clearfix

Kalimutan ang pagdaragdag class="clearfix"sa anumang elemento at sa halip ay idagdag ang .clearfix()mixin kung saan naaangkop. Gumagamit ng micro clearfix mula kay Nicolas Gallagher .

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

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

Pahalang na pagsentro

Mabilis na isentro ang anumang elemento sa loob ng magulang nito. Nangangailangan widtho max-widthitakda.

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

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

Mga katulong sa pagpapalaki

Tukuyin ang mga sukat ng isang bagay nang mas madali.

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

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

Resizable textareas

Madaling i-configure ang mga pagpipilian sa pagbabago ng laki para sa anumang textarea, o anumang iba pang elemento. Default sa normal na pag-uugali ng browser ( both).

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

Pinutol ang teksto

Madaling putulin ang text gamit ang isang ellipsis na may iisang mixin. Nangangailangan ng elemento na maging blocko inline-blockantas.

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

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

Mga larawan ng retina

Tukuyin ang dalawang path ng larawan at ang @1x na mga dimensyon ng larawan, at magbibigay ang Bootstrap ng @2x na query sa media. Kung marami kang ihahatid na larawan, isaalang-alang ang pagsusulat ng iyong retina image CSS nang manu-mano sa isang query sa media.

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

Habang ang Bootstrap ay binuo sa Less, mayroon din itong opisyal na Sass port . Pinapanatili namin ito sa isang hiwalay na imbakan ng GitHub at pinangangasiwaan ang mga update gamit ang isang script ng conversion.

Ano ang kasama

Dahil ang Sass port ay may hiwalay na repo at nagsisilbi sa isang bahagyang naiibang madla, ang mga nilalaman ng proyekto ay lubos na naiiba mula sa pangunahing proyekto ng Bootstrap. Tinitiyak nito na ang Sass port ay tugma sa pinakamaraming Sass-based na system hangga't maaari.

Daan	Paglalarawan
`lib/`	Ruby gem code (Sass configuration, Rails at Compass integrations)
`tasks/`	Mga script ng converter (pag-upstream Mas kaunti sa Sass)
`test/`	Mga pagsusulit sa compilation
`templates/`	Manifest ng pakete ng compass
`vendor/assets/`	Sass, JavaScript, at mga file ng font
`Rakefile`	Mga panloob na gawain, tulad ng rake at convert

Bisitahin ang GitHub repository ng Sass port upang makita ang mga file na ito sa pagkilos.

Pag-install

Para sa impormasyon kung paano i-install at gamitin ang Bootstrap para sa Sass, kumonsulta sa GitHub repository readme . Ito ang pinaka-napapapanahon na mapagkukunan at may kasamang impormasyon para sa paggamit sa mga proyekto ng Rails, Compass, at karaniwang Sass.

Bootstrap para kay Sass

CSS

Pangkalahatang-ideya

HTML5 doctype

Mobile muna

Typography at mga link

Normalize.css

Mga lalagyan

Grid system

Panimula

Mga query sa media

Mga pagpipilian sa grid

Halimbawa: Stacked-to-horizontal

Halimbawa: Lalagyan ng likido

Halimbawa: Mobile at desktop

Halimbawa: Mobile, tablet, desktop

Halimbawa: Column wrapping

Nagre-reset ng tumutugong column

Pag-offset ng mga column

Mga nesting column

Pag-order ng column

Mas kaunting mixin at variable

Mga variable

Mixins

Halimbawa ng paggamit

Typography

Mga pamagat

h1. Bootstrap na heading

h2. Bootstrap na heading

h3. Bootstrap na heading

h4. Bootstrap na heading

h5. Bootstrap na heading

h6. Bootstrap na heading

h1. Bootstrap heading Pangalawang text

h2. Bootstrap heading Pangalawang text

h3. Bootstrap heading Pangalawang text

h4. Bootstrap heading Pangalawang text

h5. Bootstrap heading Pangalawang text

h6. Bootstrap heading Pangalawang text

Kopya ng katawan

Lead body copy

Itinayo gamit ang Mas Kaunti

Mga elemento ng inline na teksto

May markang teksto

Tinanggal ang text

Strikethrough text

Ipinasok ang teksto

May salungguhit na teksto

Maliit na text

Matapang

Italiko

Mga kahaliling elemento

Mga klase sa pagkakahanay

Mga klase ng pagbabago

Mga pagdadaglat

Pangunahing pagdadaglat

Inisyalismo

Mga address

Blockquotes

Default na blockquote

Mga pagpipilian sa blockquote

Pagpapangalan ng pinagmulan

Mga kahaliling display

Mga listahan

Hindi nakaayos

Inutusan

Walang istilo

Nasa linya

Paglalarawan

Pahalang na paglalarawan

Awtomatikong pagputol

Code

Nasa linya

input ng user

Pangunahing bloke

Mga variable

Sample na output

Mga mesa

Pangunahing halimbawa

Mga guhit na hilera

Cross-browser compatibility

Demo `:focus`state

Caveat tungkol sa pag-andar ng link ng`<a>`

Opsyonal na mga icon na may mga nakatagong `.sr-only`label