Glyphs eziriwo

Mulimu ebigambo ebisukka mu 250 mu nkola y’empandiika okuva mu Glyphicon Halflings set. Glyphicons Halflings mu budde obutuufu tezifunibwa ku bwereere, naye omutonzi wazo azifudde ku Bootstrap ku bwereere. Nga okwebaza, tusaba kyokka okussaamu enkolagana okudda ku Glyphicons buli lwe kiba kisoboka.

glyphicon glyphicon-emmunyeenye
glyphicon ekika kya glyphicon-okugattako
glyphicon ekika kya glyphicon-euro
glyphicon ekika kya glyphicon-eur
glyphicon glyphicon-okuggyako
glyphicon glyphicon-ekire eky’ekika kya glyphicon
glyphicon glyphicon-envulopu
glyphicon glyphicon-ekkalaamu
glyphicon glyphicon-endabirwamu
glyphicon glyphicon-omuziki
glyphicon glyphicon-okunoonya
glyphicon glyphicon-omutima
glyphicon glyphicon-emmunyeenye
glyphicon glyphicon-emmunyeenye-etaliimu kintu kyonna
glyphicon glyphicon-omukozesa
glyphicon ekika kya glyphicon-firimu
glyphicon glyphicon-eky’okusatu-ekinene
glyphicon glyphicon-eky’oku ntikko
glyphicon glyphicon-olukalala lw’olukalala
glyphicon ebigambo ebiriko ebigambo-ok
glyphicon glyphicon-okuggyawo
glyphicon glyphicon-okugaziya
glyphicon glyphicon-okukendeeza-okukendeeza
glyphicon glyphicon-okuggwaawo
glyphicon glyphicon-akabonero akalaga nti
glyphicon glyphicon-ekikondo ky’omubiri
glyphicon glyphicon-kasasiro
glyphicon glyphicon-awaka
glyphicon fayiro ya glyphicon
glyphicon glyphicon-ekiseera
glyphicon glyphicon-oluguudo
glyphicon glyphicon-okuwanula-alt
glyphicon glyphicon-okuwanula ebifaananyi
glyphicon glyphicon-okuteeka ku mukutu
glyphicon glyphicon-akabokisi k'okuyingira
glyphicon glyphicon-okuzannya-enkulungo
glyphicon glyphicon-okuddiŋŋana
glyphicon glyphicon-okuzza obuggya
glyphicon glyphicon-olukalala-alt
glyphicon ekika kya glyphicon-ekizibiti
glyphicon glyphicon-bendera yaayo
glyphicon glyphicon-ebikozesebwa mu matu
glyphicon glyphicon-obuzito-okuggwaawo
glyphicon glyphicon-obunene-okukka wansi
glyphicon glyphicon-obunene-okulinnya
glyphicon ekiwandiiko ekiraga ebifaananyi-qrcode
glyphicon glyphicon-baakoodi ya bbaala
glyphicon glyphicon-akabonero akalaga nti omuntu alina akabonero
glyphicon glyphicon-ebipande ebiraga ebifaananyi
glyphicon ekitabo kya glyphicon
glyphicon glyphicon-akabonero akalaga nti
glyphicon glyphicon-okukuba ebitabo
glyphicon ekika kya glyphicon-kamera
glyphicon glyphicon-empandiika
glyphicon glyphicon-obugumu
glyphicon glyphicon-ennukuta ensirifu
glyphicon glyphicon-ekiwandiiko-obugulumivu
glyphicon glyphicon-ekiwandiiko-obugazi
glyphicon glyphicon-okulaga-ku kkono
glyphicon glyphicon-okukwataganya-wakati
glyphicon glyphicon-okulaga-ku ddyo
glyphicon glyphicon-okulaga-okulaga obutuufu
glyphicon glyphicon-olukalala lw’ebifaananyi
glyphicon glyphicon-okuyingira-ku kkono
glyphicon glyphicon-okuyingira-ku ddyo
glyphicon glyphicon-omu maaso-ekiseera-vidiyo
glyphicon glyphicon-ekifaananyi
glyphicon glyphicon-ekiraga-maapu
glyphicon glyphicon-okutereeza
glyphicon ekika kya glyphicon-tint
glyphicon glyphicon-okulongoosa
glyphicon glyphicon-okugabana
glyphicon glyphicon-okukebera
glyphicon glyphicon-okutambula
glyphicon glyphicon-eddaala-okudda emabega
glyphicon glyphicon-amangu-emabega
glyphicon glyphicon-okudda emabega
glyphicon glyphicon-okuzannya
glyphicon glyphicon-okuyimirira
glyphicon glyphicon-okuyimirira
glyphicon glyphicon-okugenda mu maaso
glyphicon glyphicon-okugenda mu maaso mu bwangu
glyphicon glyphicon-omutendera-okugenda mu maaso
glyphicon glyphicon-okufulumya ebifaananyi
glyphicon glyphicon-chevron-ku kkono
glyphicon glyphicon-chevron-ku ddyo
glyphicon akabonero ka glyphicon-plus
glyphicon glyphicon-akabonero-okuggyako
glyphicon glyphicon-okuggyawo-akabonero
glyphicon glyphicon-akabonero-ok-akabonero
glyphicon glyphicon-akabonero-ekibuuzo
glyphicon glyphicon-akabonero-amawulire
glyphicon glyphicon-ekifaananyi ky'oku ssimu
glyphicon glyphicon-okuggyawo-enkulungo
glyphicon glyphicon-ok-enkulungo
glyphicon glyphicon-ban-enkulungo
glyphicon glyphicon-akasaale-ku kkono
glyphicon glyphicon-akasaale-ku ddyo
glyphicon glyphicon-akasaale-okugulu
glyphicon glyphicon-akasaale-wansi
glyphicon glyphicon-okugabana-alt
glyphicon glyphicon-okukyusa obunene-okujjula
glyphicon glyphicon-okukyusa obunene-obutono
glyphicon glyphicon-akabonero-aka-okuwuniikiriza
glyphicon glyphicon-ekirabo eky’ekika kya glyphicon
glyphicon ekikoola kya glyphicon
glyphicon glyphicon-omuliro ogw’ekika kya glyphicon
glyphicon glyphicon-okuggulawo amaaso
glyphicon glyphicon-okuggalawo amaaso
glyphicon glyphicon-akabonero-aka-okulabula
glyphicon glyphicon-ennyonyi
glyphicon glyphicon-kalenda y’ebifaananyi
glyphicon glyphicon-ekitali kya bulijjo
glyphicon glyphicon-okuteesa
glyphicon glyphicon-magneeti y’ekika kya glyphicon
glyphicon glyphicon-ekiwujjo-okudda waggulu
glyphicon glyphicon-chevron-okukka wansi
glyphicon glyphicon-okuddamu okuwandiika ku mukutu gwa yintaneeti
glyphicon glyphicon-akagaali-akagula
glyphicon glyphicon-ekifo-okuggalawo
glyphicon glyphicon-ekifo-ekiggule
glyphicon glyphicon-okukyusa obunene-okwesimbye
glyphicon glyphicon-okukyusa obunene-obuwanvu
ekiwandiiko ekiraga ebigambo glyphicon-hdd
glyphicon glyphicon-eyembe ly’ente ennume
glyphicon glyphicon-akagombe akayitibwa glyphicon
glyphicon glyphicon-satifikeeti
glyphicon glyphicon-okukuba engalo ensajja waggulu
glyphicon glyphicon-engalo ensajja-wansi
glyphicon glyphicon-omukono-ku ddyo
glyphicon glyphicon-omukono-ku kkono
glyphicon glyphicon-omukono-okugulu
glyphicon glyphicon-omukono-wansi
glyphicon glyphicon-enkulungo-akasaale-ku ddyo
glyphicon glyphicon-enkulungo-akasaale-ku kkono
glyphicon glyphicon-enkulungo-akasaale-waggulu
glyphicon glyphicon-enkulungo-akasaale-wansi
glyphicon glyphicon-ensi yonna ey’ekika kya glyphicon
glyphicon ekisumuluzo kya glyphicon
glyphicon glyphicon-emirimu gy’okukola
glyphicon glyphicon-omusengejja
glyphicon glyphicon-ensawo y’ebitabo
glyphicon glyphicon-ekifaananyi ekijjuvu
glyphicon glyphicon-dashiboodi y’ekipande
glyphicon glyphicon-ekikwaso ky’empapula
glyphicon glyphicon-omutima-etaliimu kintu kyonna
glyphicon glyphicon-enkolagana yaayo
glyphicon glyphicon-essimu ey’ekika kya glyphicon
glyphicon glyphicon-ekiwujjo ky’ekika kya glyphicon
glyphicon ekiwandiiko ekiraga ebifaananyi-usd
ekiwandiiko ekiraga ebigambo glyphicon-gbp
glyphicon glyphicon-ekika ky’ebifaananyi
glyphicon glyphicon-okusunsula-ku-nnyiriri
glyphicon glyphicon-okusunsula-okusinziira-nga-ennukuta-alt
glyphicon glyphicon-okusunsula-nga-okusengeka
glyphicon glyphicon-okusunsula-nga-okulagirwa-alt
glyphicon glyphicon-okusunsula-nga-ebikozesebwa
glyphicon glyphicon-okusunsula-nga-ebikozesebwa-alt
glyphicon glyphicon-tekebereddwa
glyphicon glyphicon-okugaziya
glyphicon glyphicon-okugwa-wansi
glyphicon glyphicon-okugwa-okugulu
glyphicon glyphicon-okuyingira
glyphicon glyphicon-okumasamasa
glyphicon glyphicon-okufuluma-okufuluma
glyphicon glyphicon-eddirisa-empya
glyphicon glyphicon-ekiwandiiko
glyphicon glyphicon-okutereka
glyphicon glyphicon-okuggulawo
glyphicon glyphicon-eterekeddwa
glyphicon glyphicon-okuyingiza mu ggwanga
glyphicon glyphicon-okufulumya ebweru w’eggwanga
glyphicon glyphicon-okuweereza
glyphicon glyphicon-ekintu ekikuba ebifaananyi
glyphicon glyphicon-ekiterekeddwa mu flopi
glyphicon glyphicon-okuggyawo-okuggyawo
glyphicon glyphicon-okutereka-okutereka
glyphicon glyphicon-ekipande-ekiggule
glyphicon glyphicon-kaadi y’okuwola
glyphicon glyphicon-okukyusakyusa
glyphicon glyphicon-ebintu ebikozesebwa mu kulya
glyphicon glyphicon-omutwe gw’omutwe
glyphicon ekinywezeddwa mu glyphicon
glyphicon glyphicon-essimu y’oku matu
glyphicon glyphicon-essimu-alt
glyphicon glyphicon-omunaala ogw’ekika kya glyphicon
glyphicon glyphicon-ebibalo
glyphicon glyphicon-sd-akatambi akalaga ebifaananyi
glyphicon glyphicon-vidiyo y'ekika kya hd
glyphicon glyphicon-ebigambo ebitonotono
glyphicon glyphicon-eddoboozi-stereo
glyphicon glyphicon-eddoboozi-dolby
glyphicon glyphicon-eddoboozi-5-1
glyphicon glyphicon-eddoboozi-6-1
glyphicon glyphicon-eddoboozi-7-1
glyphicon glyphicon-akabonero k'obuyinza bw'okuwandiika
glyphicon glyphicon-akabonero-okuwandiisa
glyphicon glyphicon-ekire-okuwanula
glyphicon glyphicon-ekire-okuteeka ku mukutu
glyphicon glyphicon-omuti-omuti-omuti
glyphicon glyphicon-omuti-ogw’ebikoola
glyphicon ekika kya glyphicon-cd
glyphicon glyphicon-okutereka-fayiro
glyphicon glyphicon-fayiro-enzigule
glyphicon glyphicon-omutendera-okulinnya
glyphicon glyphicon-okukoppa
glyphicon glyphicon-ekikuta ky’omubiri
glyphicon glyphicon-okulabula
glyphicon glyphicon-ekigerageranya eky’enjawulo
glyphicon glyphicon-kabaka ow’ekika kya glyphicon
glyphicon glyphicon-nnabagereka
glyphicon glyphicon-ekiwujjo
glyphicon glyphicon-omulabirizi
glyphicon glyphicon-omusajja omuzira
glyphicon glyphicon-enkola y’omwana
glyphicon glyphicon-weema yaayo ey’ekika kya glyphicon
glyphicon glyphicon-olubaawo oluddugavu
glyphicon ekitanda kya glyphicon
glyphicon glyphicon-obulo obuyitibwa obulo obuyitibwa glyphicon
glyphicon glyphicon-okusangula
glyphicon glyphicon-essaawa y’essaawa
glyphicon ettaala ya glyphicon
glyphicon glyphicon-okukoppa
glyphicon glyphicon-bbanka y’embizzi
glyphicon glyphicon-ebisala ebisala
glyphicon ekika kya glyphicon-bitcoin
glyphicon ekika kya glyphicon-btc
glyphicon ekiwandiiko ekiraga nti-xbt
ekika kya glyphicon ekika kya glyphicon-yen
ekiwandiiko ekiraga ebigambo glyphicon-jpy
glyphicon ekika kya glyphicon-ruble
glyphicon glyphicon-okusiiga ebifaananyi
glyphicon ekipimo kya glyphicon
glyphicon glyphicon-omuzira-lolly ogw’ekika kya glyphicon
glyphicon glyphicon-obuwoomi bwa ice-lolly
glyphicon glyphicon-okusomesa
glyphicon glyphicon-ekyokulonda-eky’okwebungulula
glyphicon glyphicon-ekyokulonda-ekyesimbye
glyphicon glyphicon-menyu-hamburger, omubisi gw’enjuki
glyphicon glyphicon-eddirisa-erya-modal
glyphicon amafuta ga glyphicon
glyphicon glyphicon-empeke
glyphicon glyphicon-engatto z’omusana
glyphicon glyphicon-obunene bw'ekiwandiiko
glyphicon glyphicon-ekiwandiiko-embala
glyphicon glyphicon-ekiwandiiko-eky'emabega
glyphicon glyphicon-ekintu-okulaga-okungulu
glyphicon glyphicon-ekintu-okukwataganya-wansi
glyphicon glyphicon-ekintu-okulaga-okulaga-okwebungulula
glyphicon glyphicon-ekintu-okulaga-ku kkono
glyphicon glyphicon-ekintu-okukwataganya-okwesimbye
glyphicon glyphicon-ekintu-okukwataganya-ku ddyo
glyphicon glyphicon-enjuyi essatu-ku ddyo
glyphicon glyphicon-enjuyi essatu-ku kkono
glyphicon glyphicon-enjuyi essatu-wansi
glyphicon glyphicon-enjuyi essatu-oku ntikko
glyphicon glyphicon-ekintu ekikuba ebifaananyi
glyphicon glyphicon-ekiwandiiko eky’okungulu
glyphicon glyphicon-ekiwandiiko ekiwandiikiddwako
glyphicon glyphicon-menu-ku kkono
glyphicon glyphicon-menyu-ku ddyo
glyphicon glyphicon-menyu-wansi
glyphicon glyphicon-menyu-okudda waggulu

Engeri y’okukozesaamu

Olw'ensonga z'okukola, ebifaananyi byonna byetaaga ekibiina eky'omusingi n'ekibiina ky'ebifaananyi eby'omuntu kinnoomu. Okusobola okukozesa, teeka koodi eno wammanga kumpi wonna. Kakasa nti olekawo ekifo wakati w’akabonero n’ebiwandiiko okusobola okuteeka obulungi.

Totabula na bitundu birala

Ebika by’ebifaananyi tebisobola kugattibwa butereevu n’ebitundu ebirala. Tezirina kukozesebwa wamu ne kiraasi endala ku elementi y’emu. Mu kifo ky’ekyo, yongera ku nested <span>era okozese ebika by’ebifaananyi ku <span>.

Okukozesebwa kwokka ku elementi etaliimu kintu kyonna

Ebika by’ebifaananyi birina okukozesebwa ku bintu byokka ebitaliiko bigambo bya biwandiiko era ebitaliiko bintu bya mwana.

Okukyusa ekifo ky'empandiika y'akabonero

Bootstrap etwala nti fayiro z'empandiika z'ebifaananyi zijja kusangibwa mu ../fonts/dayirekita, okusinziira ku fayiro za CSS ezikung'aanyiziddwa. Okutambuza oba okukyusa amannya ga fayiro ezo ez’empandiika kitegeeza okutereeza CSS mu emu ku ngeri ssatu:

Kyusa @icon-font-pathne/oba @icon-font-nameenkyukakyuka mu fayiro z'ensibuko Less.
Kozesa enkola ya URLs ez'enjawulo ewereddwa omukung'aanya wa Less.
Kyusa url()amakubo mu CSS ekunganyiziddwa.

Kozesa ekintu kyonna ekisinga okukwatagana n’enteekateeka yo ey’enjawulo ey’enkulaakulana.

Ebifaananyi ebituukirirwa

Enkyusa ez’omulembe eza tekinologiya ayamba zijja kulangirira ebirimu ebikoleddwa CSS, wamu n’ennukuta za Unicode ezenjawulo. Okwewala okufulumya okutali kwa kigendererwa era okutabula mu bisoma ku ssirini (naddala nga ebifaananyi bikozesebwa kwokka okuyooyoota), tubikweka n’ekintu aria-hidden="true".

Bw’oba okozesa akabonero okutuusa amakulu (okusinga ng’ekintu eky’okuyooyoota kyokka), kakasa nti amakulu gano nago gatuusibwa ne tekinologiya ayamba – okugeza, ssaamu ebirimu ebirala, ebikwekebwa mu maaso ne .sr-onlykiraasi.

Bw’oba okola ebifuga nga tewali kiwandiiko kirala (nga a <button>ekirimu akabonero kokka), bulijjo olina okuwa ebirimu ebirala okuzuula ekigendererwa ky’okufuga, kisobole okukola amakulu eri abakozesa tekinologiya ayamba. Mu mbeera eno, oyinza okwongerako ekintu aria-labelku kifuga kyennyini.

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

Eby’okulabirako

Zikozese mu buttons, ebibinja bya buttons ku toolbar, navigation, oba prepended form inputs.

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

Akabonero akakozesebwa mu kulabula okutuusa nti bubaka bwa nsobi, nga waliwo .sr-onlyebiwandiiko ebirala okutuusa akabonero kano eri abakozesa tekinologiya ayamba.

Yingiza endagiriro ya email entuufu

<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 ekyusibwakyusibwa, eriko ensonga okulaga enkalala z'enkolagana. Ekoleddwa nga ekwatagana ne JavaScript plugin egwa wansi .

Eky'okulabirako

Zinga ekiziyiza eky'okugwa ne menu egwa munda mu .dropdown, oba ekintu ekirala ekirangirira position: relative;. Oluvannyuma osseeko HTML ya menu.

<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 ezikka zisobola okukyusibwa okugaziya waggulu (mu kifo ky’okudda wansi) nga zongera .dropupku muzadde.

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

Okukwatagana

Nga bwekiba, menu egwa wansi eteekebwa mu ngeri ey’otoma 100% okuva waggulu ne ku ludda olwa kkono olwa muzadde waayo. Okwongera .dropdown-menu-rightku a .dropdown-menuku ddyo sengeka menu egwa wansi.

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

Emitwe gy’omutwe

Okwongerako omutwe okuwandiika ebitundu by'ebikolwa mu menu yonna ekka.

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

Omugabanya

Okwongerako ekigabanya ku lunyiriri lw’enkolagana ez’enjawulo mu menu egwa wansi.

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

Ebintu bya menu ebiremeseddwa

Yongera .disabledku a <li>mu dropdown okulemesa link.

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

Gamba omuddirirwa gwa buttons wamu ku layini emu ne button group. Okwongerako ku leediyo ya JavaScript ey'okwesalirawo n'enneeyisa y'omusono gw'akabokisi ne buttons plugin yaffe .

Tooltips & popovers mu bibinja bya button byetaaga okuteekawo okw'enjawulo

Nga okozesa obukodyo bw’ebikozesebwa oba popovers ku elementi eziri munda mu a .btn-group, ojja kuba olina okulaga eky’okulonda container: 'body'okwewala ebizibu ebiteetaagibwa (nga elementi okukula okugazi ne/oba okufiirwa enkoona zaayo ezeetooloovu nga tooltip oba popover etandikiddwawo).

Kakasa nti kituufu `role`era oweeyo akabonero

Okusobola tekinologiya ayamba – nga ebisoma ku ssirini – okutuusa nti omuddirirwa gwa buttons gukuŋŋaanyiziddwa mu bibinja, ekintu ekituufu rolekyetaaga okuweebwa. Ku bibinja bya button, kino kyandibadde role="group", so nga toolbars zirina okuba ne role="toolbar".

Okujjako ekimu bye bibinja ebirimu ekifuga kimu kyokka (okugeza ebibinja bya button ebituufu ebirina elementi <button>) oba okugwa.

Okugatta ku ekyo, ebibinja n’ebikozesebwa birina okuweebwa akabonero akategeerekeka obulungi, kubanga tekinologiya asinga obungi ayamba mu ngeri endala tajja kubilangirira, wadde nga waliwo ekintu ekituufu role. Mu byokulabirako ebiweereddwa wano, tukozesa aria-label, naye ebirala nga aria-labelledbynabyo bisobola okukozesebwa.

Ekyokulabirako ekikulu

Zinga omuddirirwa gwa buttons nga olina .btnmu .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>

Gatta sets of <div class="btn-group">mu a <div class="btn-toolbar">for ebitundu ebizibu ennyo.

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

Okugerageranya obunene

Mu kifo ky’okukozesa ebika by’okugerageranya bbaatuuni ku buli bbaatuuni mu kibinja, yongera .btn-group-*ku buli kimu .btn-group, nga mw’otwalidde n’okusimba ebibinja ebingi.

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

Okuzimba ebisu

Teeka a .btn-groupmunda mu ndala .btn-groupng’oyagala menyu ezikka ezitabuddwamu obutambi obuddiriŋŋana.

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

Enkyukakyuka eyeesimbye

Kola ekibinja kya buttons okulabika nga kitumbiddwa mu vertikal okusinga horizontally. Split button dropdowns teziwagirwa wano.

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

Ebibinja bya button ebituufu

Kola ekibinja kya butto okugolola ku sayizi ezenkanankana okusobola okubuna obugazi bwonna obw’omuzadde waakyo. Era ekola ne button dropdowns munda mu kibinja kya button.

Okukwata ensalo

Olw’okukozesa HTML ne CSS ebitongole ebikozesebwa okulaga obutuufu bwa buttons (kwe kugamba display: table-cell), ensalosalo wakati wazo zikubisaamu emirundi ebiri. Mu bibinja bya button ebya bulijjo, margin-left: -1pxekozesebwa okuteeka ensalosalo mu kifo ky’okuziggyawo. Kyokka, margintekikola na display: table-cell. N’ekyavaamu, okusinziira ku nnongoosereza zo ku Bootstrap, oyinza okwagala okuggyawo oba okuddamu okukuba langi ku nsalosalo.

IE8 n’ensalo

Internet Explorer 8 telaga nsalo ku buttons mu kibinja kya buttons ekituufu, ka kibeere ku <a>oba <button>elements. Okusobola okwewala ekyo, buli bbaatuuni gizinge mu ndala .btn-group.

Laba #12476 okumanya ebisingawo.

Nga balina `<a>`elementi

Just wrap omuddirirwa gwa .btns mu .btn-group.btn-group-justified.

Kkono Mumassekkati Kituufu

Kkono Mumassekkati

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

Links ezikola nga buttons

Singa <a>ebintu bikozesebwa okukola nga buttons – okutandikawo emirimu mu lupapula, okusinga okugenda mu kiwandiiko ekirala oba ekitundu munda mu lupapula oluliwo kati – nabyo bisaana okuweebwa esaanira role="button".

Nga balina `<button>`elementi

Okukozesa ebibinja bya button ebituufu ebirina <button>elementi, olina okuzinga buli button mu kibinja kya button . Browser ezisinga tezikozesa bulungi CSS yaffe for justification to <button>elements, naye okuva bwe tuwagira button dropdowns, tusobola okukola okwetoloola ekyo.

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

Kozesa button yonna okutandika menu dropdown nga ogiteeka munda mu a .btn-groupera okuwa menu markup entuufu.

Okwesigamira ku plugin

Button dropdowns zeetaaga dropdown plugin okuteekebwa mu version yo eya Bootstrap.

Ebiwandiiko ebikka ku bbaatuuni emu

Fuula button mu dropdown toggle nga waliwo enkyukakyuka ezimu ezisookerwako mu markup.

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

Split button ezigwa wansi

Mu ngeri y’emu, tonda ebitundu ebikka ebya bbaatuuni ebyawuddwamu nga olina enkyukakyuka z’obubonero ze zimu, nga olina bbaatuuni ey’enjawulo yokka.

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

Okugerageranya obunene

Button dropdowns zikola ne buttons eza sayizi zonna.

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

Enkyukakyuka mu dropup

Trigger dropdown menus waggulu wa elements nga oyongera .dropupku muzadde.

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

Gaziya ebifuga foomu ng'ossaako ebiwandiiko oba obutambi nga tebunnatuuka, oluvannyuma, oba ku njuyi zombi ez'ekiwandiiko kyonna ekyesigamiziddwa ku kiwandiiko <input>. Kozesa .input-groupne .input-group-addonoba .input-group-btnokusooka oba okugattako elementi ku kimu .form-control.

Ebiwandiiko `<input>`s byokka

Weewale okukozesa <select>elementi wano kuba teziyinza kukola sitayiro mu bujjuvu mu WebKit browsers.

Weewale okukozesa <textarea>elementi wano kuba rowsattribute yazo tejja kuweebwa kitiibwa mu mbeera ezimu.

Tooltips & popovers mu bibinja by'okuyingiza byetaaga okuteekawo okw'enjawulo

Nga okozesa obukodyo bw’ebikozesebwa oba popovers ku elementi eziri munda mu an .input-group, ojja kuba olina okulaga eky’okulonda container: 'body'okwewala ebizibu ebiteetaagibwa (nga elementi okukula okugazi ne/oba okufiirwa enkoona zaayo ezeetooloovu nga tooltip oba popover etandikiddwawo).

Totabula na bitundu birala

Totabula bibinja bya ffoomu oba kiraasi z’ennyiriri za giridi butereevu n’ebibinja by’okuyingiza. Mu kifo ky’ekyo, teeka ekibinja ky’okuyingiza munda mu kibinja kya ffoomu oba ekintu ekikwatagana ne giridi.

Bulijjo yongera ku bubonero

Abasoma ku ssirini bajja kufuna obuzibu ku foomu zo singa tossaamu kabonero ku buli ky’oyingiza. Ku bibinja bino eby’ebiyingizibwa, kakasa nti akabonero oba omulimu gwonna ogw’enjawulo gutuusibwa eri tekinologiya ayamba.

Enkola entuufu egenda okukozesebwa (ebintu ebirabika <label>, <label>ebintu ebikwekebwa nga okozesa .sr-onlyekibiina, oba okukozesa aria-label, aria-labelledby, aria-describedby, titleoba placeholderekintu) n’amawulire ki ag’enjawulo agajja okwetaaga okutuusibwa bijja kwawukana okusinziira ku kika kyennyini ekya widget y’enkolagana gy’ossa mu nkola. Ebyokulabirako ebiri mu kitundu kino biwa enkola entonotono eziteeseddwa, ezikwata ku nsonga ezitali zimu.

Ekyokulabirako ekikulu

Teeka ekintu kimu eky’okugattako oba bbaatuuni ku buli ludda lw’ekiyingizibwa. Oyinza n’okuteeka emu ku njuyi zombi ez’ekiyingizibwa.

Tetuwagira kwongerako kungi ( .input-group-addonoba .input-group-btn) ku ludda lumu.

Tetuwagira form-controls eziwera mu kibinja kimu eky'okuyingiza.

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

Okugerageranya obunene

Okwongerako ebika by’obunene bwa ffoomu ezikwatagana ku .input-groupyennyini era ebirimu munda bijja kukyusa obunene mu ngeri ey’otoma —tekyetaagisa kuddiŋŋana kiraasi z’obunene bw’okufuga foomu ku buli kintu.

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

Checkboxes ne radio addons

Teeka checkbox yonna oba radio option munda mu addon y'ekibiina ky'okuyingiza mu kifo ky'ebiwandiiko.

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

Ebigattibwako ku button

Buttons mu bibinja by’okuyingiza za njawulo katono era zeetaaga omutendera gumu ogw’enjawulo ogw’okuzimba ebisu. Mu kifo kya .input-group-addon, ojja kwetaaga okukozesa .input-group-btnokuzinga obutambi. Kino kyetaagisa olw'emisono gya bbulawuzi egy'enjawulo egitasobola kukyusibwa.

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

Buttons eziriko ebigwa wansi

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

Butaamu eziriko ebitundutundu

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

Butaamu eziwera

Wadde nga osobola okuba n’ekintu kimu kyokka eky’okugattako buli ludda, osobola okuba ne buttons eziwera munda mu emu .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 eziri mu Bootstrap zirina markup ezigabana, okutandika ne base .navclass, wamu ne states ezigabana. Wap modifier classes okukyusa wakati wa buli sitayiro.

Okukozesa navs ku tab panels kyetaagisa JavaScript tabs plugin

Ku tabu ezirina ebitundu ebirina tabba, olina okukozesa tabu JavaScript plugin . Markup era ejja kwetaaga ebirala rolene ARIA attributes – laba plugin ekyokulabirako markup okumanya ebisingawo.

Fuula navs ezikozesebwa nga navigation ezituukirirwa

Bw’oba okozesa navs okuwa ebbaala y’okutambuliramu, kakasa nti ossaako a role="navigation"ku kibya ky’omuzadde ekisinga okutegeerekeka ekya <ul>, oba okuzinga <nav>ekintu okwetoloola okutambulira kwonna. Togattako kifo ku <ul>kyo, kubanga kino kyandiguremesezza okulangirirwa ng’olukalala lwennyini nga tekinologiya ayamba.

Ebitabo ebiyitibwa Tabs

Weetegereze .nav-tabsekibiina kyetaaga ekibiina .naveky’omusingi.

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

Empeke

Twala HTML eyo y’emu, naye kozesa .nav-pillsmu kifo ky’ekyo:

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

Empeke nazo ziteekebwa ku mulamwa mu vertikal. Okwongerako kyokka .nav-stacked.

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

Kituufu

Kyangu okukola tabs oba empeke obwenkana obugazi bwa muzadde waabwe ku screens obugazi okusinga 768px ne .nav-justified. Ku screens entono, nav links zitumbibwa.

Justified navbar nav links mu kiseera kino teziwagirwa.

Safari ne responsive justified navs

Okuva ku v9.1.2, Safari eraga ekizibu nga okukyusa obunene bwa browser yo mu horizontal kireeta ensobi mu kulaga mu nav entuufu ezirongoosebwa nga ozzeemu okuzza obuggya. Bug eno era eragiddwa mu kyokulabirako kya nav ekituufu .

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

Enkolagana ezilemeddwa

Ku kitundu kyonna ekya nav (tabs oba empeke), yongera .disabledku grey links era tewali hover effects .

Enkola ya link tekoseddwa

Kiraasi eno ejja kukyusa <a>ndabika ya 's yokka, so si nkola yaayo. Kozesa JavaScript eya bulijjo okulemesa enkolagana wano.

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

Okukozesa ebifo ebikka wansi

Okwongerako menu ezikka wansi nga olina HTML akatono ak'enjawulo n'ebigwa JavaScript plugin .

Taabu eziriko ebigwa wansi

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

Empeke eziriko ebitonnya

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

Navbars bitundu bya meta ebiddamu ebikola nga emitwe gy’okutambulira ku nkola yo oba omukutu gwo. Zitandika nga zigwa (era zikyusibwakyusibwa) mu kulaba ku ssimu ne zifuuka ez’okwebungulula ng’obugazi bw’ekifo eky’okulaba obuliwo bweyongera.

Justified navbar nav links mu kiseera kino teziwagirwa.

Ebirimu ebijjudde

Okuva Bootstrap bwetamanyi kifo ki ebirimu mu navbar yo bye byetaaga, oyinza okugwamu ensonga n'okuzinga ebirimu mu lunyiriri olw'okubiri. Okugonjoola kino, osobola:

Kendeeza ku bungi oba obugazi bw'ebintu bya navbar.
Kweka ebintu ebimu ebya navbar ku sayizi za screen ezimu ng'okozesa ebika by'ebikozesebwa ebiddamu .
Kyusa ekifo navbar yo w'ekyusa wakati wa collapsed ne horizontal mode. Customize @grid-float-breakpointvariable oba yongera ku kibuuzo kyo eky'emikutu.

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

Kikyuse akabonero ka navbar n'ekifaananyi kyo ng'okyusakyusa ekiwandiiko ne <img>. Okuva the .navbar-brandbwerina padding yaayo n'obuwanvu, oyinza okwetaaga okusazaamu CSS ezimu okusinziira ku kifaananyi kyo.

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

Teeka ebirimu mu foomu munda .navbar-formokusobola okulaga obulungi okwesimbye n'enneeyisa egudde mu bifo ebifunda eby'okulaba. Kozesa eby'okulonda eby'okulaganya okusalawo gye bibeera munda mu birimu bya navbar.

Nga heads up, .navbar-formagabana bingi ku code yaayo ne .form-inlinevia mixin. Ebimu ku bifuga ffoomu, nga ebibinja by'okuyingiza, biyinza okwetaaga obugazi obutakyukakyuka okulaga obulungi munda mu navbar.

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

Bulijjo yongera ku bubonero

Abasoma ku ssirini bajja kufuna obuzibu ku foomu zo singa tossaamu kabonero ku buli ky’oyingiza. Ku foomu zino eziri mu layini, osobola okukweka ebiwandiiko ng’okozesa .sr-onlyekibiina. Waliwo enkola endala ez’okuwa akabonero ku tekinologiya ayamba, gamba nga aria-label, aria-labelledbyoba titleekintu. Singa tewali n’emu ku bino ebaawo, abasomi ku screen bayinza okuddukira mu kukozesa placeholderekintu ekyo, bwe kiba nga kiriwo, naye weetegereze nti okukozesa placeholderng’ekifo ky’enkola endala ez’okuwandiika ebigambo tekiba kirungi.

Okwongerako .navbar-btnekibiina ku <button>elementi ezitabeera mu a <form>okuziteeka wakati mu vertikal mu navbar.

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

Zinga ennyiriri z'ebiwandiiko mu elementi ne .navbar-text, ebiseera ebisinga ku <p>tag okusobola okukulembera obulungi ne langi.

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

Ku bantu abakozesa enkolagana eza bulijjo ezitali mu kitundu kya bulijjo eky'okutambulira mu navbar, kozesa .navbar-linkekibiina okwongerako langi entuufu ez'okulonda kwa navbar okusookerwako n'okukyusakyusa.

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

Laganya enkolagana za nav, foomu, obutambi, oba ebiwandiiko, ng'okozesa .navbar-leftoba .navbar-rightebika by'omugaso. Ebika byombi bijja kwongerako CSS float mu ludda olulagiddwa. Okugeza, okulaganya nav links, ziteeke mu separate <ul>nga utility class ekwatagana ekozesebwa.

Ebika bino bya mixin-ed versions of .pull-leftand .pull-right, naye biba biweereddwa scoped ku media queries okusobola okwanguyirwa okukwata ebitundu bya navbar mu bunene bw'ebyuma.

Okwongerako .navbar-fixed-topera oteekemu .containeroba .container-fluidku makkati ne pad navbar content.

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

Okwetaaga okuteekebwamu omubiri

Navbar eteredde ejja kubikkako ebirimu byo ebirala, okuggyako ng'oyongeddeko paddingwaggulu ku <body>. Gezaako empisa zo oba kozesa akatundu kaffe wansi. Amagezi: Nga bwekiba, navbar eri 50px obuwanvu.

body { padding-top: 70px; }

Kakasa nti kino okiteekamu oluvannyuma lwa core Bootstrap CSS.

Okwongerako .navbar-fixed-bottomera oteekemu .containeroba .container-fluidku makkati ne pad navbar content.

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

Okwetaaga okuteekebwamu omubiri

Navbar eteredde ejja kubikkako ebirimu byo ebirala, okuggyako ng'oyongedde paddingwansi ku <body>. Gezaako empisa zo oba kozesa akatundu kaffe wansi. Amagezi: Nga bwekiba, navbar eri 50px obuwanvu.

body { padding-bottom: 70px; }

Kakasa nti kino okiteekamu oluvannyuma lwa core Bootstrap CSS.

Tonda navbar ey'obugazi obujjuvu egenda n'olupapula ng'oyongerako .navbar-static-topera ossaamu .containeroba .container-fluidokutuuka wakati ne pad navbar ebirimu.

Okwawukanako ne .navbar-fixed-*kiraasi, teweetaaga kukyusa padding yonna ku body.

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

Kyuusa endabika ya navbar ng'ossaako .navbar-inverse.

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

Ebikuta by’omugaati

Laga ekifo omuko oguliwo kati munda mu nsengeka y'okutambuliramu.

Ebyawula byongerwako mu CSS mu ngeri ey'otoma okuyita mu :beforene content.

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

Okuwandiika empapula

Waayo enkolagana z’okulaga empapula z’omukutu gwo oba pulogulaamu yo n’ekitundu ky’okukuba empapula eziwera, oba eky’okulaga empapula ennyangu .

Okuwandiika empapula okusookerwako

Simple pagination inspired by Rdio, kirungi nnyo ku apps n'ebivudde mu kunoonyereza. Bbulooka ennene nzibu okusubwa, nnyangu okulinnyisibwa, era egaba ebifo ebinene eby’okunyiga.

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

Okuwandiika akabonero ku kitundu ky’okuwandiika empapula

Ekitundu ky’okuwandiika empapula kisaana okuzingibwa mu <nav>elementi okukizuula ng’ekitundu eky’okutambuliramu okulaba abasomi ku screen ne tekinologiya omulala ayamba. Okugatta ku ekyo, nga omuko bwe guyinza okuba n’ebitundu ebisukka mu kimu eby’okutambula ng’ebyo edda (nga okutambula okusookerwako mu mutwe, oba okutambulira ku bbali), kirungi okuwa ennyonyola aria-labelku <nav>ekyo ekiraga ekigendererwa kyagwo. Okugeza, singa ekitundu ky’okuwandiika empapula kikozesebwa okutambula wakati w’ekibinja ky’ebivudde mu kunoonyereza, akabonero akatuufu kayinza okuba aria-label="Search results pages".

Embeera ezilema n’ezikola

Links zisobola okukyusibwa okusinziira ku mbeera ez’enjawulo. Kozesa .disabledku links ezitayinza kunyiga era .activeokulaga omuko oguliwo kati.

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

Tukuwa amagezi nti owanyisiganya ennanga ezikola oba ezilema ku <span>, oba okulekawo ennanga mu mbeera y'obusaale obuyise/obuddako, okuggyawo enkola y'okunyiga ng'osigaza emisono gy'ogenderera.

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

Okugerageranya obunene

Fancy empapula ennene oba entono? Okwongerako .pagination-lgoba .pagination-smokufuna sayizi endala.

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

Omukozi wa Pager

Enkolagana ez'amangu ez'emabega n'eziddako ez'okussa mu nkola empapula ennyangu n'obubonero obw'ekitangaala n'emisono. Kirungi nnyo ku mikutu egyangu nga blogs oba magazines.

Ekyokulabirako ekisookerwako

Nga bwekiba, pager eteeka wakati enkolagana.

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

Enkolagana ezikwatagana

Ekirala, osobola okulaganya buli link ku mabbali:

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

Embeera ebalema ey'okwesalirawo

Pager links era zikozesa general .disabledutility class okuva ku 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>

Eky'okulabirako

Ekyokulabirako omutwe Omupya

<h3>Example heading <span class="label label-default">New</span></h3>

Enjawulo eziriwo

Okwongerako ekimu ku bibinja by’abakyusa ebyogeddwako wansi okukyusa endabika y’akabonero.

Default Primary Obuwanguzi Info Okulabula Obulabe

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

Olina ttani z’ebiwandiiko?

Ebizibu by’okuvvuunula bisobola okuvaamu ng’olina amakumi g’ebiwandiiko ebiri mu layini munda mu kibya ekifunda, nga buli kimu kirimu inline-blockekintu kyakyo (nga akabonero). Engeri y'okwetoloola kino kwe kuteekawo display: inline-block;. Okumanya ensonga n'ekyokulabirako, laba #13219 .

Kyangu okulaga ebintu ebipya oba ebitasomeddwa ng’oyongerako a <span class="badge">ku links, Bootstrap navs, n’ebirala.

Inbox42.

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

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

Okwegwa

Bwe waba tewali bintu bipya oba ebitasomeddwa, badge zijja kumala kugwa (nga ziyita mu CSS's :emptyselector) kasita tewali birimu munda.

Okukwatagana kwa cross-browser

Badge tezijja kwegwa mu Internet Explorer 8 kubanga ebulwa obuwagizi eri :emptyselector.

Ekwatagana n'embeera za nav ezikola

Emisono egyazimbibwamu girimu okuteeka badge mu active states mu pill navigations.

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

Ekitundu ekizitowa, ekikyukakyuka ekiyinza okugaziya ekifo kyonna eky’okulaba okulaga ebikulu ku mukutu gwo.

Mwasuze mutya ensi!

Kino kitundu kya muzira eky’angu, ekitundu eky’omulembe eky’omu jumbotron eky’okuyita okufaayo okw’enjawulo ku birimu oba amawulire agalaga.

Manya ebisingawo

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

Okufuula jumbotron obugazi obujjuvu, era nga tewali nsonda zeetooloovu, giteeke ebweru wa .containers zonna ate mu kifo ky’ekyo osseeko .containermunda.

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

Ekisusunku eky’enjawulo eky’okuteeka h1mu kifo ekituufu n’okugabanya ebitundu by’ebirimu ku lupapula. Kiyinza okukozesa h1's default smallelement, awamu n'ebitundu ebirala ebisinga obungi (n'emisono egy'enjawulo).

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

Gaziya enkola ya Bootstrap eya grid n'ekitundu ky'ebifaananyi ebitonotono okusobola okwanguyirwa okulaga grids z'ebifaananyi, vidiyo, ebiwandiiko, n'ebirala.

Bw’oba onoonya ennyanjula eringa eya Pinterest ey’ebifaananyi ebitonotono eby’obuwanvu n’/oba obugazi obw’enjawulo, ojja kwetaaga okukozesa ekintu eky’okusatu nga Masonry , Isotope , oba Salvattore .

Ekyokulabirako ekisookerwako

Nga bwekiba, ebifaananyi ebitonotono ebya Bootstrap bikoleddwa okulaga ebifaananyi ebiyungiddwa nga biriko akabonero akatono aketaagisa.

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

Ebirimu eby’enjawulo

Nga olina akatono ak’okussaako akabonero ak’enjawulo, kisoboka okwongerako ekika kyonna eky’ebirimu ebya HTML ng’emitwe, obutundu, oba obutambi mu bifaananyi ebitonotono.

Ekiwandiiko ekitonotono

Cras justo odio, dapibus ac facilisis mu, egestas eget quam. Donec id elit etali ya mi porta gravida ku eget metus. Nullam id dolor id nibh ebidduka ebidduka ut id elit.

Eppeesa Eppeesa

Ekiwandiiko ekitonotono

Cras justo odio, dapibus ac facilisis mu, egestas eget quam. Donec id elit etali ya mi porta gravida ku eget metus. Nullam id dolor id nibh ebidduka ebidduka ut id elit.

Eppeesa Eppeesa

Ekiwandiiko ekitonotono

Cras justo odio, dapibus ac facilisis mu, egestas eget quam. Donec id elit etali ya mi porta gravida ku eget metus. Nullam id dolor id nibh ebidduka ebidduka ut id elit.

Eppeesa Eppeesa

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

Okuwa obubaka obukwata ku nsonga ku bikolwa eby’abakozesa ebya bulijjo n’obubaka obutonotono obuliwo era obukyukakyuka obw’okulabula.

Eby’okulabirako

Zinga ekiwandiiko kyonna ne bbaatuuni y'okugoba ey'okwesalirawo mu .alertn'ekimu ku kiraasi ennya ez'ensonga (okugeza, .alert-success) olw'obubaka obusookerwako obw'okulabula.

Tewali kiraasi esookerwako

Okulabula tekulina kiraasi za bulijjo, kiraasi za base ne modifier zokka. Okulabula okw'enzirugavu okusookerwako tekukola makulu mangi, kale olina okulaga ekika ng'oyita mu kiraasi y'ensonga. Londa okuva mu buwanguzi, info, okulabula, oba akabi.

Gyebaleko! Osoma bulungi obubaka buno obukulu obw’okulabula.

Emitwe gigulumivu! Alert eno yeetaaga attention yo, naye si super important.

Okulabula! Better check yourself, tolabika bulungi nnyo.

Oh snap! Kyusa ebintu ebitonotono waggulu ogezeeko okuddamu okuleeta.

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

Okulabula okugobwa

Zimba ku kulabula kwonna ng’ossaako .alert-dismissiblebbaatuuni ey’okwesalirawo n’okuggalawo.

Yeetaaga JavaScript okulabula plugin

Okusobola okukola mu bujjuvu, okulabula okugobwa, olina okukozesa okulabula JavaScript plugin .

Okulabula! Better check yourself, tolabika bulungi nnyo.

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

Kakasa nti enneeyisa entuufu mu byuma byonna

Kakasa nti okozesa <button>elementi n'ekintu kya data-dismiss="alert"data.

Enkolagana mu kulabula

Kozesa ekibiina .alert-linkky'omugaso okuwa amangu enkolagana za langi ezikwatagana munda mu kulabula kwonna.

Gyebaleko! Osoma bulungi obubaka buno obukulu obw'okulabula .

Emitwe gigulumivu! This alert needs your attention , naye si super kikulu.

Okulabula! Better check yourself, tolabika bulungi nnyo .

Oh snap! Kyusa ebintu ebitonotono waggulu ogezeeko okuddamu okuleeta.

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

Okuwa endowooza ez’omulembe ku nkulaakulana y’entambula y’emirimu oba ekikolwa n’embaawo z’enkulaakulana ennyangu naye nga zikyukakyuka.

Okukwatagana kwa cross-browser

Progress bars zikozesa enkyukakyuka za CSS3 ne animations okutuuka ku bimu ku bikolwa byabwe. Ebintu bino tebiyambibwa mu Internet Explorer 9 ne wansi oba mu nkyusa za Firefox enkadde. Opera 12 tewagira animations.

Enkola y'obukuumi bw'ebirimu (CSP) okukwatagana

Singa omukutu gwo gulina Enkola y’Obukuumi bw’Ebirimu (CSP) etakkiriza , style-src 'unsafe-inline'olwo tojja kusobola kukozesa bikozesebwa mu layini styleokuteekawo obugazi bw’ebbaala y’enkulaakulana nga bwe kiragibwa mu byokulabirako byaffe wansi. Enkola endala ez’okuteekawo obugazi obukwatagana ne CSP enkakali mulimu okukozesa JavaScript entono ey’ennono (eteekawo element.style.width) oba okukozesa kiraasi za CSS ez’ennono.

Ekyokulabirako ekikulu

Ebbaala y'enkulaakulana eya bulijjo.

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

Nga eriko akabonero

Ggyawo ekibiina kya <span>with .sr-onlyokuva munda mu bbaala y'enkulaakulana okulaga ebitundu ku kikumi ebirabika.

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>

Okukakasa nti ekiwandiiko ky’akabonero kisigala nga kisoma ne ku bitundu ebitono ku buli kikumi, lowooza ku ky’okugattako a min-widthku bbaala y’enkulaakulana.

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>

Ebintu ebirala ebiyinza okukozesebwa mu mbeera

Ebbaala z’enkulaakulana zikozesa ezimu ku bbaatuuni y’emu ne kiraasi z’okulabula ku sitayiro ezitakyukakyuka.

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

Emisono egy’enjawulo

Akozesa gradient okukola striped effect. Tekiri mu IE9 ne wansi.

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

Ebifaananyi ebirina obulamu

Okwongerako .activeku okusobola .progress-bar-stripedokuwangaaza emisono okuva ku ddyo okudda ku kkono. Tekiri mu IE9 ne wansi.

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

Ebitundiddwa

Teeka ebbaala eziwera mu kimu .progressokuzituuma.

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

Emisono gy’ebintu ebitali bimu egy’okuzimba ebika by’ebitundu eby’enjawulo (nga ebigambo bya blog, Tweets, n’ebirala) ebirimu ekifaananyi ekiteekeddwa ku kkono oba ku ddyo ku mabbali g’ebirimu eby’ebiwandiiko.

Emikutu egy’enjawulo

Omukutu ogusookerwako gulaga ekintu ky'emikutu (ebifaananyi, vidiyo, amaloboozi) ku kkono oba ku ddyo w'ekiziyiza ekirimu.

Omutwe gw'emikutu gy'amawulire

Cras batuula amet nibh libero, mu gravida nulla. Nulla vel metus scelerisque ante solicitudin ekintu ekitali kya bulijjo. Cras purus odio, ekisenge ekiyitibwa vestibulum mu vulputate ku, ekiwuka ekiyitibwa tempus viverra turpis. Fusce condimentum nunc ac nisi ekitundu ky’omubiri ekiyitibwa vulputate fringilla. Donec lacinia congue felis mu kitundu ekiyitibwa faucibus.

Omutwe gw'emikutu gy'amawulire

Cras batuula amet nibh libero, mu gravida nulla. Nulla vel metus scelerisque ante solicitudin ekintu ekitali kya bulijjo. Cras purus odio, ekisenge ekiyitibwa vestibulum mu vulputate ku, ekiwuka ekiyitibwa tempus viverra turpis. Fusce condimentum nunc ac nisi ekitundu ky’omubiri ekiyitibwa vulputate fringilla. Donec lacinia congue felis mu kitundu ekiyitibwa faucibus.

Omutwe gw'emikutu gy'amawulire oguteekeddwa mu kiyumba

Cras batuula amet nibh libero, mu gravida nulla. Nulla vel metus scelerisque ante solicitudin ekintu ekitali kya bulijjo. Cras purus odio, ekisenge ekiyitibwa vestibulum mu vulputate ku, ekiwuka ekiyitibwa tempus viverra turpis. Fusce condimentum nunc ac nisi ekitundu ky’omubiri ekiyitibwa vulputate fringilla. Donec lacinia congue felis mu kitundu ekiyitibwa faucibus.

Omutwe gw'emikutu gy'amawulire

Cras batuula amet nibh libero, mu gravida nulla. Nulla vel metus scelerisque ante solicitudin ekintu ekitali kya bulijjo. Cras purus odio, ekisenge ekiyitibwa vestibulum mu vulputate ku, ekiwuka ekiyitibwa tempus viverra turpis.

Omutwe gw'emikutu gy'amawulire

Cras batuula amet nibh libero, mu gravida nulla. Nulla vel metus scelerisque ante solicitudin ekintu ekitali kya bulijjo. Cras purus odio, ekisenge ekiyitibwa vestibulum mu vulputate ku, ekiwuka ekiyitibwa 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>

Ebika .pull-leftera .pull-rightnabyo biriwo era emabegako byakozesebwanga ng'ekitundu ky'ekitundu ky'emikutu, naye tebikozesebwa olw'okukozesa okwo okuva ku v3.3.0. Ziri nga zenkana .media-leftne .media-right, okuggyako nti .media-rightzirina okuteekebwa oluvannyuma lwa .media-bodymu html.

Okukwataganya emikutu gy’amawulire

Ebifaananyi oba emikutu emirala giyinza okukwatagana waggulu, wakati oba wansi. Ekisookerwako kikwatagana waggulu.

Emikutu egy’enjawulo egy’oku ntikko

Cras batuula amet nibh libero, mu gravida nulla. Nulla vel metus scelerisque ante solicitudin ekintu ekitali kya bulijjo. Cras purus odio, ekisenge ekiyitibwa vestibulum mu vulputate ku, ekiwuka ekiyitibwa tempus viverra turpis. Fusce condimentum nunc ac nisi ekitundu ky’omubiri ekiyitibwa vulputate fringilla. Donec lacinia congue felis mu kitundu ekiyitibwa faucibus.

Donec sed odio dui nga bwe kiri. Nullam quis risus eget ekikuta ky’omusajja eky’okwewunda vel eu leo. Cum sociis natoque penatibus ne magnis dis parturient montes, nascetur okusekererwa mus.

Emikutu gy’amawulire egy’okukwatagana wakati

Cras batuula amet nibh libero, mu gravida nulla. Nulla vel metus scelerisque ante solicitudin ekintu ekitali kya bulijjo. Cras purus odio, ekisenge ekiyitibwa vestibulum mu vulputate ku, ekiwuka ekiyitibwa tempus viverra turpis. Fusce condimentum nunc ac nisi ekitundu ky’omubiri ekiyitibwa vulputate fringilla. Donec lacinia congue felis mu kitundu ekiyitibwa faucibus.

Donec sed odio dui nga bwe kiri. Nullam quis risus eget ekikuta ky’omusajja eky’okwewunda vel eu leo. Cum sociis natoque penatibus ne magnis dis parturient montes, nascetur okusekererwa mus.

Emikutu gy’amawulire egyali gikwatagana wansi

Cras batuula amet nibh libero, mu gravida nulla. Nulla vel metus scelerisque ante solicitudin ekintu ekitali kya bulijjo. Cras purus odio, ekisenge ekiyitibwa vestibulum mu vulputate ku, ekiwuka ekiyitibwa tempus viverra turpis. Fusce condimentum nunc ac nisi ekitundu ky’omubiri ekiyitibwa vulputate fringilla. Donec lacinia congue felis mu kitundu ekiyitibwa faucibus.

Donec sed odio dui nga bwe kiri. Nullam quis risus eget ekikuta ky’omusajja eky’okwewunda vel eu leo. Cum sociis natoque penatibus ne magnis dis parturient montes, nascetur okusekererwa 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>

Olukalala lw'emikutu gy'amawulire

Nga olina akatono ak'okussaako akabonero ak'enjawulo, osobola okukozesa emikutu munda mu lukalala (eky'omugaso eri emiguwa gy'okuteesa oba enkalala z'ebiwandiiko).

Omutwe gw'emikutu gy'amawulire

Cras batuula amet nibh libero, mu gravida nulla. Nulla vel metus scelerisque ante solicitudin ekintu ekitali kya bulijjo. Cras purus odio, ekisenge ekiyitibwa vestibulum mu vulputate ku, ekiwuka ekiyitibwa tempus viverra turpis.

Omutwe gw'emikutu gy'amawulire oguteekeddwa mu kiyumba
Cras batuula amet nibh libero, mu gravida nulla. Nulla vel metus scelerisque ante solicitudin ekintu ekitali kya bulijjo. Cras purus odio, ekisenge ekiyitibwa vestibulum mu vulputate ku, ekiwuka ekiyitibwa tempus viverra turpis.

Omutwe gw'emikutu gy'amawulire oguteekeddwa mu kiyumba
Cras batuula amet nibh libero, mu gravida nulla. Nulla vel metus scelerisque ante solicitudin ekintu ekitali kya bulijjo. Cras purus odio, ekisenge ekiyitibwa vestibulum mu vulputate ku, ekiwuka ekiyitibwa tempus viverra turpis.

Omutwe gw'emikutu gy'amawulire oguteekeddwa mu kiyumba
Cras batuula amet nibh libero, mu gravida nulla. Nulla vel metus scelerisque ante solicitudin ekintu ekitali kya bulijjo. Cras purus odio, ekisenge ekiyitibwa vestibulum mu vulputate ku, ekiwuka ekiyitibwa 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>

Ebibinja by’enkalala kitundu ekikyukakyuka era eky’amaanyi eky’okulaga si nkalala ennyangu zokka ez’ebintu, naye enzibu ezirina ebirimu eby’enjawulo.

Ekyokulabirako ekikulu

Ekibinja ky’olukalala ekisinga obukulu kiba lukalala lwokka olutali lutegekeddwa nga lulimu ebintu by’olukalala, ne kiraasi entuufu. Zimba ku kyo n'eby'okulonda ebiddako, oba CSS yo nga bwe kyetaagisa.

Cras justo odio nga bwe kiri
Dapibus ac ebikozesebwa mu
Morbi leo ekika kya risus
Porta ac consectetur eky’oku ntikko
Ekibumbe ekiyitibwa Vestibulum ku 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>

Baagi za Baagi

Okwongera ekitundu kya badges ku kintu kyonna eky'ekibinja ky'olukalala era kijja kuteekebwa ku ddyo mu ngeri ey'otoma.

14. 14Cras justo odio nga bwe kiri
2.Dapibus ac ebikozesebwa mu
1.Morbi leo ekika kya risus

<ul class="list-group">
  <li class="list-group-item">
    <span class="badge">14</span>
    Cras justo odio
  </li>
</ul>

Ebintu ebiyungiddwa

Linkify list group items nga okozesa anchor tags mu kifo kya list items (ekyo era kitegeeza omuzadde <div>mu kifo kya an <ul>). Tekyetaagisa bazadde ssekinnoomu okwetoloola buli elementi.

Cras justo odio nga bwe kiri Dapibus ac ebikozesebwa mu Morbi leo ekika kya risus Porta ac consectetur eky’oku ntikko Ekibumbe ekiyitibwa Vestibulum ku 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>

Ebintu bya button

Ebintu by’ekibinja ky’olukalala biyinza okuba obutambi mu kifo ky’ebintu eby’olukalala (ekyo nakyo kitegeeza omuzadde <div>mu kifo ky’ekyo <ul>). Tekyetaagisa bazadde ssekinnoomu okwetoloola buli elementi. Tokozesa .btnkiraasi za mutindo wano.

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

Ebintu ebilema

Okwongerako .disabledku a .list-group-itemokugifuula enzirugavu okulabika ng’eremeddwa.

Cras justo odio nga bwe kiri Dapibus ac ebikozesebwa mu Morbi leo ekika kya risus Porta ac consectetur eky’oku ntikko Ekibumbe ekiyitibwa Vestibulum ku 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>

Ebisulo ebikwata ku mbeera

Kozesa kiraasi z'ensonga okuwandiika sitayiro ebintu, ebisookerwako oba ebiyungiddwa. Mulimu ne .activegavumenti.

Dapibus ac ebikozesebwa mu
Cras tuula amet nibh libero
Porta ac consectetur eky’oku ntikko
Ekibumbe ekiyitibwa Vestibulum ku eros

Dapibus ac ebikozesebwa mu Cras tuula amet nibh libero Porta ac consectetur eky’oku ntikko Ekibumbe ekiyitibwa Vestibulum ku 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>

Ebirimu eby’enjawulo

Okwongerako kumpi HTML yonna munda, ne ku bibinja by’olukalala ebiyungiddwa nga kino wansi.

Laga omutwe gw’ekintu ky’ekibinja

Donec id elit etali ya mi porta gravida ku eget metus. Ebimera ebiyitibwa Maecenas sed diam bivaamu ebimera ebiyitibwa risus varius blandit.

Laga omutwe gw’ekintu ky’ekibinja

Donec id elit etali ya mi porta gravida ku eget metus. Ebimera ebiyitibwa Maecenas sed diam bivaamu ebimera ebiyitibwa risus varius blandit.

Laga omutwe gw’ekintu ky’ekibinja

Donec id elit etali ya mi porta gravida ku eget metus. Ebimera ebiyitibwa Maecenas sed diam bivaamu ebimera ebiyitibwa 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>

Wadde nga bulijjo tekikwetaagisa, oluusi weetaaga okuteeka DOM yo mu kibokisi. Ku mbeera ezo, gezaako ekitundu ky’ekipande.

Ekyokulabirako ekikulu

By default, kyonna .panelekikola kwe kusiiga border ezimu ezisookerwako ne padding okubeeramu ebimu ku birimu.

Ekyokulabirako ky’ekipande ekikulu

<div class="panel panel-default">
  <div class="panel-body">
    Basic panel example
  </div>
</div>

Panel nga eriko omutwe

Kyangu okwongerako ekintu ekirimu omutwe ku kipande kyo nga olina .panel-heading. Oyinza n'okussaamu yonna <h1>- <h6>n'ekibiina .panel-titleokugattako omutwe ogwategekebwa nga tegunnabaawo. Naye, obunene bw'empandiika za <h1>- <h6>bukyusibwamu .panel-heading.

Okusobola okukuba langi entuufu ey’enkolagana, kakasa nti oteeka enkolagana mu mitwe munda mu .panel-title.

Omutwe gwa Panel nga teguliiko mutwe

Ebirimu mu kipande

Omutwe gwa Panel

Ebirimu mu kipande

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

Zinga obutambi oba ekiwandiiko ekyokubiri mu .panel-footer. Weetegereze nti wansi w’ekipande tebisikira langi na nsalo nga okozesa enkyukakyuka z’embeera kuba tezitegeeza kubeera mu maaso.

Ebirimu mu kipande

Ekiwandiiko ekiri wansi ku kipande

<div class="panel panel-default">
  <div class="panel-body">
    Panel content
  </div>
  <div class="panel-footer">Panel footer</div>
</div>

Ebintu ebirala ebiyinza okukozesebwa mu mbeera

Okufaananako ebitundu ebirala, kyangu okufuula ekipande okuba eky’amakulu eri embeera entongole ng’ogattako ekimu ku bibinja by’embeera y’embeera.

Omutwe gwa Panel

Ebirimu mu kipande

Omutwe gwa Panel

Ebirimu mu kipande

Omutwe gwa Panel

Ebirimu mu kipande

Omutwe gwa Panel

Ebirimu mu kipande

Omutwe gwa Panel

Ebirimu mu kipande

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

Nga balina emmeeza

Okwongerako ekintu kyonna ekitaliiko nsalosalo .tablemunda mu kipande okufuna dizayini etaliimu buzibu. Bwe wabaawo .panel-body, twongerako ensalosalo ey’enjawulo waggulu ku mmeeza olw’okwawula.

Omutwe gwa Panel

Ebimu ku birimu ku kipande ebisookerwako wano. Nulla vitae elit libero, eddagala eriyitibwa pharetra augue. Aenean lacinia bibendum ekika ky’ekimera ekiyitibwa Aenean lacinia bibendum ekitaliiko kiramu. Aenean eu leo quam. Pellentesque ornare sem lacinia ekisenge ky’omu lubuto ekiyitibwa vestibulum. Nullam id dolor id nibh ebidduka ebidduka ut id elit.

# .	Erinnya erisooka	Erinnya erisemba	Erinnya ly'omukozesa
1.	Mark	Otto bwe yabadde	@mdo
2.	Yakobo	Thornton nga bwe kiri	@obunene
3.	Larry	Ekinyonyi	@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>

Singa tewabaawo mubiri gwa kipande, ekitundu kiva ku mutwe gwa kipande okudda ku mmeeza awatali kutaataaganyizibwa.

Omutwe gwa Panel

# .	Erinnya erisooka	Erinnya erisemba	Erinnya ly'omukozesa
1.	Mark	Otto bwe yabadde	@mdo
2.	Yakobo	Thornton nga bwe kiri	@obunene
3.	Larry	Ekinyonyi	@twitter

<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>

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

Nga balina ebibinja by’olukalala

Kyangu okussaamu ebibinja by’olukalala olw’obugazi obujjuvu munda mu kipande kyonna.

Omutwe gwa Panel

Ebimu ku birimu ku kipande ebisookerwako wano. Nulla vitae elit libero, eddagala eriyitibwa pharetra augue. Aenean lacinia bibendum ekika ky’ekimera ekiyitibwa Aenean lacinia bibendum ekitaliiko kiramu. Aenean eu leo quam. Pellentesque ornare sem lacinia ekisenge ky’omu lubuto ekiyitibwa vestibulum. Nullam id dolor id nibh ebidduka ebidduka ut id elit.

Cras justo odio nga bwe kiri
Dapibus ac ebikozesebwa mu
Morbi leo ekika kya risus
Porta ac consectetur eky’oku ntikko
Ekibumbe ekiyitibwa Vestibulum ku 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>

Kiriza browsers okuzuula ebipimo bya vidiyo oba slideshow okusinziira ku bugazi bwa bulooka yaabwe erimu nga bakola omugerageranyo ogw’omunda ogujja okugerageranya obulungi ku kyuma kyonna.

Amateeka gakozesebwa butereevu ku <iframe>, <embed>, <video>, ne <object>elementi; okusalawo kozesa ekibiina ky'abazzukulu eky'olwatu .embed-responsive-itemng'oyagala okukwataganya sitayiro y'ebintu ebirala.

Pro-Amagezi! Teweetaaga kussaamu frameborder="0"mu <iframe>s yo nga bwe tukusukkulumya ekyo ku lulwo.

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

Default bulungi

Kozesa oluzzi nga effect ennyangu ku elementi okugiwa inset effect.

Laba ndi mu luzzi!

<div class="well">...</div>

Ebisulo eby’okwesalirawo

Fuga padding n'enkoona ezeetooloovu nga zirina ebika bibiri eby'okukyusakyusa eby'okwesalirawo.

Laba ndi mu luzzi olunene!

<div class="well well-lg">...</div>

Laba ndi mu luzzi olutono!

<div class="well well-sm">...</div>

Ebitundu ebikola omubiri

Ebiwandiiko ebiyitibwa Glyphicons

Glyphs eziriwo

Engeri y’okukozesaamu

Totabula na bitundu birala

Okukozesebwa kwokka ku elementi etaliimu kintu kyonna

Okukyusa ekifo ky'empandiika y'akabonero

Ebifaananyi ebituukirirwa

Eby’okulabirako

Ebintu ebigwa wansi

Eky'okulabirako

Okukwatagana

Kiyinza okwetaagisa okuteekebwa mu kifo ekirala

Okulaganya .pull-rightokutakozesebwa

Emitwe gy’omutwe

Omugabanya

Ebintu bya menu ebiremeseddwa

Ebibinja bya button

Tooltips & popovers mu bibinja bya button byetaaga okuteekawo okw'enjawulo

Kakasa nti kituufu roleera oweeyo akabonero

Ekyokulabirako ekikulu

Omuko gw’ebikozesebwa ogwa button

Okugerageranya obunene

Okuzimba ebisu

Enkyukakyuka eyeesimbye

Ebibinja bya button ebituufu

Okukwata ensalo

IE8 n’ensalo

Nga balina <a>elementi

Links ezikola nga buttons

Nga balina <button>elementi

Ebintu ebigwa ku button

Okwesigamira ku plugin

Ebiwandiiko ebikka ku bbaatuuni emu

Split button ezigwa wansi

Okugerageranya obunene

Enkyukakyuka mu dropup

Ebibinja ebiyingiza

Ebiwandiiko <input>s byokka

Tooltips & popovers mu bibinja by'okuyingiza byetaaga okuteekawo okw'enjawulo

Totabula na bitundu birala

Bulijjo yongera ku bubonero

Ekyokulabirako ekikulu

Okugerageranya obunene

Checkboxes ne radio addons

Ebigattibwako ku button

Buttons eziriko ebigwa wansi

Butaamu eziriko ebitundutundu

Butaamu eziwera

Navs

Okukozesa navs ku tab panels kyetaagisa JavaScript tabs plugin

Fuula navs ezikozesebwa nga navigation ezituukirirwa

Ebitabo ebiyitibwa Tabs

Empeke

Kituufu

Safari ne responsive justified navs

Enkolagana ezilemeddwa

Enkola ya link tekoseddwa

Okukozesa ebifo ebikka wansi

Taabu eziriko ebigwa wansi

Empeke eziriko ebitonnya

Navbar

Navbar esookerwako

Ebirimu ebijjudde

Yeetaaga enkola ya JavaScript

Okukyusa ekifo eky'okumenya ekya mobile navbar ekyagwa

Fuula navbars ezituukirirwa

Ekifaananyi ky’ekintu

Ffoomu

Okulabula kw’ebyuma ebikozesebwa ku ssimu

Bulijjo yongera ku bubonero

Ebikondo ebiyitibwa Buttons

Enkozesa eyeetongodde ku mbeera

Okuwandiika obubaka

Enkolagana ezitali za nav

Okusengeka ebitundu

Okukwataganya ebitundu ebingi mu ddyo

Etereezeddwa ku ntikko

Okwetaaga okuteekebwamu omubiri

Etereezeddwa wansi

Okulaganya `.pull-right`okutakozesebwa

Kakasa nti kituufu `role`era oweeyo akabonero

Nga balina `<a>`elementi

Nga balina `<button>`elementi

Ebiwandiiko `<input>`s byokka