Aktar minn tużżana komponenti li jistgħu jerġgħu jintużaw mibnija biex jipprovdu ikonografija, dropdowns, gruppi ta 'input, navigazzjoni, twissijiet, u ħafna aktar.
Glyphicons
Glifi disponibbli
Jinkludi aktar minn 250 glyphs fil-format tat-tipa mis-sett Glyphicon Halflings. Glyphicons Halflings normalment mhumiex disponibbli b'xejn, iżda l-kreatur tagħhom għamilhom disponibbli għal Bootstrap mingħajr ħlas. Bħala grazzi, nitolbu biss li tinkludi link lura għal Glyphicons kull meta jkun possibbli.
glyphicon glyphicon-asterisk
glyphicon glyphicon-plus
glyphicon glyphicon-euro
glyphicon glyphicon-eur
glyphicon glyphicon-minus
glyphicon glyphicon-sħaba
glyphicon glyphicon-envelope
glyphicon glyphicon-lapes
glyphicon glyphicon-ħġieġ
glyphicon glyphicon-mużika
glyphicon glyphicon-tfittxija
glyphicon glyphicon-qalb
glyphicon glyphicon-istilla
glyphicon glyphicon-star-vojta
glyphicon glyphicon-utent
glyphicon glyphicon-film
glyphicon glyphicon-th-kbir
glyphicon glyphicon-th
glyphicon glyphicon-th-lista
glyphicon glyphicon-ok
glyphicon glyphicon-tneħħija
glyphicon glyphicon-zoom-in
glyphicon glyphicon-zoom-out
glyphicon glyphicon-off
glyphicon glyphicon-sinjal
glyphicon glyphicon-cog
glyphicon glyphicon-trash
glyphicon glyphicon-dar
glyphicon glyphicon-fajl
glyphicon glyphicon-ħin
glyphicon glyphicon-triq
glyphicon glyphicon-download-alt
glyphicon glyphicon-download
glyphicon glyphicon-upload
glyphicon glyphicon-inbox
glyphicon glyphicon-play-circle
glyphicon glyphicon-repeti
glyphicon glyphicon-aġġornament
glyphicon glyphicon-lista-alt
glyphicon glyphicon-lock
glyphicon glyphicon-bandiera
glyphicon glyphicon-headphones
glyphicon glyphicon-volum-off
glyphicon glyphicon-volum-isfel
glyphicon glyphicon-volum-up
glyphicon glyphicon-qrcode
glyphicon glyphicon-barcode
glyphicon glyphicon-tag
glyphicon glyphicon-tags
glyphicon glyphicon-ktieb
glyphicon glyphicon-bookmark
glyphicon glyphicon-istampar
glyphicon glyphicon-kamera
glyphicon glyphicon-font
glyphicon glyphicon-bold
glyphicon glyphicon-korsiv
glyphicon glyphicon-test-għoli
glyphicon glyphicon-test-wisa'
glyphicon glyphicon-align-xellug
glyphicon glyphicon-align-center
glyphicon glyphicon-align-lemin
glyphicon glyphicon-align-jiġġustifika
glyphicon glyphicon-lista
glyphicon glyphicon-inċiż-xellug
glyphicon glyphicon-inċiż-lemin
glyphicon glyphicon-facetime-video
glyphicon glyphicon-stampa
glyphicon glyphicon-mappa-markatur
glyphicon glyphicon-aġġustament
glyphicon glyphicon-lewn
glyphicon glyphicon-editja
glyphicon glyphicon-share
glyphicon glyphicon-check
glyphicon glyphicon-ċaqlaq
glyphicon glyphicon-pass-lura
glyphicon glyphicon-fast-backward
glyphicon glyphicon-lura
glyphicon glyphicon-play
glyphicon glyphicon-pawsa
glyphicon glyphicon-stop
glyphicon glyphicon-quddiem
glyphicon glyphicon-fast-forward
glyphicon glyphicon-pass 'il quddiem
glyphicon glyphicon-eject
glyphicon glyphicon-chevron-xellug
glyphicon glyphicon-chevron-lemin
glyphicon glyphicon-plus-sinjal
glyphicon glyphicon-minus-sinjal
glyphicon glyphicon-neħħi-sinjal
glyphicon glyphicon-ok-sinjal
glyphicon glyphicon-mistoqsija-sinjal
glyphicon glyphicon-info-sinjal
glyphicon glyphicon-screenshot
glyphicon glyphicon-neħħi-ċirku
glyphicon glyphicon-ok-ċirku
glyphicon glyphicon-projbizzjoni-ċirku
glyphicon glyphicon-vleġġa-xellug
glyphicon glyphicon-vleġġa-lemin
glyphicon glyphicon-vleġġa-up
glyphicon glyphicon-vleġġa-isfel
glyphicon glyphicon-share-alt
glyphicon glyphicon-resize-full
glyphicon glyphicon-resize-żgħir
glyphicon glyphicon-sinjal-exclamation
glyphicon glyphicon-rigal
glyphicon glyphicon-werqa
glyphicon glyphicon-nar
glyphicon glyphicon-għajn-miftuħa
glyphicon glyphicon-għajn-qrib
glyphicon glyphicon-sinjal-twissija
glyphicon glyphicon-pjan
glyphicon glyphicon-kalendarju
glyphicon glyphicon-random
glyphicon glyphicon-kumment
glyphicon glyphicon-kalamita
glyphicon glyphicon-chevron-up
glyphicon glyphicon-chevron-down
glyphicon glyphicon-retweet
glyphicon glyphicon-shopping-cart
glyphicon glyphicon-folder-qrib
glyphicon glyphicon-folder-miftuħ
glyphicon glyphicon-resize-vertikali
glyphicon glyphicon-resize-orizzontali
glyphicon glyphicon-hdd
glyphicon glyphicon-bullhorn
glyphicon glyphicon-qanpiena
glyphicon glyphicon-ċertifikat
glyphicon glyphicon-thumbs-up
glyphicon glyphicon-thumbs-down
glyphicon glyphicon-id-lemin
glyphicon glyphicon-id-xellug
glyphicon glyphicon-id-il fuq
glyphicon glyphicon-id-isfel
glyphicon glyphicon-ċirku-vleġġa-lemin
glyphicon glyphicon-ċirku-vleġġa-xellug
glyphicon glyphicon-ċirku-vleġġa-up
glyphicon glyphicon-ċirku-vleġġa-isfel
glyphicon glyphicon-globu
glyphicon glyphicon-wrench
glyphicon glyphicon-kompiti
glyphicon glyphicon-filtru
glyphicon glyphicon-bagalja
glyphicon glyphicon-fullscreen
glyphicon glyphicon-dashboard
glyphicon glyphicon-paperclip
glyphicon glyphicon-qalb-vojta
glyphicon glyphicon-link
glyphicon glyphicon-telefon
glyphicon glyphicon-pushpin
glyphicon glyphicon-usd
glyphicon glyphicon-gbp
glyphicon glyphicon-sort
glyphicon glyphicon-sort-by-alfabett
glyphicon glyphicon-sort-by-alphabet-alt
glyphicon glyphicon-sort-b'ordni
glyphicon glyphicon-sort-b'ordni-alt
glyphicon glyphicon-sort-by-attributes
glyphicon glyphicon-sort-by-attributes-alt
glyphicon glyphicon-mhux iċċekkjat
glyphicon glyphicon-expand
glyphicon glyphicon-kollass-isfel
glyphicon glyphicon-kollass-up
glyphicon glyphicon-log-in
glyphicon glyphicon-flash
glyphicon glyphicon-log-out
glyphicon glyphicon-tieqa-ġdida
glyphicon glyphicon-rekord
glyphicon glyphicon-jsalva
glyphicon glyphicon-miftuħ
glyphicon glyphicon-salvat
glyphicon glyphicon-importazzjoni
glyphicon glyphicon-esportazzjoni
glyphicon glyphicon-ibgħat
glyphicon glyphicon-floppy-disk
glyphicon glyphicon-floppy-salvat
glyphicon glyphicon-floppy-tneħħija
glyphicon glyphicon-floppy-salva
glyphicon glyphicon-floppy-miftuħ
glyphicon glyphicon-karta-kreditu
glyphicon glyphicon-trasferiment
glyphicon glyphicon-pożati
glyphicon glyphicon-header
glyphicon glyphicon-kompressat
glyphicon glyphicon-earphone
glyphicon glyphicon-phone-alt
glyphicon glyphicon-torri
glyphicon glyphicon-stats
glyphicon glyphicon-sd-video
glyphicon glyphicon-hd-video
glyphicon glyphicon-sottotitli
glyphicon glyphicon-ħoss-stereo
glyphicon glyphicon-ħoss-dolby
glyphicon glyphicon-ħoss-5-1
glyphicon glyphicon-ħoss-6-1
glyphicon glyphicon-ħoss-7-1
glyphicon glyphicon-copyright-mark
glyphicon glyphicon-marka-reġistrazzjoni
glyphicon glyphicon-cloud-download
glyphicon glyphicon-cloud-upload
glyphicon glyphicon-siġra-konifera
glyphicon glyphicon-siġra-deciduous
glyphicon glyphicon-cd
glyphicon glyphicon-save-file
glyphicon glyphicon-open-file
glyphicon glyphicon-livell up
glyphicon glyphicon-kopja
glyphicon glyphicon-pejst
glyphicon glyphicon-twissija
glyphicon glyphicon-equalizer
glyphicon glyphicon-king
glyphicon glyphicon-reġina
glyphicon glyphicon-pedina
glyphicon glyphicon-isqof
glyphicon glyphicon-kavallier
glyphicon glyphicon-baby-formula
glyphicon glyphicon-tinda
glyphicon glyphicon-blackboard
glyphicon glyphicon-sodda
glyphicon glyphicon-tuffieħ
glyphicon glyphicon-tħassar
glyphicon glyphicon-hourglass
glyphicon glyphicon-lampa
glyphicon glyphicon-duplikat
glyphicon glyphicon-piggy-bank
glyphicon glyphicon-imqass
glyphicon glyphicon-bitcoin
glyphicon glyphicon-btc
glyphicon glyphicon-xbt
glyphicon glyphicon-yen
glyphicon glyphicon-jpy
glyphicon glyphicon-rublu
glyphicon glyphicon-togħrok
glyphicon glyphicon-scale
glyphicon glyphicon-ice-lolly
glyphicon glyphicon-silġ-lolly-togħma
glyphicon glyphicon-edukazzjoni
glyphicon glyphicon-għażla-orizzontali
glyphicon glyphicon-għażla-vertikali
glyphicon glyphicon-menu-hamburger
glyphicon glyphicon-modal-tieqa
glyphicon glyphicon-żejt
glyphicon glyphicon-grain
glyphicon glyphicon-nuċċalijiet tax-xemx
glyphicon glyphicon-test-daqs
glyphicon glyphicon-test-kulur
glyphicon glyphicon-test-isfond
glyphicon glyphicon-object-align-top
glyphicon glyphicon-oġġett-allinja-qiegħ
glyphicon glyphicon-oġġett-allinja-orizzontali
glyphicon glyphicon-oġġett-allinja-xellug
glyphicon glyphicon-oġġett-allinjament-vertikali
glyphicon glyphicon-oġġett-allinja-lemin
glyphicon glyphicon-trijangolu-lemin
glyphicon glyphicon-trijangolu-xellug
glyphicon glyphicon-trijangolu-qiegħ
glyphicon glyphicon-trijangolu-top
glyphicon glyphicon-console
glyphicon glyphicon-superscript
glyphicon glyphicon-sottoskritt
glyphicon glyphicon-menu-xellug
glyphicon glyphicon-menu-lemin
glyphicon glyphicon-menu-isfel
glyphicon glyphicon-menu-up
Kif tuża
Għal raġunijiet ta' prestazzjoni, l-ikoni kollha jeħtieġu klassi bażi u klassi ta' ikoni individwali. Biex tuża, poġġi l-kodiċi li ġej kważi kullimkien. Kun żgur li tħalli spazju bejn l-ikona u t-test għall-ikkuttunar xieraq.
Tħallatx ma 'komponenti oħra
Il-klassijiet tal-ikoni ma jistgħux jiġu kkombinati direttament ma' komponenti oħra. M'għandhomx jintużaw flimkien ma' klassijiet oħra fuq l-istess element. Minflok, żid imdawwar <span>u applika l-klassijiet tal-ikoni għall- <span>.
Għall-użu biss fuq elementi vojta
Il-klassijiet tal-ikoni għandhom jintużaw biss fuq elementi li ma fihom l-ebda kontenut tat-test u li m'għandhomx elementi tfal.
Nibdlu l-post tat-tipa tal-ikona
Bootstrap jassumi li l-fajls tat-tipa tal-ikona jkunu jinsabu fid- ../fonts/direttorju, relattiv għall-fajls CSS ikkompilati. Li ċċaqlaq jew tibdel l-isem ta' dawk il-fajls tat-tipa tfisser li taġġorna s-CSS b'wieħed minn tliet modi:
Ibdel il- @icon-font-pathu/jew @icon-font-namevarjabbli fis-sors Inqas fajls.
Uża kwalunkwe għażla li taqbel l-aħjar mal-konfigurazzjoni speċifika tal-iżvilupp tiegħek.
Ikoni aċċessibbli
Verżjonijiet moderni ta 'teknoloġiji ta' assistenza se jħabbru kontenut iġġenerat CSS, kif ukoll karattri Unicode speċifiċi. Biex tevita output mhux intenzjonat u konfuż fil-qarrejja tal-iskrin (partikolarment meta l-ikoni jintużaw purament għal dekorazzjoni), aħna naħbuhom bl- aria-hidden="true"attribut.
Jekk qed tuża ikona biex twassal tifsira (aktar milli biss bħala element dekorattiv), kun żgur li din it-tifsira titwassal ukoll għal teknoloġiji ta' assistenza – pereżempju, inkludi kontenut addizzjonali, moħbi viżwalment mal- .sr-onlyklassi.
Jekk qed toħloq kontrolli mingħajr test ieħor (bħal <button>li fiha biss ikona), għandek dejjem tipprovdi kontenut alternattiv biex tidentifika l-iskop tal-kontroll, sabiex ikun jagħmel sens għall-utenti tat-teknoloġiji ta' assistenza. F'dan il-każ, tista 'żżid aria-labelattribut fuq il-kontroll innifsu.
Eżempji
Użahom f'buttuni, gruppi ta 'buttuni għal toolbar, navigazzjoni, jew inputs ta' formola prepended.
Ikona użata f'twissija biex twassal li huwa messaġġ ta' żball, b'test addizzjonali .sr-onlybiex twassal dan il-ħjiel lill-utenti ta' teknoloġiji ta' assistenza.
Żball:Daħħal indirizz elettroniku validu
Dropdowns
Menu kuntestwali li jista' jinbidel għall-wiri ta' listi ta' links. Magħmul interattiv mal- plugin JavaScript dropdown .
Eżempju
Kebbeb il-grillu tal-dropdown u l-menu dropdown fi ħdan .dropdown, jew element ieħor li jiddikjara position: relative;. Imbagħad żid l-HTML tal-menu.
B'mod awtomatiku, menu dropdown jitqiegħed awtomatikament 100% minn fuq u tul in-naħa tax-xellug tal-ġenitur tiegħu. Żid .dropdown-menu-rightmal- .dropdown-menulemin tallinja l-menu dropdown.
Jistgħu jeħtieġu pożizzjonament addizzjonali
Dropdowns jitqiegħdu awtomatikament permezz tas-CSS fil-fluss normali tad-dokument. Dan ifisser dropdowns jistgħu jinqatgħu minn ġenituri b'ċerti overflowproprjetajiet jew jidhru barra mill-konfini tal-viewport. Indirizza dawn il-kwistjonijiet waħdek hekk kif jinqalgħu.
.pull-rightAllinjament deprecated
Minn v3.1.0, konna deprecated .pull-rightfuq menus dropdown. Biex tallinja menu lejn il-lemin, uża .dropdown-menu-right. Il-komponenti tan-nav allinjati mal-lemin fin-navbar jużaw verżjoni mixin ta' din il-klassi biex jallinjaw awtomatikament il-menu. Biex tegħlebha, uża .dropdown-menu-left.
Headers
Żid header biex ittikketta sezzjonijiet tal-azzjonijiet fi kwalunkwe menu dropdown.
Ggruppa serje ta 'buttuni flimkien fuq linja waħda mal-grupp ta' buttuni. Żid fuq ir-radju JavaScript fakultattiv u l-imġiba tal-istil tal-kaxxa tal-kontroll bil -plugin tal-buttuni tagħna .
Tooltips u popovers fi gruppi ta’ buttuna jeħtieġu setting speċjali
Meta tuża tooltips jew popovers fuq elementi fi ħdan .btn-group, ikollok tispeċifika l-għażla container: 'body'biex tevita effetti sekondarji mhux mixtieqa (bħall-element jikber usa u/jew jitlef il-kantunieri fit-tond tiegħu meta l-tooltip jew popover jiġi attivat).
Kun żgur korretta roleu ipprovdi tikketta
Sabiex it-teknoloġiji ta' assistenza – bħal qarrejja tal-iskrin – iwasslu li serje ta' buttuni hija raggruppata, rolejeħtieġ li jiġi pprovdut attribut xieraq. Għal gruppi ta' buttuna, dan ikun role="group", filwaqt li toolbars għandu jkollhom role="toolbar".
Eċċezzjoni waħda huma gruppi li fihom biss kontroll wieħed (pereżempju l- gruppi ta' buttuna ġustifikati b'elementi <button>) jew dropdown.
Barra minn hekk, gruppi u toolbars għandhom jingħataw tikketta espliċita, peress li l-biċċa l-kbira tat-teknoloġiji ta 'assistenza inkella ma jħabbruhomx, minkejja l-preżenza tal- roleattribut korrett. Fl-eżempji pprovduti hawn, nużaw aria-label, iżda alternattivi bħal aria-labelledbyjistgħu jintużaw ukoll.
Eżempju bażiku
Kebbeb sensiela ta' buttuni .btnbi .btn-group.
Toolbar tal-buttuna
Għaqqad settijiet ta ' <div class="btn-group">fi <div class="btn-toolbar">għal komponenti aktar kumplessi.
Daqs
Minflok ma tapplika klassijiet tad-daqs tal-buttuna għal kull buttuna fi grupp, żid biss .btn-group-*ma 'kull .btn-group, inkluż meta jbejtu gruppi multipli.
Ibejtu
Poġġi fi .btn-groupħdan ieħor .btn-groupmeta trid dropdown menus mħallta ma 'serje ta' buttuni.
Agħmel grupp ta 'buttuni stretch f'daqsijiet ugwali biex ikopru l-wisa' kollu tal-ġenitur tiegħu. Taħdem ukoll bi dropdowns tal-buttuni fi ħdan il-grupp tal-buttuni.
Immaniġġjar tal-fruntieri
Minħabba l-HTML u CSS speċifiċi użati biex jiġġustifikaw buttuni (jiġifieri display: table-cell), il-fruntieri bejniethom huma rduppjati. Fil-gruppi ta 'buttuni regolari, margin-left: -1pxjintuża biex jiġġedded il-fruntieri minflok ma jneħħihom. Madankollu, marginma taħdimx ma ' display: table-cell. Bħala riżultat, skont il-personalizzazzjonijiet tiegħek għal Bootstrap, tista 'tixtieq li tneħħi jew terġa' kulur il-fruntieri.
IE8 u fruntieri
Internet Explorer 8 ma jirrendix fruntieri fuq buttuni fi grupp ta 'buttuni ġustifikat, kemm jekk ikun fuq <a>jew <button>elementi. Biex taqra dan, wrap kull buttuna f'oħra .btn-group.
Jekk l- <a>elementi jintużaw biex jaġixxu bħala buttuni – li jqanqlu l-funzjonalità fil-paġna, aktar milli jinnavigaw għal dokument jew sezzjoni oħra fil-paġna kurrenti – għandhom jingħataw ukoll role="button".
B'elementi <button>_
Biex tuża gruppi ta 'buttuni ġustifikati <button>b'elementi, trid tkebbeb kull buttuna fi grupp ta' buttuna . Ħafna mill-browsers ma japplikawx sew is-CSS tagħna għall-ġustifikazzjoni għall- <button>elementi, iżda peress li nappoġġaw dropdowns tal-buttuni, nistgħu naħdmu madwar dan.
Dropdowns tal-buttuni
Uża kwalunkwe buttuna biex tiskatta menu dropdown billi tpoġġiha fi ħdan .btn-groupu tipprovdi l-markup xieraq tal-menu.
Dipendenza tal-plugin
Dropdowns tal-buttuni jeħtieġu li l- plugin dropdown jiġi inkluż fil-verżjoni tiegħek ta 'Bootstrap.
Estendi l-kontrolli tal-formola billi żżid test jew buttuni qabel, wara, jew fuq iż-żewġ naħat ta 'kwalunkwe test ibbażat fuq <input>. Uża .input-groupma' .input-group-addonjew .input-group-btnbiex tipprependi jew tehmeż elementi ma' wieħed .form-control.
Testwali <input>s biss
Evita li tuża <select>elementi hawn peress li ma jistgħux jiġu stiljati bis-sħiħ fil-browsers tal-WebKit.
Evita li tuża <textarea>elementi hawnhekk peress li l- rowsattribut tagħhom mhux se jiġi rispettat f'xi każijiet.
Tooltips u popovers fi gruppi ta' input jeħtieġu setting speċjali
Meta tuża tooltips jew popovers fuq elementi fi ħdan .input-group, ikollok tispeċifika l-għażla container: 'body'biex tevita effetti sekondarji mhux mixtieqa (bħall-element jikber usa u/jew jitlef il-kantunieri fit-tond tiegħu meta l-tooltip jew popover jinxtegħlu).
Tħallatx ma 'komponenti oħra
Tħallatx gruppi ta' forma jew klassijiet ta' kolonni ta' grilja direttament ma' gruppi ta' input. Minflok, bejta l-grupp tad-dħul ġewwa l-grupp tal-forma jew l-element relatat mal-grilja.
Dejjem żid it-tikketti
Screen readers se jkollhom problemi bil-formoli tiegħek jekk ma tinkludix tikketta għal kull input. Għal dawn il-gruppi ta' input, kun żgur li kwalunkwe tikketta jew funzjonalità addizzjonali tiġi mgħoddija lil teknoloġiji ta' assistenza.
It-teknika eżatta li għandha tintuża ( <label>elementi viżibbli, <label>elementi moħbija bl-użu tal- .sr-onlyklassi, jew l-użu tal- aria-label, aria-labelledby, aria-describedby, titlejew placeholderattribut) u x'informazzjoni addizzjonali tkun teħtieġ li titwassal se jvarjaw skont it-tip eżatt ta' widget tal-interface li tkun qed timplimenta. L-eżempji f'din it-taqsima jipprovdu ftit approċċi ssuġġeriti u speċifiċi għall-każ.
Eżempju bażiku
Poġġi add-on jew buttuna waħda fuq kull naħa ta' input. Tista' wkoll tpoġġi waħda fuq iż-żewġ naħat ta' input.
Aħna ma nappoġġjawx add-ons multipli ( .input-group-addonjew .input-group-btn) fuq naħa waħda.
Aħna ma nappoġġjawx kontrolli tal-forma multipli fi grupp ta' input wieħed.
Daqs
Żid il-klassijiet tad-daqs tal-forma relattiva mal- .input-groupistess u l-kontenuti fi ħdanhom awtomatikament jerġgħu jinbidlu—m'hemmx bżonn li tirrepeti l-klassijiet tad-daqs tal-kontroll tal-formola fuq kull element.
Checkboxes u addons tar-radju
Poġġi kwalunkwe checkbox jew għażla tar-radju fi ħdan l-addon ta' grupp ta' input minflok it-test.
Addons tal-buttuni
Buttuni fil-gruppi ta 'input huma daqsxejn differenti u jeħtieġu livell wieħed żejjed ta' nesting. Minflok .input-group-addon, ikollok bżonn tuża .input-group-btnbiex tkebbeb il-buttuni. Dan huwa meħtieġ minħabba l-istili tal-browser default li ma jistgħux jiġu megħluba.
Buttuni bi dropdowns
Buttuni segmentati
Buttuni multipli
Filwaqt li jista 'jkollok biss add-on wieħed għal kull naħa, jista' jkollok buttuni multipli ġewwa .input-group-btn.
Navs
In-Navs disponibbli f'Bootstrap għandhom markup kondiviżi, li jibdew mill- .navklassi bażi, kif ukoll stati kondiviżi. Ibdel il-klassijiet tal-modifikatur biex taqleb bejn kull stil.
L-użu ta 'navs għal pannelli ta' tab jeħtieġ plugin ta 'tabs JavaScript
Għal tabs b'żoni tabbable, trid tuża t- tabs JavaScript plugin . Il-markup se jeħtieġ ukoll roleattributi addizzjonali u ARIA – ara l- markup eżempju tal-plugin għal aktar dettalji.
Agħmel in-navs użati bħala navigazzjoni aċċessibbli
Jekk qed tuża navs biex tipprovdi bar tan-navigazzjoni, kun żgur li żżid a role="navigation"mal-kontenitur ġenitur l-aktar loġiku tal- <ul>, jew wrap <nav>element madwar in-navigazzjoni kollha. Iżżidx ir-rwol mal- <ul>persuna nfisha, peress li dan jipprevjeni milli jitħabbar bħala lista attwali minn teknoloġiji ta' assistenza.
Tabs
Innota li l- .nav-tabsklassi teħtieġ il .nav-klassi bażi.
Faċilment jagħmlu tabs jew pilloli wisgħat ugwali tal-ġenitur tagħhom fi skrins usa 'minn 768px b' .nav-justified. Fuq skrins iżgħar, il-links tan-nav huma f'munzelli.
Links ġustifikati tan-navbar nav bħalissa mhumiex appoġġjati.
Safari u navs ġustifikati li jirrispondu
Minn v9.1.2, Safari juri bug li fih id-daqs tal-brawżer tiegħek b'mod orizzontali jikkawża żbalji ta' rendering fin-nav ġustifikat li jitneħħew mal-aġġornament. Dan il-bug jidher ukoll fl- eżempju tan-nav ġustifikat .
In-Navbars huma komponenti meta reattivi li jservu bħala headers tan-navigazzjoni għall-applikazzjoni jew is-sit tiegħek. Jibdew ikkollassaw (u jistgħu jiġu togglebbli) f'veduti mobbli u jsiru orizzontali hekk kif tiżdied il-wisa' tal-viewport disponibbli.
Links ġustifikati tan-navbar nav bħalissa mhumiex appoġġjati.
Kontenut li jfur
Peress li Bootstrap ma jafx kemm jeħtieġ spazju l-kontenut fin-navbar tiegħek, tista' tiltaqa' ma' kwistjonijiet bil-kontenut tat-tgeżwir fit-tieni ringiela. Biex issolvi dan, tista':
Naqqas l-ammont jew il-wisa 'tal-oġġetti tan-navbar.
Ibdel il-punt li fih in-navbar tiegħek taqleb bejn il-mod kollass u orizzontali. Ippersonalizza l- @grid-float-breakpointvarjabbli jew żid il-mistoqsija tal-midja tiegħek stess.
Jeħtieġ plugin JavaScript
Jekk JavaScript huwa diżattivat u l-viewport hija dejqa biżżejjed biex in-navbar tiġġarraf, ikun impossibbli li tespandi n-navbar u tara l-kontenut fi ħdan il- .navbar-collapse.
In-navbar li tirreaġixxi teħtieġ li l- plugin tal-kollass jiġi inkluż fil-verżjoni tiegħek ta 'Bootstrap.
Nibdlu l-breakpoint tan-navbar mobbli
In-navbar tiġġarraf fil-veduta mobbli vertikali tagħha meta l-vetrina tkun idjaq minn @grid-float-breakpoint, u tespandi fil-veduta orizzontali mhux mobbli tagħha meta l-veduta tkun mill-inqas @grid-float-breakpointfil-wisa '. Aġġusta din il-varjabbli fis-sors Inqas biex tikkontrolla meta n-navbar tiġġarraf/jespandi. Il-valur default huwa 768px(l-iżgħar skrin "żgħir" jew "tablet").
Agħmel in-navbars aċċessibbli
Kun żgur li tuża <nav>element jew, jekk tuża element aktar ġeneriku bħal <div>, żid a role="navigation"ma' kull navbar biex tidentifikaha b'mod espliċitu bħala reġjun importanti għall-utenti ta' teknoloġiji ta' assistenza.
Immaġni tad-ditta
Ibdel il-marka tan-navbar bl-immaġni tiegħek billi tbiddel it-test għal <img>. Peress li .navbar-brandgħandha l-ikkuttunar u l-għoli tagħha stess, jista 'jkollok bżonn tegħleb xi CSS skont l-immaġni tiegħek.
Formoli
Poġġi l-kontenut tal-forma ġewwa .navbar-formgħal allinjament vertikali xieraq u mġiba mġarrfa f'portijiet tal-vista dojoq. Uża l-għażliet tal-allinjament biex tiddeċiedi fejn tirrisjedi fil-kontenut tan-navbar.
Bħala heads up, .navbar-formjaqsam ħafna mill-kodiċi tiegħu ma .form-inline'via mixin. Xi kontrolli tal-formoli, bħall-gruppi ta' input, jistgħu jeħtieġu wisa' fissi biex jintwerew sew f'navbar.
Screen readers se jkollhom problemi bil-formoli tiegħek jekk ma tinkludix tikketta għal kull input. Għal dawn il-formoli inline, tista 'taħbi t-tikketti billi tuża l- .sr-onlyklassi. Hemm metodi alternattivi oħra biex tiġi pprovduta tikketta għal teknoloġiji ta' assistenza, bħall- aria-label, aria-labelledbyjew l- titleattribut. Jekk l-ebda wieħed minn dawn ma jkun preżenti, il-qarrejja tal-iskrin jistgħu jirrikorru għall-użu tal- placeholderattribut, jekk ikun preżenti, iżda innota li l-użu ta’ placeholderbħala sostitut għal metodi oħra ta’ tikkettjar mhuwiex rakkomandat.
Buttuni
Żid il- .navbar-btnklassi ma ' <button>elementi li ma joqogħdux <form>f'a biex iċċentrahom vertikalment fin-navbar.
Użu speċifiku għall-kuntest
Bħall- klassijiet tal-buttuni standard , .navbar-btnjistgħu jintużaw fuq <a>u <input>elementi. Madankollu, la .navbar-btnl-klassijiet tal-buttuni standard u lanqas m'għandhom jintużaw fuq <a>elementi fi ħdan .navbar-nav.
Test
Kebbeb kordi ta' test f'element b' .navbar-text, normalment fuq <p>tikketta għal tmexxija u kulur xierqa.
Non-nav links
Għal nies li jużaw links standard li mhumiex fi ħdan il-komponent tan-navigazzjoni regolari tan-navbar, uża l- .navbar-linkklassi biex iżżid il-kuluri xierqa għall-għażliet default u inversi tan-navbar.
Allinjament tal-komponenti
Allinja nav links, formoli, buttuni, jew test, bl-użu .navbar-leftjew .navbar-rightklassijiet ta 'utilità. Iż-żewġ klassijiet se jżidu float CSS fid-direzzjoni speċifikata. Pereżempju, biex tallinja l-links tan-nav, poġġihom f'parti separata <ul>bil-klassi ta 'utilità rispettiva applikata.
Dawn il-klassijiet huma verżjonijiet imħallta ta' .pull-leftu .pull-right, iżda huma mmirati għal mistoqsijiet tal-midja għal immaniġġjar eħfef tal-komponenti tan-navbar fid-daqsijiet tal-apparat.
Dritt tallinja komponenti multipli
In-Navbars bħalissa għandhom limitazzjoni bi .navbar-rightklassijiet multipli. Biex nispazjaw sew il-kontenut, nużaw marġni negattiv fuq l-aħħar .navbar-rightelement. Meta jkun hemm elementi multipli li jużaw dik il-klassi, dawn il-marġini ma jaħdmux kif maħsub.
Aħna ser nerġgħu nirrevedu dan meta nkunu nistgħu niktbu mill-ġdid dak il-komponent fil-v4.
Imwaħħla fuq nett
Żid .navbar-fixed-topu inkludi .containerjew .container-fluidmaċ-ċentru u l-kuxxinett tal-kontenut tan-navbar.
Padding tal-ġisem meħtieġ
In-navbar fissa se tispiċċa l-kontenut l-ieħor tiegħek, sakemm ma żżidx paddingfil-quċċata tal- <body>. Ipprova l-valuri tiegħek jew uża s-snippet tagħna hawn taħt. Tip: B'mod awtomatiku, in-navbar hija għolja 50px.
Kun żgur li tinkludi dan wara l-qalba Bootstrap CSS.
Imwaħħla mal-qiegħ
Żid .navbar-fixed-bottomu inkludi .containerjew .container-fluidmaċ-ċentru u l-kuxxinett tal-kontenut tan-navbar.
Padding tal-ġisem meħtieġ
In-navbar fissa se tispiċċa l-kontenut l-ieħor tiegħek, sakemm ma żżidx paddingmal-qiegħ tal- <body>. Ipprova l-valuri tiegħek jew uża s-snippet tagħna hawn taħt. Tip: B'mod awtomatiku, in-navbar hija għolja 50px.
Kun żgur li tinkludi dan wara l-qalba Bootstrap CSS.
Top statiku
Oħloq navbar full-wisa 'li tiskrollja 'l bogħod mal-paġna billi żżid .navbar-static-topu tinkludi .containerjew .container-fluidlejn iċ-ċentru u l-kuxxinett tal-kontenut tan-navbar.
B'differenza mill- .navbar-fixed-*klassijiet, m'għandekx bżonn tibdel xi padding fuq il- body.
Navbar maqlub
Immodifika d-dehra tan-navbar billi żżid .navbar-inverse.
Frak tal-ħobż
Indika l-post tal-paġna kurrenti fi ħdan ġerarkija tan-navigazzjoni.
Is-separaturi jiżdiedu awtomatikament f'CSS permezz ta' :beforeu content.
Ipprovdi links tal-paġnar għas-sit jew l-app tiegħek bil-komponent tal-paġnar b'ħafna paġni, jew l- alternattiva tal-paġnar aktar sempliċi .
Paġinazzjoni default
Paġinazzjoni sempliċi ispirata minn Rdio, kbira għall-apps u r-riżultati tat-tiftix. Il-blokka l-kbira hija diffiċli biex titlifha, tista 'tiġi skalata faċilment, u tipprovdi żoni ta' klikkjar kbar.
Tikkettjar tal-komponent tal-paġnar
Il-komponent tal-paġnar għandu jkun imgeżwer <nav>f'element li jidentifikah bħala sezzjoni tan-navigazzjoni għall-qarrejja tal-iskrin u teknoloġiji ta' assistenza oħra. Barra minn hekk, peress li paġna x'aktarx li jkollha aktar minn sezzjoni waħda ta' navigazzjoni bħal din diġà (bħal in-navigazzjoni primarja fl-header, jew in-navigazzjoni tal-istrixxa tal-ġenb), huwa rakkomandabbli li tipprovdi deskrittiva aria-labelgħall- <nav>li tirrifletti l-iskop tagħha. Pereżempju, jekk il-komponent tal-paġnar jintuża biex jinnaviga bejn sett ta' riżultati ta' tfittxija, tikketta xierqa tista' tkun aria-label="Search results pages".
Stati b'diżabilità u attivi
Il-links huma customizable għal ċirkostanzi differenti. Uża .disabledgħal links li ma jistgħux jiġu kklikkjati u .activebiex tindika l-paġna attwali.
Nirrakkomandaw li tbiddel l-ankri attivi jew b'diżabilità għal <span>, jew tħalli barra l-ankra fil-każ tal-vleġeġ preċedenti/li jmiss, biex tneħħi l-funzjonalità tal-ikklikkja filwaqt li żżomm l-istili maħsuba.
Daqs
Fancy pagination akbar jew iżgħar? Żid .pagination-lgjew .pagination-smgħal daqsijiet addizzjonali.
Pager
Links ta 'qabel u li jmiss ta' malajr għal implimentazzjonijiet ta 'paginazzjoni sempliċi b'markup u stili ħfief. Huwa tajjeb ħafna għal siti sempliċi bħal blogs jew rivisti.
Eżempju default
B'mod awtomatiku, il-pager jiffoka links.
Links allinjati
Inkella, tista' tallinja kull link mal-ġnub:
Stat diżabbli mhux obbligatorju
Ir-rabtiet tal-pager jużaw ukoll il- .disabledklassi ta 'utilità ġenerali mill-paġnar.
Tikketti
Eżempju
Eżempju ta' intestatura Ġdid
Eżempju ta' intestatura Ġdid
Eżempju ta' intestatura Ġdid
Eżempju ta' intestatura Ġdid
Eżempju ta' intestatura Ġdid
Eżempju ta' intestatura Ġdid
Varjazzjonijiet disponibbli
Żid xi waħda mill-klassijiet modifikaturi msemmija hawn taħt biex tibdel id-dehra ta 'tikketta.
Informazzjoni Primarja Suċċess Default Twissija Periklu
Għandek tunnellati ta 'tikketti?
Jistgħu jinqalgħu problemi ta' rendering meta jkollok għexieren ta' tikketti inline f'kontenitur dejjaq, kull wieħed ikun fih l- inline-blockelement tiegħu stess (bħal ikona). Il-mod madwar dan huwa l-issettjar display: inline-block;. Għal kuntest u eżempju, ara #13219 .
Badges
Enfasizza faċilment oġġetti ġodda jew mhux moqrija billi żżid <span class="badge">ma' links, Bootstrap navs, u aktar.
Meta ma jkun hemm l-ebda oġġetti ġodda jew mhux moqrija, il-badges sempliċiment jikkrollaw (permezz tas- :emptyselettur tas-CSS) sakemm ma jeżisti l-ebda kontenut ġewwa.
Kompatibilità bejn il-browser
Il-badges mhux se jikkollassaw lilhom infushom f'Internet Explorer 8 minħabba li m'għandux appoġġ għas- :emptyselettur.
Adatta għal stati nav attivi
Stili inkorporati huma inklużi għat-tqegħid ta 'badges fi stati attivi fin-navigazzjonijiet tal-pilloli.
Biex tagħmel il-jumbotron wisa 'sħiħa, u mingħajr kantunieri fit-tond, poġġiha barra .containers kollha u minflok żid .containerġewwa.
Header tal-paġna
Qoxra sempliċi biex tispazja b'mod h1xieraq u tissegmenta sezzjonijiet tal-kontenut fuq paġna. Jista 'jutilizza l -element h1default smalltal-, kif ukoll il-biċċa l-kbira tal-komponenti l-oħra (bi stili addizzjonali).
Eżempju ta' header tal-paġna Subtest għall-header
Miniatures
Estendi s -sistema tal-grilja ta 'Bootstrap bil-komponent thumbnail biex turi faċilment grilji ta' stampi, vidjows, test, u aktar.
Jekk qed tfittex preżentazzjoni bħal Pinterest ta' thumbnails ta' għoli u/jew wisgħat li jvarjaw, ikollok bżonn tuża plugin ta' parti terza bħal Masonry , Isotope , jew Salvattore .
Eżempju default
B'mod awtomatiku, il-minjaturi ta' Bootstrap huma ddisinjati biex juru immaġini konnessi b'markup minimu meħtieġ.
Kontenut apposta
Bi ftit ta 'markup żejjed, huwa possibbli li żżid kwalunkwe tip ta' kontenut HTML bħal intestaturi, paragrafi, jew buttuni fil-minijaturi.
Tikketta miniatura
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.
Ipprovdi messaġġi ta' feedback kuntestwali għal azzjonijiet tipiċi tal-utent b'numru żgħir ta' messaġġi ta' twissija disponibbli u flessibbli.
Eżempji
Kebbeb kwalunkwe test u buttuna ta' tiċħad fakultattiva fi .alertu waħda mill-erba' klassijiet kuntestwali (eż., .alert-success) għal messaġġi ta' twissija bażiċi.
Ebda klassi default
It-twissijiet m'għandhomx klassijiet default, biss klassijiet bażi u modifikaturi. Twissija griża default ma tagħmilx wisq sens, għalhekk int meħtieġ li tispeċifika tip permezz ta' klassi kuntestwali. Agħżel minn suċċess, informazzjoni, twissija jew periklu.
Proset! Inti taqra b'suċċess dan il-messaġġ ta 'twissija importanti.
Irjus up! Din it-twissija teħtieġ l-attenzjoni tiegħek, iżda mhix super importanti.
Twissija! Aħjar iċċekkja lilek innifsek, m'intix qed tfittex wisq tajjeb.
Oh snap! Ibdel ftit affarijiet u erġa' pprova ssottometti.
Twissijiet miċħuda
Ibni fuq kwalunkwe twissija billi żżid .alert-dismissiblebuttuna fakultattiva u tagħlaq.
Ipprovdi feedback aġġornat dwar il-progress ta 'fluss tax-xogħol jew azzjoni b'vireg ta' progress sempliċi iżda flessibbli.
Kompatibilità bejn il-browser
Il-vireg tal-progress jużaw transizzjonijiet u animazzjonijiet CSS3 biex jiksbu xi wħud mill-effetti tagħhom. Dawn il-karatteristiċi mhumiex appoġġjati fl-Internet Explorer 9 u taħt jew verżjonijiet eqdem ta' Firefox. Opera 12 ma jappoġġjax animazzjonijiet.
Jekk il-websajt tiegħek għandha Politika ta' Sigurtà tal-Kontenut (CSP) li ma tippermettix style-src 'unsafe-inline', allura ma tkunx tista' tuża styleattributi inline biex tissettja wisgħat tal-bar tal-progress kif muri fl-eżempji tagħna hawn taħt. Metodi alternattivi għall-iffissar tal-wisgħat li huma kompatibbli ma 'CSPs stretti jinkludu l-użu ta' JavaScript personalizzat ftit (li jistabbilixxi element.style.width) jew l-użu ta 'klassijiet CSS personalizzati.
Eżempju bażiku
Barra tal-progress default.
60% Tlesti
Bit-tikketta
Neħħi l- klassi <span>with .sr-onlyminn ġewwa l-istrixxa tal-progress biex turi persentaġġ viżibbli.
60%
Biex tiżgura li t-test tat-tikketta jibqa' leġibbli anke għal perċentwali baxxi, ikkunsidra li żżid a min-widthmal-bar tal-progress.
0%
2%
Alternattivi kuntestwali
Il-vireg tal-progress jużaw xi wħud mill-istess buttuna u klassijiet ta 'twissija għal stili konsistenti.
40% Tlesti (suċċess)
20% Tlesti
60% Tlesti (twissija)
80% Tlesti (periklu)
Strixxat
Juża gradjent biex joħloq effett strixxat. Mhux disponibbli f'IE9 u taħt.
40% Tlesti (suċċess)
20% Tlesti
60% Tlesti (twissija)
80% Tlesti (periklu)
Animati
Żid .activema .progress-bar-stripedbiex janima l-istrixxi mil-lemin għax-xellug. Mhux disponibbli f'IE9 u taħt.
45% Tlesti
Stacked
Poġġi vireg multipli fl-istess .progressbiex munzellhom.
35% Tlesti (suċċess)
20% Tlesti (twissija)
10% Tlesti (periklu)
Oġġett tal-midja
Stili ta' oġġetti astratti għall-bini ta' diversi tipi ta' komponenti (bħal kummenti tal-blog, Tweets, eċċ) li fihom immaġni allinjata max-xellug jew mal-lemin flimkien ma' kontenut testwali.
Media default
Il-midja default turi oġġett tal-midja (immaġini, vidjow, awdjo) fuq ix-xellug jew il-lemin ta 'blokk tal-kontenut.
Intestatura tal-midja
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Intestatura tal-midja
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Intestatura tal-midja nested
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Intestatura tal-midja
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.
Intestatura tal-midja
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.
Il-klassijiet .pull-leftu .pull-rightjeżistu wkoll u qabel kienu użati bħala parti mill-komponent tal-midja, iżda huma deprecati għal dak l-użu minn v3.3.0. Dawn huma bejn wieħed u ieħor ekwivalenti għal .media-leftu .media-right, ħlief li .media-rightgħandhom jitqiegħdu wara l- .media-bodyfil-html.
Allinjament tal-midja
L-immaġini jew midja oħra jistgħu jiġu allinjati fuq, nofs, jew t'isfel. In-nuqqas huwa allinjat fuq nett.
Top midja allinjata
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Midja allinjata tan-nofs
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Midja allinjata tal-qiegħ
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Lista tal-midja
Bi ftit ta 'markup żejjed, tista' tuża l-midja ġewwa l-lista (utli għal ħjut ta 'kummenti jew listi ta' artikoli).
Intestatura tal-midja
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.
Intestatura tal-midja 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.
Intestatura tal-midja 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.
Intestatura tal-midja 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.
Lista tal-grupp
Il-gruppi tal-lista huma komponent flessibbli u b'saħħtu biex jintwerew mhux biss listi sempliċi ta 'elementi, iżda dawk kumplessi b'kontenut personalizzat.
Eżempju bażiku
Il-grupp tal-lista l-aktar bażiku huwa sempliċement lista mhux ordnata b'oġġetti tal-lista, u l-klassijiet xierqa. Ibni fuqha bl-għażliet li jsegwu, jew is-CSS tiegħek kif meħtieġ.
Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum at eros
Badges
Żid il-komponent badges ma 'kwalunkwe oġġett tal-grupp tal-lista u awtomatikament jitqiegħed fuq il-lemin.
14Cras justo odio
2Dapibus ac facilisis in
1Morbi leo risus
Oġġetti marbuta
Ikkonnettja l-oġġetti tal-grupp tal-lista billi tuża tikketti tal-ankri minflok oġġetti tal-lista (li tfisser ukoll ġenitur <div>minflok <ul>). Ebda ħtieġa għal ġenituri individwali madwar kull element.
L-oġġetti tal-grupp tal-lista jistgħu jkunu buttuni minflok oġġetti tal-lista (li tfisser ukoll ġenitur <div>minflok <ul>). Ebda ħtieġa għal ġenituri individwali madwar kull element. Tużax il- .btnklassijiet standard hawn.
Oġġetti b'diżabilità
Żid .disabledma' .list-group-itemgriż biex tidher b'diżabilità.
Filwaqt li mhux dejjem meħtieġ, xi kultant ikollok bżonn tpoġġi DOM tiegħek f'kaxxa. Għal dawk is-sitwazzjonijiet, ipprova l-komponent tal-pannell.
Eżempju bażiku
B'mod awtomatiku, kull .panelma tagħmel hu li tapplika xi fruntiera bażika u padding biex ikun fihom xi kontenut.
Eżempju tal-pannell bażiku
Bord bl-intestatura
Żid faċilment kontenitur tal-intestatura mal-pannell tiegħek b' .panel-heading. Tista' wkoll tinkludi kwalunkwe <h1>- <h6>bi .panel-titleklassi biex iżżid intestatura pre-styled. Madankollu, id-daqsijiet tat-tipa ta' <h1>- <h6>huma sostitwiti minn .panel-heading.
Għal kulur xieraq tal-link, kun żgur li tpoġġi links f'intestaturi fi ħdan .panel-title.
Intestatura tal-panel bla titolu
Kontenut tal-panel
Titolu tal-panel
Kontenut tal-panel
Panel b'footer
Kebbeb buttuni jew test sekondarju fi .panel-footer. Innota li l-footers tal-pannelli ma jirtux kuluri u fruntieri meta tuża varjazzjonijiet kuntestwali peress li mhumiex maħsuba biex ikunu fit-tagħrif miksub.
Kontenut tal-panel
Alternattivi kuntestwali
Bħal komponenti oħra, faċilment tagħmel panel aktar sinifikanti għal kuntest partikolari billi żżid xi waħda mill-klassijiet tal-istat kuntestwali.
Titolu tal-panel
Kontenut tal-panel
Titolu tal-panel
Kontenut tal-panel
Titolu tal-panel
Kontenut tal-panel
Titolu tal-panel
Kontenut tal-panel
Titolu tal-panel
Kontenut tal-panel
Bit-tabelli
Żid kwalunkwe mhux imdawwar .tablefi ħdan panel għal disinn bla xkiel. Jekk ikun hemm .panel-body, aħna żid fruntiera żejda fil-quċċata tat-tabella għas-separazzjoni.
Intestatura tal-panel
Xi kontenut tal-panel default hawn. 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.
#
Isem
Kunjom
Isem tal-utent
1
Mark
Otto
@mdo
2
Ġakobb
Thornton
@xaħam
3
Larry
l-ghasfur
@twitter
Jekk ma jkun hemm l-ebda korp tal-pannell, il-komponent jiċċaqlaq minn header tal-pannell għal mejda mingħajr interruzzjoni.
Xi kontenut tal-panel default hawn. 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 at eros
Inkorporat li jirrispondu
Ħalli lill-browsers jiddeterminaw id-dimensjonijiet tal-vidjow jew tal-wiri ta' pjastri bbażati fuq il-wisa' tal-blokka li jkun fihom billi joħolqu proporzjon intrinsiku li se jiskala sew fuq kwalunkwe apparat.
Ir-regoli huma applikati direttament għal <iframe>, <embed>, <video>, u <object>elementi; b'għażla uża klassi dixxendenti espliċita .embed-responsive-itemmeta trid tqabbel l-istil għal attributi oħra.
Pro-Tip! M'għandekx bżonn tinkludi frameborder="0"fl- <iframe>i tiegħek peress li aħna nirrivalqu dak għalik.
Bjar
Default sew
Uża l-bir bħala effett sempliċi fuq element biex tagħtih effett inset.
Ara, jien fil-bir!
Klassijiet fakultattivi
Ikkuttunar ta 'kontroll u kantunieri ttundjati b'żewġ klassijiet ta' modifikaturi fakultattivi.