Ebitundu ebikola omubiri

Ebitundu ebiwera ebisobola okuddamu okukozesebwa bizimbibwa mu Bootstrap okusobola okuwa okutambulira, okulabula, popovers, n’ebirala bingi.

Ebibinja bya button

Kozesa ebibinja bya button okugatta button eziwera wamu nga ekitundu kimu ekigatta. Zizimbe n’omuddirirwa gwa <a>oba <button>elementi.

Enkola ezisinga obulungi

Tukuwa amagezi ku ndagiriro zino wammanga ez'okukozesa ebibinja bya button n'ebikozesebwa:

  • Bulijjo kozesa ekintu kye kimu mu kibinja kya button emu, <a>oba <button>.
  • Totabula button za langi ez'enjawulo mu kibinja kya button kimu.
  • Kozesa ebifaananyi nga kwotadde oba mu kifo ky’ebiwandiiko, naye kakasa nti oteekemu alt n’ebiwandiiko by’omutwe we kisaanidde.

Ebibinja bya Button ebikwatagana ebirina ebigwa (laba wansi) bisaana okuyitibwa okwawukana era bulijjo bibeeremu caret egwa wansi okulaga enneeyisa egendereddwa.

Ekyokulabirako ekisookerwako

Laba engeri HTML gy’enoonya ekibinja kya button ekya bulijjo ekizimbibwa ne buttons za anchor tag:

  1. <div ekibiina = "btn-ekibinja" >
  2. < ekibiina kya button = "btn" > 1 </button>
  3. < ekibiina kya button = "btn" > 2 </button>
  4. < ekibiina kya button = "btn" > 3 </button>
  5. </div> nga bwe kiri

Ekyokulabirako ky’ebbaala y’ebikozesebwa

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

  1. <div class = "btn-ebbaala y'ebikozesebwa" >
  2. <div ekibiina = "btn-ekibinja" >
  3. ...
  4. </div> nga bwe kiri
  5. </div> nga bwe kiri

Checkbox ne buwoomi bwa leediyo

Ebibinja bya button era bisobola okukola nga leediyo, nga button emu yokka eyinza okuba nga ekola, oba checkboxes, nga button yonna eyinza okuba nga ekola. Laba ebiwandiiko bya Javascript ku ekyo.

Funa ekiwandiiko kya Javascript »

Ebintu ebigwa mu bibinja bya button

Emitwe gigulumivu! Buttons ezirina dropdowns zirina okuzingibwa kinnoomu mu zazo .btn-groupmunda mu a .btn-toolbarfor proper rendering.

Ebintu ebigwa ku button

Ekyokulabirako eky’okussaako akabonero

Okufaananako n’ekibinja kya button, markup yaffe ekozesa button markup eya bulijjo, naye nga waliwo n’engalo entonotono ez’okwongerako okulongoosa sitayiro n’okuwagira Bootstrap’s dropdown jQuery plugin.

  1. <div ekibiina = "btn-ekibinja" >
  2. <a class = "btn okugwa-okukyusa" data-okukyusa = "okugwa" href = "#" >
  3. Okikolwa
  4. <span class = "okulabirira" </span>
  5. </a>
  6. <ul class = "menu-egwa wansi" >
  7. <!-- ebiyungo bya menu egwa wansi -->
  8. </ul>
  9. </div> nga bwe kiri

Ekola ne sayizi za button zonna

Button dropdowns zikola ku sayizi yonna. obunene bwa button yo okutuuka ku .btn-large, .btn-small, oba .btn-mini.

Yeetaaga javascript

Ebiwandiiko bya button byetaaga Bootstrap dropdown plugin okukola.

Mu mbeera ezimu —nga essimu —menyu ezikka wansi zijja kugaziwa ebweru w’ekifo eky’okulaba. Olina okugonjoola alignment mu ngalo oba ne custom javascript.


Split button ezigwa wansi

Okulaba okutwalira awamu n’ebyokulabirako

Nga tuzimba ku sitayiro z’ekibinja kya button ne markup, tusobola bulungi okukola button eyawuddwamu. Split buttons ziraga ekikolwa ekya bulijjo ku kkono ate dropdown toggle ku ddyo nga eriko contextual links.

Sayizi ezitali zimu

Kozesa ebika bya button eby'enjawulo .btn-mini, .btn-small, oba .btn-largeokugerageranya obunene.

  1. <div ekibiina = "btn-ekibinja" >
  2. ...
  3. <ul class = "okugwa-menu okusika-ku ddyo" >
  4. <!-- ebiyungo bya menu egwa wansi -->
  5. </ul>
  6. </div> nga bwe kiri

Ekyokulabirako eky’okussaako akabonero

Tugaziya ku button dropdowns eza bulijjo okuwa button ekikolwa ekyokubiri ekikola nga dropdown trigger eyawukana.

  1. <div ekibiina = "btn-ekibinja" >
  2. <button class = "btn" > Ekikolwa </button>
  3. <button class = "btn okugwa-okukyusa" data-okukyusa = "okugwa" >
  4. <span class = "okulabirira" </span>
  5. </button>
  6. <ul class = "menu-egwa wansi" >
  7. <!-- ebiyungo bya menu egwa wansi -->
  8. </ul>
  9. </div> nga bwe kiri

Menyu ezigwa

Menyu ezikka wansi nazo zisobola okukyusibwa okuva wansi okudda waggulu nga zongerako kiraasi emu ku muzadde ow'amangu owa .dropdown-menu. Kijja kukyusa obulagirizi bwa .caretera kiddemu okuteeka menu yennyini okuva wansi waggulu mu kifo ky’okudda waggulu wansi.

  1. <div class = "okugwa kw'ekibinja kya btn" >
  2. < ekibiina kya button = "btn" > Okusuula </button>
  3. <button class = "btn okugwa-okukyusa" data-okukyusa = "okugwa" >
  4. <span class = "okulabirira" </span>
  5. </button>
  6. <ul class = "menu-egwa wansi" >
  7. <!-- ebiyungo bya menu egwa wansi -->
  8. </ul>
  9. </div> nga bwe kiri

Okuwandiika empapula ez’emiko egy’enjawulo

Ddi lw’olina okukozesa

Ultra simplistic and minimally styled pagination okuluŋŋamizibwa Rdio, kirungi nnyo ku apps n'ebivudde mu kunoonyereza. Bbulooka ennene nzibu okusubwa, nnyangu okulinnyisibwa, era egaba ebifo ebinene eby’okunyiga.

Enkolagana z’olupapula eziriko embeera

Links zisobola okukyusibwa era zikola mu mbeera eziwerako nga zirina kiraasi entuufu. .disabledku links ezitayinza kunyiga .activen'olupapula oluliwo kati.

Okulaganya okukyukakyuka

Okwongerako emu ku kiraasi bbiri ez'okwesalirawo okukyusa ensengeka y'enkolagana z'emiko: .pagination-centeredne .pagination-right.

Eby’okulabirako

Ekitundu ky'okukuba empapula ekisookerwako kikyukakyuka era kikola mu nkyukakyuka eziwerako.

Okuteeka obubonero

Nga zizingiddwa mu <div>, empapula ziba <ul>.

  1. <div class = "okuwandiika empapula" >
  2. <ul> nga bwe kiri
  3. <li><a href = "#" > Eddako </a></li>
  4. <li kiraasi = "ekola" >
  5. <a href = "#" > 1 </a>
  6. </li>
  7. <li><a href = "#" > 2 </a></li> Okugema abaana abato
  8. <li><a href = "#" > 3 </a></li> Enkola y'okukozesa eddagala lino
  9. <li><a href = "#" > 4 ​​</a></li> Ebikwata ku nsonga eno
  10. <li><a href = "#" > Ekiddako </a></li>
  11. </ul>
  12. </div> nga bwe kiri

Pager Okufuna link ez'amangu eziyise n'eziddako

Ebikwata ku pager

Ekitundu kya pager kye kibinja ky'enkolagana ez'okussa mu nkola empapula ennyangu nga zirina obubonero obw'ekitangaala n'emisono egy'amaanyi n'okusingawo. Kirungi nnyo ku mikutu egyangu nga blogs oba magazines.

Embeera ebalema ey'okwesalirawo

Pager links nazo zikozesa .disabledkiraasi eya bulijjo okuva ku mpapula.

Ekyokulabirako ekisookerwako

Nga bwekiba, pager eteeka wakati enkolagana.

  1. <ul ekibiina = "pager" >
  2. <li> nga bwe kiri
  3. <a href = "#" > Eddako </a>
  4. </li>
  5. <li> nga bwe kiri
  6. <a href = "#" > Ekiddako </a>
  7. </li>
  8. </ul>

Enkolagana ezikwatagana

Ekirala, osobola okulaganya buli link ku mabbali:

  1. <ul ekibiina = "pager" >
  2. <li class = "eyali emabega" >
  3. <a href = "#" > era nga bwe kiri; Abakadde </a>
  4. </li>
  5. <li class = "ekiddako" >
  6. <a href = "#" > Ebipya → </a>
  7. </li>
  8. </ul>
Ebiwandiiko ebiwandiikibwako Okuteeka obubonero
Okukosamu <span class="label">Default</span>
Okuyita <span class="label label-success">Success</span>
Okulabula <span class="label label-warning">Warning</span>
Mugaso <span class="label label-important">Important</span>
Info <span class="label label-info">Info</span>
Inverse <span class="label label-inverse">Inverse</span>

Ku

Baagi bitundu bitono, ebyangu eby’okulaga ekiraga oba okubala okw’ekika ekimu. Zitera okusangibwa mu email clients nga Mail.app oba ku mobile apps for push notifications.

Ebisulo ebiriwo

Erinnya Eky'okulabirako Okuteeka obubonero
Okukosamu 1. <span class="badge">1</span>
Okuyita 2. <span class="badge badge-success">2</span>
Okulabula 4. <span class="badge badge-warning">4</span>
Mugaso 6. <span class="badge badge-important">6</span>
Info 8. <span class="badge badge-info">8</span>
Inverse 10. 10 <span class="badge badge-inverse">10</span>

Ekitundu ky’omuzira

Bootstrap ekuwa ekitundu ekizitowa, ekikyukakyuka ekiyitibwa hero unit okulaga ebirimu ku mukutu gwo. Kikola bulungi ku mikutu egy’okutunda n’okubeera n’ebirimu ebingi.

Okuteeka obubonero

Zinga ebirimu byo mu divlike so:

  1. <div class = "omuzira-ekitundu" >
  2. <h1> Omutwe </h1>
  3. <p> Omutwe gw'ebigambo </p>
  4. <p> nga bwe kiri
  5. <a class = "btn btn-ekisookerwako btn-ekinene" >
  6. Manya ebisingawo
  7. </a>
  8. </p>
  9. </div> nga bwe kiri

Mwasuze mutya ensi!

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

Manya ebisingawo

Omutwe gw’olupapula

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

  1. <div class = "omutwe-olupapula" >
  2. <h1> Eky'okulabirako omutwe gw'olupapula </h1>
  3. </div> nga bwe kiri

Ebifaananyi ebitonotono ebisookerwako

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

Esobola okukyusibwakyusibwa ennyo

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

  • Ekiwandiiko ekitonotono

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

    Okikolwa Okikolwa

  • Ekiwandiiko ekitonotono

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

    Okikolwa Okikolwa

Lwaki okozesa ebifaananyi ebitonotono

Ebifaananyi ebitonotono (edda .media-gridokutuuka ku v1.4) birungi nnyo ku grids z’ebifaananyi oba vidiyo, ebivudde mu kunoonya ebifaananyi, ebintu eby’amaduuka, portfolios, n’ebirala bingi. Ziyinza okuba enkolagana oba ebirimu ebitali bikyukakyuka.

Markup ennyangu, ekyukakyuka

Okuteeka akabonero ku kifaananyi ekitono kyangu —a n’omuwendo ulgwonna ogw’ebintu likye kyokka ekyetaagisa. Era super flexible, esobozesa ekika kyonna eky'ebirimu nga olina markup katono nnyo okuzinga ebirimu byo.

Akozesa obunene bw’ennyiriri za giridi

Ekisembayo, ekitundu ky’ebifaananyi ebitono kikozesa ebika by’enkola ya grid ebiriwo —nga .span2oba .span3—okufuga ebipimo by’ebifaananyi ebitono.

Eky’okussaako akabonero

Nga bwe kyayogeddwako emabegako, markup ekyetaagisa ku bifaananyi ebitonotono eba nnyangu era nnyangu. Laba wano ensengeka esookerwako ey'ebifaananyi ebiyungiddwa :

  1. <ul class = "ebifaananyi ebitonotono" >
  2. <li kiraasi = "span3" >
  3. <a href = "#" class = "ekifaananyi ekitono" >
  4. <img src = "Ekifo eky'okutwala mu kifo kino/260x180" alt = "" >
  5. </a>
  6. </li>
  7. ...
  8. </ul>

Ku birimu HTML eby’enjawulo mu bifaananyi ebitonotono, akabonero kakyuka katono. Okukkiriza ebirimu ku mutendera gwa block wonna, tukyusakyusa the <a>for a <div>like so:

  1. <ul class = "ebifaananyi ebitonotono" >
  2. <li kiraasi = "span3" >
  3. <div class = "ekifaananyi ekitono" >
  4. <img src = "Ekifo eky'okutwala mu kifo kino/260x180" alt = "" >
  5. <h5> Ekiwandiiko ekitono < /h5>
  6. <p> Ebigambo ebitonotono wano wennyini... </p>
  7. </div> nga bwe kiri
  8. </li>
  9. ...
  10. </ul>

Ebyokulabirako ebirala

Yeekenneenya byonna by’osobola okulondako n’ebika bya grid eby’enjawulo ebiriwo gy’oli. Osobola n’okutabula n’okukwataganya sayizi ez’enjawulo.

Ebisookerwako ebizitowa

Ekibiina kya base ekiddamu okuwandiikibwa

Nga tulina Bootstrap 2, twanguyizza ekibiina ekikulu: .alertmu kifo kya .alert-message. Era tukendeezezza ku bubonero obutono obwetaagisa—nedda <p>kyetaagisa mu butonde, eky’ebweru kyokka <div>.

Obubaka bumu obw’okulabula

Ku kitundu ekiwangaala ennyo nga kiriko koodi entono, tuggyewo entunula ey’enjawulo ey’okulabula okuziyiza, obubaka obujja ne padding nnyingi ate mu ngeri entuufu ebiwandiiko bingi. Ekibiina nakyo kikyuse ne kifuuka .alert-block.


Agenda bulungi ne javascript

Bootstrap ejja ne jQuery plugin ennungi ewagira obubaka obw’okulabula, ekifuula okubugoba okwangu era okwangu.

Funa ekintu ekiyitibwa plugin »

Eky’okulabirako okulabula

Zinga obubaka bwo n'akabonero k'okuggalawo ak'okwesalirawo mu div ne kiraasi ennyangu.

Okulabula! Best check yo self, tolabika bulungi nnyo.
  1. <div class = "okulabula" >
  2. <button class = "okuggalawo" data-okugoba = "okulabula" > × </button>
  3. <strong> Okulabula! </strong> Best check yo self, tolabika bulungi nnyo.
  4. </div> nga bwe kiri

Emitwe gigulumivu! Ebyuma bya iOS byetaaga an href="#"for the dismissal of alerts. Kakasa nti ogiteekamu n'ekintu kya data eky'ebifaananyi eby'okuggalawo ennanga. Ekirala, oyinza okukozesa <button>elementi erimu data attribute, kye twasalawo okukola ku docs zaffe. Bw’oba ​​okozesa <button>, olina okussaamu type="button"oba foomu zo ziyinza obutawaayo.

Kyangu okugaziya obubaka obw'okulabula obwa bulijjo n'ebika bibiri eby'okwesalirawo: .alert-blockokufuna padding okusingawo n'okufuga ebiwandiiko .alert-headingn'omutwe ogukwatagana.

Okulabula!

Best check yo self, tolabika bulungi nnyo. Nulla vitae elit libero, eddagala eriyitibwa pharetra augue. Ennyonyi eziyitibwa commodo cursus magna, vel scelerisque nisl ezikwatagana n’ebiramu ebiyitibwa.

  1. <div class = "okulabula-okuziyiza" >
  2. <a class = "okuggalawo" data-dismiss = "okulabula" href = "#" > × </a>
  3. <h4 class = "omutwe-okulabula" > Okulabula! </h4>
  4. Best check yo self, nga tolina...
  5. </div> nga bwe kiri

Ebikozesebwa mu mbeera Okwongerako ebika eby'okwesalirawo okukyusa amakulu g'okulabula

Ensobi oba akabi

Oh snap! Kyusa ebintu ebitonotono waggulu ogezeeko okuddamu okuleeta.
  1. <div class = "okulabula-ensobi" >
  2. ...
  3. </div> nga bwe kiri

Okuyita

Gyebaleko! Osoma bulungi obubaka buno obukulu obw’okulabula.
  1. <div class = "okulabula-obuwanguzi" >
  2. ...
  3. </div> nga bwe kiri

Obubaka

Emitwe gigulumivu! Alert eno yeetaaga attention yo, naye si super important.
  1. <div class = "okulabula okulabula-amawulire" >
  2. ...
  3. </div> nga bwe kiri

Eby’okulabirako n’okussaako obubonero

Kya bulijjo

Ebbaala y'enkulaakulana eya bulijjo nga eriko ekisengejjo ekyesimbye.

  1. <div class = "okukulaakulana" >
  2. <div kiraasi = "ebbaala".
  3. style = " obugazi : 60 %; " ></div>
  4. </div> nga bwe kiri

Emisono egy’enjawulo

Akozesa gradient okukola striped effect (tewali IE).

  1. <div class = "enkulaakulana enkulaakulana-striped" >
  2. <div kiraasi = "ebbaala".
  3. style = " obugazi : 20 %; " ></div>
  4. </div> nga bwe kiri

Ebifaananyi ebirina obulamu

Atwala ekyokulabirako eky’emisono n’akifuula obulamu (tewali IE).

  1. <div class = "enkulaakulana enkulaakulana-striped."
  2. ekikola" >
  3. <div kiraasi = "ebbaala".
  4. style = " obugazi : 40 %; " ></div>
  5. </div> nga bwe kiri

Ebintu by’osobola okulonda n’obuwagizi bwa browser

Langi endala

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

Ebbaala eziriko emisono

Okufaananako ne langi ennywevu, tulina ebbaala ez’enjawulo eziriko emisono egy’okukulaakulana.

Enneeyisa

Progress bars zikozesa enkyukakyuka za CSS3, kale singa otereeza obugazi mu ngeri ey’amaanyi ng’oyita mu javascript, ejja kukyusa obunene obulungi.

Bw’okozesa .activeekibiina, .progress-stripedebbaala zo ez’enkulaakulana zijja kukola emisono egy’obulamu okuva ku kkono okudda ku ddyo.

Obuwagizi bwa Browser

Progress bars zikozesa CSS3 gradients, enkyukakyuka, ne animations okutuuka ku bikolwa byabwe byonna. Ebintu bino tebiwagirwa mu IE7-9 oba enkyusa za Firefox enkadde.

Opera ne IE teziwagira animations mu kiseera kino.

Enzizi

Kozesa oluzzi nga effect ennyangu ku elementi okugiwa inset effect.

Laba ndi mu luzzi!
  1. <div class = "bulungi" >
  2. ...
  3. </div> nga bwe kiri

Ggalawo ekifaananyi

Kozesa akabonero k'okuggalawo aka bulijjo okugoba ebirimu nga modals n'okulabula.

  1. < ekibiina kya button = "okuggalawo" > &emirundi; </button>

Ebyuma bya iOS byetaaga href="#" for click events singa oba oyagala okukozesa anchor.

  1. <a class = "okuggalawo" href = "#" > &emirundi; </a>