Komponen

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

Kepala munggah! Dokumen iki kanggo v2.3.2, sing ora didhukung kanthi resmi. Priksa versi paling anyar saka Bootstrap!

Tuladha

Rong opsi dhasar, bebarengan karo rong variasi sing luwih spesifik.

Klompok tombol tunggal

Bungkus serangkaian tombol nganggo .btning .btn-group.

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

Multiple klompok tombol

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>

Kelompok tombol vertikal

Nggawe sakumpulan tombol katon vertikal ditumpuk tinimbang horisontal.

  1. <div class = "btn-group btn-group-vertical" >
  2. ...
  3. </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 dokumen JavaScript kanggo iku.

Dropdowns ing kelompok tombol

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

Ringkesan lan conto

Gunakake tombol apa wae kanggo micu menu gulung mudhun kanthi nyelehake ing a .btn-grouplan menehi markup menu sing tepat.

  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: .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 keselarasan kanthi manual utawa nganggo JavaScript khusus.


Tombol pamisah gulung mudhun

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.

  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>

Ukuran

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

  1. <div class = "btn-group" >
  2. <button class = "btn btn-mini" > Tindakan </tombol>
  3. <button class = "btn btn-mini 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>

pagination standar

pagination prasaja sing diilhami dening Rdio, apik kanggo aplikasi lan asil panelusuran. Blok gedhe angel dilewati, gampang diukur, lan nyedhiyakake area klik gedhe.

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

Pilihan

Negara sing dipateni lan aktif

Link bisa disesuaikan kanggo macem-macem kahanan. Gunakake .disabledkanggo pranala sing ora bisa diklik lan .activekanggo nuduhake kaca sing saiki.

  1. <div class = "pagination" >
  2. <ul>
  3. <li class = "dipatèni" ><a href = "#" > « </a></li>
  4. <li class = "aktif" ><a href = "#" > 1 </a></li>
  5. ...
  6. </ul>
  7. </div>

Sampeyan bisa ngganti jangkar sing aktif utawa ora aktif kanthi jarak kanggo mbusak fungsi klik nalika nahan gaya sing dituju.

  1. <div class = "pagination" >
  2. <ul>
  3. <li class = "pateni" ><span> « </span></li>
  4. <li class = "aktif" ><span> 1 </span></li>
  5. ...
  6. </ul>
  7. </div>

Ukuran

Pengin pagination luwih gedhe utawa luwih cilik? Tambah .pagination-large, .pagination-small, utawa .pagination-minikanggo ukuran tambahan.

  1. <div class = "pagination pagination-large" >
  2. <ul>
  3. ...
  4. </ul>
  5. </div>
  6. <div class = "pagination" >
  7. <ul>
  8. ...
  9. </ul>
  10. </div>
  11. <div class = "pagination pagination-cilik" >
  12. <ul>
  13. ...
  14. </ul>
  15. </div>
  16. <div class = "pagination pagination-mini" >
  17. <ul>
  18. ...
  19. </ul>
  20. </div>

Alignment

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

  1. <div class = "pagination pagination-centered" >
  2. ...
  3. </div>
  1. <div class = "pagination pagination-right" >
  2. ...
  3. </div>

pager

Tautan cepet sadurunge lan sabanjure kanggo implementasi pagination sing prasaja kanthi markup lan gaya sing entheng. Iku apik kanggo situs prasaja kaya blog utawa majalah.

Conto standar

Kanthi gawan, pager pusat pranala.

  1. <ul class = "pager" >
  2. <li><a href = "#" > Sadurunge </a></li>
  3. <li><a href = "#" > Sabanjure </a></li>
  4. </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>

Status dipatèni opsional

Link pager uga nggunakake .disabledkelas sarana umum saka pagination.

  1. <ul class = "pager" >
  2. <li class = "sadurunge dipatèni" >
  3. <a href = "#" > Luwih tuwa </a>
  4. </li>
  5. ...
  6. </ul>

Label

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>

Lencana

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>

Gampang collapsible

Kanggo implementasine gampang, label lan lencana mung bakal ambruk (liwat :emptypamilih CSS) nalika ora ana isi ing.

Unit pahlawan

Komponen sing entheng lan fleksibel kanggo nampilake konten utama ing situs sampeyan. Kerjane apik ing situs marketing lan konten sing abot.

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

  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>

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> Conto header kaca <small> Subteks kanggo header </small></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.

  • 300x200

    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

  • 300x200

    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

  • 300x200

    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 eceran, 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 = "span4" >
  3. <a href = "#" class = "gambar cilik" >
  4. <img data-src = "holder.js/300x200" 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 = "span4" >
  3. <div class = "gambar cilik" >
  4. <img data-src = "holder.js/300x200" alt = "" >
  5. <h3> Label gambar cilik </h3>
  6. <p> Katrangan gambar cilik... </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-beda.

Tandha standar

Bungkus teks apa wae lan tombol ngilangi opsional .alertkanggo pesen tandha bebaya dhasar.

Pènget! Priksa dhewe, sampeyan ora katon apik banget.
  1. <div class = "waspada" >
  2. < jinis tombol = "tombol" kelas = "nutup" data-dismiss = "tandha" > & kaping; </tombol>
  3. <strong> Awas! </strong> Priksa dhewe, sampeyan ora katon apik banget.
  4. </div>

Mbusak tombol

Browser Safari Seluler lan Opera Seluler, saliyane data-dismiss="alert"atribut kasebut, mbutuhake href="#"tandha tandha nalika nggunakake <a>tag.

  1. <a href = "#" class = "close" data-dismiss = "waspada" > & kaping; </a>

Utawa, sampeyan bisa nggunakake <button>unsur kanthi atribut data, sing wis dipilih kanggo dokumen kita. Nalika nggunakake <button>, sampeyan kudu kalebu type="button"utawa formulir sampeyan bisa uga ora ngirim.

  1. < jinis tombol = "tombol" kelas = "nutup" data-dismiss = "tandha" > & kaping; </tombol>

Mbusak tandha liwat JavaScript

Gunakake plugin tandha jQuery kanggo ngilangi tandha kanthi cepet lan gampang.


Pilihan

Kanggo pesen sing luwih dawa, tambahake bantalan ing sisih ndhuwur lan ngisor bungkus tandha kanthi nambahake .alert-block.

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. < jinis tombol = "tombol" kelas = "nutup" data-dismiss = "tandha" > & kaping; </tombol>
  3. <h4> Awas! </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" style = " width : 60 %; " ></div>
  3. </div>

belang

Migunakake gradien kanggo nggawe efek belang. Ora kasedhiya ing IE7-8.

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

Animasi

Tambah .activekanggo .progress-stripedkanggo animate loreng tengen ngiwa. Ora kasedhiya ing kabeh versi IE.

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

Ditumpuk

Selehake sawetara bar menyang padha .progresskanggo tumpukan mau.

  1. <div class = "kemajuan" >
  2. <div class = "bar bar-success" style = " width : 35 %; " ></div>
  3. <div class = "bar bar-warning" style = " width : 20 %; " ></div>
  4. <div class = "bar bar-danger" style = " width : 10 %; " ></div>
  5. </div>

Pilihan

werna tambahan

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

  1. <div class = "progress progress-info" >
  2. <div class = "bar" style = " width : 20 % " ></div>
  3. </div>
  4. <div class = "progres kemajuan-sukses" >
  5. <div class = "bar" style = " width : 40 % " ></div>
  6. </div>
  7. <div class = "peringatan kemajuan kemajuan" >
  8. <div class = "bar" style = " width : 60 % " ></div>
  9. </div>
  10. <div class = "progress progress-bebaya" >
  11. <div class = "bar" style = " width : 80 % " ></div>
  12. </div>

Bar belang

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

  1. <div class = "progress progress-info progress-striped" >
  2. <div class = "bar" style = " width : 20 % " ></div>
  3. </div>
  4. <div class = "progress progress-success progress-striped" >
  5. <div class = "bar" style = " width : 40 % " ></div>
  6. </div>
  7. <div class = "progress progress-warning progress-striped" >
  8. <div class = "bar" style = " width : 60 % " ></div>
  9. </div>
  10. <div class = "kemajuan kemajuan-bebaya kemajuan-belang" >
  11. <div class = "bar" style = " width : 80 % " ></div>
  12. </div>

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.

Versi sadurungé saka Internet Explorer 10 lan Opera 12 ora ndhukung animasi.

Gaya obyek abstrak kanggo mbangun macem-macem jinis komponen (kayata komentar blog, Tweets, lan sapiturute) sing nampilake gambar sing didadekake kiwa utawa tengen bebarengan karo isi teks.

Conto standar

Media standar ngidini kanggo ngambang obyek media (gambar, video, audio) ing sisih kiwa utawa tengen blok konten.

64x64

Judhul media

Cras sit amet nibh libero, ing gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
64x64

Judhul media

Cras sit amet nibh libero, ing gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
64x64

Judhul media

Cras sit amet nibh libero, ing gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
  1. <div class = "media" >
  2. <a class = "tarik-kiri" href = "#" >
  3. <img class = "media-objek" data-src = "holder.js/64x64" >
  4. </a>
  5. <div class = "media-body" >
  6. <h4 class = "media-heading" > Media heading </h4>
  7. ...
  8.  
  9. <!-- Objek media bersarang -->
  10. <div class = "media" >
  11. ...
  12. </div>
  13. </div>
  14. </div>

Dhaptar media

Kanthi markup ekstra, sampeyan bisa nggunakake media ing dhaptar (migunani kanggo thread komentar utawa dhaptar artikel).

  • 64x64

    Judhul media

    Cras sit amet nibh libero, ing gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

    64x64

    Judul media nested

    Cras sit amet nibh libero, ing gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
    64x64

    Judul media nested

    Cras sit amet nibh libero, ing gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
    64x64

    Judul media nested

    Cras sit amet nibh libero, ing gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
  • 64x64

    Judhul media

    Cras sit amet nibh libero, ing gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
  1. <ul class = "media-list" >
  2. <li class = "media" >
  3. <a class = "tarik-kiri" href = "#" >
  4. <img class = "media-objek" data-src = "holder.js/64x64" >
  5. </a>
  6. <div class = "media-body" >
  7. <h4 class = "media-heading" > Media heading </h4>
  8. ...
  9.  
  10. <!-- Objek media bersarang -->
  11. <div class = "media" >
  12. ...
  13. </div>
  14. </div>
  15. </li>
  16. </ul>

sumur

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

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

Kelas opsional

Kontrol bantalan lan sudhut bunder kanthi rong kelas modifier opsional.

Delengen, aku ana ing sumur!
  1. <div class = "well-gedhe" >
  2. ...
  3. </div>
Delengen, aku ana ing sumur!
  1. <div class = "apik-apik" >
  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="#"acara klik yen sampeyan luwih seneng nggunakake jangkar.

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

Kelas pembantu

Prasaja, kelas fokus kanggo tampilan cilik utawa njiwet prilaku.

.narik-ngiwa

Ngambang unsur kiwa

  1. kelas = "tarik-kiri"
  1. . tarik - kiri {
  2. ngambang : ngiwa ;
  3. }

.tarik-tengen

Ngambang unsur tengen

  1. kelas = "tarik-kanan"
  1. . tarik kanan { _
  2. ngambang : tengen ;
  3. }

.ditemokake

Ngganti werna unsur dadi#999

  1. kelas = "bisu"
  1. . bisu {
  2. werna : #999;
  3. }

.clearfix

Mbusak floatunsur apa wae

  1. kelas = "clearfix"
  1. . clearfix {
  2. * zoom : 1 ;
  3. &: sadurunge ,
  4. &: sawise {
  5. tampilan : meja ;
  6. isi : "" ;
  7. }
  8. &: sawise {
  9. cetha : loro ;
  10. }
  11. }