Omusingi gwa CSS

Ku ntikko ya scaffolding, ebintu bya HTML ebikulu bikolebwako sitayiro era ne byongerwako kiraasi ezigaziwa okusobola okuwa endabika empya, ekwatagana n’okuwulira.

Emitwe & kkopi y'omubiri

Minzaani y’okuwandiika

Ekisenge kyonna eky’okuwandiika kyesigamiziddwa ku nkyukakyuka bbiri eza Less mu fayiro yaffe eya variables.less: @baseFontSizene @baseLineHeight. Ekisooka ye base font-size ekozesebwa wonna ate ekyokubiri ye base line-height.

Tukozesa enkyukakyuka ezo, n’okubala okumu, okukola margins, paddings, ne line-heights ez’ekika kyaffe kyonna n’ebirala.

Eky’okulabirako ekiwandiiko ky’omubiri

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.

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.

h1. Omutwe 1

h2. Omutwe 2

h3. Omutwe 3

h4. Omutwe 4

h5. Omutwe 5
h6. Omutwe 6

Okuggumiza, endagiriro, n’okufunza

Ekintu Enkozesa Kya kusalawo
<strong> Olw’okuggumiza akatundu k’ekiwandiiko n’ebikulu Tewali
<em> Olw’okuggumiza akatundu k’ekiwandiiko ng’olina situleesi Tewali
<abbr> Azinga ebifupi n'ebifupi okulaga enkyusa egaziyiziddwa ku hover

Muteekemu titleekintu eky'okwesalirawo eky'ebiwandiiko ebigaziyiziddwa

Kozesa .initialismkiraasi ku nfunyiro ennene.
<address> Okumanya ebikwata ku jjajjaawe asinga okumpi oba omubiri gwonna ogw’omulimu Kuuma ensengeka ng’omaliriza ennyiriri zonna ne<br>

Nga okozesa okuggumiza

Fusce dapibus , tellus ac cursus commodo , tortor mauris ekirungo ekizimbulukusa nibh , ekizimbulukusa massa justo okutuula amet risus. Ekimera ekiyitibwa Maecenas faucibus ekiwuka ekiyitibwa mollis ekiyitibwa interdum. Nulla vitae elit libero, eddagala eriyitibwa pharetra augue.

Note: Wulira nga oli waddembe okukozesa <b>era <i>mu HTML5, naye enkozesa yaabwe ekyuse katono. <b>kigendereddwamu okulaga ebigambo oba ebisoko awatali kutuusa bukulu bwa kwongerako ate nga <i>kisinga kuba kya ddoboozi, ebigambo eby’ekikugu n’ebirala.

Eby’okulabirako endagiriro

Wano waliwo ebyokulabirako bibiri ku ngeri <address>tag gy’esobola okukozesebwamu:

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890. Enkola y’okukozesa eddagala lino
Amannya mu bujjuvu
[email protected]

Eby’okulabirako ebifupi

Ebifupi ebirina titleekintu birina ensalosalo eya wansi eriko ennukuta entangaavu n’akabonero k’obuyambi ku hover. Kino kiwa abakozesa extra indication ekintu ekigenda okulagibwa ku hover.

Okwongerako initialismekibiina ku kifupi okwongera ku nkwatagana y’okuwandiika ng’okiwa obunene bw’ebiwandiiko obutono katono.

HTML kye kintu ekisinga obulungi okuva ku mugaati ogwasalibwa.

Enfunyiro y'ekigambo attribute ye attr .

Ebigambo ebiziyiza

Ekintu Enkozesa Kya kusalawo
<blockquote> Ekintu eky’omutendera gwa bbulooka eky’okujuliza ebirimu okuva mu nsibuko endala

Okwongerako citeekintu eky'ensibuko ya URL

Kozesa .pull-leftne .pull-rightclasses ku floated options
<small> Ekintu eky’okwesalirawo eky’okugattako ekijuliziddwa ekitunuulidde omukozesa, mu ngeri entuufu omuwandiisi alina omutwe gw’omulimu Teeka <cite>okwetooloola omutwe oba erinnya ly’ensibuko

Okussaamu ekigambo ekiziyiza, zingako HTML<blockquote> yonna nga ekijuliziddwa. Ku bigambo ebitereevu tusaba .<p>

Teekamu ekintu eky’okwesalirawo <small>okujuliza ensibuko yo era ojja kufuna em dash &mdash;nga tennabaawo olw’ebigendererwa by’okukola sitayiro.

  1. <okuziyiza>
  2. <p> Lorem ipsum dolor okutuula amet, okusengejja okusiiga elit. Ennamba enzijuvu posuere erat a ante venenatis. </p>
  3. <small> Omuntu ow'ettutumu </small>
  4. </blockquote> nga bwe kiri

Eky’okulabirako ebigambo ebiziyiza

Ebiwandiiko ebisookerwako bikolebwa sitayiro nga bwe biri:

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

Omuntu ow'ettutumu mu Body of work

Okulengejja blockquote yo ku ddyo, yongerako class="pull-right":

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

Omuntu ow'ettutumu mu Body of work

Enkalala

Etalagirwa

<ul>

  • 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

Etaliiko sitayiro

<ul class="unstyled">

  • 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

Yalagirwa

<ol>

  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

Okunnyonnyola

<dl>

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.

Ennyonyola ey’okwebungulula

<dl class="dl-horizontal">

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.

Emitwe gigulumivu! 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.

Mu layini

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

  1. Okugeza , ekitundu <code> < / code > kisaana 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>

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

Google Okulabika obulungi

Twala <pre>elementi y’emu era osseeko kiraasi bbiri ez’okwesalirawo okusobola okulongoosa mu kulaga.

  1. <p> Ekyokulabirako ky'ebiwandiiko wano... </p>
  1. <pre class = "ekiwandiiko ekirabika obulungi."
  2. linenums" >
  3. <p>Ekiwandiiko eky'okulabirako wano...</p>
  4. </pre>

Wano wefunire google-code-prettify era olabe readme engeri gy'okozesaamu.

Okuteeka obubonero ku mmeeza

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 mpagi (oba olunyiriri, okusinziira ku bunene n’okuteekebwa) ebiwandiiko
Kiteekwa okukozesebwa munda mu a<thead>
<caption> Ennyonyola oba mu bufunze ebyo emmeeza by’ekwata naddala eby’omugaso eri abasomi ku ssirini
  1. <emmeeza>
  2. <omutwe>
  3. <tr>
  4. <th> ... </th> nga bwe kiri
  5. <th> ... </th> nga bwe kiri
  6. </tr>
  7. </tomutwe>
  8. <omubiri>
  9. <tr>
  10. <td> ... </td> nga bwe kiri
  11. <td> ... </td> nga bwe kiri
  12. </tr>
  13. </tbody>
  14. </emmeeza>

Ebintu by’osobola okulonda ku mmeeza

Erinnya Essomo Okunnyonnyola
Okukosamu Tewali Tewali sitayiro, empagi n’ennyiriri zokka
Kya bulijjo .table Layini zokka eziwanvuye wakati w’ennyiriri
Eriko ensalo .table-bordered Azingulula enkoona n’ayongerako ensalosalo ey’ebweru
Zebra-omusono .table-striped Okwongera langi enzirugavu ennyo ey’emabega ku nnyiriri ezitali zimu (1, 3, 5, n’ebirala) .
Efuuse enfuufu .table-condensed Esala vertical padding mu bitundu bibiri, okuva ku 8px okutuuka ku 4px, munda mu byonna tdne thelements

Eby’okulabirako emmeeza

1. Emisono gy’emmeeza egy’enjawulo

Emmeeza zikolebwa mu ngeri ey’otoma nga zirina ensalosalo ntono zokka okukakasa nti zisoma n’okukuuma ensengeka. Nga olina 2.0, .tablekiraasi yeetaagibwa.

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

2. Emmeeza eriko emisono

Funa akatono akalungi n’emmeeza zo ng’oyongerako zebra-striping —mala yongera ku .table-stripedkiraasi.

Note: Emmeeza eziriko emisono zikozesa :nth-childCSS selector era teziri mu IE7-IE8.

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

3. Emmeeza eriko ensalosalo

Oteekamu ensalosalo okwetooloola emmeeza yonna n’enkoona ezeetooloovu okusobola okulabika obulungi.

  1. <table class = "emmeeza eriko ensalosalo" >
  2. ...
  3. </emmeeza>
# . 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

4. Emmeeza efuuse enfuufu

Fuula emmeeza zo okubeera enzibu ng’ogattako .table-condensedekibiina okusala padding y’obutoffaali bw’emmeeza mu bitundu bibiri (okuva ku 8px okutuuka ku 4px).

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

5. Byonna bigatte!

Wulira nga oli waddembe okugatta kiraasi yonna ku mmeeza okutuuka ku ndabika ez’enjawulo ng’okozesa kiraasi yonna eriwo.

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

HTML ne CSS ezikyukakyuka

Ekitundu ekisinga obulungi ku foomu mu Bootstrap kwe kuba nti byonna by’oyingiza n’ebifuga birabika bulungi nnyo ne bw’oba ​​obizimba otya mu markup yo. Tewali HTML esukkiridde yeetaagibwa, naye tuwa patterns eri abo abazeetaaga.

Ensengeka ezisingako obuzibu zijja ne kiraasi ennyimpimpi era ezisobola okulinnyisibwa okusobola okwanguyirwa okukola sitayiro n’okusiba ebibaddewo, kale obikkiddwa ku buli mutendera.

Ensengeka nnya nga mulimu

Bootstrap ejja n'obuwagizi bw'ebika bina eby'ensengeka za foomu:

  • Vertical (ekisookerwako) .
  • Okunoonya
  • Mu layini
  • Okwegolola

Ebika eby’enjawulo eby’ensengeka za foomu byetaaga enkyukakyuka ezimu okussaako akabonero, naye ebifuga byennyini bisigala era byeyisa kye kimu.

Control states n'ebirala

Ffoomu za Bootstrap zirimu sitayiro z'ebifuga byonna eby'omusingi nga okuyingiza, textarea, n'okulonda kw'osuubira. Naye era ejja n’ebitundu ebiwerako eby’enjawulo nga appended ne prepended inputs n’okuwagira enkalala za checkboxes.

Embeera nga ensobi, okulabula, n’obuwanguzi bibaamu ku buli kika ky’okufuga foomu. Era mulimu sitayiro z’okufuga abalema.

Ebika bya ffoomu bina

Bootstrap egaba markup ennyangu n'emisono ku sitayiro nnya eza foomu za web eza bulijjo.

Erinnya Essomo Okunnyonnyola
Vertical (ekisookerwako) . .form-vertical (tekyetaagisa) . Ebiwandiiko ebitumbiddwa, ebiteekeddwa ku kkono ku bifuga
Mu layini .form-inline Label ekwatagana ku kkono n'ebifuga inline-block ku sitayiro entono
Okunoonya .form-search Extra-rounded text input for a bulijjo okunoonya aesthetic
Okwegolola .form-horizontal Lengejja obubonero obulaga ku kkono, ku ddyo ku layini y’emu n’ebifuga

Ekyokulabirako foomu nga okozesa just form controls, tewali extra markup

Ffoomu enkulu

Smart era lightweight defaults nga tewali markup ya kwongerako.

Eky'okulabirako ekiwandiiko ky'obuyambi eky'omutendera gwa bulooka wano.

  1. <foomu kiraasi = "bulungi" >
  2. <label> Erinnya ly'akabonero </label>
  3. <input type = "text" class = "span3" ekifo = "Wandiika ekintu..." >
  4. <span class = "help-block" > Eky'okulabirako ekiwandiiko ky'obuyambi eky'omutendera gw'okuziyiza wano. </span>
  5. <label class = "akabokisi k'okukebera" >
  6. <input type = "checkbox" > Nkebera
  7. </label>
  8. <button type = "okuweereza" class = "btn" > Okuwaayo </button>
  9. </form>

Ffoomu y’okunoonya

Okwongera .form-searchku foomu ne .search-queryku input.

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

Ffoomu mu layini

Okwongera .form-inlineku finesse vertical alignment n'ebanga ly'ebifuga ffoomu.

  1. <form class = "bulungi ffoomu-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>

Ebifaananyi eby’okwebungulula

Ku ddyo biragiddwa byonna ebifuga foomu ebisookerwako bye tuwagira. Laba wano olukalala lw'amasasi:

  • ebiyingizibwa mu biwandiiko (ebiwandiiko, ekigambo ky’okuyingira, email, n’ebirala) .
  • akabokisi akalaga nti
  • leediyo
  • okulonda
  • okulonda emirundi mingi
  • okuyingiza fayiro
  • ekitundu ky’ebiwandiiko

Ng’oggyeeko ebiwandiiko eby’eddembe, okuyingiza kwonna okwesigamiziddwa ku biwandiiko bya HTML5 kulabika nga bwe kutyo.

Ekyokulabirako eky’okussaako akabonero

Kubanga waggulu ekyokulabirako ensengeka ya foomu, wuuno akabonero akakwatagana n'ekibinja ekisooka eky'okuyingiza n'okufuga. Ebika bya .control-group, .control-label, ne .controlsbyonna byetaagibwa okukola sitayiro.

  1. < ekibiina kya ffoomu = "ekifaananyi-eky'okwebungulula" >
  2. <ekifo ky'ennimiro>
  3. <legend> Ekiwandiiko ky'olugero </legend>
  4. <div class = "ekibinja-ekifuga" >
  5. <label class = "control-label" for = "okuyingiza01" > Okuyingiza ebiwandiiko </label>
  6. <div class = "ebifuga" >
  7. < ekika ky'okuyingiza = "ekiwandiiko" ekibiina = "okuyingiza-xlarge" id = "okuyingiza01" >
  8. <p class = "help-block" > Ekiwandiiko ky'obuyambi ekiwagira </p>
  9. </div> nga bwe kiri
  10. </div> nga bwe kiri
  11. </ennimiroset>
  12. </form>

Ffoomu efuga embeera

Bootstrap erimu emisono egy'okussa essira n'embeera eziwagirwa browser disabled. Tuggyawo Webkit eya bulijjo outlinene tussaako a box-shadowmu kifo kyayo ku :focus.


Okukakasa foomu

Era erimu emisono gy'okukakasa ensobi, okulabula, n'obuwanguzi. Okukozesa, yongera ekibiina ky'ensobi ku kyetoolodde .control-group.

  1. <ekifo ky'ennimiro
  2. class = "ensobi y'ekibinja ekifuga" >
  3. ...
  4. </ennimiroset>
Abamu wano batwala nga ba muwendo
Kiyinza okuba nga waliwo ekikyamu
Nsaba otereeze ensobi
Woohoo!
Woohoo!

Okugaziya ebifuga foomu

Prepend & okugattako ebiyingizibwa

Ebibinja by’ebiyingizibwa —nga biriko ebiwandiiko ebigattibwako oba ebiwandiikiddwa nga tebinnabaawo —biwa engeri ennyangu ey’okuwa ensonga ezisingawo ku biyingizibwa byo. Ebyokulabirako ebikulu mulimu akabonero ka @ ak’amannya g’abakozesa Twitter oba $ ku by’ensimbi.


Ebibokisi ebikebera ne leediyo

Okutuuka ku v1.4, Bootstrap yali yeetaaga markup ey’enjawulo okwetoloola checkboxes ne radios okuziteeka. Kati, nsonga nnyangu ey'okuddiŋŋana <label class="checkbox">ekizinga <input type="checkbox">.

Inline checkboxes ne radios nabyo biwagirwa. Just add .inlineto any .checkboxoba .radioera omaze.


Ffoomu mu layini n’okugattako/okusooka okussaako

Okukozesa prepend oba append inputs mu inline form, kakasa nti oteeka .add-onne inputku line y’emu, awatali spaces.


Foomu ekiwandiiko ky’obuyambi

Okwongerako ekiwandiiko ky'obuyambi ku biyingizibwa byo mu foomu, ssaamu ekiwandiiko ky'obuyambi mu layini nga kiriko <span class="help-inline">oba ekiziyiza ky'ekiwandiiko ky'obuyambi nga kiriko <p class="help-block">oluvannyuma lw'ekintu ky'okuyingiza.

Kozesa .span*kiraasi ze zimu okuva mu nkola ya grid ku sayizi z’ebiyingizibwa.

Oyinza n'okukozesa kiraasi ezitakyukakyuka ezitakola maapu ku giridi, okutuukagana n'emisono gya CSS egy'okuddamu, oba okubala ebika by'ebifuga eby'enjawulo (okugeza, inputvs. select).

@

Wano waliwo obubaka obuyamba

.00 nga bwe kiri
Wano waliwo obubaka obulala obuyamba
$ .00 nga bwe kiri

Weetegereze: Ebiwandiiko byetoolodde byonna eby’okulondako eby’ebitundu ebinene ennyo eby’okunyiga ne ffoomu esinga okukozesebwa.

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

Buttons z’ebikolwa

Nga enkola, buttons zirina okukozesebwa ku bikolwa byokka so nga hyperlinks zirina okukozesebwa ku bintu. Okugeza, "Download" erina okuba button ate "recent activity" erina okuba link.

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

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.

Sayizi eziwera

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


Embeera ebalema

Ku buttons ezilema, yongera .disabledkiraasi ku links disabledn'ekintu <button>eky'ebintu.

Enkolagana enkulu Okuyunga

Emitwe gigulumivu! Tukozesa .disablednga kiraasi y’omugaso wano, okufaananako ne .activekiraasi eya bulijjo, kale tewali ntandikwa yeetaagibwa.

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 = "okuwaayo" >
  3. Eppeesa
  4. </button>
  5. < ekibiina ky'okuyingiza = "btn" ekika = "button".
  6. omuwendo = "Okuyingiza" >
  7. <input class = "btn" ekika = "okuwaayo".
  8. value = "Waayo" >

Nga enkola esinga obulungi, gezaako okukwataganya ekintu ku ggwe context okukakasa okukwatagana cross-browser rendering. Bw’oba ​​olina input, kozesa <input type="submit">ku bbaatuuni yo.

  • 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

Yazimbibwa nga sprite

Mu kifo ky’okufuula buli kabonero okusaba okw’enjawulo, tubikuŋŋaanyizza mu sprite —ekibinja ky’ebifaananyi mu fayiro emu ekozesa CSS okuteeka ebifaananyi ne background-position. Eno y’enkola y’emu gye tukozesa ku mukutu gwa Twitter.com era etukoledde bulungi.

Ebika byonna eby’ebifaananyi bisookerwako n’okuteeka ebanga mu .icon-mannya amatuufu n’okupima obuwanvu, okufaananako nnyo ebitundu byaffe ebirala. Kino kijja kuyamba okwewala okukontana n’ebikozesebwa ebirala.

Glyphicons etukkirizza okukozesa Halflings eziteekeddwa mu open-source toolkit yaffe kasita tuwa link n'ebbanja wano mu docs. Nsaba olowooze ku ky’okukola kye kimu mu pulojekiti zo.

Engeri y’okukozesaamu

Bootstrap ekozesa <i>tag ku bifaananyi byonna, naye tebirina case class —entandikwa yokka egabanyizibwa. 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:

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

Waliwo kiraasi 140 z’osobola okulondamu ku bifaananyi byo. Just add an <i>tag nga eriko classes entuufu era obeera set. Olukalala lwonna osobola okulusanga mu sprites.less oba wano wennyini mu kiwandiiko kino.

Emitwe gigulumivu! 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.

Kozesa emisango

Ebifaananyi birungi nnyo, naye omuntu yandibikozesezza wa? Wano waliwo ebirowoozo ebitonotono:

  • Nga ebifaananyi eby'okutambulira ku sidebar yo
  • Ku lw’okutambulira ku bifaananyi byokka
  • Ku butambi okuyamba okutuusa amakulu g’ekikolwa
  • Nga erina enkolagana okugabana embeera ku kifo omukozesa w'agenda

Mu bukulu, wonna w’osobola okuteeka <i>tag, osobola okuteeka akabonero.

Eby’okulabirako

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