Glyphên berdest

Zêdetirî 250 glyphên di forma fontê de ji koma Glyphicon Halflings vedihewîne. Glyphicons Halflings bi gelemperî belaş peyda nabin, lê afirînerê wan ew ji bo Bootstrap-ê belaş peyda kiriye. Wekî spasiyek, em tenê dipirsin ku hûn gava ku gengaz be zencîreyek vegere Glyphicons .

glyphicon glyphicon-asterisk
glyphicon glyphicon-plus
glyphicon glyphicon-euro
glyphicon glyphicon-eur
glyphicon glyphicon-minus
glyphicon glyphicon-ewr
glyphicon glyphicon-zerf
glyphicon glyphicon-pencil
glyphicon glyphicon-glass
glyphicon glyphicon-music
glyphicon glyphicon-search
glyphicon glyphicon-dil
glyphicon glyphicon-star
glyphicon glyphicon-stêrk-vala
glyphicon glyphicon-bikarhêner
glyphicon glyphicon-film
glyphicon glyphicon-th-mezin
glyphicon glyphicon-th
glyphicon glyphicon-th-list
glyphicon glyphicon-ok
glyphicon glyphicon-rakirin
glyphicon glyphicon-zoom-in
glyphicon glyphicon-zoom-out
glyphicon glyphicon-off
glyphicon glyphicon-signal
glyphicon glyphicon-cog
glyphicon glyphicon-trash
glyphicon glyphicon-mal
glyphicon glyphicon-pel
glyphicon glyphicon-dem
glyphicon glyphicon-rê
glyphicon glyphicon-download-alt
glyphicon glyphicon-dakêşandin
glyphicon glyphicon-upload
glyphicon glyphicon-inbox
glyphicon glyphicon-play-circle
glyphicon glyphicon-dubarekirin
glyphicon glyphicon-refresh
glyphicon glyphicon-list-alt
glyphicon glyphicon-lock
glyphicon glyphicon-ala
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-book
glyphicon glyphicon-bookmark
glyphicon glyphicon-print
glyphicon glyphicon-kamera
glyphicon glyphicon-font
glyphicon glyphicon-bold
glyphicon glyphicon-italic
glyphicon glyphicon-text-height
glyphicon glyphicon-text-width
glyphicon glyphicon-align-left
glyphicon glyphicon-align-navenda
glyphicon glyphicon-align-right
glyphicon glyphicon-align-justify
glyphicon glyphicon-list
glyphicon glyphicon-indent-left
glyphicon glyphicon-indent-rast
glyphicon glyphicon-facetime-video
glyphicon glyphicon-picture
glyphicon glyphicon-map-marker
glyphicon glyphicon-adjust
glyphicon glyphicon-tint
glyphicon glyphicon-biguherîne
glyphicon glyphicon-parvekirin
glyphicon glyphicon-kontrol
glyphicon glyphicon-move
glyphicon glyphicon-gavek-paşverû
glyphicon glyphicon-fast-paşverû
glyphicon glyphicon-paşverû
glyphicon glyphicon-play
glyphicon glyphicon-pause
glyphicon glyphicon-raweste
glyphicon glyphicon-pêş
glyphicon glyphicon-zû-pêş
glyphicon glyphicon-gavek-pêşverû
glyphicon glyphicon-derxistin
glyphicon glyphicon-chevron-çep
glyphicon glyphicon-chevron-rast
glyphicon glyphicon-plus-nîşana
glyphicon glyphicon-minus-nîşana
glyphicon glyphicon-rakirin-nîşan
glyphicon glyphicon-ok-nîşana
glyphicon glyphicon-pirs-nîşan
glyphicon glyphicon-info-nîşana
glyphicon glyphicon-screenshot
glyphicon glyphicon-rake-circle
glyphicon glyphicon-ok-circle
glyphicon glyphicon-ban-circle
glyphicon glyphicon-tîr-çep
glyphicon glyphicon-tîr-rast
glyphicon glyphicon-tîr-up
glyphicon glyphicon-tîr-down
glyphicon glyphicon-share-alt
glyphicon glyphicon-biguherîne-tijî
glyphicon glyphicon-guhertin-biçûk
glyphicon glyphicon-exclamation-sign
glyphicon glyphicon-gift
glyphicon glyphicon-leaf
glyphicon glyphicon-agir
glyphicon glyphicon-çav-vekirî
glyphicon glyphicon-eye-gir
glyphicon glyphicon-hişyarî-nîşana
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-kert-kart
glyphicon glyphicon-peldank-girtî
glyphicon glyphicon-peldanka-vekirî
glyphicon glyphicon-guherbar-beralî
glyphicon glyphicon-guherbar-horizontal
glyphicon glyphicon-hdd
glyphicon glyphicon-bullhorn
glyphicon glyphicon-bell
glyphicon glyphicon-sertîfîka
glyphicon glyphicon-thumbs-up
glyphicon glyphicon-thumbs-down
glyphicon glyphicon-dest-rast
glyphicon glyphicon-dest-çep
glyphicon glyphicon-dest-up
glyphicon glyphicon-dest-xwarê
glyphicon glyphicon-circle-tîr-rast
glyphicon glyphicon-circle-tîr-çep
glyphicon glyphicon-circle-tîr-up
glyphicon glyphicon-circle-tîr-down
glyphicon glyphicon-globe
glyphicon glyphicon-wrench
glyphicon glyphicon-peywiran
glyphicon glyphicon-filter
glyphicon glyphicon-briefcase
glyphicon glyphicon-fullscreen
glyphicon glyphicon-dashboard
glyphicon glyphicon-paperclip
glyphicon glyphicon-dil-vala
glyphicon glyphicon-link
glyphicon glyphicon-telefon
glyphicon glyphicon-pushpin
glyphicon glyphicon-usd
glyphicon glyphicon-gbp
glyphicon glyphicon-sort
glyphicon glyphicon-sort-by-alfabe
glyphicon glyphicon-sort-by-alphabet-alt
glyphicon glyphicon-sort-by-order
glyphicon glyphicon-sort-by-order-alt
glyphicon glyphicon-cûrt-bi-taybetmendî
glyphicon glyphicon-sort-by-attributes-alt
glyphicon glyphicon-nekêşandin
glyphicon glyphicon-berfirehkirin
glyphicon glyphicon-hilweşîn-xwarin
glyphicon glyphicon-hilweşîn-up
glyphicon glyphicon-log-in
glyphicon glyphicon-flash
glyphicon glyphicon-derketin-derketin
glyphicon glyphicon-new-pace
glyphicon glyphicon-record
glyphicon glyphicon-save
glyphicon glyphicon-vekirî
glyphicon glyphicon-rizgarkirin
glyphicon glyphicon-import
glyphicon glyphicon-export
glyphicon glyphicon-send
glyphicon glyphicon-floppy-disk
glyphicon glyphicon-floppy-saved
glyphicon glyphicon-floppy-rake
glyphicon glyphicon-floppy-save
glyphicon glyphicon-floppy-vekirî
glyphicon glyphicon-karta krediyê
glyphicon glyphicon-transfer
glyphicon glyphicon-cutlery
glyphicon glyphicon-header
glyphicon glyphicon-compressed
glyphicon glyphicon-earphone
glyphicon glyphicon-telefon-alt
glyphicon glyphicon-tower
glyphicon glyphicon-stats
glyphicon glyphicon-sd-video
glyphicon glyphicon-hd-video
glyphicon glyphicon-binnivîs
glyphicon glyphicon-sound-stereo
glyphicon glyphicon-sound-dolby
glyphicon glyphicon-sound-5-1
glyphicon glyphicon-sound-6-1
glyphicon glyphicon-sound-7-1
glyphicon glyphicon-copyright-mark
glyphicon glyphicon-qeyd-nîşan
glyphicon glyphicon-ewr-dakêşandin
glyphicon glyphicon-ewr-upload
glyphicon glyphicon-dar-conifer
glyphicon glyphicon-dar-dar
glyphicon glyphicon-cd
glyphicon glyphicon-rizgar-pelê
glyphicon glyphicon-open-pel
glyphicon glyphicon-level-up
glyphicon glyphicon-copy
glyphicon glyphicon-paste
glyphicon glyphicon-hişyar
glyphicon glyphicon-equalizer
glyphicon glyphicon-king
glyphicon glyphicon-queen
glyphicon glyphicon-pawn
glyphicon glyphicon-metran
glyphicon glyphicon-şovalye
glyphicon glyphicon-baby-formula
glyphicon glyphicon-kon
glyphicon glyphicon-blackboard
glyphicon glyphicon-nivîn
glyphicon glyphicon-sêv
glyphicon glyphicon-xapandin
glyphicon glyphicon-hourglass
glyphicon glyphicon-lampe
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-rûble
glyphicon glyphicon-rub
glyphicon glyphicon-scale
glyphicon glyphicon-ice-lolly
glyphicon glyphicon-qeşa-lolly-tehmed
glyphicon glyphicon-perwerde
glyphicon glyphicon-option-horizontal
glyphicon glyphicon-option-vertical
glyphicon glyphicon-menu-hamburger
glyphicon glyphicon-modal-window
glyphicon glyphicon-rûn
glyphicon glyphicon-genim
glyphicon glyphicon-sglasses
glyphicon glyphicon-text-size
glyphicon glyphicon-text-reng
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-sêgoşe-rast
glyphicon glyphicon-sêgoşe-çep
glyphicon glyphicon-sêgoşe-bin
glyphicon glyphicon-sêgoşe-top
glyphicon glyphicon-konsolê
glyphicon glyphicon-superscript
glyphicon glyphicon-subscript
glyphicon glyphicon-menu-çep
glyphicon glyphicon-menu-rast
glyphicon glyphicon-menu-down
glyphicon glyphicon-menu-up

Çawa bikar bînin

Ji ber sedemên performansê, hemî îkonek çînek bingehîn û çîna îkonek kesane hewce dike. Ji bo ku bikar bînin, koda jêrîn hema hema li her deverê bicîh bikin. Bawer bikin ku di navbera îkon û nivîsê de ji bo peldanka rast cîhek bihêlin.

Bi pêkhateyên din re tevlihev nekin

Dersên îkonê rasterast bi hêmanên din re nayên hev kirin. Divê ew bi çînên din re li ser heman elementê neyên bikar anîn. Di şûna wê de, hêlînek lê zêde bikin <span>û çînên îkonê li ser bixin <span>.

Tenê ji bo karanîna li ser hêmanên vala

Divê dersên îkonê tenê li ser hêmanên ku naveroka nivîsê tune ne û hêmanên zarokan tune ne werin bikar anîn.

Guhertina cîhê tîpa îkonê

Bootstrap texmîn dike ku pelên fontê yên îkonê dê di ../fonts/pelrêçê de, li gorî pelên CSS yên berhevkirî, cih bigirin. Veguheztin an binavkirina wan pelên fontê tê wateya nûvekirina CSS bi yek ji sê awayan:

Biguherîne @icon-font-pathû/an @icon-font-nameguherbarên di çavkaniyê de Less files.
Vebijarka URL-yên têkildar ên ku ji hêla berhevkara Less ve hatî peyda kirin bikar bînin.
url()Rêyên di CSS-ya berhevkirî de biguherînin .

Her vebijarka ku herî baş li gorî mîhenga pêşkeftina weya taybetî ye bikar bînin.

îkonên gihîştî

Guhertoyên nûjen ên teknolojiyên arîkar dê naveroka çêkirî ya CSS, û her weha karakterên taybetî yên Unicode ragihînin. Ji bo ku di xwendevanên ekranê de ji derketina bê mebest û tevlihev dûr nekevin (bi taybetî dema ku îkon tenê ji bo xemilandinê têne bikar anîn), em wan bi aria-hidden="true"taybetmendiyê vedişêrin.

Ger hûn îkonek bikar tînin da ku wateyê bidin (li şûna ku tenê wekî hêmanek xemilandî), pê ewle bin ku ev wate ji teknolojiyên alîkar re jî tê veguheztin - mînakî, naverokek zêde, bi dîtbarî bi .sr-onlydersê re veşartiye.

Heke hûn bêyî nivîsek din kontrolan diafirînin (wek mînakek <button>ku tenê îkonek dihewîne), divê hûn her gav naverokek alternatîf peyda bikin da ku armanca kontrolê nas bikin, da ku ew ji bikarhênerên teknolojiyên arîkar re watedar be. Di vê rewşê de, hûn dikarin aria-labeltaybetmendiyek li ser kontrola xwe zêde bikin.

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

Examples

Wan di bişkokan, komên bişkokê de ji bo darikê amûran, navîgasyon, an têketinên forma pêşwext bikar bînin.

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

Îkonek ku di hişyariyekê de tê bikar anîn da ku ragihîne ku ew peyamek xeletiyek e, digel nivîsek zêde .sr-onlyku vê nîşanê ji bikarhênerên teknolojiyên arîkar re ragihîne.

Navnîşanek e-nameyek derbasdar binivîse

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

Veguheztin, menuya kontekstî ya ji bo nîşandana navnîşên girêdanan. Bi pêveka daketî ya JavaScript re înteraktîf hate çêkirin .

Mînak

Tetikandina dakêşanê û menuya dakêşanê di hundurê de .dropdown, an hêmanek din a ku diyar dike, bipêçin position: relative;. Dûv re HTML-a menuyê zêde bikin.

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

Pêşekên dakêşanê dikarin werin guheztin da ku ber bi jor ve (li şûna berjêr) berfireh bibin bi lêzêdekirina .dropupdêûbav.

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

Alignment

Ji hêla xwerû ve, pêşekek dakêşanê bixweber 100% ji jor û li milê çepê yê dêûbavê xwe tê danîn. Pêşeka daketinê .dropdown-menu-rightli a .dropdown-menuber bi rastê ve zêde bikin.

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

Headers

Sernavek lê zêde bikin da ku beşên çalakiyan di her menuya dakêşanê de nîşan bikin.

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

Divider

Di pêşekek dakêşanê de dabeşkerek zêde bikin da ku rêzikên girêdanan ji hev veqetînin.

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

Tiştên menuya astengdar

Ji .disabledbo <li>neçalakkirina lînkê li a-yê zêde bikin.

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

Bi koma bişkokê re rêze bişkokan li ser yek rêzek kom bikin. Bi pêveka bişkokên me re radyoya JavaScript-a vebijarkî û şêwaza qutiya kontrolê zêde bikin.

Pêşniyarên amûr û popoverên di komên bişkokê de mîhengek taybetî hewce dike

Dema ku li ser hêmanên di hundurê de tîpên amûran an popoveran bikar bînin .btn-group, divê hûn vebijarkê diyar bikin container: 'body'da ku ji bandorên aliyî yên nedilxwaz dûr bikevin (mînakî hêman berfirehtir dibe û/an dema ku şîreta amûrê an popover tê kişandin quncikên xwe yên girêk winda dike).

Rast bikin `role`û etîketek peyda bikin

Ji bo ku teknolojiyên arîkar - wek xwendevanên ekranê - ragihînin ku rêzek bişkok têne kom kirin, pêdivî ye ku roletaybetmendiyek guncan were peyda kirin. Ji bo komên bişkojk, ev dê bibe role="group", di heman demê de ku darikên amûran divê xwedî a role="toolbar".

Yek îstîsna komên ku tenê kontrolek yekane vedihewîne (mînakî komên bişkojka rastdar ên bi <button>hêmanan) an dakêşek.

Wekî din, pêdivî ye ku kom û toolbar bi etîketek eşkere were dayîn, ji ber ku piraniya teknolojiyên arîkar dê wekî din wan ragihînin, tevî hebûna roletaybetmendiya rast. Di mînakên ku li vir têne pêşkêş kirin de, em bikar tînin aria-label, lê alternatîfên wekî aria-labelledbydikarin werin bikar anîn jî.

Mînaka bingehîn

Rêzek bişkokên bi .btndi pêça .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>

Komên ji <div class="btn-group">bo <div class="btn-toolbar">pêkhateyên tevlihevtir tevlihev bikin.

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

Mezinbûn

Li şûna ku hûn dersên mezinbûna bişkojkê li her bişkokek di komekê de bicîh bikin, tenê li her yekê zêde .btn-group-*bikin .btn-group, di nav de dema ku gelek koman hêlîn dikin.

<div class="btn-group btn-group-lg" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-sm" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-xs" role="group" aria-label="...">...</div>

Nesting

Dema ku hûn dixwazin pêşekên dakêşanê bi rêzek bişkokan re tevlihev bibin, .btn-groupdi nav yekî din de cîh bikin..btn-group

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

Guhertoya vertîkal

Komek bişkokan li şûna horizontî, vertîkal li ser hev xuya bikin. Daxistina bişkojka dabeşkirinê li vir nayê piştgirî kirin.

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

Komên bişkojka rastdar

Komek bişkokan bi mezinahiyên wekhev dirêj bikin da ku tevahiya firehiya dêûbavê xwe bigire. Di heman demê de bi daxistina bişkojka di nav koma bişkojkê de jî dixebite.

Desthilatdariya sînoran

Ji ber HTML û CSS-ya taybetî ya ku ji bo rastkirina bişkokan têne bikar anîn (bi navî display: table-cell), sînorên di navbera wan de ducar dibin. Di komên bişkokê yên birêkûpêk de, margin-left: -1pxji bo rakirina sînoran li şûna rakirina wan tê bikar anîn. Lêbelê, marginbi kar nake display: table-cell. Wekî encamek, li gorî xwerûyên xwe yên Bootstrap-ê ve girêdayî, dibe ku hûn bixwazin sînoran jê bikin an ji nû ve reng bikin.

IE8 û sînor

Internet Explorer 8 di komek bişkojka rastdar de sînoran li ser bişkokan nade, çi li ser be, <a>çi <button>hêman be. Ji bo ku hûn li dora wê bigerin, her bişkokek li yekî din bipêçin .btn-group.

Ji bo bêtir agahdarî li #12476 binêre.

Bi `<a>`hêmanan

Tenê rêzek .btns di pêça .btn-group.btn-group-justified.

Çep Navîn Rast

Çep Navîn

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

Girêdanên wekî bişkokan tevdigerin

Ger <a>hêman têne bikar anîn da ku wekî bişkokan tevbigerin - fonksiyona navrûpelê dişoxilînin, li şûna ku di nav rûpela heyî de berbi belgeyek an beşek din ve biçin - divê ji wan re jî guncanek were dayîn role="button".

Bi `<button>`hêmanan

Ji bo ku hûn komên bişkokên rastdar ên bi <button>hêmanan re bikar bînin, divê hûn her bişkokê di komek bişkokê de bipêçin . Pir gerok bi rêkûpêk CSS-ya me ji bo rastkirina <button>hêmanan bicîh naynin, lê ji ber ku em dakêşandina bişkojkan piştgirî dikin, em dikarin li dora wê bixebitin.

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

Her bişkokek bikar bînin da ku pêşekek dakêşanê bi cîh bikin .btn-groupû nîşana menuya rast peyda bikin.

Girêdana pêvekê

Daxistina bişkokan hewce dike ku pêveka dakêşanê di guhertoya weya Bootstrap de were bicîh kirin.

Daxistina bişkojka yekane

Bi hin guheztinên nîşankirinê yên bingehîn bişkokek veguherînin guheztinek dakêşanê.

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

Daxistina bişkojka Split

Bi heman rengî, bişkojkek veqetandî bi heman guhertinên nîşankirinê, tenê bi bişkokek veqetandî, bişkojka dabeşkirinê biafirînin.

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

Mezinbûn

Daxistina bişkokan bi bişkokên her mezinahî re dixebitin.

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

Guhertoya avêtinê

Bi lêzêdekirina .dropupdêûbav pêşekên daketinê yên li jor hêmanan vekin.

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

Bi lê zêdekirina nivîs an bişkokên berî, paşî, an li her du aliyên her nivîsê-based kontrolên formê dirêj bikin <input>. Bi .input-groupan .input-group-addonan .input-group-btnji bo pêvekirin an pêvekirina hêmanan li yek yek bikar bînin .form-control.

Textual `<input>`s tenê

Li vir ji karanîna <select>hêmanan dûr bisekinin ji ber ku ew di gerokên WebKit de bi tevahî nayên şêwaz kirin.

Li vir ji karanîna <textarea>hêmanan dûr bisekinin ji ber ku rowstaybetmendiya wan dê di hin rewşan de rêz neyê girtin.

Pêşniyarên amûr û popoverên di komên têketinê de mîhengek taybetî hewce dike

Dema ku li ser hêmanên di hundurê de şîretên amûran an popoveran bikar bînin .input-group, divê hûn vebijarkê diyar bikin container: 'body'da ku ji bandorên aliyî yên nedilxwaz dûr bikevin (mînakî hêman firehtir bibe û/an jî quncikên xwe yên dorpêçkirî winda bike dema ku şîreta amûrê an popover tê kişandin).

Bi pêkhateyên din re tevlihev nekin

Komên formê an çînên stûnên torê rasterast bi komên têketinê re tevlihev nekin. Di şûna wê de, koma têketinê di hundurê koma formê an hêmana têkildar-tevrê de hêlîn bikin.

Her tim etîketan lê zêde bike

Ger hûn ji bo her têketinê etîketek negirin dê xwendevanên ekranê bi formên we re bibin pirsgirêk. Ji bo van komên têketinê, pê ewle bin ku her etîket an fonksiyonek zêde ji teknolojiyên arîkar re têne şandin.

Teknîka tam a ku were bikar anîn (hêmanên xuyayî <label>, <label>hêmanên ku bi karanîna .sr-onlypolê veşartiye, an karanîna aria-label, aria-labelledby, aria-describedby, titlean placeholdertaybetmendiyê) û agahdariya zêde ya ku divê were veguheztin dê li gorî celebê rastîn a widgeta navbeynê ya ku hûn bicîh dikin diguhere. Nimûneyên di vê beşê de çend nêzîkatiyên pêşniyarkirî, yên taybetmendiyê pêşkêş dikin.

Mînaka bingehîn

Yek pêvek an bişkokek li her du aliyên têketinê bixin. Di heman demê de hûn dikarin yek li her du aliyên têketinê jî bi cîh bikin.

.input-group-addonEm gelek pêvekên ( an .input-group-btn) ji aliyekî ve piştgirî nakin .

Em di yek koma têketinê de gelek form-kontrolan piştgirî nakin.

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

Mezinbûn

Dersên mezinbûna forma têkildar li .input-groupxwe zêde bikin û naverokên hundur dê bixweber mezinahiyê biguherînin - ne hewce ye ku dersên mezinahiya kontrolkirina formê li ser her elementê dubare bikin.

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

Qutiyên kontrolê û pêvekên radyoyê

Li şûna nivîsê, qutiya kontrolê an vebijarkek radyoyê di nav pêveka koma têketinê de bi cîh bikin.

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

Bişkokên di komên têketinê de hinekî cûda ne û yek astek hêlînê hewce dike. Li şûna .input-group-addon, hûn ê hewce bikin ku .input-group-btnhûn bişkokan pêça bikin. Ev ji ber şêwazên gerokê yên xwerû yên ku nayên paşguh kirin hewce ye.

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

Bişkokên bi daxistinan

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

Bişkojkên dabeşkirî

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

Bişkokên pirjimar

Digel ku hûn dikarin her alî tenê yek pêvek hebe, hûn dikarin di hundurê yek yek de çend bişkok hebin .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>

Navên ku di Bootstrap-ê de têne peyda kirin, bi .navçîna bingehîn dest pê dikin, û hem jî dewletên hevbeş nîşana parvekirî ne. Dersên guhêrbar biguhezînin da ku di navbera her şêwazê de biguhezînin.

Bikaranîna navên ji bo panelên tabloyan pêveka tabloyên JavaScript-ê hewce dike

Ji bo tabloyên bi deverên tabloyî, divê hûn pêveka JavaScript -ê bikar bînin . Nîşankirin dê roletaybetmendiyên din û ARIA jî hewce bike - ji bo hûrguliyên bêtir nîşana nimûneya pêvekê bibînin.

Navên ku wekî navîgasyon têne bikar anîn bigihînin

Ger hûn nav-ê bikar tînin da ku barek navîgasyon peyda bikin, pê ewle bin ku hûn navek li role="navigation"konteynera dêûbavê ya herî mantiqî ya lê zêde bikin <ul>, an jî <nav>hêmanek li dora tevaya navîgasyonê bipêçin. Rolê li <ul>xwe zêde nekin, ji ber ku ev ê rê li ber ku ew wekî navnîşek rastîn ji hêla teknolojiyên arîkar ve were ragihandin.

Tabs

Bala xwe bidin polê çîna bingehîn .nav-tabshewce dike ..nav

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

Pills

Heman HTML-ê bistînin, lê li şûna wê bikar .nav-pillsbînin:

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

Her weha heb bi rengek vertîkal têne stendin. Tenê lê zêde bike .nav-stacked.

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

Mafdar kirin

Li ser ekranên ji 768px firehtir bi rehetî tab an hebên bi firehiya dêûbavê xwe wekhev bikin .nav-justified. Li ser ekranên piçûktir, lînkên navokê têne hev kirin.

Zencîreyên navbarê yên rastdar niha nayên piştgirî kirin.

Navên safarî û bersivdar ên rastdar

Ji v9.1.2-ê ve, Safari xeletiyek destnîşan dike ku tê de mezinbûna geroka we bi rengek horizontî dibe sedema xeletiyên vegotinê di nav-ya rastdar de ku bi nûvekirinê têne paqij kirin. Ev xeletî di mînaka nav-ya rastdar de jî tê xuyang kirin.

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

Girêdanên astengdar

Ji bo her hêmanek navokê (tab an heb), .disabledji bo girêdanên gewr û bê bandorên hover zêde bikin .

Fonksiyona girêdanê bandor nebû

Ev çîn dê tenê xuyangê <a>''yê biguherîne, ne fonksiyona wê. JavaScript-a xwerû bikar bînin da ku girêdanên vir neçalak bikin.

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

Bikaranîna peldankan

Pêşekên daketinê bi HTML-ya piçûktir û pêveka JavaScript -a daketî zêde bikin.

Tabên bi daxistinan

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

<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 hêmanên meta yên bersivdar in ku ji bo serîlêdana an malpera we wekî sernavên navîgasyonê kar dikin. Ew di dîmenên mobîl de dest bi hilweşandinê dikin (û têne veguheztin) û her ku firehiya dîtina berdest zêde dibe dibin horîzontal.

Zencîreyên navbarê yên rastdar niha nayên piştgirî kirin.

Naveroka zêde

Ji ber ku Bootstrap nizane ku naveroka di navbara we de çiqas cîh hewce dike, dibe ku hûn bi kêşana naverokê di rêzek duyemîn de bikevin nav pirsgirêkan. Ji bo çareserkirina vê, hûn dikarin:

Mîqdar an firehiya hêmanên navbarê kêm bikin.
Hin hêmanên navbarê li hin pîvanên ekranê bi karanîna dersên kargêriya bersivdar veşêrin .
Xala ku tê de navbara we di navbera moda hilweşandî û horizontî de diguhere biguhezînin. Guherbarê @grid-float-breakpointxweş bikin an jî pirsa medyaya xwe zêde bikin.

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

Bi guheztina nivîsê ji bo an <img>. Ji ber ku .navbar-brandpeldank û bilindahiya xwe heye, dibe ku hûn hewce ne ku li gorî wêneya xwe hin CSS-ê bişopînin.

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

Naveroka formê di hundurê de .navbar-formji bo hevrêziya vertîkal a rast û behreya hilweşandî di dîmenderên teng de bi cih bikin. Vebijarkên lihevkirinê bikar bînin da ku biryar bidin ku ew di nav naveroka navbarê de li ku dimîne.

Wekî ku serî hilde, .navbar-formpir koda xwe bi .form-inlineriya mixin re parve dike. Hin kontrolên formê, mîna komên têketinê, dibe ku hewce bike ku firehiyên sabît bi rêkûpêk di navbarekê de werin xuyang kirin.

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

Her tim etîketan lê zêde bike

Ger hûn ji bo her têketinê etîketek negirin dê xwendevanên ekranê bi formên we re bibin pirsgirêk. Ji bo van formên hundurîn, hûn dikarin etîketan bi karanîna .sr-onlypolê veşêrin. Rêbazên din ên alternatîf ên peydakirina nîşanek ji bo teknolojiyên arîkar hene, wek mînak aria-label, aria-labelledbyan titletaybetmendî. Ger yek ji van tune be, xwendevanên ekranê dibe ku serî li karanîna placeholdertaybetmendiyê bidin, heke hebe, lê bala xwe bidin ku karanîna placeholderwekî cîhgirtina rêbazên din ên nîşankirinê nayê şîret kirin.

.navbar-btnDersê li <button>hêmanên ku di nav a -yê de niştecî ne lê zêde bikin da <form>ku wan di navbarê de vertîkal bikin navend.

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

Rêzikên nivîsê di hêmanekê de bi .navbar-text, bi gelemperî li ser <p>etîketekê ji bo rêber û rengê rast bipêçin.

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

Ji bo kesên ku girêdanên standard bikar tînin ku ne di nav pêkhateya navîgasyonê ya birêkûpêk de ne, .navbar-linkpolê bikar bînin da ku rengên rast ji bo vebijarkên navbara xwerû û berevajî zêde bikin.

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

Zencîreyên nav, form, bişkok, an nivîsê, bi karanîna çînên karûbar .navbar-leftan bikêrhatî hev bikin. .navbar-rightHer du çîn dê di rêça diyarkirî de floatek CSS zêde bikin. Mînakî, ji bo rêzkirina girêdanên navikê, wan <ul>bi pola karûbar a têkildar re ku hatî sepandin veqetînin.

Van ders guhertoyên tevlihev-ed ên .pull-leftû .pull-rightne, lê ew ji pirsên medyayê re têne veqetandin ji bo hêsankirina hêmanên navbarê li seranserê mezinahiyên cîhazê.

Naveroka navbara navbarê an navend û pêvekê lê zêde bikin .navbar-fixed-topû têxin nav..container.container-fluid

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

Paqijkirina laş pêdivî ye

Navbara sabît dê naveroka weya din bigire, heya ku hûn paddingli jorê zêde bikin <body>. Nirxên xwe biceribînin an pişka meya jêrîn bikar bînin. Serişte: Bi xwerû, navbar 50px bilind e.

body { padding-top: 70px; }

Piştrast bikin ku vê yekê piştî Bootstrap CSS-ya bingehîn têxin nav xwe.

Naveroka navbara navbarê an navend û pêvekê lê zêde bikin .navbar-fixed-bottomû têxin nav..container.container-fluid

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

Paqijkirina laş pêdivî ye

Navbara rastkirî dê naveroka weya din bigire, heya ku hûn paddingli binê pelê zêde nekin <body>. Nirxên xwe biceribînin an pişka meya jêrîn bikar bînin. Serişte: Bi xwerû, navbar 50px bilind e.

body { padding-bottom: 70px; }

Piştrast bikin ku vê yekê piştî Bootstrap CSS-ya bingehîn têxin nav xwe.

Navbarek tev-fireh biafirînin ku bi rûpelê re bizivirîne û naverokek navbar û navbarê pêve bike .navbar-static-top..container.container-fluid

Berevajî .navbar-fixed-*dersan, hûn ne hewce ne ku tu peldankê li ser biguhezînin body.

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

Bi lêzêdekirina dîmena navbarê biguherînin .navbar-inverse.

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

Breadcrumbs

Cihê rûpela heyî di nav hiyerarşiyek navîgasyonê de destnîşan bikin.

Veqetandî bixweber di nav CSS-ê de têne zêdekirin :beforeû content.

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

Pagination

Ji bo malper an sepana xwe bi hêmana rûpela pir-rûpelî, an alternatîfa pagerê ya hêsan, lînkên pagasyonê peyda bikin.

Rûpelkirina xwerû

Rûpelkirina hêsan ku ji hêla Rdio ve hatî îlhama kirin, ji bo serîlêdan û encamên lêgerînê mezin e. Bloka mezin zehmet e ku meriv ji bîr neke, bi hêsanî tê pîvandin, û deverên klîk ên mezin peyda dike.

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

Etîketkirina pêkhateya pagasyonê

Pêdivî ye ku hêmanek pagasyonê di hêmanekê de were pêçandin <nav>da ku ew wekî beşa navîgasyonê ji xwendevanên ekranê û teknolojiyên din ên arîkar re were nasîn. Wekî din, ji ber ku rûpelek îhtîmal e ku ji berê de bêtir ji yek beşên navîgasyonê yên weha hebe (wekî navîgasyon seretayî di serî de, an navîgasyonek kêlekê), tê pêşniyar kirin ku ji aria-labelbo ya <nav>ku mebesta wê nîşan dide diyariyek peyda bike. Mînakî, heke pêkhateya pagasyonê ji bo gera di navbera komek encamên lêgerînê de were bikar anîn, dibe ku nîşanek guncan be aria-label="Search results pages".

Dewletên astengdar û çalak

Girêdan ji bo rewşên cûda têne xweş kirin. Ji .disabledbo lînkên ku nayên klîk kirin û .activeji bo nîşankirina rûpela heyî bikar bînin.

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

Em pêşniyar dikin ku hûn lengerên çalak an neçalak bi guhezînin <span>, an di tîrên berê/paşîn de lengerê ji holê rakin, ji bo ku hûn fonksiyona klîkbûnê ji holê rakin dema ku şêwazên mebest diparêzin.

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

Mezinbûn

Dixwazin rûpela mezin an piçûktir bikin? Zêde bikin .pagination-lgan .pagination-smji bo pîvanên din.

<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

Zencîreyên zû yên berê û yên paşîn ên ji bo pêkanînên rûpela hêsan ên bi nîşankirin û şêwazên sivik. Ew ji bo malperên hêsan ên mîna blogan an kovaran pir baş e.

Mînakek standard

Bi xwerû, navendên pager girêdidin.

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

Girêdanên lihevkirî

Alternatîf, hûn dikarin her lînkê bi aliyan ve hevûdu bikin:

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

Dewlet neçalak Bijarî

Girêdanên Pager di heman demê de .disabledçîna karanîna giştî ya ji pagasyonê bikar tînin.

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

Mînak

Mînak sernavê Nû

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

Guhertoyên berdest

Yek ji dersên guhêrbar ên ku li jêr hatine destnîşan kirin lê zêde bikin da ku xuyangê etîketekê biguhezînin.

Xetereya Hişyarî Agahdariya Serkeftinê ya Bingehîn

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

Bi tonên etîketan hene?

Dema ku hûn di nav konteynirek teng de bi dehan etîketên hundurîn hebin, ku her yek inline-blockhêmanek xwe (wek îkonek) heye, dibe ku pirsgirêk çêbibin. Riya li dora vê danînê ye display: inline-block;. Ji bo çarçoveyê û nimûne, # 13219 bibînin .

<span class="badge">Bi zêdekirina a li ser girêdan, navên Bootstrap, û hêj bêtir tiştên nû an nexwendî bi hêsanî ronî bikin.

Inbox42

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

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

Xwe dihele

Dema ku tiştên nû an nexwendî tune bin, bi :emptyşertê ku naverok di hundurê de tune be, nîşanek bi hêsanî têk diçin (bi rêya hilbijêra CSS-ê).

Lihevhatina cross-browser

Nîşan dê di Internet Explorer 8-ê de bixwe neyên hilweşandin ji ber ku ew piştgirî ji :emptyhilbijêrê re tune.

Bi dewletên nav çalak re adaptî dibe

Ji bo danîna nîşanan di dewletên çalak de di navîgasyonên heban de şêwazên çêkirî hene.

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

Parçeyek sivik, maqûl ku dikare vebijarkî tevahiya dîmenderê dirêj bike da ku naveroka sereke li ser malpera we nîşan bide.

Silav, dinya!

Ev yekîneyek qehremanek hêsan e, pêkhateyek bi şêwaza jumbotron e ku ji bo balkişandina zêde li naverok an agahdariya diyarkirî ye.

Bêtir hîn bibin

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

Ji bo ku jumbotron bi firehiya tam, û bêyî kuçên girover çêbike, wê li derveyê hemî .containers-an bi cîh bikin û li şûna wê navek lê zêde bikin .container.

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

Kevirek hêsan ji bo ku h1bi guncan veqetîne û beşên naverokê li ser rûpelekê dabeş bike. Ew dikare hêmana xwerû ya h1'' small, û hem jî piraniya pêkhateyên din (bi şêwazên zêde) bikar bîne.

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

Pergala torê ya Bootstrap-ê bi hêmana hûrgelê dirêj bikin da ku bi hêsanî torên wêne, vîdyoy, nivîs, û hêj bêtir nîşan bidin.

Ger hûn li pêşandana mîna Pinterest-ê ya piçûkên bi bilindî û/an firehiyên cihêreng digerin, hûn ê hewce bikin ku pêvekek sêyemîn-ê wekî Masonry , Isotope , an Salvattore bikar bînin .

Mînakek standard

Ji hêla xwerû, piçûkên Bootstrap-ê têne sêwirandin ku wêneyên girêdayî bi nîşana herî hindik hewce nîşan bidin.

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

naveroka Custom

Bi piçek nîşankirina zêde, gengaz e ku meriv her cûre naveroka HTML-ê mîna sernav, paragraf, an bişkokan li piçûkan zêde bike.

Labelê thumbnail

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

Pişkov Pişkov

Labelê thumbnail

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

Pişkov Pişkov

Labelê thumbnail

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

Pişkov Pişkov

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

Bi çend peyamên hişyariyê yên berdest û maqûl re ji bo kiryarên bikarhêner ên tîpîk peyamên nerînên konteksî peyda bikin.

Examples

Ji bo peyamên hişyariya bingehîn , her nivîsê û bişkokek betalkirinê ya vebijarkî .alertû yek ji çar çînên kontekstê (mînak, ) bipêçin..alert-success

No class default

Alerts dersên xwerû nînin, tenê çînên bingehîn û guhêrbar hene. Hişyariya gewr a xwerû pir zêde wate nake, ji ber vê yekê hûn hewce ne ku celebek bi navgîniya pola kontekstê ve diyar bikin. Ji serkeftin, agahdarî, hişyarî, an xetereyê hilbijêrin.

Aferîn! Te ev peyama hişyariya girîng bi serkeftî xwend.

Serê xwe! Ev hişyarî hewceyê bala we ye, lê ew ne pir girîng e.

Gazî! Çêtir xwe kontrol bikin, hûn pir baş xuya nakin.

Oh snap! Hin tiştan biguherînin û dîsa biceribînin.

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

Alerts dismissible

Bi lê zêdekirina .alert-dismissiblebişkokek vebijarkî û girtina li ser her hişyariyê ava bikin.

Pêveka hişyariya JavaScriptê hewce dike

Ji bo bi tevahî xebitandin, alerjiyên nederbasdar, divê hûn pêveka JavaScript a hişyariyan bikar bînin .

Gazî! Çêtir xwe kontrol bikin, hûn pir baş xuya nakin.

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

Di hemî cîhazan de tevgera rast piştrast bikin

Bawer bikin ku <button>hêmanek bi data-dismiss="alert"taybetmendiya daneyê bikar bînin.

Girêdanên di hişyariyê de

.alert-linkDersa karûbar bikar bînin da ku zû di hundurê her hişyariyê de girêdanên rengîn ên lihevhatî peyda bikin.

Aferîn! Te ev peyama hişyariya girîng bi serkeftî xwend .

Serê xwe! Ev hişyarî hewceyê bala we ye , lê ew ne pir girîng e.

Gazî! Çêtir xwe kontrol bikin, hûn pir baş xuya nakin .

Oh snap! Hin tiştan biguherînin û dîsa biceribînin.

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

Li ser pêşkeftina xebatek an çalakiyek bi barên pêşkeftinê yên hêsan lê maqûl re bertekên nûjen peyda bikin.

Lihevhatina cross-browser

Barên pêşkeftinê veguheztin û anîmasyonên CSS3 bikar tînin da ku hin bandorên xwe bi dest bixin. Van taybetmendiyan di Internet Explorer 9 û jêr an guhertoyên kevntir ên Firefox-ê de nayên piştgirî kirin. Opera 12 anîmasyon piştgirî nake.

Lihevhatina Polîtîkaya Ewlekariya Naverokê (CSP).

Ger malpera we xwedan Siyaseta Ewlekariya Naverokê (CSP) ye ku destûrê nade style-src 'unsafe-inline', wê hingê hûn ê nikaribin styletaybetmendiyên hundurîn bikar bînin da ku firehiyên bara pêşkeftinê wekî ku di mînakên me yên jêrîn de têne destnîşan kirin destnîşan bikin. Rêbazên alternatîf ji bo danîna firehiyên ku bi CSP-yên hişk re hevaheng in, karanîna JavaScriptek xwerû ya piçûk (ku destnîşan dike element.style.width) an jî karanîna çînên CSS-ê yên xwerû hene.

Mînaka bingehîn

Barê pêşkeftina xwerû.

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

Bi labelê

<span>Dersa bi .sr-onlyçîna ji hundurê barika pêşkeftinê derxînin da ku rêjeyek xuyang nîşan bide .

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>

Ji bo ku pê ewle bibin ku nivîsa etîketê ji sedî kêm jî xwîndar bimîne, bifikirin ku a min-widthli bara pêşkeftinê zêde bikin.

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>

Alternatîfên hevoksaziyê

Barên pêşkeftinê ji bo şêwazên domdar hin heman bişkok û dersên hişyar bikar tînin.

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

Striped

Ji bo afirandina bandorek xerîdar gradientek bikar tîne. Di IE9 û jêrîn de tune.

<div class="progress">
  <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
    <span class="sr-only">40% Complete (success)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <span class="sr-only">20% Complete</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
    <span class="sr-only">60% Complete (warning)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
    <span class="sr-only">80% Complete (danger)</span>
  </div>
</div>

Animated

Zêde .activebikin .progress-bar-stripedda ku rêzikên rast ber bi çepê zindî bikin. Di IE9 û jêrîn de tune.

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

Stacked

Gelek baran bixin nav hev .progressda ku wan li hev bixin.

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

Şêweyên tiştên razber ên ji bo avakirina cûrbecûr pêkhateyan (mîna şîroveyên blogê, Tweet, hwd.) ku li kêleka naveroka nivîsê wêneyek rêzkirî ya çep an rast vedihewîne.

Medyaya xwerû

Medyaya xwerû hêmanek medyayê (wêne, vîdyo, deng) li çep an rastê bloka naverokê nîşan dide.

Sernavê medyayê

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

Sernavê medyayê

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

Sernavê medyaya 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 li faucibus.

Sernavê medyayê

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.

Sernavê medyayê

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>

Çîn .pull-leftû .pull-rightdi heman demê de hene û berê wekî beşek ji hêmana medyayê hatine bikar anîn, lê ji bo wê karanîna wekî v3.3.0-ê hatine qewirandin. Ew bi qasî .media-leftû -yê hevwate .media-rightne, ji bilî ku .media-rightdivê li dû ya .media-bodydi html-ê de bêne danîn.

Lihevkirina medyayê

Wêneyên an medyayên din dikarin li jor, navîn, an jêrîn werin rêz kirin. Vebijêrk li jor rêzkirî ye.

Medya lihevhatî ya jorîn

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

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

Medya lihevhatî ya navîn

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

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

Medyaya li jêr rêzkirî

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

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis disparturient 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>

Lîsteya medyayê

Bi piçek nîşanek zêde, hûn dikarin medyayê di hundurê navnîşê de bikar bînin (ji bo mijarên şîroveyan an navnîşên gotaran bikêr e).

Sernavê medyayê

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.

Sernavê medyaya 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.

Sernavê medyaya 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.

Sernavê medyaya 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>

Komên navnîşê ji bo nîşandana ne tenê navnîşên hêsan ên hêmanan, lê yên tevlihev ên bi naveroka xwerû re pêkhateyek maqûl û hêzdar in.

Mînaka bingehîn

Koma navnîşê ya herî bingehîn tenê navnîşek nerêkûpêk e ku bi hêmanên navnîşê, û çînên rast e. Li ser wê bi vebijarkên ku li pey têne çêkirin, an jî CSS-ya xweya ku hewce ye ava bikin.

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

Parçeya nîşanan li her tiştê koma navnîşê zêde bikin û ew ê bixweber li milê rastê were danîn.

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>

Tiştên girêdayî

Tiştên komê yên navnîşê girêdin bi karanîna nîşaneyên ankerê li şûna tomarên navnîşê (ev jî tê wateya dêûbav <div>li şûna yekî <ul>). Ne hewce ye ku dêûbavên kesane li dora her elementê.

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

Tiştên bişkokê

Tiştên koma navnîşê dibe ku li şûna tomarên navnîşê bişkok bin (ku di heman demê de tê wateya dêûbav <div>li şûna yekî jî <ul>). Ne hewce ye ku dêûbavên kesane li dora her elementê. Li vir dersên standard bikar neynin..btn

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

Tiştên astengdar

Ji bo ku neçalak xuya bike wê li a-yê zêde bike gewr .disabled..list-group-item

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

Dersên hevoksaziyê

Ji bo şêwazên navnîşên navnîşan, xwerû an ve girêdayî, dersên kontekstê bikar bînin. Dewlet jî tê de .activeye.

Dapibus ac facilisis in
Cras sit amet nibh libero
Porta ac consectetur ac
Vestibulum li eros

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

naveroka Custom

Nêzîkî her HTML-ê di hundurê de lê zêde bikin, tewra ji bo komên navnîşa girêdayî mîna ya jêrîn.

Lîsteya sernavê komê

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

Lîsteya sernavê komê

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

Lîsteya sernavê komê

Donec id elit non mi porta gravida at 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>

Digel ku her gav ne hewce ye, carinan hûn hewce ne ku DOM-a xwe têxin qutiyek. Ji bo wan rewşan, beşa panelê biceribînin.

Mînaka bingehîn

Ji hêla xwerû, hemî ku .paneldike ev e ku hin sînorê bingehîn û peldankê bicîh bîne da ku hin naverokê bigire.

Mînaka panela bingehîn

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

Panela bi sernavê

Bi hêsanî konteynirek sernavê li panela xwe zêde bikin .panel-heading. Di heman demê de hûn dikarin her yekê jî têxin nav xwe <h1>- <h6>bi .panel-titleçînek ku sernavek pêşwextkirî lê zêde bikin. Lêbelê, mezinahiyên tîpên <h1>- <h6>ji hêla .panel-heading.

Ji bo rengdêra lînkê ya rast, pê ewle bin ku zencîreyan di nav sernivîsan de bi cîh bikin .panel-title.

Sernavê panelê bê sernav

Naveroka panelê

Sernavê panelê

Naveroka panelê

<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 bi pêlavê

Bişkokên an nivîsa duyemîn tê de bipêçin .panel-footer. Bala xwe bidinê ku pênûsên panelê dema ku guheztinên kontekstê bikar tînin reng û sînoran mîras nakin ji ber ku ne mebesta wan e ku ew li pêş bin.

Naveroka panelê

Fotera panelê

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

Alternatîfên hevoksaziyê

Mîna pêkhateyên din, bi lêzêdekirina yek ji çînên dewleta konteks bi hêsanî panelek ji çarçoveyek taybetî re watedartir bikin.

Sernavê panelê

Naveroka panelê

Sernavê panelê

Naveroka panelê

Sernavê panelê

Naveroka panelê

Sernavê panelê

Naveroka panelê

Sernavê panelê

Naveroka panelê

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

Bi tabloyan

Ji bo sêwiranek bêserûber .tabledi panelek de her bêsînor zêde bikin. Heke hebe .panel-body, em ji bo veqetandinê sînorek zêde li serê tabloyê zêde dikin.

Sernavê panelê

Hin naveroka panelê ya xwerû li vir. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.

#	Nav	Paşnav	Navê bikarhêner
1	Delîl	Otto	@mdo
2	Jacob	Thornton	@rûn
3	Larry	Çûk	@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>

Ger laşê panelê tune be, hêman bêyî navber ji serê panelê berbi tabloyê diçe.

Sernavê panelê

#	Nav	Paşnav	Navê bikarhêner
1	Delîl	Otto	@mdo
2	Jacob	Thornton	@rûn
3	Larry	Çûk	@twitter

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

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

Bi komên lîsteyan

Di nav her panelê de bi hêsanî komên navnîşên tev-fireh bixin nav xwe.

Sernavê panelê

Hin naveroka panelê ya xwerû li vir. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.

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

Destûrê bidin gerokan ku li gorî firehiya bloka xweya xweya xwe pîvanên vîdyoyê an pêşandan diyar bikin bi afirandina rêjeyek xwerû ya ku dê li ser her cîhazê bi rêkûpêk pîvandin.

Rêgez rasterast li ser <iframe>, <embed>, <video>, û <object>hêmanan têne sepandin; .embed-responsive-itemDema ku hûn dixwazin şêwazê ji bo taybetmendiyên din bihevre bikin , vebijarkî çînek dûvikek eşkere bikar bînin .

Pro-Tip! Hûn ne hewce ne ku hûn frameborder="0"di nav <iframe>s-yên xwe de bicîh bikin ji ber ku em wê ji bo we derbas dikin.

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

Li ser hêmanek baş wekî bandorek hêsan bikar bînin da ku wê bandorek hundurîn bidin.

Binêre, ez di bîrekê de me!

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

Dersên Bijarî

Bi du çînên guhêrbar ên vebijarkî, pêlav û quncikên dorpêçkirî kontrol bikin.

Binêre, ez di bîreke mezin de me!

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

Binêre, ez di bîrek piçûk de me!

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

Components

Glyphicons

Glyphên berdest

Çawa bikar bînin

Bi pêkhateyên din re tevlihev nekin

Tenê ji bo karanîna li ser hêmanên vala

Guhertina cîhê tîpa îkonê

îkonên gihîştî

Examples

Dropdowns

Mînak

Alignment

Dibe ku pozîsyonek zêde hewce bike

Lihevhatinek .pull-righthilweşandî

Headers

Divider

Tiştên menuya astengdar

Komên bişkojk

Pêşniyarên amûr û popoverên di komên bişkokê de mîhengek taybetî hewce dike

Rast bikin roleû etîketek peyda bikin

Mînaka bingehîn

Bişkojka toolbar

Mezinbûn

Nesting

Guhertoya vertîkal

Komên bişkojka rastdar

Desthilatdariya sînoran

IE8 û sînor

Bi <a>hêmanan

Girêdanên wekî bişkokan tevdigerin

Bi <button>hêmanan

Daxistina bişkojan

Girêdana pêvekê

Daxistina bişkojka yekane

Daxistina bişkojka Split

Mezinbûn

Guhertoya avêtinê

komên Input

Textual <input>s tenê

Pêşniyarên amûr û popoverên di komên têketinê de mîhengek taybetî hewce dike

Bi pêkhateyên din re tevlihev nekin

Her tim etîketan lê zêde bike

Mînaka bingehîn

Mezinbûn

Qutiyên kontrolê û pêvekên radyoyê

Addons Button

Bişkokên bi daxistinan

Bişkojkên dabeşkirî

Bişkokên pirjimar

Navs

Bikaranîna navên ji bo panelên tabloyan pêveka tabloyên JavaScript-ê hewce dike

Navên ku wekî navîgasyon têne bikar anîn bigihînin

Tabs

Pills

Mafdar kirin

Navên safarî û bersivdar ên rastdar

Girêdanên astengdar

Fonksiyona girêdanê bandor nebû

Bikaranîna peldankan

Tabên bi daxistinan

Pills bi dropdown

Navbar

Navbara xwerû

Naveroka zêde

Pêveka JavaScriptê hewce dike

Guhertina xala veqetandina navbara desta ya têkçûyî

Navbaran bigihînin

Wêneyê brandê

Forms

Hişyariyên cîhaza mobîl

Her tim etîketan lê zêde bike

Buttons

Bikaranîna-tewre-taybetî

Nivîstok

Girêdanên ne-nav

Berhevkirina pêkhateyan

Rasthevkirina gelek pêkhateyan

Li jor rast kirin

Paqijkirina laş pêdivî ye

Li jêr sabît kirin

Lihevhatinek `.pull-right`hilweşandî

Rast bikin `role`û etîketek peyda bikin

Bi `<a>`hêmanan

Bi `<button>`hêmanan

Textual `<input>`s tenê