Qaamolee

Qaamolee irra deebiin itti fayyadamuu danda'an kudhanootaan lakkaa'aman kanneen navigeeshinii, akeekkachiisa, popovers fi kkf kennuudhaaf ijaaraman.

Mataa ol qaba! Docs kun v2.3.2 kan ta'aniif yoo ta'u, kana booda ifatti hin deeggaramne. Bootstrap isa haaraa ilaalaa!

Fakkeenyaaf

Filannoowwan bu'uuraa lama, garaagarummaa addaa lama dabalataa wajjin.

Garee button tokko

Qabduulee walduraa duubaan jiran .btnin tiin marsi .btn-group.

  1. <div gita = "btn-garee" >
  2. <button class = "btn" > Bitaa </button>
  3. <button class = "btn" > Giddugaleessa </button>
  4. <button class = "btn" > Mirgaa </button>
  5. </div> jechuun ni danda’ama

Gareewwan buttooni hedduu

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

Gareewwan buttooni dhaabbataa

Tuuta qaree akka qajeelaa osoo hin taane dhaabbataadhaan tuulame akka mul'atu godhi.

  1. <div class = "btn-garee btn-garee-dhaabbataa" >
  2. ...
  3. </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 galmeewwan JaavaScript ilaali .

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.

Haala waliigalaa fi fakkeenya

Qabduu kamiyyuu fayyadamii a keessa kaa'uu .btn-groupfi mallattoo menu sirrii ta'e kennuudhaan sajoo tarree kakaasuuf.

  1. <div gita = "btn-garee" >
  2. <a class = "btn gadi-bu'aa-jijjiirraa" deetaa-jijjiirraa = "gara-bu'aa" href = "#" >
  3. Gocha
  4. <span gita = "kareettii" </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

Tarreewwan qaree hammangaa kamiinuu hojjetu: .btn-large, .btn-small, ykn .btn-mini.

JaavaScript 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 JaavaScript amalaatiin furuu qabda.


Tarreewwan qaree addaan qoodi

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.

  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 = "kareettii" </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

Saayiziiwwan

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

  1. <div gita = "btn-garee" >
  2. <button class = "btn btn-mini" > Tarkaanfii </button>
  3. <button class = "btn btn-mini gadi-bu'aa-jijjiirraa" deetaa-jijjiirraa = "gadi-bu'aa" >
  4. <span gita = "kareettii" </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

Akkasumas, sajoo gadi bu'aa gita tokko gara warra battalumatti dabaluudhaan jalaa gara oliitti jijjiiruun ni danda'ama .dropdown-menu. Kallattii kan garagalchee .caretfi menu ofii isaa 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 = "kareettii" </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 istaandaardii

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

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

Filannoowwan

Haalata hanqifamee fi socho'aa

Hidhamtoonni haala adda addaatiif haala barbaadamuun kan jijjiiramudha. .disabledHidhamtoota hin cuqaasuu fi .activefuula ammaa agarsiisuuf fayyadami .

  1. <div class = "fuula" >
  2. <ul> jedhamuun beekama
  3. <li class = "kan hin hojjenne" ><a href = "#" > « </a></li> jedhu
  4. <li gita = "socho'aa" ><a href = "#" > 1 </a></li>
  5. ...
  6. </ul> jechuun ni danda’ama
  7. </div> jechuun ni danda’ama

Akkaataa yaadame osoo qabduu dalagaa cuqaasuu haquuf filannoodhaan anchors socho'aa ykn hanqifame spans'f jijjiiruu dandeessa.

  1. <div class = "fuula" >
  2. <ul> jedhamuun beekama
  3. <li class = "qaama miidhame" ><span> « </span></li> jedhamuun beekama
  4. <li gita = "socho'aa" ><span> 1 </span></li>
  5. ...
  6. </ul> jechuun ni danda’ama
  7. </div> jechuun ni danda’ama

Saayiziiwwan

Fuula guddaa moo xiqqaa ta'e barbaadduu? .pagination-large, .pagination-small, ykn .pagination-minihammangaa dabalataaf dabali .

  1. <div class = "fuula fuula-guddaa" >
  2. <ul> jedhamuun beekama
  3. ...
  4. </ul> jechuun ni danda’ama
  5. </div> jechuun ni danda’ama
  6. <div class = "fuula" >
  7. <ul> jedhamuun beekama
  8. ...
  9. </ul> jechuun ni danda’ama
  10. </div> jechuun ni danda’ama
  11. <div class = "fuula fuula-xiqqaa" >
  12. <ul> jedhamuun beekama
  13. ...
  14. </ul> jechuun ni danda’ama
  15. </div> jechuun ni danda’ama
  16. <div class = "fuula fuula-mini" >
  17. <ul> jedhamuun beekama
  18. ...
  19. </ul> jechuun ni danda’ama
  20. </div> jechuun ni danda’ama

Hiriirsuu

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

  1. <div class = "fuula fuula giddugaleessa godhate" >
  2. ...
  3. </div> jechuun ni danda’ama
  1. <div class = "fuula fuula-mirga" >
  2. ...
  3. </div> jechuun ni danda’ama

Pager jedhamuun beekama

Hidhamtoota saffisaa duraa fi itti aanan hojiirra oolmaa fuula salphaa mallattoo ifaa fi akkaataa waliin. Marsariitiiwwan salphaa akka biloogii ykn barruuleedhaaf baayyee gaarii dha.

Fakkeenya durtii

Akka durtiitti, peejiiriin hidhannoowwan giddugaleessa godha.

  1. <ul gita = "pager" >
  2. <li><a href = "#" > Duraa </a></li>
  3. <li><a href = "#" > Itti aanu </a></li>
  4. </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

Haalata hanqifame filannoo

Hidhamtoonni fuulaa akkasumas .disabledgita faayidaa waliigalaa fuula irraa fayyadamu.

  1. <ul gita = "pager" >
  2. <li class = "duraan hanqifame" >
  3. <a href = "#" > Afaan Oromoo fi Jechoota Dinqisiiso Afaan Oromoo; Dullooman </a>
  4. </li> jechuun ni danda’ama
  5. ...
  6. </ul> jechuun ni danda’ama

Asxaalee

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>

Baajiiwwan

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

Salphaatti kan kufamu

Hojiirra oolmaa salphaadhaaf, asxaaleen fi baajiiwwan salphaatti ni kufa (karaa :emptyfilannoo CSS) yeroo qabiyyeen tokkollee keessa hin jirre.

Goota kutaa

Qabiyyee ijoo marsariitii kee irratti agarsiisuuf qaama salphaa, jijjiiramaa. Marsariitiiwwan gabaa fi qabiyyee baay’atan irratti akka gaariitti hojjeta.

Akkam jirtu addunyaa!

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

Caalaatti baradhaa

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

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 <xiqqaa> Barruu xiqqaa mataduree </small></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.

  • 300x200 ta’a

    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

  • 300x200 ta’a

    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

  • 300x200 ta’a

    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

Suuraalee xiqqaa (duraan.media-grid hanga 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 kamiyyuu wajjinli elementoota 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.

Markup gochuu

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

  1. <ul class = "fakkiiwwan xiqqaa" >
  2. <li gita = "span4" >
  3. <a href = "#" class = "fakkii xiqqaa" >
  4. <img deetaa-src = "qabaa.js/300x200" 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 = "span4" >
  3. <div class = "fakkii xiqqaa" >
  4. <img deetaa-src = "qabaa.js/300x200" alt = "" >
  5. <h3> Asxaa suuraa xiqqaa </h3>
  6. <p> Barreeffama xiqqaa... </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.

Akeekkachiisa durtii

.alertErgaa akeekkachiisa akeekkachiisaa bu'uuraaf barruu kamiyyuu fi qaree filannoo ari'uu keessa marsi .

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

Qabduulee hojii irraa ari'uu

Mobile Safari fi Mobile Opera browsers, data-dismiss="alert"attribute dabalatee, yeroo tag href="#"fayyadamtan akeekkachiisa kuffisuuf an barbaadu.<a>

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

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.

  1. < gosa qaree = "button" class = "cufi" data-dismiss = "akeekkachiisa" > × </button> jedhu

Akeekkachiisa karaa JaavaScript kuffisi

Akeekkachiisa saffisaa fi salphaatti kuffisuuf plugin jQuery akeekkachiisaa fayyadami .


Filannoowwan

Ergaawwan dheeraadhaaf, dabaluudhaan padding gubbaa fi jala marfata akeekkachiisaa irratti dabali .alert-block.

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. < gosa qaree = "button" class = "cufi" data-dismiss = "akeekkachiisa" > × </button> jedhu
  3. <h4> Akeekkachiisa! </h4> jechuun ni danda’ama
  4. Best check yo self, ati hin jirtu...
  5. </div> jechuun ni danda’ama

Filannoowwan haala dubbiitiin

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 = "bar" akkaataa = " bal'ina : 60 %; " ></div>
  3. </div> jechuun ni danda’ama

Sarara kan qabu

Bu'aa sarara qabu uumuuf garagalcha fayyadama. IE7-8 keessatti hin argamu.

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

Animeeshinii kan qabu

Sararoota mirgaa gara bitaatti sochoosuuf gara .activeitti dabali . .progress-stripedVersion IE hunda keessatti hin argamu.

  1. <div class = "adeemsa adeemsa-sarara socho'aa" >
  2. <div gita = "bar" akkaataa = " bal'ina : 40 %; " ></div>
  3. </div> jechuun ni danda’ama

Tuulamaa

.progressIsaan tuuluuf barruulee hedduu tokko keessa kaa'i .

  1. <div class = "adeemsa" >
  2. <div class = "bar bar-milkaa'ina" style = " bal'ina : 35 %; " ></div>
  3. <div class = "bar bar-akeekkachiisa" style = " bal'ina : 20 %; " ></div>
  4. <div class = "bar bar-balaa" style = " bal'ina : 10 %; " ></div>
  5. </div> jechuun ni danda’ama

Filannoowwan

Halluuwwan dabalataa

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

  1. <div class = "odeeffannoo adeemsa adeemsaa" >
  2. <div gita = "bar" akkaataa = " bal'ina : 20 % " ></div>
  3. </div> jechuun ni danda’ama
  4. <div class = "adeemsa adeemsa-milkaa'ina" >
  5. <div gita = "bar" akkaataa = " bal'ina : 40 % " ></div>
  6. </div> jechuun ni danda’ama
  7. <div class = "adeemsa-akeekkachiisa" >
  8. <div gita = "bar" akkaataa = " bal'ina : 60 % " ></div>
  9. </div> jechuun ni danda’ama
  10. <div class = "adeemsa adeemsa-balaa" >
  11. <div gita = "bar" akkaataa = " bal'ina : 80 % " ></div>
  12. </div> jechuun ni danda’ama

Barruulee sarara qaban

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

  1. <div class = "adeemsa adeemsa-odeeffannoo adeemsa-sarara" >
  2. <div gita = "bar" akkaataa = " bal'ina : 20 % " ></div>
  3. </div> jechuun ni danda’ama
  4. <div class = "adeemsa adeemsa-milkaa'ina adeemsa-sarara" >
  5. <div gita = "bar" akkaataa = " bal'ina : 40 % " ></div>
  6. </div> jechuun ni danda’ama
  7. <div class = "adeemsa adeemsa-akeekkachiisa adeemsa-sarara" >
  8. <div gita = "bar" akkaataa = " bal'ina : 60 % " ></div>
  9. </div> jechuun ni danda’ama
  10. <div class = "adeemsa adeemsa-balaa adeemsa-sarara" >
  11. <div gita = "bar" akkaataa = " bal'ina : 80 % " ></div>
  12. </div> jechuun ni danda’ama

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.

Versions Internet Explorer 10 fi Opera 12 dura turan sochii qaamaa hin deeggaran.

Akkaataa wanta abstraaktii gosoota qaamolee adda addaa ijaaruuf (akka yaada biloogii, Tweets, fi kkf) kanneen fakkii bitaa- ykn mirga-hiriirfame qabiyyee barruu cinatti agarsiisan.

Fakkeenya durtii

Miidiyaan durtii wanta miidiyaa (fakkiiwwan, viidiyoo, sagalee) gara bitaa ykn mirga uggura qabiyyee yaa'uuf hayyama.

64x64 ta’a

Mata duree miidiyaa

Cras taa'u amet nibh libero, keessatti gravida nulla. Nulla vel metus scelerisque ante sollicitudin koomoodoo jedhamuun beekama. Cras purus odio, vestibulum vulputate keessatti argamu irratti, tempus viverra turpis. Fusce condimentum nunc ac nisi firiingiilaa vulputate jedhamuun beekama. Donec lacinia congue felis jedhamu kan faucibus keessatti argamu.
64x64 ta’a

Mata duree miidiyaa

Cras taa'u amet nibh libero, keessatti gravida nulla. Nulla vel metus scelerisque ante sollicitudin koomoodoo jedhamuun beekama. Cras purus odio, vestibulum vulputate keessatti argamu irratti, tempus viverra turpis. Fusce condimentum nunc ac nisi firiingiilaa vulputate jedhamuun beekama. Donec lacinia congue felis jedhamu kan faucibus keessatti argamu.
64x64 ta’a

Mata duree miidiyaa

Cras taa'u amet nibh libero, keessatti gravida nulla. Nulla vel metus scelerisque ante sollicitudin koomoodoo jedhamuun beekama. Cras purus odio, vestibulum vulputate keessatti argamu irratti, tempus viverra turpis. Fusce condimentum nunc ac nisi firiingiilaa vulputate jedhamuun beekama. Donec lacinia congue felis jedhamu kan faucibus keessatti argamu.
  1. <div class = "miidiyaa" >
  2. <a class = "harkisuu-bitaa" href = "#" >
  3. <img gita = "wanta-miidiyaa" deetaa-src = "qabaa.js/64x64" >
  4. </a> jechuun ni danda’ama
  5. <div class = "qaama-miidiyaa" >
  6. <h4 class = "media-heading" > Mata duree miidiyaa </h4>
  7. ...
  8.  
  9. <!-- Wanti miidiyaa man'ee -->
  10. <div class = "miidiyaa" >
  11. ...
  12. </div> jechuun ni danda’ama
  13. </div> jechuun ni danda’ama
  14. </div> jechuun ni danda’ama

Tarree miidiyaa

Xiqqoo mallattoo dabalataatiin, miidiyaa tarree keessaa fayyadamuu dandeessa (dhangiiwwan yaada ykn tarreewwan barruuleedhaaf faayidaa qaba).

  • 64x64 ta’a

    Mata duree miidiyaa

    Cras taa'u amet nibh libero, keessatti gravida nulla. Nulla vel metus scelerisque ante sollicitudin koomoodoo jedhamuun beekama. Cras purus odio, vestibulum vulputate keessatti argamu irratti, tempus viverra turpis.

    64x64 ta’a

    Mata duree miidiyaa nested

    Cras taa'u amet nibh libero, keessatti gravida nulla. Nulla vel metus scelerisque ante sollicitudin koomoodoo jedhamuun beekama. Cras purus odio, vestibulum vulputate keessatti argamu irratti, tempus viverra turpis.
    64x64 ta’a

    Mata duree miidiyaa nested

    Cras taa'u amet nibh libero, keessatti gravida nulla. Nulla vel metus scelerisque ante sollicitudin koomoodoo jedhamuun beekama. Cras purus odio, vestibulum vulputate keessatti argamu irratti, tempus viverra turpis.
    64x64 ta’a

    Mata duree miidiyaa nested

    Cras taa'u amet nibh libero, keessatti gravida nulla. Nulla vel metus scelerisque ante sollicitudin koomoodoo jedhamuun beekama. Cras purus odio, vestibulum vulputate keessatti argamu irratti, tempus viverra turpis.
  • 64x64 ta’a

    Mata duree miidiyaa

    Cras taa'u amet nibh libero, keessatti gravida nulla. Nulla vel metus scelerisque ante sollicitudin koomoodoo jedhamuun beekama. Cras purus odio, vestibulum vulputate keessatti argamu irratti, tempus viverra turpis.
  1. <ul class = "tarree-miidiyaa" >
  2. <li class = "miidiyaa" >
  3. <a class = "harkisuu-bitaa" href = "#" >
  4. <img gita = "wanta-miidiyaa" deetaa-src = "qabaa.js/64x64" >
  5. </a> jechuun ni danda’ama
  6. <div class = "qaama-miidiyaa" >
  7. <h4 class = "media-heading" > Mata duree miidiyaa </h4>
  8. ...
  9.  
  10. <!-- Wanti miidiyaa man'ee -->
  11. <div class = "miidiyaa" >
  12. ...
  13. </div> jechuun ni danda’ama
  14. </div> jechuun ni danda’ama
  15. </li> jechuun ni danda’ama
  16. </ul> jechuun ni danda’ama

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

Kutaawwan filannoo

Paadiingii fi goleewwan geengoo gita fooyyessaa filannoo lamaa wajjin too'adhu.

Ilaa ani boolla bishaanii keessa jira!
  1. <div class = "akka gaariitti-guddaa" >
  2. ...
  3. </div> jechuun ni danda’ama
Ilaa ani boolla bishaanii keessa jira!
  1. <div class = "tole akka gaariitti-xiqqaa" >
  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 href="#"taateewwan cuqaasuuf yoo anchor fayyadamuu barbaadde barbaadu.

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

Kutaa gargaaraa

Gitoota salphaa, xiyyeeffannoo agarsiisa xixiqqoo ykn jijjiirama amalaaf.

.harkisuu-bitaa

Elementii tokko gara bitaatti yaa'i

  1. class = "harkisuu-bitaa".
  1. . harkisuu - bitaa { .
  2. float : bitaa ;
  3. } .

.harkisuu-mirga

Elementii tokko mirga yaa'i

  1. class = "harkisuu-mirgaa".
  1. . harkisuu - mirgaa { .
  2. float : mirgaa ;
  3. } .

.muted ta'e

Halluu elementii tokkoo gara#999

  1. class = "kan dhaamfame".
  1. . callisee { .
  2. halluu : #999;
  3. } .

.qulqulleessuu

floatElementii kamiyyuu irratti kan qulqulleessi

  1. class = "qulqulleessuu".
  1. . qulqulleessuu { .
  2. * guddisuu : 1 ;
  3. &: dura , .
  4. &: booda { .
  5. agarsiisa : gabatee ;
  6. qabiyyee : "" ;
  7. } .
  8. &: booda { .
  9. ifa : lamaan isaanii ;
  10. } .
  11. } .