Glyphicons

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

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

Whakataka

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

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>

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.

Ka hiahiatia etahi atu tuunga

Ka tuu aunoa nga takaiho ma te CSS i roto i te rere noa o te tuhinga. Ko te tikanga ka poroa e nga matua etahi overflowtaonga ka puta mai ranei i waho o te tauranga tirohanga. Whakatauhia enei take i a koe ano ka puta.

Kua whakakorehia te .pull-righttirohanga

Mai i te v3.1.0, kua whakakorehia e matou .pull-rightnga tahua takaiho. Hei tiaaro-matau i te tahua, whakamahia .dropdown-menu-right. Ko nga wahanga nav tiaaro-matau i te pae whakatere ka whakamahi i te momo whakaurunga o tenei karaehe ki te whakatiaro aunoa i te tahua. Hei whakakore, whakamahia .dropdown-menu-left.

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

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>

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>

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>

Nga roopu patene

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

Paeutauta paatene

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.

<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 na te mea kei te tautoko matou i nga whakahekenga 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>

Patene takaiho

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>

Rōpū whakauru

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.

@

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

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>

Navs

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.

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>

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>

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>

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>

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>

Navbar

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:

  1. Whakaitihia te nui, te whanui ranei o nga taonga pae whakatere.
  2. Huna etahi tuemi pae whakatere ki etahi rahi mata ma te whakamahi i nga karaehe whaipainga urupare .
  3. 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.

Ka hiahiatia te mono JavaScript

Mena kua monoa te JavaScript me te whaiti te tauranga tirohanga ka hinga te pae whakatere, karekau e taea te whakawhanui i te pae whakatere me te tiro i nga ihirangi kei roto i te .navbar-collapse.

Ko te navbar urupare me whakauru te mono tiango ki to putanga o Bootstrap.

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

Ka tiango te pae whakatere ki tana tirohanga pūkoro poutū ina he whaiti te tauranga tiro i te @grid-float-breakpoint, ka toro atu ki tana tirohanga kore-pukoro whakapae ina he iti rawa @grid-float-breakpointte whanui o te tauranga tirohanga. Whakaritea tenei taurangi i te puna Iti hei whakahaere i te wa ka tiango/whakaroha te pae whakatere. Ko te uara taunoa 768px(te mata "iti" ranei "papa" iti rawa).

Whakaaheitia nga pae whakatere

Me mohio ki te whakamahi i tetahi <nav>huānga, ki te whakamahi ranei i tetahi huānga nui ake penei i te <div>, taapirihia he role="navigation"ki ia pae whakaterenga kia tino kitea hei rohe tohu whenua mo nga kaiwhakamahi hangarau awhina.

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

Nga whakatupato taputapu pūkoro

He whakamaarama mo te whakamahi i nga mana puka i roto i nga huānga kua whakaritea i runga i nga taputapu pūkoro. Tirohia a maatau tuhinga tautoko tirotiro mo nga taipitopito.

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>

Te whakamahinga horopaki-motuhake

Ka rite ki nga karaehe paerewa paerewa , .navbar-btnka taea te whakamahi <a>me <input>nga huānga. Heoi, kaua .navbar-btne whakamahia nga karaehe paatene paerewa ki <a>nga huānga o roto .navbar-nav.

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.

Whakatika tika i nga waahanga maha

Navbars i tenei wa he herenga me nga .navbar-rightkaraehe maha. Kia tika te mokowā ihirangi, ka whakamahia e matou te tawhē tōraro ki te .navbar-righthuānga whakamutunga. Ina he maha nga huānga e whakamahi ana i taua karaehe, kare enei tawhē e mahi i runga i te whakaaro.

Ka hoki ano tatou i tenei ka taea e tatou te tuhi ano i taua waahanga ki te v4.

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>

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>

Tapanga

Tauira

Tauira pane Hou

Tauira pane Hou

Tauira pane Hou

Tauira pane Hou

Tauira pane Hou
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 .

Tohu

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>

Jumbotron

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>

Pane wharangi

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>

Karakōnui

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.

100%x200

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

100%x200

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

100%x200

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>

Matohi

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.

<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

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

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

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

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

Pae whakamua

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.

60% Kua oti
<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.

40% Kua oti (angitu)
20% Kua oti
60% Kua oti (whakatupato)
80% Kua oti (te kino)
<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.

40% Kua oti (angitu)
20% Kua oti
60% Kua oti (whakatupato)
80% Kua oti (te kino)
<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.

45% Kua oti
<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.

35% Kua oti (angitu)
20% Kua oti (whakatupato)
10% Kua oti (te kino)
<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>

Ahanoa pāpāho

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>

Rōpū rārangi

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.

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

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

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

Paewhiri

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>

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

Urupare tāmau

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>

puna

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>