Maua le maualalo i luga o vaega autu o atinaʻe a Bootstrap, e aofia ai la matou auala mo le atinaʻeina o upega tafaʻilagi sili atu, vave, malosi.

HTML5 doctype

O Bootstrap e faʻaogaina nisi elemene HTML ma CSS meatotino e manaʻomia le faʻaogaina o le HTML5 doctype. Fa'aaofia i le amataga o au galuega fa'atino uma.

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

Mobile muamua

Faatasi ai ma le Bootstrap 2, matou te faʻaopoopoina sitaili faʻafeiloaʻi feaveaʻi mo vaega taua o le faʻavae. Faatasi ai ma le Bootstrap 3, ua matou toe tusia le poloketi ina ia faauo feaveai mai le amataga. Nai lo le fa'aopoopoina o sitaili feavea'i, e tao sa'o i totonu. O le mea moni, o Bootstrap e feaveaʻi muamua . E mafai ona maua sitaili muamua feaveai i totonu o le faletusi atoa nai lo faila eseese.

Ina ia faʻamautinoa le faʻaalia saʻo ma le faʻapipiʻiina o le paʻi, faʻapipiʻi le taga vaʻai meta tag i lau <head>.

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

E mafai ona e fa'amalo le mafai fa'aoso i masini feavea'i e ala i le fa'aopoopo user-scalable=noi le viewport meta tag. Ole mea lea e fa'agata ai le so'o, o lona uiga e na'o tagata e fa'aoga e mafai ona ta'avale, ma i'u ai i lau 'upega tafa'ilagi lagona e pei o se fa'aoga masani. I le aotelega, matou te le fautuaina lenei mea i luga o saite uma, o lea ia faʻaeteete!

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

Tusitusi ma sootaga

Ua setiina e Bootstrap le fa'aaliga fa'alelalolagi, fa'asologa, ma sitaili feso'ota'iga. Aemaise lava, matou:

Seti background-color: #fff;i luga o lebody
Fa'aaoga le @font-family-base, @font-size-base, ma @line-height-baseuiga e fai ma a matou fa'amaumauga fa'atusitusi
Seti le lanu feso'ota'iga fa'avaomalo e ala @link-colorma fa'aoga na'o laina vase feso'ota'iga:hover

O nei sitaili e mafai ona maua i totonu scaffolding.less.

Normalize.css

Mo le faʻaleleia atili o suʻesuʻega suʻesuʻe, matou te faʻaaogaina Normalize.css , o se poloketi a Nicolas Gallagher ma Jonathan Neal .

Koneteina

E mana'omia e Bootstrap se elemene e iai e afifi ai mea o lo'o i totonu o le saite ma fa'afale ai la tatou faiga fa'asologa. E mafai ona e filifilia se tasi o pusa e lua e fa'aoga i au galuega faatino. Manatua, ona o paddingma sili atu, e leai se atigipusa e mafai ona teu.

Fa'aoga .containermo se atigi pusa fa'amautu lautele.

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

Fa'aoga .container-fluidmo se atigipusa lautele lautele, fa'asolo atoa le lautele o lau va'aiga.

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

O le Bootstrap e aofia ai le faʻaogaina, telefoni feaveaʻi muamua faʻasologa faʻapipiʻi e faʻatatau i le 12 koluma aʻo faʻatuputeleina le tele o le masini poʻo le vaʻaiga. E aofia ai vasega faʻavasegaina mo filifiliga faʻapipiʻi faigofie, faʻapea foʻi ma faʻafefiloi mamana mo le faʻatupuina o faʻasologa o semantic .

Folasaga

O lo'o fa'aogaina faiga fa'ata mo le faia o fa'asologa o itulau e ala i se faasologa o laina ma koluma e fa'amautu ai au mea. O le auala lea e galue ai le Bootstrap grid system:

E tatau ona tu'u laina i totonu ole .container(lautele fa'amau) po'o .container-fluidle (lautele atoa) mo le fa'aoga lelei ma le fa'aofuofu.
Fa'aoga laina e fai ai vaega faalava o koluma.
E tatau ona tu'u le anotusi i totonu o koluma, ma e na'o koluma e mafai ona avea ma fa'asologa vave o laina.
O vasega fa'avasega fa'ata'ita'i e pei .rowma .col-xs-4o lo'o avanoa mo le vave faia o fa'asologa o fa'asologa. E mafai fo'i ona fa'aogaina le fa'aitiitiga fa'afefiloi mo le tele o fa'ata'ita'iga fa'aoga.
O koluma e fai ai alavai (va i le va o mea o lo'o i totonu) e ala i padding. O lena pa'u e fa'asolo i laina mo le koluma muamua ma le koluma mulimuli e ala i le fa'aletonu pito i luga ole .rows.
O le itu le lelei o le mafua'aga lea o fa'ata'ita'iga o lo'o i lalo ua fa'ate'aina. E fa'apea o mea o lo'o i totonu o koluma fa'asologa o lo'o laina fa'atasi ma mea e le o fa'apipi'i.
O koluma fa'amau e faia e ala i le fa'ama'otiina o le aofa'i o koluma avanoa e sefululua e te mana'o e fa'alautele. Mo se faʻataʻitaʻiga, tolu koluma tutusa e faʻaaogaina tolu .col-xs-4.
Afai e sili atu i le 12 koluma e tu'u i totonu o le laina e tasi, o vaega ta'itasi o isi koluma o le a, e tasi le iunite, afifi i se laina fou.
E fa'aoga vasega fa'avasega i masini e tele lau lautele pe tutusa ma le lapo'a o le va'aiga, ma fa'asolo vasega fa'avasega e fa'atatau i masini laiti. O le mea lea, fa'ata'ita'iga o le fa'aogaina o so'o se .col-md-*vasega i se elemene o le a le gata ina a'afia ai lona sitaili i masini feololo ae fa'apea fo'i i masini tetele pe a leai se .col-lg-*vasega.

Vaavaai i faʻataʻitaʻiga mo le faʻaogaina o nei mataupu faavae i lau code.

Fa'asalalauga fesili

Matou te fa'aogaina fesili fa'asalalau nei i totonu o matou Less faila e fai ai fa'amaufa'ailoga autu i la matou faiga fa'asologa.

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

Matou te fa'alautele i nisi taimi i nei fa'asalalauga fesili e aofia ai max-widthle fa'atapula'aina o le CSS i se seti vaapiapi o masini.

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

Grid filifiliga

Va'ai pe fa'afefea ona galue vaega o le Bootstrap grid system i le tele o masini ma se laulau fa'aoga.

	Masini laiti fa'aopoopo Telefoni (<768px)	Masini laiti Laupapa (≥768px)	Meafaigaluega feololo Desktops (≥992px)	Masini tetele Desktops (≥1200px)
Amioga fa'asao	Fa'asaga i taimi uma	Pa'u i lalo e amata, faalava i luga a'e o mea motumotu
Laufanua lautele	Leai (taavale)	750px	970px	1170px
Ulua'i vasega	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`
# o koluma	12
Lautele o koluma	Ta'avale	~62px	~81px	~97px
Laufanua lautele	30px (15px i itu taʻitasi o se koluma)
Nestable	ioe
Offsets	ioe
Fa'atonu koluma	ioe

Fa'ata'ita'iga: Fa'aputu-i-fa'asaga

I le fa'aaogaina o se seti se tasi o .col-md-*vasega fa'avasega, e mafai ona e fa'atupuina se faiga fa'avasega fa'avae e amata fa'aputu i luga o masini feavea'i ma masini papalama (le la'ititi la'ititi i le la'ititi) a'o le'i fa'alava i luga o masini komepiuta (medium). Tuu koluma fa'asologa i so'o se .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>

Faataitaiga: Pusa vai

Su'e so'o se fa'asologa o fa'asologa fa'apipi'i-lautele i se fa'asologa atoa-lautele e ala i le suia o lou pito pito .containeri fafo i le .container-fluid.

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

Fa'ata'ita'iga: Fe'avea'i ma le komepiuta

E te le mana'o e fa'aputu au koluma i masini laiti? Fa'aoga isi vasega fa'avasega masini la'ititi ma feololo e ala i le fa'aopoopo .col-xs-* .col-md-*i au koluma. Va'ai le fa'ata'ita'iga o lo'o i lalo mo se manatu sili atu pe fa'apefea ona fa'aoga uma.

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

Fa'ata'ita'iga: Fe'avea'i, laulau, komepiuta

.col-sm-*Fausia i luga o le faʻataʻitaʻiga muamua e ala i le fatuina o faʻataʻitaʻiga sili atu ona malosi ma mamana ma vasega papalama .

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

Faataitaiga: afifiina o koluma

Afai e sili atu i le 12 koluma e tu'u i totonu o le laina e tasi, o vaega ta'itasi o isi koluma o le a, e tasi le iunite, afifi i se laina fou.

.col-xs-9

.col-xs-4
Talu mai le 9 + 4 = 13 > 12, o le vaega lea e 4-koluma-lautele e afifiina i se laina fou e avea ma iunite e tasi.

.col-xs-6 Koluma
mulimuli ane e fa'aauau i luga ole laina fou.

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

Toe setiina koluma tali

Faatasi ai ma vaega e fa o grids o loʻo avanoa e te ono tulaʻi mai i ni faʻafitauli, i nisi o vaʻaiga, e le manino lelei au koluma ona e maualuga le tasi nai lo le isi. Ina ia faʻaleleia lena mea, faʻaaoga se tuʻufaʻatasiga o a .clearfixma a matou vasega aoga tali .

.col-xs-6 .col-sm-3
Toe sui lau va'aiga va'ai pe siaki i lau telefoni mo se fa'ata'ita'iga.

.col-xs-6 .col-sm-3

<div class="row">
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>

  <!-- Add the extra clearfix for only the required viewport -->
  <div class="clearfix visible-xs-block"></div>

  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>

I le faaopoopo atu i le kiliaina o koluma i nofoaga malolo tali, atonu e te manaʻomia le toe setiina o faʻamau, tulei, pe toso . Va'ai i le fa'atinoga i le fa'ata'ita'iga fa'asologa .

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

Fa'ase'e koluma

Fa'asolo koluma i le itu taumatau e fa'aoga ai .col-md-offset-*vasega. O nei vasega e fa'ateleina le pito agavale o se koluma i *koluma. Mo se fa'ata'ita'iga, .col-md-offset-4fa'agaoioi .col-md-4luga o koluma e fa.

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

E mafai fo'i ona e fa'ato'a fa'asolo ese fa'asolo mai fa'asologa fa'avasega pito i lalo ma .col-*-offset-0vasega.

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

Koluma faamoega

Ina ia fa'aputu au mea i le fa'asologa fa'aletonu, fa'aopoopo se seti fou .rowma se seti o .col-sm-*koluma i totonu ole .col-sm-*koluma o iai. O laina fa'aputu e tatau ona aofia ai se seti o koluma e fa'aopoopo i le 12 pe itiiti ifo (e le mana'omia lou fa'aogaina uma o koluma e 12 o lo'o avanoa).

Laasaga 1: .col-sm-9

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

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

Fa'atonu koluma

Fa'afaigofie ona sui le fa'asologa o a matou koluma fa'apipi'i fa'atasi .col-md-push-*ma .col-md-pull-*vasega fa'avasega.

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

Fa'aitiitia fa'afefiloi ma fesuiaiga

I le faaopoopo atu i vasega faʻapipiʻi muamua mo faʻasologa vave, o Bootstrap e aofia ai le itiiti o fesuiaiga ma faʻafefiloi mo le faʻavaveina o au lava faʻasologa faigofie, semantic.

Fuafuaga

Fuafuaga e iloa ai le numera o koluma, le lautele o le alavai, ma le vaega o fesili a le aufaasālalau lea e amata ai ona opeopea koluma. Matou te fa'aogaina nei mea e fa'atupuina ai vasega fa'asologa o lo'o fa'amauina i luga, fa'apea fo'i ma fa'afefiloi masani o lo'o lisi atu i lalo.

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

Mixins

Fa'afefiloi e fa'aoga fa'atasi ma le fa'asologa o fesuiaiga e fa'atupu ai le CSS semantic mo koluma fa'asologa ta'itasi.

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

Fa'ata'ita'iga fa'aoga

E mafai ona e fesuia'i suiga i au lava tulaga fa'ale-aganu'u, pe na'o le fa'aogaina o mea fa'afefiloi ma latou tau fa'aletonu. O se fa'ata'ita'iga lea o le fa'aogaina o tulaga fa'aletonu e fai ai se fa'asologa o koluma e lua ma se va i le va.

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

Ulutala

O ulutala HTML uma, <h1>e ala i le <h6>, e avanoa. .h1e ala i .h6vasega o lo'o avanoa fo'i, aua pe a e mana'o e fa'afetaui le fa'aigoa o le vai papatisoga o se ulutala ae mana'o pea e fa'aali lau tusitusiga ile laina.

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

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

Fausia ni tusitusiga mama ma lona lua i so'o se ulutala e iai se fa'ailoga lautele <small>po'o le .smallvasega.

h1. Ulutala Bootstrap Tusitusiga lona lua

h2. Ulutala Bootstrap Tusitusiga lona lua

h3. Ulutala Bootstrap Tusitusiga lona lua

h4. Ulutala Bootstrap Tusitusiga lona lua

h5. Ulutala Bootstrap Tusitusiga lona lua

h6. Ulutala Bootstrap Tusitusiga lona lua

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

kopi tino

O le faaletonu font-sizeo le lalolagi a Bootstrap o le 14px , ma line-heightle 1.428 . E fa'aoga lea i le <body>ma parakalafa uma. E le gata i lea, <p>(parakalafa) maua se pito pito i lalo o le afa o latou laina maualuga (10px e le mafai).

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 sat amet non magna. Donec id elit non mi porta gravida and eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

<p>...</p>

Ta'ita'i kopi tino

Fai se palakalafa e tu matilatila e ala i le faaopoopo .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, o le mea lea e le masani ai.

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

Fausia i le Itiiti

Ole fua fa'akomipiuta e fa'avae i luga ole lua Fa'atauva'a Fa'atauva'a ile fesuiaiga.less : @font-size-basema @line-height-base. O le mea muamua o le fa'amaufa'ailoga faavae-tele o lo'o fa'aogaina atoa ma le lona lua o le laina-maualuga fa'avae. Matou te fa'aogaina na fesuiaiga ma nisi numera faigofie e fatu ai pito, paddings, ma laina-maualuga o matou ituaiga uma ma sili atu. Fa'asinomaga i latou ma fetuutuunai Bootstrap.

Elemene o tusitusiga i totonu

Faailoga tusi

Mo le faʻailogaina o se faʻasologa o tusitusiga ona o lona taua i se isi faʻamatalaga, faʻaaoga le <mark>pine.

E mafai ona e fa'aogaina le fa'ailoga fa'ailoga efa'ailogatusitusiga.

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

Ua tapeina tusitusiga

Mo le faʻaalia o poloka o tusitusiga ua tapeina faʻaaoga le <del>pine.

~~O le laina lea o tusitusiga o lo'o fa'atatauina o ni tusitusiga ua tapeina.~~

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

Tusi taia

Mo le faʻaalia o poloka o tusitusiga e le o toe faʻaoga faʻaoga le <s>pine.

~~O lenei laina o tusitusiga ua fa'amoemoe e fa'apea ua le toe sa'o.~~

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

Fa'aofia tusitusiga

Mo le faʻaalia o faʻaopoopoga i le pepa faʻaaoga le <ins>pine.

O lenei laina o tusitusiga e tatau ona faʻaogaina o se faʻaopoopoga i le pepa.

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

Vasevase tusitusiga

E vase lalo o tusitusiga fa'aaoga le <u>pine.

Ole laina ole tusitusiga ole a fa'aalia e pei ona vaseina

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

Fa'aaogā fa'ailoga fa'amamafa a le HTML ma sitaili mama.

Laiti tusitusiga

Mo le fa'amamafaina o le laina i totonu po'o poloka o tusitusiga, fa'aoga le <small>pine e fa'atulaga ai tusitusiga i le 85% le tele o le matua. O elemene ulutala e maua a latou lava mea font-sizemo <small>elemene fa'aputu.

E mafai fo'i ona e fa'aogaina se elemene i .smalltotonu ma suitulaga i so'o se <small>.

O lenei laina o tusitusiga e fa'atatau ia fa'atatauina o ni lolomi lelei.

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

Lototele

Mo le fa'amamafaina o se snippet o tusitusiga ma se fa'amamafa mamafa.

O le snippet o tusitusiga o lo'o i lalo o lo'o fa'aliliuina e pei o ni tusitusiga mata'utia .

<strong>rendered as bold text</strong>

Tusipasi

Mo le fa'amamafaina o se snippet o tusitusiga fa'atasi ai ma fa'ailoga.

O le snippet o tusitusiga o lo'o mulimuli mai o lo'o fa'aliliuina o ni tusitusiga fa'asisilima .

<em>rendered as italicized text</em>

Su'i elemene

Lagona le saoloto e faʻaoga <b>ma <i>i le HTML5. <b>e fa'atatau e fa'amanino ai upu po'o fasifuaitau e aunoa ma le fa'ailoaina atu o le taua ae <i>tele lava mo leo, upu fa'apitoa, ma isi.

Vasega fa'atulagaina

Fa'afaigofie ona toe fa'aoga tusitusiga i vaega fa'atasi ai ma vasega fa'aogaina o tusitusiga.

Tusi fa'aoga agavale.

Fa'aogatonu tusitusiga.

Fa'asinotonu i le taumatau.

Tusi ta'uamiotonuina.

Leai se afifi tusitusiga.

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

Vasega suiga

Suia tusitusiga i vaega ma vasega mataitusi tetele.

Tusi laiti.

Tusi tetele mataitusi.

Tusi mataitusi tetele.

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

Faapuupuuga

Fa'ata'ita'iga fa'atusa o le elemene HTML <abbr>mo fa'apu'upu'u ma fa'apuupuuga e fa'aalia ai le fa'alauteleina o fa'amatalaga i luga o le fa'afefe. O fa'apuupuuga o lo'o iai se titleuiga o lo'o i ai le pito i lalo e togitogia i lalo ma se fa'ailo fesoasoani i luga o le fa'afefe, e tu'uina atu ai fa'amatalaga fa'aopoopo i luga o le fa'afefe ma tagata fa'aoga tekinolosi fesoasoani.

Faapuupuu faavae

O se faapuupuuga o le upu uiga o le attr .

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

Initialism

Fa'aopoopo .initialismi se fa'apu'upu'u mo se fa'atama'i la'ititi laititi.

HTML o le mea sili lea talu mai le fasi falaoa.

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

Tulaga

Tuuina atu faʻamatalaga faʻafesoʻotaʻi mo tuaa lata ane poʻo le tino atoa o le galuega. Fa'asao le fa'atulagaina e ala i le fa'au'uina o laina uma ile <br>.

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

Igoa Atoa
[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

Mo le siiina mai o poloka o mataupu mai se isi punaoa i totonu o lau pepa.

Fa'atonu poloka upusii

Afifi <blockquote>so'o se HTML e pei o le upusii. Mo upusii tuusa'o, matou te fautuaina se <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>

Filifiliga poloka upusii

Suiga sitaili ma anotusi mo suiga faigofie i luga o se tulaga masani <blockquote>.

Fa'aigoa o se puna

Fa'aopoopo le a <footer>mo le fa'ailoaina o le puna. Afi le igoa o le galuega puna i totonu <cite>.

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

O se tasi lauiloa i le 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>

Su'i fa'aaliga

Fa'aopoopo .blockquote-reversemo se poloka upusii fa'atasi ai ma mea e fetaui tonu.

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

O se tasi lauiloa i le Source Title

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

Lisi

Le fa'atonu

O se lisi o aitema e le taua tele le fa'atonuga .

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

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

Fa'atonu

Se lisi o aitema e matua taua tele le fa'atonuga .

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

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

Le fa'ailoga

Aveese le fa'aletonu list-stylema le itu agavale i luga o mea lisi (na'o tamaiti vave). E na'o le fa'aogaina o mea ole lisi a tamaiti , o lona uiga e te mana'omia le fa'aopoopoina o le vasega mo so'o se lisi fa'amoega.

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

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

I totonu

Tuu mea uma o le lisi i luga o se laina e tasi display: inline-block;ma sina paʻu mama.

Lorem ipsum
Phasellus iaculis
Nulla volutpat

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

Fa'amatalaga

Se lisi o faaupuga ma a latou fa'amatalaga fa'atatau.

Lisi fa'amatalaga: Ole lisi fa'amatalaga e lelei atoatoa mo le fa'amalamalamaina o upu.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.; Donec id elit non mi porta gravida and eget metus.
Malesuada porta: Etiam porta sem malesuada magna mollis euismod.

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

Fa'amatalaga fa'asaga

Fai faaupuga ma fa'amatalaga ile <dl>laina fa'afa'afa'afa. E amata fa'aputu pei o <dl>s fa'aletonu, ae a fa'alautele le navbar, fa'apea fo'i ona fai mea nei.

Lisi fa'amatalaga: Ole lisi fa'amatalaga e lelei atoatoa mo le fa'amalamalamaina o upu.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.; Donec id elit non mi porta gravida and eget metus.
Malesuada porta: Etiam porta sem malesuada magna mollis euismod.
Felis euismod semper eget lacinia: Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

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

Otometi tipitipi

O lisi fa'amatalaga fa'asaga'i o le a fa'a'oti 'upu e umi tele e fetaui i le koluma agavale ma text-overflow. I va'ai va'ai vaapiapi, o le a suia i le fa'atulagaina fa'aputu fa'aletonu.

I totonu

Afifi fasi laina fa'ailoga fa'ailoga ma <code>.

Mo se faʻataʻitaʻiga, <section>e tatau ona afifi i totonu.

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

Fa'aoga tagata

Fa'aoga le <kbd>fa'ailoga e fa'ailoa ai mea e masani ona fa'aulu ile piano.

Ina ia fesuia'i fa'atonuga, ta'i cdsoso'o ma le igoa o le fa'atonuga.
Ina ia teuteu tulaga, fetaomi 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>

Poloka faavae

Fa'aoga <pre>mo le tele o laina code. Ia mautinoa e sola ese mai so'o se puipui pito i totonu o le fa'ailoga mo le fa'aliliuga talafeagai.

<p>Fa'ata'ita'i tusitusiga iinei...</p>

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

E mafai ona e fa'aopoopo le .pre-scrollablevasega, lea e fa'atulaga ai le maualuga-maualuga o le 350px ma tu'uina atu ai le y-axis scrollbar.

Fuafuaga

Mo le faʻaalia o fesuiaiga faʻaaoga le <var>tag.

y = m x + b

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

Fa'ata'ita'iga galuega

Mo le fa'ailoaina o poloka fa'ata'ita'iga mea e maua mai se polokalame fa'aaoga le <samp>pine.

O lenei tusitusiga o lo'o fa'atatau e fa'atatauina o se fa'ata'ita'iga o mea na maua mai se polokalame komepiuta.

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

Fa'ata'ita'iga fa'avae

Mo le fa'avasegaina fa'avae—omea mama ma na'o vaeluaga fa'alava-fa'aopoopo le vasega fa'avae .tablei so'o se <table>. E foliga mai e sili atu le faʻaaogaina, ae ona o le faʻaogaina lautele o laulau mo isi faʻapipiʻi e pei o kalena ma tagata e piki aso, ua matou filifili e vavae ese a matou sitaili laulau masani.

Fa'amatalaga laulau e filifili ai.
#	Igoa muamua	Fa'aiu	Username
1	Mareko	Otto	@mdo
2	Iakopo	Thornton	@ga'o
3	Larry	le Manu	@twitter

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

laina laina

Fa'aoga .table-stripede fa'aopoopo ai le zebra-striping i so'o se laina laulau i totonu o le <tbody>.

Fesoasoani cross-browser

E fa'avasega laulau e ala ile :nth-childCSS filifili, lea e le maua ile Internet Explorer 8.

#	Igoa muamua	Fa'aiu	Username
1	Mareko	Otto	@mdo
2	Iakopo	Thornton	@ga'o
3	Larry	le Manu	@twitter

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

Laupapa tuaoi

Fa'aopoopo .table-borderedmo tuaoi i itu uma o le laulau ma sela.

#	Igoa muamua	Fa'aiu	Username
1	Mareko	Otto	@mdo
2	Iakopo	Thornton	@ga'o
3	Larry	le Manu	@twitter

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

Fa'ae'e laina

Fa'aopoopo .table-hoverina ia mafai ai ona fa'ae'e le tulaga i luga o laina laulau i totonu ole <tbody>.

#	Igoa muamua	Fa'aiu	Username
1	Mareko	Otto	@mdo
2	Iakopo	Thornton	@ga'o
3	Larry	le Manu	@twitter

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

Laupapa fa'aputu

Fa'aopoopo .table-condensedina ia fa'apipi'i fa'atasi laulau e ala i le tipi fa'afafa o pa'u sela.

#	Igoa muamua	Fa'aiu	Username
1	Mareko	Otto	@mdo
2	Iakopo	Thornton	@ga'o
3	Larry le Manu		@twitter

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

Vasega fa'atatau

Fa'aoga vasega fa'apitoa e valivali ai laina laulau po'o sela ta'itasi.

Vasega	Fa'amatalaga
`.active`	Fa'aoga le lanu fa'afefe i se laina po'o se sela patino
`.success`	Fa'ailoa mai se gaioiga manuia pe lelei
`.info`	Fa'ailoa mai se suiga fa'amatalaga e le tutusa po'o se gaioiga
`.warning`	Fa'ailoa mai ai se lapataiga e ono mana'omia le gauai
`.danger`	Fa'ailoa se gaioiga mata'utia pe ono le lelei

#	Ulutala koluma	Ulutala koluma	Ulutala koluma
1	Koluma mataupu	Koluma mataupu	Koluma mataupu
2	Koluma mataupu	Koluma mataupu	Koluma mataupu
3	Koluma mataupu	Koluma mataupu	Koluma mataupu
4	Koluma mataupu	Koluma mataupu	Koluma mataupu
5	Koluma mataupu	Koluma mataupu	Koluma mataupu
6	Koluma mataupu	Koluma mataupu	Koluma mataupu
7	Koluma mataupu	Koluma mataupu	Koluma mataupu
8	Koluma mataupu	Koluma mataupu	Koluma mataupu
9	Koluma mataupu	Koluma mataupu	Koluma mataupu

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

Tu'uina atu le uiga i tekinolosi fesoasoani

O le fa'aogaina o le lanu e fa'aopoopo ai le uiga i se laina laulau po'o se potu ta'itasi e maua ai na'o se fa'aaliga va'aia, lea o le a le fa'ailoaina atu i tagata fa'aoga tekinolosi fesoasoani - e pei o le au faitau mata. Ia fa'amautinoa o fa'amatalaga o lo'o fa'ailoaina e le lanu e manino mai le anotusi lava ia (le tusitusiga va'aia i le laina o le laulau talafeagai), po'o le fa'aofiina i isi auala, e pei o tusitusiga fa'aopoopo o lo'o natia ma le .sr-onlyvasega.

laulau tali

Fausia ni laulau talileleia e ala i le afifiina o so'o se mea e fa'asolo .tablei .table-responsiveluga o masini laiti (i lalo ole 768px). A e va'ai i so'o se mea e sili atu i le 768px lautele, e te le va'aia se eseesega i nei laulau.

Tu'u sa'o/tapuina

O laulau talitali e fa'aoga ai le overflow-y: hidden, lea e tipi ese ai so'o se mea e alu i tua atu o pito pito i lalo po'o pito i luga ole laulau. Aemaise lava, e mafai e lenei mea ona tipi ese menus pa'ū ma isi widgets isi vaega.

Firefox ma seti fanua

O lo'o iai ni sitaili fa'ailoga fa'aletonu ole Firefox widthe fa'alavelave ai le laulau tali. E le mafai ona soloia lenei mea e aunoa ma se taʻavale faʻapitoa a Firefox matou te le tuʻuina atu i Bootstrap:

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

Mo nisi faʻamatalaga, faitau lenei tali Stack Overflow .

#	Ulutala laulau	Ulutala laulau	Ulutala laulau	Ulutala laulau	Ulutala laulau	Ulutala laulau
1	Laulau laulau	Laulau laulau	Laulau laulau	Laulau laulau	Laulau laulau	Laulau laulau
2	Laulau laulau	Laulau laulau	Laulau laulau	Laulau laulau	Laulau laulau	Laulau laulau
3	Laulau laulau	Laulau laulau	Laulau laulau	Laulau laulau	Laulau laulau	Laulau laulau

#	Ulutala laulau	Ulutala laulau	Ulutala laulau	Ulutala laulau	Ulutala laulau	Ulutala laulau
1	Laulau laulau	Laulau laulau	Laulau laulau	Laulau laulau	Laulau laulau	Laulau laulau
2	Laulau laulau	Laulau laulau	Laulau laulau	Laulau laulau	Laulau laulau	Laulau laulau
3	Laulau laulau	Laulau laulau	Laulau laulau	Laulau laulau	Laulau laulau	Laulau laulau

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

Fa'ata'ita'iga fa'avae

E otometi lava ona maua e pulega fa'apitoa ta'ito'atasi nisi sitaili fa'alelalolagi. O tusitusiga uma <input>, <textarea>, ma <select>elemene o lo'o i ai .form-controlua seti i width: 100%;le fa'aletonu. Afifi fa'ailoga ma fa'atonu i totonu .form-groupmo le avanoa sili ona lelei.

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

Aua le fa'afefiloi kulupu fo'i ma kulupu tu'ufa'atasi

Aua ne'i fa'afefiloi sa'o vaega fa'atasi ma vaega fa'aofiofi . Ae, fa'aafi le vaega o lo'o i totonu o le vaega fomu.

Fomu i totonu

Fa'aopoopo .form-inlinei lau fomu (e le tatau ona a <form>) mo fa'atonuga agavale ma fa'atonuga i totonu. E na'o le fa'aoga i fomu i totonu o va'aiga va'ai e le itiiti ifo i le 768px le lautele.

Atonu e mana'omia le lautele fa'apitoa

O fa'aoga ma filifiliga na width: 100%;fa'aaoga e ala i le fa'aletonu i Bootstrap. I totonu o fomu fa'a-inline, matou te toe setiina ina width: auto;ia tele pulega e mafai ona nofo i luga o le laina tutusa. Fa'alagolago i lau fa'atulagaina, e ono mana'omia ni fa'aopoopoga fa'apitoa lautele.

Fa'aopoopo i taimi uma igoa

O le a iai ni fa'afitauli a le au faitau mata i au fomu pe afai e te le fa'aofiina se fa'ailoga mo fa'aoga uma. Mo nei fomu i totonu, e mafai ona e nanaina igoa e fa'aaoga ai le .sr-onlyvasega. O lo'o i ai isi auala fa'aopoopo e tu'uina atu ai se fa'ailoga mo tekinolosi fesoasoani, e pei o le aria-label, aria-labelledbypo'o le titleuiga. Afai e leai se tasi o nei mea, e mafai e le au faitau lautusi ona faʻaogaina le placeholderuiga, pe a iai, ae ia maitauina e placeholderle fautuaina le faʻaaogaina e suitulaga i isi metotia faʻailoga.

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

Faiga faalava

Fa'aaoga vasega fa'avasega muamua a Bootstrap e fa'aoga ai fa'ailoga ma vaega o fomu fa'atonu i se fa'alava fa'alava e ala i le fa'aopoopoina .form-horizontali le fomu (e le tatau ona avea ma <form>). O le faia o lena mea e suia .form-groupai le amio e pei o laina laina, o lea e le manaʻomia ai .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>

Pulea lagolago

Fa'ata'ita'iga o fa'atonuga fa'atonu o lo'o lagolagoina i se fa'ata'ita'iga fomu fa'atulagaina.

Ulufale mai

Ole tele ole fa'atonutonuina o fomu, fanua fa'aoga e fa'atatau i tusitusiga. E aofia ai le lagolago mo ituaiga HTML5 uma: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, telma color.

Tu'i ta'utinoga mana'omia

Fa'ato'a fa'avasegaina fa'ailoga pe a typefa'ailoa lelei.

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

Vaega fa'aofi

Ina ia fa'aopoopo tusitusiga fa'atasi po'o fa'amau i luma ma/po'o le mae'a o so'o se tusitusiga fa'avae <input>, siaki le vaega o lo'o tu'u iai .

Textarea

Pulea fomu lea e lagolagoina le tele o laina o tusitusiga. Suia le rowsuiga pe a mana'omia.

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

Pusa siaki ma leitio

O pusa siaki e mo le filifilia o se tasi po'o ni nai filifiliga i se lisi, ae o leitio e mo le filifilia o se tasi filifiliga mai le tele.

O lo'o lagolagoina pusa siaki ma leitio fa'aletonu, ae ia tu'uina atu se fa'ailo "le-fa'atagaina" i luga o le fa'amalo o le matua <label>, e tatau ona e fa'aopoopo le .disabledvasega i le matua .radio, .radio-inline, .checkbox, po'o .checkbox-inline.

Fa'atonu (fa'aputu)

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

Pusa siaki ma leitio

Fa'aoga le .checkbox-inlinepo'o .radio-inlinevasega i se faasologa o pusa siaki po'o leitio mo fa'atonuga o lo'o fa'aalia i luga o le laina tutusa.

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

Pusa siaki ma leitio e leai ni fa'ailoga tusitusiga

Afai e leai sau tusitusiga i totonu o le <label>, o le faʻaoga e faʻatulagaina e pei ona e faʻamoemoeina. I le taimi nei, e na'o pusa siaki ma leitio e leai ni laina. Manatua e tu'u pea nisi ituaiga o fa'ailoga mo tekinolosi fesoasoani (mo se fa'ata'ita'iga, fa'aoga 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>

Filifilia

Manatua o le tele o menus filifilia a le atunuʻu-e pei o Safari ma Chrome-e iai tulimanu lapotopoto e le mafai ona suia e ala i border-radiusmeatotino.

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

Mo <select>fa'atonuga fa'atasi ai ma le multipleuiga, e tele filifiliga o lo'o fa'aalia e le mafai.

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

Pulea tumau

Afai e te manaʻomia le tuʻuina o tusitusiga manino i tafatafa o se pepa faʻailoga i totonu o se fomu, faʻaoga le .form-control-staticvasega i luga o se <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>

Tulaga taula'i

Matou te aveese outlinesitaili faʻaletonu i nisi o faʻatonuga ma faʻaoga se box-shadowi lona tulaga mo :focus.

`:focus`Tulaga fa'ata

O le faʻataʻitaʻiga faʻaoga o loʻo i luga e faʻaaoga ai sitaili masani i totonu oa matou faʻamaumauga e faʻaalia ai le :focussetete i luga o se .form-control.

Tulaga le atoatoa

Fa'aopoopo le disableduiga o le boolean i luga o se fa'aoga e taofia ai fegalegaleaiga a tagata fa'aoga. O mea fa'aoga fa'aletonu e foliga mai e mama ma fa'aopoopo se not-allowedfa'ailo.

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

Fa'atonu vaega fanua

Fa'aopoopo le disableduiga ile a <fieldset>e tape uma ai fa'atonuga <fieldset>ile taimi e tasi.

Fa'aaliga e uiga i feso'ota'iga galuega a`<a>`

Ona o le faaletonu, o le a faia e tagata su'esu'e ia fa'atonuga uma ( <input>, <select>ma <button>elemene) i totonu o se <fieldset disabled>fa'aletonu, e taofia ai feso'ota'iga i luga o le keyboard ma le isumu. Ae peita'i, afai o lau fomu e aofia ai fo'i <a ... class="btn btn-*">elemene, o le a na'o se sitaili o le pointer-events: none. E pei ona taʻua i le vaega e uiga i le tulaga faʻaletonu mo faʻamau (faʻapitoa i le vaega pito i lalo mo elemene taula), o lenei CSS meatotino e leʻi faʻasalaina ma e leʻo lagolagoina atoatoa ile Opera 18 ma lalo, poʻo le Internet Explorer 11, ma manumalo. 'e taofia tagata fa'aoga keyboard mai le mafai ona taula'i pe fa'agaoioia nei so'oga. O lea ina ia saogalemu, faʻaaoga le JavaScript masani e faʻamalo ai ia soʻotaga.

Fesoasoani cross-browser

E ui o Bootstrap o le a faʻaogaina nei sitaili i suʻesuʻega uma, Internet Explorer 11 ma lalo e le lagolagoina atoatoa le disableduiga ile <fieldset>. Fa'aoga le JavaScript masani e tape ai le seti fanua i nei su'esu'ega.

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

Faitau na'o le setete

Fa'aopoopo le readonlyuiga o le boolean i luga o se mea fa'aoga e taofia ai le suia o le tau o le mea. O mea e fai na'o le faitau e foliga mama (pei lava o mea fa'aoga ua le atoatoa), ae taofi le fa'aupu masani.

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

Fesoasoani tusitusiga

Poloka tulaga fesoasoani tusitusiga mo fa'atonuga.

Fa'afeso'ota'i tusitusiga fesoasoani ma fa'atonutonu fomu

O tusitusiga fesoasoani e tatau ona feso'ota'i manino ma le fa'atonutonuina o fomu e fa'atatau i le fa'aogaina o le aria-describedbyuiga. O lenei mea o le a faʻamautinoa ai o tekinolosi fesoasoani - e pei o le au faitau mataʻitusi - o le a faʻasalalau lenei fesoasoani fesoasoani pe a taulaʻi pe ulufale le tagata faʻaoga i le pule.

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

Fa'amaonia setete

Bootstrap e aofia ai sitaili faʻamaonia mo mea sese, lapataiga, ma tulaga manuia i luga o faʻatonuga. Fa'aoga, fa'aopoopo .has-warning, .has-error, po'o .has-successle elemene matua. So'o se .control-label, .form-control, ma .help-blocktotonu o lena elemene o le a maua sitaili fa'amaonia.

Tu'uina atu le tulaga fa'amaonia i tekinolosi fesoasoani ma tagata fa'aoga lanu

O le fa'aogaina o nei sitaili fa'amaonia e fa'ailoa ai le tulaga o le fa'atonutonuina o fomu e na'o se fa'aaliga vaaia, fa'avae lanu, lea e le fa'ailoa atu i tagata fa'aoga tekinolosi fesoasoani - e pei o le au faitau mata - po'o tagata tauaso.

Ia mautinoa o loʻo tuʻuina atu foi se isi faʻamatalaga o le setete. Mo se faʻataʻitaʻiga, e mafai ona e faʻapipiʻi se faʻamatalaga e uiga i le setete i totonu o le faʻatonuga o <label>tusitusiga lava ia (e pei o le tulaga i le faʻataʻitaʻiga code lea), faʻapipiʻi se Glyphicon (faatasi ai ma isi tusitusiga talafeagai e faʻaaoga ai le .sr-onlyvasega - vaʻai i le Glyphicon faʻataʻitaʻiga ), poʻo le tuʻuina atu o se fesoasoani faaopoopo poloka tusitusiga. Aemaise lava mo tekinolosi fesoasoani, e mafai foi ona tu'uina atu i ai se aria-invalid="true"uiga le pulea o fomu.

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

Fa'atasi ai ma ata e filifili ai

E mafai fo'i ona e fa'aopoopoina fa'ailoga manatu fa'apitoa ma le fa'aopoopoina .has-feedbackma le fa'ailoga sa'o.

O fa'ailoga fa'amatalaga e na'o mea e fa'aoga i tusitusiga <input class="form-control">.

Fa'ailoga, fa'ailoga, ma vaega fa'aoga

E mana'omia le fa'atulagaina o fa'ailoga o fa'amatalaga mo mea e fai e aunoa ma se fa'ailoga ma mo vaega o lo'o iai se fa'aopoopo i le itu taumatau. O lo'o fa'amalosia malosi oe e tu'uina atu fa'ailoga mo mea fa'aoga uma mo mafua'aga e mafai ona maua. Afai e te mana'o e taofia igoa mai le fa'aalia, natia i le .sr-onlyvasega. Afai e tatau ona e faia e aunoa ma ni fa'ailoga, fetu'una'i le toptau o le fa'aikona fa'amatalaga. Mo vaega fa'aoga, fetuutuunai le righttau i se tau pika talafeagai e fa'atatau i le lautele o lau fa'aopoopo.

Tu'u atu le uiga o le fa'ailoga i tekinolosi fesoasoani

Ina ia mautinoa o tekinolosi fesoasoani - e pei o le au faitau mata - saʻo le faʻamatalaina o le uiga o se faʻailoga, e tatau ona faʻapipiʻi faʻamatalaga natia faaopoopo i le .sr-onlyvasega ma faʻafesoʻotaʻi manino ma le faʻatonutonuina o foliga e fesoʻotaʻi ma le faʻaaogaina aria-describedby. I le isi itu, ia mautinoa o le uiga (mo se faʻataʻitaʻiga, o le mea moni o loʻo i ai se lapataiga mo se fanua faʻapipiʻi tusitusiga) o loʻo tuʻuina atu i se isi faiga, e pei o le suia o tusitusiga o le mea moni <label>e fesoʻotaʻi ma le faʻatonutonuina o fomu.

E ui lava o faʻataʻitaʻiga o loʻo mulimuli mai ua uma ona taʻua le tulaga faʻamaonia o latou faʻatonuga taʻitasi i totonu o le <label>tusitusiga lava ia, o le metotia o loʻo i luga (faʻaaogaina .sr-onlytusitusiga ma aria-describedby) ua faʻapipiʻiina mo faʻamoemoega faʻataʻitaʻiga.

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

Fa'ailoga fa'apitoa ile fa'ata'atia ma fa'ainline fomu

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

Fa'ailoga fa'apitoa ma fa'ailoga `.sr-only`natia

Afai e te fa'aogaina le .sr-onlyvasega e nana ai se fa'atonuga <label>(nai lo le fa'aogaina o isi fa'ailoga, e pei o le aria-labeluiga), o le a otometi lava ona fetu'una'i e Bootstrap le tulaga o le fa'ailoga pe'ā fa'aopoopoina.

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

Puleaina le fuaina

Seti maualuga e faʻaaoga ai vasega pei o .input-lg, ma seti lautele e faʻaaoga ai vasega koluma laina pei ole .col-lg-*.

Fuafuaina maualuga

Fausia ni pu'upu'u umi pe pupuu e fa'afetaui le tele o fa'amau.

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

Fa'asagaga fa'asaga fa'avasega vaega

Fa'atele vave fa'ailoga ma fau fa'atonu i totonu .form-horizontale ala i le fa'aopoopo .form-group-lgpe .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>

Fa'avasegaina o koluma

Fa'apipi'i mea fa'aoga i koluma fa'ata, po'o so'o se mea fa'aleaganu'u matua, e fa'afaigofie ona fa'amalosia le lautele mana'omia.

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

Fa'ailoga fa'amau

Fa'aaoga le ki vasega i luga o se <a>, <button>, po'o se <input>elemene.

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

Fa'aoga fa'apitoa

E ui e mafai ona fa'aogaina vasega fa'amau <a>ma <button>elemene, ae na'o <button>elemene e lagolagoina i totonu o tatou vaega nav ma navbar.

So'oga e fai fa'amau

Afai o <a>elemene e faʻaaogaina e fai ma faʻamau - faʻaosoina galuega i totonu o le itulau, nai lo le faʻafeiloaʻi i se isi pepa poʻo se vaega i totonu o le itulau o loʻo i ai nei - e tatau foi ona tuʻuina atu i ai se role="button".

Fa'aliliuga su'esu'e

I le avea ai o se faiga sili ona lelei, matou te fautuaina tele le faʻaaogaina o le<button> elemene i so'o se taimi e mafai ai e fa'amautinoa ai le fa'atusaina o su'esu'ega fa'asalalau.

Faatasi ai ma isi mea, o loʻo i ai se pusa i Firefox <30 e taofia ai i matou mai le setiina line-heighto <input>faʻamau faʻavae, ma mafua ai ona latou le fetaui ma le maualuga o isi faʻamau i luga o Firefox.

Filifiliga

Fa'aoga so'o se vasega o fa'amau avanoa e fa'atopetope ai se fa'amau fa'ailoga.

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

Tu'uina atu le uiga i tekinolosi fesoasoani

O le fa'aogaina o le lanu e fa'aopoopo ai le uiga i se fa'amau e maua ai na'o se fa'aaliga va'aia, lea o le a le tu'uina atu i tagata fa'aoga o tekonolosi fesoasoani - e pei o le au faitau mata. Ia fa'amautinoa o fa'amatalaga o lo'o fa'ailogaina e le lanu e manino mai le anotusi lava ia (le tusitusiga va'aia o le ki), pe fa'aofi mai i isi auala, e pei o isi tusitusiga fa'aopoopo natia i le .sr-onlyvasega.

Tele

Mana'o i fa'amau tetele pe la'ititi? Fa'aopoopo .btn-lg, .btn-sm, po'o .btn-xsle tele fa'aopoopo.

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

Fausia fa'amau fa'apoloka—o mea e fa'alautele le lautele atoa o se matua—e ala i le fa'aopoopoina .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>

Tulaga toaga

O fa'amau o le a foliga oomi (ma le pogisa pito i tua, pogisa tuaoi, ma fa'aofi ata lafoia) pe a gaioi. Mo <button>elemene, e faia lenei mea e ala i :active. Mo <a>elemene, ua faia i le .active. Ae ui i lea, e mafai ona e faʻaogaina .activei luga o <button>le s (ma aofia ai le aria-pressed="true"uiga) pe afai e te manaʻomia le toe faʻaaogaina o le setete galue i se polokalame.

Elemene faamau

E le manaʻomia le faʻaopopo :activeona o se pseudo-class, ae afai e te manaʻomia le faʻamalosia o foliga tutusa, alu i luma ma faʻaopopo .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>

Elemene taula

Fa'aopoopo le .activevasega i <a>fa'amau.

So'oga muamua So'oga

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

Tulaga le atoatoa

Fai fa'amau e foliga le mafai ona kiliki e ala i le toe fa'afo'i i tua i le opacity.

Elemene faamau

Fa'aopoopo le disableduiga i <button>fa'amau.

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

Fesoasoani cross-browser

Afai e te fa'aopoopoina le disableduiga ile <button>, Internet Explorer 9 ma lalo ole a fa'aefuefu tusitusiga ma se ata leaga e le mafai ona matou fa'aleleia.

Elemene taula

Fa'aopoopo le .disabledvasega i <a>fa'amau.

So'oga muamua So'oga

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

Matou te faʻaaogaina .disabledo se vasega aoga iinei, tutusa ma le .activevasega masani, o lea e leai se prefix e manaʻomia.

So'otaga galuega fa'atino

O lenei vasega e fa'aoga pointer-events: nonee taumafai e fa'amalo le feso'ota'iga o <a>le s, ae o lena CSS meatotino e le'i fa'asalaina ma e le'o atoatoa ona lagolagoina i le Opera 18 ma lalo ifo, po'o le Internet Explorer 11 pointer-events: none. o lo'o tumau pea le le a'afia o folauga, o lona uiga e mafai lava ona fa'agaoioi e le au fa'aoga keyboard ma tagata fa'aoga o tekonolosi fesoasoani nei feso'ota'iga. O lea ina ia saogalemu, faʻaaoga le JavaScript masani e faʻamalo ai ia soʻotaga.

Ata tali

O ata i Bootstrap 3 e mafai ona faʻafeiloaʻi e ala i le faʻaopoopoga o le .img-responsivevasega. E fa'atatau lenei mea max-width: 100%;, height: auto;ma display: block;i le ata ina ia fua lelei i le elemene matua.

E fa'aogatotonu ata e fa'aoga ai le .img-responsivevasega, fa'aoga .center-blocknai lo le .text-center. Va'ai le vaega o vasega fesoasoani mo nisi fa'amatalaga e uiga i le .center-blockfa'aogaina.

Ata SVG ma IE 8-10

I le Internet Explorer 8-10, ata SVG ma .img-responsivee le tutusa le lapopoa. Ina ia faaleleia lenei mea, faʻaopopo width: 100% \9;pe a manaʻomia. E le otometi ona fa'aogaina e Bootstrap lenei mea ona e fa'alavelave ai isi fa'asologa o ata.

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

Fa'atusa ata

Fa'aopoopo vasega i se <img>elemene e fa'afaigofie ona fa'avasega ata i so'o se galuega.

Fesoasoani cross-browser

Ia manatua o Internet Explorer 8 e leai se lagolago mo tulimanu lapotopoto.

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

Lanu fa'atatau

Fa'ailoa atu uiga e ala i lanu ma sina vaega fa'amamafa vasega aoga. E mafai fo'i ona fa'aoga i so'otaga ma o le a fa'apouliuligia i luga o le fa'ae'e pei lava o a tatou sitaili feso'ota'iga.

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

Fefaʻatauaʻiga faʻapitoa

O nisi taimi e le mafai ona fa'aogaina vasega fa'amamafa ona o le fa'apitoa o le isi tagata filifilia. I le tele o tulaga, o se fofo talafeagai o le afifiina o lau tusitusiga i se <span>ma le vasega.

Tu'uina atu le uiga i tekinolosi fesoasoani

O le fa'aogaina o le lanu e fa'aopoopo ai le uiga e na'o se fa'aaliga va'aia, e le fa'ailoa atu i tagata fa'aoga o tekonolosi fesoasoani - e pei o le au faitau mata. Ia mautinoa o faʻamatalaga o loʻo faʻaalia e le lanu a le o manino mai le anotusi lava ia (o lanu faʻapitoa e faʻaaogaina e faʻamalosia ai uiga o loʻo i ai i totonu o le tusitusiga / faʻailoga), pe faʻapipiʻi i isi auala, e pei o tusitusiga faaopoopo natia ma le .sr-onlyvasega .

Tala fa'atatau

E tutusa ma vasega lanu o tusitusiga, faigofie ona seti le talaaga o se elemene i soʻo se vasega faʻamatalaga. O vaega taula o le a pogisa i luga o le faʻafefe, pei o vasega tusitusiga.

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

Fefaʻatauaʻiga faʻapitoa

O nisi taimi e le mafai ona fa'aogaina vasega fa'apitoa ona o le fa'apitoa o le isi tagata filifilia. I nisi tulaga, o se fofo talafeagai o le afifiina o mea o loʻo i totonu o lau elemene i le a <div>ma le vasega.

Tu'uina atu le uiga i tekinolosi fesoasoani

E pei o lanu fa'atatau , fa'amautinoa o so'o se fa'auiga e fa'ailoa mai e ala i lanu o lo'o fa'aalia fo'i i se fa'asologa e le na'o le fa'aaliga.

Tapuni aikona

Fa'aoga le fa'aigoa tapuni lautele mo le fa'ate'aina o mea e pei o fa'ata'ita'iga ma fa'aaliga.

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

Carets

Fa'aaogā fa'ailoga e fa'ailoa ai le fa'agaioiga ma le fa'atonuga. Manatua o le a toe faʻafoʻi faʻafuaseʻi le faʻamaufaʻailoga ile lisi o meaʻai .

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

Opeopea vave

Fa'afefe se elemene i le agavale po'o le taumatau ma se vasega. !importanto lo'o aofia ai e aloese mai fa'afitauli fa'apitoa. E mafai foʻi ona faʻaaogaina vasega o mea faʻafefiloi.

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

Fa'atotonugatonu poloka

Seti se elemene display: blockma faaogatotonu e ala i le margin. E maua o se mixin ma vasega.

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

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

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

Fa'amamafi

Fa'amanino faigofie floats e ala i le fa'aopoopo .clearfix i le elemene matua . Fa'aogaina le micro clearfix e pei ona fa'alauiloa e Nicolas Gallagher. E mafai foi ona faʻaaogaina e avea o se paluga.

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

Fa'aali ma nana mea

Faʻamalosi se elemene e faʻaalia pe natia ( e aofia ai mo le au faitau mata ) faʻatasi ai ma le faʻaogaina .showma .hiddenvasega. O nei vasega e faʻaaogaina !importante aloese ai mai feteʻenaʻiga faʻapitoa, pei o le faʻafefe vave . E na'o avanoa mo le fesuia'i tulaga poloka. E mafai foʻi ona faʻaaogaina e pei o mixins.

.hideo lo'o avanoa, ae e le o taimi uma e a'afia ai le au faitau mata'itusi ma ua fa'ate'aina e pei o le v3.0.1 . Fa'aaoga .hiddenpo'o .sr-onlynai lo.

E le gata i lea, .invisiblee mafai ona faʻaoga e sui na o le vaʻaia o se elemene, o lona uiga displaye le o suia ma o le elemene e mafai lava ona aʻafia ai le tafe o le pepa.

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

Tusi faitau lau mata ma mea e fa'atautaia ai le keyboard

Natia se elemene i masini uma sei vagana ai le au faitau mata ma .sr-only. Fa'atasi .sr-onlyma .sr-only-focusablee toe fa'aali le elemene pe a taula'i (fa'ata'ita'iga a le fa'aoga na'o le keyboard). E mana'omia mo le mulimulita'i i faiga sili ona faigofie ona maua . E mafai foi ona faʻaaogaina e pei o mixins.

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

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

Suiga ata

Fa'aoga le .text-hidevasega po'o le mixin e fesoasoani e sui ai le anotusi o le elemene i se ata pito i tua.

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

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

Mo le televave o le atina'eina o le telefoni feavea'i, fa'aoga nei vasega aoga mo le fa'aalia ma le nanaina o mea e ala ile masini e ala ile su'esu'ega fa'asalalau. O lo'o aofia ai fo'i vasega fa'aoga mo le fesuia'iina o anotusi pe a lolomi.

Taumafai e fa'aoga nei mea ile fa'atapula'aina ma aloese mai le faia o fa'aliliuga 'ese'ese atoa ole saite e tasi. Nai lo lena, ia fa'aoga e fa'aopoopo i fa'amatalaga a masini ta'itasi.

Vasega avanoa

Fa'aoga se tasi po'o se tu'ufa'atasiga o vasega avanoa mo le fesuia'i o mea i totonu o va'aiga va'aiga.

	Masini laiti faaopoopoTelefoni (<768px)	Laiti masiniPapamaa (≥768px)	Meafaigaluega feololoDesktops (≥992px)	Masini teteleDesktops (≥1200px)
`.visible-xs-*`	Va'aia	Natia	Natia	Natia
`.visible-sm-*`	Natia	Va'aia	Natia	Natia
`.visible-md-*`	Natia	Natia	Va'aia	Natia
`.visible-lg-*`	Natia	Natia	Natia	Va'aia
`.hidden-xs`	Natia	Va'aia	Va'aia	Va'aia
`.hidden-sm`	Va'aia	Natia	Va'aia	Va'aia
`.hidden-md`	Va'aia	Va'aia	Natia	Va'aia
`.hidden-lg`	Va'aia	Va'aia	Va'aia	Natia

E pei o le v3.2.0, o .visible-*-*vasega mo va'aiga ta'itasi e o'o mai i ni suiga se tolu, tasi mo le tau o displaymeatotino CSS ta'itasi o lo'o lisi atu i lalo.

Vaega o vasega	CSS`display`
`.visible-*-block`	`display: block;`
`.visible-*-inline`	`display: inline;`
`.visible-*-inline-block`	`display: inline-block;`

O lea la, mo isi mata laiti ( xs) mo se faʻataʻitaʻiga, o .visible-*-*vasega avanoa o: .visible-xs-block, .visible-xs-inline, ma .visible-xs-inline-block.

O vasega .visible-xs, .visible-sm, .visible-md, ma .visible-lgo loʻo i ai foi, ae ua faʻaumatia e pei o v3.2.0 . E tutusa lelei ma .visible-*-block, se'i vagana ai fa'aopoopo fa'apitoa fa'apitoa mo <table>elemene e feso'ota'i sui.

Tusia vasega

E tutusa ma vasega masani e tali atu, fa'aoga nei mo le fesuia'iina o mea e lolomi.

Vasega	Su'esu'e	Lolomi
`.visible-print-block` `.visible-print-inline` `.visible-print-inline-block`	Natia	Va'aia
`.hidden-print`	Va'aia	Natia

O .visible-printlo'o iai fo'i le vasega ae ua le toe fa'aaogaina e pei o le v3.2.0 . E tusa e tutusa ma .visible-print-block, vagana ai ma isi mataupu faʻapitoa mo <table>elemene e fesoʻotaʻi.

Su'ega mataupu

Toe fa'atele lau su'esu'ega po'o le uta i luga o masini eseese e su'e ai vasega aoga aoga.

Va'aia ile...

Fa'ailoga lanu meamata e ta'u mai ai le elemene o lo'o iloa i lau va'aiga o lo'o iai nei.

Fa'aopoopo la'ititi ✔ Va'aia ile x-tama'i

Laiti ✔ Vaʻaia ile laʻititi

Alafua ✔ Va'aia i luga ole auala

Tele ✔ Vaʻaia i luga ole lapoʻa

Fa'aopoopo la'ititi ma la'ititi ✔ Vaʻaia ile x-tamaʻi ma laiti

E feololo ma lapoa ✔ Vaʻaia ile feololo ma le lapopoa

Fa'aopoopo laiti ma feololo ✔ Va'aia ile x-tama'i ma feololo

Laiti ma tetele ✔ Vaʻaia ile laʻititi ma le lapopoa

Fa'aopoopo la'ititi ma lapopo'a ✔ Vaʻaia ile x-tamaʻi ma lapopoa

Laiti ma feololo ✔ Vaʻaia i laʻititi ma feololo

Natia ile...

Lenei, fa'ailoga lanu meamata e fa'aalia ai le elemene o lo'o natia i lau va'aiga o lo'o iai nei.

Fa'aopoopo la'ititi ✔ Natia ile x-tamaiti

Laiti ✔ Natia i luga ole laititi

Alafua ✔ Natia i luga ole auala

Tele ✔ Natia i luga ole lapopoa

Fa'aopoopo la'ititi ma la'ititi ✔ Natia ile x-tamaiti ma laiti

E feololo ma lapoa ✔ Natia ile feololo ma lapopoa

Fa'aopoopo laiti ma feololo ✔ Hidden on x-small and medium

Small and large ✔ Natia i luga o laʻititi ma lapopoa

Extra small and large ✔ Natia i le x-laiti ma lapoa

Laiti ma feololo ✔ Hidden on small and medium

O le CSS a Bootstrap o lo'o fausia i luga ole Less, o se fa'amuamua fa'atasi ai ma galuega fa'aopoopo e pei o fesuiaiga, fa'afefiloi, ma galuega mo le tu'ufa'atasia o le CSS. O i latou o lo'o va'ava'ai e fa'aoga le puna Fa'aitiiti faila nai lo a tatou faila CSS tu'ufa'atasia e mafai ona fa'aogaina le tele o fesuiaiga ma fa'afefiloi tatou te fa'aogaina i totonu o le auivi.

Grid fesuiaiga ma mixins o loʻo ufiufi i totonu o le vaega Grid system .

Tuufaatasia Bootstrap

E mafai ona fa'aoga le Bootstrap i ni auala e lua: fa'atasi ai ma le CSS tu'ufa'atasi po'o le fa'apogai Fa'aitiiti faila. Ina ia tuufaatasia le Less faila, faʻafesoʻotaʻi le vaega o le Amataina mo le faʻatulagaina o lau siosiomaga atinaʻe e faʻatino ai tulafono talafeagai.

O meafaigaluega tu'ufa'atasi a isi vaega e mafai ona galulue ma Bootstrap, ae e le'o lagolagoina e le matou 'au autu.

Fuafuaga

E fa'aoga fesuiaiga i totonu o le poloketi atoa o se auala e fa'atotonugalemu ma fa'asoa fa'aoga masani e pei o lanu, avanoa, po'o fa'aputuga vai. Mo se malepe atoatoa, fa'amolemole va'ai le Customizer .

Lanu

Fa'afaigofie ona fa'aoga ni lanu lanu e lua: fa'aefuefu ma semantic. O lanu lanu efuefu e maua ai le avanoa vave i paolo o le uliuli e masani ona fa'aogaina ae o le fa'auiga e aofia ai lanu eseese e fa'atatau i fa'atatau anoa fa'atatau.

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

Fa'aoga so'o se tasi o nei lanu lanu e pei ona i ai pe toe tu'uina atu i ni fesuiaiga sili atu ona anoa mo lau poloketi.

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

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

Fa'amanu

O ni nai fesuiaiga mo le fa'avasegaina vave o elemene autu o le auivi o lau 'upega tafaʻilagi.

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

So'oga

Fa'afaigofie lau so'oga i le lanu sa'o ma na'o le tasi le tau.

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

Manatua o le @link-hover-colorfaʻaaogaina o se galuega, o se isi meafaigaluega mataʻutia mai le Itiiti, e faʻapipiʻi ai le lanu saʻo faʻafefe. E mafai ona e fa'aogaina darken, lighten, saturate, ma desaturate.

Tusitala

Fa'afaigofie ona seti lau mata'itusi, tele o tusitusiga, ta'ita'i, ma isi mea fa'atasi ma nai suiga vave. E fa'aogaina e Bootstrap nei mea e tu'uina atu ai fa'afefiloi fa'akomipiuta faigofie.

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

Fa'ailoga

Lua suiga vave mo le fa'avasegaina o le nofoaga ma le igoa faila o au ata.

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

Vaega

O vaega i totonu o Bootstrap e fa'aoga ai nisi o suiga fa'aletonu mo le fa'atulagaina o tau masani. O mea nei e masani ona fa'aaogaina.

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

Fa'atau fa'afefiloi

Fa'atau fa'afefiloi o mea fa'afefiloi e fesoasoani e lagolago le tele o su'esu'ega e ala i le fa'aofiina o fa'atauga talafeagai uma i lau CSS tu'ufa'atasi.

Pusa-fa'atele

Toe seti le fa'ata'ita'iga pusa o au vaega ile fa'afefiloi e tasi. Mo faʻamatalaga, vaʻai i lenei tusiga fesoasoani mai Mozilla .

O le mixin ua le toe faʻaaogaina e pei o le v3.2.0, faʻatasi ai ma le faʻaofiina o le Autoprefixer. Ina ia faʻasaoina i tua-fesoʻotaʻiga, Bootstrap o le a faʻaauau ona faʻaogaina le mixin i totonu seia oʻo i le Bootstrap v4.

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

tulimanu lapotopoto

O aso nei o lo'o lagolagoina uma e su'esu'ega fa'aonaponei le border-radiusmeatotino e le fa'amuamua. E pei o lea, e leai se .border-radius()mixin, ae o Bootstrap e aofia ai ala pupuu mo vave faʻataʻamilomilo tulimanu e lua i se itu patino o se mea.

.border-top-radius(@radius) {
  border-top-right-radius: @radius;
   border-top-left-radius: @radius;
}
.border-right-radius(@radius) {
  border-bottom-right-radius: @radius;
     border-top-right-radius: @radius;
}
.border-bottom-radius(@radius) {
  border-bottom-right-radius: @radius;
   border-bottom-left-radius: @radius;
}
.border-left-radius(@radius) {
  border-bottom-left-radius: @radius;
     border-top-left-radius: @radius;
}

Pusa (Pa'u) ata

Afai o lo'o fa'aogaina e lau 'aufaitau fa'atatau i su'esu'ega ma masini fou ma sili ona lelei, ia mautinoa e na'o le fa'aogaina o le box-shadowmeatotino na'o ia. Afai e te mana'omia le lagolago mo masini Android tuai (mua'i v4) ma iOS (mua'i iOS 5), fa'aoga le mixin fa'agata e su'e ai le -webkitprefix mana'omia.

O le mixin ua le toe faʻaaogaina e pei o le v3.1.0, talu ai e leʻo lagolagoina aloaia e Bootstrap ia tulaga tuai e le lagolagoina le meatotino masani. Ina ia faʻasaoina i tua-fesoʻotaʻiga, Bootstrap o le a faʻaauau ona faʻaogaina le mixin i totonu seia oʻo i le Bootstrap v4.

Ia mautinoa e fa'aoga rgba()lanu i ata o lau atigipusa ina ia fa'afefiloi fa'alelei e mafai ma tua'oi.

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

Suiga

Fa'afefiloiga tele mo le fetu'una'i. Seti fa'amatalaga uma o suiga i le tasi, pe fa'amaoti se fa'atuai ese ma le umi pe a mana'omia.

O mea fa'afefiloi ua fa'ate'aina e pei o le v3.2.0 , fa'atasi ai ma le fa'aofiina o le Autoprefixer. Ina ia faʻasaoina i tua-fesoʻotaʻiga, Bootstrap o le a faʻaauau pea ona faʻaogaina mea faʻafefiloi i totonu seia oʻo i le 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;
}

Suiga

Liliu, fua, fa'aliliu (ga'i), pe fa'au'u so'o se mea.

.rotate(@degrees) {
  -webkit-transform: rotate(@degrees);
      -ms-transform: rotate(@degrees); // IE9 only
          transform: rotate(@degrees);
}
.scale(@ratio; @ratio-y...) {
  -webkit-transform: scale(@ratio, @ratio-y);
      -ms-transform: scale(@ratio, @ratio-y); // IE9 only
          transform: scale(@ratio, @ratio-y);
}
.translate(@x; @y) {
  -webkit-transform: translate(@x, @y);
      -ms-transform: translate(@x, @y); // IE9 only
          transform: translate(@x, @y);
}
.skew(@x; @y) {
  -webkit-transform: skew(@x, @y);
      -ms-transform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+
          transform: skew(@x, @y);
}
.translate3d(@x; @y; @z) {
  -webkit-transform: translate3d(@x, @y, @z);
          transform: translate3d(@x, @y, @z);
}

.rotateX(@degrees) {
  -webkit-transform: rotateX(@degrees);
      -ms-transform: rotateX(@degrees); // IE9 only
          transform: rotateX(@degrees);
}
.rotateY(@degrees) {
  -webkit-transform: rotateY(@degrees);
      -ms-transform: rotateY(@degrees); // IE9 only
          transform: rotateY(@degrees);
}
.perspective(@perspective) {
  -webkit-perspective: @perspective;
     -moz-perspective: @perspective;
          perspective: @perspective;
}
.perspective-origin(@perspective) {
  -webkit-perspective-origin: @perspective;
     -moz-perspective-origin: @perspective;
          perspective-origin: @perspective;
}
.transform-origin(@origin) {
  -webkit-transform-origin: @origin;
     -moz-transform-origin: @origin;
      -ms-transform-origin: @origin; // IE9 only
          transform-origin: @origin;
}

Fa'afiafiaga

Ose mixin e tasi mo le fa'aogaina o meafaitino uma a le CSS3 i le tasi ta'utinoga ma isi fa'afefiloi mo meatotino ta'itasi.

.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

Seti le opacity mo suʻesuʻega uma ma tuʻuina atu se filtertoe foʻi mo le IE8.

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

Fa'atonu tusitusiga

Tuuina atu le faʻamatalaga mo faʻatonuga i totonu o fanua taʻitasi.

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

Koluma

Fausia koluma e ala i le CSS i totonu o se elemene e tasi.

.content-columns(@width; @count; @gap) {
  -webkit-column-width: @width;
     -moz-column-width: @width;
          column-width: @width;
  -webkit-column-count: @count;
     -moz-column-count: @count;
          column-count: @count;
  -webkit-column-gap: @gap;
     -moz-column-gap: @gap;
          column-gap: @gap;
}

Gradients

Fa'afaigofie ona fa'aliliu so'o se lanu e lua i se fa'amasani pito i tua. Ia sili atu le alualu i luma ma seti se itu, faʻaaoga lanu e tolu, pe faʻaaoga se radial gradient. Faatasi ai ma se mixin e tasi e te maua uma syntaxes prefix e te manaʻomia.

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

E mafai fo'i ona e fa'amaoti le fa'ailoga o se fa'ailoga e lua-lanu, fa'asolosolo laina:

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

Afai e te mana'omia se gradient style barber-stripe, e faigofie fo'i. Na'o le fa'amaoti mai o se lanu e tasi ma o le a matou ufiufiina se laina pa'epa'e e fa'ailo.

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

I luga le ante ma fa'aoga ni lanu se tolu. Seti le lanu muamua, lanu lona lua, taofi lanu o le lanu lona lua (se pasene taua e pei o le 25%), ma le lanu lona tolu faatasi ai ma mea faʻafefiloi:

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

Ulu i luga! Afai e te manaʻomia le aveese o se faʻamaʻi, ia mautinoa e aveese soʻo se IE-faʻapitoa filteratonu na e faʻaopoopoina. E mafai ona e faia lena mea e ala i le faʻaaogaina o le .reset-filter()mixin faʻatasi ma background-image: none;.

Utility mixins

Utility mixins o mea fa'afefiloi e tu'ufa'atasia isi mea e le feso'ota'i CSS e ausia ai se sini po'o se galuega.

Fa'amamafi

Fa'agalo fa'aopoopo class="clearfix"i so'o se elemene ae fa'aopoopo le .clearfix()mixin pe a talafeagai ai. Fa'aaoga le micro clearfix mai Nicolas Gallagher .

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

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

Tutotonuga faalava

Fa'atotonu fa'atotonu so'o se elemene i totonu o lona matua. E manaʻomia widthpe max-widthfaʻatulagaina.

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

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

Fesoasoani fua

Fa'amaoti le fua o se mea e sili atu ona faigofie.

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

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

Fa'atonu textarea

Fa'afaigofie ona fetu'una'i le fa'avasegaina o filifiliga mo so'o se textarea, po'o so'o se isi elemene. Fa'aletonu i amioga masani su'esu'e ( both).

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

Otioti tusitusiga

Fa'afaigofie ona tipi tusitusiga i se ellipsis ma se fa'afefiloi e tasi. E mana'omia le elemene ina ia blockfa'atūtū inline-block.

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

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

Ata retina

Fa'ailoa ala ata se lua ma le @1x ata, ma o le a maua e Bootstrap se fesili @2x fa'asalalau. Afai e tele au ata e tu'uina atu, mafaufau e tusi lau ata mata CSS ma le lima i se fesili fa'asalalau se tasi.

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

Aʻo fausia le Bootstrap i luga ole Less, e iai foʻi se faʻailoga aloaia Sass . Matou te tausia i totonu o se isi faleteuoloa GitHub ma taulimaina faʻafouga ma se tusitusiga liliu.

O mea e aofia ai

Talu ai o le Sass port ei ai se isi repo ma tautua i se au maimoa laʻititi, o mea o loʻo i totonu o le poloketi e matua ese lava mai le poloketi Bootstrap autu. E fa'amautinoa ai e fetaui lelei le taulaga Sass ma le tele o faiga fa'avae Sass e mafai.

Ala	Fa'amatalaga
`lib/`	Ruby gem code (Sass configuration, Rails and Compass integrations)
`tasks/`	Fa'aliliuga tusitusiga (liliu i luga Fa'aitiitia i Sass)
`test/`	Su'ega tu'ufa'atasi
`templates/`	Fa'aaliga afifi tapasa
`vendor/assets/`	Sass, JavaScript, ma faila faila
`Rakefile`	Galuega i totonu, e pei o le rake ma le liliu

Asiasi i le Sass port's GitHub repository e vaʻai i nei faila i le gaioiga.

Fa'apipi'i

Mo faʻamatalaga pe faʻapefea ona faʻapipiʻi ma faʻaoga Bootstrap mo Sass, faʻafesoʻotaʻi le GitHub repository readme . O le puna sili ona lata mai ma e aofia ai faʻamatalaga mo le faʻaogaina i Rails, Compass, ma galuega masani a Sass.

Bootstrap mo Sass

CSS

Vaaiga lautele

HTML5 doctype

Mobile muamua

Tusitusi ma sootaga

Normalize.css

Koneteina

Faiga fa'apipi'i

Folasaga

Fa'asalalauga fesili

Grid filifiliga

Fa'ata'ita'iga: Fa'aputu-i-fa'asaga

Faataitaiga: Pusa vai

Fa'ata'ita'iga: Fe'avea'i ma le komepiuta

Fa'ata'ita'iga: Fe'avea'i, laulau, komepiuta

Faataitaiga: afifiina o koluma

Toe setiina koluma tali

Fa'ase'e koluma

Koluma faamoega

Fa'atonu koluma

Fa'aitiitia fa'afefiloi ma fesuiaiga

Fuafuaga

Mixins

Fa'ata'ita'iga fa'aoga

Tusitala

Ulutala

h1. Ulutala Bootstrap

h2. Ulutala Bootstrap

h3. Ulutala Bootstrap

h4. Ulutala Bootstrap

h5. Ulutala Bootstrap

h6. Ulutala Bootstrap

h1. Ulutala Bootstrap Tusitusiga lona lua

h2. Ulutala Bootstrap Tusitusiga lona lua

h3. Ulutala Bootstrap Tusitusiga lona lua

h4. Ulutala Bootstrap Tusitusiga lona lua

h5. Ulutala Bootstrap Tusitusiga lona lua

h6. Ulutala Bootstrap Tusitusiga lona lua

kopi tino

Ta'ita'i kopi tino

Fausia i le Itiiti

Elemene o tusitusiga i totonu

Faailoga tusi

Ua tapeina tusitusiga

Tusi taia

Fa'aofia tusitusiga

Vasevase tusitusiga

Laiti tusitusiga

Lototele

Tusipasi

Su'i elemene

Vasega fa'atulagaina

Vasega suiga

Faapuupuuga

Faapuupuu faavae

Initialism

Tulaga

Blockquotes

Fa'atonu poloka upusii

Filifiliga poloka upusii

Fa'aigoa o se puna

Su'i fa'aaliga

Lisi

Le fa'atonu

Fa'atonu

Le fa'ailoga

I totonu

Fa'amatalaga

Fa'amatalaga fa'asaga

Otometi tipitipi

Code

I totonu

Fa'aoga tagata

Poloka faavae

Fuafuaga

Fa'ata'ita'iga galuega

Laupapa

Fa'ata'ita'iga fa'avae

laina laina

Fesoasoani cross-browser

`:focus`Tulaga fa'ata

Fa'aaliga e uiga i feso'ota'iga galuega a`<a>`

Fa'ailoga fa'apitoa ma fa'ailoga `.sr-only`natia