Plizyè douzèn eleman ki kapab itilize ankò yo bati nan Bootstrap pou bay navigasyon, alèt, popovers, ak plis ankò.
Paginasyon ultra senplist ak minim estile enspire pa Rdio, bon pou aplikasyon pou ak rezilta rechèch. Gwo blòk la difisil pou rate, fasil évolutive, epi li bay gwo zòn klike sou.
Lyen yo personnalisable ak travay nan yon kantite sikonstans ak bon klas la. .disabled
pou lyen ki pa klike ak .active
pou paj aktyèl la.
Ajoute youn nan de klas opsyonèl pou chanje aliyman lyen paginasyon yo: .pagination-centered
ak .pagination-right
.
Eleman pagination default la fleksib epi li travay nan yon kantite varyasyon.
Anvlope nan yon <div>
, pagination se jis yon <ul>
.
- <div class = "pagination" >
- <ul>
- <li><a href = "#" > Prev </a></li>
- <li class = "aktif" >
- <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 = "#" > Next </a></li>
- </ul>
- </div>
Eleman pager la se yon seri lyen pou enplemantasyon paginasyon senp ak mak limyè ak estil menm pi lejè. Li bon pou sit senp tankou blog oswa magazin.
Pa default, pager la santre lyen.
- <ul class = "pager" >
- <li>
- <a href = "#" > Previous </a>
- </li>
- <li>
- <a href = "#" > Next </a>
- </li>
- </ul>
Etikèt | Marke |
---|---|
Default | <span class="label">Default</span> |
Nouvo | <span class="label label-success">New</span> |
Avètisman | <span class="label label-warning">Warning</span> |
Enpòtan | <span class="label label-important">Important</span> |
Info | <span class="label label-info">Info</span> |
Pa default, ti miniatures Bootstrap yo fèt pou montre imaj ki lye yo ak maketing minimòm obligatwa.
Avèk yon ti mak siplemantè, li posib pou ajoute nenpòt kalite kontni HTML tankou tit, paragraf, oswa bouton nan miniatures.
Miniatures (anvan .media-grid
jiska v1.4) yo bon pou kadriyaj foto oswa videyo, rezilta rechèch imaj, pwodwi Yo Vann an Detay, pòtfolyo, ak plis ankò. Yo ka lyen oswa kontni estatik.
Markage miniatures se senp — yon ul
ak nenpòt kantite li
eleman se tout sa ki nesesè. Li la tou super fleksib, sa ki pèmèt pou nenpòt kalite kontni ak jis yon ti jan plis maketing vlope sa ou yo.
Anfen, eleman miniature yo sèvi ak klas sistèm kadriyaj ki deja egziste-tankou .span2
oswa .span3
-pou kontwòl dimansyon miniature.
Kòm mansyone deja, maketing ki nesesè pou ti miniatures se lejè ak senp. Men yon gade nan konfigirasyon default pou imaj ki lye yo :
- <ul class = "miniature" >
- <li class = "span3" >
- <a href = "#" class = "miniature" >
- <img src = "https://placehold.it/260x180" alt = "" >
- </a>
- </li>
- ...
- </ul>
Pou kontni HTML koutim nan miniatures, maketing la chanje yon ti kras. Pou pèmèt kontni nivo blòk nenpòt kote, nou chanje a <a>
pou yon <div>
tankou konsa:
- <ul class = "miniature" >
- <li class = "span3" >
- <div class = "miniature" >
- <img src = "https://placehold.it/260x180" alt = "" >
- <h5> Etikèt miniature </h5>
- <p> Titre miniature isit la... </p>
- </div>
- </li>
- ...
- </ul>
Avèk Bootstrap 2, nou te senplifye klas debaz la: .alert
olye de .alert-message
. Nou te tou redwi maketing minimòm obligatwa a—pa gen okenn <p>
obligatwa pa default, jis deyò a <div>
.
Pou yon eleman ki pi dirab ak mwens kòd, nou te retire gade nan diferansye pou alèt blòk, mesaj ki vini ak plis padding ak tipikman plis tèks. Klas la tou chanje an .alert-block
.
Bootstrap vini ak yon gwo plugin jQuery ki sipòte mesaj alèt, sa ki fè ranvwaye yo rapid ak fasil.
Anvlope mesaj ou a ak yon icon fèmen opsyonèl nan yon div ak klas senp.
- <div class = "alèt" >
- <a class = "fèmen" > × </a>
- <strong> Avètisman! </strong> Pi bon tcheke yo tèt ou, ou pa gade twò bon.
- </div>
Fasil pwolonje mesaj alèt estanda a ak de klas opsyonèl: .alert-block
pou plis padding ak kontwòl tèks ak .alert-heading
pou yon tit matche.
Pi bon tcheke ou tèt ou, ou pa gade twò bon. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
- <div class = "alèt alèt-blòk" >
- <a class = "fèmen" > × </a>
- <h4 class = "alert-heading" > Avètisman! </h4>
- Pi bon tcheke tèt ou, ou pa...
- </div>
Default ba pwogrè ak yon gradyan vètikal.
- <div class = "pwogrè" >
- <div class = "ba"
- style = " lajè : 60 %; " ></div>
- </div>
Sèvi ak yon gradyan pou kreye yon efè trase.
- <div class = "pwogrè pwogrè-info
- pwogrè-ray" >
- <div class = "ba"
- style = " lajè : 20 %; " ></div>
- </div>
Pran egzanp trase a epi li anime li.
- <div class = "pwogrè pwogrè-danje
- aktif pwogrese" >
- <div class = "ba"
- style = " lajè : 40 %; " ></div>
- </div>
Ba pwogrè yo itilize kèk nan menm non klas yo kòm bouton ak alèt pou fason menm jan an.
.progress-info
.progress-success
.progress-danger
Altènativman, ou ka Customize dosye yo MWEN ak woule koulè pwòp ou yo ak gwosè.
Ba pwogrè yo sèvi ak tranzisyon CSS3, kidonk si ou ajiste dinamik lajè a atravè javascript, li pral san pwoblèm redimansyone.
Si ou itilize .active
klas la, .progress-striped
ba pwogrè ou yo pral anime bann yo gòch a dwat.
Ba pwogrè yo sèvi ak gradyan CSS3, tranzisyon, ak animasyon pou reyalize tout efè yo. Karakteristik sa yo pa sipòte nan IE7-8 oswa ansyen vèsyon Firefox.
Opera pa sipòte animasyon nan moman sa a.
Sèvi ak pi a kòm yon efè senp sou yon eleman bay li yon efè ensèkle.
- <div class = "byen" >
- ...
- </div>
Sèvi ak jenerik ikòn fèmen pou ranvwaye kontni tankou modal ak alèt.
- <a class = "fèmen" > × </a>