E kiʻi i ka haʻahaʻa ma nā ʻāpana koʻikoʻi o ka ʻōnaehana Bootstrap, me kā mākou ala i ka hoʻomohala pūnaewele ʻoi aku ka maikaʻi, wikiwiki a ikaika.

HTML5 doctype

Hoʻohana ʻo Bootstrap i kekahi mau mea HTML a me nā waiwai CSS e koi ai i ka hoʻohana ʻana i ka HTML5 doctype. E hoʻokomo iā ia ma ka hoʻomaka o kāu mau papahana a pau.

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

Mobile mua

Me Bootstrap 2, ua hoʻohui mākou i nā ʻano hoʻohana kelepona koho no nā ʻano koʻikoʻi o ka anga. Me Bootstrap 3, ua kākau hou mākou i ka papahana i mea hoʻohana kelepona mai ka hoʻomaka. Ma kahi o ka hoʻohui ʻana i nā kaila kelepona koho, ua kālua ʻia lākou i loko o ke kumu. ʻO ka ʻoiaʻiʻo, ʻo Bootstrap ka mobile mua . Hiki ke ʻike ʻia nā ʻano kelepona mua ma ka hale waihona puke holoʻokoʻa ma kahi o nā faila ʻokoʻa.

No ka hōʻoia ʻana i ka hāʻawi pono ʻana a me ka hoʻopā ʻana, e hoʻohui i ka tag meta viewport i kāu <head>.

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

Hiki iā ʻoe ke hoʻopau i nā mana zooming ma nā polokalamu kelepona ma ka hoʻohui user-scalable=noʻana i ka tag meta viewport. Hoʻopau kēia i ka zooming, ʻo ia hoʻi, hiki i nā mea hoʻohana ke ʻōwili wale, a e hopena i kāu pūnaewele e like me kahi noi maoli. Ma ka holoʻokoʻa, ʻaʻole mākou e paipai i kēia ma kēlā me kēia pūnaewele, no laila e hoʻohana makaʻala!

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

Typography a me nā loulou

Hoʻonohonoho ʻo Bootstrap i ka hōʻike honua maʻamau, typography, a me nā ʻano loulou. ʻOiaʻiʻo, mākou:

Kau background-color: #fff;ma kabody
E hoʻohana i ka @font-family-base, @font-size-base, a me @line-height-basenā hiʻohiʻona e like me kā mākou kumu kikokikona
E hoʻonoho i ka waihoʻoluʻu loulou honua ma o @link-colora hoʻopili i nā kaha lalo ma ka loulou:hover

Hiki ke loaʻa kēia mau ʻano i loko o scaffolding.less.

Normalize.css

No ka hoʻomaikaʻi ʻana i ka hoʻololi ʻana i nā mea hoʻohana, hoʻohana mākou i Normalize.css , kahi papahana na Nicolas Gallagher lāua ʻo Jonathan Neal .

Nā pahu pahu

Pono ʻo Bootstrap i kahi mea e hoʻopili ai i nā maʻiʻo o ka pūnaewele a hoʻopaʻa i kā mākou ʻōnaehana grid. Hiki iā ʻoe ke koho i kekahi o nā pahu ʻelua e hoʻohana ai i kāu mau papahana. E hoʻomanaʻo, ma muli o a paddingme nā mea hou aʻe, ʻaʻohe pahu i nestable.

E hoʻohana .containerno kahi pahu ākea paʻa paʻa.

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

E hoʻohana .container-fluidno ka ipu laula piha, e hoʻopaʻa ana i ka laula holoʻokoʻa o kāu puka nānā.

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

Loaʻa i ka Bootstrap kahi ʻōnaehana hoʻoheheʻe wai mua e pili ana i ka mea e hoʻonui pono i nā kolamu 12 i ka piʻi ʻana o ka nui a i ʻole ka nānā ʻana. Loaʻa iā ia nā papa i koho mua ʻia no nā koho hoʻonohonoho maʻalahi, a me nā mixins ikaika no ka hoʻomohala ʻana i nā hoʻonohonoho semantic hou aʻe .

Hoʻolauna

Hoʻohana ʻia nā ʻōnaehana Grid no ka hana ʻana i nā ʻaoʻao ʻaoʻao ma o ke ʻano o nā lālani a me nā kolamu e mālama ai i kāu ʻike. Eia ke ʻano o ka hana ʻana o ka ʻōnaehana mākia Bootstrap:

Pono e kau ʻia nā lālani i loko o kahi .container(ka laula paʻa) a i ʻole .container-fluid(ka laula piha) no ka alignment kūpono a me ka pale.
E hoʻohana i nā lālani no ka hana ʻana i nā hui pae o nā kolamu.
Pono e waiho ʻia ka ʻike ma loko o nā kolamu, a ʻo nā kolamu wale nō paha nā keiki o nā lālani.
E like me nā papa mākia i koho mua ʻia .rowa .col-xs-4loaʻa no ka hana wikiwiki ʻana i nā papa kuhikuhi. Hiki ke hoʻohana ʻia nā mixins liʻiliʻi no nā hoʻolālā semantic hou aʻe.
Hana nā kolamu i nā ʻauwai (nā āwāwa ma waena o ka maʻiʻo kolamu) ma o padding. Hoʻopili ʻia kēlā pale ma nā lālani no ke kolamu mua a hope ma o ka palena ʻino ma .rows.
ʻO ka palena maikaʻi ʻole ke kumu o nā hiʻohiʻona ma lalo nei i waho. ʻO ia ka mea i hoʻopaʻa ʻia nā ʻike i loko o nā kolamu mānoanoa me nā ʻike ʻole-grid.
Hana ʻia nā kolamu Grid ma ke kuhikuhi ʻana i ka helu o nā kolamu ʻumikūmālua i loaʻa āu e makemake ai e kau. No ka laʻana, ʻekolu kolamu like e hoʻohana i ʻekolu .col-xs-4.
Inā ʻoi aku ma mua o 12 kolamu i hoʻokomo ʻia i loko o ka lālani hoʻokahi, e hoʻopili ʻia kēlā me kēia hui o nā kolamu ʻē aʻe, ma ke ʻano he ʻāpana hoʻokahi, i kahi laina hou.
Pili nā papa mākia i nā mea me ka laulā o ka pale ma mua a i ʻole like me ka nui o ka haʻihaʻi, a e hoʻokahuli i nā papa mākia i manaʻo ʻia i nā mea liʻiliʻi. No laila, ʻo ka hoʻopili ʻana i kekahi .col-md-*papa i kahi mea ʻaʻole e hoʻopilikia wale i kona ʻano ʻano ma nā ʻaoʻao waena akā ma nā hāmeʻa nui hoʻi inā .col-lg-*ʻaʻole kahi papa.

E nānā i nā laʻana no ka hoʻopili ʻana i kēia mau loina i kāu code.

Nīnau Media

Hoʻohana mākou i kēia mau nīnau media ma kā mākou mau faila liʻiliʻi no ka hana ʻana i nā wahi haʻihaʻi koʻikoʻi i kā mākou ʻōnaehana mānoanoa.

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

Hoʻonui mākou i kekahi manawa i kēia mau nīnau media e hoʻokomo i kahi max-widthe kaupalena ʻia CSS i kahi ʻāpana haiki o nā mea hana.

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

Nā koho koho

E ʻike pehea e hana ai nā hiʻohiʻona o ka ʻōnaehana mākia Bootstrap ma nā ʻaoʻao he nui me kahi papaʻaina.

	Nā hāmeʻa liʻiliʻi ʻē aʻe Nā kelepona (<768px)	Nā polokalamu liʻiliʻi Nā papa (≥768px)	Nā hāmeʻa liʻiliʻi Nā papapihi ( ≥992px )	Nā polokalamu nunui Nā Papahana (≥1200px)
ʻO ka hana maʻamau	Horizontal i nā manawa a pau	Ua hāʻule no ka hoʻomaka ʻana, ʻāpae ma luna o nā wahi haʻihaʻi
Laulā pahu	ʻAʻohe (aunoa)	750px	970px	1170px
Prefix papa	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`
# o nā kolamu	12
laulā kolamu	Auto	~62px	~81px	~97px
Laulā ʻauwai	30px (15px ma kēlā me kēia ʻaoʻao o kahi kolamu)
Nestable	ʻAe
Offsets	ʻAe
Kakau ʻana o ke kolamu	ʻAe

Laʻana: Hoʻopaʻa ʻia-a-horizontal

Me ka hoʻohana ʻana i hoʻokahi pūʻulu o .col-md-*nā papa mākia, hiki iā ʻoe ke hana i kahi ʻōnaehana mānoanoa kumu e hoʻomaka ana i hoʻopaʻa ʻia ma nā polokalamu kelepona a me nā polokalamu papa (ka liʻiliʻi liʻiliʻi a liʻiliʻi paha) ma mua o ka lilo ʻana i ka pae ma luna o nā hāmeʻa (medium). E kau i nā kolamu mānoanoa ma kekahi .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>

Laʻana: ipu wai

E hoʻololi i ka hoʻolālā mānoanoa paʻa paʻa i kahi hoʻolālā ākea piha ma o ka hoʻololi ʻana i kou waho loa .containeri .container-fluid.

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

Laʻana: Mobile and desktop

ʻAʻole makemake e hoʻopaʻa wale kāu kolamu i nā mea liʻiliʻi? E hoʻohana i nā papa mākia liʻiliʻi liʻiliʻi me ka hoʻohui .col-xs-* .col-md-*ʻana i kāu kolamu. E ʻike i ka laʻana ma lalo no ka manaʻo maikaʻi aʻe o ka hana ʻana.

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

Laʻana: Mobile, tablet, desktop

Kūkulu ʻia ma ka laʻana mua ma o ka hoʻokumu ʻana i nā hoʻolālā ikaika a ikaika hoʻi me nā papa .col-sm-*papa.

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

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

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

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

Laʻana: ʻOpiʻi kolamu

Inā ʻoi aku ma mua o 12 kolamu i hoʻokomo ʻia i loko o ka lālani hoʻokahi, e hoʻopili ʻia kēlā me kēia hui o nā kolamu ʻē aʻe, ma ke ʻano he ʻāpana hoʻokahi, i kahi laina hou.

.col-xs-9

.col-xs-4
Mai ka 9 + 4 = 13 > 12, ua wili ʻia kēia div 4-kolani-ākea i kahi laina hou ma ke ʻano he ʻāpana pili.

.col-xs-6
Ke hoʻomau nei nā kolamu ma ka laina hou.

<div class="row">
  <div class="col-xs-9">.col-xs-9</div>
  <div class="col-xs-4">.col-xs-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
  <div class="col-xs-6">.col-xs-6<br>Subsequent columns continue along the new line.</div>
</div>

Hoʻihoʻi hou ke kolamu pane

Me nā ʻāpana ʻehā o nā mānoanoa i loaʻa, hiki iā ʻoe ke holo i nā pilikia kahi, i kekahi mau haʻihaʻi, ʻaʻole maopopo pono kāu kolamu no ka mea ʻoi aku ka lōʻihi o kekahi ma mua o kekahi. No ka hoʻoponopono ʻana i kēlā, e hoʻohana i ka hui pū ʻana o .clearfixa me kā mākou papa hana pono pane .

.col-xs-6 .col-sm-3
E hoʻololi hou i kou puka nānā a nānā paha ma kāu kelepona no ka laʻana.

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

Ma waho aʻe o ka hoʻomaʻemaʻe ʻana i ke kolamu ma nā wahi haʻi pane, pono paha ʻoe e hoʻoponopono hou i nā offset, pahu, a huki paha . E ʻike i kēia ma ka hana ma ka laʻana grid .

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

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

Hoʻopio i nā kolamu

E hoʻoneʻe i nā kolamu i ka ʻākau me ka hoʻohana ʻana i .col-md-offset-*nā papa. Hoʻonui kēia mau papa i ka palena hema o kahi kolamu ma *nā kolamu. No ka laʻana, .col-md-offset-4neʻe .col-md-4ma luna o ʻehā kolamu.

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

Hiki iā ʻoe ke hoʻopau i nā offset mai nā papa haʻahaʻa haʻahaʻa me .col-*-offset-0nā papa.

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

Nā kolamu nesting

No ka hoʻopili ʻana i kāu ʻike me ka mākia paʻamau, e hoʻohui i kahi kolamu hou .rowa me .col-sm-*nā kolamu i loko o kahi .col-sm-*kolamu e kū nei. Pono nā lālani i hoʻopaʻa ʻia he pūʻulu kolamu e hoʻonui i ka 12 a ʻoi aʻe paha (ʻaʻole pono ʻoe e hoʻohana i nā kolamu he 12 i loaʻa).

Papa 1: .col-sm-9

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

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

Kakau ʻana o ke kolamu

E hoʻololi maʻalahi i ke ʻano o kā mākou kolamu kolamu i kūkulu ʻia me .col-md-push-*nā .col-md-pull-*papa hoʻololi.

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

Liʻiliʻi nā huila a me nā mea hoʻololi

Ma waho aʻe o nā papa mākia i kūkulu mua ʻia no nā hoʻolālā wikiwiki, loaʻa iā Bootstrap nā ʻano liʻiliʻi liʻiliʻi a me nā mixins no ka hana wikiwiki ʻana i kāu mau hoʻolālā maʻalahi.

Nā mea hoʻololi

Hoʻoholo nā mea hoʻololi i ka heluna o nā kolamu, ka laula o ka ʻauwai, a me ka wahi nīnau media kahi e hoʻomaka ai nā kolamu lana. Hoʻohana mākou i kēia no ka hoʻopuka ʻana i nā papa papa kuhikuhi i hoʻopaʻa ʻia ma luna, a me nā mixins maʻamau i helu ʻia ma lalo nei.

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

Mea huikau

Hoʻohana pū ʻia nā mixins me nā mea hoʻololi grid e hoʻohua i ka CSS semantic no nā kolamu pahu pākahi.

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

Laʻana hoʻohana

Hiki iā ʻoe ke hoʻololi i nā mea hoʻololi i kāu mau waiwai maʻamau, a i ʻole e hoʻohana wale i nā mixins me kā lākou mau waiwai paʻamau. Eia kekahi laʻana o ka hoʻohana ʻana i nā hoʻonohonoho paʻamau no ka hana ʻana i kahi hoʻolālā ʻelua kolamu me kahi kaawale ma waena.

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

Nā poʻomanaʻo

Loaʻa nā poʻomanaʻo HTML āpau, <h1>ma o <h6>,. .h1ma o .h6nā papa, no ka mea, inā makemake ʻoe e hoʻohālikelike i ke ʻano o ka font styling o kahi poʻomanaʻo akā makemake ʻoe e hōʻike ʻia kāu kikokikona ma ka laina.

h1. Poʻomanaʻo Bootstrap	36px kikoʻī
h2. Poʻomanaʻo Bootstrap	30px kikoʻī
h3. Poʻomanaʻo Bootstrap	24px kikoʻī
h4. Poʻomanaʻo Bootstrap	Māmā 18px
h5. Poʻomanaʻo Bootstrap	14px kikoʻī
h6. Poʻomanaʻo Bootstrap	12px kikoʻī

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

E hana i kahi kikokikona māmā a lua ma kekahi poʻomanaʻo me ka hōʻailona maʻamau <small>a i ʻole ka .smallpapa.

h1. Poʻomanaʻo Bootstrap kikokikona lua

h2. Poʻomanaʻo Bootstrap kikokikona lua

h3. Poʻomanaʻo Bootstrap kikokikona lua

h4. Poʻomanaʻo Bootstrap kikokikona lua

h5. Poʻomanaʻo Bootstrap kikokikona lua

h6. Poʻomanaʻo Bootstrap kikokikona 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>

kope kino

ʻO 14px ka paʻamau honua o Bootstrap font-size, me ka 1.428 . Hoʻohana ʻia kēia i ka a me nā paukū āpau. Eia hou, loaʻa (nā paukū) ka palena lalo o ka hapalua o ko lākou kiʻekiʻe laina helu (10px ma ka paʻamau).line-height<body><p>

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

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

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

<p>...</p>

Kope kino alakai

E hoʻokaʻawale i kahi paukū ma ka hoʻohui ʻana i .lead.

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

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

Kūkulu ʻia me ka liʻiliʻi

Hoʻokumu ʻia ka pālākiō kiʻi kiʻi ma luna o ʻelua mau ʻano liʻiliʻi liʻiliʻi i nā mea hoʻololi.less : @font-size-basea me @line-height-base. ʻO ka mua, ʻo ia ka nui font-nui i hoʻohana ʻia a puni a ʻo ka lua ke kiʻekiʻe laina kumu. Hoʻohana mākou i kēlā mau mea hoʻololi a me kekahi makemakika maʻalahi e hana i nā palena, nā pale, a me nā kiʻekiʻe laina o kā mākou ʻano āpau a ʻoi aku. Hoʻopilikino iā lākou a hoʻololi ʻo Bootstrap.

Nā mea kikokikona laina

kikokiko i kaha ʻia

No ka hōʻike ʻana i ka holo o ka kikokikona ma muli o kona pili ʻana i kahi pōʻaiapili ʻē aʻe, e hoʻohana i ka <mark>hōʻailona.

Hiki iā ʻoe ke hoʻohana i ka mark mark ihōʻailonakikokikona.

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

Holoi kikokikona

No ka hōʻike ʻana i nā poloka o nā kikokikona i holoi ʻia e hoʻohana i ka <del>tag.

~~Hoʻohana ʻia kēia laina kikokikona ma ke ʻano he kikokikona holoi ʻia.~~

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

kikokikona kuʻi

No ka hōʻike ʻana i nā poloka o nā kikokikona pili ʻole e hoʻohana i ka <s>lepili.

~~Manaʻo ʻia kēia laina o ka kikokikona me he mea lā ʻaʻole pololei.~~

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

kikokiko i hoʻokomo ʻia

No ka hōʻike ʻana i nā mea hoʻohui i ka palapala e hoʻohana i ka <ins>tag.

Hoʻohana ʻia kēia laina kikokikona ma ke ʻano he mea hoʻohui i ka palapala.

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

kikokikona kaha lalo

No ke kaha lalo i ke kikokikona e hoʻohana i ka <u>hōʻailona.

E hāʻawi ʻia kēia laina kikokikona e like me ke kaha ʻia

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

E hoʻohana i nā hōʻailona koʻikoʻi o HTML me nā ʻano māmā.

kikokikona liʻiliʻi

No ka hoʻokaʻawale ʻana i ka laina laina a i ʻole nā poloka o ka kikokikona, e hoʻohana i ka <small>hōʻailona e hoʻonoho i ka kikokikona ma 85% ka nui o ka makua. Loaʻa nā mea poʻomanaʻo i kā lākou ponoʻī font-sizeno nā <small>mea i hoʻopaʻa ʻia.

Hiki iā ʻoe ke hoʻohana i kahi mea inline me .smallkahi o kekahi <small>.

ʻO kēia laina kikokikona i manaʻo ʻia e mālama ʻia ma ke ʻano he paʻi maikaʻi.

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

wiwo ole

No ka hoʻoikaika ʻana i kahi snippet o ke kikokikona me ke kaumaha o ka font.

Ua unuhi ʻia kēia ʻāpana kikokikona ma ke ʻano he kikokikona wiwo ʻole .

<strong>rendered as bold text</strong>

ʻO nā kikoʻī

No ka hoʻoikaika ʻana i kahi snippet o nā kikokikona me nā kikoʻī.

Ua unuhi ʻia kēia ʻāpana kikokikona ma ke ʻano he kikokikona italicized .

<em>rendered as italicized text</em>

Nā mea ʻokoʻa

E ʻoluʻolu e hoʻohana <b>a <i>ma HTML5. <b>ʻO ka manaʻo e hōʻike i nā huaʻōlelo a i ʻole nā huaʻōlelo me ka ʻole o ka lawe ʻana i nā mea koʻikoʻi aʻo <i>ka hapa nui no ka leo, nā ʻōlelo loea, etc.

Nā papa alignment

Hoʻololi maʻalahi i ka kikokikona i nā ʻāpana me nā papa hoʻoponopono kikokikona.

He kikokikona laulima hema.

kikokikona kaulike waena.

kikokikona pololei pololei.

He kikokikona i hoaponoia.

ʻAʻohe kikokikona wahī.

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

Nā papa hoʻololi

Hoʻololi i ka kikokikona ma nā ʻāpana me nā papa hoʻohua kikokikona.

kikokikona liʻiliʻi.

He kikokikona i hoʻopaʻa ʻia.

kikokikona i hoʻopaʻa ʻia.

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

Nā pōkole

Hoʻohana ʻia i ka mea HTML <abbr>no nā pōkole a me nā acronyms e hōʻike i ka mana i hoʻonui ʻia ma ka hover. Loaʻa i nā pōkole me kahi titlehiʻohiʻona kahi palena lalo māmā a me kahi kuhikuhi kōkua ma ka hover, e hāʻawi ana i ka pōʻaiapili hou ma ka hover a me nā mea hoʻohana i nā ʻenehana kōkua.

ʻO ka pōkole kumu

ʻO ka pōkole o ka huaʻōlelo attribute ʻo attr .

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

Hoʻomaka mua

Hoʻohui .initialismi kahi pōkole no ka liʻiliʻi liʻiliʻi.

ʻO HTML ka mea maikaʻi loa mai ka ʻāpana palaoa.

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

Heluhelu

E hōʻike i ka ʻike pili no ke kupuna kokoke a i ʻole ke kino holoʻokoʻa o ka hana. E mālama i ka hōpili ʻana ma ka hoʻopau ʻana i nā laina āpau me <br>.

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

Inoa piha
[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

No ka haʻi ʻana i nā poloka maʻiʻo mai kahi kumu ʻē aʻe i loko o kāu palapala.

Paʻamau blockquote

E <blockquote>kāʻei i kekahi HTML e like me ka ʻōlelo. No nā huaʻōlelo pololei, paipai mākou i kahi <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>

Nā koho blockquote

Hoʻololi ke ʻano a me ka ʻike no nā ʻokoʻa maʻalahi ma kahi maʻamau <blockquote>.

Kapa inoa i kumu

Hoʻohui i kahi <footer>no ka ʻike ʻana i ke kumu. E kāʻei i ka inoa o ka hana kumu ma <cite>.

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

Kekahi mea kaulana ma 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>

Nā hōʻike ʻokoʻa

Hoʻohui .blockquote-reverseno kahi blockquote me ka ʻike pololei.

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

Kekahi mea kaulana ma Source Title

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

Nā papa inoa

Kau ʻole ʻia

He papa inoa o nā mea i pili ʻole i ke kauoha .

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

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

Kauoha ʻia

He papa inoa o nā mea i manaʻo nui ʻia ke kauoha .

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

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

Kaulana ʻole

Wehe i ka palena paʻamau list-stylea me ka ʻaoʻao hema ma ka papa inoa o nā mea (nā keiki koke wale nō). Pili wale kēia i nā mea papa inoa o nā keiki , ʻo ia hoʻi, pono ʻoe e hoʻohui i ka papa no nā papa inoa pū kekahi.

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

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

Inline

E kau i nā mea papa inoa a pau ma ka laina hoʻokahi display: inline-block;a me kahi pale māmā.

Lorem ipsum
Phasellus iaculis
Nulla volutpat

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

wehewehe

He papa inoa o nā huaʻōlelo me kā lākou mau wehewehe pili.

Nā papa inoa wehewehe: Kūpono ka papa inoa wehewehe no ka wehewehe ʻana i nā huaʻōlelo.
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>

ʻO ka wehewehe ʻana i ke alo

E hana i nā huaʻōlelo a me nā wehewehe ʻana ma ka <dl>laina ʻaoʻao. Hoʻomaka i ka hoʻopaʻa ʻia e like me s paʻamau <dl>, akā i ka wā e hoʻonui ai ka navbar, pēlā e hana ai i kēia.

Nā papa inoa wehewehe: Kūpono ka papa inoa wehewehe no ka wehewehe ʻana i nā huaʻōlelo.
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, ha'i ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

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

ʻoki ʻakomi

E ʻoki ana nā papa inoa wehewehe ʻaloʻalo i nā huaʻōlelo lōʻihi loa a hiki i ke kolamu hema me text-overflow. Ma nā wahi ʻike haiki, e hoʻololi lākou i ka hoʻonohonoho hoʻonohonoho paʻamau.

Inline

E kāʻei i nā ʻāpana code inline me <code>.

No ka laʻana, <section>pono e ʻōwili ʻia e like me ka inline.

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

Hoʻokomo mea hoʻohana

E hoʻohana i ka mea <kbd>e hōʻike i ka hoʻokomo maʻamau i hoʻokomo ʻia ma o ka keyboard.

No ka hoʻololi ʻana i nā papa kuhikuhi, cde kākau i ka inoa o ka papa kuhikuhi.
No ka hoʻoponopono ʻana i nā hoʻonohonoho, kaomi 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 kumu

Hoʻohana <pre>no nā laina helu he nui. E hōʻoia e pakele i nā bracket angle i loko o ke code no ka hoʻolilo kūpono.

<p>He laʻana kikokikona ma ʻaneʻi...</p>

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

Hiki iā ʻoe ke hoʻohui i ka .pre-scrollablepapa, kahi e hoʻonoho ai i kahi kiʻekiʻe kiʻekiʻe o 350px a hāʻawi i kahi scrollbar y-axis.

Nā mea hoʻololi

No ka hōʻike ʻana i nā mea hoʻololi e hoʻohana i ka <var>tag.

y = m x + b

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

Hoʻopuka laʻana

No ka hōʻike ʻana i nā ʻāpana hoʻohālike i ka puka ʻana mai kahi papahana e hoʻohana i ka <samp>tag.

Hana ʻia kēia kikokikona ma ke ʻano he laʻana puka mai kahi polokalamu kamepiula.

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

kumu hoʻohālike

No ka hoʻolāʻau kumu—hoʻopiʻi māmā a me nā mea hoʻokaʻawale ākea wale nō—e hoʻohui i ka papa kumu .tablei kekahi <table>. Me he mea lā ʻoi aku ka nui, akā hāʻawi ʻia i ka hoʻohana nui ʻana o nā papa no nā plugins ʻē aʻe e like me nā kalena a me nā mea koho lā, ua koho mākou e hoʻokaʻawale i kā mākou papaʻaina maʻamau.

Kākoʻo papaʻaina koho.
#	Inoa mua	Inoa hope	inoa hoʻohana
1	Maka	Otto	@mdo
2	ʻO Iakoba	Thornton	@momona
3	Larry	ka Manu	@twitter

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

Nā lālani kaha

E hoʻohana .table-stripede hoʻohui i ka zebra-striping i kēlā me kēia lālani pākaukau i loko o ka <tbody>.

Hoʻolike like ʻole o ka polokalamu kele pūnaewele

Hoʻonohonoho ʻia nā papa ʻoniʻoni ma o ka :nth-childmea koho CSS, ʻaʻole i loaʻa ma Internet Explorer 8.

#	Inoa mua	Inoa hope	inoa hoʻohana
1	Maka	Otto	@mdo
2	ʻO Iakoba	Thornton	@momona
3	Larry	ka Manu	@twitter

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

Pākaukau palena

Hoʻohui .table-borderedno nā palena ma nā ʻaoʻao a pau o ka pākaukau a me nā cell.

#	Inoa mua	Inoa hope	inoa hoʻohana
1	Maka	Otto	@mdo
2	ʻO Iakoba	Thornton	@momona
3	Larry	ka Manu	@twitter

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

E kau i nā lālani

Hoʻohui .table-hoveri mea e hiki ai i kahi kūlana hover ma nā lālani pākaukau i loko o kahi <tbody>.

#	Inoa mua	Inoa hope	inoa hoʻohana
1	Maka	Otto	@mdo
2	ʻO Iakoba	Thornton	@momona
3	Larry	ka Manu	@twitter

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

Pākaukau hoʻopaʻa ʻia

Hoʻohui .table-condensedi mea e ʻoi aku ka paʻakikī o nā papa ma o ka ʻoki ʻana i ka padding cell i ka hapalua.

#	Inoa mua	Inoa hope	inoa hoʻohana
1	Maka	Otto	@mdo
2	ʻO Iakoba	Thornton	@momona
3	Larry ka Manu		@twitter

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

Nā papa kuʻuna

E hoʻohana i nā papa pōʻaiapili e kala i nā lālani papa ʻaina a i ʻole nā pūnaewele pākahi.

Papa	wehewehe
`.active`	Hoʻopili i ke kala hover i kekahi lālani a i ʻole ke kelepona
`.success`	Hōʻike i kahi hana holomua a maikaʻi paha
`.info`	Hōʻike i kahi hoʻololi ʻike kūʻokoʻa a i ʻole hana
`.warning`	Hōʻike i kahi ʻōlelo aʻo e pono ai ka nānā
`.danger`	Hōʻike i ka hana pōʻino a i ʻole ka hana ʻino

#	Poʻomanaʻo kolamu	Poʻomanaʻo kolamu	Poʻomanaʻo kolamu
1	maʻiʻo kolamu	maʻiʻo kolamu	maʻiʻo kolamu
2	maʻiʻo kolamu	maʻiʻo kolamu	maʻiʻo kolamu
3	maʻiʻo kolamu	maʻiʻo kolamu	maʻiʻo kolamu
4	maʻiʻo kolamu	maʻiʻo kolamu	maʻiʻo kolamu
5	maʻiʻo kolamu	maʻiʻo kolamu	maʻiʻo kolamu
6	maʻiʻo kolamu	maʻiʻo kolamu	maʻiʻo kolamu
7	maʻiʻo kolamu	maʻiʻo kolamu	maʻiʻo kolamu
8	maʻiʻo kolamu	maʻiʻo kolamu	maʻiʻo kolamu
9	maʻiʻo kolamu	maʻiʻo kolamu	maʻiʻo kolamu

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

Ka lawe ʻana i ka manaʻo i nā ʻenehana kōkua

ʻO ka hoʻohana ʻana i ka waihoʻoluʻu e hoʻohui i ka manaʻo i ka lālani papaʻaina a i ʻole ke kelepona hoʻokahi wale nō e hāʻawi i kahi hōʻailona ʻike, ʻaʻole e hāʻawi ʻia i nā mea hoʻohana i nā ʻenehana kōkua - e like me nā mea heluhelu pale. E hōʻoia i ka ʻike i hōʻike ʻia e ka waihoʻoluʻu mai ka ʻike ponoʻī (ke kikokikona i ʻike ʻia ma ka lālani pākaukau kūpono), a i ʻole e hoʻokomo ʻia ma o nā ala ʻē aʻe, e like me nā kikokikona hou i hūnā ʻia me ka .sr-onlypapa.

Nā papa pane

E hana i nā pākaukau pane ma ke kāʻei ʻana i kekahi .tablei mea e hoʻopaʻa .table-responsiveʻia lākou ma nā ʻaoʻao liʻiliʻi (ma lalo o 768px). Ke nānā ʻoe i kekahi mea ʻoi aku ka nui ma mua o 768px ākea, ʻaʻole ʻoe e ʻike i kahi ʻokoʻa ma kēia mau papa.

ʻoki ʻoki/ʻoki ʻia

Hoʻohana nā papa pane i ka overflow-y: hidden, kahi e hoʻopaʻa ai i nā ʻike ma waho aʻe o nā ʻaoʻao lalo a i luna paha o ka papaʻaina. ʻO ka mea kūikawā, hiki i kēia ke ʻoki i nā menus dropdown a me nā widget ʻaoʻao ʻekolu.

Firefox a me nā kahua kahua

Loaʻa iā Firefox kekahi ʻano hoʻolālā kahua ʻano ʻino e pili ana widthi ka hoʻopili ʻana i ka papa pane. ʻAʻole hiki ke hoʻopau ʻia me ka ʻole o kahi hack kikoʻī Firefox a mākou e hāʻawi ʻole ai ma Bootstrap:

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

No ka 'ike hou aku, e heluhelu i keia pane Stack Overflow .

#	Poʻomanaʻo papa	Poʻomanaʻo papa	Poʻomanaʻo papa	Poʻomanaʻo papa	Poʻomanaʻo papa	Poʻomanaʻo papa
1	Pūlele papa	Pūlele papa	Pūlele papa	Pūlele papa	Pūlele papa	Pūlele papa
2	Pūlele papa	Pūlele papa	Pūlele papa	Pūlele papa	Pūlele papa	Pūlele papa
3	Pūlele papa	Pūlele papa	Pūlele papa	Pūlele papa	Pūlele papa	Pūlele papa

#	Poʻomanaʻo papa	Poʻomanaʻo papa	Poʻomanaʻo papa	Poʻomanaʻo papa	Poʻomanaʻo papa	Poʻomanaʻo papa
1	Pūlele papa	Pūlele papa	Pūlele papa	Pūlele papa	Pūlele papa	Pūlele papa
2	Pūlele papa	Pūlele papa	Pūlele papa	Pūlele papa	Pūlele papa	Pūlele papa
3	Pūlele papa	Pūlele papa	Pūlele papa	Pūlele papa	Pūlele papa	Pūlele papa

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

kumu hoʻohālike

Loaʻa ʻokoʻa i nā mana ʻano hoʻokahi i kekahi ʻano honua. Hoʻonohonoho ʻia nā kikokikona āpau <input>, <textarea>, a me <select>nā mea me .form-controlka width: 100%;paʻamau. E hoʻopili i nā lepili a me nā kaohi .form-groupno ka hoʻokaʻawale maikaʻi loa.

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

Mai hoʻohui i nā hui pūʻulu me nā pūʻulu hoʻokomo

Mai hoʻohui pololei i nā pūʻulu me nā pūʻulu hoʻokomo . Akā, e hoʻomoe i ka pūʻulu hoʻokomo i loko o ka pūʻulu puka.

ʻAno laina

E hoʻohui .form-inlinei kāu palapala (ʻaʻole pono he <form>) no nā mana hoʻopaʻa ʻaoʻao hema. Pili wale kēia i nā puka i loko o nā puka ʻike ma kahi o 768px ākea.

Pono paha nā laula maʻamau

Ua width: 100%;hoʻohana ʻia nā mea hoʻokomo a me nā koho ma Bootstrap. I loko o nā palapala inline, hoʻonohonoho mākou i kēlā i width: auto;hiki i nā mana he nui ke noho ma ka laina like. Ma muli o kāu hoʻolālā, pono paha nā laula maʻamau.

Hoʻohui mau i nā lepili

E pilikia ana ka poʻe heluhelu pale i kāu mau palapala inā ʻaʻole ʻoe e hoʻokomo i kahi lepili no kēlā me kēia hoʻokomo. No kēia mau palapala inline, hiki iā ʻoe ke hūnā i nā lepili me ka hoʻohana ʻana i ka .sr-onlypapa. Aia kekahi mau ala ʻē aʻe no ka hāʻawi ʻana i kahi lepili no nā ʻenehana kōkua, e like me ka aria-label, a i aria-labelledbyʻole titleka ʻano. Inā ʻaʻohe o kēia mau mea, hiki i ka poʻe heluhelu heluhelu ke hoʻohana i ke placeholderʻano, inā aia, akā e hoʻomaopopo ʻaʻole ʻōlelo ʻia ka hoʻohana ʻana placeholderi kahi pani no nā ʻano lepili ʻē aʻe.

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

ʻAno ʻeleʻele

E hoʻohana i nā papa mākia i koho mua ʻia e Bootstrap e hoʻolike i nā lepili a me nā pūʻulu o nā mana ʻano i loko o kahi hoʻonohonoho ʻāpae ma ka hoʻohui .form-horizontalʻana i ke ʻano (ʻaʻole pono he <form>). ʻO ka hana ʻana pēlā e hoʻololi ʻia .form-groupai e like me nā lālani mānoanoa, no laila ʻaʻohe pono o .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>

Kākoʻo ʻia nā mana

Kākoʻo ʻia nā hiʻohiʻona o nā mana ʻano maʻamau i kahi hoʻolālā puka laʻana.

Nā mea hoʻokomo

ʻO ka mana maʻamau, nā kahua hoʻokomo kikokikona. Loaʻa i ke kākoʻo no nā ʻano HTML5 āpau: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, a me color.

Pono ke ʻano ʻōlelo

E kāhua piha ʻia nā mea hoʻokomo inā typehōʻike pono ʻia ko lākou.

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

Pūʻulu hoʻokomo

No ka hoʻohui ʻana i nā kikokikona a i ʻole nā pihi i hoʻohui ʻia ma mua a/a ma hope paha o kekahi kikokikona <input>, e nānā i ka ʻāpana hui hoʻokomo .

Textarea

Kākoʻo i nā laina kikokikona he nui. E hoʻololi rowsi ke ʻano e like me ka pono.

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

Nā pahu pahu a me nā lekiō

No ke koho ʻana i hoʻokahi a i ʻole kekahi mau koho i loko o kahi papa inoa, ʻo nā lekiō no ke koho ʻana i hoʻokahi koho mai nā mea he nui.

Kākoʻo ʻia nā pahu hoʻopaʻa a me nā lekiō, akā no ka hāʻawi ʻana i ka pihi "ʻae ʻole" ma ka hover o ka makua <label>, pono ʻoe e hoʻohui i ka .disabledpapa i ka makua .radio, .radio-inline, .checkbox, a i ʻole .checkbox-inline.

Paʻamau (hui ʻia)

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

ʻO nā pahu kaha laina a me nā lekiō

E hoʻohana i nā papa a i .checkbox-inlineʻole .radio-inlinenā papa ma kahi pūʻulu pahu pahu a i ʻole lekiō no nā mana e ʻike ʻia ma ka laina like.

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

Nā pahu koho a me nā lekiō me ka ʻole o nā kikokikona

Inā ʻaʻohe kikokikona i loko o ka <label>, hoʻonoho ʻia ka mea hoʻokomo e like me kāu e manaʻo ai. I kēia manawa, hana wale nō ma nā pahu kaha ʻole a me nā lekiō. E hoʻomanaʻo i ka hāʻawi ʻana i kekahi ʻano lepili no nā ʻenehana kōkua (e like me ka hoʻohana ʻana 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>

Koho

E hoʻomaopopo i ka nui o nā menus koho maoli-ʻo ia hoʻi ma Safari a me Chrome-ua puni nā kihi ʻaʻole hiki ke hoʻololi ʻia e nā border-radiuswaiwai.

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

No <select>nā mana me ke multipleʻano, hōʻike ʻia nā koho he nui ma ke ʻano paʻamau.

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

Ka hoʻomalu ʻana

Inā pono ʻoe e kau i ka kikokikona maʻemaʻe ma ka ʻaoʻao o kahi lepili puka i loko o kahi palapala, e hoʻohana i ka .form-control-staticpapa ma kahi <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>

Kūlana kiko

outlineWehe mākou i nā kaila paʻamau ma kekahi mau mana ʻano a kau i kahi box-shadowma kona wahi no :focus.

`:focus`Mokuʻāina Demo

Hoʻohana ka mea hoʻokomo laʻana i nā ʻano maʻamau i kā mākou palapala e hōʻike i ka :focusmokuʻāina ma kahi .form-control.

Mokuʻāina kīnā

Hoʻohui i ke disabledʻano boolean ma kahi mea hoʻokomo e pale ai i ka pilina o nā mea hoʻohana. ʻOi aku ka māmā o nā mea hoʻokomo i hoʻopaʻa ʻole ʻia a hoʻohui i kahi not-allowedkī.

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

Hoʻopaʻa ʻia nā kahua kahua

Hoʻohui i ke disabledʻano i kahi <fieldset>e hoʻopau i nā mana āpau i loko o ka <fieldset>manawa hoʻokahi.

Hōʻike e pili ana i ka hana loulou o`<a>`

Ma ka paʻamau, e mālama nā mākaʻikaʻi i nā mana ʻano ʻōiwi āpau ( <input>, <select>a me <button>nā mea ʻeleʻele) i loko o kahi <fieldset disabled>me he mea kīnā ʻole, me ka pale ʻana i nā pilina ʻelua a me nā ʻiole ma luna o lākou. Eia nō naʻe, inā loaʻa i kāu ʻano he mau <a ... class="btn btn-*">mea, e hāʻawi wale ʻia kēia i ke ʻano o pointer-events: none. E like me ka mea i hōʻike ʻia ma ka ʻāpana e pili ana i ke kūlana kīnā no nā pihi (a ma ka ʻāpana ʻāpana no nā mea heleuma), ʻaʻole i hoʻohālikelike ʻia kēia waiwai CSS a ʻaʻole kākoʻo piha ʻia i ka Opera 18 a i lalo, a i ʻole ma Internet Explorer 11, a lanakila. 'aʻole hiki i nā mea hoʻohana keyboard ke kālele a hoʻoikaika paha i kēia mau loulou. No laila e palekana, e hoʻohana i ka JavaScript maʻamau e hoʻopau i nā loulou.

Hoʻolike like ʻole o ka polokalamu kele pūnaewele

ʻOiai e hoʻohana ʻo Bootstrap i kēia mau ʻano ma nā mākaʻikaʻi āpau, ʻaʻole kākoʻo piha ʻo Internet Explorer 11 a ma lalo i ke disabledʻano ma kahi <fieldset>. E hoʻohana i ka JavaScript maʻamau no ka hoʻopau ʻana i ke kahua kahua ma kēia mau polokalamu kele pūnaewele.

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

Heluhelu wale no

Hoʻohui i ke readonlyʻano boolean ma kahi hoʻokomo e pale i ka hoʻololi ʻana i ka waiwai o ka mea hoʻokomo. ʻOi aku ka māmā o nā mea hoʻokomo heluhelu-wale (e like me nā mea hoʻokomo i hoʻopaʻa ʻole ʻia), akā mālama ʻia ka ʻōkuhi maʻamau.

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

He kikokikona kōkua

Hoʻopaʻa ʻia i nā kikokikona kōkua pae no nā kaohi puka.

Hoʻopili ʻana i nā kikokikona kōkua me nā mana palapala

Pono e pili pono ka kikokikona kōkua me ke ʻano mana e pili ana i ka hoʻohana ʻana i ke ʻano aria-describedby. E hōʻoia kēia i nā ʻenehana kōkua - e like me nā mea heluhelu pale - e hoʻolaha i kēia kikokikona kōkua i ka wā e nānā ai ka mea hoʻohana a komo i ka mana.

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

Kūlana hōʻoia

Loaʻa i ka Bootstrap nā ʻano hōʻoia no ka hewa, ka ʻōlelo aʻo, a me nā kūlana kūleʻa ma nā mana palapala. No ka hoʻohana ʻana, hoʻohui .has-warning, .has-error, a i ʻole .has-successi ka mea makua. E loaʻa i kēlā me kēia .control-label, .form-control, a .help-blocki loko o ia mea nā ʻano hōʻoia.

Ke hōʻike nei i ke kūlana hōʻoia i nā ʻenehana kōkua a me nā mea hoʻohana makapō

ʻO ka hoʻohana ʻana i kēia mau ʻano hōʻoia no ka hōʻike ʻana i ke kūlana o kahi kaohi puka e hāʻawi wale i kahi hōʻailona ʻike maka, ʻaʻole e hāʻawi ʻia i nā mea hoʻohana i nā ʻenehana kōkua - e like me nā mea heluhelu pale - a i nā mea hoʻohana makapō.

E hōʻoia i ka hāʻawi ʻia ʻana o kahi hōʻailona ʻē aʻe o ka mokuʻāina. No ka laʻana, hiki iā ʻoe ke hoʻokomo i kahi hōʻailona e pili ana i ka mokuʻāina i loko o ke kikokikona o ka mana <label>palapala ponoʻī (e like me ke ʻano o ka laʻana code ma lalo nei), e hoʻokomo i kahi Glyphicon (me nā kikokikona ʻē aʻe e hoʻohana ana i ka .sr-onlypapa - e ʻike i nā hiʻohiʻona Glyphicon ), a i ʻole ma ka hāʻawi ʻana i kahi poloka kikokikona kōkua hou . Maikaʻi no nā ʻenehana kōkua, hiki ke hāʻawi ʻia nā mana palapala kūpono ʻole i kahi ʻano aria-invalid="true".

<div class="form-group has-success">
  <label class="control-label" for="inputSuccess1">Input with success</label>
  <input type="text" class="form-control" id="inputSuccess1" aria-describedby="helpBlock2">
  <span id="helpBlock2" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
</div>
<div class="form-group has-warning">
  <label class="control-label" for="inputWarning1">Input with warning</label>
  <input type="text" class="form-control" id="inputWarning1">
</div>
<div class="form-group has-error">
  <label class="control-label" for="inputError1">Input with error</label>
  <input type="text" class="form-control" id="inputError1">
</div>
<div class="has-success">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxSuccess" value="option1">
      Checkbox with success
    </label>
  </div>
</div>
<div class="has-warning">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxWarning" value="option1">
      Checkbox with warning
    </label>
  </div>
</div>
<div class="has-error">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxError" value="option1">
      Checkbox with error
    </label>
  </div>
</div>

Me nā ikona koho

Hiki iā ʻoe ke hoʻohui i nā kiʻi manaʻo koho me ka hoʻohui a .has-feedbackme ka ikona kūpono.

Hana wale nā kiʻi manaʻo me nā <input class="form-control">mea kikokikona.

Nā ikona, nā lepili, a me nā pūʻulu hoʻokomo

Pono ka hoʻonohonoho lima ʻana o nā kiʻi manaʻo no nā mea hoʻokomo me ka lepili ʻole a no nā pūʻulu hoʻokomo me kahi mea hoʻohui ma ka ʻākau. Paipai ʻia ʻoe e hāʻawi i nā lepili no nā mea hoʻokomo āpau no nā kumu hiki ke komo. Inā makemake ʻoe e pale i ka hōʻike ʻia ʻana o nā lepili, hūnā iā lākou me ka .sr-onlypapa. Inā pono ʻoe e hana me ka ʻole o nā lepili, e hoʻololi i ka topwaiwai o ke kiʻi manaʻo. No nā pūʻulu hoʻokomo, hoʻololi i karight waiwai i kahi waiwai pixel kūpono ma muli o ka laulā o kāu addon.

E hōʻike ana i ka manaʻo o ka ikona i nā ʻenehana kōkua

No ka hōʻoia ʻana i nā ʻenehana kōkua - e like me nā mea heluhelu pale - e hōʻike pololei i ke ʻano o kahi ikona, pono e hoʻokomo ʻia nā kikokikona huna ʻē aʻe me ka .sr-onlypapa a pili pono i ka mana palapala e pili ana i ka hoʻohana ʻana aria-describedby. ʻO kahi ʻē aʻe, e hōʻoia i ka manaʻo (no ka laʻana, ʻo ka ʻoiaʻiʻo he ʻōlelo aʻoaʻo no kahi kahua hoʻokomo kikokikona) i lawe ʻia ma kekahi ʻano ʻē aʻe, e like me ka hoʻololi ʻana i ka kikokikona o ka mea maoli.<label> e pili ana i ka mana palapala.

ʻOiai ua haʻi mua nā laʻana ma lalo nei i ke kūlana hōʻoia o kā lākou ʻano mana i loko o ka <label>kikokikona ponoʻī, ua hoʻokomo ʻia ka ʻenehana i luna (e hoʻohana ana i ka .sr-onlykikokikona a me aria-describedby) no nā kumu hoʻohālike.

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

ʻO nā kiʻiʻoniʻoni koho ma nā ʻano ākea a inline

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

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

`.sr-only`Nā ikona koho me nā lepili huna

Inā hoʻohana ʻoe i ka .sr-onlypapa e hūnā i ka mana o ka puka <label>(ma mua o ka hoʻohana ʻana i nā koho lepili ʻē aʻe, e like me ke aria-labelʻano), e hoʻoponopono ʻo Bootstrap i ke kūlana o ke kiʻi i ka manawa i hoʻohui ʻia.

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

Manaʻo nui

E hoʻonoho i nā kiʻekiʻe me ka hoʻohana ʻana i nā papa e like me .input-lg, a hoʻonohonoho i nā laula me ka hoʻohana ʻana i nā papa kolamu e like me .col-lg-*.

Ka nui kiʻekiʻe

E hana i nā mana ʻano lōʻihi a pōkole paha e like me ka nui o nā pihi.

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

ʻO ka nui o ka pūʻulu ʻano horizontal

Hoʻonui wikiwiki i nā lepili a hana i nā mana i loko .form-horizontalma ka hoʻohui ʻana a i .form-group-lgʻole .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>

Ka nui o ke kolamu

Hoʻopili i nā mea hoʻokomo i nā kolamu mānoanoa, a i ʻole kekahi mea makua maʻamau, e hoʻokō maʻalahi i nā laula i makemake ʻia.

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

Nā lepili pihi

E hoʻohana i nā papa pihi ma kahi <a>, <button>, a i ʻole <input>mea.

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

Ka hoʻohana ʻana i ke ʻano kikoʻī

ʻOiai hiki ke hoʻohana ʻia nā papa pihi <a>a me <button>nā mea, nā mea wale nō <button>i kākoʻo ʻia i loko o kā mākou nav a me navbar ʻāpana.

Nā loulou ma ke ʻano he pihi

Inā <a>hoʻohana ʻia nā mea e like me nā pihi - e hoʻomaka ana i ka hana i loko o ka ʻaoʻao, ma mua o ka hoʻokele ʻana i kahi palapala a i ʻole ʻāpana ʻē aʻe i loko o ka ʻaoʻao o kēia manawa - pono lākou e hāʻawi ʻia i kahi kūpono role="button".

Ka hāʻawi ʻana i ka polokalamu kele pūnaewele

Ma ke ʻano he hoʻomaʻamaʻa maikaʻi loa, manaʻo nui mākou e hoʻohana i ka <button>element i nā manawa a pau e hiki ai ke hōʻoia i ka hoʻohālikelike ʻana i ka hoʻololi ʻana i nā mākaʻikaʻi.

Ma waena o nā mea ʻē aʻe, aia kahi pahu i Firefox <30 e pale iā mākou mai ka hoʻonohonoho ʻana i nā pihi line-heighto <input>-based, e hoʻohālikelike ʻole i ke kiʻekiʻe o nā pihi ʻē aʻe ma Firefox.

Nā koho

E hoʻohana i kekahi o nā papa pihi i loaʻa e hana wikiwiki i kahi pihi kāhua.

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

Ka lawe ʻana i ka manaʻo i nā ʻenehana kōkua

ʻO ka hoʻohana ʻana i ke kala e hoʻohui i ka manaʻo i kahi pihi e hāʻawi wale i kahi hōʻailona ʻike, ʻaʻole e hāʻawi ʻia i nā mea hoʻohana i nā ʻenehana kōkua - e like me nā mea heluhelu pale. E hōʻoia i ka ʻike i hōʻike ʻia e ke kala i ʻike ʻia mai ka ʻike ponoʻī (ke kikokikona ʻike ʻia o ke pihi), a i ʻole e hoʻokomo ʻia ma o nā ala ʻē aʻe, e like me nā kikokikona hou i hūnā ʻia me ka .sr-onlypapa.

Nui

Makemake i nā pihi nui a liʻiliʻi paha? Hoʻohui .btn-lg, .btn-sm, a i ʻole .btn-xsno nā nui ʻē aʻe.

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

E hana i nā pihi pae poloka—ʻo ia ka mea e lōʻihi i ka laula piha o kahi makua—ma ka hoʻohui ʻana i .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>

Kūlana hana

E paʻi ʻia nā pihi (me ka ʻaoʻao ʻeleʻele, ka palena ʻeleʻele, a me ke aka hoʻokomo) i ka wā e hana ai. No <button>nā mea, hana ʻia kēia ma o :active. No <a>nā mea, ua hana ʻia me .active. Eia nō naʻe, hiki iā ʻoe ke hoʻohana .activema <button>s (a hoʻokomo i ka aria-pressed="true"ʻano) inā pono ʻoe e hana hou i ke kūlana hana ma ka papahana.

ʻElemu pihi

ʻAʻole pono e hoʻohui :activeno ka mea he pseudo-class, akā inā pono ʻoe e hoʻoikaika i ka helehelena like, e hele i mua a hoʻohui .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>

ʻElemu heleuma

Hoʻohui i ka .activepapa i nā <a>pihi.

loulou mua loulou

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

Mokuʻāina kīnā

E nānā i nā pihi hiki ʻole ke kaomi ma ka hoʻihoʻi ʻana iā lākou me opacity.

ʻElemu pihi

Hoʻohui i ke disabledʻano i nā <button>pihi.

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

Hoʻolike like ʻole o ka polokalamu kele pūnaewele

Inā ʻoe e hoʻohui i ke disabledʻano i kahi <button>, ʻo Internet Explorer 9 a ma lalo e hoʻolilo i ke kikokikona hina me kahi ʻano kikokikona ʻino ʻaʻole hiki iā mākou ke hoʻoponopono.

ʻElemu heleuma

Hoʻohui i ka .disabledpapa i nā <a>pihi.

loulou mua loulou

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

Hoʻohana mākou .disabledma ke ʻano he papa hana ma aneʻi, e like me ka .activepapa maʻamau, no laila ʻaʻohe prefix e koi ʻia.

Hoʻopaʻa hana loulou

Ke hoʻohana nei kēia papa pointer-events: nonee hoʻāʻo e hoʻopau i ka hana loulou o <a>s, akā ʻaʻole i hoʻohālikelike ʻia kēlā waiwai CSS a ʻaʻole i kākoʻo piha ʻia ma Opera 18 a ma lalo, a i ʻole ma Internet Explorer 11 pointer-events: none. ʻAʻole pili ka hoʻokele ʻana, ʻo ia hoʻi, hiki i nā mea hoʻohana keyboard ʻike ʻia a me nā mea hoʻohana o nā ʻenehana kōkua ke hoʻāla i kēia mau loulou. No laila e palekana, e hoʻohana i ka JavaScript maʻamau e hoʻopau i nā loulou.

Nā kiʻi pane

Hiki ke hoʻopili ʻia nā kiʻi ma Bootstrap 3 ma o ka hoʻohui ʻana o ka .img-responsivepapa. Pili kēia max-width: 100%;, height: auto;a display: block;i ke kiʻi i mea unahi maikaʻi i ka mea makua.

No ke kikowaena kiʻi e hoʻohana ana i ka .img-responsivepapa, e hoʻohana .center-blockma kahi o .text-center. E ʻike i ka ʻāpana papa kōkua no nā kikoʻī hou aku e pili ana i .center-blockka hoʻohana.

Nā kiʻi SVG a me IE 8-10

Ma Internet Explorer 8-10, ʻokoʻa ka nui o nā kiʻi SVG me .img-responsiveka nui. No ka hoʻoponopono i kēia, hoʻohui i width: 100% \9;kahi e pono ai. ʻAʻole hoʻohana maʻalahi ʻo Bootstrap i kēia no ka mea e hoʻopiʻi ai i nā ʻano kiʻi ʻē aʻe.

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

Nā ʻano kiʻi

Hoʻohui i nā papa i kahi <img>mea e hoʻokalakala maʻalahi i nā kiʻi i kekahi papahana.

Hoʻolike like ʻole o ka polokalamu kele pūnaewele

E hoʻomanaʻo i ka nele o Internet Explorer 8 i ke kākoʻo no nā kihi pōʻai.

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

Nā kala kuʻuna

E hōʻike i ka manaʻo ma o ka waihoʻoluʻu me ka lima o nā papa hana koʻikoʻi. Hiki ke hoʻohana ʻia kēia i nā loulou a e pōʻeleʻele i ka hover e like me kā mākou ʻano loulou paʻamau.

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

Nullam id dolor id nibh ultricies vehicula ut id elit.

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

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

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

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

Ka pili ana me ka kiko'ī

I kekahi manawa ʻaʻole hiki ke hoʻohana ʻia nā papa koʻikoʻi ma muli o ke ʻano kikoʻī o kahi mea koho ʻē aʻe. I ka hapanui o nā hihia, ʻo ka hoʻoponopono ʻana i kāu kikokikona <span>me ka papa.

Ka lawe ʻana i ka manaʻo i nā ʻenehana kōkua

ʻO ka hoʻohana ʻana i ke kala e hoʻohui i ka manaʻo e hāʻawi wale i kahi hōʻailona ʻike, ʻaʻole e hāʻawi ʻia i nā mea hoʻohana i nā ʻenehana kōkua - e like me nā mea heluhelu pale. E hōʻoia i ka ʻike i hōʻike ʻia e ka waihoʻoluʻu i ʻike ʻia mai ka ʻike ponoʻī (e hoʻohana wale ʻia nā kala ʻokoʻa no ka hoʻoikaika ʻana i ka manaʻo i loaʻa i loko o ka kikokikona/markup), a i ʻole e hoʻokomo ʻia ma o nā ala ʻē aʻe, e like me nā kikokikona hou i hūnā ʻia me ka .sr-onlypapa. .

Nā kāʻei pili

E like me nā papa waihoʻoluʻu kikokikona, hoʻonohonoho maʻalahi i ke kāʻei kua o kekahi mea i kekahi papa ʻokoʻa. E pōʻeleʻele nā mea heleuma ma ka hover, e like me nā papa kikokikona.

Nullam id dolor id nibh ultricies vehicula ut id elit.

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

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

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

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

Ka pili ana me ka kiko'ī

I kekahi manawa, ʻaʻole hiki ke hoʻohana ʻia nā papa hope ʻokoʻa ma muli o ke ʻano kikoʻī o kahi mea koho ʻē aʻe. I kekahi mau hihia, ʻo kahi hoʻoponopono kūpono e hoʻopili i ka ʻike o kāu mea i loko a <div>me ka papa.

Ka lawe ʻana i ka manaʻo i nā ʻenehana kōkua

E like me nā waihoʻoluʻu pōʻaiapili , e hōʻoia i ka lawe ʻia ʻana o kekahi manaʻo ma o ka waihoʻoluʻu ma kahi ʻano ʻaʻole i hōʻike wale ʻia.

Pani ikona

E hoʻohana i ka hōʻailona kokoke maʻamau no ka hoʻokuʻu ʻana i nā ʻike e like me nā modals a me nā makaʻala.

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

Carets

E hoʻohana i nā mea mālama e hōʻike i ka hana hoʻokuʻu a me ke kuhikuhi. E hoʻomanaʻo e hoʻohuli ʻokoʻa ka caret paʻamau i nā menus dropup .

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

Nā lana wikiwiki

E lana i kekahi mea ma ka hema a me ka akau me ka papa. !importantua hoʻokomo ʻia e pale i nā pilikia kikoʻī. Hiki ke hoʻohana ʻia nā papa e like me nā mixins.

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

Nā poloka maʻiʻo waena

E hoʻonoho i kahi mea display: blocka i waena ma o margin. Loaʻa ma ke ʻano he mixin a me ka papa.

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

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

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

Hoʻomaʻemaʻe

E hoʻomaʻemaʻe maʻalahi floatma ka hoʻohui .clearfix ʻana i ka mea makua . Hoʻohana i ka micro clearfix e like me ka mea i hoʻolaha ʻia e Nicolas Gallagher. Hiki ke hoʻohana ʻia ma ke ʻano he mixin.

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

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

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

Hōʻike a hūnā i ka ʻike

E hoʻoikaika i kahi mea e hōʻike ʻia a hūnā ʻia ( me nā mea heluhelu pale ) me ka hoʻohana a .showme .hiddennā papa. Hoʻohana kēia mau papa !importante pale i nā paio kikoʻī, e like me nā lana wikiwiki . Loaʻa iā lākou no ka hoʻololi ʻana i ka pae poloka. Hiki ke hoʻohana ʻia e like me nā mixins.

.hideloaʻa, akā, ʻaʻole pili ia i ka poʻe heluhelu pale a hoʻopau ʻia e like me v3.0.1. E hoʻohana a i .hiddenʻole .sr-only.

Eia kekahi, .invisiblehiki ke hoʻohana ʻia e hoʻololi wale i ka ʻike o kahi mea, ʻo ia hoʻi display, ʻaʻole ia i hoʻololi ʻia a hiki ke hoʻololi ʻia ka mea i ke kahe o ka palapala.

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

Heluhelu maka a me ka maʻiʻo hoʻokele keyboard

Hūnā i kekahi mea i nā mea hana a pau koe nā mea heluhelu pale me .sr-only. E hoʻohui .sr-onlyme .sr-only-focusableka hōʻike hou ʻana i ka mea i ka wā e kālele ana (e laʻa me ka mea hoʻohana keyboard-wale nō). Pono no ka hahai ʻana i nā hana maikaʻi loa . Hiki ke hoʻohana ʻia e like me nā 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();
}

Pani kiʻi

E hoʻohana i ka .text-hidepapa a i ʻole mixin e hoʻololi i ka ʻike kikokikona o kahi mea me ke kiʻi hope.

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

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

No ka hoʻomohala wikiwiki ʻana i ka paʻa lima, e hoʻohana i kēia mau papa pono no ka hōʻike ʻana a me ka hūnā ʻana i ka ʻike e ka mea ma o ka nīnau media. Hoʻokomo pū ʻia nā papa pono no ka hoʻololi ʻana i ka ʻike ke paʻi ʻia.

E ho'āʻo e hoʻohana i kēia mau mea ma ke kumu palena ʻole a pale i ka hana ʻana i nā mana like ʻole o ka pūnaewele hoʻokahi. Akā, e hoʻohana iā lākou e hoʻokō i ka hōʻike ʻana o kēlā me kēia hāmeʻa.

Nā papa i loaʻa

E hoʻohana i hoʻokahi a i ʻole hui pū ʻana o nā papa i loaʻa no ka hoʻololi ʻana i ka ʻike ma nā wahi haʻi ʻike.

	ʻO nā mea liʻiliʻi liʻiliʻiKelepona (<768px)	Nā mea liʻiliʻiNā papa (≥768px)	Nā mea hana maʻamauPapahana (≥992px)	Nā mea hana nuiPapahana (≥1200px)
`.visible-xs-*`	ʻIke ʻia	Huna	Huna	Huna
`.visible-sm-*`	Huna	ʻIke ʻia	Huna	Huna
`.visible-md-*`	Huna	Huna	ʻIke ʻia	Huna
`.visible-lg-*`	Huna	Huna	Huna	ʻIke ʻia
`.hidden-xs`	Huna	ʻIke ʻia	ʻIke ʻia	ʻIke ʻia
`.hidden-sm`	ʻIke ʻia	Huna	ʻIke ʻia	ʻIke ʻia
`.hidden-md`	ʻIke ʻia	ʻIke ʻia	Huna	ʻIke ʻia
`.hidden-lg`	ʻIke ʻia	ʻIke ʻia	ʻIke ʻia	Huna

E like me v3.2.0, hiki mai nā .visible-*-*papa no kēlā me kēia breakpoint i ʻekolu mau ʻokoʻa, hoʻokahi no kēlā me kēia displaywaiwai CSS i helu ʻia ma lalo nei.

Hui o na papa	CSS`display`
`.visible-*-block`	`display: block;`
`.visible-*-inline`	`display: inline;`
`.visible-*-inline-block`	`display: inline-block;`

No laila, no nā pale liʻiliʻi ( xs) no ka laʻana, ʻo nā .visible-*-*papa i loaʻa: .visible-xs-block, .visible-xs-inline, a me .visible-xs-inline-block.

ʻO nā papa .visible-xs, .visible-sm, .visible-md, a .visible-lgaia pū kekahi, akā ua hoʻopau ʻia e like me v3.2.0 . Ua like lākou me .visible-*-block, koe wale nō me nā hihia kūikawā hou no ka <table>hoʻohuli ʻana i nā mea pili.

Nā papa paʻi

E like me nā papa pane maʻamau, e hoʻohana i kēia no ka hoʻololi ʻana i ka ʻike no ka paʻi.

Nā papa	Pūnaewele	Paʻi
`.visible-print-block` `.visible-print-inline` `.visible-print-inline-block`	Huna	ʻIke ʻia
`.hidden-print`	ʻIke ʻia	Huna

Aia .visible-printnō ka papa akā ua hoʻopau ʻia e like me v3.2.0. Ua like ia me .visible-print-block, koe nae me na hihia kūikawā hou no <table>-e pili ana.

Nā hihia hoʻāʻo

Hoʻololi hou i kāu polokalamu kele pūnaewele a hoʻouka paha ma nā ʻaoʻao like ʻole e hoʻāʻo i nā papa pono pane.

ʻIke ʻia ma...

Hōʻike ʻia nā māka ʻōmaʻomaʻo e ʻike ʻia ka mea i kāu wahi nānā i kēia manawa.

Liʻiliʻi liʻiliʻi ✔ ʻIke ʻia ma ka x-liʻiliʻi

Liʻiliʻi ✔ ʻIke ʻia ma ka liʻiliʻi

Kauwaena ✔ ʻIke ʻia ma ka waena

Nui ✔ ʻIke ʻia ma ka nui

ʻOi aku ka liʻiliʻi a me ka liʻiliʻi ✔ ʻIke ʻia ma ka x-liʻiliʻi a me ka liʻiliʻi

Medium a nui ✔ ʻIke ʻia ma ka waena a me ka nui

ʻOi aku ka liʻiliʻi a me ka waena ✔ ʻIke ʻia ma ka x-liʻiliʻi a me ka waena

Liʻiliʻi a nui ✔ ʻIke ʻia ma ka liʻiliʻi a me ka nui

ʻOi aku ka liʻiliʻi a me ka nui ✔ ʻIke ʻia ma ka x-liʻiliʻi a me ka nui

Liʻiliʻi a waena ✔ ʻIke ʻia ma ka liʻiliʻi a me ka liʻiliʻi

Huna ma...

Ma ʻaneʻi, hōʻike pū ʻia nā māka ʻōmaʻomaʻo i hūnā ʻia ka mea i kāu ʻike ʻike i kēia manawa.

Liʻiliʻi liʻiliʻi ✔ Huna ia ma ka x-liʻiliʻi

Liʻiliʻi ✔ Huna ʻia ma ka liʻiliʻi

Kauwaena ✔ Huna ma ka waena

Nui ✔ Huna ma ka nui

ʻOi aku ka liʻiliʻi a me ka liʻiliʻi ✔ Huna ʻia ma ka x-liʻiliʻi a me ka liʻiliʻi

Medium a nui ✔ Huna ʻia ma ka waena a me ka nui

ʻOi aku ka liʻiliʻi a me ka waena ✔ Huna ʻia ma x-liʻiliʻi a me ka waena

Liʻiliʻi a nui ✔ Huna ʻia ma ka liʻiliʻi a me ka nui

ʻOi aku ka liʻiliʻi a me ka nui ✔ Huna ʻia ma x-liʻiliʻi a nui

Liʻiliʻi a waena ✔ Huna ʻia ma ka liʻiliʻi a me ka liʻiliʻi

Hoʻokumu ʻia ka CSS o Bootstrap ma luna o Less, kahi preprocessor me nā hana ʻē aʻe e like me nā loli, mixins, a me nā hana no ka hōʻuluʻulu ʻana i CSS. ʻO ka poʻe e ʻimi nei e hoʻohana i ke kumu ʻO nā faila liʻiliʻi ma mua o kā mākou mau faila CSS i hōʻuluʻulu ʻia e hiki ke hoʻohana i nā ʻano like ʻole a me nā mixins a mākou e hoʻohana ai i loko o ka anga.

Hoʻopili ʻia nā mea hoʻololi Grid a me nā mixins i loko o ka ʻāpana ʻōnaehana Grid .

Hoʻopili ʻia ʻo Bootstrap

Hiki ke hoʻohana ʻia ʻo Bootstrap ma nā ʻaoʻao ʻelua: me ka CSS i hui pū ʻia a i ʻole ke kumu. No ka hōʻuluʻulu ʻana i nā faila liʻiliʻi, e ʻimi i ka ʻāpana Hoʻomaka no ka hoʻonohonoho ʻana i kāu wahi hoʻomohala e holo i nā kauoha e pono ai.

Hiki ke hana pū me Bootstrap nā mea hana hui ʻaoʻao ʻekolu, akā ʻaʻole kākoʻo ʻia e kā mākou hui kumu.

Nā mea hoʻololi

Hoʻohana ʻia nā ʻano like ʻole i loko o ka papahana holoʻokoʻa ma ke ʻano he ala e hoʻokaʻawale a kaʻana like i nā waiwai maʻamau e like me nā kala, spacing, a i ʻole nā pūʻulu font. No ka haʻihaʻi piha ʻana, e ʻoluʻolu e ʻike i ka Customizer .

Nā kala

E hoʻohana maʻalahi i ʻelua mau kala kala: grayscale a me semantic. Hāʻawi nā kala grayscale i ke komo wikiwiki ʻana i nā aka ʻeleʻele i hoʻohana mau ʻia aʻo ka semantic e loaʻa i nā kala like ʻole i hāʻawi ʻia i nā waiwai ʻikepili koʻikoʻi.

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

E hoʻohana i kekahi o kēia mau ʻano kala like ʻole a i ʻole e hoʻihoʻi hou iā lākou i nā ʻano hoʻololi koʻikoʻi no kāu papahana.

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

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

Pākuʻi

ʻO kahi liʻiliʻi o nā mea hoʻololi no ka hoʻonohonoho wikiwiki ʻana i nā mea koʻikoʻi o ka iwi o kāu pūnaewele.

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

Nā loulou

E kāhiko maʻalahi i kāu mau loulou me ke kala kūpono me hoʻokahi waiwai.

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

E hoʻomaopopo i ka @link-hover-colorhoʻohana ʻana i kahi hana, kahi mea hana ʻē aʻe mai ka liʻiliʻi, e hana ʻakomi i ke kala hover kūpono. Hiki iā ʻoe ke hoʻohana i ka darken, lighten, saturate, a me desaturate.

Palapala kiʻi

E hoʻonohonoho maʻalahi i kāu typeface, ka nui kikokikona, alakaʻi, a me nā mea hou aʻe me kekahi mau loli wikiwiki. Hoʻohana ʻo Bootstrap i kēia mau mea e hāʻawi i nā mixins typographic maʻalahi.

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

Ikona

ʻElua mau hoʻololi wikiwiki no ka hoʻopilikino ʻana i ka wahi a me ka inoa faila o kāu mau kiʻi.

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

Nā ʻāpana

Hoʻohana nā ʻāpana a puni ʻo Bootstrap i kekahi mau mea hoʻololi paʻamau no ka hoʻonohonoho ʻana i nā waiwai maʻamau. Eia nā mea maʻamau i hoʻohana ʻia.

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

Mea kūʻai hui

ʻO nā mixins nā mea kūʻai aku he mea hui e kōkua i ke kākoʻo ʻana i nā polokalamu kele pūnaewele ma o ka hoʻokomo ʻana i nā prefix mea kūʻai kūpono a pau i kāu CSS i hōʻuluʻulu ʻia.

Ka nui pahu

E hoʻihoʻi hou i ke kumu hoʻohālike pahu o kāu mau mea me ka hui pū hoʻokahi. No ka pōʻaiapili, e ʻike i kēia ʻatikala kōkua mai Mozilla .

Hoʻopau ʻia ka mixin e like me v3.2.0 , me ka hoʻokomo ʻana o Autoprefixer. No ka mālama ʻana i hope, e hoʻohana mau ʻo Bootstrap i ka mixin i loko a hiki i ka Bootstrap v4.

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

Nā kihi pōʻai

I kēia lā, kākoʻo nā polokalamu kele pūnaewele hou i ka border-radiuswaiwai prefixed ʻole. No laila, ʻaʻohe .border-radius()mixin, akā aia ʻo Bootstrap i nā pōkole no ka hoʻopuni wikiwiki ʻana i ʻelua kihi ma kekahi ʻaoʻao o kahi 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;
}

Pahu (Holo) aka

Inā ke hoʻohana nei kāu poʻe i manaʻo ʻia i nā polokalamu kele pūnaewele hou loa a maikaʻi loa, e ʻoluʻolu e hoʻohana wale i ka box-shadowwaiwai iā ia iho. Inā makemake ʻoe i ke kākoʻo no ka Android kahiko (pre-v4) a me nā polokalamu iOS (pre-iOS 5), e hoʻohana i ka mixin i hoʻopau ʻia e kiʻi i ka prefix-webkit pono.

Hoʻopau ʻia ka mixin e like me v3.1.0 , ʻoiai ʻaʻole kākoʻo kūhelu ʻo Bootstrap i nā paepae kahiko i kākoʻo ʻole i ka waiwai maʻamau. No ka mālama ʻana i hope, e hoʻohana mau ʻo Bootstrap i ka mixin i loko a hiki i ka Bootstrap v4.

E ʻoluʻolu e hoʻohana i rgba()nā waihoʻoluʻu i loko o kāu mau pahu pahu i hoʻohui ʻia e like me ka maʻalahi me nā kāʻei.

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

Nā hoʻololi

Nā huila lehulehu no ka maʻalahi. E hoʻonoho i nā ʻike hoʻololi a pau me hoʻokahi, a i ʻole e kuhikuhi i kahi lohi a me ka lōʻihi e like me ka mea e pono ai.

Hoʻopau ʻia nā mixins e like me v3.2.0 , me ka hoʻokomo ʻana o Autoprefixer. No ka mālama ʻana i ka hoʻohālikelike hope, e hoʻohana mau ʻo Bootstrap i nā mixins i loko a hiki i ka 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;
}

Hoʻololi

E hoʻololi, unahi, unuhi (neʻe), a skew i kekahi 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;
}

Nā mea hoʻolalelale

Hoʻokahi mixin no ka hoʻohana ʻana i nā waiwai animation a pau o CSS3 i hoʻokahi hoʻolaha a me nā hui ʻē aʻe no kēlā me kēia waiwai.

.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

E hoʻonoho i ka opacity no nā polokalamu kele pūnaewele a hāʻawi i kahi filterhāʻule no IE8.

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

kikokikona wahi wahi

Hāʻawi i ka pōʻaiapili no nā mana palapala i loko o kēlā me kēia kahua.

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

Nā kolamu

E hana i nā kolamu ma o CSS i loko o hoʻokahi mea.

.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

E hoʻololi maʻalahi i nā kala ʻelua i kahi ʻoluʻolu hope. E kiʻi i ka holomua a hoʻonohonoho i kahi kuhikuhi, e hoʻohana i ʻekolu kala, a i ʻole e hoʻohana i kahi gradient radial. Me hoʻokahi mixin loaʻa iā ʻoe nā syntax prefixed āpau āu e pono ai.

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

Hiki nō hoʻi iā ʻoe ke kuhikuhi i ke kihi o kahi kala ʻelua maʻamau, gradient linear:

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

Inā makemake ʻoe i kahi ʻano gradient style barber-stripe, maʻalahi nō hoʻi. E koho wale i hoʻokahi kala a e uhi mākou i kahi kaha keʻokeʻo translucent.

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

E piʻi i luna a hoʻohana i ʻekolu kala. E hoʻonoho i ka waihoʻoluʻu mua, ka lua o ka waihoʻoluʻu, ka lua o ka waihoʻoluʻu pani (he pakeneka waiwai like 25%), a me ke kolu o ka waihoʻoluʻu me kēia mau huila:

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

Nā poʻo i luna! Inā pono ʻoe e wehe i kahi gradient, e hōʻoia e wehe i kekahi IE-specific filterāu i hoʻohui ai. Hiki iā ʻoe ke hana i kēlā me ka hoʻohana ʻana i ka .reset-filter()mixin me ka ʻaoʻao background-image: none;.

Mea hoʻohuihui

ʻO nā mea hoʻohui hoʻohana nā mea hui e hui pū i nā waiwai CSS pili ʻole e hoʻokō i kahi pahuhopu a i ʻole hana.

Hoʻomaʻemaʻe

E poina i ka hoʻohui class="clearfix"ʻana i kekahi mea a hoʻohui i ka .clearfix()mixin inā kūpono. Hoʻohana i ka micro clearfix mai Nicolas Gallagher .

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

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

Ke kikowaena hoʻopololei

E hoʻokomo koke i kekahi mea i loko o kona makua. Pono widtha max-widthhoʻonohonoho ʻia.

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

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

Nā mea kōkua nui

E wehewehe maʻalahi i nā ana o kekahi mea.

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

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

Nā ʻāpana kikokikona hiki ke hoʻololi ʻia

E hoʻonohonoho maʻalahi i nā koho hoʻololi no kekahi textarea, a i ʻole kekahi mea ʻē aʻe. Paʻamau i ka hana polokalamu kele pūnaewele maʻamau ( both).

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

ʻOki kikokiko

E ʻoki maʻalahi i nā kikokikona me kahi ellipsis me kahi hui pū hoʻokahi. Pono ka ʻeleʻele a pae blockpaha inline-block.

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

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

Nā kiʻi retina

E wehewehe i ʻelua ala kiʻi a me nā ʻāpana kiʻi @1x, a e hāʻawi ʻo Bootstrap i kahi hulina media @2x. Inā he nui kāu mau kiʻi e lawelawe ai, e noʻonoʻo e kākau lima i kāu kiʻi retina CSS me ka lima i hoʻokahi nīnau media.

.img-retina(@file-1x; @file-2x; @width-1x; @height-1x) {
  background-image: url("@{file-1x}");

  @media
  only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (   min--moz-device-pixel-ratio: 2),
  only screen and (     -o-min-device-pixel-ratio: 2/1),
  only screen and (        min-device-pixel-ratio: 2),
  only screen and (                min-resolution: 192dpi),
  only screen and (                min-resolution: 2dppx) {
    background-image: url("@{file-2x}");
    background-size: @width-1x @height-1x;
  }
}

// Usage
.jumbotron {
  .img-retina("/img/bg-1x.png", "/img/bg-2x.png", 100px, 100px);
}

ʻOiai ua kūkulu ʻia ʻo Bootstrap ma ka liʻiliʻi, loaʻa iā ia kahi awa Sass mana . Mālama mākou iā ia ma kahi waihona ʻokoʻa ʻo GitHub a mālama i nā mea hou me kahi palapala hoʻololi.

He aha ka mea i komo

No ka mea he repo ʻokoʻa ko ke awa Sass a lawelawe i kahi lehulehu ʻē aʻe, ʻokoʻa loa nā mea o ka papahana mai ka papahana Bootstrap nui. ʻO kēia ka mea e hōʻoiaʻiʻo ai i ka port Sass e like me ka nui o nā ʻōnaehana Sass e like me ka hiki.

Alanui	wehewehe
`lib/`	Ruby gem code (Sass configuration, Rails and Compass integrations)
`tasks/`	Nā palapala hoʻololi (e hoʻohuli i ke kahawai liʻiliʻi iā Sass)
`test/`	Nā hoʻāʻo hōʻuluʻulu
`templates/`	Hōʻike pūʻolo panana panana
`vendor/assets/`	Sass, JavaScript, a me nā faila font
`Rakefile`	Nā hana kūloko, e like me ka rake a me ka hoʻololi

E kipa i ka waihona waihona GitHub o Sass port e ʻike i kēia mau faila i ka hana.

Hoʻokomo

No ka ʻike e pili ana i ka hoʻouka ʻana a me ka hoʻohana ʻana iā Bootstrap no Sass, e ʻimi i ka waihona waihona GitHub readme . ʻO ia ke kumu hou loa a loaʻa ka ʻike no ka hoʻohana ʻana me Rails, Compass, a me nā papahana Sass maʻamau.

Bootstrap no Sass

CSS

Nānā nui

HTML5 doctype

Mobile mua

Typography a me nā loulou

Normalize.css

Nā pahu pahu

Pūnaehana mānoanoa

Hoʻolauna

Nīnau Media

Nā koho koho

Laʻana: Hoʻopaʻa ʻia-a-horizontal

Laʻana: ipu wai

Laʻana: Mobile and desktop

Laʻana: Mobile, tablet, desktop

Laʻana: ʻOpiʻi kolamu

Hoʻihoʻi hou ke kolamu pane

Hoʻopio i nā kolamu

Nā kolamu nesting

Kakau ʻana o ke kolamu

Liʻiliʻi nā huila a me nā mea hoʻololi

Nā mea hoʻololi

Mea huikau

Laʻana hoʻohana

Palapala kiʻi

Nā poʻomanaʻo

h1. Poʻomanaʻo Bootstrap

h2. Poʻomanaʻo Bootstrap

h3. Poʻomanaʻo Bootstrap

h4. Poʻomanaʻo Bootstrap

h5. Poʻomanaʻo Bootstrap

h6. Poʻomanaʻo Bootstrap

h1. Poʻomanaʻo Bootstrap kikokikona lua

h2. Poʻomanaʻo Bootstrap kikokikona lua

h3. Poʻomanaʻo Bootstrap kikokikona lua

h4. Poʻomanaʻo Bootstrap kikokikona lua

h5. Poʻomanaʻo Bootstrap kikokikona lua

h6. Poʻomanaʻo Bootstrap kikokikona lua

kope kino

Kope kino alakai

Kūkulu ʻia me ka liʻiliʻi

Nā mea kikokikona laina

kikokiko i kaha ʻia

Holoi kikokikona

kikokikona kuʻi

kikokiko i hoʻokomo ʻia

kikokikona kaha lalo

kikokikona liʻiliʻi

wiwo ole

ʻO nā kikoʻī

Nā mea ʻokoʻa

Nā papa alignment

Nā papa hoʻololi

Nā pōkole

ʻO ka pōkole kumu

Hoʻomaka mua

Heluhelu

Blockquotes

Paʻamau blockquote

Nā koho blockquote

Kapa inoa i kumu

Nā hōʻike ʻokoʻa

Nā papa inoa

Kau ʻole ʻia

Kauoha ʻia

Kaulana ʻole

Inline

wehewehe

ʻO ka wehewehe ʻana i ke alo

ʻoki ʻakomi

Code

Inline

Hoʻokomo mea hoʻohana

poloka kumu

Nā mea hoʻololi

Hoʻopuka laʻana

Nā papaʻaina

kumu hoʻohālike

Nā lālani kaha

Hoʻolike like ʻole o ka polokalamu kele pūnaewele

`:focus`Mokuʻāina Demo

Hōʻike e pili ana i ka hana loulou o`<a>`

`.sr-only`Nā ikona koho me nā lepili huna