Mbi një duzinë përbërësish të ripërdorshëm të ndërtuar për të ofruar ikonografi, listë me zbritje, grupe hyrëse, navigim, sinjalizime dhe shumë më tepër.
Glyphicons
Glyphs në dispozicion
Përfshin mbi 250 glyphs në format font nga grupi Glyphicon Halflings. Glyphicons Halflings zakonisht nuk janë të disponueshme falas, por krijuesi i tyre i ka vënë ato në dispozicion për Bootstrap pa kosto. Si falënderim, ne ju kërkojmë vetëm që të përfshini një lidhje me Glyphicons sa herë që është e mundur.
glyphicon glyphicon-yll
glyphicon glyphicon-plus
glyphicon glyphicon-euro
glyphicon glyphicon-eur
glyphicon glyphicon-minus
glyphicon glyphicon-re
glyphicon glyphicon-zarf
glyphicon glyphicon-laps
glyphicon glyphicon-xham
glyphicon glyphicon-muzikë
glyphicon glyphicon-kërkim
glyphicon glyphicon-zemër
glyphicon glyphicon-yll
glyphicon glyphicon-yll-zbrazët
glyphicon glyphicon-përdorues
glyphicon glyphicon-film
glyphicon glyphicon-th-large
glyphicon glyphicon-th
glyphicon glyphicon-th-list
glyphicon glyphicon-ok
glyphicon glyphicon-heq
glyphicon glyphicon-zoom-in
glyphicon glyphicon-zoom-out
glyphicon glyphicon-off
glyphicon glyphicon-sinjal
glyphicon glyphicon-cog
glyphicon glyphicon-plehra
glyphicon glyphicon-shtëpi
glyphicon glyphicon-file
glyphicon glyphicon-kohë
glyphicon glyphicon-rrugë
glyphicon glyphicon-shkarko-alt
glyphicon glyphicon-shkarko
glyphicon glyphicon-ngarkim
glyphicon glyphicon-inbox
glyphicon glyphicon-luaj-rreth
glyphicon glyphicon-përsërit
glyphicon glyphicon-refresh
glyphicon glyphicon-list-alt
glyphicon glyphicon-lock
glyphicon glyphicon-flamur
glyphicon glyphicon-kufje
glyphicon glyphicon-volume-off
glyphicon glyphicon-ulim-volumi
glyphicon glyphicon-volum-up
glyphicon glyphicon-qrcode
glyphicon glyphicon-barkodi
glyphicon glyphicon-tag
glyphicon glyphicon-tags
glyphicon glyphicon-libër
glyphicon glyphicon-bookmark
glyphicon glyphicon-print
glyphicon glyphicon-kamerë
glyphicon glyphicon-font
glyphicon glyphicon-bold
glyphicon glyphicon-italic
glyphicon glyphicon-tekst-lartësi
glyphicon glyphicon-text-width
glyphicon glyphicon-align-left
glyphicon glyphicon-align-qendër
glyphicon glyphicon-align-right
glyphicon glyphicon-rreshtoj-justifikoj
glyphicon glyphicon-listë
glyphicon glyphicon-indent-left
glyphicon glyphicon-indent-djathtas
glyphicon glyphicon-facetime-video
glyphicon glyphicon-foto
glyphicon glyphicon-hartë-shënues
glyphicon glyphicon-rregulloj
glyphicon glyphicon-tint
glyphicon glyphicon-edit
glyphicon glyphicon-share
glyphicon glyphicon-kontroll
glyphicon glyphicon-lëviz
glyphicon glyphicon-hap-prapa
glyphicon glyphicon-fast-backward
glyphicon glyphicon-mbrapsht
glyphicon glyphicon-luaj
glyphicon glyphicon-pauzë
glyphicon glyphicon-stop
glyphicon glyphicon-përpara
glyphicon glyphicon-fast-forward
glyphicon glyphicon-hap-përpara
glyphicon glyphicon-nxjerr
glyphicon glyphicon-chevron-majtas
glyphicon glyphicon-chevron-djathtas
glyphicon glyphicon-plus-shenjë
glyphicon glyphicon-minus-shenjë
glyphicon glyphicon-remove-shenjë
glyphicon glyphicon-ok-shenjë
glyphicon glyphicon-pyetje-shenjë
glyphicon glyphicon-info-shenjë
glyphicon glyphicon-screenshot
glyphicon glyphicon-remove-circle
glyphicon glyphicon-ok-rreth
glyphicon glyphicon-ban-rreth
glyphicon glyphicon-shigjeta-majtas
glyphicon glyphicon-shigjeta-djathtas
glyphicon glyphicon-shigjeta-lart
glyphicon glyphicon-shigjeta-poshtë
glyphicon glyphicon-share-alt
glyphicon glyphicon-resize-plotë
glyphicon glyphicon-ripërmasa-i vogël
glyphicon glyphicon-shenjë-çuditëse
glyphicon glyphicon-dhuratë
glyphicon glyphicon-fletë
glyphicon glyphicon-zjarr
glyphicon glyphicon-eye-hapur
glyphicon glyphicon-sy-mbyll
glyphicon glyphicon-paralajmërim-shenjë
glyphicon glyphicon-plan
glyphicon glyphicon-kalendar
glyphicon glyphicon-i rastësishëm
glyphicon glyphicon-koment
glyphicon glyphicon-magnet
glyphicon glyphicon-chevron-up
glyphicon glyphicon-chevron-poshtë
glyphicon glyphicon-retweet
glyphicon glyphicon-karrocë
glyphicon glyphicon-folder-mbyll
glyphicon glyphicon-folder-hapur
glyphicon glyphicon-ndryshoj madhësinë-vertikale
glyphicon glyphicon-ripërmasa-horizontal
glyphicon glyphicon-hdd
glyphicon glyphicon-bullhorn
glyphicon glyphicon-zile
glyphicon glyphicon-certifikatë
glyphicon glyphicon-bravo
glyphicon glyphicon-thumbs-poshtë
glyphicon glyphicon-dorë-djathtas
glyphicon glyphicon-dorë-majtas
glyphicon glyphicon-hand-up
glyphicon glyphicon-hand-down
glyphicon glyphicon-rreth-shigjeta-djathtas
glyphicon glyphicon-rreth-shigjeta-majtas
glyphicon glyphicon-rreth-shigjeta-lart
glyphicon glyphicon-rreth-shigjeta-poshtë
glyphicon glyphicon-glob
glyphicon glyphicon-pikëllim
glyphicon glyphicon-detyra
glyphicon glyphicon-filter
glyphicon glyphicon-çantë
glyphicon glyphicon-ekran i plotë
glyphicon glyphicon-dashboard
glyphicon glyphicon-kapëse letre
glyphicon glyphicon-zemër-zbrazët
glyphicon glyphicon-lidhje
glyphicon glyphicon-telefon
glyphicon glyphicon-pushpin
glyphicon glyphicon-usd
glyphicon glyphicon-gbp
glyphicon glyphicon-rendi
glyphicon glyphicon-rendit sipas alfabetit
glyphicon glyphicon-rendit sipas alfabetit-alt
glyphicon glyphicon-rendi-sipas renditjes
glyphicon glyphicon-rendi-sipas-order-alt
glyphicon glyphicon-rendit sipas atributeve
glyphicon glyphicon-rendit-nga-atributet-alt
glyphicon glyphicon-i pakontrolluar
glyphicon glyphicon-zgjeroj
glyphicon glyphicon-kolaps-poshtë
glyphicon glyphicon-collapse-up
glyphicon glyphicon-log-in
glyphicon glyphicon-flash
glyphicon glyphicon-log-out
glyphicon glyphicon-new-window
glyphicon glyphicon-rekord
glyphicon glyphicon-ruaj
glyphicon glyphicon-hapur
glyphicon glyphicon-ruajtur
glyphicon glyphicon-import
glyphicon glyphicon-eksport
glyphicon glyphicon-send
glyphicon glyphicon-floppy-disk
glyphicon glyphicon-floppy-saved
glyphicon glyphicon-floppy-heq
glyphicon glyphicon-floppy-save
glyphicon glyphicon-floppy-hapur
glyphicon glyphicon-kredit-kartë
glyphicon glyphicon-transferim
glyphicon glyphicon-takëm
glyphicon glyphicon-header
glyphicon glyphicon-i ngjeshur
glyphicon glyphicon-kufje
glyphicon glyphicon-telefon-alt
glyphicon glyphicon-kullë
glyphicon glyphicon-stats
glyphicon glyphicon-sd-video
glyphicon glyphicon-hd-video
glyphicon glyphicon-titra
glyphicon glyphicon-tingull-stereo
glyphicon glyphicon-tingull-dolby
glyphicon glyphicon-tingull-5-1
glyphicon glyphicon-tingull-6-1
glyphicon glyphicon-tingull-7-1
glyphicon glyphicon-copyright-mark
glyphicon glyphicon-registration-mark
glyphicon glyphicon-re-shkarkim
glyphicon glyphicon-cloud-upload
glyphicon glyphicon-pemë-halore
glyphicon glyphicon-pemë-gjethore
glyphicon glyphicon-cd
glyphicon glyphicon-save-file
glyphicon glyphicon-skedar i hapur
glyphicon glyphicon-level-lart
glyphicon glyphicon-kopje
glyphicon glyphicon-paste
glyphicon glyphicon-alert
glyphicon glyphicon-equalizer
glyphicon glyphicon-mbret
glyphicon glyphicon-mbretëresha
glyphicon glyphicon-push
glyphicon glyphicon-peshkop
glyphicon glyphicon-kalorës
glyphicon glyphicon-baby-formula
glyphicon glyphicon-tendë
glyphicon glyphicon-dërrasë e zezë
glyphicon glyphicon-krevat
glyphicon glyphicon-mollë
glyphicon glyphicon-fshij
glyphicon glyphicon-hourglass
glyphicon glyphicon-llambë
glyphicon glyphicon-duplicate
glyphicon glyphicon-derrkuc-bank
glyphicon glyphicon-gërshërë
glyphicon glyphicon-bitcoin
glyphicon glyphicon-btc
glyphicon glyphicon-xbt
glyphicon glyphicon-jen
glyphicon glyphicon-jpy
glyphicon glyphicon-rubla
glyphicon glyphicon-fërkim
glyphicon glyphicon-shkallë
glyphicon glyphicon-akull-lolly
glyphicon glyphicon-akull-me shije lolly
glyphicon glyphicon-edukim
glyphicon glyphicon-opsion-horizontal
glyphicon glyphicon-opsion-vertikal
glyphicon glyphicon-menu-hamburger
glyphicon glyphicon-modal-dritare
glyphicon glyphicon-vaj
glyphicon glyphicon-kokërr
glyphicon glyphicon-syze dielli
glyphicon glyphicon-text-size
glyphicon glyphicon-text-color
glyphicon glyphicon-tekst-background
glyphicon glyphicon-object-align-top
glyphicon glyphicon-object-align-fund
glyphicon glyphicon-object-align-horizontal
glyphicon glyphicon-object-align-left
glyphicon glyphicon-object-align-vertical
glyphicon glyphicon-object-align-right
glyphicon glyphicon-trekëndësh-djathtas
glyphicon glyphicon-trekëndësh-majtas
glyphicon glyphicon-trekëndësh-fund
glyphicon glyphicon-trekëndësh-majë
glyphicon glyphicon-konsol
glyphicon glyphicon-mbishkrim
glyphicon glyphicon-subscript
glyphicon glyphicon-menu-majtas
glyphicon glyphicon-menu-djathtas
glyphicon glyphicon-menu-poshtë
glyphicon glyphicon-menu-up
Si të përdorni
Për arsye të performancës, të gjitha ikonat kërkojnë një klasë bazë dhe një klasë ikonash individuale. Për ta përdorur, vendosni kodin e mëposhtëm pothuajse kudo. Sigurohuni që të lini një hapësirë midis ikonës dhe tekstit për mbushjen e duhur.
Mos përzieni me përbërës të tjerë
Klasat e ikonave nuk mund të kombinohen drejtpërdrejt me komponentë të tjerë. Ato nuk duhet të përdoren së bashku me klasa të tjera në të njëjtin element. Në vend të kësaj, shtoni një të mbivendosur <span>dhe aplikoni klasat e ikonave në <span>.
Vetëm për përdorim në elemente boshe
Klasat e ikonave duhet të përdoren vetëm në elementë që nuk përmbajnë përmbajtje teksti dhe nuk kanë elementë fëmijë.
Ndryshimi i vendndodhjes së fontit të ikonës
Bootstrap supozon se skedarët e shkronjave të ikonave do të vendosen në ../fonts/drejtori, në lidhje me skedarët e përpiluar CSS. Zhvendosja ose riemërtimi i atyre skedarëve të shkronjave nënkupton përditësimin e CSS në një nga tre mënyrat:
Ndryshoni @icon-font-pathdhe/ose @icon-font-namevariablat në skedarët e burimit Më pak.
Përdorni çfarëdo opsioni që i përshtatet më së miri konfigurimit tuaj specifik të zhvillimit.
Ikonat e aksesueshme
Versionet moderne të teknologjive ndihmëse do të shpallin përmbajtje të krijuar nga CSS, si dhe karaktere specifike të Unicode. Për të shmangur daljen e paqëllimshme dhe konfuze në lexuesit e ekranit (veçanërisht kur ikonat përdoren thjesht për dekorim), ne i fshehim ato me aria-hidden="true"atributin.
Nëse jeni duke përdorur një ikonë për të përcjellë kuptimin (në vend se vetëm si një element dekorativ), sigurohuni që ky kuptim të përcillet edhe tek teknologjitë ndihmëse - për shembull, përfshini përmbajtje shtesë, të fshehura vizualisht me .sr-onlyklasën.
Nëse jeni duke krijuar kontrolle pa tekst tjetër (si p.sh. një <button>që përmban vetëm një ikonë), duhet të siguroni gjithmonë përmbajtje alternative për të identifikuar qëllimin e kontrollit, në mënyrë që të ketë kuptim për përdoruesit e teknologjive ndihmëse. Në këtë rast, mund të shtoni një aria-labelatribut në vetë kontrollin.
Shembuj
Përdorini ato në butona, grupe butonash për një shirit veglash, navigim ose hyrje të formularit të paracaktuar.
Një ikonë e përdorur në një sinjalizim për të përcjellë se është një mesazh gabimi, me .sr-onlytekst shtesë për t'ua përcjellë këtë aluzion përdoruesve të teknologjive ndihmëse.
Gabim:Fut një adresë të vlefshme emaili
Dropdowns
Meny e ndërrueshme, kontekstuale për shfaqjen e listave të lidhjeve. Bërë ndërveprues me shtojcën me zbritje JavaScript .
Shembull
Mbështilleni aktivizuesin e listës me zbritje dhe menynë rënëse brenda .dropdown, ose një element tjetër që deklaron position: relative;. Pastaj shtoni HTML-në e menysë.
Si parazgjedhje, një meny rënëse pozicionohet automatikisht 100% nga lart dhe përgjatë anës së majtë të prindit të saj. Shtoni .dropdown-menu-rightnë a .dropdown-menunë të djathtë, rreshtoni menunë rënëse.
Mund të kërkojë pozicionim shtesë
Dropdown pozicionohen automatikisht nëpërmjet CSS brenda rrjedhës normale të dokumentit. Kjo do të thotë se skedarët me rënie mund të priten nga prindërit me overflowveçori të caktuara ose të shfaqen jashtë kufijve të portës së shikimit. Trajtojini këto çështje vetë kur lindin.
Shtrirja .pull-righte vjetëruar
Që nga versioni 3.1.0, ne kemi zhvlerësuar .pull-rightmenutë me zbritje. Për të rreshtuar djathtas një menu, përdorni .dropdown-menu-right. Komponentët navigues të rreshtuar djathtas në shiritin e navigimit përdorin një version mixin të kësaj klase për të lidhur automatikisht menunë. Për ta anashkaluar atë, përdorni .dropdown-menu-left.
Titujt
Shtoni një kokë për të etiketuar seksionet e veprimeve në çdo meny rënëse.
Gruponi një seri butonash së bashku në një rresht të vetëm me grupin e butonave. Shtoni sjelljen opsionale të radios JavaScript dhe stilin e kutisë së kontrollit me shtojcën tonë të butonave .
Këshillat e veglave dhe popovers në grupet e butonave kërkojnë cilësim të veçantë
Kur përdorni këshilla veglash ose popover në elementë brenda një .btn-group, do të duhet të specifikoni opsionin container: 'body'për të shmangur efektet anësore të padëshiruara (si p.sh. zgjerimi i elementit dhe/ose humbja e qosheve të tij të rrumbullakosura kur aktivizohet këshilla e veglave ose popover).
Sigurohuni të saktë roledhe jepni një etiketë
Në mënyrë që teknologjitë ndihmëse - të tilla si lexuesit e ekranit - të përcjellin se një seri butonash është grupuar, roleduhet të sigurohet një atribut i duhur. Për grupet e butonave, kjo do të ishte role="group", ndërsa shiritat e veglave duhet të kenë një role="toolbar".
Një përjashtim janë grupet që përmbajnë vetëm një kontroll të vetëm (për shembull grupet e butonave të justifikuara me <button>elementë) ose një listë rënëse.
Përveç kësaj, grupeve dhe shiritave të veglave duhet t'u jepet një etiketë e qartë, pasi shumica e teknologjive ndihmëse përndryshe nuk do t'i shpallin ato, pavarësisht nga prania e roleatributit të saktë. Në shembujt e dhënë këtu, ne përdorim aria-label, por alternativa të tilla si aria-labelledbymund të përdoren gjithashtu.
Shembull themelor
Mbështillni një seri butonash me .btnnë .btn-group.
Shiriti i veglave të butonave
Kombinoni grupe <div class="btn-group">në një <div class="btn-toolbar">për komponentë më komplekse.
Përmasat
Në vend që të aplikoni klasa për madhësinë e butonave për çdo buton në një grup, thjesht shtoni .btn-group-*në secilin .btn-group, duke përfshirë edhe kur vendosni grupe të shumta.
Folezimi
Vendosni një .btn-groupbrenda një tjetri .btn-groupkur dëshironi që menutë rënëse të përzihen me një seri butonash.
Bëni një grup butonash të shtrirë në madhësi të barabarta për të shtrirë të gjithë gjerësinë e prindit të tij. Gjithashtu funksionon me zbritjet e butonave brenda grupit të butonave.
Trajtimi i kufijve
Për shkak të HTML dhe CSS specifike të përdorura për të justifikuar butonat (domethënë display: table-cell), kufijtë midis tyre janë dyfishuar. Në grupet e butonave të rregullt, margin-left: -1pxpërdoret për të grumbulluar kufijtë në vend që t'i heqin ato. Megjithatë, marginnuk funksionon me display: table-cell. Si rezultat, në varësi të personalizimeve tuaja në Bootstrap, mund të dëshironi të hiqni ose t'i ringjyrni kufijtë.
IE8 dhe kufijtë
Internet Explorer 8 nuk i jep kufijtë e butonave në një grup butonash të justifikuar, pavarësisht nëse është i ndezur <a>ose <button>elementë. Për ta kapërcyer atë, mbështillni çdo buton me një tjetër .btn-group.
Nëse <a>elementët përdoren për të vepruar si butona - duke aktivizuar funksionalitetin brenda faqes, në vend që të lundrojnë në një dokument ose seksion tjetër brenda faqes aktuale - atyre gjithashtu duhet t'u jepet një role="button".
Me <button>elemente
Për të përdorur grupe të justifikuara të butonave me <button>elementë, duhet ta mbështillni çdo buton në një grup butonash . Shumica e shfletuesve nuk e zbatojnë siç duhet CSS-në tonë për justifikimin e <button>elementeve, por duke qenë se ne mbështesim zbritjet e butonave, ne mund ta zgjidhim këtë.
Zbritje të butonave
Përdorni çdo buton për të aktivizuar një menu dropdown duke e vendosur atë brenda një .btn-groupdhe duke siguruar shënimin e duhur të menusë.
Varësia e shtojcave
Zbritja e butonave kërkon që shtojca me zbritje të përfshihet në versionin tuaj të Bootstrap.
Zbritje me një buton të vetëm
Kthejeni një buton në një çelës me disa ndryshime bazë të shënimit.
Zgjeroni kontrollet e formularit duke shtuar tekst ose butona përpara, pas ose në të dyja anët e çdo teksti të bazuar <input>. Përdorni .input-groupme një .input-group-addonose .input-group-btnpër të shtuar ose për të shtuar elementë në një të vetme .form-control.
<input>Vetëm tekstuale
Shmangni përdorimin <select>e elementeve këtu pasi ato nuk mund të stilohen plotësisht në shfletuesit WebKit.
Shmangni përdorimin <textarea>e elementeve këtu pasi rowsatributi i tyre nuk do të respektohet në disa raste.
Këshillat e veglave dhe popovers në grupet e hyrjes kërkojnë cilësim të veçantë
Kur përdorni këshilla veglash ose popover në elementë brenda një .input-group, do të duhet të specifikoni opsionin container: 'body'për të shmangur efektet anësore të padëshiruara (si p.sh. zgjerimi i elementit dhe/ose humbja e qosheve të rrumbullakosura kur aktivizohet këshilla e veglave ose popover).
Mos përzieni me përbërës të tjerë
Mos i përzieni grupet e formave ose klasat e kolonave të rrjetit drejtpërdrejt me grupet hyrëse. Në vend të kësaj, futni grupin e hyrjes brenda grupit të formës ose elementit të lidhur me rrjetin.
Gjithmonë shtoni etiketa
Lexuesit e ekranit do të kenë probleme me formularët tuaj nëse nuk përfshini një etiketë për çdo hyrje. Për këto grupe hyrëse, sigurohuni që çdo etiketë ose funksionalitet shtesë të përcillet tek teknologjitë ndihmëse.
Teknika e saktë që do të përdoret (elementë të dukshëm <label>, <label>elementë të fshehur duke përdorur .sr-onlyklasën, ose përdorimi i , , ose aria-labelatributit aria-labelledby) aria-describedbydhe çfarë informacioni shtesë do të duhet të transmetohet do të ndryshojnë në varësi të llojit të saktë të miniaplikacionit të ndërfaqes që po zbatoni. Shembujt në këtë seksion ofrojnë disa qasje të sugjeruara, specifike për rastin.titleplaceholder
Shembull themelor
Vendosni një shtesë ose buton në të dyja anët e hyrjes. Ju gjithashtu mund të vendosni një në të dy anët e hyrjes.
Ne nuk mbështesim shtesa të shumta ( .input-group-addonose .input-group-btn) në një anë të vetme.
Ne nuk mbështesim kontrolle të shumëfishta formash në një grup të vetëm hyrës.
Përmasat
Shtoni klasat relative të madhësisë së formës në .input-groupvetvete dhe përmbajtjet brenda do të ndryshojnë automatikisht - nuk ka nevojë të përsëriten klasat e madhësisë së kontrollit të formës në secilin element.
Kutitë e kontrollit dhe shtesat radio
Vendosni çdo kuti kontrolli ose opsion radioje brenda shtesës së një grupi hyrës në vend të tekstit.
Shtesa me butona
Butonat në grupet hyrëse janë paksa të ndryshëm dhe kërkojnë një nivel shtesë foleje. Në vend të .input-group-addon, do t'ju duhet të përdorni .input-group-btnpër të mbështjellë butonat. Kjo kërkohet për shkak të stileve të parazgjedhura të shfletuesit që nuk mund të anashkalohen.
Butonat me zbritje
Butonat e segmentuar
Butona të shumtë
Ndërsa mund të keni vetëm një shtesë për çdo anë, mund të keni shumë butona brenda një të vetme .input-group-btn.
Navs
Navet e disponueshme në Bootstrap kanë shënime të përbashkëta, duke filluar me .navklasën bazë, si dhe gjendjet e përbashkëta. Ndërroni klasat e modifikuesve për të kaluar midis secilit stil.
Përdorimi i navigave për panelet e skedave kërkon shtojcën e skedave JavaScript
Për skedat me zona me skeda, duhet të përdorni shtojcën JavaScript të skedave . Shënimi do të kërkojë gjithashtu roleatribute shtesë dhe ARIA – shihni shembullin e shënimit të shtojcës për detaje të mëtejshme.
Bëni të aksesueshme navigimet e përdorura si navigacion
Nëse jeni duke përdorur navigacion për të siguruar një shirit navigimi, sigurohuni që të shtoni një role="navigation"në kontejnerin më logjik prind të <ul>, ose të mbështillni një <nav>element rreth të gjithë navigimit. Mos e shtoni rolin në <ul>vetvete, pasi kjo do të pengonte që ajo të shpallet si një listë aktuale nga teknologjitë ndihmëse.
Bëjini me lehtësi skedat ose pilulat me gjerësi të barabarta me gjerësinë e prindit të tyre në ekrane më të gjera se 768 pikselë me .nav-justified. Në ekranet më të vogla, lidhjet e navigimit grumbullohen.
Lidhjet e justifikuara të navigimit të shiritit navigues aktualisht nuk mbështeten.
Navs Safari dhe të përgjegjshëm të justifikuar
Që nga v9.1.2, Safari shfaq një defekt në të cilin ndryshimi i madhësisë së shfletuesit tuaj horizontalisht shkakton gabime të paraqitjes në navigimin e justifikuar që pastrohen pas rifreskimit. Ky gabim tregohet gjithashtu në shembullin e justifikuar nav .
Shiritat e navigimit janë meta komponentë të përgjegjshëm që shërbejnë si tituj navigimi për aplikacionin ose faqen tuaj. Ato fillojnë të shemben (dhe janë të ndërrueshme) në pamjet celulare dhe bëhen horizontale ndërsa gjerësia e disponueshme e pamjes rritet.
Lidhjet e justifikuara të navigimit të shiritit navigues aktualisht nuk mbështeten.
Përmbajtje e tejmbushur
Meqenëse Bootstrap nuk e di se sa hapësirë ka nevojë përmbajtja në shiritin tuaj navigues, mund të hasni probleme me mbështjelljen e përmbajtjes në një rresht të dytë. Për të zgjidhur këtë, ju mund të:
Zvogëloni sasinë ose gjerësinë e artikujve të shiritit navigues.
Ndryshoni pikën në të cilën shiriti juaj navigues kalon ndërmjet modalitetit të palosur dhe atij horizontal. Personalizojeni @grid-float-breakpointvariablin ose shtoni pyetjen tuaj të medias.
Kërkon shtojcën JavaScript
Nëse JavaScript është i çaktivizuar dhe porta e shikimit është mjaft e ngushtë që shiriti i navigimit të shembet, do të jetë e pamundur të zgjerohet shiriti i navigimit dhe të shikohet përmbajtja brenda .navbar-collapse.
Shiriti navigues i përgjegjshëm kërkon që shtojca e kolapsit të përfshihet në versionin tuaj të Bootstrap.
Ndryshimi i pikës së ndërprerjes së shiritit celular të palosur
Shiriti i navigimit rrëzohet në pamjen e tij vertikale celulare kur porta e shikimit është më e ngushtë se @grid-float-breakpoint, dhe zgjerohet në pamjen e tij horizontale jo-lëvizëse kur porta e shikimit është të paktën @grid-float-breakpointnë gjerësi. Rregulloni këtë variabël në burimin Më pak për të kontrolluar kur shiriti i navigimit shembet/zgjerohet. Vlera e paracaktuar është 768px(ekrani më i vogël "i vogël" ose "tableti").
Bëni të aksesueshme shiritat e navigimit
Sigurohuni që të përdorni një <nav>element ose, nëse përdorni një element më të përgjithshëm si p.sh. <div>, shtoni një role="navigation"në çdo shirit navigimi për ta identifikuar atë në mënyrë eksplicite si një rajon historik për përdoruesit e teknologjive ndihmëse.
Imazhi i Markes
Zëvendësoni markën e navbarit me imazhin tuaj duke e ndërruar tekstin me një <img>. Meqenëse .navbar-brandka mbushjen dhe lartësinë e vet, mund t'ju duhet të anashkaloni disa CSS në varësi të imazhit tuaj.
Format
Vendosni përmbajtjen e formularit brenda .navbar-formpër shtrirjen e duhur vertikale dhe sjelljen e palosur në porta të ngushta të shikimit. Përdorni opsionet e shtrirjes për të vendosur se ku qëndron brenda përmbajtjes së shiritit navigues.
Si një kokë lart, .navbar-formndan pjesën më të madhe të kodit të tij me .form-inlineanë të mixin. Disa kontrolle formash, si grupet e hyrjes, mund të kërkojnë që gjerësi fikse të shfaqen siç duhet brenda një shiriti navigimi.
Lexuesit e ekranit do të kenë probleme me formularët tuaj nëse nuk përfshini një etiketë për çdo hyrje. Për këto forma inline, ju mund t'i fshehni etiketat duke përdorur .sr-onlyklasën. Ka metoda të tjera alternative për të siguruar një etiketë për teknologjitë ndihmëse, të tilla si atributi aria-label, aria-labelledbyose . titleNëse asnjëra nga këto nuk është e pranishme, lexuesit e ekranit mund të përdorin placeholderatributin, nëse është i pranishëm, por vini re se përdorimi i tij placeholdersi zëvendësim për metodat e tjera të etiketimit nuk këshillohet.
Butonat
Shtoni .navbar-btnklasën tek <button>elementët që nuk qëndrojnë në a <form>për t'i përqendruar vertikalisht në shiritin e navigimit.
Përdorimi i kontekstit specifik
Ashtu si klasat standarde të butonave , .navbar-btnmund të përdoren në <a>dhe <input>elementë. Megjithatë, as .navbar-btnklasat standarde të butonave nuk duhet të përdoren në <a>elementet brenda .navbar-nav.
Teksti
Mbështillni vargjet e tekstit në një element me .navbar-text, zakonisht në një <p>etiketë për drejtimin dhe ngjyrën e duhur.
Lidhje pa navigacion
Për njerëzit që përdorin lidhje standarde që nuk janë brenda komponentit të rregullt të navigimit të shiritit navigues, përdorni .navbar-linkklasën për të shtuar ngjyrat e duhura për opsionet e parazgjedhura dhe të anasjellta të shiritit të navigimit.
Rreshtimi i komponentëve
Lidhni lidhjet e navigimit, formularët, butonat ose tekstin, duke përdorur klasat .navbar-leftose shërbimet. .navbar-rightTë dyja klasat do të shtojnë një float CSS në drejtimin e specifikuar. Për shembull, për të lidhur lidhjet e navigimit, vendosini ato në një të veçantë <ul>me klasën përkatëse të shërbimeve të aplikuara.
Këto klasa janë versione të përziera të .pull-leftdhe .pull-right, por ato janë të shtrira në pyetjet e medias për trajtimin më të lehtë të komponentëve të shiritit navigues në përmasat e pajisjes.
Rreshtimi djathtas i shumë komponentëve
Navbaret aktualisht kanë një kufizim me .navbar-rightklasa të shumta. Për të vendosur hapësirën e duhur, ne përdorim marzh negativ në .navbar-rightelementin e fundit. Kur ka shumë elementë që përdorin atë klasë, këto kufij nuk funksionojnë siç synohet.
Ne do ta rishikojmë këtë kur të mund ta rishkruajmë atë komponent në v4.
Fiks në krye
Shtoni .navbar-fixed-topdhe përfshini një .containerose .container-fluidnë qendër dhe bllokoni përmbajtjen e shiritit të navigimit.
Kërkohet mbushje e trupit
Shiriti i fiksuar i navigimit do të mbivendosë përmbajtjen tuaj të tjera, përveç nëse e shtoni paddingnë krye të <body>. Provoni vlerat tuaja ose përdorni fragmentin tonë më poshtë. Këshillë: Si parazgjedhje, shiriti i navigimit është 50 pikselë i lartë.
Sigurohuni që ta përfshini këtë pas CSS-së kryesore të Bootstrap.
Fiksuar në fund
Shtoni .navbar-fixed-bottomdhe përfshini një .containerose .container-fluidnë qendër dhe bllokoni përmbajtjen e shiritit të navigimit.
Kërkohet mbushje e trupit
Shiriti i navigimit fiks do të mbivendoset mbi përmbajtjen tuaj të tjera, përveç nëse e shtoni paddingnë fund të <body>. Provoni vlerat tuaja ose përdorni fragmentin tonë më poshtë. Këshillë: Si parazgjedhje, shiriti i navigimit është 50 pikselë i lartë.
Sigurohuni që ta përfshini këtë pas CSS-së kryesore të Bootstrap.
Top statike
Krijoni një shirit navigimi me gjerësi të plotë që largohet me faqen duke shtuar .navbar-static-topdhe përfshirë një .containerose .container-fluidnë qendër dhe përmbajtjen e shiritit të navigimit.
Ndryshe nga .navbar-fixed-*klasat, nuk keni nevojë të ndryshoni asnjë mbushje në body.
Shiriti navigues i përmbysur
Ndryshoni pamjen e shiritit të navigimit duke shtuar .navbar-inverse.
Therrime buke
Tregoni vendndodhjen e faqes aktuale brenda një hierarkie lundrimi.
Ndarësit shtohen automatikisht në CSS përmes :beforedhe content.
Siguroni lidhjet e faqes për faqen ose aplikacionin tuaj me komponentin e faqezimit me shumë faqe ose alternativën më të thjeshtë të pager -it .
Faqja e parazgjedhur
Faqerojtje e thjeshtë e frymëzuar nga Rdio, e shkëlqyeshme për aplikacionet dhe rezultatet e kërkimit. Blloku i madh është i vështirë për t'u humbur, lehtësisht i shkallëzueshëm dhe ofron zona të mëdha klikimesh.
Etiketimi i komponentit të faqezimit
Komponenti i faqezimit duhet të mbështillet në një <nav>element për ta identifikuar atë si një seksion navigimi për lexuesit e ekranit dhe teknologjitë e tjera ndihmëse. Për më tepër, duke qenë se një faqe ka të ngjarë të ketë tashmë më shumë se një seksion të tillë navigimi (si p.sh. navigimi kryesor në kokë, ose navigimi i shiritit anësor), këshillohet që të jepet një përshkrues aria-labelpër atë <nav>që pasqyron qëllimin e saj. Për shembull, nëse komponenti i faqezimit përdoret për të lundruar midis një grupi rezultatesh kërkimi, një etiketë e përshtatshme mund të jetë aria-label="Search results pages".
Gjendjet me aftësi të kufizuara dhe aktive
Lidhjet janë të personalizueshme për rrethana të ndryshme. Përdorni .disabledpër lidhje të paklikueshme dhe .activepër të treguar faqen aktuale.
Ne rekomandojmë që të ndërroni ankorat aktive ose të çaktivizuara për <span>, ose të hiqni ankorimin në rastin e shigjetave të mëparshme/tjetrës, për të hequr funksionalitetin e klikimeve duke ruajtur stilet e synuara.
Përmasat
Dëshironi faqezim më të madh apo më të vogël? Shtoni .pagination-lgose .pagination-smpër madhësi shtesë.
Pager
Lidhje të shpejta të mëparshme dhe të ardhshme për zbatime të thjeshta të faqes me shënime dhe stile të lehta. Është i shkëlqyeshëm për sajte të thjeshta si blogje ose revista.
Shembulli i parazgjedhur
Si parazgjedhje, lidhjet përqendrojnë pager-in.
Lidhjet e rreshtuara
Përndryshe, ju mund të rreshtoni secilën lidhje në anët:
Gjendja opsionale e çaktivizuar
Lidhjet e Pager gjithashtu përdorin .disabledklasën e përgjithshme të shërbimeve nga pagination.
Etiketat
Shembull
Shembull i titullit I ri
Shembull i titullit I ri
Shembull i titullit I ri
Shembull i titullit I ri
Shembull i titullit I ri
Shembull i titullit I ri
Variacionet e disponueshme
Shtoni ndonjë nga klasat e modifikuesve të përmendura më poshtë për të ndryshuar pamjen e një etikete.
Rreziku i paralajmërimit të parazgjedhur të informacionit parësor të suksesit
Keni mijëra etiketa?
Problemet e paraqitjes mund të lindin kur keni dhjetëra etiketa inline brenda një kontejneri të ngushtë, secila përmban inline-blockelementin e vet (si një ikonë). Rruga rreth kësaj po vendoset display: inline-block;. Për kontekstin dhe një shembull, shihni #13219 .
Shenjat
Theksoni me lehtësi artikujt e rinj ose të palexuar duke shtuar një <span class="badge">te lidhjet, navigimet e Bootstrap dhe më shumë.
Kur nuk ka artikuj të rinj ose të palexuar, distinktivët thjesht do të shemben (nëpërmjet :emptypërzgjedhësit të CSS) me kusht që të mos ketë përmbajtje brenda.
Pajtueshmëria me shfletues
Shenjat nuk do të shemben vetë në Internet Explorer 8 sepse i mungon mbështetja për :emptypërzgjedhësin.
Përshtatet me gjendjet aktive të navigimit
Stilet e integruara janë përfshirë për vendosjen e distinktivëve në gjendje aktive në navigimet e pilulave.
Një komponent i lehtë, fleksibël që mund të zgjasë opsionalisht të gjithë pamjen për të shfaqur përmbajtjen kryesore në faqen tuaj.
Përshendetje Botë!
Kjo është një njësi e thjeshtë heroike, një komponent i thjeshtë i stilit jumbotron për të tërhequr vëmendje shtesë ndaj përmbajtjes ose informacionit të paraqitur.
Për ta bërë jumbotronin me gjerësi të plotë dhe pa qoshe të rrumbullakosura, vendoseni jashtë të gjitha .containers dhe në vend të kësaj shtoni një .containerbrenda.
Kreu i faqes
Një predhë e thjeshtë për h1të ndarë dhe segmentuar në mënyrë të përshtatshme seksionet e përmbajtjes në një faqe. Mund të përdorë elementin h1e paracaktuar të 's small, si dhe shumicën e komponentëve të tjerë (me stile shtesë).
Shembull i kokës së faqes Nëntekst për kokën
Miniaturat
Zgjeroni sistemin e rrjetit të Bootstrap me komponentin e miniaturës për të shfaqur lehtësisht rrjetet e imazheve, videove, tekstit dhe më shumë.
Nëse jeni duke kërkuar për prezantim si Pinterest të miniaturave me lartësi dhe/ose gjerësi të ndryshme, do t'ju duhet të përdorni një shtojcë të palëve të treta si Masonry , Isotope ose Salvattore .
Shembulli i parazgjedhur
Si parazgjedhje, miniaturat e Bootstrap janë krijuar për të shfaqur imazhe të lidhura me shënjimin minimal të kërkuar.
Përmbajtje e personalizuar
Me pak shënim shtesë, është e mundur të shtoni çdo lloj përmbajtjeje HTML si tituj, paragrafë ose butona në miniaturë.
Etiketa e miniaturës
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.
Siguroni mesazhe reagimi kontekstual për veprimet tipike të përdoruesit me një numër të vogël mesazhesh alarmi të disponueshme dhe fleksibël.
Shembuj
Mbështillni çdo tekst dhe një buton opsional të heqjes brenda .alertdhe një nga katër klasat kontekstuale (p.sh., .alert-success) për mesazhet bazë të alarmit.
Asnjë klasë e paracaktuar
Alarmet nuk kanë klasa të paracaktuara, vetëm klasa bazë dhe modifikues. Një sinjalizim gri i paracaktuar nuk ka shumë kuptim, kështu që ju kërkohet të specifikoni një lloj përmes klasës kontekstuale. Zgjidhni nga suksesi, informacioni, paralajmërimi ose rreziku.
Te lumte! Ju e lexoni me sukses këtë mesazh të rëndësishëm alarmi.
Kokat lart! Ky alarm kërkon vëmendjen tuaj, por nuk është shumë i rëndësishëm.
Paralajmërim! Më mirë kontrolloni veten, nuk po dukeni shumë mirë.
Dreqin! Ndrysho disa gjëra dhe provo të dorëzosh sërish.
Sinjalizime të shpërfillshme
Ndërtoni në çdo alarm duke shtuar një .alert-dismissiblebuton opsional dhe mbyllës.
Jepni komente të përditësuara mbi ecurinë e një fluksi pune ose veprimi me shirita të thjeshtë por fleksibël të përparimit.
Pajtueshmëria me shfletues
Shiritat e progresit përdorin tranzicione dhe animacione CSS3 për të arritur disa nga efektet e tyre. Këto veçori nuk mbështeten në Internet Explorer 9 dhe versionet më poshtë ose më të vjetra të Firefox-it. Opera 12 nuk mbështet animacione.
Përputhshmëria e politikës së sigurisë së përmbajtjes (CSP).
Nëse faqja juaj e internetit ka një Politikë të Sigurisë së Përmbajtjes (CSP) e cila nuk e lejon style-src 'unsafe-inline', atëherë nuk do të mund të përdorni styleatributet inline për të vendosur gjerësinë e shiritit të përparimit siç tregohet në shembujt tanë më poshtë. Metodat alternative për vendosjen e gjerësive që janë në përputhje me CSP-të strikte përfshijnë përdorimin e një JavaScript të vogël të personalizuar (që vendos element.style.width) ose përdorimin e klasave të personalizuara CSS.
Shembull themelor
Shiriti i parazgjedhur i përparimit.
60% e kompletuar
Me etiketë
Hiqni klasën <span>me .sr-onlynga brenda shiritit të përparimit për të treguar një përqindje të dukshme.
60%
Për të siguruar që teksti i etiketës të mbetet i lexueshëm edhe për përqindje të ulëta, merrni parasysh shtimin e një min-widthnë shiritin e përparimit.
0%
2%
Alternativat kontekstuale
Shiritat e progresit përdorin disa nga të njëjtin buton dhe klasa alarmi për stile të qëndrueshme.
40% e përfunduar (sukses)
20% e kompletuar
60% e përfunduar (paralajmërim)
80% I plotë (rrezik)
Me vija
Përdor një gradient për të krijuar një efekt me vija. Nuk disponohet në IE9 dhe më poshtë.
40% e përfunduar (sukses)
20% e kompletuar
60% e përfunduar (paralajmërim)
80% I plotë (rrezik)
I animuar
Shtoni .activenë .progress-bar-stripedpër të animuar vijat nga e djathta në të majtë. Nuk disponohet në IE9 dhe më poshtë.
45% e kompletuar
Të grumbulluara
Vendosni shufra të shumta në të njëjtën .progresspër t'i grumbulluar ato.
35% e përfunduar (sukses)
20% e përfunduar (paralajmërim)
10% I plotë (rrezik)
Objekti mediatik
Stilet abstrakte të objekteve për ndërtimin e llojeve të ndryshme të komponentëve (si komentet në blog, Tweet, etj) që paraqesin një imazh të rreshtuar majtas ose djathtas së bashku me përmbajtjen tekstuale.
Media e parazgjedhur
Media e paracaktuar shfaq një objekt mediatik (imazhe, video, audio) në të majtë ose në të djathtë të një blloku të përmbajtjes.
Titulli i medias
Cras sit amet nibh libero, in gravida nulla. Nuk do të thotë se nuk do të jetë e mundur. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis në faucibus.
Titulli i medias
Cras sit amet nibh libero, in gravida nulla. Nuk do të thotë se nuk do të jetë e mundur. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis në faucibus.
Titulli i medias së mbivendosur
Cras sit amet nibh libero, in gravida nulla. Nuk do të thotë se nuk do të jetë e mundur. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis në faucibus.
Titulli i medias
Cras sit amet nibh libero, in gravida nulla. Nuk do të thotë se nuk do të jetë e mundur. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
Titulli i medias
Cras sit amet nibh libero, in gravida nulla. Nuk do të thotë se nuk do të jetë e mundur. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
Klasat .pull-leftdhe .pull-rightgjithashtu ekzistojnë dhe janë përdorur më parë si pjesë e komponentit të medias, por janë të vjetruara për atë përdorim që nga v3.3.0. Ato janë përafërsisht ekuivalente me .media-leftdhe .media-right, përveç që .media-rightduhet të vendosen pas .media-bodynë html.
Rreshtimi i medias
Imazhet ose mediat e tjera mund të rreshtohen lart, mes ose poshtë. Parazgjedhja është rreshtuar në krye.
Media e rreshtuar në krye
Cras sit amet nibh libero, in gravida nulla. Nuk do të thotë se nuk do të jetë e mundur. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis në 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.
Media e rreshtuar në mes
Cras sit amet nibh libero, in gravida nulla. Nuk do të thotë se nuk do të jetë e mundur. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis në 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.
Media e rreshtuar poshtë
Cras sit amet nibh libero, in gravida nulla. Nuk do të thotë se nuk do të jetë e mundur. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis në 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.
Lista e mediave
Me pak shënim shtesë, mund të përdorni media brenda listës (e dobishme për temat e komenteve ose listat e artikujve).
Titulli i medias
Cras sit amet nibh libero, in gravida nulla. Nuk do të thotë se nuk do të jetë e mundur. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
Titulli i medias së mbivendosur
Cras sit amet nibh libero, in gravida nulla. Nuk do të thotë se nuk do të jetë e mundur. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
Titulli i medias së mbivendosur
Cras sit amet nibh libero, in gravida nulla. Nuk do të thotë se nuk do të jetë e mundur. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
Titulli i medias së mbivendosur
Cras sit amet nibh libero, in gravida nulla. Nuk do të thotë se nuk do të jetë e mundur. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
Lista e grupit
Grupet e listave janë një komponent fleksibël dhe i fuqishëm për të shfaqur jo vetëm listat e thjeshta të elementeve, por ato komplekse me përmbajtje të personalizuar.
Shembull themelor
Grupi më themelor i listës është thjesht një listë e parregulluar me artikuj të listës dhe klasat e duhura. Ndërtoni mbi të me opsionet që vijojnë, ose CSS-në tuaj sipas nevojës.
Cras justo odio
Lehtësimi i AC në
Morbi leo risus
Porta ac consectetur ac
Vestibulum dhe eros
Shenjat
Shtoni komponentin e shënjave në çdo artikull të grupit të listës dhe ai automatikisht do të pozicionohet në të djathtë.
14Cras justo odio
2Lehtësimi i AC në
1Morbi leo risus
Artikuj të lidhur
Lidhni artikujt e grupit të listës duke përdorur etiketat ankoruese në vend të artikujve të listës (që do të thotë gjithashtu një prind <div>në vend të një <ul>). Nuk ka nevojë për prindër individualë rreth secilit element.
Artikujt e grupit të listës mund të jenë butona në vend të artikujve të listës (që do të thotë gjithashtu një prind <div>në vend të një <ul>). Nuk ka nevojë për prindër individualë rreth secilit element. Mos përdorni .btnklasat standarde këtu.
Artikuj me aftësi të kufizuara
Shto .disablednë një .list-group-itempër të gri atë për t'u shfaqur i paaftë.
Edhe pse jo gjithmonë është e nevojshme, ndonjëherë ju duhet ta vendosni DOM-in tuaj në një kuti. Për ato situata, provoni komponentin e panelit.
Shembull themelor
Si parazgjedhje, gjithçka që .panelbën është të aplikojë disa kufij bazë dhe mbushje për të përmbajtur disa përmbajtje.
Shembull i panelit bazë
Paneli me titull
Shtoni me lehtësi një kontejnerë titulli në panelin tuaj me .panel-heading. Ju gjithashtu mund të përfshini ndonjë <h1>- <h6>me një .panel-titleklasë për të shtuar një titull të paracaktuar. Megjithatë, madhësitë e shkronjave <h1>- <h6>janë anashkaluar nga .panel-heading.
Për ngjyrosjen e duhur të lidhjeve, sigurohuni që të vendosni lidhjet në titujt brenda .panel-title.
Titulli i panelit pa titull
Përmbajtja e panelit
Titulli i panelit
Përmbajtja e panelit
Paneli me footer
Mbështillni butonat ose tekstin dytësor në .panel-footer. Vini re se fundet e paneleve nuk trashëgojnë ngjyra dhe kufij kur përdorin variacione kontekstuale pasi ato nuk janë menduar të jenë në plan të parë.
Përmbajtja e panelit
Alternativat kontekstuale
Ashtu si komponentët e tjerë, lehtë e bëni një panel më kuptimplotë për një kontekst të caktuar duke shtuar ndonjë nga klasat e gjendjes kontekstuale.
Titulli i panelit
Përmbajtja e panelit
Titulli i panelit
Përmbajtja e panelit
Titulli i panelit
Përmbajtja e panelit
Titulli i panelit
Përmbajtja e panelit
Titulli i panelit
Përmbajtja e panelit
Me tavolina
Shtoni çdo pa kufi .tablebrenda një paneli për një dizajn pa probleme. Nëse ka një .panel-body, shtojmë një kufi shtesë në krye të tabelës për ndarje.
Titulli i panelit
Disa përmbajtje të parazgjedhur të panelit këtu. Nulla vitae elit libero, një 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.
#
Emri
Mbiemri
Emri i përdoruesit
1
shenjë
Oto
@mdo
2
Jakobi
Thornton
@yndyrë
3
Larry
Zogu
@Cicëroj
Nëse nuk ka trup paneli, komponenti lëviz nga kreu i panelit në tabelë pa ndërprerje.
Titulli i panelit
#
Emri
Mbiemri
Emri i përdoruesit
1
shenjë
Oto
@mdo
2
Jakobi
Thornton
@yndyrë
3
Larry
Zogu
@Cicëroj
Me grupe listash
Përfshini lehtësisht grupet e listës me gjerësi të plotë brenda çdo paneli.
Titulli i panelit
Disa përmbajtje të parazgjedhur të panelit këtu. Nulla vitae elit libero, një 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
Lehtësimi i AC në
Morbi leo risus
Porta ac consectetur ac
Vestibulum dhe eros
Embed reaguese
Lejo që shfletuesit të përcaktojnë dimensionet e videos ose paraqitjes së diapozitivëve bazuar në gjerësinë e bllokut që përmban duke krijuar një raport të brendshëm që do të shkallëzohet siç duhet në çdo pajisje.
Rregullat zbatohen drejtpërdrejt në <iframe>, <embed>, <video>, dhe <object>elementë; opsionalisht përdorni një klasë të qartë pasardhëse .embed-responsive-itemkur dëshironi të përputheni me stilin për atributet e tjera.
Pro-Tip! Ju nuk keni nevojë të përfshini frameborder="0"në <iframe>s tuaj pasi ne e anashkalojmë atë për ju.
Puset
E paracaktuar mirë
Përdorni pusin si një efekt të thjeshtë në një element për t'i dhënë atij një efekt të futur.
Shiko, unë jam në një pus!
Klasat me dëshirë
Kontrolloni mbushjen dhe qoshet e rrumbullakosura me dy klasa modifikuese opsionale.