Vipengee vingi vinavyoweza kutumika tena vimeundwa kwenye Bootstrap ili kutoa urambazaji, arifa, popover, na mengi zaidi.
Uundaji wa kurasa uliorahisishwa sana na wenye mtindo wa chini uliochochewa na Rdio, mzuri kwa programu na matokeo ya utafutaji. Kizuizi kikubwa ni ngumu kukosa, kinaweza kuongezwa kwa urahisi, na hutoa maeneo makubwa ya kubofya.
Viungo vinaweza kubinafsishwa na hufanya kazi katika hali kadhaa na darasa linalofaa. .disabled
kwa viungo visivyobofya na .active
kwa ukurasa wa sasa.
Ongeza mojawapo ya madarasa mawili ya hiari ili kubadilisha upatanishi wa viungo vya uandishi: .pagination-centered
na .pagination-right
.
Kipengele cha pagination chaguo-msingi kinaweza kunyumbulika na hufanya kazi katika idadi ya tofauti.
Imefungwa katika <div>
, pagination ni tu <ul>
.
- <div class = "pagination" >
- <ul>
- <li><a href = "#" > Iliyotangulia </a></li>
- <li class = "active" >
- <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 = "#" > Inayofuata </a></li>
- </ul>
- </ div>
Sehemu ya pager ni seti ya viungo vya utekelezaji rahisi wa pagination na alama nyepesi na hata mitindo nyepesi. Ni nzuri kwa tovuti rahisi kama blogu au majarida.
Kwa chaguo-msingi, paja huweka viungo.
- <ul class = "pager" >
- <li>
- <a href = "#" > Iliyotangulia </a>
- </li>
- <li>
- <a href = "#" > Inayofuata </a>
- </li>
- </ul>
Vinginevyo, unaweza kusawazisha kila kiunga kwa pande:
- <ul class = "pager" >
- <li class = "previous" >
- <a href = "#" > ← Mzee </a>
- </li>
- <li class = "next" >
- <a href = "#" > Mpya zaidi → </a>
- </li>
- </ul>
Lebo | Alama |
---|---|
Chaguomsingi | <span class="label">Default</span> |
Mpya | <span class="label label-success">New</span> |
Onyo | <span class="label label-warning">Warning</span> |
Muhimu | <span class="label label-important">Important</span> |
Habari | <span class="label label-info">Info</span> |
Kwa chaguo-msingi, vijipicha vya Bootstrap vimeundwa ili kuonyesha picha zilizounganishwa na alama ndogo zinazohitajika.
Ukiwa na lebo ya ziada, inawezekana kuongeza aina yoyote ya maudhui ya HTML kama vile vichwa, aya, au vitufe kwenye vijipicha.
Vijipicha (hapo awali .media-grid
hadi v1.4) ni vyema kwa gridi za picha au video, matokeo ya utafutaji wa picha, bidhaa za rejareja, portfolios, na mengi zaidi. Wanaweza kuwa viungo au maudhui tuli.
Alama ya kijipicha ni rahisi—a ul
yenye idadi yoyote ya li
vipengele ndiyo tu inayohitajika. Pia ni rahisi kunyumbulika, ikiruhusu aina yoyote ya maudhui yenye alamisho kidogo zaidi ili kufunga maudhui yako.
Hatimaye, sehemu ya vijipicha hutumia aina zilizopo za mfumo wa gridi—kama .span2
au .span3
—kwa udhibiti wa vipimo vya kijipicha.
Kama ilivyotajwa hapo awali, alama inayohitajika ya vijipicha ni nyepesi na moja kwa moja. Hapa angalia usanidi chaguo-msingi wa picha zilizounganishwa :
- <ul class = "thumbnails" >
- <li class = "span3" >
- <a href = "#" class = "thumbnail" >
- <img src = "https://placehold.it/260x180" alt = "" >
- </a>
- </li>
- ...
- </ul>
Kwa maudhui maalum ya HTML katika vijipicha, alama hubadilika kidogo. Ili kuruhusu maudhui ya kiwango cha kuzuia mahali popote, tunabadilishana <a>
kama <div>
vile:
- <ul class = "thumbnails" >
- <li class = "span3" >
- <div class = "thumbnail" >
- <img src = "https://placehold.it/260x180" alt = "" >
- <h5> Lebo ya kijipicha </h5>
- <p> Manukuu ya kijipicha hapa hapa... </p>
- </ div>
- </li>
- ...
- </ul>
Kwa Bootstrap 2, tumerahisisha darasa la msingi: .alert
badala ya .alert-message
. Pia tumepunguza kiwango cha chini zaidi cha kuashiria kinachohitajika—hapana <p>
inahitajika kwa chaguo-msingi, ya nje tu <div>
.
Kwa kipengele kinachodumu zaidi chenye msimbo mdogo, tumeondoa mwonekano wa kutofautisha wa arifa za kuzuia, ujumbe unaokuja na pedi nyingi na maandishi zaidi. Darasa pia limebadilika kuwa .alert-block
.
Bootstrap inakuja na programu-jalizi nzuri ya jQuery inayoauni ujumbe wa arifa, na kufanya kuziondoa haraka na kwa urahisi.
Funga ujumbe wako na ikoni ya hiari ya kufunga kwenye div na darasa rahisi.
- <div class = "alert" >
- <a class = "close" > × </a>
- <strong> Onyo! </strong> Bora jiangalie mwenyewe, huonekani kuwa mzuri sana.
- </ div>
Panua kwa urahisi ujumbe wa kawaida wa arifa kwa madarasa mawili ya hiari: .alert-block
kwa vidhibiti zaidi vya kuweka na kuweka maandishi na .alert-heading
kwa kichwa kinacholingana.
Bora jiangalie mwenyewe, huonekani kuwa mzuri sana. Nulla vitae elit libero, pharetra augue. Karibu commodo cursus magna, vel scelerisque nisl consectetur et.
- <div class = "alert alert-block" >
- <a class = "close" > × </a>
- <h4 class = "alert-heading" > Onyo! </ h4>
- Bora ujichunguze, wewe si...
- </ div>
- <div class = "alert alert-error" >
- ...
- </ div>
- <div class = "alert alert-success" >
- ...
- </ div>
- <div class = "tahadhari ya taarifa" >
- ...
- </ div>
Upau chaguo-msingi wa maendeleo na upinde rangi wima.
- <div class = "progress" >
- <div class = "bar"
- style = " upana : 60 %; " ></div>
- </ div>
Hutumia upinde rangi kuunda athari yenye milia.
- <div class = "maelezo ya maendeleo
- hatua kwa hatua" >
- <div class = "bar"
- style = " upana : 20 %; " ></div>
- </ div>
Huchukua mfano wa mistari na kuuhuisha.
- <div class = "maendeleo-hatari
- maendeleo-amilifu" >
- <div class = "bar"
- style = " upana : 40 %; " ></div>
- </ div>
Pau za maendeleo hutumia baadhi ya majina ya darasa sawa kama vitufe na arifa za mitindo sawa.
.progress-info
.progress-success
.progress-danger
Vinginevyo, unaweza kubinafsisha faili za LESS na kukunja rangi na saizi zako.
Pau za maendeleo hutumia mabadiliko ya CSS3, kwa hivyo ukirekebisha upana kwa njia ya javascript, itabadilisha ukubwa vizuri.
Ukitumia .active
darasa, .progress-striped
pau zako za maendeleo zitahuisha milia kutoka kushoto kwenda kulia.
Pau za maendeleo hutumia gradient za CSS3, mipito, na uhuishaji kufikia athari zake zote. Vipengele hivi havitumiki katika IE7-8 au matoleo ya awali ya Firefox.
Opera haitumii uhuishaji kwa wakati huu.
Tumia kisima kama athari rahisi kwenye kipengele ili kukipa athari ya kuingiza.
- <div class = "vizuri" >
- ...
- </ div>
Tumia aikoni ya jumla ya kufunga kwa kuondoa maudhui kama vile miundo na arifa.
- <a class = "close" > × </a>