Kuhaa ang ubos sa mga importanteng bahin sa imprastraktura sa Bootstrap, lakip ang among pamaagi sa mas maayo, mas paspas, mas lig-on nga web development.

HTML5 nga doctype

Ang Bootstrap naggamit sa pipila ka mga elemento sa HTML ug CSS nga mga kabtangan nga nagkinahanglan sa paggamit sa HTML5 doctype. Ilakip kini sa sinugdanan sa tanan nimong mga proyekto.

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

Mobile una

Uban sa Bootstrap 2, gidugang namo ang opsyonal nga mobile friendly nga mga estilo para sa mga importanteng aspeto sa framework. Uban sa Bootstrap 3, among gisulat pag-usab ang proyekto aron mahimong mobile friendly gikan sa sinugdanan. Imbis nga idugang ang mga opsyonal nga mga istilo sa mobile, kini giluto mismo sa kinauyokan. Sa tinuud, ang Bootstrap mao ang mobile una . Ang una nga mga istilo sa mobile makit-an sa tibuuk nga librarya imbes sa lainlaing mga file.

Aron masiguro ang husto nga paghubad ug pag-zoom sa paghikap, idugang ang viewport meta tag sa imong <head>.

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

Mahimo nimong i-disable ang mga kapabilidad sa pag-zoom sa mga mobile device pinaagi sa pagdugang user-scalable=nosa viewport meta tag. Gipugngan niini ang pag-zoom, nagpasabut nga ang mga tiggamit makahimo ra sa pag-scroll, ug moresulta sa imong site nga mobati nga medyo sama sa usa ka lumad nga aplikasyon. Sa kinatibuk-an, wala namo girekomendar kini sa matag site, busa pag-amping!

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

Typography ug mga link

Ang Bootstrap nagtakda sa sukaranan nga global nga pagpakita, typography, ug mga istilo sa link. Sa partikular, kami:

Ibutang background-color: #fff;sabody
Gamita ang @font-family-base, @font-size-base, ug @line-height-basemga attribute isip among typographic base
Itakda ang global nga kolor sa link pinaagi sa @link-colorug i-apply ang link underlines lamang sa:hover

Kini nga mga estilo makita sa sulod scaffolding.less.

Normalize.css

Para sa gipaayo nga cross-browser rendering, among gigamit ang Normalize.css , usa ka proyekto ni Nicolas Gallagher ug Jonathan Neal .

Mga sudlanan

Ang Bootstrap nanginahanglan usa ka sulud nga elemento aron maputos ang mga sulud sa site ug ibutang ang among sistema sa grid. Mahimo kang mopili og usa sa duha ka sudlanan nga gamiton sa imong mga proyekto. Timan-i nga, tungod sa paddingug daghan pa, walay sudlanan nga nestable.

Gigamit .containeralang sa usa ka responsive nga gitakdang gilapdon nga sudlanan.

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

Gamita .container-fluidalang sa usa ka bug-os nga gilapdon nga sudlanan, nga nagsangkad sa tibuok gilapdon sa imong viewport.

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

Ang Bootstrap naglakip sa usa ka responsive, mobile first fluid grid system nga haom nga motimbang hangtod sa 12 ka kolum samtang ang device o viewport modako. Naglakip kini sa mga predefined nga mga klase alang sa sayon nga mga kapilian sa layout, ingon man usab sa gamhanan nga mga mixin alang sa pagmugna og mas daghang semantic nga mga layout .

Pasiuna

Ang mga sistema sa grid gigamit alang sa paghimo sa mga layout sa panid pinaagi sa usa ka serye sa mga laray ug mga kolum nga nagbutang sa imong sulud. Ania kung giunsa ang Bootstrap grid system nagtrabaho:

Ang mga laray kinahanglang ibutang sulod sa usa ka .container(fixed-width) o .container-fluid(full-width) para sa saktong alignment ug padding.
Gamita ang mga laray sa paghimog pinahigda nga mga grupo sa mga kolum.
Ang sulud kinahanglan ibutang sa sulod sa mga kolum, ug ang mga kolum lamang ang mahimong mga anak sa mga laray.
Gitakda nang daan nga mga klase sa grid sama .rowug .col-xs-4magamit alang sa dali nga paghimo sa mga layout sa grid. Ang dili kaayo mga mixin mahimo usab nga magamit alang sa daghang mga semantiko nga mga layout.
Ang mga kolum naghimo og mga kanal (mga kal-ang tali sa sulod sa kolum) pinaagi sa padding. Kana nga padding gi-offset sa mga laray alang sa una ug katapusan nga kolum pinaagi sa negatibo nga margin sa .rows.
Ang negatibo nga margin mao ang hinungdan ngano nga ang mga pananglitan sa ubos kay outdented. Kini aron ang sulud sulod sa mga kolum sa grid gilinya sa dili sulud nga sulud.
Ang mga kolum sa grid gihimo pinaagi sa pagpiho sa gidaghanon sa dose nga magamit nga mga kolum nga gusto nimong lugwayan. Pananglitan, tulo ka managsama nga kolum ang mogamit og tulo ka .col-xs-4.
Kung labaw pa sa 12 ka mga kolum ang ibutang sa sulod sa usa ka laray, ang matag grupo sa dugang nga mga kolum, isip usa ka yunit, ibutang sa usa ka bag-ong linya.
Ang mga klase sa grid magamit sa mga aparato nga adunay gilapdon sa screen nga mas dako o parehas sa mga gidak-on sa breakpoint, ug gi-override ang mga klase sa grid nga gipunting sa gagmay nga mga aparato. Busa, pananglitan ang pag-apply sa bisan unsang .col-md-*klase sa usa ka elemento dili lang makaapekto sa pag-istilo niini sa mga medium device apan sa mga dagkong device usab kung wala ang .col-lg-*klase.

Tan-awa ang mga pananglitan sa paggamit niini nga mga prinsipyo sa imong code.

Mga pangutana sa media

Gigamit namo ang mosunod nga mga pangutana sa media sa among Gamay nga mga file aron mahimo ang mga importanteng breakpoint sa among 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) { ... }

Usahay among gipalapdan kini nga mga pangutana sa media aron maapil ang usa ka max-widthlimitahan ang CSS sa mas pig-ot nga set sa mga aparato.

@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 kapilian sa grid

Tan-awa kung giunsa ang mga aspeto sa Bootstrap grid system nga nagtrabaho sa daghang mga aparato nga adunay usa ka magamit nga lamesa.

	Dugang nga gagmay nga mga himan Mga Telepono (<768px)	Gamay nga mga gamit Mga tablet (≥768px)	Medium nga mga device Mga Desktop (≥992px)	Dagko nga mga device Mga Desktop (≥1200px)
Paggawi sa grid	Horizontal sa tanang panahon	Nahugno aron magsugod, pinahigda sa ibabaw sa mga breakpoint
Lapad sa sudlanan	Wala (awtomatik)	750px	970px	1170 px
Prefix sa klase	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`
# sa mga kolum	12
Lapad sa kolum	awto	~62px	~81px	~97px
Lapad sa kanal	30px (15px sa matag kilid sa kolum)
Nestable	Oo
Mga offset	Oo
Pag-order sa kolum	Oo

Pananglitan: Stacked-to-horizontal

Gamit ang usa ka hugpong sa .col-md-*mga klase sa grid, makahimo ka og usa ka batakang sistema sa grid nga magsugod sa stacked sa mga mobile device ug tablet device (ang sobra nga gamay ngadto sa gamay nga range) sa dili pa mahimong horizontal sa desktop (medium) nga mga device. Ibutang ang mga kolum sa grid sa bisan unsang .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>

Pananglitan: Ang sudlanan sa likido

Himua ang bisan unsang fixed-width grid layout ngadto sa full-width nga layout pinaagi sa pag-ilis sa imong pinakagawas .containerngadto sa .container-fluid.

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

Pananglitan: Mobile ug desktop

Dili gusto nga ang imong mga kolum mag-stack sa gagmay nga mga aparato? Gamita ang sobra nga gamay ug medium nga mga klase sa grid sa aparato pinaagi sa pagdugang .col-xs-* .col-md-*sa imong mga kolum. Tan-awa ang panig-ingnan sa ubos alang sa usa ka mas maayo nga ideya kung giunsa kini tanan molihok.

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

Pananglitan: Mobile, tablet, desktop

Pagtukod sa miaging pananglitan pinaagi sa paghimo og labi pa nga dinamiko ug kusgan nga mga layout nga adunay mga .col-sm-*klase sa 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>

Pananglitan: Pagputos sa kolum

Kung labaw pa sa 12 ka mga kolum ang ibutang sa sulod sa usa ka laray, ang matag grupo sa dugang nga mga kolum, isip usa ka yunit, ibutang sa usa ka bag-ong linya.

.col-xs-9

.col-xs-4
Sukad sa 9 + 4 = 13 > 12, kining 4-kolum nga gilapdon nga div maputos sa bag-ong linya isip usa ka magkadugtong nga yunit.

.col-xs-6
Ang sunod nga mga kolum nagpadayon sa bag-ong 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>

Ang responsive nga column resets

Uban sa upat ka hut-ong sa mga grids nga anaa kinahanglan nga modagan ka sa mga isyu diin, sa pipila ka mga breakpoint, ang imong mga kolum dili klaro nga husto tungod kay ang usa mas taas kay sa lain. Aron ayohon kana, gamita ang kombinasyon sa a .clearfixug sa among responsive utility classes .

.col-xs-6 .col-sm-3 Usba ang gidak-on sa
imong viewport o tan-awa kini sa imong telepono alang sa pananglitan.

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

Agi og dugang sa paghawan sa kolum sa mga responsive nga breakpoints, mahimong kinahanglan nimo nga i- reset ang mga offset, pagduso, o pagbira . Tan-awa kini sa aksyon sa pananglitan sa 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 sa mga kolum

Ibalhin ang mga kolum sa tuo gamit ang .col-md-offset-*mga klase. Kini nga mga klase nagdugang sa wala nga margin sa usa ka kolum pinaagi sa *mga kolum. Pananglitan, .col-md-offset-4naglihok .col-md-4sa upat ka mga kolum.

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

Mahimo usab nimo nga i-override ang mga offset gikan sa ubos nga mga tier sa grid nga adunay .col-*-offset-0mga klase.

<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 kolum nga nagsalag

Aron ibutang ang imong sulod sa default grid, pagdugang og bag-o .rowug set sa .col-sm-*mga column sulod sa kasamtangan nga .col-sm-*column. Ang mga nested row kinahanglang maglakip ug set sa mga column nga modugang hangtod sa 12 o mas gamay pa (dili kinahanglan nga gamiton nimo ang tanang 12 ka available nga 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 sa kolum

Dali nga usbon ang han-ay sa among mga built-in nga grid column nga adunay .col-md-push-*mga .col-md-pull-*klase sa 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>

Dili kaayo mga mixin ug mga variable

Dugang pa sa mga prebuilt nga mga klase sa grid para sa paspas nga mga layout, ang Bootstrap naglakip sa Gamay nga mga variable ug mga mix para sa dali nga paghimo sa imong kaugalingon nga yano, semantiko nga mga layout.

Mga variable

Ang mga variable nagtino sa gidaghanon sa mga kolum, ang gilapdon sa gutter, ug ang punto sa pangutana sa media diin magsugod ang mga naglutaw nga mga kolum. Gigamit namo kini aron makamugna ang mga predefined grid classes nga nadokumento sa ibabaw, ingon man para sa custom mixins nga gilista sa ubos.

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

Mixins

Ang mga mixin gigamit kauban ang mga variable sa grid aron makamugna og semantic CSS alang sa indibidwal nga mga kolum sa 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));
  }
}

Pananglitan sa paggamit

Mahimo nimong usbon ang mga variable sa imong kaugalingon nga naandan nga mga kantidad, o gamita lang ang mga mixin sa ilang mga default nga kantidad. Ania ang usa ka pananglitan sa paggamit sa default nga mga setting aron makahimo og duha ka kolum nga layout nga adunay gintang tali.

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

Tanang HTML nga ulohan, <h1>pinaagi sa <h6>, anaa. .h1pinaagi sa .h6mga klase magamit usab, kay kung gusto nimo nga ipares ang estilo sa font sa usa ka ulohan apan gusto gihapon nimo nga ang imong teksto ipakita sa linya.

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

Paghimo og mas gaan, ikaduha nga teksto sa bisan unsang ulohan nga adunay generic nga <small>tag o ang .smallklase.

h1. Bootstrap nga ulohan Ikaduhang teksto

h2. Bootstrap nga ulohan Ikaduhang teksto

h3. Bootstrap nga ulohan Ikaduhang teksto

h4. Bootstrap nga ulohan Ikaduhang teksto

h5. Bootstrap nga ulohan Ikaduhang teksto

h6. Bootstrap nga ulohan Ikaduhang teksto

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

Ang global default sa Bootstrap font-sizemao ang 14px , nga line-heightadunay 1.428 . Kini gipadapat sa <body>ug sa tanang paragraph. Dugang pa, <p>(mga paragraph) makadawat sa ubos nga margin sa katunga sa ilang gikalkula nga gitas-on sa linya (10px sa 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 ug eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

<p>...</p>

Panguna nga kopya sa lawas

Paghimo og usa ka parapo nga talagsaon pinaagi sa pagdugang .lead.

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

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

Gitukod uban sa Gamay

Ang typographic scale gibase sa duha ka Less variables sa variables.less : @font-size-baseug @line-height-base. Ang una mao ang base nga gidak-on sa font nga gigamit sa tibuok ug ang ikaduha mao ang base-line-gitas-on. Gigamit namo ang mga variable ug pipila ka yano nga matematika aron mahimo ang mga margin, padding, ug taas nga linya sa tanan namon nga tipo ug daghan pa. Ipasibo kini ug ang Bootstrap mopahiangay.

Inline nga mga elemento sa teksto

Gimarkahan nga teksto

Alang sa pag-highlight sa usa ka run of text tungod sa kalambigitan niini sa laing konteksto, gamita ang <mark>tag.

Mahimo nimong gamiton ang marka nga tag sahighlighttext.

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

Gitangtang nga teksto

Alang sa pagpakita sa mga bloke sa teksto nga natangtang gamita ang <del>tag.

~~Kini nga linya sa teksto gituyo nga isipon nga natangtang nga teksto.~~

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

Strikethrough nga teksto

Para sa pagpaila sa mga bloke sa teksto nga wala nay kalabotan gamita ang <s>tag.

~~Kini nga linya sa teksto gituyo nga isipon nga dili na tukma.~~

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

Gisulod nga teksto

Alang sa pagpakita sa mga pagdugang sa dokumento gamita ang <ins>tag.

Kini nga linya sa teksto gituyo nga isipon nga dugang sa dokumento.

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

Gi-underline nga teksto

Aron ma-underline ang teksto gamita ang <u>tag.

Kini nga linya sa teksto maghubad ingon nga adunay linya

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

Gamita ang default nga emphasis nga tag sa HTML nga adunay gaan nga mga estilo.

Gamay nga teksto

Para sa de-emphasizing inline o blocks sa text, gamita ang <small>tag para i-set ang text sa 85% ang gidak-on sa ginikanan. Ang mga elemento sa ulohan makadawat sa ilang kaugalingon font-sizealang sa mga nested <small>nga elemento.

Mahimo nimong gamiton ang usa ka inline nga elemento nga .smallpuli sa bisan unsang <small>.

Kini nga linya sa teksto gituyo nga isipon nga maayong pag-imprinta.

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

Maisogon

Alang sa paghatag og gibug-aton sa usa ka snippet sa teksto nga adunay mas bug-at nga font-weight.

Ang mosunod nga snippet sa teksto gihubad nga bold nga teksto .

<strong>rendered as bold text</strong>

Mga italiko

Alang sa paghatag gibug-aton sa usa ka snippet sa teksto nga adunay mga italiko.

Ang mosunod nga snippet sa teksto gihubad ingon nga italicized nga teksto .

<em>rendered as italicized text</em>

Mga alternatibo nga elemento

Mobati nga gawasnon sa paggamit <b>ug <i>sa HTML5. <b>gituyo aron ipasiugda ang mga pulong o hugpong sa mga pulong nga wala maghatag dugang nga importansya samtang <i>kadaghanan alang sa tingog, teknikal nga mga termino, ug uban pa.

Mga klase sa pag-align

Dali nga i-realign ang teksto sa mga sangkap nga adunay mga klase sa pag-align sa teksto.

Nakalinya sa wala nga teksto.

Gi-align sa tunga nga teksto.

Gi-align sa tuo nga teksto.

Gipakamatarong nga teksto.

Walay wrap 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 sa pagbag-o

Pagbag-o sa teksto sa mga sangkap nga adunay mga klase sa pag-capital sa teksto.

Gigamay nga teksto.

Uppercase nga teksto.

Gi-capital nga teksto.

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

Mga minubo

Gi-istilo nga pagpatuman sa <abbr>elemento sa HTML para sa mga abbreviation ug acronym aron ipakita ang gipalapdan nga bersyon sa hover. Ang mga pinamubo nga adunay usa ka titleattribute adunay usa ka light dotted bottom border ug usa ka help cursor sa hover, nga naghatag og dugang nga konteksto sa hover ug sa mga tiggamit sa assistive nga mga teknolohiya.

Basic abbreviation

Ang minubo sa pulong nga attribute kay attr .

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

Inisyalismo

Idugang .initialismsa abbreviation para sa mas gamay nga font-size.

Ang HTML mao ang labing maayo nga butang sukad sa hiniwa nga tinapay.

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

Mga adres

Ipresentar ang impormasyon sa pagkontak alang sa labing duol nga katigulangan o sa tibuok lawas sa trabaho. Ipreserbar ang pag-format pinaagi sa pagtapos sa tanang linya sa <br>.

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

Tibuok Ngalan
[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

Alang sa pagkutlo sa mga bloke sa sulod gikan sa laing tinubdan sulod sa imong dokumento.

Default nga blockquote

Ibutang <blockquote>ang bisan unsang HTML ingon nga kinutlo. Alang sa tul-id nga mga kinutlo, among girekomendar ang usa ka <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 kapilian sa blockquote

Mga kausaban sa estilo ug sulod alang sa yanong mga kausaban sa usa ka sumbanan <blockquote>.

Pagngalan ug tinubdan

Idugang ang a <footer>para sa pag-ila sa tinubdan. I-wrap ang ngalan sa source work sa <cite>.

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

Usa ka tawo nga bantog sa Source Title

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

Kapuli nga mga pagpakita

Idugang .blockquote-reversealang sa usa ka blockquote nga adunay sulud nga nahiangay sa tuo.

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

Usa ka tawo nga bantog sa Source Title

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

Mga lista

Wala ma-order

Usa ka lista sa mga butang diin ang han-ay dili klaro nga hinungdanon.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem ug masa
Facilisis sa pretium nisl aliquet
Nulla volutpat aliquam velit
- Espesye sa tanom nga bulak ang Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat ug
Faucibus porta lacus fringilla vel
Aenean naglingkod amet erat nunc
Eget porttitor lorem

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

Nagmando

Usa ka lista sa mga butang diin ang han - ay hinungdanon kaayo.

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

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

Dili istilo

Kuhaa ang default list-styleug wala nga margin sa mga butang sa lista (mga bata lang). Magamit lang kini sa mga butang nga gilista dayon sa mga bata , nagpasabut nga kinahanglan nimo nga idugang ang klase alang sa bisan unsang mga salag nga mga lista.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem ug masa
Facilisis sa pretium nisl aliquet
Nulla volutpat aliquam velit
- Espesye sa tanom nga bulak ang Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat ug
Faucibus porta lacus fringilla vel
Aenean naglingkod amet erat nunc
Eget porttitor lorem

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

Inline

Ibutang ang tanan nga mga butang sa lista sa usa ka linya nga adunay display: inline-block;gamay nga padding.

Lorem ipsum
Phasellus iaculis
Nulla volutpat

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

Deskripsyon

Usa ka lista sa mga termino uban sa ilang kaubang mga paghulagway.

Mga lista sa paghulagway: Ang usa ka lista sa paghulagway perpekto alang sa pagtino sa mga termino.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.; Donec id elit non mi porta gravida ug eget metus.
Malesuada porta: Etiam porta sem malesuada magna mollis euismod.

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

Horizontal nga paghulagway

Paghimo mga termino ug mga paghubit sa <dl>linya sa kilid. Nagsugod sa stacked sama sa default <dl>s, apan kung molapad ang navbar, buhata usab kini.

Mga lista sa paghulagway: Ang usa ka lista sa paghulagway perpekto alang sa pagtino sa mga termino.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.; Donec id elit non mi porta gravida ug eget metus.
Malesuada porta: Etiam porta sem malesuada magna mollis euismod.
Espesye sa tanom nga bulak ang 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 pinahigda nga mga lista sa deskripsyon moputol sa mga termino nga taas kaayo aron mohaum sa wala nga kolum nga adunay text-overflow. Sa mas pig-ot nga viewports, sila mag-ilis sa default stacked layout.

Inline

I-wrap ang inline nga mga snippet sa code gamit ang <code>.

Pananglitan, <section>kinahanglan nga giputos ingon inline.

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

input sa user

Gamita ang <kbd>aron ipakita ang input nga kasagarang gisulod pinaagi sa keyboard.

Aron mabalhin ang mga direktoryo, i-type cdang gisundan sa ngalan sa direktoryo.
Aron ma-edit ang mga setting, pindota ctrl + ,

To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>

Basic block

Gigamit <pre>alang sa daghang linya sa code. Siguruha nga makalikay sa bisan unsang mga anggulo nga bracket sa code alang sa husto nga paghubad.

<p>Sample nga teksto dinhi...</p>

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

Mahimo nimong idugang ang .pre-scrollableklase, nga magbutang usa ka taas nga gitas-on nga 350px ug maghatag usa ka y-axis scrollbar.

Mga variable

Alang sa pagpakita sa mga variable gamita ang <var>tag.

y = m x + b

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

Sample nga output

Alang sa pagpakita sa mga bloke nga sample output gikan sa usa ka programa gamita ang <samp>tag.

Kini nga teksto gituyo nga isipon isip sample output gikan sa usa ka computer program.

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

Panguna nga pananglitan

Para sa batakang pag-istilo—light padding ug mga horizontal divider lang—idugang ang base nga klase .tablesa bisan unsang <table>. Kini daw sobra ka sobra, apan tungod sa kaylap nga paggamit sa mga lamesa alang sa uban nga mga plugins sama sa mga kalendaryo ug mga tigpili sa petsa, among gipili nga ihimulag ang among naandan nga mga estilo sa lamesa.

Opsyonal nga caption sa lamesa.
#	Unang Ngalan	Apelyido	Username
1	Mark	Si Otto	@mdo
2	Jacob	Thornton	@tambok
3	Larry	Ang langgam	@twitter

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

Mga guhit nga laray

Gamita .table-stripedaron idugang ang zebra-striping sa bisan unsang laray sa lamesa sulod sa <tbody>.

Pagkaangay sa cross-browser

Gi-istilo ang mga striped nga lamesa pinaagi sa :nth-childCSS selector, nga dili magamit sa Internet Explorer 8.

#	Unang Ngalan	Apelyido	Username
1	Mark	Si Otto	@mdo
2	Jacob	Thornton	@tambok
3	Larry	Ang langgam	@twitter

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

Bordered nga lamesa

Idugang .table-borderedang mga utlanan sa tanang kilid sa lamesa ug mga selula.

#	Unang Ngalan	Apelyido	Username
1	Mark	Si Otto	@mdo
2	Jacob	Thornton	@tambok
3	Larry	Ang langgam	@twitter

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

Hover nga mga laray

Idugang .table-hoveraron mahimo ang usa ka hover state sa mga laray sa lamesa sulod sa usa ka <tbody>.

#	Unang Ngalan	Apelyido	Username
1	Mark	Si Otto	@mdo
2	Jacob	Thornton	@tambok
3	Larry	Ang langgam	@twitter

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

Gipamub-an nga lamesa

Idugang .table-condensedaron mahimong mas compact ang mga lamesa pinaagi sa pagputol sa cell padding sa tunga.

#	Unang Ngalan	Apelyido	Username
1	Mark	Si Otto	@mdo
2	Jacob	Thornton	@tambok
3	Larry ang Langgam		@twitter

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

Mga klase sa konteksto

Gamita ang mga klase sa konteksto sa pagkolor sa mga laray sa lamesa o indibidwal nga mga selula.

Klase	Deskripsyon
`.active`	Ipadapat ang hover color sa usa ka partikular nga row o cell
`.success`	Nagpakita sa usa ka malampuson o positibo nga aksyon
`.info`	Nagpakita sa usa ka neyutral nga pagbag-o sa kasayuran o aksyon
`.warning`	Nagpakita sa usa ka pasidaan nga kinahanglan nga hatagan pagtagad
`.danger`	Nagpakita ug delikado o posibleng negatibo nga aksyon

#	Ulohan sa kolum	Ulohan sa kolum	Ulohan sa kolum
1	Kolum nga sulod	Kolum nga sulod	Kolum nga sulod
2	Kolum nga sulod	Kolum nga sulod	Kolum nga sulod
3	Kolum nga sulod	Kolum nga sulod	Kolum nga sulod
4	Kolum nga sulod	Kolum nga sulod	Kolum nga sulod
5	Kolum nga sulod	Kolum nga sulod	Kolum nga sulod
6	Kolum nga sulod	Kolum nga sulod	Kolum nga sulod
7	Kolum nga sulod	Kolum nga sulod	Kolum nga sulod
8	Kolum nga sulod	Kolum nga sulod	Kolum nga sulod
9	Kolum nga sulod	Kolum nga sulod	Kolum nga sulod

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

Paghatag kahulogan sa mga teknolohiya sa pagtabang

Ang paggamit sa kolor aron madugangan ang kahulugan sa usa ka laray sa lamesa o indibidwal nga cell naghatag lamang usa ka biswal nga timailhan, nga dili ipahibalo sa mga tiggamit sa mga teknolohiya nga makatabang - sama sa mga magbabasa sa screen. Siguruha nga ang impormasyon nga gipunting sa kolor klaro gikan sa sulud mismo (ang makita nga teksto sa may kalabutan nga laray sa lamesa / cell), o gilakip pinaagi sa alternatibong paagi, sama sa dugang nga teksto nga gitago sa .sr-onlyklase.

Responsive nga mga lamesa

Paghimo mga responsive nga mga lamesa pinaagi sa pagputos sa bisan unsa .tablearon .table-responsivemahimo silang mag-scroll nga pinahigda sa gagmay nga mga aparato (ubos sa 768px). Kung nagtan-aw sa bisan unsang butang nga mas dako pa sa 768px ang gilapdon, dili nimo makita ang bisan unsang kalainan sa kini nga mga lamesa.

Vertikal nga pagputol/pagputol

Ang mga responsive nga mga lamesa naggamit sa overflow-y: hidden, nga nagputol sa bisan unsang sulod nga labaw pa sa ubos o ibabaw nga mga kilid sa lamesa. Sa partikular, mahimo kining putlon ang mga dropdown menu ug uban pang mga widget sa ikatulo nga partido.

Firefox ug mga fieldset

Ang Firefox adunay pipila ka dili maayo nga pag-istilo sa fieldset nga naglambigit widthnga makabalda sa responsive nga lamesa. Dili kini ma-override kung wala ang usa ka hack nga piho sa Firefox nga wala namon gihatag sa Bootstrap:

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

Alang sa dugang nga impormasyon, basaha kining Stack Overflow nga tubag .

#	Ulohan sa lamesa	Ulohan sa lamesa	Ulohan sa lamesa	Ulohan sa lamesa	Ulohan sa lamesa	Ulohan sa lamesa
1	Selula sa lamesa	Selula sa lamesa	Selula sa lamesa	Selula sa lamesa	Selula sa lamesa	Selula sa lamesa
2	Selula sa lamesa	Selula sa lamesa	Selula sa lamesa	Selula sa lamesa	Selula sa lamesa	Selula sa lamesa
3	Selula sa lamesa	Selula sa lamesa	Selula sa lamesa	Selula sa lamesa	Selula sa lamesa	Selula sa lamesa

#	Ulohan sa lamesa	Ulohan sa lamesa	Ulohan sa lamesa	Ulohan sa lamesa	Ulohan sa lamesa	Ulohan sa lamesa
1	Selula sa lamesa	Selula sa lamesa	Selula sa lamesa	Selula sa lamesa	Selula sa lamesa	Selula sa lamesa
2	Selula sa lamesa	Selula sa lamesa	Selula sa lamesa	Selula sa lamesa	Selula sa lamesa	Selula sa lamesa
3	Selula sa lamesa	Selula sa lamesa	Selula sa lamesa	Selula sa lamesa	Selula sa lamesa	Selula sa lamesa

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

Panguna nga pananglitan

Ang indibidwal nga mga kontrol sa porma awtomatikong makadawat sa pipila ka global nga estilo. Ang tanang textual <input>, <textarea>, ug <select>mga elemento nga .form-controladunay gitakda width: 100%;sa default. I-wrap ang mga label ug mga kontrol .form-grouppara sa labing maayo nga gilay-on.

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

Ayaw isagol ang mga grupo sa porma sa mga grupo sa input

Ayaw isagol ang porma nga mga grupo direkta sa input nga mga grupo . Hinuon, ibutang ang input nga grupo sa sulod sa porma nga grupo.

Inline nga porma

Idugang .form-inlinesa imong porma (nga dili kinahanglan nga a <form>) para sa left-aligned ug inline-block nga mga kontrol. Kini magamit lamang sa mga porma sulod sa mga viewport nga labing menos 768px ang gilapdon.

Mahimong manginahanglan ug naandan nga gilapdon

Ang mga pag-input ug mga gipili width: 100%;gigamit nga default sa Bootstrap. Sulod sa inline nga mga porma, among gi-reset kana width: auto;aron daghang mga kontrol ang magpuyo sa parehas nga linya. Depende sa imong layout, ang dugang nga custom widths mahimong gikinahanglan.

Kanunay idugang ang mga label

Ang mga magbabasa sa screen adunay problema sa imong mga porma kung dili nimo iapil ang usa ka label sa matag input. Alang niining mga inline nga porma, mahimo nimong tagoan ang mga label gamit ang .sr-onlyklase. Adunay dugang nga alternatibong mga pamaagi sa paghatag og label para sa mga teknolohiya sa pagtabang, sama sa aria-label, aria-labelledbyo titleattribute. Kung wala niini, ang mga magbabasa sa screen mahimong mogamit sa placeholderhiyas, kung naa, apan timan-i nga ang paggamit placeholderingon usa ka kapuli sa ubang mga pamaagi sa pag-label wala gitambagan.

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

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

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

Horizontal nga porma

Gamita ang gitakda nang daan nga mga klase sa grid sa Bootstrap aron i-align ang mga label ug mga grupo sa mga kontrol sa porma sa pinahigda nga layout pinaagi sa pagdugang .form-horizontalsa porma (nga dili kinahanglan nga usa ka <form>). Ang pagbuhat sa ingon nagbag-o .form-grouparon molihok isip mga linya sa grid, busa dili kinahanglan ang .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>

Gisuportahan nga mga kontrol

Mga pananglitan sa standard nga mga kontrol sa porma nga gisuportahan sa usa ka pananglitan nga layout sa porma.

Mga input

Labing kasagaran nga pagkontrol sa porma, mga natad sa input nga nakabase sa teksto. Naglakip sa suporta alang sa tanang matang sa HTML5: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, ug color.

Kinahanglan ang deklarasyon sa tipo

Ang mga input bug-os nga maestilo kung typehusto ang pagdeklarar niini.

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

Mga grupo sa input

Aron idugang ang gisagol nga teksto o mga buton sa wala pa ug/o pagkahuman sa bisan unsang gibase sa teksto <input>, tan-awa ang sangkap sa grupo sa input .

Textarea

Pagkontrol sa porma nga nagsuporta sa daghang linya sa teksto. Usba rowsang attribute kon gikinahanglan.

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

Mga checkbox ug radyo

Ang mga checkbox kay para sa pagpili og usa o ubay-ubay nga mga opsyon sa usa ka lista, samtang ang mga radyo para sa pagpili og usa ka opsyon gikan sa daghan.

Gisuportahan ang mga disabled nga checkbox ug radyo, apan aron makahatag ug "dili gitugot" nga cursor sa hover sa ginikanan <label>, kinahanglan nimong idugang ang .disabledklase sa ginikanan .radio, .radio-inline, .checkbox, o .checkbox-inline.

Default (stacked)

<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 nga checkbox ug radyo

Gamita ang .checkbox-inlineo .radio-inlinemga klase sa sunod-sunod nga mga checkbox o radyo para sa mga kontrol nga makita sa samang 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 ug radyo nga walay label nga teksto

Kung wala ka'y teksto sa sulod sa <label>, ang input gipahimutang sama sa imong gipaabut. Sa pagkakaron nagtrabaho lang sa mga non-inline nga checkbox ug radyo. Hinumdumi nga maghatag gihapon og pipila ka matang sa label para sa mga teknolohiya nga makatabang (pananglitan, 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>

Nagpili

Timan-i nga daghang lumad nga pinili nga mga menu-nga mao ang Safari ug Chrome-adunay mga rounded corners nga dili mausab pinaagi sa border-radiusmga kabtangan.

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

Alang <select>sa mga kontrol nga adunay multiplehiyas, daghang mga kapilian ang gipakita pinaagi sa default.

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

Static nga pagkontrol

Kung kinahanglan nimo nga ibutang ang yano nga teksto tapad sa usa ka label sa porma sulod sa usa ka porma, gamita ang .form-control-staticklase sa usa ka <p>.

<form class="form-horizontal">
  <div class="form-group">
    <label class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <p class="form-control-static">[email protected]</p>
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword" placeholder="Password">
    </div>
  </div>
</form>

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only">Email</label>
    <p class="form-control-static">[email protected]</p>
  </div>
  <div class="form-group">
    <label for="inputPassword2" class="sr-only">Password</label>
    <input type="password" class="form-control" id="inputPassword2" placeholder="Password">
  </div>
  <button type="submit" class="btn btn-default">Confirm identity</button>
</form>

Focus nga estado

Among tangtangon ang mga default outlinenga estilo sa pipila ka mga kontrol sa porma ug i-apply ang usa box-shadowsa dapit niini alang sa :focus.

Demo `:focus`nga estado

Ang sa ibabaw nga pananglitan nga input naggamit sa custom nga mga estilo sa among dokumentasyon aron ipakita ang :focusestado sa usa ka .form-control.

Baldado nga estado

Idugang ang disabledboolean attribute sa usa ka input aron mapugngan ang mga interaksyon sa user. Ang mga baldado nga input makita nga mas gaan ug makadugang usa ka not-allowedcursor.

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

Gibalda ang mga fieldset

Idugang ang disabledhiyas sa usa <fieldset>aron ma-disable ang tanan nga mga kontrol sa sulod <fieldset>sa usa ka higayon.

Caveat mahitungod sa link functionality sa`<a>`

Sa kasagaran, ang mga browser motratar sa tanang lumad nga mga kontrol sa porma ( <input>, <select>ug <button>mga elemento) sulod sa a <fieldset disabled>ingon nga disabled, nga magpugong sa keyboard ug mouse nga interaksyon niini. Bisan pa, kung ang imong porma naglakip usab sa <a ... class="btn btn-*">mga elemento, kini hatagan lamang usa ka istilo sa pointer-events: none. Ingon sa nahibal-an sa seksyon bahin sa disabled nga estado alang sa mga buton (ug espesipiko sa sub-section alang sa mga elemento sa anchor), kini nga CSS nga kabtangan wala pa gi-standardize ug dili hingpit nga gisuportahan sa Opera 18 ug sa ubos, o sa Internet Explorer 11, ug nakadaog. Dili mapugngan ang mga tiggamit sa keyboard nga maka-focus o ma-aktibo kini nga mga link. Busa aron luwas, gamita ang custom JavaScript aron ma-disable ang maong mga link.

Pagkaangay sa cross-browser

Samtang ang Bootstrap magamit kini nga mga istilo sa tanan nga mga browser, ang Internet Explorer 11 ug sa ubos dili hingpit nga nagsuporta sa disabledhiyas sa usa ka <fieldset>. Gamita ang custom JavaScript aron ma-disable ang fieldset niini nga mga browser.

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

Idugang ang readonlyboolean nga attribute sa usa ka input aron malikayan ang pagbag-o sa bili sa input. Ang read-only inputs makita nga mas gaan (sama sa mga disabled inputs), apan ipabilin ang standard cursor.

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

Tabang text

Pag-block sa lebel sa tabang nga teksto alang sa mga kontrol sa porma.

Pag-asoy sa tabang nga teksto sa mga kontrol sa porma

Ang teksto sa tabang kinahanglan nga klaro nga adunay kalabotan sa pagkontrol sa porma nga adunay kalabotan sa paggamit sa aria-describedbyhiyas. Kini magsiguro nga ang mga teknolohiya sa pagtabang - sama sa mga magbabasa sa screen - ipahibalo kini nga teksto sa tabang kung ang tiggamit mag-focus o mosulod 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 sa validation

Ang Bootstrap naglakip sa mga estilo sa pag-validate alang sa sayup, pasidaan, ug mga estado sa kalampusan sa mga kontrol sa porma. Sa paggamit, pagdugang .has-warning, .has-error, o .has-successsa ginikanan nga elemento. Ang bisan unsang .control-label, .form-control, ug .help-blocksulod niana nga elemento makadawat sa mga estilo sa pag-validate.

Paghatud sa kahimtang sa pag-validate sa mga teknolohiya nga makatabang ug mga tiggamit nga buta sa kolor

Ang paggamit niini nga mga estilo sa pag-validate aron ipasabut ang kahimtang sa usa ka kontrol sa porma naghatag lamang usa ka biswal, gibase sa kolor nga indikasyon, nga dili ipahibalo sa mga tiggamit sa mga teknolohiya nga makatabang - sama sa mga tigbasa sa screen - o sa mga tiggamit nga buta sa kolor.

Siguruha nga ang usa ka alternatibo nga timailhan sa estado gihatag usab. Pananglitan, mahimo nimong ilakip ang usa ka pahiwatig bahin sa estado sa <label>teksto mismo sa kontrol sa porma (sama sa kaso sa mosunod nga pananglitan sa code), ilakip ang usa ka Glyphicon (uban ang angay nga alternatibong teksto gamit ang .sr-onlyklase - tan-awa ang mga pananglitan sa Glyphicon ), o pinaagi sa paghatag usa ka dugang nga tabang sa text block. Partikular alang sa mga teknolohiya sa pagtabang, ang dili balido nga mga kontrol sa porma mahimo usab nga hatagan usa ka aria-invalid="true"hiyas.

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

Uban sa opsyonal nga mga icon

Mahimo ka usab makadugang sa opsyonal nga mga icon sa feedback nga adunay pagdugang sa .has-feedbackug ang husto nga icon.

<input class="form-control">Ang mga icon sa feedback molihok lamang sa mga elemento sa teksto .

Mga icon, label, ug input nga mga grupo

Ang manwal nga pagpahimutang sa mga icon sa feedback gikinahanglan alang sa mga input nga walay label ug alang sa mga grupo sa input nga adunay add-on sa tuo. Giawhag ka pag-ayo nga maghatag mga label para sa tanan nga mga input alang sa mga hinungdan sa pagka-access. Kung gusto nimo mapugngan ang mga label nga ipakita, itago kini sa .sr-onlyklase. Kung kinahanglan nimong buhaton nga wala’y mga label, i-adjust ang topkantidad sa icon sa feedback. Para sa mga grupo sa pag-input, i-adjust ang rightvalue sa angay nga pixel value depende sa gilapdon sa imong addon.

Paghatud sa kahulogan sa icon ngadto sa mga teknolohiya sa pagtabang

Aron masiguro nga ang mga teknolohiya sa pagtabang - sama sa mga tigbasa sa screen - husto nga nagpahayag sa kahulugan sa usa ka icon, ang dugang nga tinago nga teksto kinahanglan iapil sa .sr-onlyklase ug klaro nga gilambigit sa pagkontrol sa porma nga adunay kalabotan sa paggamit aria-describedby. Sa laing paagi, siguroha nga ang kahulogan (pananglitan, ang kamatuoran nga adunay usa ka pasidaan alang sa usa ka partikular nga text entry field) gipahayag sa ubang porma, sama sa pag-ilis sa teksto sa aktuwal nga <label>nalangkit sa kontrol sa porma.

Bisan tuod ang mosunod nga mga pananglitan naghisgot na sa validation state sa ilang tagsa-tagsa ka porma nga kontrol sa <label>teksto mismo, ang teknik sa ibabaw (gamit ang .sr-onlyteksto ug aria-describedby) gilakip alang sa mga katuyoan sa paghulagway.

<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 nga mga icon sa pinahigda ug inline nga mga porma

<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 nga mga icon nga adunay gitago nga `.sr-only`mga label

Kon imong gamiton ang .sr-onlyklase sa pagtago sa usa ka kontrol sa porma <label>(kaysa paggamit sa ubang mga opsyon sa pag-label, sama sa aria-labelattribute), ang Bootstrap awtomatik nga mag-adjust sa posisyon sa icon sa higayon nga kini idugang.

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

Pagkontrol sa gidak-on

Ibutang ang mga kahitas-an gamit ang mga klase sama sa .input-lg, ug itakda ang mga gilapdon gamit ang mga klase sa kolum sa grid sama sa .col-lg-*.

Pagsukod sa gitas-on

Paghimo og mas taas o mas mugbo nga mga kontrol sa porma nga mohaum sa gidak-on sa buton.

<input class="form-control input-lg" type="text" placeholder=".input-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control input-sm" type="text" placeholder=".input-sm">

<select class="form-control input-lg">...</select>
<select class="form-control">...</select>
<select class="form-control input-sm">...</select>

Horizontal nga porma nga mga gidak-on sa grupo

Dali nga gidak-on ang mga label ug porma ang mga kontrol sa sulod .form-horizontalpinaagi sa pagdugang .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>

Pagsukod sa kolum

I-wrap ang mga input sa mga kolum sa grid, o bisan unsang naandan nga elemento sa ginikanan, aron dali nga mapatuman ang gusto nga mga gilapdon.

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

Gamita ang butones nga mga klase sa usa ka <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 nga espesipiko sa konteksto

Samtang ang mga klase sa butones mahimong magamit sa <a>ug <button>mga elemento, ang <button>mga elemento ra ang gisuportahan sa sulod sa among nav ug navbar nga mga sangkap.

Mga link nga naglihok isip mga buton

Kung ang mga <a>elemento gigamit aron molihok ingon mga buton - nagpalihok sa in-page nga pagpaandar, imbes nga mag-navigate sa lain nga dokumento o seksyon sa sulod sa karon nga panid - kinahanglan usab nga hatagan sila usa ka angay nga role="button".

Paghubad sa cross-browser

Ingon usa ka labing kaayo nga praktis, among girekomenda nga gamiton ang <button>elemento kung mahimo aron masiguro nga magkatugma ang paghubad sa cross-browser.

Lakip sa ubang mga butang, adunay usa ka bug sa Firefox <30 nga nagpugong kanamo sa pag-set sa mga line-heightbuton nga <input>gibase sa, hinungdan nga dili kini eksakto nga katumbas sa gitas-on sa ubang mga buton sa Firefox.

Mga kapilian

Gamita ang bisan unsa nga magamit nga mga klase sa butones aron dali nga makahimo usa ka istilo nga buton.

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

Paghatag kahulogan sa mga teknolohiya sa pagtabang

Ang paggamit sa kolor aron madugangan ang kahulogan sa usa ka butones naghatag lamang ug biswal nga indikasyon, nga dili ipahibalo sa mga tiggamit sa mga teknolohiya nga makatabang - sama sa mga tigbasa sa screen. Siguruha nga ang kasayuran nga gipaila sa kolor klaro gikan sa sulud mismo (ang makita nga teksto sa buton), o gilakip pinaagi sa alternatibong paagi, sama sa dugang nga teksto nga gitago sa .sr-onlyklase.

Mga gidak-on

Gusto nga mas dako o mas gagmay nga mga buton? Idugang .btn-lgang , .btn-sm, o .btn-xspara sa dugang nga mga gidak-on.

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

Paghimo og block level nga mga buton—kadtong mosangkad sa tibuok gilapdon sa ginikanan—pinaagi sa pagdugang .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>

Aktibo nga kahimtang

Ang mga buton makita nga gipugos (nga adunay mas itom nga background, mas ngitngit nga utlanan, ug inset anino) kung aktibo. Alang sa <button>mga elemento, kini gihimo pinaagi sa :active. Alang sa <a>mga elemento, gihimo kini sa .active. Bisan pa, mahimo nimong gamiton .activeang <button>s (ug ilakip ang aria-pressed="true"hiyas) kung kinahanglan nimo nga kopyahon ang aktibo nga estado sa programa.

Butang nga elemento

Dili kinahanglan nga idugang :activetungod kay kini usa ka pseudo-class, apan kung kinahanglan nimo nga pugson ang parehas nga hitsura, ipadayon ug idugang .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>

Angkla nga elemento

Idugang ang .activeklase sa <a>mga buton.

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

Baldado nga estado

Himoa nga ang mga buton tan-awon nga dili ma-click pinaagi sa pagwagtang niini og balik gamit ang opacity.

Butang nga elemento

Idugang ang disabledattribute sa <button>mga buton.

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

Pagkaangay sa cross-browser

Kung imong idugang ang disabledhiyas sa usa ka <button>, ang Internet Explorer 9 ug sa ubos maghimo sa teksto nga gray nga adunay daotan nga text-shadow nga dili namo masulbad.

Angkla nga elemento

Idugang ang .disabledklase sa <a>mga buton.

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

Gigamit namon .disabledingon usa ka klase sa utility dinhi, parehas sa kasagaran nga .activeklase, busa wala’y prefix nga gikinahanglan.

Pag-link sa function caveat

Kini nga klase naggamit pointer-events: nonesa pagsulay sa pag-disable sa link functionality sa <a>s, apan kana nga CSS property wala pa gi-standardize ug dili hingpit nga gisuportahan sa Opera 18 ug sa ubos, o sa Internet Explorer 11. Dugang pa, bisan sa mga browser nga nagsuporta sa pointer-events: none, keyboard Ang nabigasyon nagpabilin nga wala maapektuhan, nagpasabut nga ang mga nakit-an nga tiggamit sa keyboard ug mga tiggamit sa mga teknolohiya sa pagtabang mahimo gihapon nga ma-aktibo kini nga mga link. Busa aron luwas, gamita ang custom JavaScript aron ma-disable ang maong mga link.

Matubag nga mga imahe

Ang mga imahe sa Bootstrap 3 mahimo nga responsive-friendly pinaagi sa pagdugang sa .img-responsiveklase. Kini magamit max-width: 100%;, height: auto;ug display: block;sa imahe aron maayo ang timbangan sa elemento sa ginikanan.

Aron masentro ang mga hulagway nga naggamit sa .img-responsiveklase, gamita .center-blockimbes nga .text-center. Tan-awa ang seksyon sa mga klase sa katabang alang sa dugang nga mga detalye bahin sa .center-blockpaggamit.

Mga hulagway sa SVG ug IE 8-10

Sa Internet Explorer 8-10, ang mga hulagway sa SVG nga adunay .img-responsivedili parehas nga gidak-on. Aron ayuhon kini, idugang width: 100% \9;kon gikinahanglan. Ang Bootstrap wala mag-apply niini nga awtomatiko tungod kay kini nagpahinabog mga komplikasyon sa ubang mga format sa imahe.

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

Mga porma sa imahe

Idugang ang mga klase sa usa ka <img>elemento aron dali nga ma-estilo ang mga imahe sa bisan unsang proyekto.

Pagkaangay sa cross-browser

Hinumdomi nga ang Internet Explorer 8 walay suporta alang sa mga rounded corners.

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

Konteksto nga mga kolor

Ipahayag ang kahulogan pinaagi sa kolor uban sa pipila ka empasis utility classes. Mahimo usab kini nga magamit sa mga link ug mongitngit sa hover sama sa among default nga mga istilo sa 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>

Pag-atubang sa espesipiko

Usahay ang mga klase sa emphasis dili magamit tungod sa espesipiko sa lain nga tigpili. Sa kadaghanan nga mga kaso, ang usa ka igo nga solusyon mao ang pagputos sa imong teksto sa usa <span>sa klase.

Paghatag kahulogan sa mga teknolohiya sa pagtabang

Ang paggamit og kolor aron makadugang og kahulogan naghatag lamang og biswal nga indikasyon, nga dili ipaabot ngadto sa mga tiggamit sa mga teknolohiyang makatabang – sama sa mga screen reader. Siguruha nga ang kasayuran nga gipaila sa kolor mahimong dayag gikan sa sulud mismo (ang mga kolor sa konteksto gigamit ra aron mapalig-on ang kahulugan nga naa na sa teksto/markup), o gilakip pinaagi sa alternatibong paagi, sama sa dugang nga teksto nga gitago sa .sr-onlyklase .

Mga background sa konteksto

Sama sa mga klase sa kolor sa kolor sa konteksto, dali nga itakda ang background sa usa ka elemento sa bisan unsang klase sa konteksto. Ang mga sangkap sa anchor mongitngit sa hover, sama sa mga klase sa 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>

Pag-atubang sa espesipiko

Usahay dili magamit ang mga klase sa background sa konteksto tungod sa piho sa lain nga tigpili. Sa pipila ka mga kaso, usa ka igo nga solusyon mao ang pagputos sa sulud sa imong elemento sa usa <div>sa klase.

Paghatag kahulogan sa mga teknolohiya sa pagtabang

Sama sa mga kolor sa konteksto , siguroha nga ang bisan unsang kahulogan nga gipasa pinaagi sa kolor gipahayag usab sa usa ka pormat nga dili lunsay nga presentasyon.

Close icon

Gamita ang generic close icon para sa pagdismiss sa content sama sa modals ug alerts.

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

Carets

Gamita ang mga caret aron ipakita ang dropdown function ug direksyon. Timan-i nga ang default caret awtomatik nga mobalik sa dropup menus .

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

Dali nga naglutaw

Paglutaw sa usa ka elemento sa wala o tuo nga adunay usa ka klase. !importantgilakip aron malikayan ang mga isyu sa espesipiko. Ang mga klase mahimo usab nga gamiton ingon 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 sa sulod sa sentro

Ibutang ang usa ka elemento sa display: blockug sentro pinaagi sa margin. Anaa ingon usa ka mixin ug klase.

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

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

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

Clearfix

Sayon nga klaro floatang s pinaagi sa pagdugang .clearfix sa elemento sa ginikanan . Gigamit ang micro clearfix nga gipasikat ni Nicolas Gallagher. Mahimo usab nga gamiton ingon usa ka 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();
}

Pagpakita ug pagtago sa sulod

Pugsa ang usa ka elemento nga ipakita o itago ( lakip ang para sa mga screen reader ) gamit ang .showug .hiddenmga klase. Gigamit kini nga mga klase !importantaron malikayan ang mga panagbangi sa espesipiko, sama sa dali nga paglutaw . Anaa ra sila alang sa pag-togg sa lebel sa block. Mahimo usab kini gamiton isip mga mixin.

.hideanaa, apan kini dili kanunay makaapekto sa mga magbabasa sa screen ug wala na gamita sa v3.0.1 . Paggamit .hiddeno.sr-only sa baylo.

Dugang pa, .invisiblemahimong gamiton sa pag-toggle lamang sa visibility sa usa ka elemento, nagpasabot displaynga wala kini giusab ug ang elemento mahimo gihapon nga makaapekto sa dagan sa 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();
}

Screen reader ug keyboard navigation content

Itago ang usa ka elemento sa tanan nga mga aparato gawas sa mga magbabasa sa screen nga adunay .sr-only. Combine .sr-onlysa .sr-only-focusablearon ipakita pag-usab ang elemento kung kini naka-focus (eg sa usa ka keyboard-only user). Gikinahanglan alang sa pagsunod sa labing maayong gawi sa pagka-access . Mahimo usab nga gamiton isip mga mixin.

<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>

// Usage as a mixin
.skip-navigation {
  .sr-only();
  .sr-only-focusable();
}

Pagpuli sa imahe

Gamita ang .text-hideklase o mixin aron makatabang sa pag-ilis sa sulod sa teksto sa elemento sa hulagway sa background.

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

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

Para sa mas paspas nga mobile-friendly nga kalamboan, gamita kini nga mga klase sa utility para sa pagpakita ug pagtago sa sulod pinaagi sa device pinaagi sa media query. Lakip usab ang mga klase sa utility alang sa pag-togg sa sulud kung giimprinta.

Sulayi nga gamiton kini sa limitado nga basehan ug likayi ang paghimo sa hingpit nga lainlaing mga bersyon sa parehas nga site. Hinunoa, gamita kini aron makadugang sa presentasyon sa matag device.

Anaa nga mga klase

Paggamit usa o kombinasyon sa mga magamit nga klase para sa pag-togg sa sulud sa mga breakpoint sa viewport.

	Dugang nga gagmay nga mga himanMga Telepono (<768px)	Gagmay nga mga himanMga tableta (≥768px)	Medium nga mga himanMga Desktop (≥992px)	Dagko nga mga himanMga Desktop (≥1200px)
`.visible-xs-*`	Makita	Gitagoan	Gitagoan	Gitagoan
`.visible-sm-*`	Gitagoan	Makita	Gitagoan	Gitagoan
`.visible-md-*`	Gitagoan	Gitagoan	Makita	Gitagoan
`.visible-lg-*`	Gitagoan	Gitagoan	Gitagoan	Makita
`.hidden-xs`	Gitagoan	Makita	Makita	Makita
`.hidden-sm`	Makita	Gitagoan	Makita	Makita
`.hidden-md`	Makita	Makita	Gitagoan	Makita
`.hidden-lg`	Makita	Makita	Makita	Gitagoan

Sa v3.2.0, ang mga .visible-*-*klase alang sa matag breakpoint moabut sa tulo ka mga variation, usa alang sa matag CSS displayproperty value nga gilista sa ubos.

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

Mao nga, alang sa labi ka gamay nga ( xs) nga mga screen pananglitan, ang magamit nga .visible-*-*mga klase mao ang: .visible-xs-block, .visible-xs-inline, ug .visible-xs-inline-block.

Ang mga klase .visible-xs, .visible-sm, .visible-md, ug .visible-lganaa usab, apan wala na magamit sama sa v3.2.0 . Gibanabana nga katumbas kini sa .visible-*-block, gawas sa mga dugang nga espesyal nga kaso alang sa pag- <table>togg sa mga elemento nga may kalabutan.

Mga klase sa pag-imprinta

Susama sa regular nga responsive nga mga klase, gamita kini para sa pag-toggling sa sulod para i-print.

Mga klase	Browser	Iimprinta
`.visible-print-block` `.visible-print-inline` `.visible-print-inline-block`	Gitagoan	Makita
`.hidden-print`	Makita	Gitagoan

Anaa usab ang klase .visible-printapan wala na magamit sama sa v3.2.0 . Kini gibana-bana nga katumbas sa .visible-print-block, gawas sa dugang nga mga espesyal nga kaso alang sa <table>mga elemento nga may kalabutan.

Mga kaso sa pagsulay

I-resize ang imong browser o i-load sa lainlaing mga aparato aron masulayan ang mga responsive nga klase sa utility.

Makita sa...

Ang berde nga marka sa tsek nagpakita nga ang elemento makita sa imong karon nga viewport.

Dugang gamay ✔ Makita sa x-small

Gamay ✔ Makita sa gamay

Medium ✔ Makita sa medium

Dako ✔ Makita sa dako

Dugang gamay ug gamay ✔ Makita sa x-gamay ug gamay

Medium ug dako ✔ Makita sa medium ug dako

Dugang gamay ug medium ✔ Makita sa x-small ug medium

Gamay ug dako ✔ Makita sa gamay ug dako

Dugang gamay ug dako ✔ Makita sa x-gamay ug dako

Gamay ug medium ✔ Makita sa gamay ug medium

Gitago sa...

Dinhi, ang berde nga mga checkmark nagpakita usab nga ang elemento gitago sa imong karon nga viewport.

Dugang gamay ✔ Gitago sa x-small

Gamay ✔ Gitago sa gamay

Medium ✔ Gitago sa medium

Dako ✔ Gitago sa dako

Dugang gamay ug gamay ✔ Gitago sa x-gamay ug gamay

Medium ug dako ✔ Gitago sa medium ug dako

Dugang gamay ug medium ✔ Hidden on x-small and medium

Small and large ✔ Gitago sa gamay ug dako

Extra small and large ✔ Gitago sa x-gamay ug dako

Gamay ug medium ✔ Hidden on small and medium

Ang CSS sa Bootstrap gitukod sa Less, usa ka preprocessor nga adunay dugang nga gamit sama sa mga variable, mixins, ug mga function alang sa pag-compile sa CSS. Kadtong nagtan-aw sa paggamit sa tinubdan Dili kaayo mga file imbis sa among gihugpong nga mga CSS file mahimong magamit ang daghang mga variable ug mixins nga among gigamit sa tibuuk nga balangkas.

Ang mga variable sa grid ug mga mixin nasakup sa sulod sa seksyon sa Grid system .

Pag-compile sa Bootstrap

Ang Bootstrap mahimong gamiton sa labing menos duha ka paagi: uban sa gihugpong nga CSS o uban sa tinubdan Dili kaayo mga file. Aron ma-compile ang Gamay nga mga file, konsultaha ang seksyon sa Pagsugod kung giunsa ang pag-setup sa imong palibot sa pag-uswag aron mapadagan ang kinahanglan nga mga mando.

Ang mga himan sa pag-compile sa ikatulo nga partido mahimong magamit sa Bootstrap, apan wala kini suportado sa among kinauyokan nga grupo.

Mga variable

Ang mga variable gigamit sa tibuuk nga proyekto ingon usa ka paagi aron masentralisa ug ipaambit ang sagad nga gigamit nga mga kantidad sama sa mga kolor, gilay-on, o mga stack sa font. Para sa kompleto nga pagkahugno, palihog tan-awa ang Customizer .

Mga kolor

Dali gamita ang duha ka laraw sa kolor: grayscale ug semantic. Ang grayscale nga mga kolor naghatag og dali nga pag-access sa kasagarang gigamit nga mga shade sa itom samtang ang semantiko naglakip sa lain-laing mga kolor nga gi-assign sa makahuluganon nga mga bili 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;

Gamita ang bisan unsa niini nga mga baryable sa kolor kung unsa sila o i-reassign kini sa mas makahuluganon nga mga variable para sa imong proyekto.

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

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

Scaffolding

Pipila ka mga baryable alang sa dali nga pag-customize sa yawe nga mga elemento sa kalabera sa imong site.

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

Mga link

Sayon nga istilo ang imong mga link nga adunay husto nga kolor nga adunay usa ra ka kantidad.

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

Timan-i nga ang @link-hover-colornaggamit sa usa ka function, lain nga katingad-an nga himan gikan sa Less, aron awtomatiko nga maghimo sa husto nga kolor sa hover. Mahimo nimong gamiton ang darken, lighten, saturate, ug desaturate.

Tipograpiya

Dali nga itakda ang imong typeface, gidak-on sa teksto, nanguna, ug daghan pa nga adunay pipila ka dali nga mga variable. Gigamit usab kini sa Bootstrap aron mahatagan ang dali nga pagsagol sa 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

Duha ka dali nga mga variable alang sa pag-customize sa lokasyon ug filename sa imong mga icon.

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

Mga sangkap

Ang mga sangkap sa tibuok Bootstrap naggamit sa pipila ka default nga mga variable para sa pagtakda sa komon nga mga bili. Ania ang labing kasagarang gigamit.

@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 sa vendor

Ang mga mixin sa vendor kay mga mixin aron makatabang sa pagsuporta sa daghang mga browser pinaagi sa paglakip sa tanan nga may kalabutan nga prefix sa vendor sa imong giipon nga CSS.

Ang gidak-on sa kahon

I-reset ang modelo sa kahon sa imong mga sangkap gamit ang usa ka mixin. Para sa konteksto, tan-awa kining makatabang nga artikulo gikan sa Mozilla .

Ang mixin wala na gigamit ingon sa v3.2.0, uban sa pagpaila sa Autoprefixer. Aron mapreserbar ang backwards-compatibility, ang Bootstrap magpadayon sa paggamit sa mixin sa sulod hangtod 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 lingin nga suok

Karon ang tanan nga modernong mga browser nagsuporta sa dili prefixed border-radiusnga kabtangan. Ingon niana, walay .border-radius()mixin, apan ang Bootstrap naglakip sa mga shortcut alang sa dali nga paglibot sa duha ka eskina sa usa ka partikular nga bahin sa usa ka butang.

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

Kahon (Ihulog) nga mga anino

Kung ang imong target nga mamiminaw naggamit sa labing bag-o ug labing kadaghan nga mga browser ug aparato, siguruha nga gamiton ra ang box-shadowkabtangan sa kaugalingon. Kung kinahanglan nimo ang suporta alang sa mas karaan nga Android (pre-v4) ug iOS nga mga aparato (pre-iOS 5), gamita ang wala na gigamit nga mixin aron makuha ang kinahanglan -webkitnga prefix.

Ang mixin wala na magamit sama sa v3.1.0, tungod kay ang Bootstrap dili opisyal nga nagsuporta sa karaan nga mga plataporma nga wala nagsuporta sa standard nga kabtangan. Aron mapreserbar ang backwards-compatibility, ang Bootstrap magpadayon sa paggamit sa mixin sa sulod hangtod sa Bootstrap v4.

Siguruha nga mogamit rgba()mga kolor sa imong mga anino sa kahon aron sila magsagol nga hapsay kutob sa mahimo 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 transisyon

Daghang mixins alang sa pagka-flexible. Ibutang ang tanang impormasyon sa transisyon sa usa, o ipiho ang usa ka bulag nga paglangan ug gidugayon kung gikinahanglan.

Ang mga mixin wala na magamit sama sa v3.2.0 , uban ang pagpaila sa Autoprefixer. Aron mapreserbar ang backwards-compatibility, ang Bootstrap magpadayon sa paggamit sa mga mixin sa sulod hangtod 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 pagbag-o

I-rotate, scale, hubaron (ibalhin), o skew ang bisan unsang butang.

.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

Usa ka mixin alang sa paggamit sa tanan nga mga kabtangan sa animation sa CSS3 sa usa ka deklarasyon ug uban pang mga mixin alang sa indibidwal nga mga kabtangan.

.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

Ibutang ang opacity alang sa tanan nga mga browser ug paghatag usa ka filterfallback alang sa IE8.

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

Teksto sa placeholder

Paghatag og konteksto alang sa mga kontrol sa porma sulod sa matag 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 kolum

Paghimo mga kolum pinaagi sa CSS sulod sa usa ka 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

Dali nga himuon ang bisan unsang duha ka kolor nga usa ka gradient sa background. Pag-uswag ug pagtakda og direksyon, paggamit og tulo ka kolor, o paggamit og radial gradient. Uban sa usa ka mixin makuha nimo ang tanan nga mga prefix nga syntax nga kinahanglan nimo.

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

Mahimo usab nimo ipiho ang anggulo sa usa ka standard nga duha ka kolor, linear gradient:

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

Kung kinahanglan nimo ang barber-stripe style gradient, dali ra usab kana. Itakda lang ang usa ka kolor ug mag-overlay kami sa usa ka translucent white stripe.

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

Ipataas ang ante ug gamita hinuon ang tulo ka kolor. Ibutang ang una nga kolor, ang ikaduha nga kolor, ang kolor sa ikaduha nga kolor sa paghunong (usa ka porsyento nga kantidad sama sa 25%), ug ang ikatulo nga kolor uban niini nga mga mix:

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

Taas ang ulo! Kung kinahanglan nimo nga tangtangon ang usa ka gradient, siguruha nga tangtangon ang bisan unsang piho nga IE nga filtermahimo nimong nadugang. Mahimo nimo kana pinaagi sa paggamit sa .reset-filter()mixin kauban background-image: none;.

Utility mixins

Utility mixins mao ang mga mixin nga nagkombinar sa laing walay kalabotan nga CSS properties aron makab-ot ang usa ka piho nga tumong o buluhaton.

Clearfix

Kalimti ang pagdugang class="clearfix"sa bisan unsang elemento ug idugang ang .clearfix()mixin kung angay. Gigamit ang micro clearfix gikan ni Nicolas Gallagher .

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

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

Horizontal nga pagsentro

Isentro dayon ang bisan unsang elemento sulod sa ginikanan niini. Gikinahanglan widtho max-widthitakda.

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

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

Mga katabang sa pagsukod

Ipiho ang mga sukod sa usa ka butang nga mas dali.

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

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

Mabag-o nga mga textarea

Sayon nga i-configure ang mga kapilian sa pagbag-o sa gidak-on alang sa bisan unsang textarea, o bisan unsang ubang elemento. Default sa normal nga gawi sa browser ( both).

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

Pagputol sa teksto

Dali nga putlon ang teksto gamit ang usa ka ellipsis nga adunay usa ka mixin. Nagkinahanglan nga ang elemento mahimong blocko inline-blocklebel.

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

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

Mga hulagway sa retina

Ipiho ang duha ka mga agianan sa imahe ug ang @1x nga mga sukat sa imahe, ug ang Bootstrap maghatag usa ka pangutana sa @2x media. Kung daghan ka nga mga imahen nga i-serve, ikonsiderar ang pagsulat sa imong retina nga imahe nga CSS nga mano-mano sa usa ka pangutana 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);
}

Samtang ang Bootstrap gitukod sa Less, aduna usab kini opisyal nga Sass port . Gipadayon namo kini sa usa ka separado nga GitHub repository ug nagdumala sa mga update gamit ang conversion script.

Unsa ang gilakip

Tungod kay ang Sass port adunay usa ka bulag nga repo ug nagserbisyo sa usa ka gamay nga lahi nga mamiminaw, ang mga sulud sa proyekto lahi kaayo sa panguna nga proyekto sa Bootstrap. Kini nagsiguro nga ang Sass port kay compatible sa daghang Sass-based nga sistema kutob sa mahimo.

Dalan	Deskripsyon
`lib/`	Ruby gem code (Sass configuration, Rails ug Compass integrations)
`tasks/`	Mga script sa pag-convert (pag-usbaw sa ubos ngadto sa Sass)
`test/`	Mga pagsulay sa kompilasyon
`templates/`	Pagpadayag sa pakete sa kompas
`vendor/assets/`	Sass, JavaScript, ug mga file sa font
`Rakefile`	Internal nga mga buluhaton, sama sa rake ug convert

Bisitaha ang GitHub repository sa Sass port aron makita kini nga mga file nga naglihok.

Pag-instalar

Para sa impormasyon kon unsaon pag-instalar ug paggamit sa Bootstrap para sa Sass, konsultaha ang GitHub repository readme . Kini ang pinakabag-o nga tinubdan ug naglakip sa impormasyon alang sa paggamit sa Rails, Compass, ug standard nga mga proyekto sa Sass.

Bootstrap para sa Sass

CSS

Overview

HTML5 nga doctype

Mobile una

Typography ug mga link

Normalize.css

Mga sudlanan

Sistema sa grid

Pasiuna

Mga pangutana sa media

Mga kapilian sa grid

Pananglitan: Stacked-to-horizontal

Pananglitan: Ang sudlanan sa likido

Pananglitan: Mobile ug desktop

Pananglitan: Mobile, tablet, desktop

Pananglitan: Pagputos sa kolum

Ang responsive nga column resets

Pag-offset sa mga kolum

Mga kolum nga nagsalag

Pag-order sa kolum

Dili kaayo mga mixin ug mga variable

Mga variable

Mixins

Pananglitan sa paggamit

Tipograpiya

Mga ulohan

h1. Bootstrap nga ulohan

h2. Bootstrap nga ulohan

h3. Bootstrap nga ulohan

h4. Bootstrap nga ulohan

h5. Bootstrap nga ulohan

h6. Bootstrap nga ulohan

h1. Bootstrap nga ulohan Ikaduhang teksto

h2. Bootstrap nga ulohan Ikaduhang teksto

h3. Bootstrap nga ulohan Ikaduhang teksto

h4. Bootstrap nga ulohan Ikaduhang teksto

h5. Bootstrap nga ulohan Ikaduhang teksto

h6. Bootstrap nga ulohan Ikaduhang teksto

Kopya sa lawas

Panguna nga kopya sa lawas

Gitukod uban sa Gamay

Inline nga mga elemento sa teksto

Gimarkahan nga teksto

Gitangtang nga teksto

Strikethrough nga teksto

Gisulod nga teksto

Gi-underline nga teksto

Gamay nga teksto

Maisogon

Mga italiko

Mga alternatibo nga elemento

Mga klase sa pag-align

Mga klase sa pagbag-o

Mga minubo

Basic abbreviation

Inisyalismo

Mga adres

Blockquotes

Default nga blockquote

Mga kapilian sa blockquote

Pagngalan ug tinubdan

Kapuli nga mga pagpakita

Mga lista

Wala ma-order

Nagmando

Dili istilo

Inline

Deskripsyon

Horizontal nga paghulagway

Awtomatikong pagputol

Code

Inline

input sa user

Basic block

Mga variable

Sample nga output

Mga lamesa

Panguna nga pananglitan

Mga guhit nga laray

Pagkaangay sa cross-browser

Demo `:focus`nga estado

Caveat mahitungod sa link functionality sa`<a>`

Opsyonal nga mga icon nga adunay gitago nga `.sr-only`mga label