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 la URL za jamaa zinazotolewa na mkusanyaji mdogo.
  • Badilisha url()njia katika CSS iliyokusanywa.

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.

<span class="glyphicon glyphicon-search" aria-hidden="true"></span>

Mifano

Zitumie katika vitufe, vikundi vya vitufe kwa upau wa vidhibiti, usogezaji, au ingizo za fomu zilizotangulizwa.

<button type="button" class="btn btn-default" aria-label="Left Align">
  <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</button>

<button type="button" class="btn btn-default btn-lg">
  <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
</button>

Aikoni inayotumika katika arifa kuwasilisha kwamba ni ujumbe wa hitilafu, yenye .sr-onlymaandishi ya ziada ili kuwasilisha kidokezo hiki kwa watumiaji wa teknolojia saidizi.

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

Kunjuzi

Menyu inayoweza kugeuzwa, ya muktadha ya kuonyesha orodha za viungo. Imeingiliana na menyu kunjuzi ya JavaScript .

Funga kianzio cha menyu kunjuzi na menyu kunjuzi ndani ya .dropdown, au kipengele kingine kinachotangaza position: relative;. Kisha ongeza HTML ya menyu.

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

Menyu kunjuzi zinaweza kubadilishwa ili kupanua juu (badala ya kushuka chini) kwa kuongeza .dropupkwa mzazi.

<div class="dropup">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropup
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

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.

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

Ongeza kichwa ili kuweka lebo sehemu za vitendo katika menyu kunjuzi yoyote.

<ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
  ...
  <li class="dropdown-header">Dropdown header</li>
  ...
</ul>

Ongeza kigawanyaji ili kutenganisha mfululizo wa viungo kwenye menyu kunjuzi.

<ul class="dropdown-menu" aria-labelledby="dropdownMenuDivider">
  ...
  <li role="separator" class="divider"></li>
  ...
</ul>

Ongeza .disabledkwenye <li>menyu kunjuzi ili kuzima kiungo.

<ul class="dropdown-menu" aria-labelledby="dropdownMenu4">
  <li><a href="#">Regular link</a></li>
  <li class="disabled"><a href="#">Disabled link</a></li>
  <li><a href="#">Another link</a></li>
</ul>

Vikundi vya vifungo

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.

<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">Left</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default">Right</button>
</div>

Upau wa vidhibiti

Changanya seti za <div class="btn-group">katika a <div class="btn-toolbar">kwa vipengele ngumu zaidi.

<div class="btn-toolbar" role="toolbar" aria-label="...">
  <div class="btn-group" role="group" aria-label="...">...</div>
  <div class="btn-group" role="group" aria-label="...">...</div>
  <div class="btn-group" role="group" aria-label="...">...</div>
</div>

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.




<div class="btn-group btn-group-lg" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-sm" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-xs" role="group" aria-label="...">...</div>

Nesting

Weka .btn-groupndani ya nyingine .btn-groupunapotaka menyu kunjuzi zilizochanganywa na msururu wa vitufe.

<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">1</button>
  <button type="button" class="btn btn-default">2</button>

  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropdown
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <li><a href="#">Dropdown link</a></li>
      <li><a href="#">Dropdown link</a></li>
    </ul>
  </div>
</div>

Tofauti ya wima

Fanya seti ya vitufe ionekane ikiwa imepangwa kwa safu wima badala ya mlalo. Viteremsho vya vitufe vya kugawanya havitumiki hapa.

<div class="btn-group-vertical" role="group" aria-label="...">
  ...
</div>

Vikundi vya vitufe vilivyohalalishwa

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.

Tazama #12476 kwa habari zaidi.

Pamoja na <a>vipengele

Funga tu mfululizo wa .btns katika .btn-group.btn-group-justified.

<div class="btn-group btn-group-justified" role="group" aria-label="...">
  ...
</div>

Viungo vinavyofanya kazi kama vifungo

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.

<div class="btn-group btn-group-justified" role="group" aria-label="...">
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Left</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Middle</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Right</button>
  </div>
</div>

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.

<!-- Single button -->
<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

Kunjuzi za vitufe vya kugawanyika

Vile vile, unda menyu kunjuzi ya vitufe vya mgawanyiko na mabadiliko sawa ya alama, ukitumia kitufe tofauti pekee.

<!-- Split button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger">Action</button>
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

Ukubwa

Vifungo kunjuzi hufanya kazi na vifungo vya ukubwa wote.

<!-- Large button group -->
<div class="btn-group">
  <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Large button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

<!-- Small button group -->
<div class="btn-group">
  <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Small button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

<!-- Extra small button group -->
<div class="btn-group">
  <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Extra small button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

Tofauti ya kuacha

Anzisha menyu kunjuzi zilizo juu ya vipengee kwa kuongeza .dropupkwa mzazi.

<div class="btn-group dropup">
  <button type="button" class="btn btn-default">Dropup</button>
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

Vikundi vya kuingiza

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.

@

@mfano.com

$ .00

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

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

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

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

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.

@

@

@
<div class="input-group input-group-lg">
  <span class="input-group-addon" id="sizing-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon1">
</div>

<div class="input-group">
  <span class="input-group-addon" id="sizing-addon2">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon2">
</div>

<div class="input-group input-group-sm">
  <span class="input-group-addon" id="sizing-addon3">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon3">
</div>

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.

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-addon">
        <input type="checkbox" aria-label="...">
      </span>
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-addon">
        <input type="radio" aria-label="...">
      </span>
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

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.

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
      <input type="text" class="form-control" placeholder="Search for...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control" placeholder="Search for...">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

Vifungo vilivyo na menyu kunjuzi

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
        <ul class="dropdown-menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div><!-- /btn-group -->
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control" aria-label="...">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
        <ul class="dropdown-menu dropdown-menu-right">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div><!-- /btn-group -->
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

Vifungo vilivyogawanywa

<div class="input-group">
  <div class="input-group-btn">
    <!-- Button and dropdown menu -->
  </div>
  <input type="text" class="form-control" aria-label="...">
</div>

<div class="input-group">
  <input type="text" class="form-control" aria-label="...">
  <div class="input-group-btn">
    <!-- Button and dropdown menu -->
  </div>
</div>

Vifungo vingi

Ingawa unaweza kuwa na programu jalizi moja tu kwa kila upande, unaweza kuwa na vitufe vingi ndani ya .input-group-btn.

<div class="input-group">
  <div class="input-group-btn">
    <!-- Buttons -->
  </div>
  <input type="text" class="form-control" aria-label="...">
</div>

<div class="input-group">
  <input type="text" class="form-control" aria-label="...">
  <div class="input-group-btn">
    <!-- Buttons -->
  </div>
</div>

Navs

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.

Kumbuka .nav-tabsdarasa linahitaji darasa la .navmsingi.

<ul class="nav nav-tabs">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

Chukua HTML hiyo hiyo, lakini tumia .nav-pillsbadala yake:

<ul class="nav nav-pills">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

Vidonge pia vinaweza kupangwa kwa wima. Ongeza tu .nav-stacked.

<ul class="nav nav-pills nav-stacked">
  ...
</ul>

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 .

<ul class="nav nav-tabs nav-justified">
  ...
</ul>
<ul class="nav nav-pills nav-justified">
  ...
</ul>

Kwa sehemu yoyote ya nav (vichupo au tembe), ongeza .disabledkwa viungo vya kijivu na hakuna madoido ya kuelea .

Utendaji wa kiungo haujaathiriwa

Darasa hili litabadilisha tu <a>mwonekano wa ', si utendakazi wake. Tumia JavaScript maalum kuzima viungo hapa.

<ul class="nav nav-pills">
  ...
  <li role="presentation" class="disabled"><a href="#">Disabled link</a></li>
  ...
</ul>

Ongeza menyu kunjuzi na HTML ya ziada kidogo na programu- jalizi ya JavaScript .

Vichupo vilivyo na menyu kunjuzi

<ul class="nav nav-tabs">
  ...
  <li role="presentation" class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
      Dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
  ...
</ul>

Vidonge vilivyo na kushuka

<ul class="nav nav-pills">
  ...
  <li role="presentation" class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
      Dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
  ...
</ul>

Upau wa urambazaji

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:

  1. Punguza kiasi au upana wa vipengee vya upau wa urambazaji.
  2. Ficha baadhi ya vipengee vya upau wa urambazaji katika saizi fulani za skrini kwa kutumia aina za matumizi zinazojibu .
  3. 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.

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

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.

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">
        <img alt="Brand" src="...">
      </a>
    </div>
  </div>
</nav>

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.

<form class="navbar-form navbar-left" role="search">
  <div class="form-group">
    <input type="text" class="form-control" placeholder="Search">
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

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.

Ongeza .navbar-btndarasa kwa <button>vipengele visivyokaa ndani <form>ili kuviweka katikati kiwima kwenye upau wa urambazaji.

<button type="button" class="btn btn-default navbar-btn">Sign in</button>

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.

Funga mifuatano ya maandishi katika kipengele na .navbar-text, kwa kawaida kwenye <p>lebo kwa uongozi na rangi ifaayo.

<p class="navbar-text">Signed in as Mark Otto</p>

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.

<p class="navbar-text navbar-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>

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.

Ongeza .navbar-fixed-topna ujumuishe a .containerau .container-fluidkatikati na maudhui ya upau wa urambazaji.

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    ...
  </div>
</nav>

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.

body { padding-top: 70px; }

Hakikisha kujumuisha hii baada ya CSS ya msingi ya Bootstrap.

Ongeza .navbar-fixed-bottomna ujumuishe a .containerau .container-fluidkatikati na maudhui ya upau wa urambazaji.

<nav class="navbar navbar-default navbar-fixed-bottom">
  <div class="container">
    ...
  </div>
</nav>

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.

body { padding-bottom: 70px; }

Hakikisha kujumuisha hii baada ya CSS ya msingi ya Bootstrap.

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.

<nav class="navbar navbar-default navbar-static-top">
  <div class="container">
    ...
  </div>
</nav>

Rekebisha mwonekano wa upau wa urambazaji kwa kuongeza .navbar-inverse.

<nav class="navbar navbar-inverse">
  ...
</nav>

Makombo ya mkate

Onyesha eneo la ukurasa wa sasa ndani ya daraja la urambazaji.

Vitenganishi huongezwa kiotomatiki katika CSS kupitia :beforena content.

<ol class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Library</a></li>
  <li class="active">Data</li>
</ol>

Pagination

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.

<nav aria-label="Page navigation">
  <ul class="pagination">
    <li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li>
      <a href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

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.

<nav aria-label="...">
  <ul class="pagination">
    <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
    <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
    ...
  </ul>
</nav>

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.

<nav aria-label="...">
  <ul class="pagination">
    <li class="disabled">
      <span>
        <span aria-hidden="true">&laquo;</span>
      </span>
    </li>
    <li class="active">
      <span>1 <span class="sr-only">(current)</span></span>
    </li>
    ...
  </ul>
</nav>

Ukubwa

Je, ungependa kutengeneza kurasa kubwa au ndogo zaidi? Ongeza .pagination-lgau .pagination-smkwa saizi za ziada.

<nav aria-label="..."><ul class="pagination pagination-lg">...</ul></nav>
<nav aria-label="..."><ul class="pagination">...</ul></nav>
<nav aria-label="..."><ul class="pagination pagination-sm">...</ul></nav>

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.

<nav aria-label="...">
  <ul class="pager">
    <li><a href="#">Previous</a></li>
    <li><a href="#">Next</a></li>
  </ul>
</nav>

Vinginevyo, unaweza kusawazisha kila kiunga kwa pande:

<nav aria-label="...">
  <ul class="pager">
    <li class="previous"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
  </ul>
</nav>

Hali ya hiari ya walemavu

Viungo vya Pager pia hutumia .disableddarasa la matumizi ya jumla kutoka kwa pagination.

<nav aria-label="...">
  <ul class="pager">
    <li class="previous disabled"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
  </ul>
</nav>

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
<h3>Example heading <span class="label label-default">New</span></h3>

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
<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>

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.

Kikasha42

<a href="#">Inbox <span class="badge">42</span></a>

<button class="btn btn-primary" type="button">
  Messages <span class="badge">4</span>
</button>

Kujikunja

Wakati hakuna vipengee vipya au ambavyo havijasomwa, beji zitaanguka tu (kupitia kiteuzi cha CSS :empty) mradi hakuna maudhui ndani.

Utangamano wa kivinjari

Beji hazitajikunja katika Internet Explorer 8 kwa sababu haina usaidizi kwa :emptykiteuzi.

Hujirekebisha kwa majimbo amilifu ya nav

Mitindo iliyojengewa ndani imejumuishwa kwa ajili ya kuweka beji katika hali amilifu katika urambazaji wa kidonge.

<ul class="nav nav-pills" role="tablist">
  <li role="presentation" class="active"><a href="#">Home <span class="badge">42</span></a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages <span class="badge">3</span></a></li>
</ul>

Jumbotron

Kipengele chepesi, kinachonyumbulika ambacho kinaweza kwa hiari kupanua eneo lote la kutazama ili kuonyesha maudhui muhimu kwenye tovuti yako.

Salamu, Dunia!

Hiki ni kitengo rahisi cha shujaa, kijenzi rahisi cha mtindo wa jumbotron cha kutoa umakini wa ziada kwa maudhui au maelezo yaliyoangaziwa.

Jifunze zaidi

<div class="jumbotron">
  <h1>Hello, world!</h1>
  <p>...</p>
  <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>

Ili kufanya jumbotron iwe upana kamili, na bila pembe za mviringo, weka nje .containerya s zote na badala yake uongeze .containerndani.

<div class="jumbotron">
  <div class="container">
    ...
  </div>
</div>

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

<div class="page-header">
  <h1>Example page header <small>Subtext for header</small></h1>
</div>

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.

<div class="row">
  <div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
      <img src="..." alt="...">
    </a>
  </div>
  ...
</div>

Maudhui maalum

Ukiwa na lebo ya ziada, inawezekana kuongeza aina yoyote ya maudhui ya HTML kama vile vichwa, aya, au vitufe kwenye vijipicha.

100%x200

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.

Kitufe Kitufe

100%x200

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.

Kitufe Kitufe

100%x200

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.

Kitufe Kitufe

<div class="row">
  <div class="col-sm-6 col-md-4">
    <div class="thumbnail">
      <img src="..." alt="...">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>...</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
      </div>
    </div>
  </div>
</div>

Tahadhari

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.

<div class="alert alert-success" role="alert">...</div>
<div class="alert alert-info" role="alert">...</div>
<div class="alert alert-warning" role="alert">...</div>
<div class="alert alert-danger" role="alert">...</div>

Arifa zinazoondolewa

Jenga juu ya tahadhari yoyote kwa kuongeza .alert-dismissiblekitufe cha hiari na funga.

Inahitaji programu jalizi ya arifa ya JavaScript

Kwa utendakazi kamili, tahadhari zinazoondolewa, lazima utumie programu jalizi ya JavaScript ya arifa .

<div class="alert alert-warning alert-dismissible" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  <strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>

Hakikisha tabia ifaayo kwenye vifaa vyote

Hakikisha unatumia <button>kipengele kilicho na data-dismiss="alert"sifa ya data.

Tumia .alert-linkdarasa la matumizi ili kutoa kwa haraka viungo vya rangi zinazolingana ndani ya tahadhari yoyote.

<div class="alert alert-success" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-info" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-warning" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-danger" role="alert">
  <a href="#" class="alert-link">...</a>
</div>

Baa za maendeleo

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
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    <span class="sr-only">60% Complete</span>
  </div>
</div>

Na lebo

Ondoa <span>with .sr-onlyclass kutoka ndani ya upau wa maendeleo ili kuonyesha asilimia inayoonekana.

60%
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    60%
  </div>
</div>

Ili kuhakikisha kuwa maandishi ya lebo yanaendelea kusomeka hata kwa asilimia ndogo, zingatia kuongeza a min-widthkwenye upau wa maendeleo.

0%
2%
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;">
    0%
  </div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 2%;">
    2%
  </div>
</div>

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)
<div class="progress">
  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
    <span class="sr-only">40% Complete (success)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <span class="sr-only">20% Complete</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
    <span class="sr-only">60% Complete (warning)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
    <span class="sr-only">80% Complete (danger)</span>
  </div>
</div>

Milia

Hutumia upinde rangi kuunda athari yenye milia. Haipatikani katika IE9 na chini.

40% imekamilika (mafanikio)
20% Imekamilika
60% Imekamilika (onyo)
80% Imekamilika (hatari)
<div class="progress">
  <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
    <span class="sr-only">40% Complete (success)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <span class="sr-only">20% Complete</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
    <span class="sr-only">60% Complete (warning)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
    <span class="sr-only">80% Complete (danger)</span>
  </div>
</div>

Imehuishwa

Ongeza .activekwa .progress-bar-stripedkuhuisha milia kulia kwenda kushoto. Haipatikani katika IE9 na chini.

45% Imekamilika
<div class="progress">
  <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
    <span class="sr-only">45% Complete</span>
  </div>
</div>

Imepangwa kwa rafu

Weka pau nyingi kwenye kitu kimoja .progressili kuziweka.

35% imekamilika (mafanikio)
20% Imekamilika (onyo)
10% Imekamilika (hatari)
<div class="progress">
  <div class="progress-bar progress-bar-success" style="width: 35%">
    <span class="sr-only">35% Complete (success)</span>
  </div>
  <div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
    <span class="sr-only">20% Complete (warning)</span>
  </div>
  <div class="progress-bar progress-bar-danger" style="width: 10%">
    <span class="sr-only">10% Complete (danger)</span>
  </div>
</div>

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.
<div class="media">
  <div class="media-left">
    <a href="#">
      <img class="media-object" src="..." alt="...">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
    ...
  </div>
</div>

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.

<div class="media">
  <div class="media-left media-middle">
    <a href="#">
      <img class="media-object" src="..." alt="...">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Middle aligned media</h4>
    ...
  </div>
</div>

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.
<ul class="media-list">
  <li class="media">
    <div class="media-left">
      <a href="#">
        <img class="media-object" src="..." alt="...">
      </a>
    </div>
    <div class="media-body">
      <h4 class="media-heading">Media heading</h4>
      ...
    </div>
  </li>
</ul>

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
<ul class="list-group">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

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
<ul class="list-group">
  <li class="list-group-item">
    <span class="badge">14</span>
    Cras justo odio
  </li>
</ul>

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.

<div class="list-group">
  <a href="#" class="list-group-item active">
    Cras justo odio
  </a>
  <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item">Morbi leo risus</a>
  <a href="#" class="list-group-item">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item">Vestibulum at eros</a>
</div>

Vipengee vya kifungo

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.

<div class="list-group">
  <button type="button" class="list-group-item">Cras justo odio</button>
  <button type="button" class="list-group-item">Dapibus ac facilisis in</button>
  <button type="button" class="list-group-item">Morbi leo risus</button>
  <button type="button" class="list-group-item">Porta ac consectetur ac</button>
  <button type="button" class="list-group-item">Vestibulum at eros</button>
</div>

Vipengee vilivyozimwa

Ongeza .disabledkwa a .list-group-itemhadi kijivu ili ionekane kuwa imezimwa.

<div class="list-group">
  <a href="#" class="list-group-item disabled">
    Cras justo odio
  </a>
  <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item">Morbi leo risus</a>
  <a href="#" class="list-group-item">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item">Vestibulum at eros</a>
</div>

Madarasa ya muktadha

Tumia madarasa ya muktadha kuunda vipengee vya orodha, chaguomsingi au vilivyounganishwa. Pia inajumuisha .activejimbo.

  • Dapibus ac kuwezesha katika
  • Cras sit amet nibh libero
  • Porta ac consectetur ac
  • Vestibulum na eros
<ul class="list-group">
  <li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
  <li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
  <li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>
  <li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
</ul>
<div class="list-group">
  <a href="#" class="list-group-item list-group-item-success">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item list-group-item-info">Cras sit amet nibh libero</a>
  <a href="#" class="list-group-item list-group-item-warning">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item list-group-item-danger">Vestibulum at eros</a>
</div>

Maudhui maalum

Ongeza karibu HTML yoyote ndani, hata kwa vikundi vya orodha vilivyounganishwa kama hii hapa chini.

<div class="list-group">
  <a href="#" class="list-group-item active">
    <h4 class="list-group-item-heading">List group item heading</h4>
    <p class="list-group-item-text">...</p>
  </a>
</div>

Paneli

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
<div class="panel panel-default">
  <div class="panel-body">
    Basic panel example
  </div>
</div>

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
<div class="panel panel-default">
  <div class="panel-heading">Panel heading without title</div>
  <div class="panel-body">
    Panel content
  </div>
</div>

<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">Panel title</h3>
  </div>
  <div class="panel-body">
    Panel content
  </div>
</div>

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
<div class="panel panel-default">
  <div class="panel-body">
    Panel content
  </div>
  <div class="panel-footer">Panel footer</div>
</div>

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
<div class="panel panel-primary">...</div>
<div class="panel panel-success">...</div>
<div class="panel panel-info">...</div>
<div class="panel panel-warning">...</div>
<div class="panel panel-danger">...</div>

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
<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">
    <p>...</p>
  </div>

  <!-- Table -->
  <table class="table">
    ...
  </table>
</div>

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
<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>

  <!-- Table -->
  <table class="table">
    ...
  </table>
</div>

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
<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">
    <p>...</p>
  </div>

  <!-- List group -->
  <ul class="list-group">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Morbi leo risus</li>
    <li class="list-group-item">Porta ac consectetur ac</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>

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.

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

Visima

Chaguo-msingi vizuri

Tumia kisima kama athari rahisi kwenye kipengele ili kukipa athari ya kuingiza.

Tazama, niko kisimani!
<div class="well">...</div>

Madarasa ya hiari

Dhibiti pedi na pembe zilizo na mviringo kwa madarasa mawili ya hiari ya kurekebisha.

Tazama, niko kwenye kisima kikubwa!
<div class="well well-lg">...</div>
Tazama, niko kwenye kisima kidogo!
<div class="well well-sm">...</div>