An gina yawancin abubuwan sake amfani da su a cikin Bootstrap don samar da kewayawa, faɗakarwa, popovers, da ƙari mai yawa.
Mafi sauƙaƙa da ƙaramin salo mai salo wanda aka yi wahayi daga Rdio, mai girma ga ƙa'idodi da sakamakon bincike. Babban toshe yana da wuya a rasa, sauƙin daidaitawa, kuma yana ba da manyan wuraren dannawa.
Ana iya daidaita hanyoyin haɗin gwiwa kuma suna aiki a cikin yanayi da yawa tare da ajin da ya dace. .disabled
don hanyoyin haɗin da ba za a iya dannawa ba kuma .active
don shafin na yanzu.
Ƙara ko wanne daga cikin azuzuwan zaɓi biyu don canza daidaita hanyoyin haɗin yanar gizo: .pagination-centered
da .pagination-right
.
Sashin rubutun tsoho yana da sassauƙa kuma yana aiki cikin bambance-bambance masu yawa.
An nade a cikin wani <div>
, pagination ne kawai <ul>
.
- <div class = "pagination" >
- <ul>
- <li><a href = "#" > Prev </a></li>
- <li class = "aiki" >
- <a href = "#" > 1 </a>
- </li>
- <li><a href = "#" > 2 </a></li>
- <li><a href = "#" > 3 </a></li>
- <li><a href = "#" > 4 </a></li>
- <li><a href = "#" > Gaba </a></li>
- </ul>
- </div>
Bangaren pager saitin hanyoyin haɗin gwiwa ne don aiwatarwa masu sauƙi na pagination tare da alamar haske har ma da salo masu sauƙi. Yana da kyau ga shafuka masu sauƙi kamar blogs ko mujallu.
Ta hanyar tsoho, shafukan yanar gizo suna haɗin haɗin kai.
- <ul class = "pager" >
- <li>
- <a href = "#" > Gaba </a>
- </li>
- <li>
- <a href = "#" > Gaba </a>
- </li>
- </ul>
A madadin, zaku iya daidaita kowace hanyar haɗin gwiwa zuwa ɓangarorin:
- <ul class = "pager" >
- <li class = "na baya" >
- <a href = "#" > ← Tsoho </a>
- </li>
- <li class = "na gaba" >
- <a href = "#" > Sabo → </a>
- </li>
- </ul>
Lakabi | Alamar alama |
---|---|
Default | <span class="label">Default</span> |
Sabo | <span class="label label-success">New</span> |
Gargadi | <span class="label label-warning">Warning</span> |
Muhimmanci | <span class="label label-important">Important</span> |
Bayani | <span class="label label-info">Info</span> |
Ta hanyar tsoho, an tsara thumbnails na Bootstrap don nuna hotunan da aka haɗe tare da ƙarancin alamar da ake buƙata.
Tare da ɗan ƙarin alamar alama, yana yiwuwa a ƙara kowane nau'in abun ciki na HTML kamar kanun labarai, sakin layi, ko maɓalli a cikin ƙananan hotuna.
Tambayoyi (a baya .media-grid
har zuwa v1.4) suna da kyau don grid na hotuna ko bidiyo, sakamakon binciken hoto, samfuran tallace-tallace, fayiloli, da ƙari mai yawa. Suna iya zama mahaɗi ko abun ciki na tsaye.
Alamar thumbnail abu ne mai sauƙi - ul
tare da kowane adadin li
abubuwa shine duk abin da ake buƙata. Hakanan yana da sauƙin sassauƙa, yana ba da damar kowane nau'in abun ciki tare da ɗan ƙara alama don naɗe abubuwan ku.
A ƙarshe, ɓangaren thumbnails yana amfani da azuzuwan tsarin grid na yanzu-kamar .span2
ko .span3
—don sarrafa girman ɗan yatsa.
Kamar yadda aka ambata a baya, alamar da ake buƙata don thumbnails yana da haske kuma mai sauƙi. Anan kalli saitunan tsoho don hotuna masu alaƙa :
- <ul class = "thumbnails" >
- <li class = "span3" >
- <a href = "#" class = "thumbnail" >
- <img src = "https://placehold.it/260x180" alt = "" >
- </a>
- </li>
- ...
- </ul>
Don abun ciki na HTML na al'ada a cikin ƙananan hotuna, alamar tana canzawa kaɗan. Don ba da izinin toshe abun ciki a ko'ina, muna musanya shi <a>
don <div>
kamar haka:
- <ul class = "thumbnails" >
- <li class = "span3" >
- <div class = "thumbnail" >
- <img src = "https://placehold.it/260x180" alt = "" >
- <h5> Alamar ɗan yatsa </h5>
- <p> Takardun yatsa a nan... </p>
- </div>
- </li>
- ...
- </ul>
Tare da Bootstrap 2, mun sauƙaƙe ajin tushe: .alert
maimakon .alert-message
. Mun kuma rage mafi ƙarancin alamar da ake buƙata — ba <p>
a buƙata ta tsohuwa, kawai na waje <div>
.
Don ƙarin abin ɗorewa tare da ƙasan lamba, mun cire bambance-bambancen neman faɗakarwar toshewa, saƙonnin da suka zo tare da ƙarin padding da yawanci ƙarin rubutu. Ajin kuma ya canza zuwa .alert-block
.
Bootstrap ya zo tare da babban kayan aikin jQuery wanda ke goyan bayan saƙonnin faɗakarwa, yin watsi da su cikin sauri da sauƙi.
Rufe saƙon ku da gunkin kusa na zaɓi a cikin div tare da aji mai sauƙi.
- <div class = "jijjiga" >
- <a class = "kusa" > × </a>
- <strong> Gargadi! Mafi kyawun duba yo kai, ba ka da kyau sosai.
- </div>
Sauƙaƙe miƙe daidaitaccen saƙon faɗakarwa tare da azuzuwan zaɓi guda biyu: .alert-block
don ƙarin padding da sarrafa rubutu da kuma .alert-heading
taken da ya dace.
Mafi kyawun duba kanku, ba ku da kyau sosai. Nulla vitae elit libero, a pharetra augue. Abubuwan da suka dace da cursus magna, velsselerisque nisl consectetur et.
- <div class = "jijjiga-block" >
- <a class = "kusa" > × </a>
- <h4 class = "jigon faɗakarwa" > Gargadi! </h4> ku
- Mafi kyawun bincika kan ku, ba ku ...
- </div>
- <div class = "kuskuren faɗakarwa" >
- ...
- </div>
- <div class = "jijjiga faɗakarwa-nasara" >
- ...
- </div>
- <div class = "jijjiga-info" >
- ...
- </div>
Tsohuwar mashaya ci gaba tare da gradient a tsaye.
- <div class = "ci gaba" >
- <div class = "bar"
- style = " nisa : 60 %; " </div>
- </div>
Yana amfani da gradient don ƙirƙirar tasirin tsiri.
- <div class = "bayanan ci gaba
- ci gaba-raguwa" >
- <div class = "bar"
- style = " nisa : 20 %; " </div>
- </div>
Dauki misalin tsiri kuma ya raya shi.
- <div class = "ci gaba-haɗari
- ci gaba-striped aiki" >
- <div class = "bar"
- style = " nisa : 40 %; " >> div>
- </div>
Sandunan ci gaba suna amfani da wasu sunaye iri ɗaya kamar maɓalli da faɗakarwa don salo iri ɗaya.
.progress-info
.progress-success
.progress-danger
A madadin, zaku iya keɓance fayilolin LESS kuma kuyi naku launuka da girmanku.
Sandunan ci gaba suna amfani da sauye-sauye na CSS3, don haka idan kun daidaita faɗin ta hanyar javascript, zai sake girma cikin sauƙi.
Idan kuna amfani da .active
ajin, .progress-striped
sandunan ci gaban ku za su rayar da ratsi daga hagu zuwa dama.
Sandunan ci gaba suna amfani da gradients CSS3, canji, da rayarwa don cimma duk tasirin su. Ba a tallafawa waɗannan fasalulluka a cikin IE7-8 ko tsofaffin nau'ikan Firefox.
Opera baya goyan bayan rayarwa a wannan lokacin.
Yi amfani da rijiyar azaman tasiri mai sauƙi akan wani abu don ba shi tasirin sa.
- <div class = "lafiya" >
- ...
- </div>
Yi amfani da madaidaicin gunkin kusa don korar abun ciki kamar tsari da faɗakarwa.
- <a class = "kusa" > & lokuta; </a>