Qaamolee

Qaamonni irra deebiin itti fayyadamuu danda'an kudhanootaan lakkaa'aman Bootstrap keessatti ijaaramanii navigeeshinii, akeekkachiisa, popovers, fi waan baay'ee kennuudhaaf.

Gareewwan buttooni

Gareewwan qaree fayyadamii qaree hedduu akka qaama walmakaa tokkootti walitti makuuf. Isaanis tartiiba <a>ykn <button>elementoota waliin ijaari.

Muuxannoo gaarii

Gareewwan qaree fi barruulee meeshaalee fayyadamuuf qajeelfama armaan gadii ni gorsina:

  • Yeroo hunda qaama walfakkaataa garee qaree tokko keessatti fayyadami, <a>ykn <button>.
  • Garee qaree tokko keessatti qaree halluu adda addaa hin makiin.
  • Mallattoolee barruu dabalataa ykn bakka barruu fayyadami, garuu bakka barbaachisaa ta'etti barruu alt fi mata duree hammachuu mirkaneessi.

Gareen Qabduu walqabatan kanneen gadi bu'iinsa qaban (armaan gaditti ilaali) addaan waamamuu qabu fi yeroo hunda amala yaadame agarsiisuuf caret gadi bu'aa of keessaa qabaachuu qabu.

Fakkeenya durtii

Akkaataa HTML garee qaree istaandaardii qaree mallattoo anchor wajjin ijaarame barbaadu kunooti:

  1. <div gita = "btn-garee" >
  2. <buttooni gita = "btn" > 1 </button>
  3. <qabduu gita = "btn" > 2 </button>
  4. <qabduu gita = "btn" > 3 </button>
  5. </div> jechuun ni danda’ama

Fakkeenya barruu meeshaa

Tuutawwan of <div class="btn-group">gara <div class="btn-toolbar">atti qaamolee walxaxaa ta'aniif walitti makuu.

  1. <div class = "btn-barruu meeshaa" >
  2. <div gita = "btn-garee" >
  3. ...
  4. </div> jechuun ni danda’ama
  5. </div> jechuun ni danda’ama

Sanduuqa filannoo fi mi'aawwan raadiyoo

Gareen qaree akka raadiyoottis hojjechuu danda'u, bakka qaree tokko qofti socho'uu danda'u, ykn sanduuqawwan filannoo, bakka qaree lakkoofsi kamiyyuu socho'uu danda'u. Sanaaf docs Javascript ilaali .

Javascript argadhaa »

Garee qaree keessatti gadi bu'aa

Mataa ol qaba! Qabduulee gadi bu'oo qaban dhuunfaan kan isaanii .btn-groupkeessatti a keessaa marfamuu qabu .btn-toolbarsirriitti agarsiisuuf.

Qabduu kan gadi bu'u

Fakkeenya mallattoo

Garee qaree wajjin wal fakkaata, mallattoon keenya mallattoo qaree idilee fayyadama, garuu dabalata muraasaan akkaataa fooyyessuu fi Bootstrap's dropdown jQuery plugin deeggaruuf.

  1. <div gita = "btn-garee" >
  2. <a class = "btn gadi-bu'aa-jijjiirraa" deetaa-jijjiirraa = "gara-bu'aa" href = "#" >
  3. Gocha
  4. <span gita = "kaartaa" </span>
  5. </a> jechuun ni danda’ama
  6. <ul class = "tarree-gadi-bu'aa" >
  7. <!-- hidhamtoota menu gadi bu'aa -->
  8. </ul> jechuun ni danda’ama
  9. </div> jechuun ni danda’ama

Safara buttooni hunda waliin hojjeta

Button dropdowns guddina kamiinuu hojjetu. safara qaree kee gara .btn-large, .btn-small, ykn .btn-mini.

Javascript barbaada

Tarreewwan qaree akka hojjetuuf ifteessaan tarree Bootstrap barbaadu .

Haala tokko tokko keessatti—akkuma mobaayilaa—menuuwwan gadi bu'an balbala ilaalchaatiin ala ni babal'atu. Hiriirsa harkaan ykn javascript amalaatiin furuu qabda.


Tarreewwan qaree addaan qoodi

Haala waliigalaa fi fakkeenya

Akkaataa garee qaree fi mallattoo irratti ijaaruun, salphaatti qaree qoqqoodinsaa uumuu dandeenya. Qabduulee qoqqoodinsaa gocha istaandaardii bitaa fi jijjiirraa gadi bu'aa mirga irratti hidhannoowwan haalata waliin agarsiisu.

Saayiziiwwan

Gitoota qaree dabalataa .btn-mini, .btn-small, ykn .btn-largesafaraaf fayyadami.

  1. <div gita = "btn-garee" >
  2. ...
  3. <ul class = "tarree-gadi-bu'aa harkisaa-mirga" >
  4. <!-- hidhamtoota menu gadi bu'aa -->
  5. </ul> jechuun ni danda’ama
  6. </div> jechuun ni danda’ama

Fakkeenya mallattoo

Tarkaanfii qaree lammaffaa akka kaka'umsa tarree adda ta'etti hojjetu kennuudhaaf tarreewwan qaree idilee irratti bal'isna.

  1. <div gita = "btn-garee" >
  2. <button class = "btn" > Tarkaanfii </button>
  3. <button class = "btn gadi bu'aa-jijjiirraa" deetaa-jijjiirraa = "gara bu'aa" >
  4. <span gita = "kaartaa" </span>
  5. </button> jedhu
  6. <ul class = "tarree-gadi-bu'aa" >
  7. <!-- hidhamtoota menu gadi bu'aa -->
  8. </ul> jechuun ni danda’ama
  9. </div> jechuun ni danda’ama

Menuuwwan gadi bu'an

Menuuwwan gadi bu'aa akkasumas gita tokko warra battalumatti dabaluudhaan jalaa gara oliitti jijjiiruun ni danda'ama .dropdown-menu. Kallattii garagalcha .caretfi menu ofii isaatii irra deebi'ee bakka gubbaa gadi osoo hin taane jalaa gara oliitti socho'a.

  1. <div class = "btn-garee gadi bu'uu" >
  2. <button class = "btn" > Gadi bu'uu </button>
  3. <button class = "btn gadi bu'aa-jijjiirraa" deetaa-jijjiirraa = "gara bu'aa" >
  4. <span gita = "kaartaa" </span>
  5. </button> jedhu
  6. <ul class = "tarree-gadi-bu'aa" >
  7. <!-- hidhamtoota menu gadi bu'aa -->
  8. </ul> jechuun ni danda’ama
  9. </div> jechuun ni danda’ama

Fuula fuula baay'ee qabu

Yoom akka itti fayyadamnu

Ultra salphaa fi xiqqaa styled pagination Rdio irraa kaka'umsa, apps fi bu'aa barbaachaaf gaarii dha. Blookiin guddaan darbuun rakkisaadha, salphaatti kan guddatu, fi naannoo cuqaasuu gurguddoo kenna.

Hidhamtoota fuula haalaa

Hidhamtoonni haala barbaadamuun kan hojjetaman yoo ta'u, gita sirrii ta'een haalawwan baay'ee keessatti hojjetu. .disabledhidhannoowwan hin cuqaafneef akkasumas .activefuula ammaatiif.

Hiriirsa jijjiiramaa

Hiriirsa hidhannoo fuula jijjiiruuf gita filannoo lama keessaa tokko dabali: .pagination-centeredfi .pagination-right.

Fakkeenyaaf

Qaamni fuula durtii jijjiiramaa fi jijjiirama baay'ee keessatti hojjeta.

Markup gochuu

A keessatti marfamee <div>, fuula baasuun <ul>.

  1. <div class = "fuula" >
  2. <ul> jedhamuun beekama
  3. <li><a href = "#" > Duraa </a></li>
  4. <li gita = "socho'aa" >
  5. <a href = "#" > 1 </a> jedhu
  6. </li> jechuun ni danda’ama
  7. < li ><a href = "#" > 2 Afaan Oromoo fi Jechoota Dinqisiiso Afaan Oromoo
  8. < li ><a href = "#" > 3 Afaan Oromoo fi Jechoota Dinqisiiso Afaan Oromoo
  9. < li ><a href = "#" > 4 ​​Afaan Oromoo fi Jechoota Dinqisiiso Afaan Oromoo
  10. <li><a href = "#" > Itti aanu </a></li>
  11. </ul> jechuun ni danda’ama
  12. </div> jechuun ni danda’ama

Pager Linkii saffisaa duraa fi itti aanuuf

Waa'ee pager

Qaamni fuulaa tuuta hidhannoowwan hojiirra oolmaa fuula salphaa mallattoo ifaa fi akkaataawwan salphaa ta'an daran qabaniif. Marsariitiiwwan salphaa akka biloogii ykn barruuleedhaaf baayyee gaarii dha.

Haalata hanqifame filannoo

Hidhamtoonni fuulaa .disabledgita waliigalaa fuula irraas fayyadamu.

Fakkeenya durtii

Akka durtiitti, peejiiriin hidhannoowwan giddugaleessa godha.

  1. <ul gita = "pager" >
  2. <li> jedhu
  3. <a href = "#" > Duraa </a>
  4. </li> jechuun ni danda’ama
  5. <li> jedhu
  6. <a href = "#" > Itti aanu </a>
  7. </li> jechuun ni danda’ama
  8. </ul> jechuun ni danda’ama

Hidhamtoota qindaa'an

Akka filannootti, tokkoon tokkoon hidhaa gara cinaachaatti qindeessuu dandeessa:

  1. <ul gita = "pager" >
  2. <li class = "duraa" >
  3. <a href = "#" > Afaan Oromoo fi Jechoota Dinqisiiso Afaan Oromoo; Dullooman </a>
  4. </li> jechuun ni danda’ama
  5. <li class = "itti aanu" >
  6. <a href = "#" > Haaraa → </a> jechuun ni danda’ama
  7. </li> jechuun ni danda’ama
  8. </ul> jechuun ni danda’ama
Asxaalee Markup gochuu
Durtii dha <span class="label">Default</span>
Milkaa'ina <span class="label label-success">Success</span>
Akeekkachiisa <span class="label label-warning">Warning</span>
Barbaachisaa <span class="label label-important">Important</span>
Info <span class="label label-info">Info</span>
Faallaa <span class="label label-inverse">Inverse</span>

Waa'ee

Baajiiwwan qaamolee xixiqqoo, salphaa agarsiisaa ykn lakkoofsa gosa tokkoo agarsiisuuf gargaarani dha. Isaanis maamiltoota email akka Mail.app ykn appii mobaayilaa irratti beeksisa dhiibuuf baay'inaan argamu.

Kutaawwan jiran

Maqaa Fakkeenya Markup gochuu
Durtii dha 1. 1. <span class="badge">1</span>
Milkaa'ina 2. 2. <span class="badge badge-success">2</span>
Akeekkachiisa 4. <span class="badge badge-warning">4</span>
Barbaachisaa 6. 6. <span class="badge badge-important">6</span>
Info 8. <span class="badge badge-info">8</span>
Faallaa 10. <span class="badge badge-inverse">10</span>

Goota kutaa

Bootstrap qabiyyee marsariitii keessan irratti agarsiisuuf qaama salphaa, socho'aa yuunitii goota jedhamu kenna. Marsariitiiwwan gabaa fi qabiyyee baay’atan irratti akka gaariitti hojjeta.

Markup gochuu

Qabiyyee keessan divakka like jedhutti marsi:

  1. <div class = "kutaa-goota" >
  2. <h1> Mata duree </h1>
  3. <p> Sarara mallattoo </p>
  4. <p> jedhu
  5. <a gita = "btn btn-dursaa btn-guddaa" >
  6. Caalaatti baradhaa
  7. </a> jechuun ni danda’ama
  8. </p> jechuun ni danda’ama
  9. </div> jechuun ni danda’ama

Akkam jirtu addunyaa!

Kun yuunitii goota salphaadha, qabiyyee ykn odeeffannoo mul'ateef xiyyeeffannoo dabalataa waamuuf qaama salphaa akkaataa jumbotron-style dha.

Caalaatti baradhaa

Mata duree fuula

Qaaqa salphaa h1kutaa qabiyyee fuula tokko irratti haala sirrii ta'een addaan baasuu fi qooduuf. Inni h1's durtii small, elementii akkasumas irra caalaan qaamolee biroo (akkaataa dabalataa wajjin) fayyadamuu danda'a.

  1. <div class = "mata duree-fuula" >
  2. <h1> Fakkeenya mataduree fuula </h1>
  3. </div> jechuun ni danda’ama

Fakkiiwwan xiqqaa durtii

Akka durtiitti, fakkiiwwan xiqqaa Bootstrap fakkiiwwan walqabsiisan mallattoo xiqqaa barbaachisuun agarsiisuuf qophaa'aniiru.

Baay'ee kan ofii barbaade

Xiqqoo mallattoo dabalataatiin, qabiyyee HTML gosa kamiyyuu kan akka mata duree, keewwata, ykn qaree gara suuraa xiqqaatti dabaluun ni danda'ama.

  • Asxaa suuraa xiqqaa

    Cras justo odio, dapibus ac facilisis keessatti, egestas eget quam jedhamuun beekama. Donec id elit non mi porta gravida yeroo eget metus jedhamutti. Nullam id dolor id nibh ultricies konkolaataa ut id elit.

    Gocha Gocha

  • Asxaa suuraa xiqqaa

    Cras justo odio, dapibus ac facilisis keessatti, egestas eget quam jedhamuun beekama. Donec id elit non mi porta gravida yeroo eget metus jedhamutti. Nullam id dolor id nibh ultricies konkolaataa ut id elit.

    Gocha Gocha

Maaliif suuraa xiqqaa fayyadamna

Suuraaleen xiqqaan (duraan .media-gridhanga v1.4tti) giiridii suuraa ykn viidiyoo, bu'aa barbaacha suuraa, oomishaalee daldalaa, portfolio, fi kkf baay'ee gaarii dha. Isaanis hidhaa ykn qabiyyee static ta’uu danda’u.

Mallattoo salphaa, jijjiiramaa

Mallattoon suuraa xiqqaa salphaadha-a ullakkoofsa lielementoota kamiyyuu waliin waan barbaachisu qofa. Akkasumas super flexible dha, qabiyyee kee marsuuf gosa qabiyyee kamiyyuu mallattoo xiqqoo dabalataa qofaan hayyama.

Hammangaawwan tarjaa tarjaa fayyadama

Dhumarratti, qaamni suuraa xiqqaa gita sirna tarjaa jiran fayyadama—akka .span2ykn .span3—to'annoo dimenshinii suuraa xiqqaadhaaf.

Mallattoon isaa

Akkuma kanaan dura jedhame, mallattoo xiqqaadhaaf barbaachisu salphaa fi qajeelaa dha. Fakkiiwwan walqabsiifamaniif qindeessaa durtii kunooti :

  1. <ul class = "fakkiiwwan xiqqaa" >
  2. <li gita = "span3" >
  3. <a href = "#" class = "fakkii xiqqaa" >
  4. <img src = "https://www.bakka/bakka/260x180" alt = "" >
  5. </a> jechuun ni danda’ama
  6. </li> jechuun ni danda’ama
  7. ...
  8. </ul> jechuun ni danda’ama

Qabiyyee HTML amala suuraa xiqqaa keessatti, mallattoon xiqqoo jijjiirama. <a>Qabiyyee sadarkaa ugguraa bakka kamittiyyuu hayyamuuf, kan <div>akka akkasitti jijjiirra :

  1. <ul class = "fakkiiwwan xiqqaa" >
  2. <li gita = "span3" >
  3. <div class = "fakkii xiqqaa" >
  4. <img src = "https://www.bakka/bakka/260x180" alt = "" >
  5. <h5> Asxaa suuraa xiqqaa </h5>
  6. <p> Barreeffama suuraa xiqqaa asitti... </p>
  7. </div> jechuun ni danda’ama
  8. </li> jechuun ni danda’ama
  9. ...
  10. </ul> jechuun ni danda’ama

Fakkeenya dabalataa

Filannoowwan kee hunda gita tarjaa adda addaa siif jiran waliin qoradhu. Akkasumas safara adda addaa walitti makuu fi walsimsiisuu dandeessa.

Durtii salphaa

Kutaa bu'uuraa irra deebi'amee barreeffame

Bootstrap 2 waliin, gita bu'uuraa salphifneerra: .alertbakka .alert-message. Akkasumas mallattoo xiqqaa barbaachisu hir'isneerra-lakki <p>durtii barbaadamu, alaa qofa <div>.

Ergaa akeekkachiisaa tokko

Qaama koodii xiqqaa qabuuf yeroo dheeraa turuuf, ilaalcha adda baasuu akeekkachiisa ugguraa, ergaawwan padding baay'ee fi akkaataa idileetti barreeffama baay'ee wajjin dhufan haqneerra. Kutaan kunis gara .alert-block.


Javascript waliin baayyee gaarii deema

Bootstrap jQuery plugin guddaa ergaawwan akeekkachiisaa deeggaru waliin dhufa, isaan kuffisuu saffisaa fi salphaa taasisa.

Ijaarsa kana argadhu »

Fakkeenya akeekkachiisa

Ergaa kee fi mallattoo cufi filannoo div keessatti gita salphaa waliin marsi.

Akeekkachiisa! Best check yo self, ati baayyee gaarii hin fakkaattu.
  1. <div class = "akeekkachiisa" >
  2. <button class = "cufi" data-dismiss = "akeekkachiisa" > × </button>
  3. <strong> Akeekkachiisa! </strong> Best check yo self, ati baayyee gaarii hin fakkaattu.
  4. </div> jechuun ni danda’ama

Mataa ol qaba! Meeshaaleen iOS href="#"akeekkachiisa kuffisuuf an barbaadu. Isaa fi amalli deetaa mallattoolee cufiinsa anchor tiif hammachuu mirkaneessi. Akka filannootti, elementii amaloota deetaa qabu fayyadamuu dandeessa <button>, kan nuti docs keenyaaf gochuu filanneerra. Yeroo fayyadamtu <button>, dabaluu qabda type="button"ykn unkaawwan kee dhiyeessu dhiisuu danda’u.

Ergaa akeekkachiisaa istaandaardii salphaatti gita filannoo lamaatiin dheeressi: .alert-blocktoo'annoowwan guutuu fi barruu dabalataa fi .alert-headingmata duree walsimsiisuuf.

Akeekkachiisa!

Best check yo self, ati baayyee gaarii hin fakkaattu. Nulla vitae elit libero, afaan oromoo kan afaan oromoo fi hiika isaa pdf. Praesent commodo cursus magna, vel scelerisque nisl consectetur fi kan jedhaman kanneen akka.

  1. <div class = "akeekkachiisa-uggura" >
  2. <a class = "cufi" data-dismiss = "akeekkachiisa" href = "#" > × </a>
  3. <h4 class = "mata duree-akeekkachiisaa" > Akeekkachiisa! </h4> jechuun ni danda’ama
  4. Best check yo self, ati hin jirtu...
  5. </div> jechuun ni danda’ama

Filannoowwan yaadannoo Hiika akeekkachiisaa jijjiiruuf gita filannoo dabali

Dogoggora ykn balaa

Yaa snap! Wantoota muraasa ol jijjiirii irra deebi'ii galchuu yaali.
  1. <div class = "dogongora-akeekkachiisa akeekkachiisaa" >
  2. ...
  3. </div> jechuun ni danda’ama

Milkaa'ina

Gaarii goote! Ergaa akeekkachiisaa barbaachisaa ta'e kana milkaa'inaan dubbisteetta.
  1. <div class = "milkaa'ina-akeekkachiisa akeekkachiisaa" >
  2. ...
  3. </div> jechuun ni danda’ama

Odeeffannoo

Mataa ol qaba! Alert kun xiyyeeffannoo keessan barbaada, garuu super important miti.
  1. <div class = "odeeffannoo-akeekkachiisa akeekkachiisaa" >
  2. ...
  3. </div> jechuun ni danda’ama

Fakkeenyaafi mallattoo

Bu'uura

Sajoo adeemsa durtii kan garagalcha dhaabbataa qabu.

  1. <div class = "adeemsa" >
  2. <div gita = "barruu".
  3. akkaataa = " bal'ina : 60 %; " ></div>
  4. </div> jechuun ni danda’ama

Sarara kan qabu

Bu'aa sarara qabu uumuuf garagalcha fayyadama (IE hin qabu).

  1. <div class = "adeemsa adeemsa-sarara" >
  2. <div gita = "barruu".
  3. akkaataa = " bal'ina : 20 %; " ></div>
  4. </div> jechuun ni danda’ama

Animeeshinii kan qabu

Fakkeenya sarara qabu fudhatee ni jiraachisa (IE hin qabu).

  1. <div class = "adeemsa adeemsa-sarara."
  2. sochiirra jira" >
  3. <div gita = "barruu".
  4. akkaataa = " bal'ina : 40 %; " ></div>
  5. </div> jechuun ni danda’ama

Filannoo fi deeggarsa biraawzari

Halluuwwan dabalataa

Sajoo adeemsaa qaree walfakkaataa tokko tokko fi gita akeekkachiisaa akkaataa walfakkaataaf fayyadamu.

Barruulee sarara qaban

Halluuwwan jajjaboo wajjin wal fakkaatuun, barruulee adeemsaa sarara adda addaa qaban qabna.

Amala

Barruulee adeemsaa ce'umsa CSS3 fayyadamu, kanaafuu yoo bal'ina karaa javascript daayinamiikiin sirreessite, haala salphaan guddina ni jijjiira.

Yoo .activegita fayyadamte, .progress-stripedbarruulee adeemsa kee sararoota bitaa gara mirgaatti ni sochoosu.

Deeggarsa biraawzari

Sajoo adeemsaa bu'aa isaanii hunda galmaan ga'uuf garaagarummaa CSS3, ce'umsaa, fi sochiiwwan fayyadamu. Amaloonni kun IE7-9 ykn gosoota Firefox durii keessatti hin deeggaraman.

Opera fi IE yeroo kanatti animation hin deeggaran.

Wells jedhama

Boolla akka bu'aa salphaa elementii tokko irratti fayyadamii bu'aa galtee kennuudhaaf.

Ilaa ani boolla bishaanii keessa jira!
  1. <div gita = "tole" >
  2. ...
  3. </div> jechuun ni danda’ama

Mallattoo cufi

Qabiyyee akka moodaalotaa fi akeekkachiisa kuffisuuf mallattoo cufiinsa waliigalaa fayyadami.

  1. <button class = "cufi" > &yeroo; </button> jedhu

Meeshaaleen iOS yoo anchor fayyadamuu filatte taateewwan cuqaasuuf href="#" barbaadu.

  1. <a class = "cufi" href = "#" > &yeroo; </a> jechuun ni danda’ama