Qaamolee irra deebiin itti fayyadamuu danda'an kudhanootaan lakkaa'aman kanneen navigeeshinii, akeekkachiisa, popovers fi kkf kennuudhaaf ijaaraman.
Jijjiiramaa, menu tarree tarreewwan hidhannoo agarsiisuuf. Ijaarsa JaavaScript kan gadi bu'aa ta'een walqunnamtii taasifame .
- <ul class = "tarree-gadi-bu'aa" gahee = "menu" aria-labelledby = "Menu-gadi-bu'aa" >
- <li><a tabindex = "-1" href = "#" > Tarkaanfii </a></li>
- <li><a tabindex = "-1" href = "#" > Tarkaanfii biraa </a></li>
- <li><a tabindex = "-1" href = "#" > Waan biraa asitti </a></li>
- <li gita = "qoqqoodduu" </li>
- <li><a tabindex = "-1" href = "#" > Hidhaa adda baafame </a></li>
- </ul> jechuun ni danda’ama
Sajoo tarree qofa yoo ilaalle, HTML barbaachisu kunooti. Qaaqa tarree fi sajoo tarree keessaa .dropdown
, ykn qaama biraa kan labsu keessaa marsuu qabda position: relative;
. Sana booda menu qofa uumuu.
- <div class = "gadi bu'aa" >
- <!-- Hidhaa ykn qaree toggle dropdown -->
- <ul gita = "sajoo-gadi-bu'aa" gahee = "sajoo" aria-labelledby = "dLabel" >
- <li><a tabindex = "-1" href = "#" > Tarkaanfii </a></li>
- <li><a tabindex = "-1" href = "#" > Tarkaanfii biraa </a></li>
- <li><a tabindex = "-1" href = "#" > Waan biraa asitti </a></li>
- <li gita = "qoqqoodduu" </li>
- <li><a tabindex = "-1" href = "#" > Hidhaa adda baafame </a></li>
- </ul> jechuun ni danda’ama
- </div> jechuun ni danda’ama
Menuuwwan gara mirgaatti qindeessii fi dabali sadarkaawwan dabalataa tarreewwan dabalata.
Sajoo tarree gara mirgaatti .pull-right
dabali ..dropdown-menu
- <ul gita = "sajoo-gadi-bu'aa harkisaa-mirga" gahee = "sajoo" aria-labelledby = "dLabel" >
- ...
- </ul> jechuun ni danda’ama
Hidhaa hanqisuuf tarree keessaa atti .disabled
dabali .<li>
- <ul class = "tarree-gadi-bu'aa" gahee = "menu" aria-labelledby = "Menu-gadi-bu'aa" >
- <li><a tabindex = "-1" href = "#" > Hidhaa idilee </a></li>
- <li class = "disabled" ><a tabindex = "-1" href = "#" > Hidhamni hanqifame </a></li>
- <li><a tabindex = "-1" href = "#" > Hidhaa biraa </a></li>
- </ul> jechuun ni danda’ama
Sadarkaa dabalataa menuwwan gadi bu'aa dabali, akka kanneen OS X hover irratti mul'atu, dabalata mallattoo salphaa tokko tokkoo wajjin. Akkaataa ofumaan hojjechuuf sajoo tarree jiru keessatti .dropdown-submenu
kamiyyuutti dabali .li
- <ul gita = "sajoo-gadi-bu'aa" gahee = "sajoo" aria-labelledby = "dLabel" >
- ...
- <li class = "sajoo-xiqqaa-gadi-bu'aa" >
- <a tabindex = "-1" href = "#" > Filannoo dabalataa </a>
- <ul class = "tarree-gadi-bu'aa" >
- ...
- </ul> jechuun ni danda’ama
- </li> jechuun ni danda’ama
- </ul> jechuun ni danda’ama
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.
- <div class = "fuula" >
- <ul> jedhamuun beekama
- <li><a href = "#" > Duraa </a></li>
- < li ><a href = "#" > 1 Afaan Oromoo fi Jechoota Dinqisiiso Afaan Oromoo
- < li ><a href = "#" > 2 Afaan Oromoo fi Jechoota Dinqisiiso Afaan Oromoo
- < li ><a href = "#" > 3 Afaan Oromoo fi Jechoota Dinqisiiso Afaan Oromoo
- < li ><a href = "#" > 4 Afaan Oromoo fi Jechoota Dinqisiiso Afaan Oromoo
- < li ><a href = "#" > 5 Afaan Oromoo fi Jechoota Dinqisiiso Afaan Oromoo
- <li><a href = "#" > Itti aanu </a></li>
- </ul> jechuun ni danda’ama
- </div> jechuun ni danda’ama
Hidhamtoonni haala adda addaatiif haala barbaadamuun kan jijjiiramudha. .disabled
Hidhamtoota hin cuqaasuu fi .active
fuula ammaa agarsiisuuf fayyadami .
- <div class = "fuula" >
- <ul> jedhamuun beekama
- <li class = "kan hin hojjenne" ><a href = "#" > « </a></li> jedhu
- <li gita = "socho'aa" ><a href = "#" > 1 </a></li>
- ...
- </ul> jechuun ni danda’ama
- </div> jechuun ni danda’ama
Akkaataa yaadame osoo qabduu dalagaa cuqaasuu haquuf filannoodhaan anchors socho'aa ykn hanqifame spans'f jijjiiruu dandeessa.
- <div class = "fuula" >
- <ul> jedhamuun beekama
- <li class = "qaama miidhame" ><span> « </span></li> jedhamuun beekama
- <li gita = "socho'aa" ><span> 1 </span></li>
- ...
- </ul> jechuun ni danda’ama
- </div> jechuun ni danda’ama
Fuula guddaa moo xiqqaa ta'e barbaadduu? .pagination-large
, .pagination-small
, ykn .pagination-mini
hammangaa dabalataaf dabali .
- <div class = "fuula fuula-guddaa" >
- <ul> jedhamuun beekama
- ...
- </ul> jechuun ni danda’ama
- </div> jechuun ni danda’ama
- <div class = "fuula" >
- <ul> jedhamuun beekama
- ...
- </ul> jechuun ni danda’ama
- </div> jechuun ni danda’ama
- <div class = "fuula fuula-xiqqaa" >
- <ul> jedhamuun beekama
- ...
- </ul> jechuun ni danda’ama
- </div> jechuun ni danda’ama
- <div class = "fuula fuula-mini" >
- <ul> jedhamuun beekama
- ...
- </ul> jechuun ni danda’ama
- </div> jechuun ni danda’ama
Hiriirsa hidhannoo fuula jijjiiruuf gita filannoo lama keessaa tokko dabali: .pagination-centered
fi .pagination-right
.
- <div class = "fuula fuula giddugaleessa godhate" >
- ...
- </div> jechuun ni danda’ama
- <div class = "fuula fuula-mirga" >
- ...
- </div> jechuun ni danda’ama
Hidhamtoota saffisaa duraa fi itti aanan hojiirra oolmaa fuula salphaa mallattoo ifaa fi akkaataa waliin. Marsariitiiwwan salphaa akka biloogii ykn barruuleedhaaf baayyee gaarii dha.
Akka durtiitti, peejiiriin hidhannoowwan giddugaleessa godha.
- <ul gita = "pager" >
- <li><a href = "#" > Duraa </a></li>
- <li><a href = "#" > Itti aanu </a></li>
- </ul> jechuun ni danda’ama
Akka filannootti, tokkoon tokkoon hidhaa gara cinaachaatti qindeessuu dandeessa:
- <ul gita = "pager" >
- <li class = "duraa" >
- <a href = "#" > Afaan Oromoo fi Jechoota Dinqisiiso Afaan Oromoo; Dullooman </a>
- </li> jechuun ni danda’ama
- <li class = "itti aanu" >
- <a href = "#" > Haaraa → </a> jechuun ni danda’ama
- </li> jechuun ni danda’ama
- </ul> jechuun ni danda’ama
Hidhamtoonni fuulaa akkasumas .disabled
gita faayidaa waliigalaa fuula irraa fayyadamu.
- <ul gita = "pager" >
- <li class = "duraan hanqifame" >
- <a href = "#" > Afaan Oromoo fi Jechoota Dinqisiiso Afaan Oromoo; Dullooman </a>
- </li> jechuun ni danda’ama
- ...
- </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> |
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> |
Hojiirra oolmaa salphaadhaaf, asxaaleen fi baajiiwwan salphaatti ni kufa (karaa :empty
filannoo CSS) yeroo qabiyyeen tokkollee keessa hin jirre.
Qabiyyee ijoo marsariitii kee irratti agarsiisuuf qaama salphaa, jijjiiramaa. Marsariitiiwwan gabaa fi qabiyyee baay’atan irratti akka gaariitti hojjeta.
Kun yuunitii goota salphaadha, qabiyyee ykn odeeffannoo mul'ateef xiyyeeffannoo dabalataa waamuuf qaama salphaa akkaataa jumbotron-style dha.
- <div class = "kutaa-goota" >
- <h1> Mata duree </h1>
- <p> Sarara mallattoo </p>
- <p> jedhu
- <a gita = "btn btn-duraa duubaa btn-guddaa" >
- Caalaatti baradhaa
- </a> jechuun ni danda’ama
- </p> jechuun ni danda’ama
- </div> jechuun ni danda’ama
Qaaqa salphaa h1
kutaa 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.
- <div class = "mata duree-fuula" >
- <h1> Fakkeenya mataduree fuula <xiqqaa> Barruu xiqqaa mataduree </small></h1>
- </div> jechuun ni danda’ama
Akka durtiitti, fakkiiwwan xiqqaa Bootstrap fakkiiwwan walqabsiisan mallattoo xiqqaa barbaachisuun agarsiisuuf qophaa'aniiru.
Xiqqoo mallattoo dabalataatiin, qabiyyee HTML gosa kamiyyuu kan akka mata duree, keewwata, ykn qaree gara suuraa xiqqaatti dabaluun ni danda'ama.
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.
Mallattoon suuraa xiqqaa salphaadha-a ul
lakkoofsa kamiyyuu wajjinli
elementoota kamiyyuu waliin waan barbaachisu qofa. Akkasumas super flexible dha, qabiyyee kee marsuuf gosa qabiyyee kamiyyuu mallattoo xiqqoo dabalataa qofaan hayyama.
Dhumarratti, qaamni suuraa xiqqaa gita sirna tarjaa jiran fayyadama—akka .span2
ykn.span3
—to'annoo dimenshinii suuraa xiqqaadhaaf.
Akkuma kanaan dura jedhame, mallattoo xiqqaadhaaf barbaachisu salphaa fi qajeelaa dha. Fakkiiwwan walqabsiifamaniif qindeessaa durtii kunooti :
- <ul class = "fakkiiwwan xiqqaa" >
- <li gita = "span4" >
- <a href = "#" class = "fakkii xiqqaa" >
- <img deetaa-src = "qabaa.js/300x200" alt = "" >
- </a> jechuun ni danda’ama
- </li> jechuun ni danda’ama
- ...
- </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 :
- <ul class = "fakkiiwwan xiqqaa" >
- <li gita = "span4" >
- <div class = "fakkii xiqqaa" >
- <img deetaa-src = "qabaa.js/300x200" alt = "" >
- <h3> Asxaa suuraa xiqqaa </h3>
- <p> Barreeffama xiqqaa... </p>
- </div> jechuun ni danda’ama
- </li> jechuun ni danda’ama
- ...
- </ul> jechuun ni danda’ama
Filannoowwan kee hunda gita tarjaa adda addaa siif jiran waliin qoradhu. Akkasumas safara adda addaa walitti makuu fi walsimsiisuu dandeessa.
.alert
Ergaa akeekkachiisa akeekkachiisaa bu'uuraaf barruu kamiyyuu fi qaree filannoo ari'uu keessa marsi .
- <div class = "akeekkachiisa" >
- < gosa qaree = "button" class = "cufi" data-dismiss = "akeekkachiisa" > × </button> jedhu
- <strong> Akeekkachiisa! </strong> Best check yo self, ati baayyee gaarii hin fakkaattu.
- </div> jechuun ni danda’ama
Mobile Safari fi Mobile Opera browsers, data-dismiss="alert"
attribute dabalatee, yeroo tag href="#"
fayyadamtan akeekkachiisa kuffisuuf an barbaadu.<a>
- <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.
- < gosa qaree = "button" class = "cufi" data-dismiss = "akeekkachiisa" > × </button> jedhu
Akeekkachiisa saffisaa fi salphaatti kuffisuuf plugin jQuery akeekkachiisaa fayyadami .
Ergaawwan dheeraadhaaf, dabaluudhaan padding gubbaa fi jala marfata akeekkachiisaa irratti dabali .alert-block
.
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.
- <div class = "akeekkachiisa-uggura" >
- < gosa qaree = "button" class = "cufi" data-dismiss = "akeekkachiisa" > × </button> jedhu
- <h4> Akeekkachiisa! </h4> jechuun ni danda’ama
- Best check yo self, ati hin jirtu...
- </div> jechuun ni danda’ama
Hiika akeekkachiisaa jijjiiruuf gita filannoo dabali.
- <div class = "dogongora-akeekkachiisa akeekkachiisaa" >
- ...
- </div> jechuun ni danda’ama
- <div class = "milkaa'ina-akeekkachiisa akeekkachiisaa" >
- ...
- </div> jechuun ni danda’ama
- <div class = "odeeffannoo-akeekkachiisa akeekkachiisaa" >
- ...
- </div> jechuun ni danda’ama
Sajoo adeemsa durtii kan garagalcha dhaabbataa qabu.
- <div class = "adeemsa" >
- <div gita = "bar" akkaataa = " bal'ina : 60 %; " ></div>
- </div> jechuun ni danda’ama
Bu'aa sarara qabu uumuuf garagalcha fayyadama. IE7-8 keessatti hin argamu.
- <div class = "adeemsa adeemsa-sarara" >
- <div gita = "bar" akkaataa = " bal'ina : 20 %; " ></div>
- </div> jechuun ni danda’ama
Sararoota mirgaa gara bitaatti sochoosuuf gara .active
itti dabali . .progress-striped
Version IE hunda keessatti hin argamu.
- <div class = "adeemsa adeemsa-sarara socho'aa" >
- <div gita = "bar" akkaataa = " bal'ina : 40 %; " ></div>
- </div> jechuun ni danda’ama
.progress
Isaan tuuluuf barruulee hedduu tokko keessa kaa'i .
- <div class = "adeemsa" >
- <div class = "bar bar-milkaa'ina" style = " bal'ina : 35 %; " ></div>
- <div class = "bar bar-akeekkachiisa" style = " bal'ina : 20 %; " ></div>
- <div class = "bar bar-balaa" style = " bal'ina : 10 %; " ></div>
- </div> jechuun ni danda’ama
Sajoo adeemsaa qaree walfakkaataa tokko tokko fi gita akeekkachiisaa akkaataa walfakkaataaf fayyadamu.
- <div class = "odeeffannoo adeemsa adeemsaa" >
- <div gita = "bar" akkaataa = " bal'ina : 20 % " ></div>
- </div> jechuun ni danda’ama
- <div class = "adeemsa adeemsa-milkaa'ina" >
- <div gita = "bar" akkaataa = " bal'ina : 40 % " ></div>
- </div> jechuun ni danda’ama
- <div class = "adeemsa-akeekkachiisa" >
- <div gita = "bar" akkaataa = " bal'ina : 60 % " ></div>
- </div> jechuun ni danda’ama
- <div class = "adeemsa adeemsa-balaa" >
- <div gita = "bar" akkaataa = " bal'ina : 80 % " ></div>
- </div> jechuun ni danda’ama
Halluuwwan jajjaboo wajjin wal fakkaatuun, barruulee adeemsaa sarara adda addaa qaban qabna.
- <div class = "adeemsa adeemsa-odeeffannoo adeemsa-sarara" >
- <div gita = "bar" akkaataa = " bal'ina : 20 % " ></div>
- </div> jechuun ni danda’ama
- <div class = "adeemsa adeemsa-milkaa'ina adeemsa-sarara" >
- <div gita = "bar" akkaataa = " bal'ina : 40 % " ></div>
- </div> jechuun ni danda’ama
- <div class = "adeemsa adeemsa-akeekkachiisa adeemsa-sarara" >
- <div gita = "bar" akkaataa = " bal'ina : 60 % " ></div>
- </div> jechuun ni danda’ama
- <div class = "adeemsa adeemsa-balaa adeemsa-sarara" >
- <div gita = "bar" akkaataa = " bal'ina : 80 % " ></div>
- </div> jechuun ni danda’ama
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.
Miidiyaan durtii wanta miidiyaa (fakkiiwwan, viidiyoo, sagalee) gara bitaa ykn mirga uggura qabiyyee yaa'uuf hayyama.
- <div class = "miidiyaa" >
- <a class = "harkisuu-bitaa" href = "#" >
- <img gita = "wanta-miidiyaa" deetaa-src = "qabaa.js/64x64" >
- </a> jechuun ni danda’ama
- <div class = "qaama-miidiyaa" >
- <h4 class = "media-heading" > Mata duree miidiyaa </h4>
- ...
- <!-- Wanti miidiyaa man'ee -->
- <div class = "miidiyaa" >
- ...
- </div> jechuun ni danda’ama
- </div> jechuun ni danda’ama
- </div> jechuun ni danda’ama
Xiqqoo mallattoo dabalataatiin, miidiyaa tarree keessaa fayyadamuu dandeessa (dhangiiwwan yaada ykn tarreewwan barruuleedhaaf faayidaa qaba).
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.
- <ul class = "tarree-miidiyaa" >
- <li class = "miidiyaa" >
- <a class = "harkisuu-bitaa" href = "#" >
- <img gita = "wanta-miidiyaa" deetaa-src = "qabaa.js/64x64" >
- </a> jechuun ni danda’ama
- <div class = "qaama-miidiyaa" >
- <h4 class = "media-heading" > Mata duree miidiyaa </h4>
- ...
- <!-- Wanti miidiyaa man'ee -->
- <div class = "miidiyaa" >
- ...
- </div> jechuun ni danda’ama
- </div> jechuun ni danda’ama
- </li> jechuun ni danda’ama
- </ul> jechuun ni danda’ama
Boolla akka bu'aa salphaa elementii tokko irratti fayyadamii bu'aa galtee kennuudhaaf.
- <div gita = "tole" >
- ...
- </div> jechuun ni danda’ama
Paadiingii fi goleewwan geengoo gita fooyyessaa filannoo lamaa wajjin too'adhu.
- <div class = "akka gaariitti-guddaa" >
- ...
- </div> jechuun ni danda’ama
- <div class = "tole akka gaariitti-xiqqaa" >
- ...
- </div> jechuun ni danda’ama
Qabiyyee akka moodaalotaa fi akeekkachiisa kuffisuuf mallattoo cufiinsa waliigalaa fayyadami.
- <button class = "cufi" > &yeroo; </button> jedhu
Meeshaaleen iOS href="#"
taateewwan cuqaasuuf yoo anchor fayyadamuu barbaadde barbaadu.
- <a class = "cufi" href = "#" > &yeroo; </a> jechuun ni danda’ama
Gitoota salphaa, xiyyeeffannoo agarsiisa xixiqqoo ykn jijjiirama amalaaf.
Elementii tokko gara bitaatti yaa'i
- class = "harkisuu-bitaa".
- . harkisuu - bitaa { .
- float : bitaa ;
- } .
Elementii tokko mirga yaa'i
- class = "harkisuu-mirgaa".
- . harkisuu - mirgaa { .
- float : mirgaa ;
- } .
Halluu elementii tokkoo gara#999
- class = "kan dhaamfame".
- . callisee { .
- halluu : #999;
- } .
float
Elementii kamiyyuu irratti kan qulqulleessi
- class = "qulqulleessuu".
- . qulqulleessuu { .
- * guddisuu : 1 ;
- &: dura , .
- &: booda { .
- agarsiisa : gabatee ;
- qabiyyee : "" ;
- } .
- &: booda { .
- ifa : lamaan isaanii ;
- } .
- } .