Zaidi ya vipengee kadhaa vinavyoweza kutumika tena vilivyoundwa ili kutoa aikoni, menyu kunjuzi, vikundi vya ingizo, urambazaji, arifa na mengi zaidi.
Glyphicons
Glyphs zinazopatikana
Inajumuisha zaidi ya glyphs 250 katika umbizo la fonti kutoka kwa seti ya Glyphicon Halflings. Glyphicons Halflings kwa kawaida haipatikani bila malipo, lakini muundaji wao ameifanya ipatikane kwa Bootstrap bila malipo. Kama shukrani, tunaomba tu ujumuishe kiungo cha kurudi kwenye Glyphicons kila inapowezekana.
glyphicon glyphicon-asterisk
glyphicon glyphicon-plus
glyphicon glyphicon-euro
glyphicon glyphicon-eur
glyphicon glyphicon-minus
glyphicon glyphicon-wingu
bahasha ya glyphicon
glyphicon glyphicon-penseli
glyphicon glyphicon-kioo
glyphicon glyphicon-muziki
glyphicon glyphicon-search
glyphicon glyphicon-moyo
glyphicon glyphicon-nyota
glyphicon glyphicon-nyota-tupu
mtumiaji wa glyphicon glyphicon
glyphicon glyphicon-filamu
glyphicon glyphicon-th-kubwa
glyphicon glyphicon-th
glyphicon glyphicon-th-orodha
glyphicon glyphicon-ok
glyphicon glyphicon-kuondoa
glyphicon glyphicon-zoom-in
glyphicon glyphicon-zoom-out
glyphicon glyphicon-off
ishara ya glyphicon
glyphicon glyphicon-cog
glyphicon glyphicon-takataka
glyphicon glyphicon-nyumbani
glyphicon glyphicon-faili
glyphicon glyphicon-wakati
barabara ya glyphicon glyphicon
glyphicon glyphicon-download-alt
glyphicon glyphicon-pakua
upakiaji wa glyphicon glyphicon
kisanduku pokezi cha glyphicon
glyphicon glyphicon-play-mduara
glyphicon glyphicon-kurudia
glyphicon glyphicon-refresh
glyphicon glyphicon-orodha-alt
glyphicon glyphicon-lock
bendera ya glyphicon
glyphicon glyphicon-headphones
glyphicon glyphicon-kiasi-off
glyphicon glyphicon-kiasi-chini
glyphicon glyphicon-kiasi-up
glyphicon glyphicon-qrcode
glyphicon glyphicon-barcode
glyphicon glyphicon-tag
vitambulisho vya glyphicon
glyphicon glyphicon-kitabu
glyphicon glyphicon-alamisho
glyphicon glyphicon-print
glyphicon glyphicon-kamera
fonti ya glyphicon
glyphicon glyphicon-bold
glyphicon glyphicon-italic
glyphicon glyphicon-text-urefu
upana wa maandishi ya glyphicon
glyphicon glyphicon-align-kushoto
glyphicon glyphicon-align-center
glyphicon glyphicon-align-right
glyphicon glyphicon-align-justify
orodha ya glyphicon
glyphicon glyphicon-indent-kushoto
glyphicon glyphicon-indent-right
glyphicon glyphicon-facetime-video
glyphicon glyphicon-picha
glyphicon glyphicon-ramani-alama
glyphicon glyphicon-rekebisha
glyphicon glyphicon-tint
glyphicon glyphicon-hariri
glyphicon glyphicon-share
angalia glyphicon glyphicon
glyphicon glyphicon-move
glyphicon glyphicon-hatua-nyuma
glyphicon glyphicon-haraka-nyuma
glyphicon glyphicon-nyuma
glyphicon glyphicon-kucheza
glyphicon glyphicon-pause
glyphicon glyphicon-stop
glyphicon glyphicon-mbele
glyphicon glyphicon-haraka-mbele
glyphicon glyphicon-hatua-mbele
glyphicon glyphicon-eject
glyphicon glyphicon-chevron-kushoto
glyphicon glyphicon-chevron-right
ishara ya glyphicon glyphicon-plus
ishara ya glyphicon glyphicon-minus
ishara ya glyphicon glyphicon-remove
ishara ya glyphicon glyphicon-ok-sign
glyphicon glyphicon-swali-ishara
ishara ya glyphicon ya habari
glyphicon glyphicon-screenshot
glyphicon glyphicon-kuondoa-mduara
glyphicon glyphicon-ok-mduara
glyphicon glyphicon-ban-circle
glyphicon glyphicon-arrow-left
glyphicon glyphicon-arrow-right
glyphicon glyphicon-arrow-up
glyphicon glyphicon-arrow-down
glyphicon glyphicon-share-alt
glyphicon glyphicon-resize-full
glyphicon glyphicon-resize-ndogo
ishara ya glyphicon glyphicon-mshangao
glyphicon glyphicon-zawadi
jani la glyphicon
glyphicon glyphicon-moto
glyphicon glyphicon-jicho-wazi
glyphicon glyphicon-jicho-funga
ishara ya onyo ya glyphicon
glyphicon glyphicon-ndege
glyphicon glyphicon-kalenda
glyphicon glyphicon-random
glyphicon glyphicon-maoni
glyphicon glyphicon-sumaku
glyphicon glyphicon-chevron-up
glyphicon glyphicon-chevron-chini
glyphicon glyphicon-retweet
glyphicon glyphicon-shopping-cart
glyphicon glyphicon-folda-funga
glyphicon glyphicon-folda-wazi
glyphicon glyphicon-resize-wima
glyphicon glyphicon-resize-usawa
glyphicon glyphicon-hdd
glyphicon glyphicon-bullhorn
glyphicon glyphicon-kengele
cheti cha glyphicon glyphicon
glyphicon glyphicon-gumba-up
glyphicon glyphicon-gumba-chini
glyphicon glyphicon-mkono-kulia
glyphicon glyphicon-mkono-kushoto
glyphicon glyphicon-mkono-up
glyphicon glyphicon-hand-chini
glyphicon glyphicon-mduara-mshale-kulia
glyphicon glyphicon-mduara-mshale-kushoto
glyphicon glyphicon-mviringo-mshale-up
glyphicon glyphicon-mduara-mshale-chini
glyphicon glyphicon-globe
glyphicon glyphicon-wrench
kazi za glyphicon glyphicon
glyphicon glyphicon-chujio
Glyphicon glyphicon-briefcase
skrini nzima ya glyphicon glyphicon
glyphicon glyphicon-dashibodi
glyphicon glyphicon-paperclip
glyphicon glyphicon-moyo-tupu
glyphicon glyphicon-kiungo
glyphicon glyphicon-simu
glyphicon glyphicon-pushpin
glyphicon glyphicon-usd
glyphicon glyphicon-gbp
glyphicon glyphicon-aina
glyphicon glyphicon-panga-kwa-alfabeti
glyphicon glyphicon-panga-kwa-alfabeti-alt
glyphicon glyphicon-panga-kwa-ili
glyphicon glyphicon-panga-na-order-alt
glyphicon glyphicon-panga-kwa-sifa
glyphicon glyphicon-panga-kwa-sifa-alt
glyphicon glyphicon-haijachunguzwa
glyphicon glyphicon-kupanua
glyphicon glyphicon-collapse-down
glyphicon glyphicon-collapse-up
glyphicon glyphicon-logi-in
glyphicon glyphicon-flash
glyphicon glyphicon-log-out
glyphicon glyphicon-new-dirisha
glyphicon glyphicon-rekodi
glyphicon glyphicon-save
glyphicon glyphicon-wazi
glyphicon glyphicon-kuokolewa
glyphicon glyphicon-kuagiza
glyphicon glyphicon-export
glyphicon glyphicon-tuma
glyphicon glyphicon-floppy-disk
glyphicon glyphicon-floppy-imehifadhiwa
glyphicon glyphicon-floppy-remove
glyphicon glyphicon-floppy-save
glyphicon glyphicon-floppy-wazi
glyphicon glyphicon-credit-kadi
glyphicon glyphicon-uhamisho
glyphicon glyphicon-cutlery
glyphicon glyphicon-header
glyphicon glyphicon-iliyobanwa
glyphicon glyphicon- earphone
glyphicon glyphicon-phone-alt
mnara wa glyphicon
takwimu za glyphicon
glyphicon glyphicon-sd-video
glyphicon glyphicon-hd-video
manukuu ya glyphicon
glyphicon glyphicon-sauti-stereo
glyphicon glyphicon-sound-dolby
glyphicon glyphicon-sauti-5-1
glyphicon glyphicon-sauti-6-1
glyphicon glyphicon-sauti-7-1
glyphicon glyphicon-copyright-mark
glyphicon glyphicon-registration-alama
glyphicon glyphicon-cloud-pakua
glyphicon glyphicon-cloud-upload
glyphicon glyphicon-mti-conifer
glyphicon glyphicon-mti-deciduous
glyphicon glyphicon-cd
glyphicon glyphicon-save-faili
glyphicon glyphicon-wazi-faili
ngazi ya glyphicon glyphicon-juu
nakala ya glyphicon
glyphicon glyphicon-paste
glyphicon glyphicon-tahadhari
glyphicon glyphicon-kusawazisha
glyphicon glyphicon-mfalme
glyphicon glyphicon-malkia
glyphicon glyphicon-pawn
glyphicon glyphicon-askofu
glyphicon glyphicon-knight
fomula ya glyphicon glyphicon-mtoto
glyphicon glyphicon-tent
glyphicon glyphicon-blackboard
glyphicon glyphicon-kitanda
glyphicon glyphicon-apple
glyphicon glyphicon-kufuta
glyphicon glyphicon-hourglass
glyphicon glyphicon-taa
glyphicon glyphicon-duplicate
glyphicon glyphicon-piggy-bank
glyphicon glyphicon-mkasi
glyphicon glyphicon-bitcoin
glyphicon glyphicon-btc
glyphicon glyphicon-xbt
glyphicon glyphicon-yen
glyphicon glyphicon-jpy
glyphicon glyphicon-ruble
glyphicon glyphicon-rub
glyphicon glyphicon-scale
glyphicon glyphicon-ice-lolly
glyphicon glyphicon-ice-lolly-onja
glyphicon glyphicon-elimu
glyphicon glyphicon-chaguo-mlalo
glyphicon glyphicon-chaguo-wima
glyphicon glyphicon-menu-hamburger
dirisha la glyphicon glyphicon-modal
glyphicon glyphicon-mafuta
glyphicon glyphicon-nafaka
miwani ya jua ya glyphicon
glyphicon glyphicon-text-size
glyphicon glyphicon-text-rangi
glyphicon glyphicon-text-background
glyphicon glyphicon-object-align-top
glyphicon glyphicon-object-align-chini
glyphicon glyphicon-object-align-usawa
glyphicon glyphicon-object-align-left
glyphicon glyphicon-object-align-wima
glyphicon glyphicon-object-align-right
glyphicon glyphicon-pembetatu-kulia
glyphicon glyphicon-pembetatu-kushoto
glyphicon glyphicon-pembetatu-chini
glyphicon glyphicon-pembetatu-juu
glyphicon glyphicon-console
glyphicon glyphicon-superscript
usajili wa glyphicon glyphicon
glyphicon glyphicon-menu-kushoto
glyphicon glyphicon-menu-kulia
glyphicon glyphicon-menyu-chini
glyphicon glyphicon-menu-up
Jinsi ya kutumia
Kwa sababu za utendakazi, aikoni zote zinahitaji darasa la msingi na darasa la aikoni ya mtu binafsi. Ili kutumia, weka msimbo ufuatao popote pale. Hakikisha umeacha nafasi kati ya ikoni na maandishi ili kuweka pedi zinazofaa.
Usichanganye na viungo vingine
Madarasa ya ikoni hayawezi kuunganishwa moja kwa moja na vipengee vingine. Hazipaswi kutumiwa pamoja na madarasa mengine kwenye kipengele sawa. Badala yake, ongeza kiota <span>na utumie madarasa ya ikoni kwenye <span>.
Inatumika tu kwenye vitu tupu
Madarasa ya aikoni yanapaswa kutumika tu kwenye vipengele ambavyo havina maudhui ya maandishi na visivyo na vipengele vya watoto.
Kubadilisha eneo la fonti ya ikoni
Bootstrap inadhani faili za fonti za ikoni zitapatikana kwenye ../fonts/saraka, kuhusiana na faili za CSS zilizokusanywa. Kusonga au kubadilisha jina la faili hizo za fonti kunamaanisha kusasisha CSS katika mojawapo ya njia tatu:
Badilisha @icon-font-pathna/au @icon-font-namevigeu kwenye chanzo Faili za Chini.
Tumia chaguo lolote linalofaa zaidi usanidi wako mahususi wa ukuzaji.
Aikoni zinazoweza kufikiwa
Matoleo ya kisasa ya teknolojia ya usaidizi yatatangaza maudhui yanayozalishwa na CSS, pamoja na herufi maalum za Unicode. Ili kuepuka matokeo yasiyotarajiwa na ya kutatanisha katika visoma skrini (hasa wakati aikoni zinatumiwa kwa mapambo pekee), tunazificha kwa aria-hidden="true"sifa.
Iwapo unatumia aikoni kuwasilisha maana (badala ya kuwa kipengele cha mapambo pekee), hakikisha kwamba maana hii pia inawasilishwa kwa teknolojia saidizi - kwa mfano, inajumuisha maudhui ya ziada, yanayoonekana na .sr-onlydarasa.
Ikiwa unaunda vidhibiti bila maandishi mengine (kama vile <button>yaliyo na ikoni pekee), unapaswa kutoa maudhui mbadala kila wakati ili kutambua madhumuni ya udhibiti, ili iwe na maana kwa watumiaji wa teknolojia saidizi. Katika kesi hii, unaweza kuongeza aria-labelsifa kwenye udhibiti yenyewe.
Mifano
Zitumie katika vitufe, vikundi vya vitufe kwa upau wa vidhibiti, usogezaji, au ingizo za fomu zilizotangulizwa.
Aikoni inayotumika katika arifa kuwasilisha kwamba ni ujumbe wa hitilafu, yenye .sr-onlymaandishi ya ziada ili kuwasilisha kidokezo hiki kwa watumiaji wa teknolojia saidizi.
Hitilafu:Weka barua pepe halali
Kunjuzi
Menyu inayoweza kugeuzwa, ya muktadha ya kuonyesha orodha za viungo. Imeingiliana na menyu kunjuzi ya JavaScript .
Mfano
Funga kianzio cha menyu kunjuzi na menyu kunjuzi ndani ya .dropdown, au kipengele kingine kinachotangaza position: relative;. Kisha ongeza HTML ya menyu.
Kwa chaguomsingi, menyu kunjuzi huwekwa kiotomatiki 100% kutoka juu na upande wa kushoto wa mzazi wake. Ongeza .dropdown-menu-rightkwenye a .dropdown-menupanga menyu kunjuzi.
Inaweza kuhitaji nafasi ya ziada
Kunjuzi huwekwa kiotomatiki kupitia CSS ndani ya mtiririko wa kawaida wa hati. Hii inamaanisha menyu kunjuzi inaweza kupunguzwa na wazazi walio na overflowsifa fulani au kuonekana nje ya mipaka ya kituo cha kutazama. Shughulikia maswala haya peke yako yanapojitokeza.
.pull-rightMpangilio ulioacha kutumika
Kufikia v3.1.0, tumeacha kuendesha .pull-rightmenyu kunjuzi. Ili kupanga menyu kulia, tumia .dropdown-menu-right. Vipengee vya nav vilivyopangiliwa kulia katika upau wa urambazaji hutumia toleo la mchanganyiko wa darasa hili ili kupangilia menyu kiotomatiki. Ili kuibatilisha, tumia .dropdown-menu-left.
Vichwa vya habari
Ongeza kichwa ili kuweka lebo sehemu za vitendo katika menyu kunjuzi yoyote.
Panga safu ya vifungo pamoja kwenye mstari mmoja na kikundi cha vitufe. Ongeza kwenye redio ya hiari ya JavaScript na tabia ya mtindo wa kisanduku cha kuteua ukitumia programu-jalizi yetu ya vitufe .
Vidokezo vya zana na popover katika vikundi vya vitufe vinahitaji mpangilio maalum
Unapotumia vidokezo vya zana au popovers kwenye vipengee vilivyo ndani ya .btn-group, itabidi ubainishe chaguo container: 'body'ili kuepuka athari zisizohitajika (kama vile kipengele kukua kwa upana na/au kupoteza pembe zake za mviringo wakati ncha ya zana au popover inapoanzishwa).
Hakikisha kuwa sahihi rolena utoe lebo
Ili teknolojia saidizi - kama vile visoma skrini - kuonyesha kwamba mfululizo wa vitufe vimepangwa, rolesifa inayofaa inapaswa kutolewa. Kwa vikundi vya vitufe, hii itakuwa role="group", wakati upau wa vidhibiti unapaswa kuwa na role="toolbar".
Isipokuwa moja ni vikundi ambavyo vina kidhibiti kimoja pekee (kwa mfano vikundi vya vitufe vilivyo na <button>vipengee vilivyothibitishwa) au menyu kunjuzi.
Kwa kuongezea, vikundi na upau wa vidhibiti vinapaswa kupewa lebo wazi, kwani teknolojia nyingi za usaidizi hazitazitangaza, licha ya uwepo wa rolesifa sahihi. Katika mifano iliyotolewa hapa, tunatumia aria-label, lakini njia mbadala kama vile aria-labelledbyzinaweza kutumika pia.
Mfano wa msingi
Funga mfululizo wa vifungo na .btnin .btn-group.
Upau wa vidhibiti
Changanya seti za <div class="btn-group">katika a <div class="btn-toolbar">kwa vipengele ngumu zaidi.
Ukubwa
Badala ya kutumia madarasa ya kupanga vitufe kwa kila kitufe kwenye kikundi, ongeza tu .btn-group-*kwa kila .btn-group, ikijumuisha wakati wa kuweka vikundi vingi.
Nesting
Weka .btn-groupndani ya nyingine .btn-groupunapotaka menyu kunjuzi zilizochanganywa na msururu wa vitufe.
Fanya kikundi cha vifungo kunyoosha kwa ukubwa sawa ili kupanua upana mzima wa mzazi wake. Pia hufanya kazi na menyu kunjuzi za vitufe ndani ya kikundi cha vitufe.
Kushughulikia mipaka
Kwa sababu ya HTML na CSS maalum inayotumika kuhalalisha vifungo (yaani display: table-cell), mipaka kati yao imeongezwa mara mbili. Katika vikundi vya vifungo vya kawaida, margin-left: -1pxhutumiwa kuweka mipaka badala ya kuiondoa. Walakini, marginhaifanyi kazi na display: table-cell. Kwa hivyo, kulingana na ubinafsishaji wako kwa Bootstrap, unaweza kutaka kuondoa au kupaka rangi tena mipaka.
IE8 na mipaka
Internet Explorer 8 haitoi mipaka kwenye vitufe katika kikundi cha vitufe vilivyohalalishwa, iwe imewashwa <a>au <button>vipengele. Ili kuzunguka hilo, funga kila kitufe kwenye .btn-group.
Iwapo <a>vipengele vinatumika kufanya kama vitufe - kuanzisha utendakazi wa ndani ya ukurasa, badala ya kuelekea kwenye hati au sehemu nyingine ndani ya ukurasa wa sasa - vinapaswa pia kupewa role="button".
Pamoja na <button>vipengele
Ili kutumia vikundi vya vitufe vilivyo na <button>vipengele, lazima ufunge kila kitufe kwenye kikundi cha vitufe . Vivinjari vingi havitumii CSS yetu ipasavyo kwa uhalalishaji wa <button>vipengee, lakini kwa kuwa tunaauni vitufe kunjuzi, tunaweza kusuluhisha hilo.
Vifungo kunjuzi
Tumia kitufe chochote kuanzisha menyu kunjuzi kwa kuiweka ndani ya a .btn-groupna kutoa lebo sahihi ya menyu.
Utegemezi wa programu-jalizi
Kunjuzi za vitufe kunahitaji programu- jalizi kunjuzi kujumuishwa katika toleo lako la Bootstrap.
Viteremsho vya kitufe kimoja
Geuza kitufe kuwa kigeuza kunjuzi na mabadiliko ya msingi ya alamisho.
Ongeza vidhibiti vya fomu kwa kuongeza maandishi au vitufe kabla, baada, au pande zote mbili za msingi wa maandishi <input>. Tumia .input-groupna .input-group-addonau .input-group-btnkutayarisha au kuongezea vipengele kwenye .form-control.
Maandishi <input>tu
Epuka kutumia <select>vipengee hapa kwa vile haviwezi kuwekwa muundo kikamilifu katika vivinjari vya WebKit.
Epuka kutumia <textarea>vipengele hapa kwani rowssifa yake haitaheshimiwa katika baadhi ya matukio.
Vidokezo vya zana na popover katika vikundi vya ingizo vinahitaji mpangilio maalum
Unapotumia vidokezo vya zana au popovers kwenye vipengee vilivyo ndani ya .input-group, itabidi ubainishe chaguo container: 'body'ili kuepuka athari zisizohitajika (kama vile kipengele kukua kwa upana na/au kupoteza pembe zake za mviringo wakati ncha ya zana au popover inapoanzishwa).
Usichanganye na viungo vingine
Usichanganye vikundi vya fomu au safu wima za gridi moja kwa moja na vikundi vya ingizo. Badala yake, weka kikundi cha ingizo ndani ya kikundi cha fomu au kipengele kinachohusiana na gridi ya taifa.
Ongeza lebo kila wakati
Visoma skrini vitakuwa na shida na fomu zako ikiwa hutajumuisha lebo kwa kila ingizo. Kwa vikundi hivi vya ingizo, hakikisha kuwa lebo au utendaji wowote wa ziada unawasilishwa kwa teknolojia saidizi.
Mbinu kamili ya kutumika (vipengee vinavyoonekana <label>, <label>vipengele vilivyofichwa kwa kutumia .sr-onlydarasa, au matumizi ya aria-label, aria-labelledby, aria-describedby, titleau placeholdersifa) na ni maelezo gani ya ziada yatahitaji kuwasilishwa yatatofautiana kulingana na aina kamili ya wijeti ya kiolesura unayotekeleza. Mifano katika sehemu hii inatoa mbinu chache zilizopendekezwa, mahususi za kesi.
Mfano wa msingi
Weka kiongezi kimoja au kitufe kila upande wa ingizo. Unaweza pia kuweka moja kwa pande zote mbili za pembejeo.
Hatutumii programu jalizi nyingi ( .input-group-addonau .input-group-btn) kwa upande mmoja.
Hatutumii vidhibiti vya fomu nyingi katika kikundi kimoja cha ingizo.
Ukubwa
Ongeza madarasa ya ukubwa wa fomu kwa .input-groupyenyewe na yaliyomo ndani yatabadilisha ukubwa kiotomatiki-hakuna haja ya kurudia madarasa ya ukubwa wa udhibiti kwenye kila kipengele.
Visanduku vya kuteua na viongezi vya redio
Weka kisanduku cha kuteua au chaguo la redio ndani ya nyongeza ya kikundi cha ingizo badala ya maandishi.
Viongezi vya vifungo
Vifungo katika vikundi vya ingizo ni tofauti kidogo na vinahitaji kiwango kimoja cha ziada cha kuatamia. Badala ya .input-group-addon, utahitaji kutumia .input-group-btnkufunga vifungo. Hii inahitajika kwa sababu ya mitindo chaguo-msingi ya kivinjari ambayo haiwezi kubatilishwa.
Vifungo vilivyo na menyu kunjuzi
Vifungo vilivyogawanywa
Vifungo vingi
Ingawa unaweza kuwa na programu jalizi moja tu kwa kila upande, unaweza kuwa na vitufe vingi ndani ya .input-group-btn.
Navs
Navs zinazopatikana katika Bootstrap zimeshiriki alama, kuanzia .navdarasa la msingi, pamoja na hali zilizoshirikiwa. Badilisha madarasa ya kurekebisha ili kubadili kati ya kila mtindo.
Kutumia navs kwa vidirisha vya vichupo kunahitaji programu-jalizi ya vichupo vya JavaScript
Kwa vichupo vilivyo na maeneo yanayoweza kutekelezeka, lazima utumie vichupo jalizi ya JavaScript . Lebo pia itahitaji rolesifa za ziada na ARIA - angalia lebo ya mfano wa programu-jalizi kwa maelezo zaidi.
Fanya navs zitumike kama urambazaji kufikiwa
Ikiwa unatumia navs kutoa upau wa kusogeza, hakikisha kuwa umeongeza kwenye role="navigation"kontena kuu la kimantiki zaidi la <ul>, au funika <nav>kipengee kwenye usogezaji wote. Usiongeze jukumu kwenye <ul>yenyewe, kwani hii inaweza kuizuia kutangazwa kama orodha halisi na teknolojia saidizi.
Vichupo
Kumbuka .nav-tabsdarasa linahitaji darasa la .navmsingi.
Fanya vichupo au tembe kwa urahisi kuwa na upana sawa wa mzazi wao kwenye skrini pana zaidi ya 768px zenye .nav-justified. Kwenye skrini ndogo, viungo vya nav vimepangwa.
Viungo vya urambazaji vilivyothibitishwa havitumiki kwa sasa.
Safari na navs msikivu zilizohalalishwa
Kufikia v9.1.2, Safari huonyesha hitilafu ambapo kubadilisha ukubwa wa kivinjari chako kwa mlalo husababisha makosa ya uwasilishaji katika nav iliyohalalishwa ambayo huondolewa inapoonyeshwa upya. Hitilafu hii pia inaonyeshwa katika mfano sahihi wa nav .
Upau wa Urambazaji ni vipengele vya meta vinavyoitikia ambavyo hutumika kama vichwa vya urambazaji vya programu au tovuti yako. Huanza kukunjwa (na zinaweza kugeuzwa) katika mionekano ya simu na kuwa mlalo kadri upana wa sehemu ya kutazama unavyoongezeka.
Viungo vya urambazaji vilivyothibitishwa havitumiki kwa sasa.
Maudhui yaliyojaa
Kwa kuwa Bootstrap haijui ni nafasi ngapi ya maudhui kwenye upau wa urambazaji yanahitaji, unaweza kukumbana na masuala na maudhui yanayoingia kwenye safu mlalo ya pili. Ili kutatua hili, unaweza:
Punguza kiasi au upana wa vipengee vya upau wa urambazaji.
Ficha baadhi ya vipengee vya upau wa urambazaji katika saizi fulani za skrini kwa kutumia aina za matumizi zinazojibu .
Badilisha sehemu ambayo upau wa urambazaji hubadilisha kati ya hali iliyokunjwa na ya mlalo. Geuza @grid-float-breakpointkutofautisha kukufaa au ongeza hoja yako ya midia.
Inahitaji programu jalizi ya JavaScript
Ikiwa JavaScript imezimwa na eneo la kutazama ni finyu kiasi kwamba upau wa urambazaji unaanguka, haitawezekana kupanua upau wa urambazaji na kutazama yaliyomo ndani ya .navbar-collapse.
Upau wa urambazaji unaojibu unahitaji programu- jalizi ya kukunja kujumuishwa katika toleo lako la Bootstrap.
Kubadilisha sehemu ya kuvunja upau wa urambazaji wa rununu
Upau wa urambazaji huporomoka katika mwonekano wake wa wima wa rununu wakati kituo cha kutazama ni chembamba kuliko @grid-float-breakpoint, na hupanuka hadi mwonekano wake mlalo usio wa simu ya mkononi wakati lango la kutazama ni angalau @grid-float-breakpointkwa upana. Rekebisha utofauti huu katika chanzo Kidogo ili kudhibiti upau wa urambazaji unapoporomoka/kupanuka. Thamani chaguo-msingi ni 768px(skrini ndogo zaidi "ndogo" au "kompyuta kibao").
Fanya viunzi vya baharini vipatikane
Hakikisha unatumia <nav>kipengele au, ikiwa unatumia kipengele cha kawaida zaidi kama vile <div>, ongeza a role="navigation"kwa kila upau wa urambazaji ili kukitambulisha kwa uwazi kama eneo muhimu kwa watumiaji wa teknolojia saidizi.
Picha ya chapa
Badilisha chapa ya upau wa urambazaji na picha yako mwenyewe kwa kubadilisha maandishi na <img>. Kwa kuwa .navbar-brandina pedi na urefu wake, unaweza kuhitaji kubatilisha CSS fulani kulingana na picha yako.
Fomu
Weka maudhui ya fomu ndani .navbar-formkwa upangaji sahihi wa wima na tabia iliyoporomoka katika lango finyu za kutazama. Tumia chaguo za upatanishi kuamua mahali pa kuishi ndani ya maudhui ya upau wa urambazaji.
Inapoanza, .navbar-forminashiriki nambari zake nyingi .form-inlinekupitia mixin. Baadhi ya vidhibiti vya fomu, kama vile vikundi vya ingizo, vinaweza kuhitaji upana usiobadilika kuonyeshwa vizuri ndani ya upau wa urambazaji.
Vidokezo vya kifaa cha rununu
Kuna baadhi ya tahadhari kuhusu kutumia vidhibiti vya fomu ndani ya vipengele vilivyowekwa kwenye vifaa vya mkononi. Tazama hati zetu za usaidizi wa kivinjari kwa maelezo.
Ongeza lebo kila wakati
Visoma skrini vitakuwa na shida na fomu zako ikiwa hutajumuisha lebo kwa kila ingizo. Kwa fomu hizi za ndani, unaweza kuficha lebo kwa kutumia .sr-onlydarasa. Kuna mbinu mbadala zaidi za kutoa lebo kwa teknolojia saidizi, kama vile aria-label, aria-labelledbyau titlesifa. Ikiwa hakuna yoyote kati ya hizi iliyopo, visoma skrini vinaweza kuamua kutumia placeholdersifa, ikiwa iko, lakini kumbuka kuwa matumizi ya placeholderkama badala ya mbinu zingine za kuweka lebo hayashauriwi.
Vifungo
Ongeza .navbar-btndarasa kwa <button>vipengele visivyokaa ndani <form>ili kuviweka katikati kiwima kwenye upau wa urambazaji.
Matumizi mahususi ya muktadha
Kama vile madarasa ya kitufe cha kawaida , .navbar-btninaweza kutumika kwenye <a>na <input>vipengele. Walakini, wala .navbar-btndarasa za vitufe vya kawaida hazipaswi kutumiwa kwenye <a>vipengee vilivyo ndani ya .navbar-nav.
Maandishi
Funga mifuatano ya maandishi katika kipengele na .navbar-text, kwa kawaida kwenye <p>lebo kwa uongozi na rangi ifaayo.
Viungo visivyo vya nav
Kwa watu wanaotumia viungo vya kawaida ambavyo haviko ndani ya sehemu ya kawaida ya kusogeza ya upau wa urambazaji, tumia .navbar-linkdarasa ili kuongeza rangi zinazofaa kwa chaguo-msingi na kinyume cha upau wa uelekezaji.
Mpangilio wa vipengele
Pangilia viungo vya nav, fomu, vitufe, au maandishi, kwa kutumia .navbar-leftau darasa za .navbar-rightmatumizi. Madarasa yote mawili yataongeza kuelea kwa CSS katika mwelekeo maalum. Kwa mfano, ili kupanga viungo vya nav, viweke kando <ul>na darasa la matumizi linalotumika.
Madarasa haya ni matoleo mchanganyiko ya .pull-leftna .pull-right, lakini yanaelekezwa kwa hoja za midia kwa ushughulikiaji rahisi wa vipengee vya upau wa uelekezaji kwenye saizi za kifaa.
Kupanga vipengele vingi kulia
Navbar kwa sasa zina kizuizi na .navbar-rightmadarasa mengi. Ili kuweka maudhui vizuri, tunatumia ukingo hasi kwenye .navbar-rightkipengele cha mwisho. Wakati kuna vipengee vingi vinavyotumia darasa hilo, kando hizi hazifanyi kazi kama ilivyokusudiwa.
Tutarejea hii tunapoweza kuandika upya sehemu hiyo katika v4.
Imewekwa juu
Ongeza .navbar-fixed-topna ujumuishe a .containerau .container-fluidkatikati na maudhui ya upau wa urambazaji.
Usafi wa mwili unahitajika
Upau wa urambazaji usiobadilika utafunika maudhui yako mengine, isipokuwa ukiongeza paddingjuu ya <body>. Jaribu maadili yako mwenyewe au tumia kijisehemu chetu hapa chini. Kidokezo: Kwa chaguomsingi, upau wa urambazaji ni wa juu wa 50px.
Hakikisha kujumuisha hii baada ya CSS ya msingi ya Bootstrap.
Imewekwa chini
Ongeza .navbar-fixed-bottomna ujumuishe a .containerau .container-fluidkatikati na maudhui ya upau wa urambazaji.
Usafi wa mwili unahitajika
Upau wa urambazaji usiobadilika utafunika maudhui yako mengine, isipokuwa ukiongeza paddingchini ya <body>. Jaribu maadili yako mwenyewe au tumia kijisehemu chetu hapa chini. Kidokezo: Kwa chaguomsingi, upau wa urambazaji ni wa juu wa 50px.
Hakikisha kujumuisha hii baada ya CSS ya msingi ya Bootstrap.
Juu tuli
Unda upau wa uelekezaji wa upana kamili ambao unasogeza mbali na ukurasa kwa kuongeza .navbar-static-topna kujumuisha a .containerau .container-fluidkatikati na maudhui ya upau wa urambazaji wa pedi.
Tofauti na .navbar-fixed-*madarasa, hauitaji kubadilisha pedi yoyote kwenye body.
Upau wa urambazaji uliogeuzwa
Rekebisha mwonekano wa upau wa urambazaji kwa kuongeza .navbar-inverse.
Makombo ya mkate
Onyesha eneo la ukurasa wa sasa ndani ya daraja la urambazaji.
Vitenganishi huongezwa kiotomatiki katika CSS kupitia :beforena content.
Toa viungo vya kurasa za tovuti au programu yako kwa kutumia kipengele cha kurasa nyingi, au mbadala rahisi zaidi wa paja .
Uwekaji kurasa chaguomsingi
Uandikaji rahisi uliochochewa na Rdio, mzuri kwa programu na matokeo ya utafutaji. Kizuizi kikubwa ni ngumu kukosa, kinaweza kuongezwa kwa urahisi, na hutoa maeneo makubwa ya kubofya.
Kuweka lebo kwa sehemu ya pagination
Kipengee cha kurasa kinapaswa kufungwa katika <nav>kipengele ili kukitambulisha kama sehemu ya kusogeza kwenye visoma skrini na teknolojia nyingine saidizi. Zaidi ya hayo, kwa vile ukurasa una uwezekano wa kuwa na zaidi ya sehemu moja kama hiyo ya kusogeza tayari (kama vile urambazaji msingi katika kichwa, au urambazaji wa upau wa kando), inashauriwa kutoa maelezo aria-labelya <nav>ambayo yanaonyesha madhumuni yake. Kwa mfano, ikiwa kijenzi cha kurasa kinatumika kuelekeza kati ya seti ya matokeo ya utafutaji, lebo inayofaa inaweza kuwa aria-label="Search results pages".
Majimbo ya walemavu na amilifu
Viungo vinaweza kubinafsishwa kwa hali tofauti. Tumia .disabledkwa viungo visivyobofya na .activekuashiria ukurasa wa sasa.
Tunapendekeza ubadilishe nanga zinazotumika au zilizozimwa kwa <span>, au uondoe nanga katika hali ya vishale vilivyotangulia/vifuatavyo, ili kuondoa utendakazi wa kubofya huku ukihifadhi mitindo iliyokusudiwa.
Ukubwa
Je, ungependa kutengeneza kurasa kubwa au ndogo zaidi? Ongeza .pagination-lgau .pagination-smkwa saizi za ziada.
Peja
Viungo vya haraka vilivyotangulia na vifuatavyo vya utekelezaji rahisi wa uwekaji alama na mitindo nyepesi. Ni nzuri kwa tovuti rahisi kama blogu au majarida.
Mfano chaguomsingi
Kwa chaguo-msingi, paja huweka viungo.
Viungo vilivyopangiliwa
Vinginevyo, unaweza kusawazisha kila kiunga kwa pande:
Hali ya hiari ya walemavu
Viungo vya Pager pia hutumia .disableddarasa la matumizi ya jumla kutoka kwa pagination.
Lebo
Mfano
Mfano wa kichwa Mpya
Mfano wa kichwa Mpya
Mfano wa kichwa Mpya
Mfano wa kichwa Mpya
Mfano wa kichwa Mpya
Mfano wa kichwa Mpya
Tofauti zinazopatikana
Ongeza darasa zozote kati ya zilizotajwa hapa chini za kurekebisha ili kubadilisha mwonekano wa lebo.
Hatari Chaguomsingi ya Taarifa ya Mafanikio ya Msingi
Je, una lebo nyingi?
Matatizo ya uwasilishaji yanaweza kutokea ukiwa na lebo nyingi za ndani ndani ya kontena nyembamba, kila moja ikiwa na inline-blockkipengee chake (kama aikoni). Njia ya kuzunguka hii ni kuweka display: inline-block;. Kwa muktadha na mfano, ona #13219 .
Beji
Angazia kwa urahisi vipengee vipya au ambavyo havijasomwa kwa kuongeza <span class="badge">viungo, navs za Bootstrap, na zaidi.
Ili kufanya jumbotron iwe upana kamili, na bila pembe za mviringo, weka nje .containerya s zote na badala yake uongeze .containerndani.
Kijajuu cha ukurasa
Gamba rahisi la h1kuweka nafasi ipasavyo na kuweka sehemu za yaliyomo kwenye ukurasa. Inaweza kutumia kipengele h1chaguo-msingi cha ' small, pamoja na vipengele vingine vingi (na mitindo ya ziada).
Mfano wa kichwa cha ukurasa Matini ndogo ya kichwa
Vijipicha
Panua mfumo wa gridi ya Bootstrap kwa sehemu ya kijipicha ili kuonyesha gridi za picha, video, maandishi na mengine kwa urahisi.
Ikiwa unatafuta wasilisho linalofanana na Pinterest la vijipicha vya urefu tofauti na/au upana, utahitaji kutumia programu-jalizi ya mtu mwingine kama vile Masonry , Isotope , au Salvattore .
Mfano chaguomsingi
Kwa chaguo-msingi, vijipicha vya Bootstrap vimeundwa ili kuonyesha picha zilizounganishwa na alama ndogo zinazohitajika.
Maudhui maalum
Ukiwa na lebo ya ziada, inawezekana kuongeza aina yoyote ya maudhui ya HTML kama vile vichwa, aya, au vitufe kwenye vijipicha.
Lebo ya kijipicha
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.
Toa ujumbe wa maoni ya muktadha kwa vitendo vya kawaida vya mtumiaji na ujumbe mfupi wa arifa unaopatikana na rahisi.
Mifano
Funga maandishi yoyote na kitufe cha hiari cha kuondoa ndani .alertna mojawapo ya madarasa manne ya muktadha (km, .alert-success) kwa jumbe za msingi za tahadhari.
Hakuna darasa chaguo-msingi
Arifa hazina madarasa chaguo-msingi, madarasa ya msingi na ya kurekebisha tu. Tahadhari chaguo-msingi ya kijivu haileti maana sana, kwa hivyo unatakiwa kubainisha aina kupitia darasa la muktadha. Chagua kutoka kwa mafanikio, maelezo, onyo au hatari.
Umefanya vizuri! Umefaulu kusoma ujumbe huu muhimu wa tahadhari.
Vichwa juu! Tahadhari hii inahitaji umakini wako, lakini sio muhimu sana.
Onyo! Afadhali ujiangalie, huonekani kuwa mzuri sana.
Oh snap! Badilisha mambo machache na ujaribu kuwasilisha tena.
Arifa zinazoondolewa
Jenga juu ya tahadhari yoyote kwa kuongeza .alert-dismissiblekitufe cha hiari na funga.
Toa maoni ya hivi punde kuhusu maendeleo ya mtiririko wa kazi au hatua kwa kutumia pau rahisi za maendeleo lakini zinazonyumbulika.
Utangamano wa kivinjari
Pau za maendeleo hutumia mageuzi na uhuishaji wa CSS3 kufikia baadhi ya athari zake. Vipengele hivi havitumiki katika Internet Explorer 9 na matoleo ya chini au ya awali ya Firefox. Opera 12 haitumii uhuishaji.
Utangamano wa Sera ya Usalama wa Maudhui (CSP).
Ikiwa tovuti yako ina Sera ya Usalama wa Maudhui (CSP) ambayo hairuhusu style-src 'unsafe-inline', basi hutaweza kutumia stylesifa za ndani kuweka upana wa upau wa maendeleo kama inavyoonyeshwa katika mifano yetu hapa chini. Mbinu mbadala za kuweka upana unaoendana na CSP kali ni pamoja na kutumia JavaScript maalum (ambayo seti element.style.width) au kutumia madarasa maalum ya CSS.
Mfano wa msingi
Upau chaguomsingi wa maendeleo.
60% Imekamilika
Na lebo
Ondoa <span>with .sr-onlyclass kutoka ndani ya upau wa maendeleo ili kuonyesha asilimia inayoonekana.
60%
Ili kuhakikisha kuwa maandishi ya lebo yanaendelea kusomeka hata kwa asilimia ndogo, zingatia kuongeza a min-widthkwenye upau wa maendeleo.
0%
2%
Njia mbadala za muktadha
Pau za maendeleo hutumia baadhi ya vitufe sawa na madarasa ya tahadhari kwa mitindo thabiti.
40% imekamilika (mafanikio)
20% Imekamilika
60% Imekamilika (onyo)
80% Imekamilika (hatari)
Milia
Hutumia upinde rangi kuunda athari yenye milia. Haipatikani katika IE9 na chini.
40% imekamilika (mafanikio)
20% Imekamilika
60% Imekamilika (onyo)
80% Imekamilika (hatari)
Imehuishwa
Ongeza .activekwa .progress-bar-stripedkuhuisha milia kulia kwenda kushoto. Haipatikani katika IE9 na chini.
45% Imekamilika
Imepangwa kwa rafu
Weka pau nyingi kwenye kitu kimoja .progressili kuziweka.
35% imekamilika (mafanikio)
20% Imekamilika (onyo)
10% Imekamilika (hatari)
Kitu cha media
Mitindo ya vitu dhahania ya kuunda aina mbalimbali za vipengele (kama maoni ya blogu, Tweets, n.k) ambazo zinaangazia picha iliyopangwa kushoto au kulia pamoja na maudhui ya maandishi.
Midia chaguomsingi
Midia chaguo-msingi huonyesha kitu cha midia (picha, video, sauti) upande wa kushoto au kulia wa kizuizi cha maudhui.
Kichwa cha habari
Cras sit amet nibh libero, katika gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum katika vulputate saa, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis kwenye faucibus.
Kichwa cha habari
Cras sit amet nibh libero, katika gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum katika vulputate saa, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis kwenye faucibus.
Kichwa cha media kilichoorodheshwa
Cras sit amet nibh libero, katika gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum katika vulputate saa, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis kwenye faucibus.
Kichwa cha habari
Cras sit amet nibh libero, katika gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum katika vulputate saa, tempus viverra turpis.
Kichwa cha habari
Cras sit amet nibh libero, katika gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum katika vulputate saa, tempus viverra turpis.
Madarasa .pull-leftna .pull-rightpia yapo na yalitumika hapo awali kama sehemu ya kijenzi cha media, lakini yameacha kutumika kwa matumizi hayo kuanzia v3.3.0. Ni takriban sawa na .media-leftna .media-right, isipokuwa hiyo .media-rightinapaswa kuwekwa baada .media-bodyya html.
Mpangilio wa media
Picha au midia nyingine inaweza kupangiliwa juu, kati au chini. Chaguo-msingi ni iliyokaa juu.
Vyombo vya habari vilivyopangiliwa juu
Cras sit amet nibh libero, katika gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum katika vulputate saa, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis kwenye 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.
Vyombo vya habari vilivyopangwa katikati
Cras sit amet nibh libero, katika gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum katika vulputate saa, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis kwenye 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.
Midia iliyopangwa chini
Cras sit amet nibh libero, katika gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum katika vulputate saa, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis kwenye 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.
Orodha ya vyombo vya habari
Ukiwa na lebo ya ziada, unaweza kutumia maudhui ndani ya orodha (muhimu kwa mazungumzo ya maoni au orodha za makala).
Kichwa cha habari
Cras sit amet nibh libero, katika gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum katika vulputate saa, tempus viverra turpis.
Kichwa cha media kilichoorodheshwa
Cras sit amet nibh libero, katika gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum katika vulputate saa, tempus viverra turpis.
Kichwa cha media kilichoorodheshwa
Cras sit amet nibh libero, katika gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum katika vulputate saa, tempus viverra turpis.
Kichwa cha media kilichoorodheshwa
Cras sit amet nibh libero, katika gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum katika vulputate saa, tempus viverra turpis.
Kundi la orodha
Vikundi vya orodha ni sehemu inayoweza kunyumbulika na yenye nguvu ya kuonyesha sio orodha rahisi tu za vipengele, lakini zile changamano zilizo na maudhui maalum.
Mfano wa msingi
Kundi la msingi zaidi la orodha ni orodha isiyo na mpangilio iliyo na vitu vya orodha, na madarasa sahihi. Jenga juu yake na chaguo zinazofuata, au CSS yako mwenyewe inavyohitajika.
Cras justo odio
Dapibus ac kuwezesha katika
Morbi leo rius
Porta ac consectetur ac
Vestibulum na eros
Beji
Ongeza sehemu ya beji kwenye kipengee chochote cha kikundi cha orodha na kitawekwa kiotomatiki upande wa kulia.
14Cras justo odio
2Dapibus ac kuwezesha katika
1Morbi leo rius
Vipengee vilivyounganishwa
Unganisha vipengee vya kikundi kwa kutumia vitambulisho vya kushikilia badala ya vipengee vya orodha (hiyo pia inamaanisha mzazi <div>badala ya <ul>). Hakuna haja ya wazazi binafsi karibu na kila kipengele.
Vipengee vya kikundi vya orodha vinaweza kuwa vitufe badala ya vipengee vya orodha (hiyo pia inamaanisha mzazi <div>badala ya <ul>). Hakuna haja ya wazazi binafsi karibu na kila kipengele. Usitumie .btnmadarasa ya kawaida hapa.
Vipengee vilivyozimwa
Ongeza .disabledkwa a .list-group-itemhadi kijivu ili ionekane kuwa imezimwa.
Ingawa sio lazima kila wakati, wakati mwingine unahitaji kuweka DOM yako kwenye sanduku. Kwa hali hizo, jaribu kijenzi cha paneli.
Mfano wa msingi
Kwa chaguo-msingi, yote .panelhufanya ni kutumia mpaka na pedi za kimsingi ili kuwa na maudhui fulani.
Mfano wa paneli za msingi
Paneli yenye kichwa
Ongeza chombo chenye kichwa kwa urahisi kwenye paneli yako ukitumia .panel-heading. Unaweza pia kujumuisha chochote <h1>- <h6>na .panel-titledarasa ili kuongeza kichwa kilichowekwa tayari. Walakini, saizi za fonti za <h1>- <h6>zimebatilishwa na .panel-heading.
Kwa kupaka rangi kwa viungo vizuri, hakikisha umeweka viungo katika vichwa ndani ya .panel-title.
Kichwa cha paneli bila kichwa
Maudhui ya paneli
Kichwa cha paneli
Maudhui ya paneli
Paneli yenye kijachini
Vifungo vya kufunga au maandishi ya pili kwa .panel-footer. Kumbuka kuwa vijachini vya paneli havirithi rangi na mipaka wakati wa kutumia tofauti za muktadha kwa vile hazikusudiwi kuwa katika mandhari ya mbele.
Maudhui ya paneli
Njia mbadala za muktadha
Kama vipengele vingine, fanya kidirisha kiwe na maana zaidi kwa muktadha fulani kwa urahisi kwa kuongeza aina zozote za hali ya muktadha.
Kichwa cha paneli
Maudhui ya paneli
Kichwa cha paneli
Maudhui ya paneli
Kichwa cha paneli
Maudhui ya paneli
Kichwa cha paneli
Maudhui ya paneli
Kichwa cha paneli
Maudhui ya paneli
Pamoja na meza
Ongeza yoyote isiyo na mipaka .tablendani ya paneli kwa muundo usio na mshono. Ikiwa kuna .panel-body, tunaongeza mpaka wa ziada juu ya meza kwa kujitenga.
Kichwa cha paneli
Baadhi ya maudhui ya kidirisha chaguo-msingi hapa. Nulla vitae elit libero, 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.
#
Jina la kwanza
Jina la familia
Jina la mtumiaji
1
Weka alama
Otto
@mdo
2
Yakobo
Thornton
@mafuta
3
Larry
ndege
@twitter
Ikiwa hakuna mwili wa paneli, kijenzi husogea kutoka kichwa cha paneli hadi kwenye jedwali bila kukatizwa.
Kichwa cha paneli
#
Jina la kwanza
Jina la familia
Jina la mtumiaji
1
Weka alama
Otto
@mdo
2
Yakobo
Thornton
@mafuta
3
Larry
ndege
@twitter
Na vikundi vya orodha
Jumuisha kwa urahisi vikundi vya orodha ya upana kamili ndani ya kidirisha chochote.
Kichwa cha paneli
Baadhi ya maudhui ya kidirisha chaguo-msingi hapa. Nulla vitae elit libero, 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 kuwezesha katika
Morbi leo rius
Porta ac consectetur ac
Vestibulum na eros
Upachikaji unaoitikia
Ruhusu vivinjari kubainisha vipimo vya video au onyesho la slaidi kulingana na upana wa uzuiaji wake kwa kuunda uwiano wa asili ambao utaongezeka ipasavyo kwenye kifaa chochote.
Kanuni zinatumika moja kwa moja kwa <iframe>, <embed>, <video>, na <object>vipengele; kwa hiari tumia darasa la uzao dhahiri .embed-responsive-itemunapotaka kulinganisha mtindo wa sifa zingine.
Pro-Tip! Huhitaji kujumuisha frameborder="0"katika <iframe>s yako tunapobatilisha hilo kwa ajili yako.
Visima
Chaguo-msingi vizuri
Tumia kisima kama athari rahisi kwenye kipengele ili kukipa athari ya kuingiza.
Tazama, niko kisimani!
Madarasa ya hiari
Dhibiti pedi na pembe zilizo na mviringo kwa madarasa mawili ya hiari ya kurekebisha.