Komponen

Welasan komponen sing bisa digunakake maneh dibangun ing Bootstrap kanggo nyedhiyakake navigasi, tandha, popover, lan liya-liyane.

Klompok tombol

Gunakake grup tombol kanggo nggabungake pirang-pirang tombol dadi siji komponen gabungan. Mbangun karo seri <a>utawa <button>unsur.

laku paling apik

Disaranake pedoman ing ngisor iki kanggo nggunakake grup tombol lan toolbar:

  • Tansah nggunakake unsur padha ing grup tombol siji, <a>utawa <button>.
  • Aja nyampur tombol warna sing beda ing klompok tombol sing padha.
  • Gunakake lambang saliyane utawa tinimbang teks, nanging manawa kalebu teks alt lan judhul yen cocog.

Kelompok Tombol sing gegandhengan karo dropdown (ndeleng ngisor) kudu diarani kanthi kapisah lan tansah kalebu caret gulung mudhun kanggo nuduhake prilaku sing dituju.

Conto standar

Mangkene carane HTML nggoleki grup tombol standar sing dibangun nganggo tombol tag jangkar:

  1. <div class = "btn-group" >
  2. <button class = "btn" > 1 </button>
  3. <button class = "btn" > 2 </button>
  4. <button class = "btn" > 3 </button>
  5. </div>

Tuladha toolbar

Gabungke set <div class="btn-group">dadi a <div class="btn-toolbar">kanggo komponen sing luwih kompleks.

  1. <div class = "btn-toolbar" >
  2. <div class = "btn-group" >
  3. ...
  4. </div>
  5. </div>

kothak centhang lan roso radio

Klompok tombol uga bisa dadi radio, ing ngendi mung siji tombol aktif, utawa kothak centhang, ing ngendi wae tombol bisa aktif. Deleng docs Javascript kanggo iku.

Entuk javascript »

Dropdowns ing kelompok tombol

Kepala munggah! Tombol karo dropdowns kudu individu kebungkus ing dhewe .btn-grouping .btn-toolbarkanggo Rendering tepat.

Tombol dropdowns

Tuladha markup

Kaya klompok tombol, markup kita nggunakake markup tombol biasa, nanging kanthi sawetara tambahan kanggo nyaring gaya lan ndhukung plugin jQuery gulung mudhun Bootstrap.

  1. <div class = "btn-group" >
  2. <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >
  3. Tumindak
  4. <span class = "caret" ></span>
  5. </a>
  6. <ul class = "menu dropdown" >
  7. <!-- pranala menu gulung mudhun -->
  8. </ul>
  9. </div>

Dianggo karo kabeh ukuran tombol

Tombol dropdown bisa digunakake ing ukuran apa wae. ukuran tombol sampeyan nganti .btn-large, .btn-small, utawa .btn-mini.

Mbutuhake javascript

Tombol dropdown mbutuhake plugin gulung mudhun Bootstrap supaya bisa digunakake.

Ing sawetara kasus-kaya seluler-menu gulung mudhun bakal ngluwihi viewport. Sampeyan kudu ngrampungake alignment kanthi manual utawa nganggo javascript khusus.


Tombol pamisah gulung mudhun

Ringkesan lan conto

Mbangun gaya klompok tombol lan markup, kita bisa kanthi gampang nggawe tombol pamisah. Tombol pamisah nampilake tumindak standar ing sisih kiwa lan pilihan gulung mudhun ing sisih tengen kanthi pranala kontekstual.

Ukuran

Gunakake kelas tombol ekstra .btn-mini, .btn-small, utawa .btn-largekanggo ukuran.

  1. <div class = "btn-group" >
  2. ...
  3. <ul class = "menu tarik-turun-tengen" >
  4. <!-- pranala menu gulung mudhun -->
  5. </ul>
  6. </div>

Tuladha markup

We nggedhekake ing dropdowns tombol normal kanggo nyedhiyani tumindak tombol kapindho sing makaryakke minangka pemicu gulung mudhun kapisah.

  1. <div class = "btn-group" >
  2. <button class = "btn" > Action </button>
  3. <button class = "btn dropdown-toggle" data-toggle = "dropdown" >
  4. <span class = "caret" ></span>
  5. </tombol>
  6. <ul class = "menu dropdown" >
  7. <!-- pranala menu gulung mudhun -->
  8. </ul>
  9. </div>

Menu drop-up

Menu gulung mudhun uga bisa diowahi saka ngisor munggah kanthi nambahake kelas siji menyang wong tuwa langsung .dropdown-menu. Iku bakal loncat karo muter awak arah .caretlan reposition menu dhewe kanggo pindhah saka ngisor munggah tinimbang ndhuwur mudhun.

  1. <div class = "btn-group dropup" >
  2. <button class = "btn" > Dropup </button>
  3. <button class = "btn dropdown-toggle" data-toggle = "dropdown" >
  4. <span class = "caret" ></span>
  5. </tombol>
  6. <ul class = "menu dropdown" >
  7. <!-- pranala menu gulung mudhun -->
  8. </ul>
  9. </div>

Multicon-page pagination

Nalika nggunakake

pagination ultra simplistic lan minimal gaya inspirasi dening Rdio, apik kanggo app lan asil panelusuran. Blok gedhe angel dilewati, gampang diukur, lan nyedhiyakake area klik gedhe.

Pranala kaca stateful

Tautan bisa disesuaikan lan bisa digunakake ing sawetara kahanan kanthi kelas sing tepat. .disabledkanggo pranala sing ora bisa diklik lan .activekanggo kaca saiki.

Alignment fleksibel

Tambah salah siji saka rong kelas opsional kanggo ngganti alignment link pagination: .pagination-centeredlan .pagination-right.

Tuladha

Komponen pagination standar fleksibel lan bisa digunakake ing sawetara variasi.

Markup

Dibungkus ing <div>, pagination mung a <ul>.

  1. <div class = "pagination" >
  2. <ul>
  3. <li><a href = "#" > Prev </a></li>
  4. <li class = "aktif" >
  5. <a href = "#" > 1 </a>
  6. </li>
  7. <li><a href = "#" > 2 </a></li>
  8. <li><a href = "#" > 3 </a></li>
  9. <li><a href = "#" > 4 ​​</a></li>
  10. <li><a href = "#" > Sabanjure </a></li>
  11. </ul>
  12. </div>

Pager Kanggo pranala sadurungé lan sabanjuré cepet

Babagan pager

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.

Status dipatèni opsional

Link pager uga nggunakake .disabledkelas umum saka pagination.

Conto standar

Kanthi gawan, pager pusat pranala.

  1. <ul class = "pager" >
  2. <li>
  3. <a href = "#" > Sadurunge </a>
  4. </li>
  5. <li>
  6. <a href = "#" > Sabanjure </a>
  7. </li>
  8. </ul>

pranala selaras

Utawa, sampeyan bisa nyelarasake saben pranala menyang sisih:

  1. <ul class = "pager" >
  2. <li class = "sadurunge" >
  3. <a href = "#" > Luwih tuwa </a>
  4. </li>
  5. <li class = "sabanjure" >
  6. <a href = "#" > Anyar → </a>
  7. </li>
  8. </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>
kuwalik <span class="label label-inverse">Inverse</span>

Babagan

Lencana minangka komponen cilik lan prasaja kanggo nampilake indikator utawa sawetara jinis. Biasane ditemokake ing klien email kaya Mail.app utawa ing aplikasi seluler kanggo kabar push.

Kelas kasedhiya

jeneng Tuladha Markup
Default 1 <span class="badge">1</span>
Sukses 2 <span class="badge badge-success">2</span>
Pènget 4 <span class="badge badge-warning">4</span>
penting 6 <span class="badge badge-important">6</span>
Info 8 <span class="badge badge-info">8</span>
kuwalik 10 <span class="badge badge-inverse">10</span>

Unit pahlawan

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.

Markup

Bungkus konten sampeyan divkaya mangkene:

  1. <div class = "pahlawan-unit" >
  2. <h1> Judul </h1>
  3. <p> Tagline </p>
  4. <p>
  5. <a class = "btn btn-utama btn-gedhe" >
  6. Sinau luwih lengkap
  7. </a>
  8. </p>
  9. </div>

Hello, donya!

Iki minangka unit pahlawan sing prasaja, komponen gaya jumbotron sing prasaja kanggo narik kawigaten babagan konten utawa informasi sing ditampilake.

Sinau luwih lengkap

Header kaca

Cangkang prasaja h1kanggo nyisihake lan ngethok bagean konten ing kaca kanthi tepat. Bisa nggunakake h1standar small, unsur uga komponen liyane (kanthi gaya tambahan).

  1. <div class = "page-header" >
  2. <h1> Tuladha header kaca </h1>
  3. </div>

Gambar cilik standar

Kanthi gawan, gambar cilik Bootstrap dirancang kanggo nampilake gambar sing disambung kanthi markup sing dibutuhake minimal.

Highly customizable

Kanthi markup ekstra, sampeyan bisa nambah konten HTML kaya judhul, paragraf, utawa tombol menyang gambar cilik.

  • Label gambar cilik

    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida lan eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

    Tumindak Tumindak

  • Label gambar cilik

    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida lan eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

    Tumindak Tumindak

Apa nggunakake gambar cilik

Gambar cilik (sadurunge .media-gridnganti v1.4) apik kanggo kothak foto utawa video, asil panelusuran gambar, produk ritel, portofolio, lan liya-liyane. Bisa dadi pranala utawa isi statis.

Prasaja, markup fleksibel

Markup gambar cilik iku prasaja-a ulkaro sawetara liunsur iku kabeh sing dibutuhake. Iku uga super fleksibel, ngidini kanggo kabeh jinis isi karo mung dicokot liyane markup kanggo mbungkus isi.

Migunakake ukuran kolom kothak

Pungkasan, komponen gambar cilik nggunakake kelas sistem kothak sing ana - kaya .span2utawa .span3- kanggo ngontrol dimensi gambar cilik.

Markup

Kaya sing wis kasebut sadurunge, markup sing dibutuhake kanggo gambar cilik iku entheng lan langsung. Mangkene tampilan persiyapan standar kanggo gambar sing disambung :

  1. <ul class = "gambar cilik" >
  2. <li class = "span3" >
  3. <a href = "#" class = "gambar cilik" >
  4. <img src = "https://placehold.it/260x180" alt = "" >
  5. </a>
  6. </li>
  7. ...
  8. </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>:

  1. <ul class = "gambar cilik" >
  2. <li class = "span3" >
  3. <div class = "gambar cilik" >
  4. <img src = "https://placehold.it/260x180" alt = "" >
  5. <h5> Label gambar cilik </h5>
  6. <p> Katrangan gambar cilik ing kene... </p>
  7. </div>
  8. </li>
  9. ...
  10. </ul>

Conto liyane

Jelajahi kabeh pilihan sampeyan kanthi macem-macem kelas kothak sing kasedhiya kanggo sampeyan. Sampeyan uga bisa nyampur lan cocog ukuran sing beda.

Default entheng

Kelas dhasar sing ditulis maneh

Kanthi Bootstrap 2, kita wis nyederhanakake kelas dhasar: .alerttinimbang .alert-message. Kita uga wis nyuda markup minimal sing dibutuhake-ora <p>dibutuhake minangka standar, mung ing njaba <div>.

Pesen tandha tunggal

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.


Dadi apik karo javascript

Bootstrap dilengkapi plugin jQuery sing apik sing ndhukung pesen tandha, supaya cepet lan gampang ngilangi.

Entuk plugin »

Tuladha tandha

Bungkus pesen lan lambang cedhak opsional ing div kanthi kelas sing prasaja.

Pènget! Priksa dhewe, sampeyan ora katon apik banget.
  1. <div class = "waspada" >
  2. <button class = "close" data-dismiss = "waspada" > × </button>
  3. <strong> Awas! </strong> Priksa dhewe, sampeyan ora katon apik banget.
  4. </div>

Kepala munggah! Piranti iOS mbutuhake href="#"kanggo ngilangi tandha. Pesthekake nyakup lan atribut data kanggo lambang cedhak jangkar. Utawa, sampeyan bisa nggunakake <button>unsur kanthi atribut data, sing wis dipilih kanggo dokumen kita. Nalika nggunakake <button>, sampeyan kudu kalebutype="button" utawa formulir sampeyan bisa uga ora ngirim.

Gampang ngluwihi pesen tandha standar kanthi rong kelas opsional: .alert-blockkanggo padding lan kontrol teks liyane lan .alert-headingkanggo judhul sing cocog.

Pènget!

Priksa dhewe, sampeyan ora katon apik banget. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, utawa scelerisque nisl consectetur et.

  1. <div class = "block alert alert" >
  2. <a class = "close" data-dismiss = "waspada" href = "#" > × </a>
  3. <h4 class = "alert-heading" > Warning! </h4>
  4. Priksa dhewe, sampeyan ora ...
  5. </div>

Alternatif kontekstual Tambah kelas opsional kanggo ngganti konotasi tandha

Kesalahan utawa bebaya

Oh sworo seru! Ganti sawetara perkara lan coba kirim maneh.
  1. <div class = "alert alert-error" >
  2. ...
  3. </div>

Sukses

Inggih rampung! Sampeyan kasil maca pesen tandha penting iki.
  1. <div class = "waspada-sukses" >
  2. ...
  3. </div>

Informasi

Kepala munggah! Tandha iki mbutuhake perhatian sampeyan, nanging ora penting banget.
  1. <div class = "waspada-info" >
  2. ...
  3. </div>

Conto lan markup

dhasar

Bar kemajuan standar kanthi gradien vertikal.

  1. <div class = "kemajuan" >
  2. <div class = "bar"
  3. style = " jembaré : 60 %; " ></div>
  4. </div>

belang

Nggunakake gradien kanggo nggawe efek belang (ora IE).

  1. <div class = "progress progress-striped" >
  2. <div class = "bar"
  3. style = " width : 20 %; " ></div>
  4. </div>

Animasi

Njupuk conto belang lan animate (ora IE).

  1. <div class = "progress progress-striped
  2. aktif" >
  3. <div class = "bar"
  4. style = " jembaré : 40 %; " ></div>
  5. </div>

Pilihan lan dhukungan browser

werna tambahan

Bar kemajuan nggunakake sawetara tombol lan kelas tandha sing padha kanggo gaya sing konsisten.

Bar belang

Kaya warna sing padhet, kita duwe bar kemajuan belang sing beda-beda.

kelakuane

Bar kemajuan nggunakake transisi CSS3, dadi yen sampeyan nyetel jembar kanthi dinamis liwat javascript, ukurane bakal lancar.

Yen sampeyan nggunakake .activekelas, .progress-stripedgaris kemajuan sampeyan bakal nggawe garis-garis saka kiwa nengen.

Dhukungan browser

Bar kemajuan nggunakake gradien CSS3, transisi, lan animasi kanggo entuk kabeh efek. Fitur-fitur kasebut ora didhukung ing IE7-9 utawa versi Firefox sing luwih lawas.

Opera lan IE ora ndhukung animasi ing wektu iki.

sumur

Gunakake sumur minangka efek prasaja ing unsur kanggo menehi efek inset.

Delengen, aku ana ing sumur!
  1. <div class = "uga" >
  2. ...
  3. </div>

Tutup lambang

Gunakake lambang cedhak umum kanggo ngilangi konten kaya modal lan tandha.

  1. <tombol kelas = "nutup" > & kaping; </tombol>

Piranti iOS mbutuhake href="#" kanggo acara klik yen sampeyan luwih seneng nggunakake jangkar.

  1. <a class = "close" href = "#" > & kaping; </a>