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
glyphicon glyphicon-jani
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
aina ya glyphicon ya glyphicon
glyphicon glyphicon-panga-kwa-alfabeti
glyphicon glyphicon-panga-kwa-alfabeti-alt
glyphicon glyphicon-panga-kwa-kuagiza
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 ikoni 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.

Weka barua pepe halali

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

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.

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

Mpangilio

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.

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

Vichwa vya habari

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>

Kigawanyaji

Ongeza kigawanyaji ili kutenganisha mfululizo wa viungo kwenye menyu kunjuzi.

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

Vipengee vya menyu vilivyozimwa

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>

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 sahihi`role` na 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 arole="toolbar" .

Isipokuwa moja ni vikundi ambavyo vina kidhibiti kimoja pekee (kwa mfano vikundi vya vitufe vilivyohalalishwa 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>

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.

Kushoto Kati Haki

Kushoto Kati

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

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>

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 kwa moja .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 halisi ya kutumika (vipengele vinavyoonekana <label>, <label>vipengele vilivyofichwa kwa kutumia .sr-onlydarasa, au matumizi ya aria-label, aria-labelledby, aria-describedby, titleauplaceholder sifa) 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 ingizo.

Hatutumii programu jalizi nyingi ( .input-group-addonau.input-group-btn ) kwa upande mmoja.

Hatutumii vidhibiti vingi vya fomu katika kikundi kimoja cha ingizo.

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

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

Vidonge

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>

Thibitisha

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>

Viungo vilivyozimwa

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, sio 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>

Kwa kutumia menyu kunjuzi

Ongeza menyu kunjuzi ukitumia HTML ya ziada 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 ni vipengee vya meta vinavyojibu ambavyo hutumika kama vichwa vya kusogeza kwa programu au tovuti yako. Huanza kukunjwa (na zinaweza kugeuzwa) katika mwonekano wa simu ya mkononi 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.

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

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

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>

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.

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

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 uandishi 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>

Viungo vilivyopangiliwa

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>

Mfano

Mfano wa kichwaMpya

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 .

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>

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>

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>

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.

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

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

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>

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

Hakuna darasa chaguo-msingi

Arifa hazina madarasa chaguo-msingi, madarasa ya msingi na ya kurekebisha tu. Tahadhari chaguomsingi ya kijivu haina 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.

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

Onyo! Afadhali ujiangalie, huonekani kuwa mzuri sana.

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

Viungo katika arifa

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

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.

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

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.

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

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

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

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

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

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 ya ndani ya orodha (yanafaa 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>

Vikundi vya orodha ni sehemu inayoweza kunyumbulika na yenye nguvu ya kuonyesha sio tu orodha rahisi 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.

Cras justo odio Dapibus ac kuwezesha katika Morbi leo rius Porta ac consectetur ac Vestibulum na eros

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

Cras justo odio Dapibus ac kuwezesha katika Morbi leo rius Porta ac consectetur ac Vestibulum na eros

<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

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 ilivyo hapa chini.

Orodhesha kichwa cha kipengee cha kikundi

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

Orodhesha kichwa cha kipengee cha kikundi

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

Orodhesha kichwa cha kipengee cha kikundi

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

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

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>

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

Paneli ya kijachini

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

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>

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>

Vipengele

Glyphicons

Glyphs zinazopatikana

Jinsi ya kutumia

Usichanganye na viungo vingine

Inatumika tu kwenye vitu tupu

Kubadilisha eneo la fonti ya ikoni

Aikoni zinazoweza kufikiwa

Mifano

Kunjuzi

Mfano

Mpangilio

Inaweza kuhitaji nafasi ya ziada

.pull-rightMpangilio ulioacha kutumika

Vichwa vya habari

Kigawanyaji

Vipengee vya menyu vilivyozimwa

Vikundi vya vifungo

Vidokezo vya zana na popover katika vikundi vya vitufe vinahitaji mpangilio maalum

Hakikisha sahihirole na utoe lebo

Mfano wa msingi

Upau wa vidhibiti

Ukubwa

Nesting

Tofauti ya wima

Vikundi vya vitufe vilivyohalalishwa

Kushughulikia mipaka

IE8 na mipaka

Pamoja na <a>vipengele

Viungo vinavyofanya kazi kama vifungo

Pamoja na <button>vipengele

Vifungo kunjuzi

Utegemezi wa programu-jalizi

Viteremsho vya kitufe kimoja

Kunjuzi za vitufe vya kugawanyika

Ukubwa

Tofauti ya kuacha

Vikundi vya kuingiza

Maandishi <input>tu

Vidokezo vya zana na popover katika vikundi vya ingizo vinahitaji mpangilio maalum

Usichanganye na viungo vingine

Ongeza lebo kila wakati

Mfano wa msingi

Ukubwa

Visanduku vya kuteua na viongezi vya redio

Viongezi vya vifungo

Vifungo vilivyo na menyu kunjuzi

Vifungo vilivyogawanywa

Vifungo vingi

Navs

Kutumia navs kwa vidirisha vya vichupo kunahitaji programu-jalizi ya vichupo vya JavaScript

Fanya navs zitumike kama urambazaji kufikiwa

Vichupo

Vidonge

Thibitisha

Safari na navs msikivu zilizohalalishwa

Viungo vilivyozimwa

Utendaji wa kiungo haujaathiriwa

Kwa kutumia menyu kunjuzi

Vichupo vilivyo na menyu kunjuzi

Vidonge vilivyo na kushuka

Upau wa urambazaji

Upau wa urambazaji chaguomsingi

Maudhui yaliyojaa

Inahitaji programu jalizi ya JavaScript

Kubadilisha sehemu ya kuvunja upau wa urambazaji wa rununu

Fanya viunzi vya baharini vipatikane

Picha ya chapa

Fomu

Vidokezo vya kifaa cha rununu

Ongeza lebo kila wakati

Vifungo

Matumizi mahususi ya muktadha

Maandishi

Viungo visivyo vya nav

Mpangilio wa vipengele

Kupanga vipengele vingi kulia

Imewekwa juu

Usafi wa mwili unahitajika

Imewekwa chini

`.pull-right`Mpangilio ulioacha kutumika

Hakikisha sahihi`role` na utoe lebo

Pamoja na `<a>`vipengele

Pamoja na `<button>`vipengele

Maandishi `<input>`tu