Omusipi gwa Bootstrap

Omusingi gwa CSS

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

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.   <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
  6. </label>
  7. <label class="checkbox inline">
  8.   <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
  9. </label>

Selects

Use the default option or specify a multiple="multiple" to show multiple options at once.


  1. <select>
  2.   <option>1</option>
  3.   <option>2</option>
  4.   <option>3</option>
  5.   <option>4</option>
  6.   <option>5</option>
  7. </select>
  8.  
  9. <select multiple="multiple">
  10.   <option>1</option>
  11.   <option>2</option>
  12.   <option>3</option>
  13.   <option>4</option>
  14.   <option>5</option>
  15. </select>

Extending form controls

Adding on top of existing browser controls, Bootstrap includes other useful form components.

Prepended and appended inputs

Add text or buttons before or after any text-based input. Do note that select elements are not supported here.

Default options

Wrap an .add-on and an input with one of two classes to prepend or append text to an input.

@

.00 
  1. <div class="input-prepend">
  2.   <span class="add-on">@</span>
  3.   <input class="span2" id="prependedInput" type="text" placeholder="Username">
  4. </div>
  5. <div class="input-append">
  6.   <input class="span2" id="appendedInput" type="text">
  7.   <span class="add-on">.00</span>
  8. </div>

Combined

Use both classes and two instances of .add-on to prepend and append an input.

$ .00 
  1. <div class="input-prepend input-append">
  2.   <span class="add-on">$</span>
  3.   <input class="span2" id="appendedPrependedInput" type="text">
  4.   <span class="add-on">.00</span>
  5. </div>

Buttons instead of text

Instead of a <span> with text, use a .btn to attach a button (or two) to an input.

  1. <div class="input-append">
  2.   <input class="span2" id="appendedInputButton" type="text">
  3.   <button class="btn" type="button">Go!</button>
  4. </div>
  1. <div class="input-append">
  2.   <input class="span2" id="appendedInputButtons" type="text">
  3.   <button class="btn" type="button">Search</button>
  4.   <button class="btn" type="button">Options</button>
  5. </div>

Button dropdowns

  1. <div class="input-append">
  2.   <input class="span2" id="appendedDropdownButton" type="text">
  3.   <div class="btn-group">
  4.     <button class="btn dropdown-toggle" data-toggle="dropdown">
  5.       Action
  6.       <span class="caret"></span>
  7.     </button>
  8.     <ul class="dropdown-menu">
  9.       ...
  10.     </ul>
  11.   </div>
  12. </div>
  1. <div class="input-prepend">
  2.   <div class="btn-group">
  3.     <button class="btn dropdown-toggle" data-toggle="dropdown">
  4.       Action
  5.       <span class="caret"></span>
  6.     </button>
  7.     <ul class="dropdown-menu">
  8.       ...
  9.     </ul>
  10.   </div>
  11.   <input class="span2" id="prependedDropdownButton" type="text">
  12. </div>
  1. <div class="input-prepend input-append">
  2.   <div class="btn-group">
  3.     <button class="btn dropdown-toggle" data-toggle="dropdown">
  4.       Action
  5.       <span class="caret"></span>
  6.     </button>
  7.     <ul class="dropdown-menu">
  8.       ...
  9.     </ul>
  10.   </div>
  11.   <input class="span2" id="appendedPrependedDropdownButton" type="text">
  12.   <div class="btn-group">
  13.     <button class="btn dropdown-toggle" data-toggle="dropdown">
  14.       Action
  15.       <span class="caret"></span>
  16.     </button>
  17.     <ul class="dropdown-menu">
  18.       ...
  19.     </ul>
  20.   </div>
  21. </div>

Segmented dropdown groups

  1. <form>
  2.   <div class="input-prepend">
  3.     <div class="btn-group">...</div>
  4.     <input type="text">
  5.   </div>
  6.   <div class="input-append">
  7.     <input type="text">
  8.     <div class="btn-group">...</div>
  9.   </div>
  10. </form>

Search form

  1. <form class="form-search">
  2.   <div class="input-append">
  3.     <input type="text" class="span2 search-query">
  4.     <button type="submit" class="btn">Search</button>
  5.   </div>
  6.   <div class="input-prepend">
  7.     <button type="submit" class="btn">Search</button>
  8.     <input type="text" class="span2 search-query">
  9.   </div>
  10. </form>

Control sizing

Use relative sizing classes like .input-large or match your inputs to the grid column sizes using .span* classes.

Block level inputs

Make any <input> or <textarea> element behave like a block level element.

  1. <input class="input-block-level" type="text" placeholder=".input-block-level">

Relative sizing

  1. <input class="input-mini" type="text" placeholder=".input-mini">
  2. <input class="input-small" type="text" placeholder=".input-small">
  3. <input class="input-medium" type="text" placeholder=".input-medium">
  4. <input class="input-large" type="text" placeholder=".input-large">
  5. <input class="input-xlarge" type="text" placeholder=".input-xlarge">
  6. <input class="input-xxlarge" type="text" placeholder=".input-xxlarge">

Heads up! In future versions, we'll be altering the use of these relative input classes to match our button sizes. For example, .input-large will increase the padding and font-size of an input.

Grid sizing

Use .span1 to .span12 for inputs that match the same sizes of the grid columns.

  1. <input class="span1" type="text" placeholder=".span1">
  2. <input class="span2" type="text" placeholder=".span2">
  3. <input class="span3" type="text" placeholder=".span3">
  4. <select class="span1">
  5.   ...
  6. </select>
  7. <select class="span2">
  8.   ...
  9. </select>
  10. <select class="span3">
  11.   ...
  12. </select>

For multiple grid inputs per line, use the .controls-row modifier class for proper spacing. It floats the inputs to collapse white-space, sets the proper margins, and clears the float.

  1. <div class="controls">
  2.   <input class="span5" type="text" placeholder=".span5">
  3. </div>
  4. <div class="controls controls-row">
  5.   <input class="span4" type="text" placeholder=".span4">
  6.   <input class="span1" type="text" placeholder=".span1">
  7. </div>
  8. ...

Uneditable inputs

Present data in a form that's not editable without using actual form markup.

Some value here 
  1. <span class="input-xlarge uneditable-input">Some value here</span>

Form actions

End a form with a group of actions (buttons). When placed within a .form-actions, the buttons will automatically indent to line up with the form controls.

  1. <div class="form-actions">
  2.   <button type="submit" class="btn btn-primary">Save changes</button>
  3.   <button type="button" class="btn">Cancel</button>
  4. </div>

Help text

Inline and block level support for help text that appears around form controls.

Inline help

Inline help text 
  1. <input type="text"><span class="help-inline">Inline help text</span>

Block help

A longer block of help text that breaks onto a new line and may extend beyond one line. 
  1. <input type="text"><span class="help-block">A longer block of help text that breaks onto a new line and may extend beyond one line.</span>

Form control states

Provide feedback to users or visitors with basic feedback states on form controls and labels.

Input focus

We remove the default outline styles on some form controls and apply a box-shadow in its place for :focus.

  1. <input class="input-xlarge" id="focusedInput" type="text" value="This is focused...">

Invalid inputs

Style inputs via default browser functionality with :invalid. Specify a type, add the required attribute if the field is not optional, and (if applicable) specify a pattern.

This is not available in versions of Internet Explorer 7-9 due to lack of support for CSS pseudo selectors.

  1. <input class="span3" type="email" required>

Disabled inputs

Add the disabled attribute on an input to prevent user input and trigger a slightly different look.

  1. <input class="input-xlarge" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>

Validation states

Bootstrap includes validation styles for error, warning, info, and success messages. To use, add the appropriate class to the surrounding .control-group.

Something may have gone wrong
Please correct the error
Username is taken
Woohoo! 
  1. <div class="control-group warning">
  2.   <label class="control-label" for="inputWarning">Input with warning</label>
  3.   <div class="controls">
  4.     <input type="text" id="inputWarning">
  5.     <span class="help-inline">Something may have gone wrong</span>
  6.   </div>
  7. </div>
  8.  
  9. <div class="control-group error">
  10.   <label class="control-label" for="inputError">Input with error</label>
  11.   <div class="controls">
  12.     <input type="text" id="inputError">
  13.     <span class="help-inline">Please correct the error</span>
  14.   </div>
  15. </div>
  16.  
  17. <div class="control-group info">
  18.   <label class="control-label" for="inputInfo">Input with info</label>
  19.   <div class="controls">
  20.     <input type="text" id="inputInfo">
  21.     <span class="help-inline">Username is already taken</span>
  22.   </div>
  23. </div>
  24.  
  25. <div class="control-group success">
  26.   <label class="control-label" for="inputSuccess">Input with success</label>
  27.   <div class="controls">
  28.     <input type="text" id="inputSuccess">
  29.     <span class="help-inline">Woohoo!</span>
  30.   </div>
  31. </div>

Buttons

Default buttons

Button styles can be applied to anything with the .btn class applied. However, typically you'll want to apply these to only <a> and <button> elements for the best rendering.

Button class="" Description
btn Standard gray button with gradient
btn btn-primary Provides extra visual weight and identifies the primary action in a set of buttons
btn btn-info Used as an alternative to the default styles
btn btn-success Indicates a successful or positive action
btn btn-warning Indicates caution should be taken with this action
btn btn-danger Indicates a dangerous or potentially negative action
btn btn-inverse Alternate dark gray button, not tied to a semantic action or use
btn btn-link Deemphasize a button by making it look like a link while maintaining button behavior

Cross browser compatibility

IE9 doesn't crop background gradients on rounded corners, so we remove it. Related, IE9 jankifies disabled button elements, rendering text gray with a nasty text-shadow that we cannot fix.

Button sizes

Fancy larger or smaller buttons? Add .btn-large, .btn-small, or .btn-mini for additional sizes.

  1. <p>
  2.   <button class="btn btn-large btn-primary" type="button">Large button</button>
  3.   <button class="btn btn-large" type="button">Large button</button>
  4. </p>
  5. <p>
  6.   <button class="btn btn-primary" type="button">Default button</button>
  7.   <button class="btn" type="button">Default button</button>
  8. </p>
  9. <p>
  10.   <button class="btn btn-small btn-primary" type="button">Small button</button>
  11.   <button class="btn btn-small" type="button">Small button</button>
  12. </p>
  13. <p>
  14.   <button class="btn btn-mini btn-primary" type="button">Mini button</button>
  15.   <button class="btn btn-mini" type="button">Mini button</button>
  16. </p>

Create block level buttons—those that span the full width of a parent— by adding .btn-block.

  1. <button class="btn btn-large btn-block btn-primary" type="button">Block level button</button>
  2. <button class="btn btn-large btn-block" type="button">Block level button</button>

Disabled state

Make buttons look unclickable by fading them back 50%.

Anchor element

Add the .disabled class to <a> buttons.

Primary link Link 

  1. <a href="#" class="btn btn-large btn-primary disabled">Primary link</a>
  2. <a href="#" class="btn btn-large disabled">Link</a>

Heads up! We use .disabled as a utility class here, similar to the common .active class, so no prefix is required. Also, this class is only for aesthetic; you must use custom JavaScript to disable links here.

Button element

Add the disabled attribute to <button> buttons.

  1. <button type="button" class="btn btn-large btn-primary disabled" disabled="disabled">Primary button</button>
  2. <button type="button" class="btn btn-large" disabled>Button</button>

One class, multiple tags

Use the .btn class on an <a>, <button>, or <input> element.

Link 
  1. <a class="btn" href="">Link</a>
  2. <button class="btn" type="submit">Button</button>
  3. <input class="btn" type="button" value="Input">
  4. <input class="btn" type="submit" value="Submit">

As a best practice, try to match the element for your context to ensure matching cross-browser rendering. If you have an input, use an <input type="submit"> for your button.

Images

Add classes to an <img> element to easily style images in any project.

140x140 nga bwe kiri 140x140 nga bwe kiri 140x140 nga bwe kiri 
  1. <img src="..." class="img-rounded">
  2. <img src="..." class="img-circle">
  3. <img src="..." class="img-polaroid">

Heads up! .img-rounded and .img-circle do not work in IE7-8 due to lack of border-radius support.

Icons by Glyphicons

Icon glyphs

140 icons in sprite form, available in dark gray (default) and white, provided by Glyphicons.

  • icon-glass
  • icon-music
  • icon-search
  • icon-envelope
  • icon-heart
  • icon-star
  • icon-star-empty
  • icon-user
  • icon-film
  • icon-th-large
  • icon-th
  • icon-th-list
  • icon-ok
  • icon-remove
  • icon-zoom-in
  • icon-zoom-out
  • icon-off
  • icon-signal
  • icon-cog
  • icon-trash
  • icon-home
  • icon-file
  • icon-time
  • icon-road
  • icon-download-alt
  • icon-download
  • icon-upload
  • icon-inbox
  • icon-play-circle
  • icon-repeat
  • icon-refresh
  • icon-list-alt
  • icon-lock
  • icon-flag
  • icon-headphones
  • icon-volume-off
  • icon-volume-down
  • icon-volume-up
  • icon-qrcode
  • icon-barcode
  • icon-tag
  • icon-tags
  • icon-book
  • icon-bookmark
  • icon-print
  • icon-camera
  • icon-font
  • icon-bold
  • icon-italic
  • icon-text-height
  • icon-text-width
  • icon-align-left
  • icon-align-center
  • icon-align-right
  • icon-align-justify
  • icon-list
  • icon-indent-left
  • icon-indent-right
  • icon-facetime-video
  • icon-picture
  • icon-pencil
  • icon-map-marker
  • icon-adjust
  • icon-tint
  • icon-edit
  • icon-share
  • icon-check
  • icon-move
  • icon-step-backward
  • icon-fast-backward
  • icon-backward
  • icon-play
  • icon-pause
  • icon-stop
  • icon-forward
  • icon-fast-forward
  • icon-step-forward
  • icon-eject
  • icon-chevron-left
  • icon-chevron-right
  • icon-plus-sign
  • icon-minus-sign
  • icon-remove-sign
  • icon-ok-sign
  • icon-question-sign
  • icon-info-sign
  • icon-screenshot
  • icon-remove-circle
  • icon-ok-circle
  • icon-ban-circle
  • icon-arrow-left
  • icon-arrow-right
  • icon-arrow-up
  • icon-arrow-down
  • icon-share-alt
  • icon-resize-full
  • icon-resize-small
  • icon-plus
  • icon-minus
  • icon-asterisk
  • icon-exclamation-sign
  • icon-gift
  • icon-leaf
  • icon-fire
  • icon-eye-open
  • icon-eye-close
  • icon-warning-sign
  • icon-plane
  • icon-calendar
  • icon-random
  • icon-comment
  • icon-magnet
  • icon-chevron-up
  • icon-chevron-down
  • icon-retweet
  • icon-shopping-cart
  • icon-folder-close
  • icon-folder-open
  • icon-resize-vertical
  • icon-resize-horizontal
  • icon-hdd
  • icon-bullhorn
  • icon-bell
  • icon-certificate
  • icon-thumbs-up
  • icon-thumbs-down
  • icon-hand-right
  • icon-hand-left
  • icon-hand-up
  • icon-hand-down
  • icon-circle-arrow-right
  • icon-circle-arrow-left
  • icon-circle-arrow-up
  • icon-circle-arrow-down
  • icon-globe
  • icon-wrench
  • icon-tasks
  • icon-filter
  • icon-briefcase
  • icon-fullscreen

Glyphicons attribution

Glyphicons Halflings are normally not available for free, but an arrangement between Bootstrap and the Glyphicons creators have made this possible at no cost to you as developers. As a thank you, we ask you to include an optional link back to Glyphicons whenever practical.

How to use

All icons require an <i> tag with a unique class, prefixed with icon-. To use, place the following code just about anywhere:

  1. <i class="icon-search"></i>

There are also styles available for inverted (white) icons, made ready with one extra class. We will specifically enforce this class on hover and active states for nav and dropdown links.

  1. <i class="icon-search icon-white"></i>

Heads up! When using beside strings of text, as in buttons or nav links, be sure to leave a space after the <i> tag for proper spacing.

Icon examples

Use them in buttons, button groups for a toolbar, navigation, or prepended form inputs.

Buttons

Button group in a button toolbar
  1. <div class="btn-toolbar">
  2.   <div class="btn-group">
  3.     <a class="btn" href="#"><i class="icon-align-left"></i></a>
  4.     <a class="btn" href="#"><i class="icon-align-center"></i></a>
  5.     <a class="btn" href="#"><i class="icon-align-right"></i></a>
  6.     <a class="btn" href="#"><i class="icon-align-justify"></i></a>
  7.   </div>
  8. </div>
Dropdown in a button group
User 
  1. <div class="btn-group">
  2.   <a class="btn btn-primary" href="#"><i class="icon-user icon-white"></i> User</a>
  3.   <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
  4.   <ul class="dropdown-menu">
  5.     <li><a href="#"><i class="icon-pencil"></i> Edit</a></li>
  6.     <li><a href="#"><i class="icon-trash"></i> Delete</a></li>
  7.     <li><a href="#"><i class="icon-ban-circle"></i> Ban</a></li>
  8.     <li class="divider"></li>
  9.     <li><a href="#"><i class="i"></i> Make admin</a></li>
  10.   </ul>
  11. </div>
Button sizes
Star Star Star 
  1. <a class="btn btn-large" href="#"><i class="icon-star"></i> Star</a>
  2. <a class="btn btn-small" href="#"><i class="icon-star"></i> Star</a>
  3. <a class="btn btn-mini" href="#"><i class="icon-star"></i> Star</a>

Navigation

  1. <ul class="nav nav-list">
  2.   <li class="active"><a href="#"><i class="icon-home icon-white"></i> Home</a></li>
  3.   <li><a href="#"><i class="icon-book"></i> Library</a></li>
  4.   <li><a href="#"><i class="icon-pencil"></i> Applications</a></li>
  5.   <li><a href="#"><i class="i"></i> Misc</a></li>
  6. </ul>

Form fields

  1. <div class="control-group">
  2.   <label class="control-label" for="inputIcon">Email address</label>
  3.   <div class="controls">
  4.     <div class="input-prepend">
  5.       <span class="add-on"><i class="icon-envelope"></i></span>
  6.       <input class="span2" id="inputIcon" type="text">
  7.     </div>
  8.   </div>
  9. </div>