Zêdetirî bi dehan hêmanên ji nû ve bi kar anîn hatine çêkirin ku ji bo îkonografiyê, dakêşan, komên têketinê, navîgasyon, hişyarî, û hêj bêtir peyda bikin.
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.
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.
Î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.
Şaşî:Navnîşanek e-nameyek derbasdar binivîse
Dropdowns
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.
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.
Headers
Sernavek lê zêde bikin da ku beşên çalakiyan di her menuya dakêşanê de nîşan bikin.
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.
Bişkojka toolbar
Komên ji <div class="btn-group">bo <div class="btn-toolbar">pêkhateyên tevlihevtir tevlihev bikin.
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.
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
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 .
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.
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ê.
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.
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.
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.
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.
Bişkokên bi daxistinan
Bişkojkên dabeşkirî
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.
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.
Tabs
Bala xwe bidin polê çîna bingehîn .nav-tabshewce dike ..nav
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.
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:
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.
Wêneyê marka
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.
Forms
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.
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.
Buttons
.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.
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.
Nivîstok
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.
Girêdanên ne-nav
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.
Berhevkirina pêkhateyan
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.
Li jor rast kirin
Naveroka navbara navbarê an navend û pêvekê lê zêde bikin .navbar-fixed-topû têxin nav..container.container-fluid
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.
Piştrast bikin ku vê yekê piştî Bootstrap CSS-ya bingehîn têxin nav xwe.
Li jêr sabît kirin
Naveroka navbara navbarê an navend û pêvekê lê zêde bikin .navbar-fixed-bottomû têxin nav..container.container-fluid
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.
Piştrast bikin ku vê yekê piştî Bootstrap CSS-ya bingehîn têxin nav xwe.
Top statîk
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.
Navbara berevajîkirî
Bi lêzêdekirina dîmena navbarê biguherînin .navbar-inverse.
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.
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.
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.
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.
Mezinbûn
Dixwazin rûpela mezin an piçûktir bikin? Zêde bikin .pagination-lgan .pagination-smji bo pîvanên din.
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.
Girêdanên lihevkirî
Alternatîf, hûn dikarin her lînkê bi aliyan ve hevûdu bikin:
Dewlet neçalak Bijarî
Girêdanên Pager di heman demê de .disabledçîna karanîna giştî ya ji pagasyonê bikar tînin.
Labels
Mînak
Mînak sernavê Nû
Mînak sernavê Nû
Mînak sernavê Nû
Mînak sernavê Nû
Mînak sernavê Nû
Mînak sernavê Nû
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
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.
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.
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.
Sernavê rûpelê Mînak Bintekst ji bo sernivîsê
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.
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.
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.
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.
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.
Alerts dismissible
Bi lê zêdekirina .alert-dismissiblebişkokek vebijarkî û girtina li ser her hişyariyê ava bikin.
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
Bi labelê
<span>Dersa bi .sr-onlyçîna ji hundurê barika pêşkeftinê derxînin da ku rêjeyek xuyang nîşan bide .
60%
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%
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)
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)
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
Stacked
Gelek baran bixin nav hev .progressda ku wan li hev bixin.
35% Temam (serkeftin)
20% Temam (hişyarî)
10% Temam (xetere)
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.
Çî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.
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.
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
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
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ê.
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
Tiştên astengdar
Ji bo ku neçalak xuya bike wê li a-yê zêde bike gewr .disabled..list-group-item
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
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ê
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ê
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ê
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
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
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
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.
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!
Dersên Bijarî
Bi du çînên guhêrbar ên vebijarkî, pêlav û quncikên dorpêçkirî kontrol bikin.