Glyphicons

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

<div class="alert alert-danger" role="alert">
  <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
  <span class="sr-only">Error:</span>
  Enter a valid email address
</div>

Dropdowns

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

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>

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.

Dibe ku pozîsyonek zêde hewce bike

Dropdown bixweber bi navgîniya CSS-ê di nav herikîna normal ya belgeyê de têne cîh kirin. Ev tê vê wateyê ku dibe ku dakêşan ji hêla dêûbavên xwedan hin overflowtaybetmendiyên xwe ve werin qut kirin an jî li derveyî sînorên dîmenderê xuya bibin. Van pirsgirêkan bi tena serê xwe gava ku derdikevin çareser bikin.

Deprecated.pull-right hilweşandî

Ji v3.1.0-ê pê ve, me li .pull-rightser pêşekên dakêşanê paşguh kir. Ji bo rast-rastkirina menuyekê, bikar bînin .dropdown-menu-right. Di navbarê de hêmanên nav-ê yên rastgir guhertoyek mixin-ê ya vê polê bikar tînin da ku menuyê bixweber hevrêz bikin. Ji bo hilweşandina wê, bikar bînin .dropdown-menu-left.

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

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>

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>

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>

Komên bişkojk

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şkokên 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>

Bişkojka toolbar

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.

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

Daxistina bişkojan

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>

komên Input

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.

@

@example.com

$ .00

https://example.com/users/
<div class="input-group">
  <span class="input-group-addon" id="basic-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>

<div class="input-group">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
  <span class="input-group-addon" id="basic-addon2">@example.com</span>
</div>

<div class="input-group">
  <span class="input-group-addon">$</span>
  <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
  <span class="input-group-addon">.00</span>
</div>

<label for="basic-url">Your vanity URL</label>
<div class="input-group">
  <span class="input-group-addon" id="basic-addon3">https://example.com/users/</span>
  <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>

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>

Navs

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.

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>

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>

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>

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>

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

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:

  1. Mîqdar an firehiya hêmanên navbarê kêm bikin.
  2. Hin hêmanên navbarê li hin pîvanên ekranê bi karanîna dersên kargêriya bersivdar veşêrin .
  3. 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.

Pêveka JavaScriptê hewce dike

Ger JavaScript neçalak be û porta dîtinê têra xwe teng be ku navbar hilweşe, ne gengaz e ku meriv navbarê berfireh bike û naverokê di hundurê de bibîne .navbar-collapse.

Navbara bersivdar hewce dike ku pêveka hilweşandinê di guhertoya weya Bootstrap de were bicîh kirin.

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

Navbar di nav dîmena xweya desta ya vertîkal de dema ku dîmendera wê ji tengtir be @grid-float-breakpoint, diherike, û gava ku dîmendera herî kêm @grid-float-breakpointbi firehî be, berbi dîmena xweya ne-mobîl a horizontal ve dibe. Vê guhêrbar di çavkaniya Kêm de eyar bikin da ku dema navbar hilweşe/berfireh bibe kontrol bike. Nirxa xwerû ye 768px(perçeya herî piçûk "biçûk" an "tablet").

Navbaran bigihînin

Bawer bikin ku <nav>hêmanek bikar bînin an jî, heke hêmanek gelemperîtir wekî <div>, bikar bînin, role="navigation"navbarek li her navbarê zêde bikin da ku ew bi eşkere wekî herêmek berbiçav ji bo bikarhênerên teknolojiyên arîkar nas 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>

Hişyariyên cîhaza mobîl

Di derbarê karanîna kontrolên formê de di nav hêmanên sabît ên li ser cîhazên mobîl de hin hişyarî hene. Ji bo hûragahiyan li belgeyên piştevaniya geroka me binêrin.

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>

Bikaranîna-tewre-taybetî

Mîna çînên bişkojka standard , .navbar-btndikare li ser <a>û <input>hêmanan were bikar anîn. Lêbelê, ne .navbar-btnjî çînên bişkojka standard divê li ser <a>hêmanên di hundurê de werin bikar anîn .navbar-nav.

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

Rasthevkirina gelek pêkhateyan

.navbar-rightNavbar naha bi gelek çînên xwe re sînorek heye . Ji bo naveroka cîhê rast, em li ser .navbar-righthêmana paşîn marjînalek neyînî bikar tînin. Gava ku gelek hêman hene ku wê polê bikar tînin, ev marjîn wekî ku tê xwestin naxebitin.

Dema ku em karibin wê hêmanê di v4 de ji nû ve binivîsin em ê vê yekê ji nû ve binirxînin.

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>

Pêvekirina laş hewce 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>

Pêvekirina laş hewce 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>

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>

Labels

Mînak

Mînak sernavê

Mînak sernavê

Mînak sernavê

Mînak sernavê

Mînak sernavê
Mînak sernavê
<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 .

Badges

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

Jumbotron

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>

Sernavê rûpelê

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>

Thumbnails

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.

100% x200

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

100% x200

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

100% x200

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>

Alerts

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.

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

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

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

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

Barên pêşveçûnê

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

60% Temam
<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.

40% Temam (serkeftin)
20% Temam
60% Temam (hişyarî)
80% Temam (xetere)
<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.

40% Temam (serkeftin)
20% Temam
60% Temam (hişyarî)
80% Temam (xetere)
<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.

45% Temam
<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.

35% Temam (serkeftin)
20% Temam (hişyarî)
10% Temam (xetere)
<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>

Objekt Media

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

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

Lîsteya koma

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

<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

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

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

Panels

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>

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

Embed bersivdar

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>

Wells

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>