Omusipi gwa Bootstrap

Omusingi gwa CSS

Ebintu bya HTML ebikulu ebikoleddwa mu sitayiro era ne binywezebwa n’ebika ebigaziyizibwa.

Emitwe gigulumivu! Docs zino za v2.3.2, ezitakyawagirwa mu butongole. Laba enkyusa ya Bootstrap eyasembyeyo!

Okuwandiika ebitabo

Emitwe

Emitwe gyonna egya HTML, <h1>okuyita <h6>mu giriwo.

h1. Omutwe 1

h2. Omutwe 2

h3. Omutwe 3

h4. Omutwe 4

h5. Omutwe 5
h6. Omutwe 6

Kopi y’omubiri

Bootstrap's global default font-sizeeri 14px , nga a line-heightya 20px . Kino kikozesebwa ku <body>n’ennyiriri zonna. Okugatta ku ekyo, <p>(ennyiriri) zifuna margin eya wansi ey’ekitundu kya line-height yaabwe (10px nga bwe kibadde).

Nullam quis risus eget ekikuta ky’omusajja eky’okwewunda vel eu leo. Cum sociis natoque penatibus ne magnis dis parturient montes, nascetur okusekererwa mus. Nullam id dolor id nibh ebidduka ebidduka ebidduka.

Cum sociis natoque penatibus ne magnis dis parturient montes, nascetur okusekererwa mus. Donec ullamcorper nulla etali ya metus omusuubuzi fringilla. Duis mollis, est non commodo luctus, nisi erat ekika ky’omugongo, eget lacinia odio sem nec elit. Donec ullamcorper nulla etali ya metus omusuubuzi fringilla.

Maecenas sed diam eget risus varius blandit okutuula ate nga si magna. Donec id elit etali ya mi porta gravida ku eget metus. Duis mollis, est non commodo luctus, nisi erat ekika ky’omugongo, eget lacinia odio sem nec elit.

<p> ... </p> nga bwe kiri

Kopi y’omubiri gw’okukulembera

Akatundu kafuule ak’enjawulo ng’ogattako .lead.

Vivamus sagittis lacus vel augue laoreet ekika kya faucibus eky’okugula ebintu. Duis mollis, est etali ya bugagga.

<p ekibiina = "okukulembera" > ... </p>

Yazimbibwa ne Less

Minzaani y'okuwandiika yeesigamiziddwa ku nkyukakyuka bbiri eza LESS mu nkyukakyuka.less : @baseFontSizene @baseLineHeight. Ekisooka ye base font-size ekozesebwa wonna ate ekyokubiri ye base line-height. Tukozesa enkyukakyuka ezo n’okubala okumu okwangu okukola margins, paddings, ne line-heights ez’ekika kyaffe kyonna n’ebirala. Zikole era Bootstrap ekwatagana.

Okuggumiza

Kozesa ebigambo ebiggumiza ebya HTML ebisookerwako nga biriko sitayiro ezitazitowa.

<small>

Okuggya okuggumiza inline oba blocks z’ebiwandiiko, kozesa tag entono.

Layini eno ey’ebiwandiiko etegeeza okutwalibwa ng’ennukuta ennungi.

<p> <small> Layini eno ey'ekiwandiiko etegeeza okutwalibwa ng'ennukuta ennungi. </obutono> </p>

Okwekazza

Olw’okuggumiza ekitundu ky’ekiwandiiko nga kiriko font-weight esingako obuzito.

Ekitundu ky'ekiwandiiko kino wammanga kivvuunulwa ng'ekiwandiiko ekinene .

<strong> evvuunuddwa nga ekiwandiiko ekinene </strong>

Ennukuta eziyitibwa Italics

Olw’okuggumiza akatundu k’ekiwandiiko nga kiriko ennukuta ensirifu.

Ekitundu ky'ekiwandiiko kino wammanga kivvuunulwa nga ekiwandiiko ekiwandiikiddwa mu italic .

<em> evvuunuddwa nga ekiwandiiko ekiwandiikiddwa mu italic </em>

Emitwe waggulu!Wulira nga oli wa ddembe okukozesa <b>era <i>mu HTML5. <b>kigendereddwamu okulaga ebigambo oba ebisoko awatali kutuusa bukulu bwa kwongerako ate nga <i>kisinga kuba kya ddoboozi, ebigambo eby’ekikugu n’ebirala.

Ebika by’okulaganya

Kyangu okuddamu okusengeka ebiwandiiko ku bitundu ebirina ebika by’okusengeka ebiwandiiko.

Ebiwandiiko ebiteekeddwa ku kkono.

Ebiwandiiko ebiteekeddwa wakati.

Ebiwandiiko ebiteekeddwa ku ddyo.

  1. <p class = "text-left" > Ebiwandiiko ebiteekeddwa ku kkono. </p> 
  2. <p class = "text-center" > Ebiwandiiko ebiteekeddwa wakati . </p> 
  3. <p class = "text-right" > Ebiwandiiko ebiteekeddwa ku ddyo. </p>

Ebisulo by’okussa essira

Tuusa amakulu ng’oyita mu langi n’engalo ntono ez’okussa essira ku bibiina by’omugaso.

Fusce dapibus, tellus ac ekivuma commodo, okutulugunya mauris nibh.

Etiam porta sem omusajja omunene ennyo omuto.

Donec ullamcorper nulla etali ya metus omusuubuzi fringilla.

Aenean eu leo ​​quam. Okwewunda okw’ekika kya Pellentesque sem lacinia quam venenatis.

Duis mollis, est non commodo luctus, ekintu ekitali kya mugaso, ekiwuka ekiyitibwa porttitor ligula.

  1. <p ekibiina = "ekisirise" > Fusce dapibus, tellus ac ekivuma commodo, tortor mauris nibh. </p> 
  2. <p class = "okulabula-ekiwandiiko" > Etiam porta sem malesuada magna mollis euismod. </p> 
  3. <p class = "ekiwandiiko-ensobi" > Donec ullamcorper nulla etali ya metus auctor fringilla. </p> 
  4. <p class = "ekiwandiiko-amawulire" > Aenean eu leo ​​quam. Okwewunda okw’ekika kya Pellentesque sem lacinia quam venenatis. </p> 
  5. <p class = "obuwanguzi bw'ekiwandiiko" > Duis mollis, est etali ya commodo luxus, nisi erat porttitor ligula. </p>

Ebifupi ebifupi

Stylized implementation of HTML's <abbr>element for ebifupi n'enfunyiro okulaga enkyusa egaziyiziddwa ku hover. Ebifupi ebirina titleekintu birina ensalosalo eya wansi eriko ennukuta entangaavu n’akabonero k’obuyambi ku hover, okuwa ensonga endala ku hover.

<abbr>

Ku biwandiiko ebigaziyiziddwa ku long hover of an abbreviation, ssaamu titleattribute.

Enfunyiro y'ekigambo attribute ye attr .

<abbr omutwe = "ekintu" > attr </abbr>

<abbr class="initialism">

Okwongerako .initialismku kifupi okufuna font-size entono katono.

HTML kye kintu ekisinga obulungi okuva ku mugaati ogwasalibwa.

<abbr title = "Olulimi lw'okussaako akabonero k'ekiwandiiko ekisukkiridde" class = "okusooka" > HTML </abbr>

Endagiriro

Waayo ebikwata ku jjajja asinga okumpi oba omubiri gwonna ogw’omulimu gw’oyinza okutuukirira.

<address>

Kuuma ensengeka ng'omaliriza ennyiriri zonna ne <br>.

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890. Enkola y’okukozesa eddagala lino
Erinnya mu bujjuvu
[email protected] 
  1. <endagiriro>
  2.   <strong> Ekitongole kya Twitter, Inc. </strong><br>
  3.   795 Folsom Ave, Ekisenge 600 <br>
  4.   San Francisco, CA 94107 mu kibuga Kampala
  5.   <abbr omutwe = "Essimu" > P: </abbr> (123) 456-7890 
  6. </endagiriro>
  7.  
  8. <endagiriro>
  9.   <strong> Amannya mu bujjuvu </strong><br>
  10.   <a href = "mailto:#" > [email protected] </a> 
  11. </endagiriro>

Ebigambo ebiziyiza

Olw'okujuliza ebitundu by'ebirimu okuva mu nsibuko endala munda mu kiwandiiko kyo.

Ekiwandiiko ekisookerwako ekisookerwako

Zinga HTML<blockquote> yonna nga quote. Ku bigambo ebitereevu tusaba .<p>

Lorem ipsum dolor okutuula amet, okusengejja amasavu elit. Namba enzijuvu posuere erat a ante.

  1. <okuziyiza>
  2.   <p> Lorem ipsum dolor okutuula amet, okusengejja okusiiga elit. Namba enzijuvu posuere erat a ante. </p>
  3. </blockquote> nga bwe kiri

Blockquote eby'okulonda

Omusono n'ebirimu bikyuka olw'enjawulo ennyangu ku blockquote eya bulijjo.

Okutuuma ensibuko erinnya

Okwongerako <small>tag okuzuula ensibuko. Zinga erinnya ly'omulimu gw'ensibuko mu <cite>.

Lorem ipsum dolor okutuula amet, okusengejja amasavu elit. Namba enzijuvu posuere erat a ante.

Omuntu omututumufu mu Source Title 
  1. <okuziyiza>
  2.   <p> Lorem ipsum dolor okutuula amet, okusengejja okusiiga elit. Namba enzijuvu posuere erat a ante. </p>
  3.   <small> Omuntu omututumufu <cite title = "Omutwe gw'Ensibuko" > Omutwe gw'Ensibuko </cite></small> 
  4. </blockquote> nga bwe kiri

Okwolesebwa okulala

Kozesa .pull-rightku blockquote etengeddwa, etereezeddwa ku ddyo.

Lorem ipsum dolor okutuula amet, okusengejja amasavu elit. Namba enzijuvu posuere erat a ante.

Omuntu omututumufu mu Source Title 
  1. <blockquote class = "okusika-ku ddyo" > 
  2.   ...
  3. </blockquote> nga bwe kiri

Enkalala

Etalagirwa

Olukalala lw’ebintu ebirimu ensengeka etaliiko nsonga mu bulambulukufu.

  • Lorem ipsum dolor tuula amet
  • Consectetur okusiiga elit
  • Ennamba enzijuvu molestie lorem ku massa
  • Facilisis mu kikuta kya pretium nisl
  • Nulla volutpat aliquam omubisi gw’enjuki
    • Ekitundu ekiyitibwa Phasellus iaculis neque ekiyitibwa ekimera ekiyitibwa Phasellus
    • Purus sodales eddagala eriyitibwa ultricies
    • Ekiwandiiko ekiyitibwa Vestibulum laoreet portttitor sem
    • Ac tristique libero volutpat ku bwesigwa ku
  • Faucibus porta lacus eriko ekikuta ky’omubiri ekiyitibwa fringilla vel
  • Aenean okutuula amet erat nunc
  • Eget omuwala lorem
  1. <ul> nga bwe kiri
  2.   <li> ... </li> nga bwe kiri
  3. </ul>

Yalagirwa

Olukalala lw’ebintu omulagiriro mwe gukola mu bulambulukufu.

  1. Lorem ipsum dolor tuula amet
  2. Consectetur okusiiga elit
  3. Ennamba enzijuvu molestie lorem ku massa
  4. Facilisis mu kikuta kya pretium nisl
  5. Nulla volutpat aliquam omubisi gw’enjuki
  6. Faucibus porta lacus eriko ekikuta ky’omubiri ekiyitibwa fringilla vel
  7. Aenean okutuula amet erat nunc
  8. Eget omuwala lorem
  1. <ol> nga bwe kiri
  2.   <li> ... </li> nga bwe kiri
  3. </ol>

Etaliiko sitayiro

Ggyawo list-stylepadding eya bulijjo ne eya kkono ku bintu eby'olukalala (abaana ab'amangu bokka).

  • Lorem ipsum dolor tuula amet
  • Consectetur okusiiga elit
  • Ennamba enzijuvu molestie lorem ku massa
  • Facilisis mu kikuta kya pretium nisl
  • Nulla volutpat aliquam omubisi gw’enjuki
    • Ekitundu ekiyitibwa Phasellus iaculis neque ekiyitibwa ekimera ekiyitibwa Phasellus
    • Purus sodales eddagala eriyitibwa ultricies
    • Ekiwandiiko ekiyitibwa Vestibulum laoreet portttitor sem
    • Ac tristique libero volutpat ku bwesigwa ku
  • Faucibus porta lacus eriko ekikuta ky’omubiri ekiyitibwa fringilla vel
  • Aenean okutuula amet erat nunc
  • Eget omuwala lorem
  1. <ul class = "etaliiko sitayiro" > 
  2.   <li> ... </li> nga bwe kiri
  3. </ul>

Mu layini

Teeka ebintu byonna eby’olukalala ku layini emu nga olina inline-blockne padding ezimu ezitangaala.

  • Lorem ow’ekika kya ipsum
  • Ekitundu ekiyitibwa Phasellus iaculis ekiyitibwa ekitundu ekiyitibwa Phasellus
  • Nulla volutpat nga bwe kiri
  1. <ul class = "mu layini" > 
  2.   <li> ... </li> nga bwe kiri
  3. </ul>

Okunnyonnyola

Olukalala lw’ebigambo n’ennyonnyola ezikwatagana nabyo.

Enkalala z’ennyonnyola
Olukalala lw’ennyonnyola lutuukiridde okunnyonnyola ebigambo.
Euismod
Ensigo id ligula porta felis euismod ensigo eget lacinia odio sem nec elit.
Donec id elit etali ya mi porta gravida ku eget metus.
Malesuada eriko ensolo
Etiam porta sem omusajja omunene ennyo omuto. 
  1. <dl> nga bwe kiri
  2.   <dt> ... </dt> nga bwe kiri
  3.   <dd> ... </dd> nga bwe kiri
  4. </dl>

Ennyonyola ey’okwebungulula

Kola ebigambo n’ennyonnyola mu <dl>layini ku mabbali.

Enkalala z’ennyonnyola
Olukalala lw’ennyonnyola lutuukiridde okunnyonnyola ebigambo.
Euismod
Ensigo id ligula porta felis euismod ensigo eget lacinia odio sem nec elit.
Donec id elit etali ya mi porta gravida ku eget metus.
Malesuada eriko ensolo
Etiam porta sem omusajja omunene ennyo omuto.
Felis euismod ensigo eget lacinia
Fusce dapibus, tellus ac cursus commodo, tortor mauris ekizimbulukusa ekizimbulukusa, ut ekizimbulukusa masso justo okutuula amet risus. 
  1. <dl class = "dl-ekiwanvu" > 
  2.   <dt> ... </dt> nga bwe kiri
  3.   <dd> ... </dd> nga bwe kiri
  4. </dl>

Emitwe waggulu!Enkalala z'ennyonnyola ez'okwebungulula zijja kusalako ebigambo ebiwanvu ennyo okutuuka mu kutereeza ennyiriri eya kkono text-overflow. Mu viewports enfunda, zijja kukyuka okudda ku default stacked layout.

Koodi

Mu layini

Zinga ebitundutundu bya koodi ebiri mu layini ne <code>.

Okugeza, <section>erina okuzingibwa nga inline. 
  1. Okugeza , <koodi > & lt ; ekitundu & gt ;</ code > erina okuzingibwa nga mu layini .

Bbulooka enkulu

Kozesa <pre>ku layini eziwera eza koodi. Kakasa nti otolokako enkoona zonna mu koodi okusobola okulaga obulungi.

<p>Ekiwandiiko eky'okulabirako wano...</p>
  1. <pre>
  2.   <p>Ekiwandiiko eky'okulabirako wano...</p>
  3. </pre>

Emitwe waggulu!Kakasa nti okuuma code munda mu <pre>tags okumpi ne kkono nga bwe kisoboka; kijja kulaga tabu zonna.

Oyinza okugattako .pre-scrollablekiraasi ejja okuteekawo max-height ya 350px n'okuwa y-axis scrollbar.

Emmeeza

Emisono egy’enjawulo

Ku sitayiro enkulu —okupakinga ekitangaala n’okugabanya okw’okwebungulula kwokka —yongera ku kiraasi ey’omusingi .tableku yonna <table>.

# . Erinnya erisooka Erinnya erisemba Erinnya ly'omukozesa
1. Mark Otto bwe yabadde @mdo
2. Yakobo Thornton nga bwe kiri @obunene
3. Larry Ekinyonyi @twitter 
  1. < ekibiina ky'emmeeza = "emmeeza" > 
  2.   ...
  3. </emmeeza>

Ebisulo eby’okwesalirawo

Okwongerako kiraasi yonna ku zino wammanga ku kiraasi .tableey’omusingi.

.table-striped

Okwongera zebra-striping ku lunyiriri lwonna olw'emmeeza munda mu <tbody>via :nth-childCSS selector (tekiri mu IE7-8).

# . Erinnya erisooka Erinnya erisemba Erinnya ly'omukozesa
1. Mark Otto bwe yabadde @mdo
2. Yakobo Thornton nga bwe kiri @obunene
3. Larry Ekinyonyi @twitter 
  1. < ekibiina ky'emmeeza = "emmeeza eriko emisono" > 
  2.   ...
  3. </emmeeza>

.table-bordered

Ku mmeeza gattako ensalosalo n’enkoona ezeetooloovu.

# . Erinnya erisooka Erinnya erisemba Erinnya ly'omukozesa
1. Mark Otto bwe yabadde @mdo
Mark Otto bwe yabadde @getbootstrap nga bwe kiri
2. Yakobo Thornton nga bwe kiri @obunene
3. Larry Ekinyonyi @twitter 
  1. <table class = "emmeeza eriko ensalosalo" > 
  2.   ...
  3. </emmeeza>

.table-hover

Ssobozesa embeera ya hover ku nnyiriri z'emmeeza munda mu <tbody>.

# . Erinnya erisooka Erinnya erisemba Erinnya ly'omukozesa
1. Mark Otto bwe yabadde @mdo
2. Yakobo Thornton nga bwe kiri @obunene
3. Larry Ekinyonyi @twitter 
  1. < ekibiina ky'emmeeza = "emmeeza-hover" > 
  2.   ...
  3. </emmeeza>

.table-condensed

Afuula emmeeza okubeera ennyangu nga esala cell padding mu bitundu bibiri.

# . Erinnya erisooka Erinnya erisemba Erinnya ly'omukozesa
1. Mark Otto bwe yabadde @mdo
2. Yakobo Thornton nga bwe kiri @obunene
3. Larry Ekinyonyi @twitter 
  1. <emmeeza class = "emmeeza emmeeza-condensed" > 
  2.   ...
  3. </emmeeza>

Ebika by’ennyiriri eby’okwesalirawo

Kozesa kiraasi ezikwata ku nsonga okukuba langi ku nnyiriri z’emmeeza.

Essomo Okunnyonnyola
.success Kiraga ekikolwa ekituuse ku buwanguzi oba ekirungi.
.error Kiraga ekikolwa eky’akabi oba ekiyinza okuba ekibi.
.warning Kiraga okulabula okuyinza okwetaaga okufaayo.
.info Ekozesebwa nga eky'okuddako ku sitayiro ezisookerwako.
# . Ekyamaguzi Okusasula Kutwaliddwa Ennyimirira
1. TB - Buli mwezi 01/04/2012 nga bwe kiri Okukkiriza
2. TB - Buli mwezi 02/04/2012 nga bweri Yagaanyi
3. TB - Buli mwezi 03/04/2012 nga bwe kiri Tekinagwa
4. TB - Buli mwezi 04/04/2012 nga bwe kiri Kuba mu ssimu okukakasa 
  1. ...
  2.   < tr class = "obuwanguzi" >
  3.     <td> 1 < /td> nga bwe kiri
  4.     <td>TB - Buli mwezi</ td >
  5.     <td> 01 / 04 / 2012 < /td>
  6.     <td>Ekikkiriziddwa</ td >
  7.   </ tr >
  8. ...

Obubonero bw'emmeeza obuwagirwa

Olukalala lw'ebintu bya HTML eby'emmeeza ebiwagirwa n'engeri gye birina okukozesebwa.

Erinnya Okunnyonnyola
<table> Okuzinga elementi okulaga data mu nkola ya tabular
<thead> Ekintu kya konteyina eky'ennyiriri z'omutwe gw'emmeeza ( <tr>) okuwandiika empagi z'emmeeza
<tbody> Ekintu ekitereka eky’ennyiriri z’emmeeza ( <tr>) mu mubiri gw’emmeeza
<tr> Ekintu ekitereka eky'ekibinja ky'obutoffaali bw'emmeeza ( <td>oba <th>) ekirabika ku lunyiriri lumu
<td> Akasenge k'emmeeza akasookerwako
<th> Akasengejja k’emmeeza ak’enjawulo ku biwandiiko by’ennyiriri (oba olunyiriri, okusinziira ku bunene n’okuteekebwa).
<caption> Ennyonyola oba mu bufunze ebyo emmeeza by’ekwata naddala eby’omugaso eri abasomi ku ssirini 
  1. <emmeeza>
  2.   <ebigambo ebikulu> ... </ebigambo ebitonotono>
  3.   <omutwe>
  4.     <tr>
  5.       <th> ... </th> nga bwe kiri
  6.       <th> ... </th> nga bwe kiri
  7.     </tr>
  8.   </tomutwe>
  9.   <omubiri>
  10.     <tr>
  11.       <td> ... </td> nga bwe kiri
  12.       <td> ... </td> nga bwe kiri
  13.     </tr>
  14.   </tbody>
  15. </emmeeza>

Ffoomu

Emisono egy’enjawulo

Ebifuga ffoomu ssekinnoomu bifuna sitayiro, naye awatali kiraasi yonna eyeetaagisa ku <form>oba enkyukakyuka ennene mu markup. Kivaamu ebiwandiiko ebitumbiddwa, ebiteekeddwa ku kkono waggulu ku bifuga foomu.

Omuzira Eky'okulabirako ekiwandiiko ky'obuyambi eky'omutendera gwa bulooka wano. 
  1. <foomu>
  2.   <ekifo ky'ennimiro>
  3.     <olugero> Enfumo </legend>
  4.     <label> Erinnya ly'akabonero </label>
  5.     <input type = "text" placeholder = "Wandiika ekintu..." >  
  6.     <span class = "help-block" > Eky'okulabirako ekiwandiiko ky'obuyambi eky'omutendera gw'okuziyiza wano. </span> 
  7.     <label class = "akabokisi k'okukebera" > 
  8.       <input type = "checkbox" > Nkebera 
  9.     </label>
  10.     <button type = "okuweereza" class = "btn" > Okuwaayo </button>  
  11.   </ennimiroset>
  12. </form>

Ensengeka ez’okwesalirawo

Mu Bootstrap mulimu ensengeka za ffoomu ssatu ez’okwesalirawo ez’okukozesa bulijjo.

Ffoomu y’okunoonya

Yongera .form-searchku foomu ne .search-queryku <input>for an extra-rounded text input.

  1. < ekibiina kya ffoomu = "foomu-okunoonya" > 
  2.   <input type = "text" class = "okubuuza-okunoonya-okuyingiza-omukutu" >  
  3.   < ekika kya button = "okuweereza" class = "btn" > Noonya </button>  
  4. </form>

Ffoomu mu layini

Okwongerako .form-inlineku bipande ebiteekeddwa ku kkono n'ebifuga mu layini-block okusobola ensengeka entono.

  1. < ekibiina kya ffoomu = "foomu-mu layini" > 
  2.   < ekika ky'okuyingiza = "ekiwandiiko" ekibiina = "okuyingiza-ekitono" ekifo = "Email" >   
  3.   < ekika ky'okuyingiza = "ekigambo ky'okuyita" ekibiina = "okuyingiza-ekitono" ekifo = "Ekigambo ky'okuyingira" >   
  4.   <label class = "akabokisi k'okukebera" > 
  5.     <input type = "checkbox" > Nzijukira 
  6.   </label>
  7.   < ekika kya button = "okuweereza" class = "btn" > Yingira </button>  
  8. </form>

Ekifaananyi eky’okwebungulula

Laganya ebiwandiiko ku ddyo era obitengejja ku kkono okubifuula okulabika ku layini y’emu n’ebifuga. Yeetaaga enkyukakyuka ezisinga okubeera ez'obubonero okuva ku ffoomu eya bulijjo:

  • Okwongerako .form-horizontalku foomu
  • Zinga ebiwandiiko n’ebifuga mu.control-group
  • Okwongerako .control-labelku label
  • Zinga ebifuga byonna ebikwatagana mu .controlsokusobola okukwataganya obulungi
  1. < ekibiina kya ffoomu = "ekifaananyi-eky'okwebungulula" > 
  2.   <div class = "ekibinja-ekifuga" > 
  3.     <label class = "okufuga-akabonero" for = "okuyingizaEmail" > Email </label>  
  4.     <div class = "ebifuga" > 
  5.       < ekika ky'okuyingiza = "ekiwandiiko" id = "okuyingizaEmail" ekifo = "Email" >   
  6.     </div> nga bwe kiri
  7.   </div> nga bwe kiri
  8.   <div class = "ekibinja-ekifuga" > 
  9.     <label class = "control-label" for = "Ekigambo ky'okuyingiza" > Ekigambo ky'okuyingira </label>  
  10.     <div class = "ebifuga" > 
  11.       < ekika ky'okuyingiza = "ekigambo ky'okuyingira" id = "ekigambo ky'okuyingira" ekifo = "Ekigambo ky'okuyingira" >   
  12.     </div> nga bwe kiri
  13.   </div> nga bwe kiri
  14.   <div class = "ekibinja-ekifuga" > 
  15.     <div class = "ebifuga" > 
  16.       <label class = "akabokisi k'okukebera" > 
  17.         <input type = "checkbox" > Nzijukira 
  18.       </label>
  19.       < ekika kya button = "okuweereza" class = "btn" > Yingira </button>  
  20.     </div> nga bwe kiri
  21.   </div> nga bwe kiri
  22. </form>

Ebifuga foomu ebiwagirwa

Eby'okulabirako by'ebifuga foomu eya bulijjo ebiwagirwa mu nsengeka ya foomu ey'ekyokulabirako.

Ebiyingizibwa

Okufuga foomu okusinga okumanyibwa, ennimiro z’okuyingiza ezesigamiziddwa ku biwandiiko. Mulimu obuwagizi eri ebika byonna ebya HTML5: ebiwandiiko, ekigambo ky’okuyingira, olunaku obudde, olunaku obudde-eky’omu kitundu, olunaku, omwezi, obudde, wiiki, ennamba, email, url, okunoonya, tel, ne langi.

Yeetaaga okukozesa a eragiddwa typeekiseera kyonna.

  1. < ekika ky'okuyingiza = "ekiwandiiko" ekifo = "Okuyingiza ekiwandiiko" >

Ekitundu ky’ebiwandiiko

Okufuga foomu ewagira ennyiriri eziwera ez’ebiwandiiko. Kyusa rowsattribute nga bwe kyetaagisa.

  1. < ennyiriri z'ekitundu ky'ebiwandiiko = "3" ></ekitundu ky'ebiwandiiko>

Ebibokisi ebikebera ne leediyo

Checkboxes za kulonda option emu oba eziwera mu list ate radios za kulonda option emu okuva mu bingi.

Ekisookerwako (ekitumbibwa) .


  1. <label class = "akabokisi k'okukebera" > 
  2.   < ekika ky'okuyingiza = "akabokisi k'okukebera" omuwendo = "" >  
  3.   Eky’okukola ekisooka kiri kino ne kiri —kakasa nti ossaamu lwaki kirungi nnyo
  4. </label>
  5.  
  6. <label class = "leediyo" > 
  7.   <input type = "radio" erinnya = "optionsRadios" id = "optionsRadios1" omuwendo = "enkola1" ekebereddwa >     
  8.   Eky’okukola ekisooka kiri kino ne kiri —kakasa nti ossaamu lwaki kirungi nnyo
  9. </label>
  10. <label class = "leediyo" > 
  11.   < ekika ky'okuyingiza = "leediyo" erinnya = "eby'okulondaRadio" id = "eby'okulondaRadio2" omuwendo = "okulonda2" >    
  12.   Enkola eyokubiri eyinza okuba ekintu ekirala era okugilonda kijja kuggyawo eky’okulonda ekisooka
  13. </label>

Ebibokisi ebikebera mu layini

Okwongera .inlineekibiina ku lunyiriri lw’ebibokisi ebikebera oba leediyo okulaba ebifuga birabika ku layini y’emu.

  1. <label class = "akabokisi k'okukebera mu layini" > 
  2.   < ekika ky'okuyingiza = "akabokisi k'okukebera" id = "akabokisi k'okukebera mu layini1" omuwendo = "okulonda1" > 1   
  3. </label>
  4. <label class = "akabokisi k'okukebera mu layini" > 
  5.   < ekika ky'okuyingiza = "akabokisi k'okukebera" id = "akabokisi k'okukebera mu layini2" omuwendo = "okulonda2" > 2   
  6. </label>
  7. <label class = "akabokisi k'okukebera mu layini" > 
  8.   < ekika ky'okuyingiza = "akabokisi k'okukebera" id = "akabokisi k'okukebera mu layini3" omuwendo = "okulonda3" > 3   
  9. </label>

Alondawo

Kozesa eky'okulonda ekisookerwako oba lambika a multiple="multiple"okulaga eby'okulonda ebingi omulundi gumu.


  1. <londa>
  2.   <ekyokulonda> 1 </ekyokulonda>
  3.   <ekyokulonda> 2 </ekyokulonda>
  4.   <ekyokulonda> 3 </ekyokulonda>
  5.   <ekyokulonda> 4 </ekyokulonda>
  6.   <ekyokulonda> 5 </ekyokulonda>
  7. </londa>
  8.  
  9. <londa ebingi = "ebingi" > 
  10.   <ekyokulonda> 1 </ekyokulonda>
  11.   <ekyokulonda> 2 </ekyokulonda>
  12.   <ekyokulonda> 3 </ekyokulonda>
  13.   <ekyokulonda> 4 </ekyokulonda>
  14.   <ekyokulonda> 5 </ekyokulonda>
  15. </londa>

Okugaziya ebifuga foomu

Okwongerako waggulu ku bifuga bya bbulawuzi ebiriwo, Bootstrap erimu ebitundu bya ffoomu ebirala eby’omugaso.

Ebiyingizibwa ebiteekeddwawo nga tebinnabaawo n’ebigattibwako

Okwongerako ebiwandiiko oba obutambi nga tonnaba oba oluvannyuma lw’okuyingiza kwonna okwesigamiziddwa ku biwandiiko. Kola weetegereze nti selectelementi teziwagirwa wano.

Ebintu ebisookerwako

Zinga an .add-onne an inputn’ekimu ku kiraasi bbiri okusooka oba okugattako ekiwandiiko ku kiyingiziddwa.

@

.00 nga bwe kiri 
  1. <div class = "okuyingiza-okusooka" > 
  2.   <span class = "okugattako" > @ </span> 
  3.   <input class = "span2" id = "prependedInput" ekika = "ekiwandiiko" ekifo = "Erinnya ly'omukozesa" >    
  4. </div> nga bwe kiri
  5. <div class = "okuyingiza-okugattako" > 
  6.   < ekibiina ky'okuyingiza = "span2" id = "okuyingiza okugattibwako" ekika = "ekiwandiiko" >   
  7.   <span class = "okugattako" > .00 </span> 
  8. </div> nga bwe kiri

Nga bigattiddwa wamu

Kozesa kiraasi zombi n'ebikozesebwa bibiri ebya .add-onokusooka n'okugattako ekiyingizibwa.

$ .00 nga bwe kiri 
  1. <div class = "okuyingiza-okusooka okuyingiza-okugattako" > 
  2.   <span class = "okugattako" > $ </span> 
  3.   < ekibiina ky'okuyingiza = "span2" id = "okuyingizibwa kwayongerwako" ekika = "ekiwandiiko" >   
  4.   <span class = "okugattako" > .00 </span> 
  5. </div> nga bwe kiri

Buttons mu kifo ky’ebiwandiiko

Mu kifo kya a <span>n’ebiwandiiko, kozesa a .btnokugattako bbaatuuni (oba bbiri) ku kiyingiziddwa.

  1. <div class = "okuyingiza-okugattako" > 
  2.   < ekibiina ky'okuyingiza = "span2" id = "appendedInputButton" ekika = "ekiwandiiko" >   
  3.   < ekibiina kya button = "btn" ekika = "button" > Genda! </button>  
  4. </div> nga bwe kiri
  1. <div class = "okuyingiza-okugattako" > 
  2.   < ekibiina ky'okuyingiza = "span2" id = "appendedInputButtons" ekika = "ekiwandiiko" >   
  3.   <button class = "btn" ekika = "button" > Okunoonya </button>  
  4.   <button class = "btn" ekika = "button" > Eby'okulonda </button>  
  5. </div> nga bwe kiri

Ebintu ebigwa ku button

  1. <div class = "okuyingiza-okugattako" > 
  2.   < ekibiina ky'okuyingiza = "span2" id = "appendedDropdownButton" ekika = "ekiwandiiko" >   
  3.   <div ekibiina = "btn-ekibinja" > 
  4.     <button class = "btn okugwa-okukyusa" data-okukyusa = "okugwa" >  
  5.       Okikolwa
  6.       <span class = "okulabirira" </span> 
  7.     </button>
  8.     <ul class = "menu-egwa wansi" > 
  9.       ...
  10.     </ul>
  11.   </div> nga bwe kiri
  12. </div> nga bwe kiri
  1. <div class = "okuyingiza-okusooka" > 
  2.   <div ekibiina = "btn-ekibinja" > 
  3.     <button class = "btn okugwa-okukyusa" data-okukyusa = "okugwa" >  
  4.       Okikolwa
  5.       <span class = "okulabirira" </span> 
  6.     </button>
  7.     <ul class = "menu-egwa wansi" > 
  8.       ...
  9.     </ul>
  10.   </div> nga bwe kiri
  11.   < ekibiina ky'okuyingiza = "span2" id = "prependedDropdownButton" ekika = "ekiwandiiko" >   
  12. </div> nga bwe kiri
  1. <div class = "okuyingiza-okusooka okuyingiza-okugattako" > 
  2.   <div ekibiina = "btn-ekibinja" > 
  3.     <button class = "btn okugwa-okukyusa" data-okukyusa = "okugwa" >  
  4.       Okikolwa
  5.       <span class = "okulabirira" </span> 
  6.     </button>
  7.     <ul class = "menu-egwa wansi" > 
  8.       ...
  9.     </ul>
  10.   </div> nga bwe kiri
  11.   <input class = "span2" id = "eyongerwakoPrependedDropdownButton" ekika = "ekiwandiiko" >   
  12.   <div ekibiina = "btn-ekibinja" > 
  13.     <button class = "btn okugwa-okukyusa" data-okukyusa = "okugwa" >  
  14.       Okikolwa
  15.       <span class = "okulabirira" </span> 
  16.     </button>
  17.     <ul class = "menu-egwa wansi" > 
  18.       ...
  19.     </ul>
  20.   </div> nga bwe kiri
  21. </div> nga bwe kiri

Ebibinja ebigwa mu bitundutundu

  1. <foomu>
  2.   <div class = "okuyingiza-okusooka" > 
  3.     <div ekibiina = "btn-ekibinja" > ... </div> 
  4.     < ekika ky'okuyingiza = "ekiwandiiko" > 
  5.   </div> nga bwe kiri
  6.   <div class = "okuyingiza-okugattako" > 
  7.     < ekika ky'okuyingiza = "ekiwandiiko" > 
  8.     <div ekibiina = "btn-ekibinja" > ... </div> 
  9.   </div> nga bwe kiri
  10. </form>

Ffoomu y’okunoonya

  1. < ekibiina kya ffoomu = "foomu-okunoonya" > 
  2.   <div class = "okuyingiza-okugattako" > 
  3.     < ekika ky'okuyingiza = "ekiwandiiko" ekibiina = "span2 okunoonya-okubuuza" >  
  4.     < ekika kya button = "okuweereza" class = "btn" > Noonya </button>  
  5.   </div> nga bwe kiri
  6.   <div class = "okuyingiza-okusooka" > 
  7.     < ekika kya button = "okuweereza" class = "btn" > Noonya </button>  
  8.     < ekika ky'okuyingiza = "ekiwandiiko" ekibiina = "span2 okunoonya-okubuuza" >  
  9.   </div> nga bwe kiri
  10. </form>

Fuga okugerageranya obunene

Kozesa kiraasi z’obunene obw’enjawulo nga .input-largeoba okukwataganya ebiyingiziddwa byo ku sayizi z’ennyiriri za giridi ng’okozesa .span*kiraasi.

Ebiyingizibwa mu ddaala lya bbulooka

Fuula ekintu kyonna <input>oba <textarea>elementi okweyisa nga elementi ya block level.

  1. <input class = "okuyingiza-okuziyiza-omutendera" ekika = "ekiwandiiko" ekifo = " .okuyingiza -okuziyiza-omutendera" >

Okugerageranya obunene (relative sizing).

  1. <input class = "input-mini" ekika = "ekiwandiiko" ekifo = " .input -mini" >   
  2. <input class = "okuyingiza-okutono" ekika = "ekiwandiiko" ekifo = " .okuyingiza -okutono" >   
  3. <input class = "input-medium" ekika = "ekiwandiiko" ekifo = " .input -medium" >   
  4. <input class = "okuyingiza-ekinene" ekika = "ekiwandiiko" ekifo = " .okuyingiza -ekinene" >   
  5. <input class = "input-xlarge" ekika = "ekiwandiiko" ekifo = " .input -xlarge" >   
  6. <input class = "input-xxlarge" ekika = "ekiwandiiko" ekifo = " .input -xxlarge" >

Emitwe waggulu!Mu nkyusa ezijja, tujja kuba tukyusa enkozesa ya kiraasi zino ez'okuyingiza ez'enjawulo okukwatagana ne sayizi zaffe eza button. Okugeza, .input-largeejja kwongera ku padding ne font-size y'ekintu ekiyingiziddwa.

Okugerageranya obunene bwa giridi

Kozesa .span1to .span12ku biyingizibwa ebikwatagana n’obunene bwe bumu obw’ennyiriri za giridi.

  1. < ekibiina ky'okuyingiza = "span1" ekika = "ekiwandiiko" ekifo = " .span1 " >   
  2. < ekibiina ky'okuyingiza = "span2" ekika = "ekiwandiiko" ekifo = " .span2 " >   
  3. < ekibiina ky'okuyingiza = "span3" ekika = "ekiwandiiko" ekifo = " .span3 " >   
  4. <londa ekibiina = "span1" > 
  5.   ...
  6. </londa>
  7. <londa ekibiina = "span2" > 
  8.   ...
  9. </londa>
  10. <londa ekibiina = "span3" > 
  11.   ...
  12. </londa>

Ku biyingizibwa bya giridi ebingi buli layini, kozesa ekibiina .controls-rowky’omukyusa okusobola okuteeka ebanga erituufu . Etengejja ebiyingizibwa okugwa white-space, eteeka margins entuufu, era egogola float.

  1. <div class = "ebifuga" > 
  2.   < ekibiina ky'okuyingiza = "span5" ekika = "ekiwandiiko" ekifo = " .span5 " >   
  3. </div> nga bwe kiri
  4. <div class = "efuga ebifuga-olunyiriri" > 
  5.   < ekibiina ky'okuyingiza = "span4" ekika = "ekiwandiiko" ekifo = " .span4 " >   
  6.   < ekibiina ky'okuyingiza = "span1" ekika = "ekiwandiiko" ekifo = " .span1 " >   
  7. </div> nga bwe kiri
  8. ...

Ebiyingizibwa ebitasobola kulongoosebwa

Yanjula data mu ffoomu etali ya kulongoosebwa nga tokozesezza bubonero bwa foomu yennyini.

Abamu wano batwala nga ba muwendo 
  1. <span class = "input-xlarge uneditable-input" > Omuwendo ogumu wano </span>

Okukola ebikolwa

Komekkereza foomu n'ekibinja ky'ebikolwa (buttons). Bwe ziteekebwa munda mu a .form-actions, obutambi bujja kuyingizibwa mu ngeri ey’otoma okusimba ennyiriri n’ebifuga foomu.

  1. <div class = "ebikolwa-eby'engeri" > 
  2.   <button type = "submit" class = "btn btn-primary" > Teeka enkyukakyuka </button>  
  3.   < ekika kya button = "button" class = "btn" > Sazaamu </button>  
  4. </div> nga bwe kiri

Ekiwandiiko ekiyamba

Obuwagizi bw'omutendera gwa inline ne block olw'ekiwandiiko ky'obuyambi ekirabika okwetoloola ebifuga foomu.

Obuyambi mu layini

Ekiwandiiko ky’obuyambi mu layini 
  1. <input type = "text" ><span class = "obuyambi-mu layini" > Ekiwandiiko ky'obuyambi mu layini </span>

Zibira obuyambi

Bbulooka empanvu ey’ekiwandiiko ky’obuyambi ekimenya ku layini empya era eyinza okusukka layini emu. 
  1. <input type = "text" ><span class = "help-block" > Ekisenge ekiwanvu eky'ekiwandiiko ky'obuyambi ekimenya ku layini empya era ekiyinza okugaziwa okusukka layini emu. </span>

Ffoomu efuga embeera

Okuwa endowooza eri abakozesa oba abagenyi nga balina embeera z’okuddamu ezisookerwako ku bifuga foomu n’ebiwandiiko.

Okussa essira ku kuyingiza

Tuggyawo outlinesitayiro ezisookerwako ku bifuga ffoomu ezimu ne tussa a box-shadowmu kifo kyayo ku :focus.

  1. <input class = "input-xlarge" id = "okussa essiraInput" ekika = "ekiwandiiko" value = "Kino kitunuuliddwa..." >

Ebiyingizibwa ebitali bituufu

Ebiyingizibwa mu sitayiro nga biyita mu nkola ya bbulawuzi eya bulijjo ne :invalid. Laga a type, yongera ku kintu requiredsinga ennimiro si ya kwesalirawo, era (bwe kiba kituufu) lambika a pattern.

Kino tekisangibwa mu nkyusa za Internet Explorer 7-9 olw'obutaba na buwagizi bwa CSS pseudo selectors.

  1. < ekibiina ky'okuyingiza = "span3" ekika = "email" yeetaagibwa >

Ebiyingizibwa ebilema

Okwongerako disabledekintu ku kiyingizibwa okuziyiza okuyingiza kw’omukozesa n’okutandikawo okutunula okw’enjawulo katono.

  1. <input class = "input-xlarge" id = "disabledInput" type = "ekiwandiiko" ekifo = "Okuyingiza okulemesa wano..." kulemeseddwa >

Okukakasa kugamba

Bootstrap erimu emisono gy'okukakasa ensobi, okulabula, info, n'obubaka bw'obuwanguzi. Okusobola okukozesa, yongera ku kiraasi esaanira ku bimwetoolodde .control-group.

Kiyinza okuba nga waliwo ekikyamu
Nsaba otereeze ensobi
Erinnya ly'omukozesa litwalibwa
Woohoo! 
  1. <div class = "okulabula kw'ekibinja ekifuga" > 
  2.   <label class = "control-label" for = "okuyingizaOkulabula" > Okuyingiza n'okulabula </label>  
  3.   <div class = "ebifuga" > 
  4.     < ekika ky'okuyingiza = "ekiwandiiko" id = "Okulabula okuyingiza" >  
  5.     <span class = "help-inline" > Waliwo ekiyinza okuba nga kyatambudde obubi </span> 
  6.   </div> nga bwe kiri
  7. </div> nga bwe kiri
  8.  
  9. <div class = "ensobi y'ekibinja-ekifuga" > 
  10.   <label class = "control-label" for = "Ensobi y'okuyingiza" > Okuyingiza n'ensobi </label>  
  11.   <div class = "ebifuga" > 
  12.     < ekika ky'okuyingiza = "ekiwandiiko" id = "Ensobi y'okuyingiza" >  
  13.     <span class = "help-inline" > Nsaba otereeze ensobi </span> 
  14.   </div> nga bwe kiri
  15. </div> nga bwe kiri
  16.  
  17. <div class = "ebikwata ku kibinja ekifuga" > 
  18.   <label class = "control-label" for = "okuyingizaAmawulire" > Okuyingiza n'amawulire </label>  
  19.   <div class = "ebifuga" > 
  20.     < ekika ky'okuyingiza = "ekiwandiiko" id = "Ebikwata ku biyingizibwa" >  
  21.     <span class = "help-inline" > Erinnya ly'omukozesa lyatwalibwa dda </span> 
  22.   </div> nga bwe kiri
  23. </div> nga bwe kiri
  24.  
  25. <div class = "obuwanguzi bw'ekibiina ekifuga" > 
  26.   <label class = "control-label" for = "OkuyingizaObuwanguzi" > Okuyingiza n'obuwanguzi </label>  
  27.   <div class = "ebifuga" > 
  28.     < ekika ky'okuyingiza = "ekiwandiiko" id = "Obuwanguzi bw'okuyingiza" >  
  29.     <span class = "obuyambi-mu layini" > Woohoo! </span> 
  30.   </div> nga bwe kiri
  31. </div> nga bwe kiri

Ebikondo ebiyitibwa Buttons

Butaamu ezisookerwako

Emisono gya button gisobola okukozesebwa ku kintu kyonna nga .btnkiraasi ekozesebwa. Naye, mu ngeri entuufu ojja kwagala okukozesa bino ku byokka <a>ne <button>elements okusobola okuvvuunula okusinga obulungi.

Eppeesa ekibiina="" Okunnyonnyola
btn Standard enzirugavu button nga eriko gradient
btn btn-primary Ewa obuzito obw’okulaba obw’enjawulo era n’ezuula ekikolwa ekikulu mu kibinja kya buttons
btn btn-info Ekozesebwa nga eky'okuddako ku sitayiro ezisookerwako
btn btn-success Kiraga ekikolwa ekituuse ku buwanguzi oba ekirungi
btn btn-warning Kiraga nti okwegendereza kulina okukolebwa n’ekikolwa kino
btn btn-danger Kiraga ekikolwa eky’akabi oba ekiyinza okuba ekibi
btn btn-inverse Alternate enzirugavu enzirugavu button, so si kusiba ku semantic ekikolwa oba okukozesa
btn btn-link Ssaako essira ku bbaatuuni ng’ogifuula ng’enkolagana ate ng’okuuma enneeyisa ya bbaatuuni

Okukwatagana kwa browser okusalako

IE9 tesala background gradients ku rounded corners, kale tugiggyawo. Ebikwatagana, IE9 jankifies buttonelements eziremeseddwa, okufuula ebiwandiiko enzirugavu n'ekiwandiiko-ekisiikirize ekibi kye tutasobola kutereeza.

Ebipimo bya button

Fancy buttons ennene oba entono? Okwongerako .btn-large, .btn-small, oba .btn-miniokufuna sayizi endala.

  1. <p> nga bwe kiri
  2.   <button class = "btn btn-ennene btn-okusookerwako" ekika = "button" > Button ennene </button>  
  3.   <button class = "btn btn-ennene" ekika = "button" > Button ennene </button>  
  4. </p>
  5. <p> nga bwe kiri
  6.   <button class = "btn btn-primary" ekika = "button" > Ekintu ekisookerwako </button>  
  7.   <button class = "btn" type = "button" > Ekitabo ekisookerwako </button>  
  8. </p>
  9. <p> nga bwe kiri
  10.   <button class = "btn btn-obutono btn-okusooka" ekika = "button" > Button entono </button>  
  11.   <button class = "btn btn-obutono" ekika = "button" > Button entono </button>  
  12. </p>
  13. <p> nga bwe kiri
  14.   <button class = "btn btn-mini btn-primary" ekika = "bbaatuuni" > bbaatuuni entono </button>  
  15.   <button class = "btn btn-mini" ekika = "button" > bbaatuuni entono </button>  
  16. </p>

Tonda buttons za block level —ezo ezibuna obugazi bwonna obw’omuzadde — nga ossaako .btn-block.

  1. <button class = "btn btn-ennene btn-block btn-primary" ekika = "button" > bbaatuuni y'omutendera gw'okuziyiza </button>  
  2. <button class = "btn btn-ennene btn-block" ekika = "button" > bbaatuuni y'omutendera gw'okuziyiza </button>

Embeera ebalema

Fuula buttons okulabika nga teziyinza kunyiga nga zizikira emabega 50%.

Ekintu ekinyweza ennanga

Okwongera .disabledekibiina ku <a>buttons.

Enkolagana enkulu Okuyunga 

  1. <a href = "#" class = "btn btn-ennene btn-entandikwa eremeddwa" > Enkolagana enkulu </a>  
  2. <a href = "#" class = "btn btn-ennene eremeddwa" > Enkolagana </a>

Emitwe waggulu!Tukozesa .disablednga kiraasi y’omugaso wano, okufaananako ne .activekiraasi eya bulijjo, kale tewali ntandikwa yeetaagibwa. Ate era, kiraasi eno ya aesthetic yokka; olina okukozesa JavaScript eya bulijjo okulemesa enkolagana wano.

Ekintu kya button

Okwongera disabledekintu ku <button>buttons.

  1. <button type = "button" class = "btn btn-ennene btn-esooka eremeddwa" eremeddwa = "eziyiziddwa" > Butaamu enkulu </button>   
  2. < ekika kya button = "button" class = "btn btn-ennene" eremeddwa > Button </button>

Ekibiina kimu, tags eziwera

Kozesa .btnekibiina ku <a>, <button>, oba <input>elementi.

Okuyunga 
  1. <a class = "btn" href = "" > Okuyunga </a>  
  2. <button class = "btn" ekika = "okuweereza" > Button </button>  
  3. < ekibiina ky'okuyingiza = "btn" ekika = "button" value = "Okuyingiza" >   
  4. <input class = "btn" ekika = "okuwaayo" omuwendo = "Okuwaayo" >

Nga enkola esinga obulungi, gezaako okukwataganya ekintu ku nsonga yo okukakasa okukwatagana kw'okulaga kwa cross-browser. Bw’oba ​​olina input, kozesa <input type="submit">ku bbaatuuni yo.

Ebifaananyi

Okwongerako kiraasi ku <img>elementi okusobola okwanguyirwa okukola sitayiro y’ebifaananyi mu pulojekiti yonna.

140x140 nga bwe kiri 140x140 nga bwe kiri 140x140 nga bwe kiri 
  1. <img src = "..." ekibiina = "img-ezingiddwako" >  
  2. <img src = "..." ekibiina = "emg-enkulungo" >  
  3. <img src = "..." ekibiina = "img-polaroid" >

Emitwe waggulu! .img-roundedera .img-circletezikola mu IE7-8 olw’obutaba na border-radiusbuwagizi.

Ebifaananyi bya Glyphicons

Ebifaananyi ebiriko ennukuta

Ebifaananyi 140 mu ngeri ya sprite, bifunibwa mu langi enzirugavu enzirugavu (esookera ddala) n’enjeru, ebiweereddwa Glyphicons .

  • ekifaananyi-endabirwamu
  • ekifaananyi-omuziki
  • okunoonya ebifaananyi
  • ekifaananyi-envulopu
  • ekifaananyi-omutima
  • ekifaananyi-emmunyeenye
  • ekifaananyi-emmunyeenye-ekyerere
  • ekifaananyi-omukozesa
  • ekifaananyi-firimu
  • ekifaananyi-th-ekinene
  • ekifaananyi-th
  • ekifaananyi-olukalala
  • ekifaananyi-ok
  • ekifaananyi-okuggyawo
  • akabonero-okugaziya
  • ekifaananyi-okukendeeza-okukendeeza
  • ekifaananyi-okuggwaako
  • ekifaananyi-akabonero
  • ekifaananyi-cog
  • ekifaananyi-kasasiro
  • ekifaananyi-awaka
  • ekifaananyi-fayiro
  • ekifaananyi-ekiseera
  • icon-oluguudo
  • ekifaananyi-okuwanula-alt
  • ekifaananyi-okuwanula
  • ekifaananyi-okuteeka ku mukutu
  • ekifaananyi-inbox
  • ekifaananyi-okuzannya-enkulungo
  • ekifaananyi-okuddiŋŋana
  • ekifaananyi-okuzza obuggya
  • ekifaananyi-olukalala-alt
  • ekifaananyi-ekizibiti
  • ekifaananyi-bendera
  • icon-ebikozesebwa mu matu
  • ekifaananyi-volume-okuggyako
  • icon-volume-okukka wansi
  • ekifaananyi-volume-okulinnya
  • ekifaananyi-qrcode
  • ekifaananyi-baakoodi
  • ekifaananyi-ekipande
  • ebifaananyi-ebipande
  • ekitabo-ekifaananyi
  • ekifaananyi-akabonero
  • ekifaananyi-okukuba ebitabo
  • ekifaananyi-kamera
  • ekifaananyi-fonti
  • ekifaananyi-obugumu
  • ekifaananyi-ekitangaavu
  • ekifaananyi-ekiwandiiko-obuwanvu
  • ekifaananyi-ekiwandiiko-obugazi
  • ekifaananyi-okulaga-ku kkono
  • ekifaananyi-okulaga-wakati
  • ekifaananyi-okulaga-ku ddyo
  • icon-align-okulaga obutuufu
  • olukalala lw’ebifaananyi
  • ekifaananyi-ekiyingizibwa-ku kkono
  • ekifaananyi-ekiyingizibwa-ku ddyo
  • ekifaananyi-facetime-vidiyo
  • ekifaananyi-ekifaananyi
  • ekifaananyi-ekkalaamu
  • ekifaananyi-maapu-akabonero
  • ekifaananyi-okutereeza
  • ekifaananyi-tint
  • ekifaananyi-okulongoosa
  • ekifaananyi-okugabana
  • akabonero-okukebera
  • ekifaananyi-okutambuza
  • icon-omutendera-okudda emabega
  • icon-fast-okudda emabega
  • ekifaananyi-emabega
  • icon-play
  • ekifaananyi-okuyimirira
  • ekifaananyi-okuyimirira
  • ekifaananyi-okugenda mu maaso
  • icon-okugenda mu maaso mu bwangu
  • icon-omutendera-okugenda mu maaso
  • ekifaananyi-okufulumya
  • ekifaananyi-chevron-ku kkono
  • ekifaananyi-chevron-ku ddyo
  • akabonero-okugatta-akabonero
  • akabonero-okuggyako-akabonero
  • akabonero-okuggyawo-akabonero
  • akabonero-ok-akabonero
  • akabonero-ekibuuzo-akabonero
  • ekifaananyi-amawulire-akabonero
  • ekifaananyi-ekifaananyi ky’oku ssirini
  • ekifaananyi-okuggyawo-enkulungo
  • ekifaananyi-ok-enkulungo
  • ekifaananyi-okuwera-enkulungo
  • ekifaananyi-akasaale-ku kkono
  • ekifaananyi-akasaale-ku ddyo
  • ekifaananyi-akasaale-waggulu
  • ekifaananyi-akasaale-wansi
  • ekifaananyi-okugabana-alt
  • ekifaananyi-okukyusa obunene-ekijjudde
  • ekifaananyi-okukyusa obunene-obutono
  • ekifaananyi-nga kwogasse
  • ekifaananyi-okuggyako
  • ekifaananyi-emmunyeenye
  • ekifaananyi-akabonero-aka-okuwuniikiriza
  • ekifaananyi-ekirabo
  • ekifaananyi-ekikoola
  • ekifaananyi-omuliro
  • ekifaananyi-okuggulawo amaaso
  • ekifaananyi-eriiso-okuggalawo
  • akabonero-akabonero-aka-okulabula
  • ekifaananyi-ennyonyi
  • ekifaananyi-kalenda
  • ekifaananyi-ekitali kya bulijjo
  • ekifaananyi-okuteesa
  • ekifaananyi-magineeti
  • ekifaananyi-chevron-okulinnya
  • ekifaananyi-chevron-wansi
  • ekifaananyi-okuddamu okuwandiika
  • ekifaananyi-ekigaali-ekigula
  • ekifaananyi-ekifo-okuggalawo
  • ekifaananyi-ekifo-ekiggule
  • ekifaananyi-okukyusa obunene-eky’okwesimbye
  • ekifaananyi-okukyusa obunene-obuwanvu
  • ekifaananyi-hdd
  • ekifaananyi-bullhorn
  • ekifaananyi-akagombe
  • ekifaananyi-satifikeeti
  • ekifaananyi-engalo ensajja-up
  • ekifaananyi-engalo ensajja-wansi
  • ekifaananyi-omukono-ku ddyo
  • ekifaananyi-omukono-ku kkono
  • ekifaananyi-omukono-okugulu
  • ekifaananyi-omukono-wansi
  • ekifaananyi-enkulungo-akasaale-ku ddyo
  • ekifaananyi-enkulungo-akasaale-ku kkono
  • ekifaananyi-enkulungo-akasaale-waggulu
  • ekifaananyi-enkulungo-akasaale-wansi
  • ekifaananyi-ensi
  • ekifaananyi-ekisumuluzo
  • ebifaananyi-emirimu
  • ekifaananyi-okusengejja
  • ekifaananyi-ensawo y’ebitabo
  • ekifaananyi-ekijjuvu

Okuwandiika ku Glyphicons

Glyphicons Halflings mu budde obutuufu tezifunibwa ku bwereere, naye enteekateeka wakati wa Bootstrap n’abatonzi ba Glyphicons esobozesezza kino awatali kusasula ggwe ng’abakugu. Nga okwebaza, tukusaba okussaamu enkolagana ey’okwesalirawo okudda ku Glyphicons buli lwe kiba nga kikola.

Engeri y’okukozesaamu

Ebifaananyi byonna byetaaga <i>tag erimu kiraasi ey’enjawulo, nga esookera ddala icon-. Okusobola okukozesa, teeka koodi eno wammanga kumpi wonna:

  1. <i class = "okunoonya-akabonero" </i>

Waliwo n’emisono egiriwo ku bifaananyi ebikyusiddwa (ebyeru), ebikoleddwa nga byetegefu nga biriko kiraasi emu ey’enjawulo. Tujja kussa mu nkola mu ngeri ey’enjawulo kiraasi eno ku hover ne active states ku nav ne dropdown links.

  1. <i class = "akabonero-okunoonya ekifaananyi-enjeru" ></i>

Emitwe waggulu!Bw’oba ​​okozesa ku mabbali g’ennyiriri z’ebiwandiiko, nga mu buttons oba nav links, kakasa nti oleka ebanga oluvannyuma lwa <i>tag okusobola okuteeka ebanga obulungi.

Ebyokulabirako by’ebifaananyi

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

Ebikondo ebiyitibwa Buttons

Ekibinja kya button mu button y'ebikozesebwa
  1. <div class = "btn-ebbaala y'ebikozesebwa" > 
  2.   <div ekibiina = "btn-ekibinja" > 
  3.     <a class = "btn" href = "#" ><i class = "akabonero-okulaga-ku kkono" ></i></a>   
  4.     <a class = "btn" href = "#" ><i class = "akabonero-okulaga-makkati" ></i></a>   
  5.     <a class = "btn" href = "#" ><i class = "akabonero-okukwataganya-ku ddyo" ></i></a>   
  6.     <a class = "btn" href = "#" ><i class = "akabonero-okulaga-okulaga obutuufu" ></i></a>   
  7.   </div> nga bwe kiri
  8. </div> nga bwe kiri
Dropdown mu kibinja kya button
Omukozesa 
  1. <div ekibiina = "btn-ekibinja" > 
  2.   <a class = "btn btn-primary" href = "#" ><i class = "akabonero-omukozesa akabonero-enjeru" ></i> Omukozesa </a>   
  3.   <a class = "btn btn-okusooka okugwa-okukyusa" data-okukyusa = "okugwa" href = "#" ><span kiraasi = "caret" ></span></a>    
  4.   <ul class = "menu-egwa wansi" > 
  5.     <li><a href = "#" ><i class = "akabonero-ekkalaamu" ></i> Okulongoosa </a></li>  
  6.     <li><a href = "#" ><i class = "akabonero-kasasiro" ></i> Ssaako </a></li>  
  7.     <li><a href = "#" ><i class = "enkulungo-ey'okuwera-akabonero" ></i> Okuwera </a></li>  
  8.     <li kiraasi = "omugabanya" </li> 
  9.     <li><a href = "#" ><i kiraasi = "nze" ></i> Kola omuddukanya </a></li>  
  10.   </ul>
  11. </div> nga bwe kiri
Ebipimo bya button
Emmunyeenye Emmunyeenye Emmunyeenye 
  1. <a class = "btn btn-large" href = "#" ><i kiraasi = "ekifaananyi-emmunyeenye" ​​></i> Emmunyeenye </a>   
  2. <a class = "btn btn-small" href = "#" ><i kiraasi = "ekifaananyi-emmunyeenye" ​​></i> Emmunyeenye </a>   
  3. <a class = "btn btn-mini" href = "#" ><i kiraasi = "ekifaananyi-emmunyeenye" ​​></i> Emmunyeenye </a>

Okutambulira ku nnyanja

  1. <ul ekibiina = "nav nav-olukalala" > 
  2.   <li class = "active" ><a href = "#" ><i class = "akabonero-akafaananyi-akabonero-akazungu" </i> Awaka </a></li>   
  3.   <li><a href = "#" ><i class = "ekitabo-ekifaananyi" </i> Etterekero ly'ebitabo </a></li>  
  4.   <li><a href = "#" ><i class = "akabonero-ekkalaamu" ></i> Ebikozesebwa </a></li>  
  5.   <li><a href = "#" ><i kiraasi = "nze" ></i> Ebintu ebitali bimu </a> </li>  
  6. </ul>

Ennimiro za ffoomu

  1. <div class = "ekibinja-ekifuga" > 
  2.   <label class = "control-label" for = "Ekifaananyi ky'okuyingiza" > Endagiriro ya email </label>  
  3.   <div class = "ebifuga" > 
  4.     <div class = "okuyingiza-okusooka" > 
  5.       <span class = "okugattako" ><i class = "akabonero-envulopu" ></i></span>  
  6.       < ekibiina ky'okuyingiza = "span2" id = "Icon y'okuyingiza" ekika = "ekiwandiiko" >   
  7.     </div> nga bwe kiri
  8.   </div> nga bwe kiri
  9. </div> nga bwe kiri