Nā Glyphicons

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
  • huaʻōlelo 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-kelepona-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.

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

Nā hāʻule iho

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 .

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>

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.

Pono paha kahi kūlana hou

Hoʻonoho ʻia nā hāʻule iho ma o CSS i loko o ke kahe maʻamau o ka palapala. ʻO ke ʻano kēia, hiki ke ʻoki ʻia nā hāʻule i lalo e nā mākua me kekahi mau overflowwaiwai a i ʻole ʻike ʻia ma waho o nā palena o ke awa ʻike. E hoʻoponopono i kēia mau pilikia iā ʻoe iho ke kū mai.

Hoʻopololei .pull-rightʻia

Ma ka v3.1.0, ua hoʻopau mākou i .pull-rightnā papa kuhikuhi. No ka hoʻopololei ʻākau i kahi papa kuhikuhi, e hoʻohana i ka .dropdown-menu-right. Hoʻohana ʻia nā ʻāpana nav i hoʻopaʻa pono ʻia i ka navbar i kahi mana mixin o kēia papa e hoʻopololei i ka papa kuhikuhi. No ka hoʻopau ʻana iā ia, hoʻohana .dropdown-menu-left.

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

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>

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>

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>

Nā pūʻulu pihi

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 rolea 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 nā mea hana pono e loaʻa kahi role="toolbar".

Hoʻokahi ʻokoʻa nā pūʻulu i loaʻa i kahi mana hoʻokahi (no ka laʻana, nā pūʻulu pihi i ʻā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>

Pahu mea hana pihi

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.

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

Pihi hāʻule iho

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>

Pūʻulu hoʻokomo

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.

@

@example.com

$ .00

https://example.com/users/
<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>

Navs

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

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>

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>

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>

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>

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>

Navbar

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

  1. E ho'ēmi i ka nui a i ʻole ka laula o nā mea navbar.
  2. Hūnā i kekahi mau mea navbar ma kekahi ʻano nui o ka pale me ka hoʻohana ʻana i nā papa hana pane .
  3. 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ʻī.

Pono i ka polokalamu JavaScript

Inā pio ka JavaScript a haiki ka ʻike maka e hāʻule ka navbar, ʻaʻole hiki ke hoʻonui i ka navbar a nānā i ka ʻike i loko o ka .navbar-collapse.

Pono ka navbar pane e hoʻokomo i ka plugin collapse i kāu mana o Bootstrap.

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

Hiki ke loaʻa nā navbars

E ʻoluʻolu e hoʻohana i kahi <nav>mea a i ʻole, inā e hoʻohana ana i kahi mea maʻamau e like me ka <div>, e hoʻohui i kahi role="navigation"i kēlā me kēia navbar e ʻike maopopo iā ia he ʻāina ʻāina no nā mea hoʻohana i nā ʻenehana kōkua.

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

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

Aia kekahi mau hōʻailona e pili ana i ka hoʻohana ʻana i nā mana palapala i loko o nā mea paʻa i nā polokalamu kelepona. E ʻike i kā mākou palapala kākoʻo polokalamu kele no nā kikoʻī.

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>

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

E like me nā papa pihi maʻamau , .navbar-btnhiki ke hoʻohana ʻia <a>a me <input>nā mea. Eia naʻe, ʻaʻole .navbar-btnpono e hoʻohana ʻia nā papa pihi maʻamau i <a>nā mea i loko .navbar-nav.

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ʻopololei pololei i nā ʻāpana he nui

Loaʻa i nā Navbars kahi palena me nā .navbar-rightpapa he nui. No ka maʻiʻo ākea kūpono, hoʻohana mākou i ka palena ʻino ma ka mea hope .navbar-right. Inā nui nā mea e hoʻohana ana i kēlā papa, ʻaʻole hana kēia mau palena e like me ka mea i manaʻo ʻia.

E nānā hou mākou i kēia ke hiki iā mākou ke kākau hou i kēlā ʻāpana ma v4.

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>

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

Lepili

Laʻana

Poʻomanaʻo laʻana Hou

Poʻomanaʻo laʻana Hou

Poʻomanaʻo laʻana Hou

Poʻomanaʻo laʻana Hou

Poʻomanaʻo laʻana Hou
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 .

Nā hōʻailona

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 Jumbotron

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

Poʻo ʻaoʻao

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>

Nā kiʻi liʻiliʻi

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.

100%x200

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

100%x200

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

100%x200

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>

ʻO nā makaʻala

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.

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

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

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.

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

Nā pā holomua

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.

60% Paʻa
<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.

40% Paʻa (holomua)
20% Paʻa
60% Paʻa (aʻo)
80% Paʻa (pilikia)
<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.

40% Paʻa (holomua)
20% Paʻa
60% Paʻa (aʻo)
80% Paʻa (pilikia)
<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.

45% Paʻa
<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.

35% Paʻa (holomua)
20% Paʻa (aʻo)
10% Paʻa (pilikia)
<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>

Mea hoʻolaha

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>

Papa papa inoa

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

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

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

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

Nā Panela

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

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

Hoʻopili pane

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>

Punawai

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>