Glyphicons

Misy glyphs

Ahitana glyphs mihoatra ny 250 amin'ny endrika endri-tsoratra avy amin'ny set Glyphicon Halflings. Ny Glyphicons Halflings dia matetika tsy misy maimaim-poana, fa ny mpamorona azy dia nanome azy ireo maimaim-poana ho an'ny Bootstrap. Ho fisaorana anao dia mangataka rohy mankany amin'ny Glyphicons ihany izahay raha azo atao.

  • glyphicon glyphicon-asterisk
  • glyphicon glyphicon-plus
  • glyphicon glyphicon-euro
  • glyphicon glyphicon-eur
  • glyphicon glyphicon-minus
  • glyphicon glyphicon-cloud
  • glyphicon glyphicon-valopy
  • glyphicon glyphicon-pencil
  • glyphicon glyphicon-glass
  • glyphicon glyphicon-mozika
  • glyphicon glyphicon-search
  • glyphicon glyphicon-fo
  • glyphicon glyphicon-star
  • glyphicon glyphicon-star-empty
  • glyphicon glyphicon-user
  • glyphicon glyphicon-film
  • glyphicon glyphicon-th-large
  • glyphicon glyphicon-th
  • glyphicon glyphicon-th-list
  • glyphicon glyphicon-ok
  • glyphicon glyphicon-esory
  • glyphicon glyphicon-zoom-in
  • glyphicon glyphicon-zoom-out
  • glyphicon glyphicon-off
  • glyphicon glyphicon-signal
  • glyphicon glyphicon-cog
  • glyphicon glyphicon-fako
  • glyphicon glyphicon-trano
  • glyphicon glyphicon-file
  • glyphicon glyphicon-time
  • glyphicon glyphicon-road
  • glyphicon glyphicon-download-alt
  • glyphicon glyphicon-download
  • glyphicon glyphicon-upload
  • glyphicon glyphicon-inbox
  • glyphicon glyphicon-play-circle
  • glyphicon glyphicon-avereno
  • glyphicon glyphicon-refresh
  • glyphicon glyphicon-list-alt
  • glyphicon glyphicon-lock
  • glyphicon glyphicon-flag
  • glyphicon glyphicon-headphones
  • glyphicon glyphicon-volume-off
  • glyphicon glyphicon-volume-down
  • glyphicon glyphicon-volume-up
  • glyphicon glyphicon-qrcode
  • glyphicon glyphicon-barcode
  • glyphicon glyphicon-tag
  • glyphicon glyphicon-tags
  • glyphicon glyphicon-boky
  • glyphicon glyphicon-bookmark
  • glyphicon glyphicon-print
  • glyphicon glyphicon-camera
  • glyphicon glyphicon-font
  • glyphicon glyphicon-bold
  • glyphicon glyphicon-italic
  • glyphicon glyphicon-text-haavo
  • glyphicon glyphicon-text-width
  • glyphicon glyphicon-align-left
  • glyphicon glyphicon-align-center
  • glyphicon glyphicon-align-right
  • glyphicon glyphicon-align-justify
  • glyphicon glyphicon-list
  • glyphicon glyphicon-indent-left
  • glyphicon glyphicon-indent-right
  • glyphicon glyphicon-facetime-video
  • glyphicon glyphicon-picture
  • glyphicon glyphicon-map-marker
  • glyphicon glyphicon-adjust
  • glyphicon glyphicon-tint
  • glyphicon glyphicon-edit
  • glyphicon glyphicon-share
  • glyphicon glyphicon-check
  • glyphicon glyphicon-move
  • glyphicon glyphicon-step-backward
  • glyphicon glyphicon-fast-backward
  • glyphicon glyphicon-backward
  • glyphicon glyphicon-play
  • glyphicon glyphicon-pause
  • glyphicon glyphicon-stop
  • glyphicon glyphicon-forward
  • glyphicon glyphicon-faingana-mandroso
  • glyphicon glyphicon-dingana-mandroso
  • glyphicon glyphicon-eject
  • glyphicon glyphicon-chevron-left
  • glyphicon glyphicon-chevron-right
  • glyphicon glyphicon-plus-sign
  • glyphicon glyphicon-minus-sign
  • glyphicon glyphicon-remove-sign
  • glyphicon glyphicon-ok-sign
  • glyphicon glyphicon-question-sign
  • glyphicon glyphicon-info-sign
  • glyphicon glyphicon-screenshot
  • glyphicon glyphicon-remove-circle
  • glyphicon glyphicon-ok-circle
  • glyphicon glyphicon-ban-circle
  • glyphicon glyphicon-arrow-ankavia
  • glyphicon glyphicon-arrow-right
  • glyphicon glyphicon-arrow-up
  • glyphicon glyphicon-arrow-down
  • glyphicon glyphicon-share-alt
  • glyphicon glyphicon-resize-feno
  • glyphicon glyphicon-resize-kely
  • glyphicon glyphicon-exclamation-sign
  • glyphicon glyphicon-fanomezana
  • glyphicon glyphicon-leaf
  • glyphicon glyphicon-fire
  • glyphicon glyphicon-maso-misokatra
  • glyphicon glyphicon-maso-akaiky
  • glyphicon glyphicon-warning-sign
  • glyphicon glyphicon-plane
  • glyphicon glyphicon-calendar
  • glyphicon glyphicon-random
  • glyphicon glyphicon-comment
  • glyphicon glyphicon-magnet
  • glyphicon glyphicon-chevron-up
  • glyphicon glyphicon-chevron-down
  • glyphicon glyphicon-retweet
  • glyphicon glyphicon-shopping-cart
  • glyphicon glyphicon-folder-akatona
  • glyphicon glyphicon-folder-misokatra
  • glyphicon glyphicon-resize-vertical
  • glyphicon glyphicon-resize-horizontal
  • glyphicon glyphicon-hdd
  • glyphicon glyphicon-bullhorn
  • glyphicon glyphicon-bell
  • glyphicon glyphicon-certificate
  • glyphicon glyphicon-thumbs-up
  • glyphicon glyphicon-thumbs-down
  • glyphicon glyphicon-hand-right
  • glyphicon glyphicon-tanana-havia
  • glyphicon glyphicon-hand-up
  • glyphicon glyphicon-hand-down
  • glyphicon glyphicon-circle-arrow-right
  • glyphicon glyphicon-circle-arrow-ankavia
  • glyphicon glyphicon-circle-arrow-up
  • glyphicon glyphicon-circle-arrow-down
  • glyphicon glyphicon-globe
  • glyphicon glyphicon-wrench
  • glyphicon glyphicon-asa
  • glyphicon glyphicon-sivana
  • glyphicon glyphicon-briefcase
  • glyphicon glyphicon-fullscreen
  • glyphicon glyphicon-dashboard
  • glyphicon glyphicon-paperclip
  • glyphicon glyphicon-fo-foana
  • glyphicon glyphicon-rohy
  • glyphicon glyphicon-telefaonina
  • glyphicon glyphicon-pushpin
  • glyphicon glyphicon-usd
  • glyphicon glyphicon-gbp
  • glyphicon glyphicon-sort
  • glyphicon glyphicon-sort-by-alphabet
  • glyphicon glyphicon-sort-by-alphabet-alt
  • glyphicon glyphicon-sort-by-order
  • glyphicon glyphicon-sort-by-order-alt
  • glyphicon glyphicon-sort-by-attributes
  • glyphicon glyphicon-sort-by-attributes-alt
  • glyphicon glyphicon-tsy voamarika
  • glyphicon glyphicon-expand
  • glyphicon glyphicon-collapse-down
  • glyphicon glyphicon-collapse-up
  • glyphicon glyphicon-log-in
  • glyphicon glyphicon-flash
  • glyphicon glyphicon-log-out
  • glyphicon glyphicon-new-window
  • glyphicon glyphicon-record
  • glyphicon glyphicon-save
  • glyphicon glyphicon-open
  • glyphicon glyphicon-voavonjy
  • glyphicon glyphicon-import
  • glyphicon glyphicon-export
  • glyphicon glyphicon-send
  • glyphicon glyphicon-floppy-disk
  • glyphicon glyphicon-floppy-save
  • glyphicon glyphicon-floppy-remove
  • glyphicon glyphicon-floppy-save
  • glyphicon glyphicon-floppy-open
  • glyphicon glyphicon-carte de crédit
  • glyphicon glyphicon-transfer
  • glyphicon glyphicon-cutlery
  • glyphicon glyphicon-header
  • glyphicon glyphicon-compressed
  • glyphicon glyphicon-earphone
  • glyphicon glyphicon-phone-alt
  • glyphicon glyphicon-tilikambo
  • glyphicon glyphicon-stats
  • glyphicon glyphicon-sd-video
  • glyphicon glyphicon-hd-video
  • glyphicon glyphicon-subtitles
  • glyphicon glyphicon-feo-stereo
  • glyphicon glyphicon-sound-dolby
  • glyphicon glyphicon-sound-5-1
  • glyphicon glyphicon-sound-6-1
  • glyphicon glyphicon-sound-7-1
  • glyphicon glyphicon-copyright-mark
  • glyphicon glyphicon-registration-mark
  • glyphicon glyphicon-cloud-download
  • glyphicon glyphicon-cloud-upload
  • glyphicon glyphicon-tree-conifer
  • glyphicon glyphicon-tree-deciduous
  • glyphicon glyphicon-cd
  • glyphicon glyphicon-save-file
  • glyphicon glyphicon-open-file
  • glyphicon glyphicon-level-up
  • glyphicon glyphicon-copy
  • glyphicon glyphicon-paste
  • glyphicon glyphicon-alert
  • glyphicon glyphicon-equalizer
  • glyphicon glyphicon-king
  • glyphicon glyphicon-queen
  • glyphicon glyphicon-pawn
  • glyphicon glyphicon-bishop
  • glyphicon glyphicon-knight
  • glyphicon glyphicon-baby-formula
  • glyphicon glyphicon-day
  • glyphicon glyphicon-blackboard
  • glyphicon glyphicon-fandriana
  • glyphicon glyphicon-apple
  • glyphicon glyphicon-famafana
  • glyphicon glyphicon-hourglass
  • glyphicon glyphicon-jiro
  • 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-nanandrana
  • glyphicon glyphicon-education
  • glyphicon glyphicon-option-horizontal
  • glyphicon glyphicon-option-vertical
  • glyphicon glyphicon-menu-hamburger
  • glyphicon glyphicon-modal-window
  • glyphicon glyphicon-oil
  • glyphicon glyphicon-grain
  • glyphicon glyphicon-solomaso
  • glyphicon glyphicon-text-size
  • glyphicon glyphicon-text-color
  • glyphicon glyphicon-text-background
  • glyphicon glyphicon-object-align-top
  • glyphicon glyphicon-object-align-bottom
  • glyphicon glyphicon-object-align-horizontal
  • glyphicon glyphicon-object-align-left
  • glyphicon glyphicon-object-align-vertical
  • glyphicon glyphicon-object-align-right
  • glyphicon glyphicon-triangle-right
  • glyphicon glyphicon-triangle-havia
  • glyphicon glyphicon-triangle-ambany
  • glyphicon glyphicon-triangle-top
  • glyphicon glyphicon-console
  • glyphicon glyphicon-superscript
  • glyphicon glyphicon-subscript
  • glyphicon glyphicon-menu-ankavia
  • glyphicon glyphicon-menu-right
  • glyphicon glyphicon-menu-down
  • glyphicon glyphicon-menu-up

Ny fomba fampiasana

Noho ny antony fampisehoana, ny kisary rehetra dia mitaky kilasy fototra sy kilasy kisary tsirairay. Raha hampiasaina dia apetraho amin'ny toerana rehetra ity kaody manaraka ity. Ataovy azo antoka ny mamela toerana eo anelanelan'ny kisary sy ny lahatsoratra mba hahazoana padding mety.

Aza mifangaro amin'ny singa hafa

Tsy azo atambatra mivantana amin'ny singa hafa ny kilasy kisary. Tsy tokony hampiasaina miaraka amin'ny kilasy hafa amin'ny singa iray ihany izy ireo. Fa kosa, ampio nested <span>ary ampiharo ny kilasy kisary amin'ny <span>.

Fampiasana amin'ny singa foana

Ny kilasin'ny kisary dia tsy tokony ampiasaina afa-tsy amin'ny singa tsy misy atiny lahatsoratra ary tsy misy singa zaza.

Fanovana ny toerana misy endritsoratra kisary

Bootstrap dia mihevitra fa ho hita ao amin'ny ../fonts/lahatahiry ny rakitra endri-tsoratra icon, mifandraika amin'ny rakitra CSS natambatra. Ny famindràna na fanovana anarana ireo rakitra endri-tsoratra dia midika hoe fanavaozana ny CSS amin'ny iray amin'ireo fomba telo:

  • Ovay ny @icon-font-pathsy/na @icon-font-nameny fari-piainana ao amin'ny loharano Less files.
  • Ampiasao ny safidy URLs omen'ny Less compiler.
  • Hanova ny url()lalana ao amin'ny CSS natambatra.

Ampiasao izay safidy mety indrindra amin'ny fananganana fampandrosoana manokana anao.

Kisary azo idirana

Ny dikan-teny maoderina amin'ny teknolojia manampy dia hanambara votoaty noforonin'ny CSS, ary koa ireo tarehin-tsoratra Unicode manokana. Mba hialana amin'ny famoahana tsy voahevitra sy mampisafotofoto amin'ny mpamaky efijery (indrindra raha ampiasaina amin'ny haingo fotsiny ny kisary), dia afeninay amin'ny aria-hidden="true"toetra.

Raha mampiasa kisary ianao mba hampitana hevitra (fa tsy ho singa haingon-trano fotsiny), dia ataovy izay hahazoana antoka fa ampitaina amin'ny teknolojia manampy ihany koa io dikany io – ohatra, ampidiro votoaty fanampiny, miafina amin'ny maso miaraka amin'ny .sr-onlykilasy.

Raha mamorona fanaraha-maso tsy misy lahatsoratra hafa ianao (toy <button>ny kisary tsy misy afa-tsy kisary), dia tokony hanome votoaty hafa foana ianao hamantarana ny tanjon'ny fanaraha-maso, mba hahatonga izany ho tonga saina amin'ny mpampiasa ny teknolojia manampy. Amin'ity tranga ity, azonao atao ny manampy aria-labeltoetra iray amin'ny fanaraha-maso.

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

OHATRA

Ampiasao izy ireo amin'ny bokotra, vondrona bokotra ho an'ny fitaovana, fitetezana, na fampidirana endrika efa voaomana.

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

Kisary ampiasaina amin'ny fanairana mba hampita fa hafatra diso izany, miaraka amin'ny .sr-onlylahatsoratra fanampiny hampita izany hevitra izany ho an'ireo mpampiasa ny teknolojia manampy.

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

Dropdowns

Toggleable, menu contextual hanehoana lisitry ny rohy. Natao hifampiraharaha tamin'ny plugin JavaScript dropdown .

Afangaro ao anaty .dropdown, na singa iray hafa manambara ny position: relative;. Avy eo ampio ny HTML menu.

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

Ny menio midina dia azo ovaina hanitarana ambony (fa tsy midina) amin'ny fanampiana .dropupny ray aman-dreny.

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

Amin'ny alàlan'ny default, apetraka ho azy 100% avy any ambony sy eo amin'ny ilany havia amin'ny ray aman-dreniny ny menio midina. Ampio .dropdown-menu-rightamin'ny .dropdown-menurindran-kavanana ny menio midina.

Mety mitaky toerana fanampiny

Apetraka ho azy amin'ny alàlan'ny CSS ao anatin'ny fikorianan'ny antontan-taratasy ny dropdowns. Midika izany fa mety hesorin'ny ray aman-dreny manana overflowfananana sasany na miseho ivelan'ny sisin'ny seranan-tsambo ny fidina. Resaho samirery ireo olana ireo rehefa mipoitra.

Fandrindrana .pull-righttsy ampiasaina

Tamin'ny v3.1.0, dia nitsahatra tsy .pull-rightnampiasa ny menio midina izahay. Mba hanitsy ny menio iray, ampiasao ny .dropdown-menu-right. Ny singa nav mirindra havanana ao amin'ny navbar dia mampiasa dikan-teny mixin amin'ity kilasy ity mba hampifanaraka ho azy ny sakafo. Mba hanesorana azy dia ampiasao .dropdown-menu-left.

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

Manampia lohapejy hanamarihana ny ampahan'ny hetsika ao amin'ny menio midina.

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

Manampia fizarazarana hanasaraka andiam-pifandraisana ao anaty menio midina.

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

Ampidiro .disabledao <li>amin'ny dropdown mba hanesorana ny rohy.

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

Vondrona bokotra

Manangona bokotra maromaro miaraka amin'ny tsipika tokana miaraka amin'ny vondrona bokotra. Ampio amin'ny onjam-peo JavaScript tsy azo atao sy ny fitondran-tena amin'ny endrika boaty miaraka amin'ny plugins bokotra .

Mitaky toe-javatra manokana ny toro-lalana & popover amin'ny vondrona bokotra

Rehefa mampiasa toro-hevitra na popover amin'ny singa ao anatin'ny .btn-group, dia tsy maintsy mamaritra ny safidy container: 'body'hialana amin'ny voka-dratsy tsy ilaina ianao (toy ny fitomboan'ny singa mivelatra sy/na very ny zorony boribory rehefa mipoitra ny tendron'ny fitaovana na popover).

Hamarino tsara roleary omeo marika

Mba hahafahan'ny teknolojia manampy - toy ny mpamaky efijery - hampita fa misy andiana bokotra mivondrona, rolemila omena toetra mifanaraka amin'izany. Ho an'ny vondrona bokotra, ity dia role="group", raha tokony hanana role="toolbar".

Ny singa iray dia vondrona izay tsy misy afa-tsy fanaraha-maso tokana (ohatra ny vondrona bokotra voamarina misy <button>singa) na fidina.

Fanampin'izany, tokony homena marika mazava ny vondrona sy ny barazy, satria ny ankamaroan'ny teknolojia manampy dia tsy hanambara izany, na dia eo aza ny fisian'ny roletoetra marina. Ao amin'ireo ohatra omena eto dia mampiasa aria-label, fa azo aria-labelledbyampiasaina ihany koa ny safidy hafa.

Ohatra fototra

Fonosy bokotra maromaro miaraka amin'ny .btnin .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>

bokotra Toolbar

Ampifandraiso <div class="btn-group">amin'ny a <div class="btn-toolbar">ho an'ny singa sarotra kokoa.

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

Sizing

Raha tokony hampihatra kilasy fandrefesana bokotra amin'ny bokotra tsirairay ao anaty vondrona iray, ampio fotsiny .btn-group-*ny tsirairay .btn-group, ao anatin'izany ny fanaingoana vondrona maromaro.




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

akany

Apetraho .btn-groupao anatin'ny iray hafa .btn-groupraha tianao ny menio midina mifangaro amin'ny bokotra maromaro.

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

Variation mitsangana

Ataovy miseho mitsangana mitsangana fa tsy mitsivalana ny bokotra maromaro. Tsy tohana eto ny fanalana bokotra fisarahana.

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

Vondrona bokotra voamarina

Manaova andiana bokotra mivelatra amin'ny habeny mitovy habe amin'ny sakan'ny ray aman-dreniny. Miasa miaraka amin'ny fidinana bokotra ao anatin'ny vondrona bokotra ihany koa.

Fikarakarana sisintany

Noho ny HTML sy CSS manokana ampiasaina hanamarinana ny bokotra (izany hoe display: table-cell), dia avo roa heny ny sisin-tany eo anelanelan'izy ireo. Ao amin'ny vondrona bokotra mahazatra, margin-left: -1pxdia ampiasaina hametahana ny sisin-tany fa tsy manala azy ireo. Na izany aza, margintsy miasa amin'ny display: table-cell. Vokatr'izany, miankina amin'ny fanamboaranao amin'ny Bootstrap, azonao atao ny manaisotra na mandoko indray ny sisin-tany.

IE8 sy sisintany

Internet Explorer 8 dia tsy manome sisintany amin'ny bokotra ao anaty vondrona bokotra voamarina, na eo amin'ny singa <a>na <button>singa. Mba hialana amin'izany dia aforeto amin'ny bokotra iray hafa ny bokotra tsirairay .btn-group.

Jereo ny #12476 raha mila fanazavana fanampiny.

Miaraka amin'ny <a>singa

Fenoy andiana .btns fotsiny amin'ny .btn-group.btn-group-justified.

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

Rohy miasa toy ny bokotra

Raha <a>ampiasaina toy ny bokotra ireo singa - miteraka fampiasa ao anaty pejy, fa tsy mandeha mankany amin'ny antontan-taratasy na fizarana hafa ao anatin'ny pejy ankehitriny - dia tokony homena role="button".

Miaraka amin'ny <button>singa

Raha hampiasa vondrona bokotra nohamarinina miaraka amin'ny <button>singa dia tsy maintsy fonosinao ao anaty vondrona bokotra ny bokotra tsirairay . Ny ankamaroan'ny mpitety tranonkala dia tsy mampihatra araka ny tokony ho izy ny CSS-ntsika mba hanamarinana ireo <button>singa, fa satria manohana ny fidina bokotra izahay, dia afaka miasa amin'izany izahay.

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

Bokotra midina

Mampiasà bokotra iray hanetsika ny menio midina amin'ny alàlan'ny fametrahana azy ao anatin'ny iray .btn-groupary manome ny marika mena.

Fiankinan-doha amin'ny plugin

Ny fanidiana bokotra dia mitaky ny fampidirana plugin ao amin'ny kinova Bootstrap anao.

Bokotra tokana midina

Avadika bokotra iray ho toggle midina miaraka amin'ny fanovana marika fototra.

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

Fizarana bokotra midina

Mitovy amin'izany koa, mamoròna fidinana bokotra misaraka miaraka amin'ny fanovana marika mitovy, miaraka amin'ny bokotra misaraka ihany.

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

Sizing

Ny fanidiana bokotra dia miasa amin'ny bokotra amin'ny habe rehetra.

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

Variation dropup

Ampidiro ny menio midina eo ambonin'ny singa amin'ny fanampiana .dropupny ray aman-dreny.

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

Vondrona fampidirana

Hanitatra ny fifehezana endrika amin'ny alalan'ny fampidirana lahatsoratra na bokotra mialoha, aorian'ny, na amin'ny lafiny roa amin'ny lahatsoratra mifototra amin'ny lahatsoratra <input>. Ampiasao .input-groupmiaraka amin'ny .input-group-addonna .input-group-btnmba hanomanana na hampiditra singa amin'ny singa tokana .form-control.

Textuel <input>ihany

Fadio ny mampiasa <select>singa eto fa tsy azo atao tanteraka amin'ny navigateur WebKit.

Fadio ny mampiasa <textarea>singa eto rowsfa tsy hohajaina ny toetrany amin'ny toe-javatra sasany.

Mitaky toe-javatra manokana ny toro-lalana & popover amin'ny vondrona fampidirana

Rehefa mampiasa toro-hevitra na popover amin'ny singa ao anatin'ny .input-group, dia tsy maintsy mamaritra ny safidy container: 'body'hialana amin'ny voka-dratsy tsy ilaina ianao (toy ny fitomboan'ny singa mivelatra sy/na very ny zorony boribory rehefa mipoitra ny tendron'ny fitaovana na popover).

Aza mifangaro amin'ny singa hafa

Aza afangaro mivantana amin'ny vondrona fampidirana na vondrona tsanganana an-jorony. Alefaso kosa ny vondrona fampidirana ao anatin'ny vondrona endrika na singa mifandraika amin'ny grid.

Ampio etikety foana

Ny mpamaky efijery dia hanana olana amin'ny endrikao raha tsy mampiditra marika ho an'ny fidirana rehetra ianao. Ho an'ireo vondrona fampidirana ireo, alaivo antoka fa misy marika na fiasa fanampiny ampitaina amin'ny teknolojia manampy.

Ny teknika marina hampiasaina (singa hita maso <label>, <label>singa miafina amin'ny fampiasana ny .sr-onlykilasy, na fampiasana ny aria-label, aria-labelledby, aria-describedby, titlena placeholdertoetra) sy izay fampahalalana fanampiny ilaina hampitaina dia hiovaova arakaraka ny karazana widget interface tsara ampiharinao. Ny ohatra ato amin'ity fizarana ity dia manome soso-kevitra vitsivitsy, fomba fiasa manokana.

Ohatra fototra

Asio fanampiny na bokotra iray eo amin'ny andaniny roa amin'ny fampidirana. Azonao atao koa ny mametraka iray amin'ny lafiny roa amin'ny fampidirana.

Tsy manohana fanampiny fanampiny ( .input-group-addonna .input-group-btn) amin'ny lafiny iray izahay.

Tsy manohana endrika-contrôle maromaro ao anaty vondrona fampidirana tokana izahay.

@

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

Sizing

Ampidiro amin'ny tenany ny kilasy fandrefesana endrika .input-groupary ny atiny ao anatiny dia hiova ho azy - tsy ilaina ny mamerina ny kilasy fanaraha-maso ny endrika amin'ny singa tsirairay.

@

@

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

Boxes sy radio addons

Apetraho ao anatin'ny addon an'ny vondrona fampidirana fa tsy lahatsoratra.

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

Addons bokotra

Somary hafa ny bokotra ao amin'ny vondrona fampidirana ary mitaky ambaratonga fanampiny fanatobiana. Raha tokony ho .input-group-addon, dia mila mampiasa ianao .input-group-btnhamehezana ny bokotra. Ilaina izany noho ny fomba fitetezana default izay tsy azo ovaina.

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

Bokotra misy fidina

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

Bokotra mizarazara

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

Bokotra maromaro

Na dia azonao atao aza ny manana add-on isaky ny lafiny iray, azonao atao ny manana bokotra maromaro ao anatin'ny iray .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

Ny Navs misy ao amin'ny Bootstrap dia manana marika nizara, manomboka amin'ny .navkilasy fototra, ary koa ny fanjakana iombonana. Ampifamadiho ny kilasy modifier mba hifindra eo amin'ny fomba tsirairay.

Ny fampiasana navs ho an'ny takelaka tabilao dia mila plugin JavaScript tabs

Ho an'ny kiheba misy faritra azo vakiana dia tsy maintsy mampiasa ny plugin JavaScript tabs ianao . Mitaky roletoetra fanampiny sy ARIA ihany koa ny marika - jereo ny mari-pamantarana ohatra amin'ny plugin raha mila fanazavana fanampiny.

Ataovy azo idirana ny navs ampiasaina

Raha mampiasa navs ianao mba hanomezana bara fitetezana, ataovy azo antoka ny manampy a role="navigation"amin'ny fitahirizana ray aman-dreny lojika indrindra amin'ny <ul>, na mamehy <nav>singa iray manodidina ny fitetezana manontolo. Aza ampidirina amin'ny <ul>tenany ny andraikitra, satria izany dia hanakana azy tsy hambara ho lisitra tena izy amin'ny alàlan'ny teknolojia manampy.

Mariho fa ny .nav-tabskilasy dia mitaky ny .navkilasy fototra.

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

Raiso io HTML io ihany, fa ampiasao .nav-pillskosa:

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

Ny pilina koa dia azo stackable mitsangana. Ampio fotsiny .nav-stacked.

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

Ataovy mora ny tabilao na pilina mitovy sakan'ny ray aman-dreniny amin'ny efijery lehibe kokoa noho ny 768px miaraka amin'ny .nav-justified. Amin'ny efijery kely kokoa, ny rohy nav dia atambatra.

Tsy tohana amin'izao fotoana izao ny rohy navbar navbar voamarina.

Safari sy navs voamarina

Hatramin'ny v9.1.2, Safari dia mampiseho bibikely izay mahatonga ny fanovana ny navigateur mitsivalana mahatonga ny fahadisoana ao amin'ny nav voamarina izay voafafa rehefa mamelombelona. Ity bug ity koa dia aseho amin'ny ohatra nav voamarina .

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

Ho an'ny singa nav rehetra (tabilao na pilina), ampio .disabledho an'ny rohy maitso ary tsy misy fiantraikany amin'ny hover .

Tsy nisy fiantraikany ny fiasan'ny rohy

Ity kilasy ity dia hanova ny <a>endriky ny ', fa tsy ny asany. Ampiasao ny JavaScript manokana hanesorana ny rohy eto.

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

Ampio ny menio midina miaraka amin'ny HTML fanampiny kely sy ny plugin JavaScript dropdowns .

Kiheba misy fidinana

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

Pills misy dropdowns

<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

Navbars dia singa meta mamaly izay miasa ho lohatenin'ny fitetezana ho an'ny fampiharana na tranokalanao. Nanomboka nirodana izy ireo (ary azo toggle) amin'ny fijerena finday ary lasa mitsivalana rehefa mitombo ny sakan'ny seranan-tsambo misy.

Tsy tohana amin'izao fotoana izao ny rohy navbar navbar voamarina.

Votoaty mitobaka

Satria tsy fantatr'i Bootstrap hoe ohatrinona ny habaka ilain'ny votoaty ao amin'ny navbar-nao, dia mety hisy olana amin'ny fametahana votoaty ho andalana faharoa. Mba hamahana izany dia azonao atao ny:

  1. Ahena ny habe na ny sakan'ny zavatra navbar.
  2. Afeno ny singa navbar sasany amin'ny haben'ny efijery sasany amin'ny fampiasana kilasy fampiasa mandray andraikitra .
  3. Ovay ny teboka ifindran'ny navbar-nao eo amin'ny maodely nirodana sy mitsivalana. Amboary ny @grid-float-breakpointfari-piainana na ampio ny fangatahanao manokana amin'ny haino aman-jery.

Mila JavaScript plugin

Raha toa ka kilemaina ny JavaScript ary tery loatra ny seranan-tsambo ka mirodana ny navbar, dia tsy ho azo atao ny manitatra ny navbar sy mijery ny atiny ao anatin'ny .navbar-collapse.

Ny navbar responsive dia mitaky ny plugin collapse mba hampidirina ao amin'ny kinova Bootstrap anao.

Fanovana ny toerana fiatoana navbar finday nirodana

Ny navbar dia mirodana amin'ny fijeriny finday mitsangana rehefa tery kokoa noho ny @grid-float-breakpoint, ary mivelatra mankany amin'ny fijeriny mitsivalana tsy mandeha amin'ny finday rehefa ny sakany dia farafaharatsiny @grid-float-breakpointny sakany. Ampifanaraho amin'ny loharano kely kokoa io fari-pahalalana io mba hifehezana rehefa mirodana/mivelatra ny navbar. Ny sandan'ny default dia 768px(ny efijery "kely" na "tablette" kely indrindra).

Ataovy azo idirana ny navbars

Aza hadino ny mampiasa <nav>singa iray na, raha mampiasa singa mazàna kokoa toy ny <div>, ampio a role="navigation"isaky ny navbar mba hamantarana azy mazava ho faritra manan-tantara ho an'ny mpampiasa ny teknolojia fanampiana.

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

Soloy amin'ny sarinao manokana ny marika navbar amin'ny alàlan'ny famadihana ny lahatsoratra amin'ny <img>. Koa satria .navbar-brandmanana ny padding sy ny haavony manokana, dia mety mila manilika CSS ianao arakaraka ny sarinao.

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

Apetraho ao anatiny ny votoatin'ny endrika .navbar-formho an'ny fampifanarahana mitsangana tsara sy ny fitondran-tena nirodana ao amin'ny seranan-tsambo tery. Ampiasao ny safidy fampifanarahana hanapa-kevitra hoe aiza no misy azy ao anatin'ny atiny navbar.

Amin'ny maha lohan-doha azy, .navbar-formmizara ny ankamaroan'ny kaody ao aminy amin'ny .form-inlinealalan'ny mixin. Ny fanaraha-maso endrika sasany, toy ny vondrona fampidirana, dia mety mitaky sakan'ny raikitra mba hiseho tsara ao anaty navbar.

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

Fanamafisana ny fitaovana finday

Misy fampitandremana sasany momba ny fampiasana ny fanaraha-maso endrika ao anatin'ny singa raikitra amin'ny fitaovana finday. Jereo ny antontan-taratasy fanohanana ny navigateur raha mila antsipiriany.

Ampio etikety foana

Ny mpamaky efijery dia hanana olana amin'ny endrikao raha tsy mampiditra marika ho an'ny fidirana rehetra ianao. Ho an'ireo endrika an-tsoratra ireo dia azonao atao ny manafina ireo etikety amin'ny fampiasana ny .sr-onlykilasy. Misy fomba hafa hafa amin'ny fanomezana marika ho an'ny teknolojia manampy, toy ny aria-label, aria-labelledbyna titletoetra. Raha tsy misy ny iray amin'ireo, dia mety hampiasa ilay placeholdertoetra ny mpamaky efijery, raha misy, saingy mariho fa tsy soso-kevitra ny fampiasana placeholderho solon'ny fomba fametahana marika hafa.

Ampio ny .navbar-btnkilasy amin'ny <button>singa tsy mipetraka ao amin'ny iray <form>mba hampifantohana azy ireo amin'ny navbar.

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

Fampiasana manokana momba ny toe-javatra

Toy ny kilasy bokotra mahazatra , .navbar-btnazo ampiasaina amin'ny <a>sy <input>singa. Na izany aza, .navbar-btnna ny kilasy bokotra mahazatra dia tsy tokony hampiasaina amin'ny <a>singa ao anaty .navbar-nav.

Fonosy tady lahatsoratra amin'ny singa misy .navbar-text, matetika amin'ny <p>marika mba hahazoana fitarihana sy loko mety.

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

Ho an'ny olona mampiasa rohy mahazatra izay tsy ao anatin'ny singa navigateur navbar mahazatra, ampiasao ny .navbar-linkkilasy mba hanampiana ny loko mety ho an'ny safidy navbar default sy inverse.

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

Ampifanaraho ny rohy nav, endrika, bokotra, na lahatsoratra, amin'ny fampiasana ny kilasy .navbar-leftna .navbar-rightutility. Ireo kilasy roa ireo dia hanampy mitsingevana CSS amin'ny lalana voafaritra. Ohatra, mba hampifanitsiana ny rohy nav, dia apetraho amin'ny sokajy mitokana izy ireo <ul>miaraka amin'ny kilasy ilaina ampiasaina.

Ireo kilasy ireo dia dikan-teny mifangaro amin'ny .pull-leftand .pull-right, saingy izy ireo dia miompana amin'ny fangatahan'ny haino aman-jery ho mora kokoa amin'ny fitantanana ireo singa navbar amin'ny haben'ny fitaovana.

Ahitsio tsara ny singa maromaro

Ny Navbars amin'izao fotoana izao dia manana fetra amin'ny .navbar-rightkilasy maromaro. Mba hanamafisana ny votoatin'ny habaka dia mampiasa sisiny ratsy amin'ny .navbar-rightsinga farany izahay. Rehefa misy singa maromaro mampiasa an'io kilasy io dia tsy mandeha araka ny tokony ho izy ireo sisiny ireo.

Hojerentsika indray izany rehefa afaka manoratra io singa io ao amin'ny v4.

Ampio .navbar-fixed-topary ampidiro ny atiny .containerna .container-fluidamin'ny afovoany sy pad navbar.

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

Ilaina ny padding amin'ny vatana

Ny navbar raikitra dia hanarona ny atiny hafa, raha tsy ampidirinao paddingeo an-tampon'ny <body>. Andramo ny soatoavinao manokana na ampiasao ny snippet eto ambany. Soso-kevitra: Amin'ny alàlan'ny default, ny navbar dia 50px avo.

body { padding-top: 70px; }

Ataovy azo antoka ny hampiditra izany aorian'ny CSS Bootstrap fototra.

Ampio .navbar-fixed-bottomary ampidiro ny atiny .containerna .container-fluidamin'ny afovoany sy pad navbar.

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

Ilaina ny padding amin'ny vatana

Ny navbar raikitra dia hanarona ny atiny hafa, raha tsy ampidirinao paddingeo amin'ny farany ambany ny <body>. Andramo ny soatoavinao manokana na ampiasao ny snippet eto ambany. Soso-kevitra: Amin'ny alàlan'ny default, ny navbar dia 50px avo.

body { padding-bottom: 70px; }

Ataovy azo antoka ny hampiditra izany aorian'ny CSS Bootstrap fototra.

Mamorona navbar midadasika feno izay mikodiadia miaraka amin'ny pejy amin'ny alàlan'ny fampidirana .navbar-static-topsy ampidiro ny atiny navbar .containerna .container-fluidafovoany sy pad.

Tsy toy ny .navbar-fixed-*kilasy, tsy mila manova padding amin'ny body.

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

Ovao ny endriky ny navbar amin'ny fampidirana .navbar-inverse.

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

Mofo

Tondroy ny toerana misy ny pejy ankehitriny ao anatin'ny ambaratongam-pitetezana.

Ampidirina ho azy amin'ny CSS amin'ny alalan'ny :beforesy content.

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

Pagination

Omeo rohy pagination ho an'ny tranokalanao na fampiharana miaraka amin'ny singa pagination pejy maro, na ny safidy pager tsotra kokoa .

Default pagination

pagination tsotra aingam-panahy avy amin'ny Rdio, tsara ho an'ny fampiharana sy ny valin'ny fikarohana. Ny sakana lehibe dia sarotra adino, mora miendrika, ary manome faritra kitiho lehibe.

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

Famaritana ny singa pagination

Ny singa pagination dia tokony hofonosina singa <nav>iray mba hamantarana azy ho toy ny fizarana fitetezana amin'ny fijerena mpamaky sy ny teknolojia manampy. Ho fanampin'izany, satria ny pejy iray dia mety manana fizarana fitetezana mihoatra ny iray sahady (toy ny fitetezana voalohany amin'ny lohapejy, na ny fitetezana sisiny), dia tsara ny manome famaritana aria-labelizay <nav>maneho ny tanjony. Ohatra, raha ampiasaina hivezivezena eo anelanelan'ny andiana valim-pikarohana ny singa pagination, dia mety ho marika mety ny aria-label="Search results pages".

Fanjakana kilemaina sy mavitrika

Ny rohy dia azo zahana amin'ny toe-javatra samihafa. Ampiasao .disabledho an'ny rohy tsy azo kitihina sy .activehanondroana ny pejy ankehitriny.

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

Manoro hevitra izahay mba hanakalo vatofantsika mavitrika na kilemaina ho an'ny <span>, na esory ny vatofantsika raha ny zana-tsipìka teo aloha/manaraka, hanesorana ny fampiasa kitiho raha mitazona ny fomba nokasaina.

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

Sizing

Mitady pagination lehibe kokoa na kely kokoa? Ampio .pagination-lgna .pagination-smhabe fanampiny.

<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

Rohy haingana teo aloha sy manaraka ho an'ny fampiharana pagination tsotra miaraka amin'ny marika maivana sy fomba. Tena tsara ho an'ny tranokala tsotra toy ny bilaogy na gazetiboky.

Ohatra default

Amin'ny alàlan'ny default, ny pager dia mametraka rohy.

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

Azonao atao koa ny mampifanaraka ny rohy tsirairay amin'ny sisiny:

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

Toetran'ny olona kilemaina

Ny rohy pager koa dia mampiasa ny .disabledkilasin'ny fampiasa amin'ny ankapobeny avy amin'ny pagination.

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

etikety

OHATRA

Ohatra lohateny Vaovao

Ohatra lohateny Vaovao

Ohatra lohateny Vaovao

Ohatra lohateny Vaovao

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

Variations misy

Ampio ny iray amin'ireo kilasy modifier voalaza etsy ambany mba hanovana ny endriky ny marika.

Fampitandremana fampitandremana momba ny Fahombiazana Voalohany
<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>

Manana marika maromaro?

Mety hipoitra ny olana amin'ny famoahana rehefa manana etikety an-tsoratra am-polony ao anatin'ny fitoeran-javatra tery ianao, izay samy misy singany manokana inline-block(toy ny kisary). Ny fomba manodidina izany dia ny fametrahana display: inline-block;. Ho an'ny contexte sy ohatra iray dia jereo ny #13219 .

Badges

Asongadino mora foana ireo singa vaovao na tsy novakiana amin'ny alalan'ny fampidirana <span class="badge">rohy, navs Bootstrap, sy ny maro hafa.

Inbox42

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

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

Mirodana ny tena

Rehefa tsy misy entana vaovao na tsy novakiana dia hirodana fotsiny ny badge (amin'ny alàlan'ny :emptympifidy CSS) raha tsy misy atiny ao anatiny.

Mifanaraka amin'ny navigateur

Tsy hirodana ny badge ao amin'ny Internet Explorer 8 satria tsy misy fanohanana ny :emptympifidy.

Mampifanaraka amin'ny fanjakana nav mavitrika

Ny fomba anatiny dia tafiditra amin'ny fametrahana badge amin'ny fanjakana mavitrika amin'ny navigateur pilina.

<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

Singa maivana sy malefaka izay afaka manitatra ny seranan-tsambo manontolo mba hanehoana votoaty fototra ao amin'ny tranokalanao.

Hello World!

Ity dia singa mahery fo tsotra, singa tsotra amin'ny fomba jumbotron mba hisarika ny saina bebe kokoa amin'ny votoaty na fampahalalana nasongadina.

Hamantatra bebe kokoa

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

Mba hahatonga ny jumbotron ho feno sakany, ary tsy misy zorony boribory, apetraho eo ivelan'ny .containers rehetra ary ampio .containerao anatiny.

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

Lohatenin'ny pejy

Akorandriaka tsotra ahafahana h1manasaraka sy mizara ampahany amin'ny atiny amin'ny pejy iray. Afaka mampiasa ny singa h1default ' small, ary koa ny ankamaroan'ny singa hafa (miaraka amin'ny fomba fanampiny).

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

vinety

Hanitatra ny rafitry ny grid Bootstrap miaraka amin'ny singa thumbnail mba hampisehoana mora foana ny grids amin'ny sary, horonan-tsary, lahatsoratra, sy ny maro hafa.

Raha mitady famelabelarana saribakoly mitovy amin'ny Pinterest amin'ny haavony sy/na sakany ianao dia mila mampiasa plugin an'ny antoko fahatelo toy ny Masonry , Isotope , na Salvattore .

Ohatra default

Amin'ny alàlan'ny default, ny thumbnails Bootstrap dia natao hanehoana sary mifandray miaraka amin'ny marika kely ilaina.

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

atiny manokana

Miaraka amin'ny marika fanampiny, azo atao ny manampy karazana votoaty HTML toy ny lohateny, fehintsoratra, na bokotra amin'ny thumbnails.

Thumbnail générique placeholder

Etikety thumbnail

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

bokotra bokotra

Thumbnail générique placeholder

Etikety thumbnail

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

bokotra bokotra

Thumbnail générique placeholder

Etikety thumbnail

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

bokotra bokotra

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

fanairana

Manomeza hafatra tamberin'andraikitra amin'ny teny manodidina ho an'ny hetsika mahazatra ataon'ny mpampiasa miaraka amin'ireo hafatra fanairana azo ampiasaina sy mora azo.

OHATRA

Fenoy ny lahatsoratra rehetra sy ny bokotra manafoana tsy voatery .alertary iray amin'ireo kilasy efatra mifandraika amin'ny teny manodidina (oh, .alert-success) ho an'ny hafatra fanairana fototra.

Tsy misy kilasy default

Tsy manana kilasy mahazatra ny fanairana, kilasy fototra sy modifier ihany. Tsy misy dikany loatra ny fampandrenesana volondavenona, noho izany dia ilaina ny mamaritra karazana amin'ny alàlan'ny kilasy contextual. Misafidiana amin'ny fahombiazana, fampahalalana, fampitandremana, na loza.

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

Fanairana azo esorina

Amboary amin'ny fanairana rehetra amin'ny alalan'ny fampidirana .alert-dismissiblebokotra tsy voatery sy akaiky.

Mila JavaScript fanairana plugin

Mba hiasa tanteraka, fampandrenesana azo esorina, dia tsy maintsy mampiasa ny plugin JavaScript fanairana ianao .

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

Ataovy azo antoka ny fitondran-tena mety amin'ny fitaovana rehetra

Ataovy azo antoka fa mampiasa ny <button>singa misy ny data-dismiss="alert"toetra angona.

Ampiasao ny .alert-linkkilasin'ny utility mba hanomezana rohy miloko mifanandrify haingana ao anatin'ny fanairana rehetra.

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

Bara fandrosoana

Manomeza valin-teny manara-penitra momba ny fandrosoan'ny rindranasa na hetsika miaraka amin'ny bara fandrosoana tsotra nefa miovaova.

Mifanaraka amin'ny navigateur

Mampiasa fifindran'ny CSS3 sy sary mihetsika ny bara fandrosoana mba hanatrarana ny sasany amin'ireo fiantraikany. Ireo endri-javatra ireo dia tsy tohanana amin'ny Internet Explorer 9 sy ambany na dikan-teny taloha an'ny Firefox. Opera 12 dia tsy manohana sary mihetsika.

Fiarovana amin'ny atiny (CSP) mifanaraka

Raha manana Politika fiarovana amin'ny atiny (CSP) ny tranokalanao izay tsy mamela style-src 'unsafe-inline', dia tsy ho afaka hampiasa ny styletoetra an-tsipika ianao mba hametrahana ny sakan'ny bara fandrosoana araka ny aseho amin'ny ohatra eto ambany. Ny fomba hafa amin'ny fametrahana ny sakany mifanaraka amin'ny CSP henjana dia ahitana ny fampiasana JavaScript manokana (izay mametraka element.style.width) na fampiasana kilasy CSS mahazatra.

Ohatra fototra

Bara fandrosoana default.

60% feno
<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>

Miaraka amin'ny etikety

Esory ny kilasy <span>miaraka .sr-onlyao anatin'ny bara fandrosoana mba hanehoana isan-jato hita maso.

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>

Mba hahazoana antoka fa azo vakiana foana ny soratra misy soratra na dia ambany isan-jato aza, dia eritrereto ny manampy a min-widthamin'ny bara fandrosoana.

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>

Alternatives contextual

Ny bara fandrosoan'ny fandrosoana dia mampiasa bokotra mitovy sy kilasy fanairana ho an'ny fomba tsy miovaova.

40% Vita (fahombiazana)
20% feno
60% feno (fampitandremana)
80% feno (loza)
<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>

mitsipitsipika

Mampiasa gradient mba hamoronana vokatra mitsipika. Tsy hita ao amin'ny IE9 sy ambany.

40% Vita (fahombiazana)
20% feno
60% feno (fampitandremana)
80% feno (loza)
<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>

animation

Ampio .activeamin'ny .progress-bar-stripedfamelomana ny tsipika havanana miankavia. Tsy hita ao amin'ny IE9 sy ambany.

45% Feno
<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>

Mivondrona

Asio bara maromaro ao anatin'ny iray mitovy .progressmba hametahana azy ireo.

35% Vita (fahombiazana)
20% feno (fampitandremana)
10% feno (loza)
<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>

Media object

Fomban-javatra manjavozavo amin'ny fananganana karazana singa isan-karazany (toy ny fanehoan-kevitry ny bilaogy, Tweets, sns) izay manasongadina sary mirindra havia na havanana miaraka amin'ny atiny soratra.

Media mahazatra

Ny haino aman-jery default dia mampiseho zavatra media (sary, horonan-tsary, feo) eo ankavia na havanana amin'ny sakana votoaty.

Lohatenin'ny haino aman-jery

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

Lohatenin'ny haino aman-jery

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

Lohatenin'ny haino aman-jery nested

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

Lohatenin'ny haino aman-jery

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

Lohatenin'ny haino aman-jery

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
<div class="media">
  <div class="media-left">
    <a href="#">
      <img class="media-object" src="..." alt="...">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
    ...
  </div>
</div>

Misy ihany koa ireo kilasy .pull-leftary .pull-rightefa nampiasaina ho ampahany amin'ny singa haino aman-jery teo aloha, saingy tsy ampiasaina amin'izany fampiasana izany hatramin'ny v3.3.0. Izy ireo dia mitovy amin'ny .media-leftary .media-right, afa-tsy izay .media-righttokony hapetraka aorian'ny .media-bodyao amin'ny html.

fampifanarahana amin'ny haino aman-jery

Ny sary na ny haino aman-jery hafa dia azo arindra ambony, afovoany, na ambany. Ny default dia mirindra ambony.

Fampahalalam-baovao mifanandrify indrindra

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

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

Media mirindra afovoany

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

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

Media mirindra ambany

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

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

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

Lisitry ny media

Miaraka amin'ny mari-pamantarana fanampiny, azonao atao ny mampiasa media anaty lisitra (ilaina amin'ny kofehy fanehoan-kevitra na lisitry ny lahatsoratra).

  • Lohatenin'ny haino aman-jery

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

    Lohatenin'ny haino aman-jery nested

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

    Lohatenin'ny haino aman-jery nested

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

    Lohatenin'ny haino aman-jery nested

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
<ul class="media-list">
  <li class="media">
    <div class="media-left">
      <a href="#">
        <img class="media-object" src="..." alt="...">
      </a>
    </div>
    <div class="media-body">
      <h4 class="media-heading">Media heading</h4>
      ...
    </div>
  </li>
</ul>

Vondrona lisitra

Ny vondrona lisitra dia singa mora sy matanjaka amin'ny fanehoana tsy lisitry ny singa tsotra, fa ireo saro-takarina miaraka amin'ny atiny manokana.

Ohatra fototra

Ny vondrona lisitra fototra indrindra dia lisitra tsy misy filaharana miaraka amin'ireo singa lisitra, ary ireo kilasy mety. Amboary miaraka amin'ny safidy manaraka, na ny CSS anao manokana raha ilaina.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum sy 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>

Badges

Ampio ny singa marika amin'ny singa vondrona lisitra ary hapetraka eo ankavanana ho azy izany.

  • 14Cras justo odio
  • 2Dapibus ac facilisis in
  • 1Morbi leo risus
<ul class="list-group">
  <li class="list-group-item">
    <span class="badge">14</span>
    Cras justo odio
  </li>
</ul>

Zavatra mifandray

Ampifandraiso ireo singa vondrona lisitra amin'ny fampiasana marika vatofantsika fa tsy zavatra lisitra (izay midika hoe ray aman-dreny <div>fa tsy <ul>). Tsy mila ray aman-dreny tsirairay manodidina ny singa tsirairay.

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

Zavatra bokotra

Ny singa vondrona lisitra dia mety ho bokotra fa tsy zavatra lisitra (izay midika hoe ray aman-dreny <div>fa tsy <ul>). Tsy mila ray aman-dreny tsirairay manodidina ny singa tsirairay. Aza mampiasa ny .btnkilasy mahazatra eto.

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

Zavatra kilemaina

Ampidiro .disabledamin'ny a .list-group-itemho fotsy izany mba hiseho ho kilemaina.

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

Kilasy ara-tantara

Mampiasà kilasy contextual hanisy endrika ireo singa ao anaty lisitra, default na mifandray. Tafiditra ihany koa ny .activefanjakana.

  • Dapibus ac facilisis in
  • Cras sit amet nibh libero
  • Porta ac consectetur ac
  • Vestibulum sy 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>

atiny manokana

Ampio saika HTML rehetra ao anatiny, eny fa na dia ho an'ny vondrona lisitra mifandray toy ny etsy ambany aza.

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

tontonana

Na dia tsy ilaina foana aza, indraindray dia mila mametraka ny DOM ao anaty boaty ianao. Ho an'ireo toe-javatra ireo, andramo ny singa tontonana.

Ohatra fototra

Amin'ny alàlan'ny default, ny zavatra rehetra .panelatao dia ny mampihatra sisintany fototra sy padding mba misy atiny.

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

Panel misy lohateny

Ampio fitoeran-doha amin'ny tontonana miaraka amin'ny .panel-heading. Azonao atao koa ny mampiditra izay rehetra <h1>- <h6>miaraka amin'ny .panel-titlekilasy hanampiana lohateny efa nomanina. Na izany aza, ny haben'ny endri-tsoratra amin'ny <h1>- <h6>dia nosoloina .panel-heading.

Ho an'ny fandokoana rohy mety dia ataovy izay hametrahana rohy amin'ny lohateny ao anatin'ny .panel-title.

Lohatenin'ny tontonana tsy misy lohateny
Ny votoatin'ny tontonana

Lohatenin'ny tontonana

Ny votoatin'ny tontonana
<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>

Fonosana bokotra na lahatsoratra faharoa amin'ny .panel-footer. Mariho fa tsy mandova loko sy sisin-tany ny tongotry ny tontonana rehefa mampiasa fiovaovan'ny contextual satria tsy natao ho eo aloha izy ireo.

Ny votoatin'ny tontonana
<div class="panel panel-default">
  <div class="panel-body">
    Panel content
  </div>
  <div class="panel-footer">Panel footer</div>
</div>

Alternatives contextual

Toy ny singa hafa, ataovy mora kokoa ny tontonana iray manan-danja kokoa amin'ny toe-javatra iray manokana amin'ny alalan'ny fampidirana ny iray amin'ireo kilasy fanjakana contextual.

Lohatenin'ny tontonana

Ny votoatin'ny tontonana

Lohatenin'ny tontonana

Ny votoatin'ny tontonana

Lohatenin'ny tontonana

Ny votoatin'ny tontonana

Lohatenin'ny tontonana

Ny votoatin'ny tontonana

Lohatenin'ny tontonana

Ny votoatin'ny tontonana
<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>

Miaraka amin'ny latabatra

Ampio izay tsy misy sisin-tany .tableao anatin'ny tontonana mba hamolavola tsy misy fotony. Raha misy .panel-body, dia asiana sisintany fanampiny eo an-tampon'ny latabatra hisarahana.

Lohatenin'ny tontonana

Ny votoatin'ny tontonana default eto. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Id dolor id nibh ultricies vehicula ut id elit.

# Fanampin'anarana Anarana Anaran'ny mpampiasa
1 marika Otto @mdo
2 Jakoba Thornton @matavy
3 Larry ny Vorona @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>

Raha tsy misy vatana tontonana, ny singa dia mifindra avy amin'ny lohatenin'ny tontonana mankany amin'ny latabatra tsy misy fahatapahana.

Lohatenin'ny tontonana
# Fanampin'anarana Anarana Anaran'ny mpampiasa
1 marika Otto @mdo
2 Jakoba Thornton @matavy
3 Larry ny Vorona @twitter
<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>

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

Miaraka amin'ny vondrona lisitra

Ampidiro mora foana ny vondrona lisitra midadasika ao anatin'ny tontonana rehetra.

Lohatenin'ny tontonana

Ny votoatin'ny tontonana default eto. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Id dolor id nibh ultricies vehicula ut id elit.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum sy 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>

Fampidirana mamaly

Avelao ny mpitety tranonkala hamantatra ny refin'ny horonan-tsary na sary mihetsika mifototra amin'ny sakan'ny sakana misy azy amin'ny alalan'ny famoronana ratio intrinsic izay mirefy araka ny tokony ho izy amin'ny fitaovana rehetra.

Ny fitsipika dia ampiharina mivantana amin'ny <iframe>, <embed>, <video>, ary <object>singa; raha azo atao dia ampiasao kilasy taranaka mazava .embed-responsive-itemraha te hampifanaraka ny styling amin'ny toetra hafa ianao.

Pro-Tip! Tsy mila ampidirinao frameborder="0"ao amin'ny <iframe>s anao fa fehezinay ho anao izany.

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

lavaka famorian-drano

Default tsara

Ampiasao ny fantsakana ho toy ny effet tsotsotra amin'ny singa iray mba hanomezana effet inset azy.

Jereo fa ao anaty lavaka fantsakana aho!
<div class="well">...</div>

Kilasy azo atao

Fanaraha-maso ny padding sy ny zorony boribory miaraka amin'ny kilasy modifier roa.

Indro, ao anaty lavaka fantsakana lehibe aho!
<div class="well well-lg">...</div>
Jereo fa ao anaty lavaka fantsakana kely aho!
<div class="well well-sm">...</div>