Welasan komponen sing bisa digunakake maneh dibangun ing Bootstrap kanggo nyedhiyakake navigasi, tandha, popover, lan liya-liyane.
pagination ultra simplistic lan minimally gaya inspirasi dening Rdio, apik kanggo app lan asil panelusuran. Blok gedhe angel dilewati, gampang diukur, lan nyedhiyakake area klik gedhe.
Tautan bisa disesuaikan lan bisa digunakake ing sawetara kahanan kanthi kelas sing tepat. .disabled
kanggo pranala sing ora bisa diklik lan .active
kanggo kaca saiki.
Tambah salah siji saka rong kelas opsional kanggo ngganti alignment link pagination: .pagination-centered
lan .pagination-right
.
Komponen pagination standar fleksibel lan bisa digunakake ing sawetara variasi.
Dibungkus ing <div>
, pagination mung a <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 = "#" > Sabanjure </a></li>
- </ul>
- </div>
Komponen pager minangka sakumpulan pranala kanggo implementasi pagination sing prasaja kanthi markup cahya lan gaya sing luwih entheng. Iku apik kanggo situs prasaja kaya blog utawa majalah.
Kanthi gawan, pager pusat pranala.
- <ul class = "pager" >
- <li>
- <a href = "#" > Sadurunge </a>
- </li>
- <li>
- <a href = "#" > Sabanjure </a>
- </li>
- </ul>
Label | Markup |
---|---|
Default | <span class="label">Default</span> |
Sukses | <span class="label label-success">Success</span> |
Pènget | <span class="label label-warning">Warning</span> |
penting | <span class="label label-important">Important</span> |
Info | <span class="label label-info">Info</span> |
Bootstrap nyedhiyakake komponen sing entheng lan fleksibel sing disebut unit pahlawan kanggo nampilake konten ing situs sampeyan. Kerjane apik ing situs marketing lan konten sing abot.
Bungkus konten sampeyan div
kaya mangkene:
- <div class = "pahlawan-unit" >
- <h1> Judul </h1>
- <p> Tagline </p>
- <p>
- <a class = "btn btn-utama btn-gedhe" >
- Sinau luwih lengkap
- </a>
- </p>
- </div>
Iki minangka unit pahlawan sing prasaja, komponen gaya jumbotron sing prasaja kanggo narik kawigaten babagan konten utawa informasi sing ditampilake.
Cangkang prasaja h1
kanggo nglebokake spasi lan ngetung bagean isi ing sawijining kaca. Bisa nggunakake h1
standar small
, unsur uga komponen liyane (kanthi gaya tambahan).
- <div class = "page-haeder" >
- <h1> Tuladha header kaca </h1>
- </div>
Kanthi gawan, gambar cilik Bootstrap dirancang kanggo nampilake gambar sing disambung kanthi markup sing dibutuhake minimal.
Kanthi markup ekstra, sampeyan bisa nambah konten HTML kaya judhul, paragraf, utawa tombol menyang gambar cilik.
Gambar cilik (sadurunge .media-grid
nganti v1.4) apik kanggo kothak foto utawa video, asil panelusuran gambar, produk eceran, portofolio, lan liya-liyane. Bisa dadi pranala utawa isi statis.
Markup gambar cilik iku prasaja-a ul
karo sawetara li
unsur iku kabeh sing dibutuhake. Iku uga super fleksibel, ngidini kanggo kabeh jinis isi karo mung dicokot liyane markup kanggo mbungkus isi.
Pungkasan, komponen gambar cilik nggunakake kelas sistem kothak sing ana - kaya .span2
utawa .span3
- kanggo ngontrol dimensi gambar cilik.
Kaya sing wis kasebut sadurunge, markup sing dibutuhake kanggo gambar cilik iku entheng lan langsung. Mangkene tampilan persiyapan standar kanggo gambar sing disambung :
- <ul class = "gambar cilik" >
- <li class = "span3" >
- <a href = "#" class = "gambar cilik" >
- <img src = "https://placehold.it/260x180" alt = "" >
- </a>
- </li>
- ...
- </ul>
Kanggo konten HTML khusus ing gambar cilik, markup rada owah. Kanggo ngidini konten level blok ing endi wae, kita ngganti <a>
kaya mangkene <div>
:
- <ul class = "gambar cilik" >
- <li class = "span3" >
- <div class = "gambar cilik" >
- <img src = "https://placehold.it/260x180" alt = "" >
- <h5> Label gambar cilik </h5>
- <p> Katrangan gambar cilik ing kene... </p>
- </div>
- </li>
- ...
- </ul>
Kanthi Bootstrap 2, kita wis nyederhanakake kelas dasar: .alert
tinimbang .alert-message
. Kita uga wis nyuda markup minimal sing dibutuhake-ora <p>
dibutuhake minangka standar, mung ing njaba <div>
.
Kanggo komponen sing luwih awet karo kode kurang, kita wis mbusak tampilan mbedakake kanggo tandha pemblokiran, pesen sing teka karo liyane padding lan biasane luwih teks. Kelas uga wis diganti dadi .alert-block
.
Bootstrap dilengkapi plugin jQuery sing apik sing ndhukung pesen tandha, supaya cepet lan gampang ngilangi.
Bungkus pesen lan lambang cedhak opsional ing div kanthi kelas sing prasaja.
- <div class = "waspada" >
- <a class = "close" data-dismiss = "waspada" > × </a>
- <strong> Awas! </strong> Priksa dhewe, sampeyan ora katon apik banget.
- </div>
Gampang ngluwihi pesen tandha standar kanthi rong kelas opsional: .alert-block
kanggo padding lan kontrol teks liyane lan .alert-heading
kanggo judhul sing cocog.
Priksa dhewe, sampeyan ora katon apik banget. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, utawa scelerisque nisl consectetur et.
- <div class = "block alert alert" >
- <a class = "close" data-dismiss = "waspada" > × </a>
- <h4 class = "alert-heading" > Warning! </h4>
- Priksa dhewe, sampeyan ora ...
- </div>
- <div class = "alert alert-error" >
- ...
- </div>
- <div class = "waspada-sukses" >
- ...
- </div>
- <div class = "waspada-info" >
- ...
- </div>
Bar kemajuan standar kanthi gradien vertikal.
- <div class = "kemajuan" >
- <div class = "bar"
- style = " jembaré : 60 %; " ></div>
- </div>
Migunakake gradien kanggo nggawe efek belang.
- <div class = "progress-info
- kemajuan-belang" >
- <div class = "bar"
- style = " width : 20 %; " ></div>
- </div>
Njupuk conto belang lan animasi.
- <div class = "progres kemajuan-bebaya
- progress-striped active" >
- <div class = "bar"
- style = " jembaré : 40 %; " ></div>
- </div>
Bar kemajuan nggunakake sawetara jeneng kelas sing padha karo tombol lan tandha kanggo gaya sing padha.
.progress-info
.progress-success
.progress-danger
Utawa, sampeyan bisa ngatur file KURANG lan muter werna lan ukuran sampeyan dhewe.
Bar kemajuan nggunakake transisi CSS3, dadi yen sampeyan nyetel jembar kanthi dinamis liwat javascript, ukurane bakal lancar.
Yen sampeyan nggunakake .active
kelas, .progress-striped
garis kemajuan sampeyan bakal nggawe garis-garis saka kiwa nengen.
Bar kemajuan nggunakake gradien CSS3, transisi, lan animasi kanggo entuk kabeh efek. Fitur kasebut ora didhukung ing IE7-8 utawa versi Firefox sing luwih lawas.
Opera ora ndhukung animasi ing wektu iki.
Gunakake sumur minangka efek prasaja ing unsur kanggo menehi efek inset.
- <div class = "uga" >
- ...
- </div>
Gunakake lambang cedhak umum kanggo ngilangi konten kaya modal lan tandha.
- <a class = "cedhak" > & kaping; </a>