Nga reta e waatea ana

Neke atu i te 250 nga reta kei te whakatakotoranga momotuhi mai i te huinga Glyphicon Halfings. Ko nga Glyphicons Halflings te tikanga karekau i te waatea mo te kore utu, engari na to ratou kaihanga i whakawtea mai mo Bootstrap mo te kore utu. Hei mihi ki a koe, ka tono noa matou kia whakauruhia he hononga ki nga Glyphicons i nga wa katoa ka taea.

glyphicon glyphicon-asterisk
glyphicon glyphicon-plus
glyphicon glyphicon-euro
glyphicon glyphicon-eur
glyphicon glyphicon-minus
glyphicon glyphicon-kapua
glyphicon glyphicon-envelope
glyphicon glyphicon-pene
glyphicon glyphicon-karaihe
glyphicon glyphicon-waiata
glyphicon glyphicon-rapu
glyphicon glyphicon-ngakau
glyphicon glyphicon-whetu
glyphicon glyphicon-whetu-kore
glyphicon glyphicon-kaiwhakamahi
glyphicon glyphicon-kiriata
glyphicon glyphicon-th-nui
glyphicon glyphicon-th
glyphicon glyphicon-th-list
glyphicon glyphicon-ok
glyphicon glyphicon-tango
glyphicon glyphicon-zoom-in
glyphicon glyphicon-zoom-out
glyphicon glyphicon-off
glyphicon glyphicon-signal
glyphicon glyphicon-cog
glyphicon glyphicon-parapara
glyphicon glyphicon-whare
glyphicon glyphicon-kōnae
glyphicon glyphicon-wa
glyphicon glyphicon-ara
glyphicon glyphicon-download-alt
glyphicon glyphicon-download
glyphicon glyphicon-upload
glyphicon glyphicon-pouakauru
glyphicon glyphicon-play-circle
glyphicon glyphicon-repeat
glyphicon glyphicon-whakahou
glyphicon glyphicon-list-alt
glyphicon glyphicon-raka
glyphicon glyphicon-flag
glyphicon glyphicon-headphones
glyphicon glyphicon-volume-off
glyphicon glyphicon-rōrahi-iho
glyphicon glyphicon-rōrahi-ake
glyphicon glyphicon-qrcode
glyphicon glyphicon-barcode
glyphicon glyphicon-tag
glyphicon glyphicon-tags
pukapuka glyphicon glyphicon-book
glyphicon glyphicon-tohutohu
glyphicon glyphicon-print
glyphicon glyphicon-kamera
glyphicon glyphicon-momotuhi
glyphicon glyphicon-bold
glyphicon glyphicon-tītaha
glyphicon glyphicon-kupu-teitei
glyphicon glyphicon-kuputuhi-whanui
glyphicon glyphicon-align-maui
glyphicon glyphicon-align-center
glyphicon glyphicon-align-right
glyphicon glyphicon-align-justify
glyphicon glyphicon-list
glyphicon glyphicon-indent-mauī
glyphicon glyphicon-indent-matau
glyphicon glyphicon-facetime-ataata
glyphicon glyphicon-pikitia
glyphicon glyphicon-map-tohu
glyphicon glyphicon-adjust
glyphicon glyphicon-tint
glyphicon glyphicon-edit
glyphicon glyphicon-share
glyphicon glyphicon-tirohia
glyphicon glyphicon-nekehanga
glyphicon glyphicon-step-backward
glyphicon glyphicon-tere-whakamuri
glyphicon glyphicon-whakamuri
glyphicon glyphicon-play
glyphicon glyphicon-pause
glyphicon glyphicon-mutu
glyphicon glyphicon-whakamua
glyphicon glyphicon-tere-whakamua
glyphicon glyphicon-taahiraa-mua
glyphicon glyphicon-eject
glyphicon glyphicon-chevron-maui
glyphicon glyphicon-chevron-matau
glyphicon glyphicon-plus-sign
glyphicon glyphicon-minus-tohu
glyphicon glyphicon-tango-tohu
glyphicon glyphicon-ok-tohu
glyphicon glyphicon-pātai-tohu
glyphicon glyphicon-info-tohu
glyphicon glyphicon-screenshot
glyphicon glyphicon-tango-porohita
glyphicon glyphicon-ok-porowhita
glyphicon glyphicon-ban-porowhita
glyphicon glyphicon-pere-maui
glyphicon glyphicon-pere-matau
glyphicon glyphicon-pere-ake
glyphicon glyphicon-pere-iho
glyphicon glyphicon-share-alt
glyphicon glyphicon-whakaahua-ki tonu
glyphicon glyphicon-whakaahua-iti
glyphicon glyphicon-exclamation-sign
glyphicon glyphicon-koha
glyphicon glyphicon-rau
glyphicon glyphicon-ahi
glyphicon glyphicon-kanohi-tuwhera
glyphicon glyphicon-kanohi-kati
glyphicon glyphicon-whakatupato-tohu
glyphicon glyphicon-rererangi
glyphicon glyphicon-maramataka
glyphicon glyphicon-tupurangi
glyphicon glyphicon-korero
glyphicon glyphicon-aukume
glyphicon glyphicon-chevron-up
glyphicon glyphicon-chevron-down
glyphicon glyphicon-retweet
glyphicon glyphicon-hoko-kaata
glyphicon glyphicon-kōpaki-kati
glyphicon glyphicon-kōpaki-tuwhera
glyphicon glyphicon-huri-rahi-poutū
glyphicon glyphicon-whakaahua-whakapae
glyphicon glyphicon-hdd
glyphicon glyphicon-bullhorn
glyphicon glyphicon-pere
glyphicon glyphicon-tiwhikete
glyphicon glyphicon-thumbs-up
glyphicon glyphicon-thumbs-down
glyphicon glyphicon-ringa-matau
glyphicon glyphicon-ringa-maui
glyphicon glyphicon-ringa-ringa
glyphicon glyphicon-ringa-iho
glyphicon glyphicon-porowhita-pere-matau
glyphicon glyphicon-porowhita-pere-maui
glyphicon glyphicon-porowhita-pere-runga
glyphicon glyphicon-porowhita-pere-iho
glyphicon glyphicon-globe
glyphicon glyphicon-wrench
glyphicon glyphicon-mahi
glyphicon glyphicon-tātari
glyphicon glyphicon-kopamārō
glyphicon glyphicon-mata katoa
glyphicon glyphicon-papatohu
glyphicon glyphicon-pepa
glyphicon glyphicon-ngakau-kore
glyphicon glyphicon-hononga
glyphicon glyphicon-waea
glyphicon glyphicon-pushpin
glyphicon glyphicon-usd
glyphicon glyphicon-gbp
glyphicon glyphicon-momo
glyphicon glyphicon-sort-by-alphabet
glyphicon glyphicon-sort-by-alphabet-alt
glyphicon glyphicon-whakarite-ma-te-raupapa
glyphicon glyphicon-sort-by-order-alt
glyphicon glyphicon-whakarite-a-huanga
glyphicon glyphicon-kōmaka-ma-huanga-alt
glyphicon glyphicon-kaore i tohua
glyphicon glyphicon-whakawhanui
glyphicon glyphicon-collapse-down
glyphicon glyphicon-collapse-up
glyphicon glyphicon-takiuru-mai
glyphicon glyphicon-flash
glyphicon glyphicon-takiputa-waho
glyphicon glyphicon-hou-matapihi
glyphicon glyphicon-record
glyphicon glyphicon-save
glyphicon glyphicon-tuwhera
glyphicon glyphicon-tiakina
glyphicon glyphicon-kaumai
glyphicon glyphicon-kaweake
glyphicon glyphicon-tuku
glyphicon glyphicon-floppy-disk
glyphicon glyphicon-floppy-tiakina
glyphicon glyphicon-floppy-tango
glyphicon glyphicon-floppy-save
glyphicon glyphicon-floppy-tuwhera
glyphicon glyphicon-credit-card
glyphicon glyphicon-whakawhiti
nga taputapu tapatapahi
glyphicon glyphicon-header
glyphicon glyphicon-kōpeke
glyphicon glyphicon-taringa
glyphicon glyphicon-waea-alt
glyphicon glyphicon-tower
glyphicon glyphicon-stats
glyphicon glyphicon-sd-ataata
glyphicon glyphicon-hd-ataata
glyphicon glyphicon-taitararoto
glyphicon glyphicon-oro-tereo
glyphicon glyphicon-sound-dolby
glyphicon glyphicon-sound-5-1
glyphicon glyphicon-sound-6-1
glyphicon glyphicon-sound-7-1
glyphicon glyphicon-mana-mana-tohu
glyphicon glyphicon-rehita-tohu
glyphicon glyphicon-cloud-download
glyphicon glyphicon-cloud-upload
glyphicon glyphicon-tree-conifer
glyphicon glyphicon-rakau-deciduous
glyphicon glyphicon-cd
glyphicon glyphicon-save-file
glyphicon glyphicon-tuwhera-kōnae
glyphicon glyphicon-level-up
glyphicon glyphicon-copy
glyphicon glyphicon-whakapiri
glyphicon glyphicon-matohi
glyphicon glyphicon-equalizer
glyphicon glyphicon-king
glyphicon glyphicon-kuini
glyphicon glyphicon-pawn
glyphicon glyphicon-bishop
glyphicon glyphicon-knight
glyphicon glyphicon-pepe-tatai
glyphicon glyphicon-tent
glyphicon glyphicon-papatuhi
glyphicon glyphicon-moenga
glyphicon glyphicon-aporo
glyphicon glyphicon-muera
glyphicon glyphicon-hourglass
glyphicon glyphicon-rama
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
glyphicon glyphicon-scale
glyphicon glyphicon-ice-lolly
glyphicon glyphicon-ice-lolly-tasted
glyphicon glyphicon-matauranga
glyphicon glyphicon-kōwhiringa-whakapae
glyphicon glyphicon-kōwhiringa-poutū
glyphicon glyphicon-menu-hamburger
glyphicon glyphicon-modal-matapihi
glyphicon glyphicon-hinu
glyphicon glyphicon-grain
glyphicon glyphicon-mohiti
glyphicon glyphicon-kupu-rahi
glyphicon glyphicon-kupu-tae
glyphicon glyphicon-text-background
glyphicon glyphicon-mea-align-top
glyphicon glyphicon-mea-align-raro
glyphicon glyphicon-mea-align-horizontal
glyphicon glyphicon-mea-align-maui
glyphicon glyphicon-mea-align-poutū
glyphicon glyphicon-mea-align-right
glyphicon glyphicon-tatoru-matau
glyphicon glyphicon-tatoru-maui
glyphicon glyphicon-triangle-raro
glyphicon glyphicon-tatoru-runga
glyphicon glyphicon-console
glyphicon glyphicon-superscript
glyphicon glyphicon-subscript
glyphicon glyphicon-menu-maui
glyphicon glyphicon-menu-matau
glyphicon glyphicon-menu-down
glyphicon glyphicon-menu-up

Me pehea te whakamahi

Mo nga take mahi, ka hiahia nga tohu katoa ki te karaehe turanga me te karaehe tohu takitahi. Hei whakamahi, tuhia te waehere e whai ake nei mo nga waahi katoa. Me waiho he mokowhiti i waenga i te ata me te kuputuhi mo te kapi tika.

Kaua e uru ki etahi atu waahanga

Ko nga karaehe ata kaore e taea te whakakotahi tika me etahi atu waahanga. Kaua e whakamahia me etahi atu karaehe i runga i te huānga kotahi. Engari, taapirihia he kohanga <span>ka hoatu nga karaehe ata ki te <span>.

Mo te whakamahi noa i nga huānga kau

Me whakamahi noa nga karaehe ata ki nga huānga karekau he ihirangi tuhinga me te kore he huānga tamariki.

Te huri i te waahi momotuhi ata

E kii ana a Bootstrap ka noho nga konae momotuhi tohu ki te ../fonts/raarangi, e pa ana ki nga konae CSS kua whakahiato. Ko te neke, te whakaingoa ano ranei i aua konae momotuhi ko te whakahou i te CSS ki tetahi o nga huarahi e toru:

Hurihia nga taurangi @icon-font-pathme/ranei @icon-font-namei te puna He iti ake nga konae.
Whakamahia te kōwhiringa URL whanaunga i whakaratohia e te Kaihanga Iti.
Hurihia nga url()huarahi i roto i te CSS kua whakahiato.

Whakamahia nga whiringa e pai ana ki to tatūnga whanaketanga motuhake.

Nga tohu e waatea ana

Ko nga putanga hou o nga hangarau awhina ka panui i nga ihirangi i hangaia e CSS, me nga tohu Unicode motuhake. Hei karo i nga putanga ohorere me te rangirua i roto i nga kaipanui mata (ina koa ka whakamahia nga tohu mo te whakapaipai), ka huna e matou me te aria-hidden="true"huanga.

Mena kei te whakamahi koe i te ata hei kawe i te tikanga (kaore i te mea hei huānga whakapaipai anake), me whakarite kia kawea ano tenei tikanga ki nga hangarau awhina – hei tauira, whakaurua etahi atu ihirangi, he mea huna ki te .sr-onlykaraehe.

Mena kei te hanga mana koe me te kore kupu ke atu (penei i te <button>tohu tohu anake), me whakarato tonu koe i etahi atu ihirangi hei tautuhi i te kaupapa o te mana whakahaere, kia whai whakaaro ai ki nga kaiwhakamahi hangarau awhina. I tenei keehi, ka taea e koe te taapiri i tetahi aria-labelhuanga ki runga i te mana whakahaere.

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

Tauira

Whakamahia i roto i nga patene, i nga roopu patene mo te paeutauta, te whakaterenga, te whakaurunga puka kua tohua.

<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 tohu i whakamahia i roto i te matohi hei whakaatu he karere hapa, me etahi atu .sr-onlytuhinga hei kawe i tenei tohu ki nga kaiwhakamahi o nga hangarau awhina.

Whakauruhia he wahitau imeera whaimana

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

Ka taea te takahuri, te tahua horopaki hei whakaatu i nga rarangi hononga. I mahi tauwhitiwhiti me te mono JavaScript takaiho .

Tauira

Takaia te keu o te takaiho me te tahua takaiho ki roto .dropdown, tetahi atu huānga ranei e whakaatu ana position: relative;. Na ka taapirihia te HTML o te tahua.

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

Ka taea te huri i nga tahua takaiho ki te whakaroa whakarunga (kaore ki raro) ma te taapiri atu .dropupki te matua.

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

Tirohanga

Ma te taunoa, ka tuu aunoa he tahua takaiho 100% mai i runga me te taha maui o tona matua. Tāpirihia .dropdown-menu-rightki te .dropdown-menutaha matau tiaarohia te tahua takaiho.

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

Pane

Tāpirihia he pane hei tapanga i nga waahanga o nga hohenga ki tetahi tahua takaiho.

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

Kaiwehewehe

Tāpirihia he kaiwehewehe hei wehe i nga raupapa hononga ki te tahua takaiho.

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

Kua monoa nga mea tahua

Tāpirihia .disabledki te <li>i roto i te takaiho ki te mono i te hono.

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

Whakarōpūhia he raupapa patene ki te raina kotahi me te roopu paatene. Taapirihia te reo irirangi JavaScript me te ahua o te ahua pouakataki me o taatau paatene mono .

Ko nga aki utauta me nga pouvers i roto i nga roopu paatene me whakarite motuhake

Ina whakamahi i nga aki utauta, i nga pouvers ranei i runga i nga huānga i roto i te .btn-group, me tohu koe i te whiringa container: 'body'ki te karo i nga paanga taha e kore e hiahiatia (pērā i te huanga e tipu ake ana, me te ngaro ranei i ona kokonga porotaka i te wa e whakaohohia ana te aki taputapu, te popover ranei).

Me whakarite kia tika `role`ka hoatu he tapanga

Kia taea ai e nga hangarau awhina - penei i nga kaipānui mata - ki te whakaatu he raupapa o nga paatene kua whakarōpūhia, roleme whakarato he huanga tika. Mo nga roopu paatene, ko tenei role="group", ko nga paeutauta me whai role="toolbar".

Ko tetahi o nga roopu he mana kotahi anake (hei tauira ko nga roopu paatene tika me <button>nga huānga) he takaiho ranei.

I tua atu, me hoatu he tapanga ki nga roopu me nga paeutauta, na te mea ko te nuinga o nga hangarau awhina e kore e whakaatu, ahakoa te ahua o te rolehuanga tika. I roto i nga tauira e whakaratohia ana i konei, ka whakamahia e matou aria-label, engari ka aria-labelledbytaea ano te whakamahi etahi atu.

Tauira taketake

Takaia he raupapa patene ki .btnroto .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>

Whakakotahihia nga huinga o <div class="btn-group">ki te a <div class="btn-toolbar">mo nga waahanga uaua ake.

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

Te rahinga

Engari ki te tono i nga karaehe rahinga paatene ki ia paatene i roto i te roopu, taapiri noa .btn-group-*ki ia .btn-group, tae atu ki te wa e kohanga ana i nga roopu maha.

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

Kohanga

Tuhia he .btn-groupki roto i tetahi atu .btn-groupina hiahia koe ki nga tahua takaiho ka konatunatua ki te raupapa paatene.

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

Te rerekētanga poutū

Whakaatuhia he huinga o nga paatene kia noho poutū, kaua e whakapae. Kaore i te tautokohia nga takaiho paatene ritua i konei.

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

Nga roopu patene tika

Hangaia he roopu patene kia totoro kia rite te rahi ki te whanui katoa o tona matua. Ka mahi ano me nga takaiho paatene i roto i te roopu paatene.

Te whakahaere i nga taitapa

Na te HTML me te CSS motuhake e whakamahia ana hei whakatika i nga paatene (ara display: table-cell), ka ruarua nga taitapa i waenganui i a raatau. I roto i nga roopu patene auau, margin-left: -1pxka whakamahia hei tapae i nga taitapa hei utu mo te tango. Heoi, margine kore e mahi me display: table-cell. Ko te mutunga, i runga i o whakaritenga ki a Bootstrap, ka hiahia pea koe ki te tango, ki te tae ano ranei i nga taitapa.

IE8 me nga taitapa

Karekau a Internet Explorer 8 e whakaatu taitapa i runga i nga paatene i roto i te roopu paatene tika, ahakoa kei runga , he huānga <a>ranei . <button>Hei huri i tera, takai ia paatene ki tetahi atu .btn-group.

Tirohia te #12476 mo etahi atu korero.

Me `<a>`nga huānga

Takaia noa he raupapa .btns i roto .btn-group.btn-group-justified.

Mauī Waenganui Matau

Mauī Waenganui

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

Ko nga hononga hei patene

Mēnā <a>ka whakamahia ngā huānga hei patene – hei whakaoho i te mahi i roto i te wharangi, kaua ki te whakatere ki tetahi atu tuhinga, waahanga ranei i roto i te wharangi o naianei – me hoatu ano he role="button".

Me `<button>`nga huānga

Hei whakamahi i nga roopu patene tika me <button>nga huānga, me takai ia paatene ki roto i te roopu paatene . Ko te nuinga o nga kaitirotiro kaore i te whakamahi tika i a maatau CSS mo te whakatika i <button>nga huānga, engari i te mea kei te tautoko matou i nga takahanga paatene, ka taea e taatau te mahi.

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

Whakamahia tetahi paatene hei whakaoho i te tahua takaiho ma te whakanoho ki roto i te .btn-groupme te whakarato i te tohu tohu tahua tika.

Te whakawhirinaki monomai

Ko nga takahanga patene me whakauru te mono takaiho ki to putanga o Bootstrap.

Patene takaiho kotahi

Hurihia te paatene hei takahuri takahuri me etahi huringa tohu taketake.

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

Wehehia nga paatene takaiho

Waihoki, hangahia nga takaiho paatene ritua me nga huringa tohu rite, me te paatene motuhake anake.

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

Te rahinga

Ka mahi nga patene takaiho me nga paatene o nga rahi katoa.

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

Rerekētanga whakaheke

Whakaohohia nga tahua takaiho ki runga ake ma te taapiri atu .dropupki te matua.

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

Whakaroahia nga mana puka ma te taapiri i nga kupu, i nga paatene ranei i mua, i muri, i nga taha e rua ranei o tetahi momo tuhinga <input>. Whakamahia .input-groupme te .input-group-addon, ki te whakauru, .input-group-btnki te taapiri ranei i nga huānga ki te kotahi .form-control.

Kuputuhi `<input>`anake

A ape i te whakamahi i <select>nga huānga i konei na te mea kaore e taea te whakaingoatia ki nga kaitirotiro Tukutuku.

A ape i te whakamahi i <textarea>nga huānga i konei na te mea rowskare e arohia o ratou huanga i etahi wa.

Ko nga aki utauta me nga pouvers i roto i nga roopu whakauru me whakarite motuhake

Ina whakamahi i nga aki utauta, i nga pouvers ranei i runga i nga huānga i roto i te .input-group, me tohu koe i te whiringa container: 'body'ki te karo i nga paanga taha kore e hiahiatia (pērā i te huanga e tipu ake ana, me te ngaro ranei o nga kokonga porotaka i te wa e whakaohohia ana te aki taputapu, te popover ranei).

Kaua e uru ki etahi atu waahanga

Kaua e whakahanumihia nga roopu puka me nga karaehe pou matiti ki nga roopu whakauru. Engari, kohanga te roopu whakauru ki roto o te roopu puka, huānga e pa ana ki te matiti.

Tāpiri tapanga i nga wa katoa

Ka raru nga kaipanui mata ki o puka mena kaore koe e whakauru i tetahi tapanga mo ia whakaurunga. Mo enei roopu whakauru, whakarite kia tukuna he tapanga taapiri, mahi ranei ki nga hangarau awhina.

Ko te tikanga tika hei whakamahi (nga huānga e kitea <label>ana, <label>nga huānga e huna ana ma te .sr-onlyakomanga, te whakamahi ranei i te aria-label, aria-labelledby, aria-describedby, huanga titleranei placeholder) me nga korero taapiri hei kawe ka rereke i runga i te momo momo widget atanga e whakatinanahia ana e koe. Ko nga tauira i roto i tenei waahanga e whakarato ana i etahi huarahi e whakaarohia ana, mo nga keehi-motuhake.

Tauira taketake

Whakanohoia tetahi taapiri, paatene ranei ki tetahi taha o te whakauru. Ka taea hoki e koe te whakanoho tetahi ki nga taha e rua o te whakauru.

Kaore matou e tautoko i nga taapiri maha ( .input-group-addonranei .input-group-btn) i te taha kotahi.

Kare matou e tautoko i nga mana puka maha i roto i te roopu whakauru kotahi.

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

Te rahinga

Taapirihia nga karaehe rahi o te ahua ki a .input-groupia ano ka huri aunoa nga ihirangi o roto—kaore e tika kia whakahoki ano i nga karaehe mana whakahaere mo ia huānga.

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

Pouakataki me nga taapiri reo irirangi

Whakanohoia he pouakataki, kowhiringa reo irirangi ranei ki roto i te taapiri a te roopu whakauru, kaua ki te kuputuhi.

<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ātene tāpiri

He ahua rereke nga paatene i roto i nga roopu whakauru me te hiahia kia kotahi ano te taumata o te kohanga. Engari i te .input-group-addon, me whakamahi koe .input-group-btnki te takai i nga paatene. Ka hiahiatia tenei na nga momo kaitirotiro taunoa e kore e taea te whakakore.

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

Patene me nga takaiho

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

Patene kua wehea

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

Patene maha

Ahakoa ka taea e koe kia kotahi noa te taapiri mo ia taha, ka taea e koe te maha nga paatene i roto i te kotahi .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>

Ko nga Navs e waatea ana i Bootstrap he tohu tohu, timata mai i te .navkaraehe turanga, me nga whenua tiritahi. Hurihia nga karaehe whakarerekē kia huri i waenga i ia kāhua.

Ma te whakamahi i nga navs mo nga panui ripa me whakauru nga ripa JavaScript

Mo nga ripa me nga waahi ripanga, me whakamahi koe i nga ripa JavaScript mono . Ka hiahia ano te tohu tohu me etahi atu rolehuanga ARIA - tirohia te tauira tohu tohu mo etahi atu taipitopito.

Hangaia nga navs hei whakaterenga uru

Mena kei te whakamahi koe i nga navs ki te whakarato i te pae whakaterenga, me whakauru he role="navigation"ki te ipu matua tino arorau o te <ul>, takai ranei tetahi <nav>huānga huri noa i te whakaterenga katoa. Kaua e taapirihia te mahi ki a <ul>ia ano, na te mea ka kore e panuitia hei raarangi tuuturu ma nga hangarau awhina.

Ripa

Kia mahara ko te .nav-tabskaraehe te karaehe .navturanga.

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

Nga pire

Tangohia taua HTML ano, engari whakamahia .nav-pills:

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

Ko nga pire ka taea te tapae poutū. Tāpiri noa .nav-stacked.

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

Ka tika

Hangaia nga ripa me nga pire kia rite te whanui o to ratau matua ki nga mata whanui atu i te 768px me te .nav-justified. I runga i nga mata iti ake, kua tapae nga hononga nav.

I tenei wa kaore i te tautokohia nga hononga navbar tika.

Safari me nga navs tika

Mai i te v9.1.2, ka whakaatu a Safari i tetahi pepeke e huri whakapae ana i to kaitirotiro ka puta he hapa i roto i te nav tika ka whakawāteahia i te tāmatatanga. Ka whakaatuhia ano tenei pepeha ki te tauira nav tika .

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

Hononga haua

Mo tetahi waahanga nav (ripa, pire ranei), taapirihia .disabledmo nga hononga hina, karekau he paanga whakaparo .

Ko te taumahinga hono kaore i pa

Ka huri noa tenei karaehe i <a>te ahua o te ', ehara i tana mahi. Whakamahia te JavaScript ritenga hei whakakore i nga hononga i konei.

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

Te whakamahi takaiho

Taapirihia nga tahua takaiho me te HTML iti me te mono JavaScript takaiho .

Ripa whai takaiho

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

Nga pire me nga takaiho

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

Ko nga Navbars he waahanga meta urupare e mahi ana hei pane whakatere mo to tono, pae ranei. Ka timata te tiango (ka taea te takahuri) i roto i nga tirohanga pūkoro ka noho whakapae i te pikinga o te whanui tauranga tiro e waatea ana.

I tenei wa kaore i te tautokohia nga hononga navbar tika.

Nga ihirangi puhake

I te mea kare a Bootstrap e mohio ki te nui o te mokowhiti o te ihirangi kei roto i to pae whakaterenga, ka raru pea koe me te takai ihirangi ki te rarangi tuarua. Hei whakatau i tenei, ka taea e koe:

Whakaitihia te nui, te whanui ranei o nga taonga pae whakatere.
Huna etahi tuemi pae whakatere ki etahi rahi mata ma te whakamahi i nga karaehe whaipainga urupare .
Hurihia te waahi ka huri to pae whakatere i waenga i te aratau tiango me te aratau whakapae. Whakaritehia te @grid-float-breakpointtaurangi, taapiri ranei i to ake patai pāpāho.

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

Whakakapihia te waitohu navbar ki to ake ahua ma te huri i te tuhinga mo te <img>. I te .navbar-brandmea kei a ia ake te papa me te teitei, ka hiahia koe ki te whakakore i etahi CSS i runga i to ahua.

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

Tuhia nga ihirangi puka ki roto .navbar-formmo te tirohanga poutū tika me te whanonga tiango ki nga tauranga whaiti. Whakamahia nga whiringa tirohanga hei whakatau kei hea e noho ana i roto i te ihirangi pae whakatere.

Hei upoko, .navbar-formka tohatohahia te nuinga o tana waehere .form-inlinema te mixin. Ko etahi o nga mana whakahaere, penei i nga roopu whakauru, ka hiahia pea kia whakaatu tika nga whanui i roto i te pae whakatere.

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

Tāpiri tapanga i nga wa katoa

Ka raru nga kaipanui mata ki o puka mena kaore koe e whakauru i tetahi tapanga mo ia whakaurunga. Mo enei puka-roto, ka taea e koe te huna i nga tapanga ma te whakamahi i te .sr-onlyakomanga. He huarahi ke atu ano mo te whakarato tapanga mo nga hangarau awhina, penei i te aria-label, huanga aria-labelledbyranei . titleMena karekau tetahi o enei, ka huri pea nga kaipanui mata ki te whakamahi i te placeholderhuanga, mena kei reira, engari me mahara ko te whakamahi placeholderhei whakakapi mo etahi atu tikanga tapanga kaore i te tohutohuhia.

Tāpirihia te .navbar-btnkaraehe ki ngā <button>huānga kāore i te noho ki roto <form>ki te poutū ki roto i te pae whakaterenga.

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

Takaia nga aho o te kuputuhi ki tetahi huānga me te .navbar-text, i te nuinga o te waa ki te <p>tohu mo te arataki tika me te tae.

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

Mo te hunga e whakamahi ana i nga hononga paerewa kaore i roto i te waahanga whakatere whakatere, whakamahia te .navbar-linkkaraehe ki te taapiri i nga tae tika mo nga whiringa navbar taunoa me te hurihuri.

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

Tiarohia nga hononga nav, puka, paatene, tuhinga ranei, ma te whakamahi i nga .navbar-leftakomanga .navbar-rightwhaipainga. Ka taapirihia e nga karaehe e rua he maanu CSS ki te ahunga kua tohua. Hei tauira, ki te whakahāngai i nga hononga nav, tuuhia ki roto i tetahi waahanga motuhake <ul>me te karaehe whaipainga e whakamahia ana.

Ko enei karaehe he momo whakaurunga o te .pull-leftme te .pull-right, engari ka horahia ki nga patai pāpāho kia ngawari ake te whakahaere i nga waahanga navbar puta noa i te rahi o te taputapu.

Tāpirihia .navbar-fixed-topka whakauruhia he .container, .container-fluidki te pokapū me te ihirangi pae whakatere.

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

E hiahiatia ana te whakakakahu tinana

Ka whakakikoruatia e te pae navbar etahi atu ihirangi, mena ka taapiri atu koe paddingki runga o te <body>. Whakamātauria ōu ake uara, whakamahi rānei i tā mātou snippet i raro nei. Aki: Ma te taunoa, he 50px te teitei o te pae whakatere.

body { padding-top: 70px; }

Kia mahara ki te whakauru i tenei i muri i te Bootstrap CSS matua.

Tāpirihia .navbar-fixed-bottomka whakauruhia he .container, .container-fluidki te pokapū me te ihirangi pae whakatere.

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

E hiahiatia ana te whakakakahu tinana

Ka whakakikoruatia e te pae navbar etahi atu ihirangi, mena ka taapiri atu koe paddingki raro o te <body>. Whakamātauria ōu ake uara, whakamahi rānei i tā mātou snippet i raro nei. Aki: Ma te taunoa, he 50px te teitei o te pae whakatere.

body { padding-bottom: 70px; }

Kia mahara ki te whakauru i tenei i muri i te Bootstrap CSS matua.

Waihangatia he paewhakatua whanui-katoa ka panuku atu me te wharangi ma te taapiri .navbar-static-topme te whakauru i te .containerihirangi .container-fluidpae whakatere ki te pokapū me te papa.

Kaore i rite ki nga .navbar-fixed-*karaehe, kaore koe e hiahia ki te whakarereke i tetahi papa i runga i te body.

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

Whakarerekēhia te ahua o te pae whakatere ma te taapiri .navbar-inverse.

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

Nga kongakonga taro

Tohua te waahi o te wharangi o naianei i roto i te arowhai whakatere.

Ka taapiri aunoa nga kaiwehewehe i roto i te CSS :beforeme te content.

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

whakawhārangi

Whakaratohia nga hononga whakaingoatanga mo to pae, taupānga ranei me te waahanga wharangi wharangi maha, te waahanga wharangi ngawari ake ranei .

whakarārangi ingoa taunoa

Te whakarangirangi ngawari na Rdio, he pai mo nga tono me nga hua rapu. Ko te poraka nui he uaua ki te ngaro, he ngawari te tauine, me te whakarato i nga waahi paato 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>

Te tapanga i te waahanga whakaingoatanga

Me takai te wahanga whakaingoatanga ki tetahi <nav>huānga hei tohu hei waahanga whakatere hei tirotiro i nga kaipānui me etahi atu hangarau awhina. I tua atu, i te mea kua nui ake i te kotahi te waahanga whakatere i tetahi wharangi (pēnei i te whakatere tuatahi i te pane, te whakatere paetaha ranei), he mea tika kia hoatu he whakaahuatanga aria-labelmo te <nav>whakaatu i tona kaupapa. Hei tauira, ki te whakamahia te wahanga whakaingoatanga ki te whakatere i waenga i te huinga o nga hua rapu, he tapanga tika pea ko aria-label="Search results pages".

Ko nga ahuatanga haua me te hohe

He mea whakarite nga hononga mo nga ahuatanga rereke. Whakamahia .disabledmo nga hononga kaore e taea te panui me .activete tohu i te wharangi o naianei.

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

E taunaki ana matou kia huri koe i nga punga hohe, haua ranei mo te <span>, waiho ranei te punga mo nga pere o mua/muri, ki te tango i te mahi paato i te wa e pupuri ana i nga momo kua whakaritea.

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

Te rahinga

Kei te pirangi koe ki te wharangi nui, iti ake ranei? Tāpirihia mo etahi atu rahinga .pagination-lgranei ..pagination-sm

<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

Nga hononga tere o mua me muri mo nga whakatinanatanga whakarangirangi ngawari me te tohu marama me nga momo. He pai mo nga waahi ngawari penei i nga rangitaki me nga maheni.

Tauira taunoa

Ma te taunoa, ka pokapu hono te pager.

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

Hononga hono

Ka taea e koe te whakarite i ia hononga ki nga taha:

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

Ko te ahua monokia

Ka whakamahia ano hoki e nga hononga pager te .disabledkaraehe whaipainga whanui mai i te wharangi.

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

Tauira

Tauira pane Hou

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

Nga rereke e waatea ana

Tāpirihia tetahi o nga karaehe whakarereke kua whakahuahia ake nei hei whakarereke i te ahua o te tapanga.

Momo Whakatupato Momo Momo Angitu Tuatahi Taunoa

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

He maha nga tapanga?

Ka puta ake he raru ki te whakaputa ina he maha nga tapanga raarangi kei roto i tetahi ipu whaiti, kei roto i ia waahanga tana ake inline-blockhuānga (penei i te ata). Ko te ara huri noa i tenei ko te whakarite display: inline-block;. Mo te horopaki me tetahi tauira, tirohia te #13219 .

Whakanuia ngawari nga mea hou, kaore ano kia panuitia ma te taapiri i <span class="badge">nga hononga ki nga hononga, Bootstrap navs, me etahi atu.

Pouakauru42

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

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

Te tiango whaiaro

Karekau he tuemi hou, kaore ano kia panuitia, ka tiango noa nga tohu (ma te :emptykaiwhiriwhiri a CSS) mena karekau he ihirangi kei roto.

Hototahitanga whakawhiti-tirotiro

E kore nga tohu e tiango ake i roto i te Internet Explorer 8 na te mea karekau he tautoko mo te :emptykaiwhiriwhiri.

Ka urutau ki nga ahuatanga nav hohe

Kua whakauruhia nga momo hanga-i roto mo te whakatakoto tohu ki nga ahuatanga kaha i roto i nga whakatere pire.

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

He waahanga ngawari, ngawari ka taea te whakawhānui i te tauranga tirohanga katoa hei whakaatu i nga ihirangi matua ki to pae.

Kia ora, te ao!

He wae toa ngawari tenei, he waahanga ahua-jumbotron mo te aro nui ki nga korero, korero ranei.

Ako atu

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

Kia whanui te whanui o te jumbotron, me te kore he kokonga porotaka, waiho ki waho o nga .containers katoa, katahi ka tapiri he .containerroto.

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

He anga ngawari mo te h1mokowhiti tika me te wehewehe i nga waahanga o te ihirangi ki te wharangi. Ka taea te whakamahi i te huānga h1taunoa ' small, me te nuinga atu o nga waahanga (me etahi atu momo).

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

Whakaroahia te punaha matiti a Bootstrap me te waahanga karakōnui hei whakaatu ngawari i nga matiti o nga whakaahua, ataata, tuhinga, me etahi atu.

Mena kei te rapu koe mo te whakaaturanga Pinterest-rite o nga karakōnui o te teitei me te / ranei te whanui, ka hiahia koe ki te whakamahi i tetahi mono-tuatoru penei i te Masonry , Isotope , Salvattore ranei .

Tauira taunoa

Ma te taunoa, ka hangaia nga karakōnui a Bootstrap hei whakaatu i nga whakaahua hono me te tohu tohu iti.

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

Ihirangi ritenga

Ma te iti o te tohu tohu, ka taea te taapiri i nga momo ihirangi HTML penei i nga pane, nga kowae, nga paatene ranei ki nga karakōnui.

Tapanga karakōnui

Ka taea e koe te mahi, ka taea e koe te whakahaere, ka taea e koe te mahi. Donec id elit non mi porta gravida and eget metus. Ko te ingoa o nga mea katoa ka taea e koe.

Pātene Pātene

Tapanga karakōnui

Ka taea e koe te mahi, ka taea e koe te whakahaere, ka taea e koe te mahi. Donec id elit non mi porta gravida and eget metus. Ko te ingoa o nga mea katoa ka taea e koe.

Pātene Pātene

Tapanga karakōnui

Ka taea e koe te mahi, ka taea e koe te whakahaere, ka taea e koe te mahi. Donec id elit non mi porta gravida and eget metus. Ko te ingoa o nga mea katoa ka taea e koe.

Pātene Pātene

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

Whakaratohia nga karere urupare horopaki mo nga mahi a nga kaiwhakamahi me te ringaringa o nga karere matohi e waatea ana me te ngawari.

Tauira

Takaia tetahi kuputuhi me tetahi paatene whakakore i roto .alertme tetahi o nga karaehe horopaki e wha (hei tauira, .alert-success) mo nga karere matohi taketake.

Karekau he karaehe taunoa

Karekau he karaehe taunoa nga matohi, ko nga karaehe turanga me nga karaehe whakarereke anake. Ko te matohi hina taunoa kare e tino whai kiko, no reira me tohu koe i tetahi momo ma te karaehe horopaki. Whiriwhiria mai i te angitu, i nga korero, i te whakatupato, i te morearea ranei.

Ka pai! I angitu koe ki te panui i tenei karere mataara nui.

Mahunga ake! Me aro mai tenei matohi, engari ehara i te mea tino nui.

Whakatupato! He pai ake te tirotiro i a koe ano, kaore koe i te tino pai.

Aue kapo! Hurihia etahi mea ka ngana ki te tuku ano.

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

Matohi ka whakakorehia

Hangaia i runga i tetahi matohi ma te taapiri i te .alert-dismissiblepaatene whiriwhiri me te kati.

Ka hiahiatia he mono matohi JavaScript

Mo te tino mahi, matohi whakakorea, me whakamahi koe i te mono JavaScript matohi .

Whakatupato! He pai ake te tirotiro i a koe ano, kaore koe i te tino pai.

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

Me whakarite te whanonga tika puta noa i nga taputapu katoa

Me tino whakamahi i te <button>huānga me te data-dismiss="alert"huanga raraunga.

Hononga i roto i nga matohi

Whakamahia te .alert-linkkaraehe whaipainga ki te whakarato tere i nga hononga tae orite ki roto i tetahi matohi.

Ka pai! I angitu koe ki te panui i tenei karere mataara nui .

Mahunga ake! Me aro mai tenei matohi , engari ehara i te mea tino nui.

Whakatupato! He pai ake te tirotiro i a koe ano, kaore koe i te tino pai .

Aue kapo! Hurihia etahi mea ka ngana ki te tuku ano.

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

Whakaratohia he urupare hou mo te ahunga whakamua o te rerenga mahi, mahi ranei me nga pae ahunga whakamua ngawari engari ngawari.

Hototahitanga whakawhiti-tirotiro

Ka whakamahia e nga pae ahunga whakamua nga whakawhitinga CSS3 me nga pakiwaituhi hei whakatutuki i etahi o o raatau paanga. Ko enei ahuatanga kaore i te tautokohia i roto i te Internet Explorer 9 me raro ake, i nga putanga tawhito ake ranei o Firefox. Karekau a Opera 12 e tautoko ana i nga pakiwaituhi.

Kaupapahere Haumarutanga Ihirangi (CSP) hototahitanga

Mēnā he Kaupapahere Haumaru Ihirangi (CSP) tō paetukutuku karekau e whakaae style-src 'unsafe-inline', karekau e taea e koe te whakamahi i nga stylehuanga-a-roto hei tautuhi i nga whanui pae ahunga whakamua penei i o maatau tauira i raro nei. Ko nga tikanga rereke mo te tautuhi i nga whanui e hototahi ana ki nga CSP kaha ko te whakamahi i te JavaScript ritenga iti (e tautuhi ana element.style.width) te whakamahi ranei i nga akomanga CSS ritenga.

Tauira taketake

Pae ahunga whakamua taunoa.

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

Tangohia te <span>me .sr-onlyte akomanga mai i roto i te pae ahu whakamua hei whakaatu i te ōrau kitea.

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>

Ki te whakarite kia mau tonu te tuhinga tapanga ki te panui ahakoa mo te iti o te ōrau, whakaarohia te taapiri a min-widthki te pae ahunga whakamua.

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>

Nga momo horopaki

Ka whakamahia e nga pae ahu whakamua etahi o nga paatene me nga karaehe matohi mo nga momo rite.

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

Tāhekeheke

Ka whakamahi i te rōnaki hei hanga i te awenga purepure. Kaore i te waatea i IE9 me raro.

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

Hangarite

Taapirihia .activeki .progress-bar-stripedte whakakorikori i nga whiu matau ki maui. Kaore i te waatea i IE9 me raro.

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

Tāpae

Whakanohoia nga kaho maha ki roto i te kotahi .progresshei tapae.

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

Ko nga momo ahanoa maamaa mo te hanga momo momo waahanga (penei i nga korero rangitaki, Tweets, me etahi atu) e whakaatu ana i te taha maui- matau-tika ranei ki te taha o nga tuhinga tuhinga.

pāpāho taunoa

Ka whakaatu te pāpāho taunoa i te ahanoa pāpāho (whakaahua, ataata, ororongo) ki te taha maui, matau ranei o te poraka ihirangi.

Pane korero

Ka noho noa koe, i roto i te gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac kore vulputate fringilla. Donec lacinia congue felis in faucibus.

Pane korero

Ka noho noa koe, i roto i te gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac kore vulputate fringilla. Donec lacinia congue felis in faucibus.

Pane papapāho kohanga

Ka noho noa koe, i roto i te gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac kore vulputate fringilla. Donec lacinia congue felis in faucibus.

Pane korero

Ka noho noa koe, i roto i te gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Pane korero

Ka noho noa koe, i roto i te 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>

Kei te noho tonu nga karaehe .pull-left, .pull-righti whakamahia i mua hei waahanga o te waahanga pāpāho, engari kua whakakorehia mo taua whakamahinga mai i te v3.3.0. He rite tonu ki te .media-leftme te .media-right, engari .media-rightme tuu i muri i te .media-bodyi roto i te html.

Te tirohanga pāpāho

Ko nga whakaahua me etahi atu panui ka taea te whakararangi ki runga, waenga, raro ranei. Ko te taunoa he tiaaro ki runga.

Paapaho tiaaro runga

Ka noho noa koe, i roto i te gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac kore vulputate fringilla. Donec lacinia congue felis in faucibus.

Donec sed odio dui. Ko te ahua o te ahua o te ahua o te ahua o te whakapaipai. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Ko te hunga pāpāho whakatika-waenganui

Ka noho noa koe, i roto i te gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac kore vulputate fringilla. Donec lacinia congue felis in faucibus.

Donec sed odio dui. Ko te ahua o te ahua o te ahua o te ahua o te whakapaipai. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Ko nga papapāho tirohia ki raro

Ka noho noa koe, i roto i te gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac kore vulputate fringilla. Donec lacinia congue felis in faucibus.

Donec sed odio dui. Ko te ahua o te ahua o te ahua o te ahua o te whakapaipai. 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>

Rārangi pāpāho

Ma te iti o te tohu tohu, ka taea e koe te whakamahi i nga panui o roto i te raarangi (he pai mo nga miro korero, rarangi tuhinga ranei).

Pane korero

Ka noho noa koe, i roto i te gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Pane papapāho kohanga
Ka noho noa koe, i roto i te gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Pane papapāho kohanga
Ka noho noa koe, i roto i te gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Pane papapāho kohanga
Ka noho noa koe, i roto i te 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>

Ko nga roopu rarangi he waahanga ngawari me te kaha mo te whakaatu ehara i te mea ngawari noa nga rarangi o nga huānga, engari ko nga mea uaua me nga ihirangi ritenga.

Tauira taketake

Ko te röpü rärangi tino taketake he rärangi rärangi noa me ngä mea whakarärangi, me ngä karaehe tika. Hangaia ki runga me nga whiringa e whai ake nei, ko taau ake CSS ranei ina hiahiatia.

Kore noa odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum me te 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>

Tohu

Taapirihia te waahanga tohu ki tetahi rarangi tuemi roopu ka tuu aunoa ki te taha matau.

14Kore noa 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>

Tūemi hono

Whakahonohia nga mea rarangi roopu ma te whakamahi i nga tohu punga hei utu mo nga mea rarangi (ko te tikanga he matua <div>hei utu mo te <ul>). Kaore he hiahia mo nga matua takitahi mo ia huānga.

Kore noa odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Vestibulum me te 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>

Nga mea patene

Ko nga taonga roopu rarangi he patene hei utu mo nga mea rarangi (ko te tikanga he matua <div>hei utu mo te <ul>). Kaore he hiahia mo nga matua takitahi mo ia huānga. Kaua e whakamahia nga .btnkaraehe paerewa i konei.

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

Ko nga mea kua monokia

Tāpirihia .disabledki te .list-group-itema ki te whakahinahia kia kitea kua haua.

Kore noa odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Vestibulum me te 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>

Nga karaehe horopaki

Whakamahia nga karaehe horopaki ki te whakaahua i nga mea rarangi, taunoa, hono ranei. Kei roto hoki te .activekawanatanga.

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

Dapibus ac facilisis in Cras noho amet nibh libero Porta ac consectetur ac Vestibulum me te 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>

Ihirangi ritenga

Taapirihia tata ki tetahi HTML kei roto, ahakoa mo nga roopu rarangi hono penei i raro nei.

Whakarārangihia te upoko tūemi rōpū

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

Whakarārangihia te upoko tūemi rōpū

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

Whakarārangihia te upoko tūemi rōpū

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>

Ahakoa kaore e tika ana, i etahi wa ka hiahia koe ki te whakauru i to DOM ki roto i te pouaka. Mo era ahuatanga, whakamatauhia te waahanga panui.

Tauira taketake

Ma te taunoa, ko nga .panelmahi katoa ko te whakamahi i etahi taitapa taketake me te papaa hei whakauru i etahi ihirangi.

Tauira papaa taketake

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

Paewhiri whai pane

Me ngawari te taapiri i tetahi ipu pane ki to panui me te .panel-heading. Ka taea hoki e koe te whakauru i tetahi <h1>- <h6>me tetahi .panel-titleakomanga hei taapiri i tetahi pane kua tohua i mua. Heoi, ko nga rahi momotuhi o <h1>- <h6>kua whakakorea e .panel-heading.

Mo te tae hono tika, me tuhi nga hononga ki nga upoko ki roto .panel-title.

Pane pane kahore he taitara

Te ihirangi paewhiri

taitara paewhiri

Te ihirangi paewhiri

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

Paewhiri whai hiku

Patene takai, tuhinga tuarua ranei ki roto .panel-footer. Kia mahara kaore nga hiku o te panui e tuku i nga tae me nga taitapa i te wa e whakamahi ana i nga rereketanga o te horopaki na te mea ehara i te mea kei te papa o mua.

Te ihirangi paewhiri

Hiku Paewhiri

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

Nga momo horopaki

Pērā i ērā atu wāhanga, māmā ake te whakahāngai i te paewhiri ki tētahi horopaki mā te tāpiri i tētahi o ngā akomanga āhua horopaki.

taitara paewhiri

Te ihirangi paewhiri

taitara paewhiri

Te ihirangi paewhiri

taitara paewhiri

Te ihirangi paewhiri

taitara paewhiri

Te ihirangi paewhiri

taitara paewhiri

Te ihirangi paewhiri

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

Tāpirihia he taitapa-kore ki .tableroto i te papanga kia pai te hoahoa. Mena he .panel-body, ka taapirihia he taitapa taapiri ki te tihi o te tepu hei wehe.

Pane pane

Ko etahi ihirangi paewhiri taunoa kei konei. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Ko te ingoa o nga mea katoa ka taea e koe.

#	Ingoa Tuatahi	Ingoa Whakamutunga	Ingoa Kaiwhakamahi
1	Mark	Otto	@mdo
2	ko Hakopa	Toronton	@ngako
3	Larry	te 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>

Mena karekau he tinana röpü, ka nuku te wähanga mai i te pane röpü ki te tepu me te kore e mutu.

Pane pane

#	Ingoa Tuatahi	Ingoa Whakamutunga	Ingoa Kaiwhakamahi
1	Mark	Otto	@mdo
2	ko Hakopa	Toronton	@ngako
3	Larry	te Manu	@twitter

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

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

Me nga roopu rarangi

Te whakauru ngawari ki nga roopu rarangi whanui- katoa ki roto i tetahi panui.

Pane pane

Ko etahi ihirangi paewhiri taunoa kei konei. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Ko te ingoa o nga mea katoa ka taea e koe.

Kore noa odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum me te 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>

Whakaaetia nga kaitirotiro ki te whakatau i nga rahinga ataata, whakaatakiriata ranei i runga i te whanui o te paraka kei roto ma te hanga i tetahi owehenga tuuturu ka tauine tika ki runga i tetahi taputapu.

Ka whakamahia tika nga ture ki te <iframe>, <embed>, <video>, me <object>nga huānga; ka taea te whakamahi i te karaehe uri marama .embed-responsive-itemina hiahia ana koe ki te whakaorite i te hanga mo etahi atu huanga.

Aki-Aki! Kaore koe e hiahia ki te whakauru frameborder="0"i roto i to <iframe>s i te mea ka whakakorea e matou tera mo koe.

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

Taunoa pai

Whakamahia te puna hei awe ngawari ki runga i tetahi huānga kia hoatu he awe whakauru.

Titiro, kei roto ahau i te puna!

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

Nga karaehe whiriwhiri

Whakahaerehia te papa me nga kokonga porotaka me nga karaehe whakarereke e rua.

Titiro, kei roto ahau i te puna nui!

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

Titiro, kei roto ahau i te puna iti!

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

Waehanga

Glyphicons

Nga reta e waatea ana

Me pehea te whakamahi

Kaua e uru ki etahi atu waahanga

Mo te whakamahi noa i nga huānga kau

Te huri i te waahi momotuhi ata

Nga tohu e waatea ana

Tauira

Whakataka

Tauira

Tirohanga

Ka hiahiatia etahi atu tuunga

Kua whakakorehia te .pull-righttirohanga

Pane

Kaiwehewehe

Kua monoa nga mea tahua

Nga roopu patene

Ko nga aki utauta me nga pouvers i roto i nga roopu paatene me whakarite motuhake

Me whakarite kia tika roleka hoatu he tapanga

Tauira taketake

Paeutauta paatene

Te rahinga

Kohanga

Te rerekētanga poutū

Nga roopu patene tika

Te whakahaere i nga taitapa

IE8 me nga taitapa

Me <a>nga huānga

Ko nga hononga hei patene

Me <button>nga huānga

Patene takaiho

Te whakawhirinaki monomai

Patene takaiho kotahi

Wehehia nga paatene takaiho

Te rahinga

Rerekētanga whakaheke

Rōpū whakauru

Kuputuhi <input>anake

Ko nga aki utauta me nga pouvers i roto i nga roopu whakauru me whakarite motuhake

Kaua e uru ki etahi atu waahanga

Tāpiri tapanga i nga wa katoa

Tauira taketake

Te rahinga

Pouakataki me nga taapiri reo irirangi

Pātene tāpiri

Patene me nga takaiho

Patene kua wehea

Patene maha

Navs

Ma te whakamahi i nga navs mo nga panui ripa me whakauru nga ripa JavaScript

Hangaia nga navs hei whakaterenga uru

Ripa

Nga pire

Ka tika

Safari me nga navs tika

Hononga haua

Ko te taumahinga hono kaore i pa

Te whakamahi takaiho

Ripa whai takaiho

Nga pire me nga takaiho

Navbar

Paetukutuku taunoa

Nga ihirangi puhake

Ka hiahiatia te mono JavaScript

Te huri i te waahi wehenga navbar pūkoro kua tiango

Whakaaheitia nga pae whakatere

Whakaahua tohu

Puka

Nga whakatupato taputapu pūkoro

Tāpiri tapanga i nga wa katoa

Patene

Te whakamahinga horopaki-motuhake

Kuputuhi

Hononga kore-nav

Tirohanga wae

Whakatika tika i nga waahanga maha

Ka mau ki runga

E hiahiatia ana te whakakakahu tinana

Ka mau ki raro

Kua whakakorehia te `.pull-right`tirohanga

Me whakarite kia tika `role`ka hoatu he tapanga

Me `<a>`nga huānga

Me `<button>`nga huānga

Kuputuhi `<input>`anake