Loaʻa nā glyphs

Loaʻa ma luna o 250 mau glyphs ma ke ʻano kikokikona mai ka Glyphicon Halflings set. ʻAʻole loaʻa nā Glyphicons Halflings no ka manuahi, akā ua hoʻolako ka mea hana iā lākou no Bootstrap me ke kumu kūʻai ʻole. Ma ke ʻano he mahalo, noi wale mākou e hoʻokomo i kahi loulou i Glyphicons inā hiki.

glyphicon glyphicon-asterisk
glyphicon glyphicon-plus
glyphicon glyphicon-euro
glyphicon glyphicon-eur
glyphicon glyphicon-minus
glyphicon glyphicon-cloud
glyphicon glyphicon-envelope
glyphicon glyphicon-pencil
glyphicon glyphicon-aniani
glyphicon glyphicon-mele
ʻimi ʻimi-glyphicon
puuwai puuwai
glyphicon glyphicon-star
glyphicon glyphicon-star-empty
glyphicon glyphicon-mea hoʻohana
kiʻiʻoniʻoni kiʻiʻoniʻoni
glyphicon glyphicon-th-nui
glyphicon glyphicon-th
glyphicon glyphicon-th-list
glyphicon glyphicon-ok
glyphicon glyphicon-remove
glyphicon glyphicon-zoom-in
glyphicon glyphicon-zoom-out
glyphicon glyphicon-off
glyphicon glyphicon-signal
glyphicon glyphicon-cog
glyphicon glyphicon-trash
glyphicon glyphicon-home
glyphicon glyphicon-file
glyphicon glyphicon-manawa
glyphicon glyphicon-alanui
glyphicon glyphicon-download-alt
glyphicon glyphicon-download
glyphicon glyphicon-hoʻouka
glyphicon glyphicon-inbox
glyphicon glyphicon-play-circle
glyphicon glyphicon-repeat
glyphicon glyphicon-refresh
glyphicon glyphicon-list-alt
kīʻaha kīʻaha
glyphicon glyphicon-flag
glyphicon glyphicon-headphones
glyphicon glyphicon-volume-off
glyphicon glyphicon-volume-down
glyphicon glyphicon-volume-up
glyphicon glyphicon-qrcode
glyphicon glyphicon-barcode
glyphicon glyphicon-tag
glyphicon glyphicon-tags
puke-puke-glyphicon
glyphicon glyphicon-bookmark
glyphicon glyphicon-print
kiʻi kiʻi kiʻi kiʻi kiʻi
glyphicon glyphicon-font
glyphicon glyphicon-bold
glyphicon glyphicon-italic
glyphicon glyphicon-text-kiʻekiʻe
glyphicon glyphicon-text-ākea
glyphicon glyphicon-align-left
glyphicon glyphicon-align-center
glyphicon glyphicon-align-right
glyphicon glyphicon-align-justify
glyphicon glyphicon-list
glyphicon glyphicon-indent-hema
glyphicon glyphicon-indent-akau
glyphicon glyphicon-facetime-wikiō
glyphicon glyphicon-kiʻi
glyphicon glyphicon-map-marker
glyphicon glyphicon-hoʻololi
glyphicon glyphicon-tint
glyphicon glyphicon-hoʻoponopono
kaʻana like ʻole
glyphicon glyphicon-check
glyphicon glyphicon-neʻe
glyphicon glyphicon-step-backward
glyphicon glyphicon-wikiwiki-hope
glyphicon glyphicon-hope
glyphicon glyphicon-pāʻani
glyphicon glyphicon-pause
glyphicon glyphicon-stop
glyphicon glyphicon-i mua
glyphicon glyphicon-wikiwiki
glyphicon glyphicon-step-forward
glyphicon glyphicon-eject
glyphicon glyphicon-chevron-hema
glyphicon glyphicon-chevron-akau
glyphicon glyphicon-plus-sign
glyphicon glyphicon-minus-hōʻailona
glyphicon glyphicon-remove-sign
glyphicon glyphicon-ok-sign
glyphicon glyphicon-nīnau-hōʻailona
glyphicon glyphicon-info-sign
glyphicon glyphicon-screenshot
glyphicon glyphicon-remove-poʻai
glyphicon glyphicon-ok-pōʻai
glyphicon glyphicon-ban-poʻai
glyphicon glyphicon-arrow-hema
glyphicon glyphicon-arrow-akau
glyphicon glyphicon-arrow-up
glyphicon glyphicon-arrow-down
glyphicon glyphicon-share-alt
glyphicon glyphicon-resize-piha
glyphicon glyphicon-resize-liʻiliʻi
glyphicon glyphicon-exclamation-sign
makana makana
glyphicon glyphicon-leaf
glyphicon glyphicon-ahi
glyphicon glyphicon-maka-aka
glyphicon glyphicon-maka-pili
glyphicon glyphicon-warning-sign
ʻeleu-plane glyphicon
glyphicon glyphicon-calendar
glyphicon glyphicon-random
glyphicon glyphicon-manaʻo
glyphicon glyphicon-magnet
glyphicon glyphicon-chevron-up
glyphicon glyphicon-chevron-down
glyphicon glyphicon-retweet
kaʻa kūʻai-kūʻai-glyphicon
glyphicon glyphicon-folder-close
glyphicon glyphicon-folder-wehe
glyphicon glyphicon-resize-vertical
glyphicon glyphicon-resize-horizontal
glyphicon glyphicon-hdd
glyphicon glyphicon-bullhorn
glyphicon glyphicon-bell
glyphicon glyphicon-certificate
glyphicon glyphicon-thumbs-up
glyphicon glyphicon-thumbs-down
glyphicon glyphicon-lima-akau
glyphicon glyphicon-lima-hema
glyphicon glyphicon-lima-lima
glyphicon glyphicon-lima-lalo
glyphicon glyphicon-circle-arrow-akau
glyphicon glyphicon-circle-arrow-hema
glyphicon glyphicon-circle-arrow-up
glyphicon glyphicon-circle-arrow-down
glyphicon glyphicon-globe
wiliwili-wiliwili
glyphicon glyphicon-hana
kānana ʻeleʻele
ʻeke pahupaʻi kiʻi
glyphicon glyphicon-piha piha
glyphicon glyphicon-dashboard
glyphicon glyphicon-pepa
glyphicon glyphicon-naʻau-ʻohe
loulou glyphicon
kelepona uila
glyphicon glyphicon-pushpin
glyphicon glyphicon-usd
glyphicon glyphicon-gbp
glyphicon glyphicon-sort
glyphicon glyphicon-sort-by-alphabet
glyphicon glyphicon-sort-by-alphabet-alt
glyphicon glyphicon-sort-by-order
glyphicon glyphicon-sort-by-order-alt
glyphicon glyphicon-sort-by-attributes
glyphicon glyphicon-sort-by-attributes-alt
glyphicon glyphicon-unchecked
glyphicon glyphicon-expand
glyphicon glyphicon-collapse-down
glyphicon glyphicon-collapse-up
glyphicon glyphicon-log-in
glyphicon glyphicon-flash
glyphicon glyphicon-log-out
glyphicon glyphicon-new-window
glyphicon glyphicon-record
glyphicon glyphicon-save
glyphicon glyphicon-open
glyphicon glyphicon-i mālama ʻia
glyphicon glyphicon-import
glyphicon glyphicon-export
glyphicon glyphicon-send
glyphicon glyphicon-floppy-disk
glyphicon glyphicon-floppy-saved
glyphicon glyphicon-floppy-remove
glyphicon glyphicon-floppy-save
glyphicon glyphicon-floppy-open
glyphicon glyphicon-credit-card
glyphicon glyphicon-transfer
kīʻaha kīʻaha
glyphicon glyphicon-header
glyphicon glyphicon-compressed
glyphicon glyphicon-pepeiao
glyphicon glyphicon-phone-alt
hale kiaʻi ʻeleʻele
glyphicon glyphicon-stats
glyphicon glyphicon-sd-wikiō
glyphicon glyphicon-hd-wikiō
glyphicon glyphicon-subtitles
glyphicon glyphicon-sound-stereo
glyphicon glyphicon-sound-dolby
glyphicon glyphicon-sound-5-1
glyphicon glyphicon-sound-6-1
glyphicon glyphicon-sound-7-1
glyphicon glyphicon-copyright-mark
glyphicon glyphicon-kauino-mark
glyphicon glyphicon-cloud-download
glyphicon glyphicon-cloud-upload
glyphicon glyphicon-tree-conifer
glyphicon glyphicon-lāʻau-deciduous
glyphicon glyphicon-cd
glyphicon glyphicon-save-file
glyphicon glyphicon-open-file
glyphicon glyphicon-level-up
glyphicon glyphicon-kopi
glyphicon glyphicon-paste
glyphicon glyphicon-alert
glyphicon glyphicon-equalizer
glyphicon glyphicon-king
mōʻīwahine glyphicon
glyphicon glyphicon-pawn
glyphicon glyphicon-bishop
glyphicon glyphicon-naita
glyphicon glyphicon-baby-formula
glyphicon glyphicon-tent
glyphicon glyphicon-blackboard
glyphicon glyphicon-moe
glyphicon glyphicon-apple
glyphicon glyphicon-erase
glyphicon glyphicon-hourglass
glyphicon glyphicon-lamp
glyphicon glyphicon-duplicate
glyphicon glyphicon-piggy-bank
glyphicon glyphicon-scissors
glyphicon glyphicon-bitcoin
glyphicon glyphicon-btc
glyphicon glyphicon-xbt
glyphicon glyphicon-yen
glyphicon glyphicon-jpy
glyphicon glyphicon-ruble
glyphicon glyphicon-rub
pālākiō glyphicon
glyphicon glyphicon-ice-lolly
glyphicon glyphicon-ice-lolly-tasted
glyphicon glyphicon-education
glyphicon glyphicon-koho-horizontal
glyphicon glyphicon-option-vertical
glyphicon glyphicon-menu-hamburger
glyphicon glyphicon-modal-window
glyphicon glyphicon-aila
glyphicon glyphicon-grain
glyphicon glyphicon-sunglasses
glyphicon glyphicon-text-size
glyphicon glyphicon-text-color
glyphicon glyphicon-text-background
glyphicon glyphicon-object-align-top
glyphicon glyphicon-mea-align-lalo
glyphicon glyphicon-object-align-horizontal
glyphicon glyphicon-object-align-left
glyphicon glyphicon-object-align-vertical
glyphicon glyphicon-object-align-right
glyphicon glyphicon-triangle-akau
glyphicon glyphicon-triangle-hema
glyphicon glyphicon-triangle-lalo
glyphicon glyphicon-triangle-luna
glyphicon glyphicon-console
glyphicon glyphicon-superscript
glyphicon glyphicon-subscript
glyphicon glyphicon-menu-hema
glyphicon glyphicon-menu-akau
glyphicon glyphicon-menu-lalo
papa kuhikuhi-up

Pehea e ho ohana

No nā kumu hana, pono nā kiʻiʻoniʻoni a pau i ka papa kumu a me ka papa ikona pākahi. No ka hoʻohana ʻana, e kau i kēia code ma nā wahi āpau. E mālama pono e waiho i kahi kaawale ma waena o ka ikona a me ke kikokikona no ka padding kūpono.

Mai hui pū me nā mea ʻē aʻe

ʻAʻole hiki ke hoʻohui pololei ʻia nā papa ikona me nā mea ʻē aʻe. ʻAʻole pono lākou e hoʻohana pū me nā papa ʻē aʻe ma ka mea like. Akā, hoʻohui i kahi pūnana <span>a hoʻopili i nā papa ikona i ka <span>.

No ka hoʻohana wale ʻana i nā mea ʻole

Pono e hoʻohana ʻia nā papa ikona ma nā mea ʻaʻohe kikokikona a ʻaʻohe mea keiki.

Ke hoʻololi nei i ka wahi kikokikona ikona

Manaʻo ʻo Bootstrap e loaʻa nā faila font i loko o ka ../fonts/papa kuhikuhi, pili i nā faila CSS i hui ʻia. ʻO ka neʻe ʻana a i ʻole ka inoa hou ʻana i kēlā mau faila font ʻo ia ka hoʻonui ʻana i ka CSS ma kekahi o nā ala ʻekolu:

E hoʻololi i ka @icon-font-patha/a i ʻole @icon-font-namenā mea hoʻololi i ke kumu Nā faila liʻiliʻi.
E hoʻohana i nā koho URL pili i hāʻawi ʻia e ka mea hoʻopili liʻiliʻi.
E hoʻololi i nā url()ala i ka CSS i hōʻuluʻulu ʻia.

E hoʻohana i kēlā me kēia koho i kūpono i kāu hoʻonohonoho hoʻomohala kikoʻī.

Nā ikona hiki ke loaʻa

E hoʻolaha nā mana hou o nā ʻenehana kōkua i ka CSS i hoʻokumu ʻia, a me nā huaʻōlelo Unicode kikoʻī. I mea e pale aku ai i ka hoʻopuka ʻana ʻole a huikau i nā mea heluhelu kiʻi (ʻoiai ke hoʻohana ʻia nā kiʻi no ka hoʻonani ʻana), hūnā mākou iā lākou me ka ʻano aria-hidden="true".

Inā ʻoe e hoʻohana ana i kahi ikona no ka haʻi ʻana i ka manaʻo (ma mua o ke ʻano he mea hoʻonaninani wale nō), e hōʻoia i ka lawe ʻia ʻana o kēia manaʻo i nā ʻenehana kōkua - no ka laʻana, e hoʻokomo i nā ʻike hou, huna ʻia me ka .sr-onlypapa.

Inā ʻoe e hana nei i nā mana me ka ʻole o nā kikokikona ʻē aʻe (e like me ka <button>ikona wale nō), pono ʻoe e hāʻawi mau i nā maʻiʻo ʻē aʻe e ʻike ai i ke kumu o ka mana, i mea e maʻalahi ai nā mea hoʻohana i nā ʻenehana kōkua. I kēia hihia, hiki iā ʻoe ke hoʻohui i kahi aria-labelʻano ma luna o ka mana ponoʻī.

<span class="glyphicon glyphicon-search" aria-hidden="true"></span>

Nā laʻana

E hoʻohana iā lākou i nā pihi, nā pūʻulu pihi no kahi mea hana, hoʻokele, a i ʻole nā mea hoʻokomo puka i hoʻomaka mua ʻia.

<button type="button" class="btn btn-default" aria-label="Left Align">
  <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</button>

<button type="button" class="btn btn-default btn-lg">
  <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
</button>

He kiʻiona i hoʻohana ʻia ma kahi mākaʻikaʻi e haʻi aku he memo hewa ia, me nā .sr-onlykikokikona hou e haʻi i kēia ʻōlelo hōʻike i nā mea hoʻohana i nā ʻenehana kōkua.

E hoʻokomo i kahi leka uila kūpono

<div class="alert alert-danger" role="alert">
  <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
  <span class="sr-only">Error:</span>
  Enter a valid email address
</div>

Hiki ke hoʻololi i ka papa kuhikuhi no ka hōʻike ʻana i nā papa inoa o nā loulou. Hana ʻia me ka plugin JavaScript dropdown .

Laʻana

E kāʻei i ke kumu o ka hāʻule iho a me ka papa kuhikuhi i lalo i loko o .dropdown, a i ʻole kekahi mea e hōʻike ana position: relative;. A laila hoʻohui i ka HTML o ka papa kuhikuhi.

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

Hiki ke hoʻololi i nā menus dropdown e hoʻonui i luna (ma kahi o lalo) ma ka hoʻohui .dropupʻana i ka makua.

<div class="dropup">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropup
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

Hoʻopololei

Ma ka maʻamau, hoʻonoho ʻia ka papa kuhikuhi iho i lalo 100% mai luna a ma ka ʻaoʻao hema o kona makua. Hoʻohui .dropdown-menu-righti kahi .dropdown-menue hoʻolike ʻākau i ka papa kuhikuhi hāʻule iho.

<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel">
  ...
</ul>

Nā poʻomanaʻo

Hoʻohui i kahi poʻomanaʻo e hōʻailona i nā ʻāpana o nā hana ma kekahi papa kuhikuhi.

<ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
  ...
  <li class="dropdown-header">Dropdown header</li>
  ...
</ul>

Hoʻokaʻawale

E hoʻohui i kahi mea hoʻokaʻawale e hoʻokaʻawale i nā pūʻulu o nā loulou i kahi papa kuhikuhi.

<ul class="dropdown-menu" aria-labelledby="dropdownMenuDivider">
  ...
  <li role="separator" class="divider"></li>
  ...
</ul>

Hoʻopaʻa ʻia nā mea papa kuhikuhi

E hoʻohui .disabledi kahi <li>ma ka hāʻule iho e hoʻopau i ka loulou.

<ul class="dropdown-menu" aria-labelledby="dropdownMenu4">
  <li><a href="#">Regular link</a></li>
  <li class="disabled"><a href="#">Disabled link</a></li>
  <li><a href="#">Another link</a></li>
</ul>

E hui pū i nā pihi ma kahi laina hoʻokahi me ka pūʻulu pihi. Hoʻohui i ka lekiō JavaScript koho a me ke ʻano kaila pahu pahu me kā mākou pihi pihi .

Pono nā mea hana a me nā popovers ma nā pūʻulu pihi i kahi hoʻonohonoho kūikawā

I ka hoʻohana ʻana i nā hāmeʻa a i ʻole nā popovers ma nā mea i loko o kahi .btn-group, pono ʻoe e kuhikuhi i ke koho container: 'body'e pale aku i nā hopena ʻaoʻao makemake ʻole (e like me ka mea e ulu ākea a/a i ʻole e nalowale ana kona mau kihi poʻe ke hoʻomaka ka tooltip a popover).

E hōʻoia pololei `role`a hāʻawi i kahi lepili

I mea e hiki ai i nā ʻenehana kōkua - e like me nā mea heluhelu pale - e hōʻike i ka hui pū ʻana o nā pihi, rolepono e hāʻawi ʻia kahi ʻano kūpono. No nā pūʻulu pihi, ʻo ia ka role="group", ʻoiai pono nā pahu hana i kahi role="toolbar".

Hoʻokahi ʻokoʻa nā pūʻulu i loaʻa i kahi mana hoʻokahi (no ka laʻana i nā pūʻulu pihi i hoʻāpono ʻia me <button>nā mea kumu) a i ʻole kahi hāʻule.

Eia kekahi, pono e hāʻawi ʻia nā pūʻulu a me nā mea hana i kahi lepili kikoʻī, no ka mea, ʻaʻole hoʻolaha ka hapa nui o nā ʻenehana kōkua iā lākou, ʻoiai ke ʻano o ka ʻano kūpono role. Ma nā hiʻohiʻona i hāʻawi ʻia ma aneʻi, hoʻohana mākou aria-label, akā aria-labelledbyhiki ke hoʻohana ʻia nā mea ʻē aʻe.

kumu hoʻohālike

E ʻōwili i nā pihi me .btnka in .btn-group.

<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">Left</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default">Right</button>
</div>

E hoʻohui i nā pūʻulu o <div class="btn-group">i a <div class="btn-toolbar">no nā ʻāpana paʻakikī.

<div class="btn-toolbar" role="toolbar" aria-label="...">
  <div class="btn-group" role="group" aria-label="...">...</div>
  <div class="btn-group" role="group" aria-label="...">...</div>
  <div class="btn-group" role="group" aria-label="...">...</div>
</div>

Ka nui ana

Ma kahi o ka hoʻohana ʻana i nā papa hoʻonui pihi i kēlā me kēia pihi i loko o kahi hui, e hoʻohui wale .btn-group-*i kēlā me kēia .btn-group, me ka hoʻopili ʻana i nā pūʻulu lehulehu.

<div class="btn-group btn-group-lg" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-sm" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-xs" role="group" aria-label="...">...</div>

Nesting

E kau i kahi i .btn-grouploko o kahi ʻē aʻe .btn-groupinā makemake ʻoe i nā menus dropdown i hui pū ʻia me nā ʻano pihi.

<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">1</button>
  <button type="button" class="btn btn-default">2</button>

  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropdown
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <li><a href="#">Dropdown link</a></li>
      <li><a href="#">Dropdown link</a></li>
    </ul>
  </div>
</div>

Hoʻololi kū pololei

E hōʻike i kahi pūʻulu o nā pihi i hoʻopaʻa pololei ʻia ma mua o ka pae ākea. ʻAʻole kākoʻo ʻia nā hāʻule iho o ka pihi Split ma aneʻi.

<div class="btn-group-vertical" role="group" aria-label="...">
  ...
</div>

Nā pūʻulu pihi kūpono

E hana i ka pūʻulu o nā pihi e kīkoʻo i nā nui like a hiki i ka laula holoʻokoʻa o kona makua. Hoʻohana pū me nā hāʻule iho pihi i loko o ka pūʻulu pihi.

Ka mālama ʻana i nā palena

Ma muli o ka HTML kūikawā a me CSS i hoʻohana ʻia e hōʻoia i nā pihi (ʻo ia hoʻi display: table-cell), ua pālua ʻia nā palena ma waena o lākou. Ma nā pūʻulu pihi maʻamau, margin-left: -1pxhoʻohana ʻia e hoʻopaʻa i nā palena ma mua o ka wehe ʻana iā lākou. Eia naʻe, marginʻaʻole hana me display: table-cell. ʻO ka hopena, ma muli o kāu hana maʻamau iā Bootstrap, makemake paha ʻoe e wehe a waihoʻoluʻu paha i nā palena.

IE8 a me nā palena

ʻAʻole hāʻawi ʻo Internet Explorer 8 i nā palena ma nā pihi i loko o kahi pūʻulu pihi i hoʻāpono ʻia, inā ma luna a i <a>ʻole <button>nā mea. No ka hoʻopuni ʻana i kēlā, e kāwili i kēlā me kēia pihi i kahi pihi ʻē aʻe .btn-group.

E ʻike i ka #12476 no ka ʻike hou aku.

Me `<a>`nā mea

Hoʻopili wale i kahi moʻo o .btns i .btn-group.btn-group-justified.

Hema Waena Akau

Hema Waena

<div class="btn-group btn-group-justified" role="group" aria-label="...">
  ...
</div>

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

Me `<button>`nā mea

No ka hoʻohana ʻana i nā pūʻulu pihi kūpono me <button>nā mea, pono ʻoe e kāʻei i kēlā me kēia pihi i kahi pūʻulu pihi . ʻAʻole hoʻohana pono ka hapa nui o nā mākaʻikaʻi i kā mākou CSS no ka hōʻoia ʻana i <button>nā mea, akā no ka mea ke kākoʻo nei mākou i ka hāʻule iho o nā pihi, hiki iā mākou ke hana a puni kēlā.

<div class="btn-group btn-group-justified" role="group" aria-label="...">
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Left</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Middle</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Right</button>
  </div>
</div>

E hoʻohana i kekahi pihi no ka hoʻomaka ʻana i kahi papa kuhikuhi ma ka waiho ʻana i loko o kahi .btn-groupa me ka hāʻawi ʻana i ka hōʻailona papa kuhikuhi kūpono.

Hoʻopili pili

Pono nā pihi hāʻule i ka plugin dropdown e hoʻokomo i kāu mana o Bootstrap.

Hoʻokuʻu iho nā pihi hoʻokahi

E hoʻololi i kahi pihi i kahi hoʻololi hoʻololi me kekahi mau hoʻololi markup maʻamau.

<!-- Single button -->
<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

E hoʻokaʻawale i nā pihi i lalo

Pēlā nō, e hana i nā hāʻule iho o ka pihi hoʻokaʻawale me nā hoʻololi like ʻana, me kahi pihi kaʻawale wale nō.

<!-- Split button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger">Action</button>
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

Ka nui ana

Hoʻohana nā pihi i lalo me nā pihi o nā nui āpau.

<!-- Large button group -->
<div class="btn-group">
  <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Large button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

<!-- Small button group -->
<div class="btn-group">
  <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Small button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

<!-- Extra small button group -->
<div class="btn-group">
  <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Extra small button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

Hoʻololi hāʻule

E hoʻoulu i nā menus hāʻule ma luna o nā mea ma ka hoʻohui .dropupʻana i ka makua.

<div class="btn-group dropup">
  <button type="button" class="btn btn-default">Dropup</button>
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

E hoʻolōʻihi i nā mana palapala ma ka hoʻohui ʻana i nā kikokikona a i ʻole nā pihi ma mua, ma hope a i ʻole ma nā ʻaoʻao ʻelua o nā kikokikona <input>. E hoʻohana .input-groupme kahi a i .input-group-addonʻole .input-group-btne hoʻomākaukau a hoʻohui i nā mea i hoʻokahi .form-control.

Nā kikokikona `<input>`wale nō

E hōʻalo i ka hoʻohana ʻana i <select>nā mea ma aneʻi no ka mea ʻaʻole hiki ke hoʻopaʻa ʻia i nā polokalamu kele pūnaewele WebKit.

Hōʻalo i ka hoʻohana ʻana i <textarea>nā mea ma aneʻi no ka rowsmea ʻaʻole e mahalo ʻia ko lākou ʻano i kekahi mau hihia.

Pono nā mea hana a me nā popovers i nā pūʻulu hoʻokomo i kahi hoʻonohonoho kūikawā

I ka hoʻohana ʻana i nā hāmeʻa a i ʻole nā popovers ma nā mea i loko o kahi .input-group, pono ʻoe e kuhikuhi i ke koho container: 'body'e pale aku i nā hopena ʻaoʻao makemake ʻole (e like me ka ulu ʻana o ka mea i ʻoi aʻe a/a i ʻole e nalowale ana kona mau kihi pōʻai i ka wā e hoʻomaka ai ka tooltip a popover).

Mai hui pū me nā mea ʻē aʻe

Mai hoʻohui pololei i nā hui pūʻulu a i ʻole nā papa kolamu me nā pūʻulu hoʻokomo. Akā, e hoʻomoe i ka pūʻulu hoʻokomo i loko o ka pūʻulu ʻano a i ʻole ka mea pili i ka grid.

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 pūʻulu hoʻokomo, e hōʻoia i ka lawe ʻia ʻana o kekahi lepili a i ʻole nā hana hou i nā ʻenehana kōkua.

ʻO ka ʻenehana pololei e hoʻohana ʻia (nā <label>mea ʻike ʻia, <label>nā mea huna i hūnā ʻia me ka .sr-onlypapa, a i ʻole ka hoʻohana ʻana i ka aria-label, aria-labelledby, aria-describedby, a i titleʻole placeholderka ʻano) a me nā ʻike hou e pono ai e lawe ʻia e ʻokoʻa ma muli o ke ʻano kikoʻī o ka widget interface āu e hoʻokō nei. Hāʻawi nā hiʻohiʻona i kēia ʻāpana i kekahi mau ʻano i manaʻo ʻia, nā hiʻohiʻona kikoʻī.

kumu hoʻohālike

E kau i hoʻokahi mea hoʻohui a i ʻole pihi ma kēlā ʻaoʻao kēia ʻaoʻao o kahi hoʻokomo. Hiki iā ʻoe ke kau i kekahi ma nā ʻaoʻao ʻelua o kahi hoʻokomo.

ʻAʻole mākou kākoʻo i nā mea hoʻohui he nui ( a i .input-group-addonʻole .input-group-btn) ma ka ʻaoʻao hoʻokahi.

ʻAʻole mākou kākoʻo i nā ʻano mana he nui i hoʻokahi hui hoʻokomo.

<div class="input-group">
  <span class="input-group-addon" id="basic-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>

<div class="input-group">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
  <span class="input-group-addon" id="basic-addon2">@example.com</span>
</div>

<div class="input-group">
  <span class="input-group-addon">$</span>
  <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
  <span class="input-group-addon">.00</span>
</div>

<label for="basic-url">Your vanity URL</label>
<div class="input-group">
  <span class="input-group-addon" id="basic-addon3">https://example.com/users/</span>
  <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>

Ka nui ana

E hoʻohui i nā papa hoʻohālikelike ʻano pili iā .input-groupia iho a e hoʻololi ʻokoʻa nā mea i loko - ʻaʻole pono e hana hou i nā papa mana o ke ʻano ma kēlā me kēia mea.

<div class="input-group input-group-lg">
  <span class="input-group-addon" id="sizing-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon1">
</div>

<div class="input-group">
  <span class="input-group-addon" id="sizing-addon2">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon2">
</div>

<div class="input-group input-group-sm">
  <span class="input-group-addon" id="sizing-addon3">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon3">
</div>

Nā pahu koho a me nā mea hoʻohui lekiō

E kau i ka pahu pahu a i ʻole ke koho lekiō i loko o ka addon o kahi hui hoʻokomo ma kahi o ka kikokikona.

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-addon">
        <input type="checkbox" aria-label="...">
      </span>
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-addon">
        <input type="radio" aria-label="...">
      </span>
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

Pākuʻi pākuʻi

He ʻokoʻa iki nā pihi ma nā pūʻulu hoʻokomo a koi i hoʻokahi pae o ka pūnana. Ma kahi o .input-group-addon, pono ʻoe e hoʻohana .input-group-btne ʻōwili i nā pihi. Pono kēia ma muli o nā ʻano polokalamu kele pūnaewele ʻaʻole hiki ke hoʻopau ʻia.

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
      <input type="text" class="form-control" placeholder="Search for...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control" placeholder="Search for...">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

Nā pihi me nā hāʻule iho

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
        <ul class="dropdown-menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div><!-- /btn-group -->
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control" aria-label="...">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
        <ul class="dropdown-menu dropdown-menu-right">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div><!-- /btn-group -->
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

Nā pihi ʻāpana

<div class="input-group">
  <div class="input-group-btn">
    <!-- Button and dropdown menu -->
  </div>
  <input type="text" class="form-control" aria-label="...">
</div>

<div class="input-group">
  <input type="text" class="form-control" aria-label="...">
  <div class="input-group-btn">
    <!-- Button and dropdown menu -->
  </div>
</div>

Nā pihi lehulehu

ʻOiai hiki iā ʻoe ke loaʻa hoʻokahi mea hoʻohui i kēlā me kēia ʻaoʻao, hiki iā ʻoe ke loaʻa i nā pihi he nui i loko o hoʻokahi .input-group-btn.

<div class="input-group">
  <div class="input-group-btn">
    <!-- Buttons -->
  </div>
  <input type="text" class="form-control" aria-label="...">
</div>

<div class="input-group">
  <input type="text" class="form-control" aria-label="...">
  <div class="input-group-btn">
    <!-- Buttons -->
  </div>
</div>

ʻO nā Navs i loaʻa ma Bootstrap ua kaʻana like i ka markup, e hoʻomaka me ka papa kumu .nav, a me nā mokuʻāina like. E hoʻololi i nā papa hoʻololi e hoʻololi i waena o kēlā me kēia ʻano.

ʻO ka hoʻohana ʻana i nā navs no nā panel tab e pono ai i ka plugin tabs JavaScript

No nā ʻaoʻao me nā wahi paʻi, pono ʻoe e hoʻohana i ka plugin JavaScript tabs . Pono ka markup i nā mea hou rolea me ARIA - e ʻike i ke kumu hoʻohālike o ka plugin no nā kikoʻī hou aku.

E hoʻohana i nā hoʻokele i hiki ke loaʻa

Inā ʻoe e hoʻohana nei i nā navs no ka hoʻolako ʻana i kahi pae hoʻokele, e hōʻoia e hoʻohui i kahi role="navigation"i ka pahu makua kūpono loa o ka <ul>, a i ʻole e hoʻopili i kahi <nav>mea a puni ka hoʻokele holoʻokoʻa. Mai hoʻohui i ke kuleana iā <ul>ia iho, no ka mea e pale ʻia ia mai ka hoʻolaha ʻia ʻana he papa inoa maoli e nā ʻenehana kōkua.

Nā papa

E hoʻomaopopo i ka .nav-tabspapa e pono ai ka .navpapa kumu.

<ul class="nav nav-tabs">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

Pills

E lawe i kēlā HTML like, akā e hoʻohana .nav-pillsma kahi:

<ul class="nav nav-pills">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

Hiki ke hoʻopaʻa ʻia nā pila. Hoʻohui wale .nav-stacked.

<ul class="nav nav-pills nav-stacked">
  ...
</ul>

Aponoia

E hana maʻalahi i nā ʻaoʻao a i ʻole nā palapala i like ka laulā o ko lākou makua ma nā pale ma mua o 768px me .nav-justified. Ma nā pale liʻiliʻi, hoʻopaʻa ʻia nā loulou nav.

ʻAʻole kākoʻo ʻia nā loulou navbar nav i kēia manawa.

Safari a me nā navs kūpono

E like me v9.1.2, hōʻike ʻo Safari i kahi kīpē kahi e hoʻololi ai i kāu polokalamu kele pūnaewele i nā hewa i loko o ka nav i hoʻopaʻa ʻia i hoʻomaʻemaʻe ʻia ma ka hōʻoluʻolu. Hōʻike ʻia kēia bug i ka laʻana nav pono .

<ul class="nav nav-tabs nav-justified">
  ...
</ul>
<ul class="nav nav-pills nav-justified">
  ...
</ul>

Nā loulou pio

No kēlā me kēia ʻāpana nav (nā papa a i ʻole nā palapala), hoʻohui .disabledno nā loulou hina a ʻaʻohe hopena hover .

ʻAʻole pili ka hana loulou

E hoʻololi wale kēia papa i ke <a>ʻano, ʻaʻole kāna hana. E hoʻohana i ka JavaScript maʻamau e hoʻopau i nā loulou ma aneʻi.

<ul class="nav nav-pills">
  ...
  <li role="presentation" class="disabled"><a href="#">Disabled link</a></li>
  ...
</ul>

Ke hoʻohana nei i nā hāʻule iho

Hoʻohui i nā menus dropdown me kahi HTML hou aʻe a me ka plugin JavaScript dropdowns .

Nā papa me nā hāʻule iho

<ul class="nav nav-tabs">
  ...
  <li role="presentation" class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
      Dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
  ...
</ul>

ʻO nā pila me nā hāʻule iho

<ul class="nav nav-pills">
  ...
  <li role="presentation" class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
      Dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
  ...
</ul>

ʻO nā Navbars he mea pane meta e lilo i poʻomanaʻo hoʻokele no kāu noi a i ʻole pūnaewele. Hoʻomaka lākou e hāʻule (a hiki ke hoʻololi ʻia) i nā hiʻohiʻona paʻa lima a lilo i ākea i ka piʻi ʻana o ka laulā viewport i loaʻa.

ʻAʻole kākoʻo ʻia nā loulou navbar nav i kēia manawa.

ʻoluʻolu piha

No ka mea ʻaʻole ʻike ʻo Bootstrap i ka nui o ka nui o ka maʻiʻo o kāu navbar e pono ai, hiki iā ʻoe ke loaʻa i nā pilikia me ka hoʻopili ʻana i ka ʻike i ka lālani lua. No ka hoʻoholo i kēia, hiki iā ʻoe ke:

E ho'ēmi i ka nui a i ʻole ka laula o nā mea navbar.
Hūnā i kekahi mau mea navbar ma kekahi ʻano nui o ka pale me ka hoʻohana ʻana i nā papa hana pane .
E hoʻololi i ke kiko kahi e hoʻololi ai kāu navbar ma waena o ke ʻano hiʻohiʻona a me ke ʻano ākea. Hoʻopilikino i ka @grid-float-breakpointhoʻololi a hoʻohui i kāu hulina media ponoʻī.

Ke hoʻololi nei i ka wahi hoʻomaha navbar paʻalima i hāʻule

E hāʻule ka navbar i kona ʻike paʻa paʻa paʻa i ka wā ʻoi aku ka liʻiliʻi o ke awa ʻike ma mua o @grid-float-breakpoint, a hoʻonui ʻia i loko o kāna ʻike paʻa ʻole i ka wā e liʻiliʻi @grid-float-breakpointai ka laula. Hoʻoponopono i kēia ʻano hoʻololi i ke kumu liʻiliʻi e hoʻomalu i ka wā e hāʻule ai/e hoʻonui ai ka navbar. ʻO ka waiwai paʻamau 768px(ka maka liʻiliʻi "liʻiliʻi" a i ʻole "papa").

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

E hoʻololi i ka brand navbar me kāu kiʻi ponoʻī ma ka hoʻololi ʻana i ke kikokikona no kahi <img>. No ka .navbar-brandloaʻa ʻana o kāna padding a me kona kiʻekiʻe, pono paha ʻoe e hoʻopau i kekahi CSS ma muli o kāu kiʻi.

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">
        <img alt="Brand" src="...">
      </a>
    </div>
  </div>
</nav>

E kau i ka maʻiʻo puka i loko .navbar-formno ka hoʻopololei kū pololei a me ka hana hāʻule ʻana ma nā puka ʻike haiki. E hoʻohana i nā koho alignment e hoʻoholo i kahi e noho ai i loko o ka ʻike navbar.

Ma ke ʻano he poʻo, .navbar-formkaʻana like i kāna code me .form-inlinema o mixin. Pono paha kekahi mau mana, e like me nā pūʻulu hoʻokomo, e hōʻike pono ʻia nā laula paʻa i loko o kahi navbar.

<form class="navbar-form navbar-left" role="search">
  <div class="form-group">
    <input type="text" class="form-control" placeholder="Search">
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

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.

E hoʻohui i ka .navbar-btnpapa i <button>nā mea ʻaʻole e noho ana i kahi <form>e hoʻokomo pono iā lākou i ka navbar.

<button type="button" class="btn btn-default navbar-btn">Sign in</button>

E kāʻei i nā kaula kikokikona i loko o kahi mea me .navbar-text, maʻamau ma kahi <p>hōʻailona no ke alakaʻi kūpono a me ke kala.

<p class="navbar-text">Signed in as Mark Otto</p>

No ka poʻe e hoʻohana ana i nā loulou maʻamau ʻaʻole i loko o ka ʻāpana hoʻokele navbar maʻamau, e hoʻohana i ka .navbar-linkpapa e hoʻohui i nā kala kūpono no nā koho navbar paʻamau a inverse.

<p class="navbar-text navbar-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>

E hoʻopololei i nā loulou nav, nā ʻano, nā pihi, a i ʻole nā kikokikona, me ka hoʻohana .navbar-leftʻana i .navbar-rightnā papa hana. E hoʻohui nā papa ʻelua i kahi lana CSS ma ke kuhikuhi i kuhikuhi ʻia. No ka laʻana, no ka hoʻolikelike ʻana i nā loulou nav, e hoʻokaʻawale iā lākou <ul>me ka papa hana pono i hoʻopili ʻia.

ʻO kēia mau papa he ʻano hui pū ʻia o .pull-lefta me .pull-right, akā ua hoʻopili ʻia lākou i nā nīnau media no ka maʻalahi o ka lawelawe ʻana i nā ʻāpana navbar ma waena o ka nui o nā hāmeʻa.

Hoʻohui .navbar-fixed-topa hoʻokomo i kahi maʻiʻo .containera .container-fluidi ʻole ma waena a me ka papa navbar maʻiʻo.

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    ...
  </div>
</nav>

Pono ka pale kino

E uhi ka navbar paʻa i kāu ʻike ʻē aʻe, ke ʻole ʻoe e hoʻohui paddingi luna o ka <body>. E hoʻāʻo i kāu mau waiwai ponoʻī a hoʻohana i kā mākou snippet ma lalo. Manaʻo kōkua: Ma ka paʻamau, he 50px kiʻekiʻe ka navbar.

body { padding-top: 70px; }

E hōʻoia e hoʻokomo i kēia ma hope o ke kumu Bootstrap CSS.

Hoʻohui .navbar-fixed-bottoma hoʻokomo i kahi maʻiʻo .containera .container-fluidi ʻole ma waena a me ka papa navbar maʻiʻo.

<nav class="navbar navbar-default navbar-fixed-bottom">
  <div class="container">
    ...
  </div>
</nav>

Pono ka pale kino

E uhi ka navbar paʻa i kāu ʻike ʻē aʻe, ke ʻole ʻoe e hoʻohui paddingi lalo o ka <body>. E hoʻāʻo i kāu mau waiwai ponoʻī a hoʻohana i kā mākou snippet ma lalo. Manaʻo kōkua: Ma ka paʻamau, he 50px kiʻekiʻe ka navbar.

body { padding-bottom: 70px; }

E hōʻoia e hoʻokomo i kēia ma hope o ke kumu Bootstrap CSS.

E hana i kahi navbar holoʻokoʻa holoʻokoʻa me ka ʻaoʻao ma o ka hoʻohui ʻana .navbar-static-topa hoʻokomo i kahi a i .containerʻole .container-fluidi ke kikowaena a me ka papa navbar maʻiʻo.

ʻAʻole e like me nā .navbar-fixed-*papa, ʻaʻole pono ʻoe e hoʻololi i kekahi padding ma ka body.

<nav class="navbar navbar-default navbar-static-top">
  <div class="container">
    ...
  </div>
</nav>

E hoʻololi i ke ʻano o ka navbar ma ka hoʻohui ʻana .navbar-inverse.

<nav class="navbar navbar-inverse">
  ...
</nav>

Lai palaoa

Hōʻike i kahi o ka ʻaoʻao o kēia manawa i loko o kahi hierarchy hoʻokele.

Hoʻohui ʻia nā mea hoʻokaʻawale i CSS ma o :beforea content.

<ol class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Library</a></li>
  <li class="active">Data</li>
</ol>

Ka helu helu

Hāʻawi i nā loulou pagination no kāu pūnaewele a i ʻole app me ka ʻaoʻao helu helu helu helu, a i ʻole ka ʻaoʻao ʻaoʻao maʻalahi .

Paʻamau helu helu

ʻO ka pagination maʻalahi i hoʻoulu ʻia e Rdio, maikaʻi no nā noi a me nā hopena ʻimi. ʻO ka poloka nui he paʻakikī ke hala, hiki ke hoʻonui ʻia, a hāʻawi i nā wahi kaomi nui.

<nav aria-label="Page navigation">
  <ul class="pagination">
    <li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li>
      <a href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

Lepili i ka ʻāpana pagination

Pono e hoʻopili ʻia ka ʻāpana pagination i kahi <nav>mea e ʻike ai he ʻāpana hoʻokele e nānā i nā mea heluhelu a me nā ʻenehana kōkua ʻē aʻe. Eia hou, no ka loaʻa ʻana o kahi ʻaoʻao i ʻoi aku ma mua o hoʻokahi ʻāpana hoʻokele (e like me ka hoʻokele mua ma ke poʻo, a i ʻole ka hoʻokele ʻaoʻao), pono e hāʻawi i kahi wehewehe aria-labelno ka <nav>mea e hōʻike ana i kona kumu. No ka laʻana, inā hoʻohana ʻia ka ʻāpana pagination no ka hoʻokele ʻana ma waena o kahi pūʻulu o nā hopena hulina, hiki i kahi lepili kūpono ke aria-label="Search results pages".

Nā mokuʻāina kīnā ʻole a ʻeleu

Hoʻopilikino ʻia nā loulou no nā kūlana like ʻole. E hoʻohana .disabledno nā loulou unclickable a .activee kuhikuhi i ka ʻaoʻao o kēia manawa.

<nav aria-label="...">
  <ul class="pagination">
    <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
    <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
    ...
  </ul>
</nav>

Manaʻo mākou e hoʻololi ʻoe i nā heleuma ikaika a i ʻole nā heleuma no <span>, a i ʻole e haʻalele i ka heleuma ma ke ʻano o nā pua mua/aʻe, e wehe i ka hana kaomi ʻoiai e mālama ana i nā ʻano i manaʻo ʻia.

<nav aria-label="...">
  <ul class="pagination">
    <li class="disabled">
      <span>
        <span aria-hidden="true">&laquo;</span>
      </span>
    </li>
    <li class="active">
      <span>1 <span class="sr-only">(current)</span></span>
    </li>
    ...
  </ul>
</nav>

Ka nui ana

Makemake ʻoe i ka pagination nui a liʻiliʻi paha? Hoʻohui a i .pagination-lgʻole .pagination-smno nā nui ʻē aʻe.

<nav aria-label="..."><ul class="pagination pagination-lg">...</ul></nav>
<nav aria-label="..."><ul class="pagination">...</ul></nav>
<nav aria-label="..."><ul class="pagination pagination-sm">...</ul></nav>

Pager

Nā loulou wikiwiki mua a me hope no ka hoʻokō ʻana i ka pagination maʻalahi me ka māka māmā a me nā ʻano. He mea maikaʻi ia no nā pūnaewele maʻalahi e like me nā blog a i ʻole nā makasina.

Laʻana paʻamau

Ma ka maʻamau, hoʻonohonoho ka pager i nā loulou.

<nav aria-label="...">
  <ul class="pager">
    <li><a href="#">Previous</a></li>
    <li><a href="#">Next</a></li>
  </ul>
</nav>

Nā loulou aligned

ʻO kahi ʻē aʻe, hiki iā ʻoe ke hoʻohālikelike i kēlā me kēia loulou i nā ʻaoʻao:

<nav aria-label="...">
  <ul class="pager">
    <li class="previous"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
  </ul>
</nav>

Mokuʻāina kīnā ʻole koho

Hoʻohana pū nā loulou Pager i ka .disabledpapa hana maʻamau mai ka pagination.

<nav aria-label="...">
  <ul class="pager">
    <li class="previous disabled"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
  </ul>
</nav>

Laʻana

Poʻomanaʻo laʻana Hou

<h3>Example heading <span class="label label-default">New</span></h3>

Loaʻa nā ʻano like ʻole

Hoʻohui i kekahi o nā papa hoʻololi i ʻōlelo ʻia ma lalo nei e hoʻololi i ke ʻano o kahi lepili.

ʻO ka ʻike paʻamau i ka pōmaikaʻi mua ka ʻōlelo aʻo pilikia

<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>

Loaʻa i nā tona o nā lepili?

Hiki ke ala mai nā pilikia hoʻihoʻi ʻana inā loaʻa iā ʻoe ka nui o nā lepili inline i loko o kahi pahu haiki, aia kēlā me kēia me kāna mea ponoʻī inline-block(e like me kahi ikona). ʻO ke ala a puni kēia ke hoʻonohonoho display: inline-block;. No ka pōʻaiapili a me kahi laʻana, e ʻike i ka #13219 .

E hōʻike maʻalahi i nā mea hou a heluhelu ʻole ʻia paha ma ka hoʻohui <span class="badge">ʻana i nā loulou, Bootstrap navs, a me nā mea hou aku.

pahu komo42

<a href="#">Inbox <span class="badge">42</span></a>

<button class="btn btn-primary" type="button">
  Messages <span class="badge">4</span>
</button>

Ke hāʻule iho nei

Inā ʻaʻohe mea hou a heluhelu ʻole ʻia paha, e hāʻule wale nā pahu (ma o ka :emptymea koho CSS) inā ʻaʻohe ʻike i loko.

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

ʻAʻole e hāʻule iho nā pahu i ka Internet Explorer 8 no ka mea ʻaʻohe kākoʻo no ka :emptymea koho.

Hoʻololi i nā mokuʻāina nav hana

Hoʻokomo ʻia nā ʻano i kūkulu ʻia no ka waiho ʻana i nā hōʻailona ma nā mokuʻāina ikaika i nā hoʻokele pila.

<ul class="nav nav-pills" role="tablist">
  <li role="presentation" class="active"><a href="#">Home <span class="badge">42</span></a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages <span class="badge">3</span></a></li>
</ul>

ʻO kahi ʻāpana māmā a maʻalahi hiki ke hoʻonui i ka viewport holoʻokoʻa e hōʻike i nā ʻike koʻikoʻi ma kāu pūnaewele.

Aloha, honua!

He pūʻali koa maʻalahi kēia, he ʻano ʻano jumbotron maʻalahi no ke kāhea ʻana i ka nānā hou aku i nā ʻike i hōʻike ʻia.

Aʻo hou mai

<div class="jumbotron">
  <h1>Hello, world!</h1>
  <p>...</p>
  <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>

I mea e piha ai ka laula o ka jumbotron, a me na kihi poepoe ole, e waiho ma waho o na .containers a pau, a e hookomo i kahi .containero loko.

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

He pūpū maʻalahi no ka h1hoʻokaʻawale ʻana i nā ʻāpana o ka ʻikepili ma kahi ʻaoʻao. Hiki iā ia ke hoʻohana i ka h1'elemen paʻamau small, a me ka hapa nui o nā mea ʻē aʻe (me nā ʻano ʻē aʻe).

<div class="page-header">
  <h1>Example page header <small>Subtext for header</small></h1>
</div>

E hoʻonui i ka ʻōnaehana mākia o Bootstrap me ka ʻāpana liʻiliʻi e hōʻike maʻalahi i nā kiʻi, wikiō, kikokikona, a me nā mea hou aku.

Inā ʻoe e ʻimi nei i ka hōʻike ʻana o Pinterest e like me nā kiʻi liʻiliʻi o nā kiʻekiʻe a me / a i ʻole ākea, pono ʻoe e hoʻohana i kahi plugin ʻaoʻao ʻekolu e like me Masonry , Isotope , a i ʻole Salvattore .

Laʻana paʻamau

Ma ka paʻamau, ua hoʻolālā ʻia nā kiʻi liʻiliʻi o Bootstrap e hōʻike i nā kiʻi i hoʻopili ʻia me ka hōʻailona liʻiliʻi.

<div class="row">
  <div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
      <img src="..." alt="...">
    </a>
  </div>
  ...
</div>

Maʻiʻo maʻamau

Me kahi hōʻailona ʻokoʻa, hiki ke hoʻohui i nā ʻano HTML like ʻole e like me nā poʻo, nā paukū, a i ʻole nā pihi i loko o nā kiʻi liʻiliʻi.

Lepili liʻiliʻi liʻiliʻi

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida and eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

pihi pihi

Lepili liʻiliʻi liʻiliʻi

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida and eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

pihi pihi

Lepili liʻiliʻi liʻiliʻi

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida and eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

pihi pihi

<div class="row">
  <div class="col-sm-6 col-md-4">
    <div class="thumbnail">
      <img src="..." alt="...">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>...</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
      </div>
    </div>
  </div>
</div>

Hāʻawi i nā memo manaʻo hoʻopuka no nā hana maʻamau o ka mea hoʻohana me ka liʻiliʻi o nā memo makaʻala i loaʻa a maʻalahi.

Nā laʻana

E kāʻei i kekahi kikokikona a me kahi pihi hoʻokuʻu koho i loko .alerta me kekahi o nā papa ʻehā (e laʻa, .alert-success) no nā memo makaʻala.

ʻAʻohe papa paʻamau

ʻAʻohe papa maʻamau i nā māka, nā papa kumu a me nā papa hoʻololi wale nō. ʻAʻole ʻike nui ka mākaʻikaʻi hina hina, no laila pono ʻoe e kuhikuhi i kahi ʻano ma o ka papa contextual. E koho mai ka holomua, ka ʻike, ka ʻōlelo aʻo, a i ʻole ka pilikia.

Hana maikaʻi! Ua heluhelu pono ʻoe i kēia memo makaʻala nui.

Nā poʻo i luna! Pono kēia makaʻala i kou nānā ʻana, akā ʻaʻole ia he mea nui.

'Ōlelo Aʻo! E nānā pono iā ʻoe iho, ʻaʻole maikaʻi ʻoe.

ʻŌ! E hoʻololi i kekahi mau mea a hoʻouna hou.

<div class="alert alert-success" role="alert">...</div>
<div class="alert alert-info" role="alert">...</div>
<div class="alert alert-warning" role="alert">...</div>
<div class="alert alert-danger" role="alert">...</div>

Hoʻokuʻu ʻia nā makaʻala

E kūkulu ma luna o kekahi makaʻala ma ka hoʻohui ʻana i kahi .alert-dismissiblepihi koho a pani.

Pono i ka plugin makaʻala JavaScript

No ka hana piha, hoʻokuʻu ʻia nā mākaʻikaʻi, pono ʻoe e hoʻohana i ka plugin JavaScript alerts .

'Ōlelo Aʻo! E nānā pono iā ʻoe iho, ʻaʻole maikaʻi ʻoe.

<div class="alert alert-warning alert-dismissible" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  <strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>

E hōʻoia i ka hana kūpono ma nā mea hana a pau

E hōʻoia e hoʻohana i ka <button>mea me ka data-dismiss="alert"ʻikepili ʻikepili.

Nā loulou i nā makaʻala

E hoʻohana i ka .alert-linkpapa hana pono e hāʻawi koke i nā loulou kala like ʻole i loko o kekahi makaʻala.

Hana maikaʻi! Ua heluhelu pono ʻoe i kēia memo makaʻala nui .

Nā poʻo i luna! Pono kēia makaʻala i kou nānā ʻana , akā ʻaʻole ia he mea nui.

'Ōlelo Aʻo! E nānā pono iā ʻoe iho, ʻaʻole maikaʻi ʻoe .

ʻŌ! E hoʻololi i kekahi mau mea a hoʻouna hou.

<div class="alert alert-success" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-info" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-warning" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-danger" role="alert">
  <a href="#" class="alert-link">...</a>
</div>

Hāʻawi i nā manaʻo manaʻo hou e pili ana i ka holomua o kahi kaʻina hana a i ʻole hana me nā pae holomua maʻalahi akā maʻalahi.

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

Hoʻohana nā pā holomua i nā hoʻololi CSS3 a me nā animation e hoʻokō i kekahi o kā lākou hopena. ʻAʻole kākoʻo ʻia kēia mau hiʻohiʻona ma Internet Explorer 9 a ma lalo a i ʻole nā mana kahiko o Firefox. ʻAʻole kākoʻo ʻo Opera 12 i nā animation.

ʻO ke kulekele palekana maʻiʻo (CSP).

Inā loaʻa i kāu pūnaewele kahi Kumukānāwai Palekana Maʻiʻo (CSP) ʻaʻole ʻae ʻia style-src 'unsafe-inline', a laila ʻaʻole hiki iā ʻoe ke hoʻohana i nā ʻano inline stylee hoʻonohonoho i nā laula pae holomua e like me ka hōʻike ʻana i kā mākou mau hiʻohiʻona ma lalo nei. ʻO nā ala ʻē aʻe no ka hoʻonohonoho ʻana i nā laula i kūpono me nā CSP koʻikoʻi e pili ana i ka hoʻohana ʻana i kahi JavaScript maʻamau (e hoʻonohonoho element.style.width) a i ʻole ka hoʻohana ʻana i nā papa CSS maʻamau.

kumu hoʻohālike

Paʻamau pae holomua.

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    <span class="sr-only">60% Complete</span>
  </div>
</div>

Me ka lepili

Wehe i ka <span>me .sr-onlyka papa mai loko mai o ka pae holomua e hōʻike i ka pākēneka ʻike ʻia.

60%

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    60%
  </div>
</div>

No ka hoʻopaʻa ʻana i ka legible o ka lepili kikokikona no nā pākēneka haʻahaʻa, e noʻonoʻo e hoʻohui i ka min-widtha i ka pae holomua.

0%

2%

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;">
    0%
  </div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 2%;">
    2%
  </div>
</div>

Nā mea ʻokoʻa ʻokoʻa

Hoʻohana nā pahu holomua i kekahi o nā pihi like a me nā papa makaʻala no nā ʻano like.

<div class="progress">
  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
    <span class="sr-only">40% Complete (success)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <span class="sr-only">20% Complete</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
    <span class="sr-only">60% Complete (warning)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
    <span class="sr-only">80% Complete (danger)</span>
  </div>
</div>

ʻōniʻoniʻo

Hoʻohana i ka gradient e hana i kahi hopena kaha. ʻAʻole i loaʻa ma IE9 a ma lalo.

<div class="progress">
  <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
    <span class="sr-only">40% Complete (success)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <span class="sr-only">20% Complete</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
    <span class="sr-only">60% Complete (warning)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
    <span class="sr-only">80% Complete (danger)</span>
  </div>
</div>

Animated

Hoʻohui .activei .progress-bar-stripede hoʻolalelale i nā kaha ʻākau a hema. ʻAʻole i loaʻa ma IE9 a ma lalo.

<div class="progress">
  <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
    <span class="sr-only">45% Complete</span>
  </div>
</div>

Hoʻopaʻa ʻia

E kau i nā pahu he nui i loko o ka mea like .progresse hoʻopaʻa iā lākou.

<div class="progress">
  <div class="progress-bar progress-bar-success" style="width: 35%">
    <span class="sr-only">35% Complete (success)</span>
  </div>
  <div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
    <span class="sr-only">20% Complete (warning)</span>
  </div>
  <div class="progress-bar progress-bar-danger" style="width: 10%">
    <span class="sr-only">10% Complete (danger)</span>
  </div>
</div>

Nā ʻano mea ʻokoʻa no ke kūkulu ʻana i nā ʻano ʻāpana like ʻole (e like me nā manaʻo blog, Tweets, etc.) e hōʻike ana i kahi kiʻi hema a i ʻole ʻākau paha me ka ʻike kikokikona.

Media paʻamau

Hōʻike ka media paʻamau i kahi mea media (kiʻi, wikiō, leo) ma ka hema a ʻākau paha o kahi poloka maʻiʻo.

Poʻomanaʻo Media

Cras noho amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Poʻomanaʻo Media

Cras noho amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Poʻomanaʻo hoʻopaʻa ʻia

Cras noho amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Poʻomanaʻo Media

Cras noho amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Poʻomanaʻo Media

Cras noho amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

<div class="media">
  <div class="media-left">
    <a href="#">
      <img class="media-object" src="..." alt="...">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
    ...
  </div>
</div>

Loaʻa nā papa .pull-lefta .pull-rightua hoʻohana mua ʻia ma ke ʻano he ʻāpana o ka ʻāpana media, akā ua hoʻopau ʻia no kēlā hoʻohana ʻana e like me v3.3.0. Ua like lākou me ka .media-lefta me .media-right, koe wale nō .media-righte kau ʻia ma hope o ka .media-bodyin the html.

Hoʻopololei Media

Hiki ke hoʻolikelike ʻia nā kiʻi a i ʻole nā media ʻē aʻe ma luna, waena, a lalo paha. ʻO ka mea paʻamau, ua hoʻonohonoho ʻia ma luna.

Media hoʻopololei kiʻekiʻe

Cras noho amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Media kaulike waena

Cras noho amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Media laina lalo

Cras noho amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

<div class="media">
  <div class="media-left media-middle">
    <a href="#">
      <img class="media-object" src="..." alt="...">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Middle aligned media</h4>
    ...
  </div>
</div>

Papa inoa Media

Me kahi hōʻailona ʻokoʻa, hiki iā ʻoe ke hoʻohana i ka media i loko o ka papa inoa (pono no nā pae manaʻo a i ʻole nā papa inoa ʻatikala).

Poʻomanaʻo Media

Cras noho amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Poʻomanaʻo hoʻopaʻa ʻia
Cras noho amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Poʻomanaʻo hoʻopaʻa ʻia
Cras noho amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Poʻomanaʻo hoʻopaʻa ʻia
Cras noho amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

<ul class="media-list">
  <li class="media">
    <div class="media-left">
      <a href="#">
        <img class="media-object" src="..." alt="...">
      </a>
    </div>
    <div class="media-body">
      <h4 class="media-heading">Media heading</h4>
      ...
    </div>
  </li>
</ul>

ʻO nā pūʻulu papa inoa he mea maʻalahi a ikaika no ka hōʻike ʻana ʻaʻole wale i nā papa inoa maʻalahi o nā mea, akā nā mea paʻakikī me nā mea maʻamau.

kumu hoʻohālike

ʻO ka pūʻulu papa inoa maʻamau he papa inoa ʻole me nā mea papa inoa, a me nā papa kūpono. E kūkulu i luna me nā koho e pili ana, a i ʻole kāu CSS ponoʻī e like me ka mea e pono ai.

Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum a me ka eros

<ul class="list-group">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

Nā hōʻailona

Hoʻohui i nā ʻāpana badges i kēlā me kēia mea pūʻulu papa inoa a e hoʻonoho ʻia ma ka ʻākau.

14Cras justo odio
2Dapibus ac facilisis in
1Morbi leo risus

<ul class="list-group">
  <li class="list-group-item">
    <span class="badge">14</span>
    Cras justo odio
  </li>
</ul>

Nā mea pili

Hoʻohui i nā mea pūʻulu papa inoa ma ka hoʻohana ʻana i nā hōʻailona heleuma ma kahi o nā mea papa inoa (ʻo ia hoʻi he makua <div>ma mua o kahi <ul>). ʻAʻole pono nā mākua pākahi a puni kēlā me kēia mea.

Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Vestibulum a me ka eros

<div class="list-group">
  <a href="#" class="list-group-item active">
    Cras justo odio
  </a>
  <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item">Morbi leo risus</a>
  <a href="#" class="list-group-item">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item">Vestibulum at eros</a>
</div>

Nā mea pihi

He pihi paha nā mea pūʻulu papa ma kahi o nā mea papa inoa (ʻo ia hoʻi he makua <div>ma mua o kahi <ul>). ʻAʻole pono nā mākua pākahi a puni kēlā me kēia mea. Mai hoʻohana i nā .btnpapa maʻamau ma aneʻi.

<div class="list-group">
  <button type="button" class="list-group-item">Cras justo odio</button>
  <button type="button" class="list-group-item">Dapibus ac facilisis in</button>
  <button type="button" class="list-group-item">Morbi leo risus</button>
  <button type="button" class="list-group-item">Porta ac consectetur ac</button>
  <button type="button" class="list-group-item">Vestibulum at eros</button>
</div>

Nā mea hoʻopale

E hoʻohui .disabledi ka .list-group-itema i ka hina e ʻike ʻia he pio.

Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Vestibulum a me ka eros

<div class="list-group">
  <a href="#" class="list-group-item disabled">
    Cras justo odio
  </a>
  <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item">Morbi leo risus</a>
  <a href="#" class="list-group-item">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item">Vestibulum at eros</a>
</div>

Nā papa kuʻuna

E hoʻohana i nā papa ʻokoʻa e kāhiko i nā mea papa inoa, paʻamau a i hoʻopili ʻia. Aia pū kekahi .activemoku'āina.

Dapibus ac facilisis in
Cras noho amet nibh libero
Porta ac consectetur ac
Vestibulum a me ka eros

Dapibus ac facilisis in Cras noho amet nibh libero Porta ac consectetur ac Vestibulum a me ka eros

<ul class="list-group">
  <li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
  <li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
  <li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>
  <li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
</ul>
<div class="list-group">
  <a href="#" class="list-group-item list-group-item-success">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item list-group-item-info">Cras sit amet nibh libero</a>
  <a href="#" class="list-group-item list-group-item-warning">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item list-group-item-danger">Vestibulum at eros</a>
</div>

Maʻiʻo maʻamau

E hoʻohui kokoke i nā HTML i loko, ʻoiai no nā hui papa inoa i hoʻopili ʻia e like me ka mea ma lalo nei.

E papa inoa i ke poʻomanaʻo o ka hui

Donec id elit non mi porta gravida and eget metus. Maecenas sed diam eget risus varius blandit.

E papa inoa i ke poʻomanaʻo o ka hui

Donec id elit non mi porta gravida and eget metus. Maecenas sed diam eget risus varius blandit.

E papa inoa i ke poʻomanaʻo o ka hui

Donec id elit non mi porta gravida and eget metus. Maecenas sed diam eget risus varius blandit.

<div class="list-group">
  <a href="#" class="list-group-item active">
    <h4 class="list-group-item-heading">List group item heading</h4>
    <p class="list-group-item-text">...</p>
  </a>
</div>

ʻOiai ʻaʻole pono mau, i kekahi manawa pono ʻoe e kau i kāu DOM i loko o kahi pahu. No kēlā mau kūlana, e hoʻāʻo i ka ʻāpana panel.

kumu hoʻohālike

Ma ka maʻamau, hoʻopili nā .panelmea āpau i kekahi palena kumu a me ka padding e loaʻa ai kekahi ʻike.

Laʻana panel kumu

<div class="panel panel-default">
  <div class="panel-body">
    Basic panel example
  </div>
</div>

Panel me ke poʻomanaʻo

Hoʻohui maʻalahi i kahi pahu poʻomanaʻo i kāu panel me .panel-heading. Hiki iā ʻoe ke hoʻokomo i kekahi <h1>- <h6>me kahi .panel-titlepapa e hoʻohui i kahi poʻo poʻo. Eia naʻe, ua hoʻopau ʻia ka nui font o <h1>- <h6>e .panel-heading.

No ka waihoʻoluʻu pili pono, e hoʻokomo i nā loulou i nā poʻomanaʻo ma loko .panel-title.

Poʻomanaʻo panel me ke poʻo inoa ʻole

Paena maʻiʻo

Poʻo papa

Paena maʻiʻo

<div class="panel panel-default">
  <div class="panel-heading">Panel heading without title</div>
  <div class="panel-body">
    Panel content
  </div>
</div>

<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">Panel title</h3>
  </div>
  <div class="panel-body">
    Panel content
  </div>
</div>

Panel me ka wāwae

Wāhi pihi a i ʻole kikokikona lua ma .panel-footer. E hoʻomanaʻo , ʻaʻole hoʻoili ʻia nā waihoʻoluʻu a me nā palena i ka wā e hoʻohana ai i nā ʻano like ʻole no ka mea ʻaʻole lākou i manaʻo ʻia ma ka mua.

Paena maʻiʻo

Pane footer

<div class="panel panel-default">
  <div class="panel-body">
    Panel content
  </div>
  <div class="panel-footer">Panel footer</div>
</div>

Nā mea ʻokoʻa ʻokoʻa

E like me nā ʻāpana ʻē aʻe, e hana maʻalahi i kahi panel i ʻoi aku ka manaʻo i kahi pōʻaiapili ma o ka hoʻohui ʻana i kekahi o nā papa mokuʻāina.

Poʻo papa

Paena maʻiʻo

Poʻo papa

Paena maʻiʻo

Poʻo papa

Paena maʻiʻo

Poʻo papa

Paena maʻiʻo

Poʻo papa

Paena maʻiʻo

<div class="panel panel-primary">...</div>
<div class="panel panel-success">...</div>
<div class="panel panel-info">...</div>
<div class="panel panel-warning">...</div>
<div class="panel panel-danger">...</div>

Me nā papaʻaina

E hoʻohui i nā palena ʻole i .tableloko o kahi papa no ka hoʻolālā ʻole. Inā loaʻa kahi .panel-body, hoʻohui mākou i kahi palena ʻē aʻe i luna o ka papa no ka hoʻokaʻawale ʻana.

Poʻomanaʻo panel

Kekahi maʻiʻo panel paʻamau maanei. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.

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

<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">
    <p>...</p>
  </div>

  <!-- Table -->
  <table class="table">
    ...
  </table>
</div>

Inā ʻaʻohe kino panel, neʻe ka ʻāpana mai ke poʻo poʻomanaʻo a i ka papaʻaina me ka ʻole o ke keakea.

Poʻomanaʻo panel

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

<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>

  <!-- Table -->
  <table class="table">
    ...
  </table>
</div>

Me nā pūʻulu papa inoa

E hoʻokomo maʻalahi i nā pūʻulu papa inoa ākea i loko o kekahi panel.

Poʻomanaʻo panel

Kekahi maʻiʻo panel paʻamau maanei. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.

Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum a me ka eros

<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">
    <p>...</p>
  </div>

  <!-- List group -->
  <ul class="list-group">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Morbi leo risus</li>
    <li class="list-group-item">Porta ac consectetur ac</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>

E ʻae i ka poʻe mākaʻikaʻi e hoʻoholo i nā ana wikiō a i ʻole kiʻi kiʻiʻoniʻoni e pili ana i ka laulā o kā lākou poloka ma ka hana ʻana i kahi ratio intrinsic e hoʻonui pono i nā mea hana.

Hoʻopili pololei ʻia nā lula i <iframe>, <embed>, <video>, a me <object>nā mea; E hoʻohana i kahi papa mamo .embed-responsive-itemi makemake ʻia inā makemake ʻoe e hoʻohālikelike i ke ʻano no nā ʻano ʻē aʻe.

Manaʻo kōkua! ʻAʻole pono ʻoe e hoʻokomo frameborder="0"i kāu <iframe>s no ka mea e hoʻopau mākou i kēlā no ʻoe.

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

Paʻamau maikaʻi

E hoʻohana i ka pūnāwai ma ke ʻano he hopena maʻalahi i kahi mea e hāʻawi ai i kahi hopena inset.

Aia au i loko o ka luawai!

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

Nā papa koho

E hoʻomalu i ka padding a me nā kihi pōʻai me ʻelua papa hoʻololi koho.

Aia au i loko o ka luawai nui!

<div class="well well-lg">...</div>

E nānā, aia wau i loko o kahi luawai liʻiliʻi!

<div class="well well-sm">...</div>

Nā ʻāpana

Nā Glyphicons

Loaʻa nā glyphs

Pehea e ho ohana

Mai hui pū me nā mea ʻē aʻe

No ka hoʻohana wale ʻana i nā mea ʻole

Ke hoʻololi nei i ka wahi kikokikona ikona

Nā ikona hiki ke loaʻa

Nā laʻana

Nā hāʻule iho

Laʻana

Hoʻopololei

Pono paha kahi kūlana hou

Hoʻopololei .pull-rightʻia

Nā poʻomanaʻo

Hoʻokaʻawale

Hoʻopaʻa ʻia nā mea papa kuhikuhi

Nā pūʻulu pihi

Pono nā mea hana a me nā popovers ma nā pūʻulu pihi i kahi hoʻonohonoho kūikawā

E hōʻoia pololei rolea hāʻawi i kahi lepili

kumu hoʻohālike

Pahu mea hana pihi

Ka nui ana

Nesting

Hoʻololi kū pololei

Nā pūʻulu pihi kūpono

Ka mālama ʻana i nā palena

IE8 a me nā palena

Me <a>nā mea

Nā loulou ma ke ʻano he pihi

Me <button>nā mea

Pihi hāʻule iho

Hoʻopili pili

Hoʻokuʻu iho nā pihi hoʻokahi

E hoʻokaʻawale i nā pihi i lalo

Ka nui ana

Hoʻololi hāʻule

Pūʻulu hoʻokomo

Nā kikokikona <input>wale nō

Pono nā mea hana a me nā popovers i nā pūʻulu hoʻokomo i kahi hoʻonohonoho kūikawā

Mai hui pū me nā mea ʻē aʻe

Hoʻohui mau i nā lepili

kumu hoʻohālike

Ka nui ana

Nā pahu koho a me nā mea hoʻohui lekiō

Pākuʻi pākuʻi

Nā pihi me nā hāʻule iho

Nā pihi ʻāpana

Nā pihi lehulehu

Navs

ʻO ka hoʻohana ʻana i nā navs no nā panel tab e pono ai i ka plugin tabs JavaScript

E hoʻohana i nā hoʻokele i hiki ke loaʻa

Nā papa

Pills

Aponoia

Safari a me nā navs kūpono

Nā loulou pio

ʻAʻole pili ka hana loulou

Ke hoʻohana nei i nā hāʻule iho

Nā papa me nā hāʻule iho

ʻO nā pila me nā hāʻule iho

Navbar

Navbar paʻamau

ʻoluʻolu piha

Pono i ka polokalamu JavaScript

Ke hoʻololi nei i ka wahi hoʻomaha navbar paʻalima i hāʻule

Hiki ke loaʻa nā navbars

Kiʻi hōʻailona

Nā palapala

Nā ʻōlelo hoʻopaʻa paʻa lima

Hoʻohui mau i nā lepili

Nā pihi

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

kikokikona

Nā loulou nav ʻole

Hoʻopololei ʻāpana

Hoʻopololei pololei i nā ʻāpana he nui

Paʻa i luna

Pono ka pale kino

Paʻa i lalo

Hoʻopololei `.pull-right`ʻia

E hōʻoia pololei `role`a hāʻawi i kahi lepili

Me `<a>`nā mea

Me `<button>`nā mea

Nā kikokikona `<input>`wale nō