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. Aza hadino 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 amin'ireo mpampiasa ny teknolojia manampy.

Ampidiro adiresy mailaka manan-kery

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

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

OHATRA

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>

Fanitsiana

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.

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

lohapejy

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>

mpizara

Manampia fizarazarana hanasaraka andiam-pifandraisana ao anaty menio midina.

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

Zavatra sakafo kilemaina

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>

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 `role`ary 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>

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>

Famaritana

Raha tokony hampihatra kilasy fandrefesana bokotra amin'ny bokotra tsirairay ao anaty vondrona iray, dia 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 sisintany 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.

ANKA MOYEN- TSARA

ANKA MOYEN-

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

Mampiasà bokotra iray hanosika ny menio midina amin'ny alàlan'ny fametrahana azy ao anatin'ny iray .btn-groupary manome ny mari-pamantarana sakafo mety.

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>

Famaritana

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>

Hanitatra ny fanaraha-maso ny 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-btnhanisy na hanisy 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 tranga 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.

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

Famaritana

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 fidinana

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

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.

Tabs

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>

levitra

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>

nohamarinina

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

Rohy kilemaina

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>

Mampiasa dropdowns

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>

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:

Ahena ny habe na ny sakan'ny zavatra navbar.
Afeno ny singa navbar sasany amin'ny haben'ny efijery sasany amin'ny fampiasana kilasy fampiasa mandray andraikitra .
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.

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

<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 ny CSS ianao miankina amin'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 fihetsika mirodana 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>

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>

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 fitetezana navbar mahazatra, ampiasao ny .navbar-linkkilasy 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 mba ho mora kokoa amin'ny fikarakarana ireo singa navbar amin'ny haben'ny fitaovana.

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: Raha ny mahazatra, 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: Raha ny mahazatra, 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 amin'ny <span>, na esory ny vatofantsika amin'ny tranga misy ny zana-tsipìka teo aloha/manaraka, mba hanesorana ny fampiasa kitiho nefa 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>

Famaritana

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>

Rohy mirindra

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>

OHATRA

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 .

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

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>

Akorandriaka tsotra ho an'ny filaharana araka ny h1tokony ho izy sy fizarana ampahan'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>

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 haavo sy/na sakany samihafa 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.

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

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

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>

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 dia misy dikany loatra ny fanairana volondavenona mahazatra, noho izany dia takiana ianao hamaritra karazana amin'ny alàlan'ny kilasy contextual. Misafidiana amin'ny fahombiazana, fampahalalana, fampitandremana, na loza.

Vita tsara! Namaky soa aman-tsara ity hafatra fanairana manan-danja ity ianao.

Fampitandremana! Mila ny fifantohanao ity fanairana ity, saingy tsy dia zava-dehibe loatra.

fampitandremana! Aleo mandinika ny tenanao fa tsy dia tsara loatra ianao.

Oh snap! Ovay zavatra vitsivitsy ary andramo mandefa indray.

<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, fanairana azo esorina dia tsy maintsy mampiasa ny plugin JavaScript alerts ianao .

fampitandremana! Aleo mandinika ny tenanao fa tsy dia tsara loatra 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.

Rohy amin'ny fanairana

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

Vita tsara! Namaky soa aman-tsara ity hafatra fanairana manan-danja ity ianao .

Fampitandremana! Mila ny sainao ity fampandrenesana ity , saingy tsy dia zava-dehibe loatra.

fampitandremana! Aleo mijery ny tenanao fa tsy dia tsara loatra ianao .

Oh snap! Ovay zavatra vitsivitsy ary andramo mandefa indray.

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

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.

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

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

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

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

Voatavo

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

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

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>

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.

Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Vestibulum sy eros

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

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.

Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Vestibulum sy eros

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

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

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.

Tanisao ny lohatenin'ny singa vondrona

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

Tanisao ny lohatenin'ny singa vondrona

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

Tanisao ny lohatenin'ny singa vondrona

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

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

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

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

Panel misy footer

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

Tohin'ny tontonana

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

Alternatives contextual

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

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 tsy izany dia ampiasao kilasy taranaka mibaribary .embed-responsive-itemrehefa 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>

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

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>

singa

Glyphicons

Misy glyphs

Ny fomba fampiasana

Aza mifangaro amin'ny singa hafa

Fampiasana amin'ny singa foana

Fanovana ny toerana misy endritsoratra kisary

Kisary azo idirana

OHATRA

Dropdowns

OHATRA

Fanitsiana

Mety mitaky toerana fanampiny

Fandrindrana .pull-righttsy ampiasaina

lohapejy

mpizara

Zavatra sakafo kilemaina

Vondrona bokotra

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

Hamarino tsara roleary omeo marika

Ohatra fototra

bokotra Toolbar

Famaritana

akany

Variation mitsangana

Vondrona bokotra voamarina

Fikarakarana sisintany

IE8 sy sisintany

Miaraka amin'ny <a>singa

Rohy miasa toy ny bokotra

Miaraka amin'ny <button>singa

Bokotra midina

Fiankinan-doha amin'ny plugin

Bokotra tokana midina

Fizarana bokotra midina

Famaritana

Variation dropup

Vondrona fampidirana

Textuel <input>ihany

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

Aza mifangaro amin'ny singa hafa

Ampio etikety foana

Ohatra fototra

Famaritana

Boxes sy radio addons

Addons bokotra

Bokotra misy fidinana

Bokotra mizarazara

Bokotra maromaro

Navs

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

Ataovy azo idirana ny navs ampiasaina

Tabs

levitra

nohamarinina

Safari sy navs voamarina

Rohy kilemaina

Tsy nisy fiantraikany ny fiasan'ny rohy

Mampiasa dropdowns

Kiheba misy fidinana

Pills misy dropdowns

Navbar

Default navbar

Votoaty mitobaka

Mila JavaScript plugin

Fanovana ny toerana fiatoana navbar finday nirodana

Ataovy azo idirana ny navbars

Sarin'ny marika

teny

Fanamafisana ny fitaovana finday

Ampio etikety foana

bokotra

Fampiasana manokana momba ny toe-javatra

Text

Rohy tsy nav

Fandrindrana singa

Ahitsio tsara ny singa maromaro

Miorina hatrany ambony

Ilaina ny padding amin'ny vatana

Miorina hatrany ambany

Fandrindrana `.pull-right`tsy ampiasaina

Hamarino tsara `role`ary omeo marika

Miaraka amin'ny `<a>`singa

Miaraka amin'ny `<button>`singa

Textuel `<input>`ihany