CSS
ʻO nā hoʻonohonoho CSS honua, nā mea HTML kumu i kāʻili ʻia a hoʻonui ʻia me nā papa hiki ke hoʻonui ʻia, a me kahi ʻōnaehana grid holomua.
ʻO nā hoʻonohonoho CSS honua, nā mea HTML kumu i kāʻili ʻia a hoʻonui ʻia me nā papa hiki ke hoʻonui ʻia, a me kahi ʻōnaehana grid holomua.
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.
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>
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">
Hoʻonohonoho ʻo Bootstrap i ka hōʻike honua maʻamau, typography, a me nā ʻano loulou. ʻOiaʻiʻo, mākou:
background-color: #fff;
ma kabody
@font-family-base
, @font-size-base
, a me @line-height-base
nā hiʻohiʻona e like me kā mākou kumu kikokikona@link-color
a hoʻopili i nā kaha lalo ma ka loulou:hover
Hiki ke loaʻa kēia mau ʻano i loko o scaffolding.less
.
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 .
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 padding
me nā mea hou aʻe, ʻaʻohe pahu i nestable.
E hoʻohana .container
no kahi pahu ākea paʻa paʻa.
<div class="container">
...
</div>
E hoʻohana .container-fluid
no 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ʻ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:
.container
(ka laula paʻa) a i ʻole .container-fluid
(ka laula piha) no ka alignment kūpono a me ka pale..row
a .col-xs-4
loaʻ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.padding
. Hoʻopili ʻia kēlā pale ma nā lālani no ke kolamu mua a hope ma o ka palena ʻino ma .row
s..col-xs-4
..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.
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-width
e 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) { ... }
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 |
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
.
<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>
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 .container
i .container-fluid
.
<div class="container-fluid">
<div class="row">
...
</div>
</div>
ʻ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.
<!-- 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>
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.
<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>
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.
<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 > 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>
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 .clearfix
a me kā mākou papa hana pono pane .
<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>
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-4
neʻe .col-md-4
ma luna o ʻehā kolamu.
<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-0
nā 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>
No ka hoʻopili ʻana i kāu ʻike me ka mākia paʻamau, e hoʻohui i kahi kolamu hou .row
a 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).
<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>
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.
<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>
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.
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;
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));
}
}
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>
Loaʻa nā poʻomanaʻo HTML āpau, <h1>
ma o <h6>
,. .h1
ma o .h6
nā 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 .small
papa.
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>
ʻ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>
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>
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-base
a 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.
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.
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>
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>
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>
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ā.
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-size
no nā <small>
mea i hoʻopaʻa ʻia.
Hiki iā ʻoe ke hoʻohana i kahi mea inline me .small
kahi 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>
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>
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>
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.
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>
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>
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 title
hiʻ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 o ka huaʻōlelo attribute ʻo attr .
<abbr title="attribute">attr</abbr>
Hoʻohui .initialism
i 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>
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>
.
<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>
No ka haʻi ʻana i nā poloka maʻiʻo mai kahi kumu ʻē aʻe i loko o kāu palapala.
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>
Hoʻololi ke ʻano a me ka ʻike no nā ʻokoʻa maʻalahi ma kahi maʻamau <blockquote>
.
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.
<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>
Hoʻohui .blockquote-reverse
no kahi blockquote me ka ʻike pololei.
<blockquote class="blockquote-reverse">
...
</blockquote>
He papa inoa o nā mea i pili ʻole i ke kauoha .
<ul>
<li>...</li>
</ul>
He papa inoa o nā mea i manaʻo nui ʻia ke kauoha .
<ol>
<li>...</li>
</ol>
Wehe i ka palena paʻamau list-style
a 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.
<ul class="list-unstyled">
<li>...</li>
</ul>
E kau i nā mea papa inoa a pau ma ka laina hoʻokahi display: inline-block;
a me kahi pale māmā.
<ul class="list-inline">
<li>...</li>
</ul>
He papa inoa o nā huaʻōlelo me kā lākou mau wehewehe pili.
<dl>
<dt>...</dt>
<dd>...</dd>
</dl>
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.
<dl class="dl-horizontal">
<dt>...</dt>
<dd>...</dd>
</dl>
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.
E kāʻei i nā ʻāpana code inline me <code>
.
<section>
pono e ʻōwili ʻia e like me ka inline.
For example, <code><section></code> should be wrapped as inline.
E hoʻohana i ka mea <kbd>
e hōʻike i ka hoʻokomo maʻamau i hoʻokomo ʻia ma o ka keyboard.
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>
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><p>Sample text here...</p></pre>
Hiki iā ʻoe ke hoʻohui i ka .pre-scrollable
papa, kahi e hoʻonoho ai i kahi kiʻekiʻe kiʻekiʻe o 350px a hāʻawi i kahi scrollbar y-axis.
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>
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>
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 .table
i 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.
# | Inoa mua | Inoa hope | inoa hoʻohana |
---|---|---|---|
1 | Maka | Otto | @mdo |
2 | ʻO Iakoba | Thornton | @momona |
3 | Larry | ka Manu |
<table class="table">
...
</table>
E hoʻohana .table-striped
e hoʻohui i ka zebra-striping i kēlā me kēia lālani pākaukau i loko o ka <tbody>
.
Hoʻonohonoho ʻia nā papa ʻoniʻoni ma o ka :nth-child
mea 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 |
<table class="table table-striped">
...
</table>
Hoʻohui .table-bordered
no 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 |
<table class="table table-bordered">
...
</table>
Hoʻohui .table-hover
i 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 |
<table class="table table-hover">
...
</table>
Hoʻohui .table-condensed
i 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 |
<table class="table table-condensed">
...
</table>
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>
ʻ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-only
papa.
E hana i nā pākaukau pane ma ke kāʻei ʻana i kekahi .table
i 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.
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.
Loaʻa iā Firefox kekahi ʻano hoʻolālā kahua ʻano ʻino e pili ana width
i 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>
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-control
ka width: 100%;
paʻamau. E hoʻopili i nā lepili a me nā kaohi .form-group
no 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 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.
E hoʻohui .form-inline
i 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.
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.
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-only
papa. 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 title
ka ʻ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 placeholder
i 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>
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-group
ai 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ā hiʻohiʻona o nā mana ʻano maʻamau i kahi hoʻolālā puka laʻana.
ʻ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
.
E kāhua piha ʻia nā mea hoʻokomo inā type
hōʻike pono ʻia ko lākou.
<input type="text" class="form-control" placeholder="Text input">
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 .
Kākoʻo i nā laina kikokikona he nui. E hoʻololi rows
i ke ʻano e like me ka pono.
<textarea class="form-control" rows="3"></textarea>
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 .disabled
papa i ka makua .radio
, .radio-inline
, .checkbox
, a i ʻole .checkbox-inline
.
<div class="checkbox">
<label>
<input type="checkbox" value="">
Option one is this and that—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—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>
E hoʻohana i nā papa a i .checkbox-inline
ʻole .radio-inline
nā 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>
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>
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-radius
waiwai.
<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>
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-static
papa 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>
outline
Wehe mākou i nā kaila paʻamau ma kekahi mau mana ʻano a kau i kahi box-shadow
ma kona wahi no :focus
.
:focus
Mokuʻāina DemoHoʻohana ka mea hoʻokomo laʻana i nā ʻano maʻamau i kā mākou palapala e hōʻike i ka :focus
mokuʻāina ma kahi .form-control
.
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-allowed
kī.
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
Hoʻohui i ke disabled
ʻano i kahi <fieldset>
e hoʻopau i nā mana āpau i loko o ka <fieldset>
manawa hoʻokahi.
<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.
ʻ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>
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>
Hoʻopaʻa ʻia i nā kikokikona kōkua pae no nā kaohi puka.
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>
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-success
i ka mea makua. E loaʻa i kēlā me kēia .control-label
, .form-control
, a .help-block
i loko o ia mea nā ʻano hōʻoia.
ʻ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-only
papa - 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>
Hiki iā ʻoe ke hoʻohui i nā kiʻi manaʻo koho me ka hoʻohui a .has-feedback
me ka ikona kūpono.
Hana wale nā kiʻi manaʻo me nā <input class="form-control">
mea kikokikona.
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-only
papa. Inā pono ʻoe e hana me ka ʻole o nā lepili, e hoʻololi i ka top
waiwai 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.
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-only
papa 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-only
kikokikona 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>
<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 hunaInā hoʻohana ʻoe i ka .sr-only
papa 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>
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-*
.
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>
Hoʻonui wikiwiki i nā lepili a hana i nā mana i loko .form-horizontal
ma 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>
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>
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">
ʻ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.
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"
.
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-height
o <input>
-based, e hoʻohālikelike ʻole i ke kiʻekiʻe o nā pihi ʻē aʻe ma Firefox.
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>
ʻ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-only
papa.
Makemake i nā pihi nui a liʻiliʻi paha? Hoʻohui .btn-lg
, .btn-sm
, a i ʻole .btn-xs
no 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>
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 .active
ma <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.
ʻAʻole pono e hoʻohui :active
no 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>
Hoʻohui i ka .active
papa i nā <a>
pihi.
<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>
E nānā i nā pihi hiki ʻole ke kaomi ma ka hoʻihoʻi ʻana iā lākou me opacity
.
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>
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.
Hoʻohui i ka .disabled
papa i nā <a>
pihi.
<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 .disabled
ma ke ʻano he papa hana ma aneʻi, e like me ka .active
papa maʻamau, no laila ʻaʻohe prefix e koi ʻia.
Ke hoʻohana nei kēia papa pointer-events: none
e 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.
Hiki ke hoʻopili ʻia nā kiʻi ma Bootstrap 3 ma o ka hoʻohui ʻana o ka .img-responsive
papa. 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-responsive
papa, e hoʻohana .center-block
ma kahi o .text-center
. E ʻike i ka ʻāpana papa kōkua no nā kikoʻī hou aku e pili ana i .center-block
ka hoʻohana.
Ma Internet Explorer 8-10, ʻokoʻa ka nui o nā kiʻi SVG me .img-responsive
ka 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">
Hoʻohui i nā papa i kahi <img>
mea e hoʻokalakala maʻalahi i nā kiʻi i kekahi papahana.
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">
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>
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.
ʻ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-only
papa. .
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>
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.
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.
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">×</span></button>
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>
E lana i kekahi mea ma ka hema a me ka akau me ka papa. !important
ua 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();
}
E hoʻonoho i kahi mea display: block
a 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();
}
E hoʻomaʻemaʻe maʻalahi float
ma 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();
}
E hoʻoikaika i kahi mea e hōʻike ʻia a hūnā ʻia ( me nā mea heluhelu pale ) me ka hoʻohana a .show
me .hidden
nā papa. Hoʻohana kēia mau papa !important
e 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.
.hide
loaʻ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, .invisible
hiki 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();
}
Hūnā i kekahi mea i nā mea hana a pau koe nā mea heluhelu pale me .sr-only
. E hoʻohui .sr-only
me .sr-only-focusable
ka 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();
}
E hoʻohana i ka .text-hide
papa 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.
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 display
waiwai CSS i helu ʻia ma lalo nei.
Hui o na papa | CSSdisplay |
---|---|
.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-lg
aia 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.
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-print
nō 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.
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.
Hōʻike ʻia nā māka ʻōmaʻomaʻo e ʻike ʻia ka mea i kāu wahi nānā i kēia manawa.
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.
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 .
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.
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 .
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;
}
ʻ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;
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-color
hoʻ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
.
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;
ʻ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";
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;
ʻ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.
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;
}
I kēia lā, kākoʻo nā polokalamu kele pūnaewele hou i ka border-radius
waiwai 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;
}
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-shadow
waiwai 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ā 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;
}
E hoʻololi, unahi, unuhi (neʻe), a skew i kekahi mea.
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.
.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;
}
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.
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.
.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;
}
E hoʻonoho i ka opacity no nā polokalamu kele pūnaewele a hāʻawi i kahi filter
hāʻule no IE8.
.opacity(@opacity) {
opacity: @opacity;
// IE8 filter
@opacity-ie: (@opacity * 100);
filter: ~"alpha(opacity=@{opacity-ie})";
}
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
}
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;
}
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;
.
ʻ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.
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();
}
E hoʻokomo koke i kekahi mea i loko o kona makua. Pono width
a max-width
hoʻonohonoho ʻia.
// Mixin
.center-block() {
display: block;
margin-left: auto;
margin-right: auto;
}
// Usage
.container {
width: 940px;
.center-block();
}
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); }
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;
}
E ʻoki maʻalahi i nā kikokikona me kahi ellipsis me kahi hui pū hoʻokahi. Pono ka ʻeleʻele a pae block
paha inline-block
.
// Mixin
.text-overflow() {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
// Usage
.branch-name {
display: inline-block;
max-width: 200px;
.text-overflow();
}
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.
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.
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.