Komponén

Puluhan komponén anu tiasa dianggo deui diwangun pikeun nyayogikeun navigasi, panggeuing, popovers, sareng seueur deui.

Contona

Dua pilihan dasar, sareng dua variasi anu langkung spésifik.

Grup tombol tunggal

Bungkus runtuyan tombol kalawan .btndi .btn-group.

  1. <div class = "btn-group" >
  2. <button class = "btn" > Kénca </button>
  3. <button class = "btn" > Tengah </button>
  4. <button class = "btn" > Katuhu </button>
  5. </div>

Sababaraha grup tombol

Ngagabungkeun susunan <div class="btn-group">jadi a <div class="btn-toolbar">pikeun komponén leuwih kompleks.

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

Grup tombol nangtung

Jieun set tombol nembongan vertikal tumpuk tinimbang horizontal.

  1. <div class = "btn-group btn-group-vertical" >
  2. ...
  3. </div>

Kotak centang sareng rasa radio

Grup tombol ogé tiasa fungsina salaku radio, dimana ngan hiji tombol tiasa aktip, atanapi kotak centang, dimana sajumlah tombol tiasa aktip. Ningali dokumén JavaScript pikeun éta.

Dropdowns dina grup tombol

Mastaka tegak!Tombol kalawan dropdowns kudu individual dibungkus dina sorangan .btn-groupdina hiji .btn-toolbarpikeun Rendering ditangtoskeun.

Tinjauan jeung conto

Paké tombol naon mun pemicu mangrupa menu dropdown ku nempatkeun eta dina hiji .btn-groupjeung nyadiakeun ménu markup ditangtoskeun.

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

Gawéna sareng sadaya ukuran tombol

Tombol dropdown tiasa dianggo dina ukuran naon waé: .btn-large, .btn-small, atanapi .btn-mini.

Merlukeun JavaScript

Tombol dropdowns merlukeun plugin dropdown Bootstrap pikeun fungsina.

Dina sababaraha kasus-kawas mobile-menu dropdown bakal manjangkeun luar viewport nu. Anjeun kedah ngabéréskeun alignment sacara manual atanapi nganggo JavaScript khusus.


Dropdowns tombol pamisah

Ngawangun dina gaya grup tombol jeung markup, urang bisa kalayan gampang nyieun hiji tombol pamisah. Tombol pamisah nampilkeun tindakan standar di kénca sareng togél turun di beulah katuhu kalayan tautan kontekstual.

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

Ukuran

Ngamangpaatkeun kelas tombol tambahan .btn-mini, .btn-small, atawa .btn-largepikeun ukuran.

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

Menu drop-up

ménu dropdown ogé bisa toggled ti handap ka luhur ku nambahkeun hiji kelas tunggal ka indungna saharita tina .dropdown-menu. Bakal flip arah .caretjeung reposition menu sorangan pikeun pindah ti handap ka luhur tinimbang luhur ka handap.

  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. <!-- link menu dropdown -->
  8. </ul>
  9. </div>

Pagination standar

Pagination basajan anu diideuan ku Rdio, saé pikeun aplikasi sareng hasil pamilarian. Blok badag hésé sono, gampang scalable, sarta nyadiakeun wewengkon klik badag.

  1. <div class = "pagination" >
  2. <ul>
  3. <li><a href = "#" > Saméméhna </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 = "#" > Salajengna </a></li>
  10. </ul>
  11. </div>

Pilihan

Kaayaan ditumpurkeun sareng aktip

Tumbu nu customizable pikeun kaayaan béda. Anggo .disabledpikeun tautan anu teu .activetiasa diklik sareng nunjukkeun halaman anu ayeuna.

  1. <div class = "pagination" >
  2. <ul>
  3. <li class = "ditumpurkeun" ><a href = "#"> & laquo ; </a></li>
  4. <li class = "aktif" ><a href = "#" > 1 </a></li>
  5. ...
  6. </ul>
  7. </div>

Anjeun optionally bisa swap kaluar anchors aktip atawa ditumpurkeun pikeun bentang jang ngaleupaskeun fungsionalitas klik bari nahan gaya dimaksudkeun.

  1. <div class = "pagination" >
  2. <ul>
  3. <li class = "ditumpurkeun" ><span> & laquo; </span></li>
  4. <li class = "aktif" ><span> 1 </span></li>
  5. ...
  6. </ul>
  7. </div>

Ukuran

Fancy pagination gedé atawa leutik? Tambahkeun .pagination-large, .pagination-small, atawa .pagination-minipikeun ukuran tambahan.

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

Ngajajar

Tambahkeun salah sahiji dua kelas pilihan pikeun ngarobah alignment of link pagination: .pagination-centeredjeung .pagination-right.

  1. <div class = "pagination pagination-dipuseurkeun" >
  2. ...
  3. </div>
  1. <div class = "pagination pagination-katuhu" >
  2. ...
  3. </div>

Pager

Tumbu saméméhna jeung saterusna gancang pikeun palaksanaan pagination basajan kalawan markup lampu sarta gaya. Éta saé pikeun situs saderhana sapertos blog atanapi majalah.

Conto standar

Sacara standar, pager puseur link.

  1. <ul class = "pager" >
  2. <li><a href = "#" > Saméméhna </a></li>
  3. <li><a href = "#" > Salajengna </a></li>
  4. </ul>

Tumbu dijajarkeun

Alternatipna, anjeun tiasa nyaluyukeun unggal tautan ka sisi:

  1. <ul class = "pager" >
  2. <li class = "saméméhna" >
  3. <a href = "#"> & larr ; Leuwih kolot </a>
  4. </li>
  5. <li class = "salajengna" >
  6. <a href = "#" > Anyar & rarr; </a>
  7. </li>
  8. </ul>

kaayaan ditumpurkeun pilihan

Tumbu Pager ogé ngagunakeun .disabledkelas utiliti umum ti pagination nu.

  1. <ul class = "pager" >
  2. <li class = "saméméhna ditumpurkeun" >
  3. <a href = "#"> & larr ; Leuwih kolot </a>
  4. </li>
  5. ...
  6. </ul>

Labels

Labels Markup
Default <span class="label">Default</span>
Kasuksésan <span class="label label-success">Success</span>
Awas <span class="label label-warning">Warning</span>
Kadé <span class="label label-important">Important</span>
Inpo <span class="label label-info">Info</span>
Tibalik <span class="label label-inverse">Inverse</span>

Lencana

Ngaran Contona Markup
Default 1 <span class="badge">1</span>
Kasuksésan 2 <span class="badge badge-success">2</span>
Awas 4 <span class="badge badge-warning">4</span>
Kadé 6 <span class="badge badge-important">6</span>
Inpo 8 <span class="badge badge-info">8</span>
Tibalik 10 <span class="badge badge-inverse">10</span>

Gampang collapsible

Pikeun palaksanaan gampang, labél jeung badges ngan saukur bakal ambruk (via :emptypamilih CSS urang) lamun euweuh eusi aya dina.

Unit pahlawan

A lightweight, komponén fléksibel pikeun showcase eusi konci dina situs anjeun. Gawéna ogé dina pamasaran jeung situs eusi-beurat.

Halo Dunya!

Ieu unit pahlawan basajan, komponén gaya jumbotron basajan pikeun nelepon perhatian tambahan kana eusi diulas atawa informasi.

Diajar deui

  1. <div class = "pahlawan-unit" >
  2. <h1> Judul </h1>
  3. <p> Tagline </p>
  4. <p>
  5. <a class = "btn btn-primer btn-gede" >
  6. Diajar deui
  7. </a>
  8. </p>
  9. </div>

lulugu kaca

A cangkang basajan pikeun h1spasi kaluar luyu jeung bagean bagean eusi dina kaca. Éta tiasa ngagunakeun h1standar small, unsur ogé seueur komponén anu sanés (kalayan gaya tambahan).

  1. <div class = "halaman-header" >
  2. <h1> Conto lulugu halaman <small> Subtext pikeun lulugu </small></h1>
  3. </div>

Gambar leutik standar

Sacara standar, gambar leutik Bootstrap dirancang pikeun nunjukkeun gambar anu aya hubunganana sareng markup anu diperyogikeun minimal.

Kacida customizable

Kalayan sakedik markup tambahan, anjeun tiasa nambihan naon waé eusi HTML sapertos judul, paragraf, atanapi tombol kana gambar leutik.

  • 300x200

    Label gambar leutik

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

    Aksi Aksi

  • 300x200

    Label gambar leutik

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

    Aksi Aksi

  • 300x200

    Label gambar leutik

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

    Aksi Aksi

Naha make gambar leutik

Gambar leutik (saméméhna .media-gridnepi ka v1.4) hadé pikeun grids poto atawa video, hasil teangan gambar, produk ritel, portopolio, jeung leuwih. Éta tiasa janten tautan atanapi eusi statik.

Basajan, markup fléksibel

Markup gambar leutik saderhana — ulkalayan sajumlah lielemen anu diperyogikeun. Éta ogé super fleksibel, ngamungkinkeun pikeun jinis eusi naon waé kalayan markup sakedik deui pikeun ngabungkus eusi anjeun.

Ngagunakeun ukuran kolom grid

Anu pamungkas, komponén gambar leutik ngagunakeun kelas sistem grid nu aya - kawas .span2atawa .span3- pikeun kadali dimensi gambar leutik.

Markup

Sakumaha anu disebatkeun sateuacana, markup anu diperyogikeun pikeun gambar leutik nyaéta hampang sareng lugas. Ieu katingal dina setelan standar pikeun gambar numbu :

  1. <ul class = "gambar leutik" >
  2. <li class = "span4" >
  3. <a href = "#" class = "gambar leutik" >
  4. <img data-src = "holder.js/300x200" alt = "" >
  5. </a>
  6. </li>
  7. ...
  8. </ul>

Pikeun eusi HTML khusus dina gambar leutik, markupna rada robih. Pikeun ngawenangkeun eusi tingkat blok di mana waé, urang gentoskeun <a>sapertos <div>kieu:

  1. <ul class = "gambar leutik" >
  2. <li class = "span4" >
  3. <div class = "gambar leutik" >
  4. <img data-src = "holder.js/300x200" alt = "" >
  5. <h3> Label gambar leutik </h3>
  6. <p> Katerangan gambar leutik... </p>
  7. </div>
  8. </li>
  9. ...
  10. </ul>

Leuwih conto

Jelajahi sadaya pilihan anjeun sareng rupa-rupa kelas grid anu sayogi pikeun anjeun. Anjeun oge bisa nyampur jeung cocog ukuran béda.

Waspada standar

Bungkus téks naon waé sareng tombol leupaskeun pilihan .alertpikeun pesen peringatan peringatan dasar.

Awas! Pangsaéna cék sorangan, anjeun henteu katingali saé.
  1. <div class = "waspada" >
  2. < tipe tombol = "tombol" kelas = "nutup" data-ngaleungitkeun = "siaga" > & kali; </tombol>
  3. <strong> Awas! </strong> Pangsaéna cék sorangan, anjeun henteu katingali saé.
  4. </div>

Leupaskeun tombol

Mobile Safari jeung Mobile Opera browser, sajaba data-dismiss="alert"atribut, merlukeun hiji href="#"pikeun PHK tina ngabejaan lamun maké <a>tag.

  1. <a href = "#" kelas = "tutup" data-ngaleungitkeun = "siaga"> & kali; </a>

Alternatipna, anjeun tiasa nganggo <button>unsur sareng atribut data, anu kami pilih pikeun ngalakukeun pikeun dokumén kami. Nalika nganggo <button>, anjeun kedah ngalebetkeun type="button"atanapi bentuk anjeun moal tiasa ngalebetkeun.

  1. < tipe tombol = "tombol" kelas = "nutup" data-ngaleungitkeun = "siaga" > & kali; </tombol>

Ngaleungitkeun panggeuing via JavaScript

Paké panggeuing jQuery plugin pikeun PHK gancang jeung gampang tina ngabejaan.


Pilihan

Pikeun pesen anu langkung panjang, tambahkeun padding di luhur sareng handap bungkus waspada ku nambihan .alert-block.

Awas!

Pangalusna cék anjeun sorangan, anjeun henteu katingali saé teuing. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, atanapi scelerisque nisl consectetur et.

  1. <div class = "block waspada" >
  2. < tipe tombol = "tombol" kelas = "nutup" data-ngaleungitkeun = "siaga" > & kali; </tombol>
  3. <h4> Awas! </h4>
  4. Pangsaéna pariksa diri anjeun, anjeun henteu ...
  5. </div>

Alternatif kontekstual

Tambahkeun kelas pilihan pikeun ngarobah konotasi waspada.

Kasalahan atawa bahaya

Aduh jepret! Robah sababaraha hal sareng cobian kirimkeun deui.
  1. <div class = "waspada-kasalahan" >
  2. ...
  3. </div>

Kasuksésan

Saé! Anjeun suksés maca pesen waspada penting ieu.
  1. <div class = "waspada waspada-sukses" >
  2. ...
  3. </div>

Émbaran

Mastaka tegak! Peringatan ieu peryogi perhatian anjeun, tapi éta henteu penting pisan.
  1. <div class = "waspada-info" >
  2. ...
  3. </div>

Conto jeung markup

Dasar

Bar kamajuan standar sareng gradién nangtung.

  1. <div class = "kamajuan" >
  2. <div class = "bar" style = " width : 60 %; " ></div>
  3. </div>

belang

Ngagunakeun gradién pikeun nyieun éfék belang. Teu sadia dina IE7-8.

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

Animasi

Tambahkeun .activeka .progress-stripedpikeun ngahirupkeun belang katuhu ka kenca. Henteu sayogi dina sadaya vérsi IE.

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

Ditumpuk

Teundeun sababaraha bar kana sami .progresspikeun tumpukan aranjeunna.

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

Pilihan

kelir tambahan

Bar kamajuan ngagunakeun sababaraha tombol anu sami sareng kelas waspada pikeun gaya anu konsisten.

  1. <div class = "kamajuan kamajuan-info" >
  2. <div class = "bar" style = " width : 20 % " ></div>
  3. </div>
  4. <div class = "kamajuan kamajuan-kasuksesan" >
  5. <div class = "bar" style = " width : 40 % " ></div>
  6. </div>
  7. <div class = "kamajuan kamajuan-warning" >
  8. <div class = "bar" style = " width : 60 % " ></div>
  9. </div>
  10. <div class = "kamajuan kamajuan-bahaya" >
  11. <div class = "bar" style = " width : 80 % " ></div>
  12. </div>

Bar belang

Sarupa jeung warna padet, kami geus variatif bar kamajuan belang.

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

Rojongan browser

Bar kamajuan nganggo gradién CSS3, transisi, sareng animasi pikeun ngahontal sagala épékna. Fitur ieu henteu dirojong dina IE7-9 atanapi versi Firefox anu langkung lami.

Versi samemehna ti Internet Explorer 10 jeung Opera 12 teu ngarojong animasi.

Gaya obyék abstrak pikeun ngawangun rupa-rupa komponén (sapertos koméntar blog, Tweets, jsb) anu ngagaduhan gambar kénca- atanapi katuhu-blok sareng eusi tékstual.

Conto standar

Média standar ngamungkinkeun pikeun ngambang objék média (gambar, video, audio) ka kénca atawa katuhu blok eusi.

64x64

Judul média

Cras diuk amet nibh libero, dina 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 dina faucibus.
64x64

Judul média

Cras diuk amet nibh libero, dina 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 dina faucibus.
64x64

Judul média

Cras diuk amet nibh libero, dina 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 dina faucibus.
  1. <div class = "média" >
  2. <a class = "tarik-kénca" href = "#" >
  3. <img class = "média-obyek" data-src = "holder.js/64x64" >
  4. </a>
  5. <div class = "media-body" >
  6. <h4 class = "media-heading" > Media heading </h4>
  7. ...
  8.  
  9. <!-- Obyék média bersarang -->
  10. <div class = "média" >
  11. ...
  12. </div>
  13. </div>
  14. </div>

Daptar média

Kalayan sakedik markup tambahan, anjeun tiasa nganggo média di jero daptar (mangpaat pikeun utas koméntar atanapi daptar tulisan).

  • 64x64

    Judul média

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

    64x64

    Judul média nested

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

    Judul média nested

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

    Judul média nested

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

    Judul média

    Cras diuk amet nibh libero, dina 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 = "média" >
  3. <a class = "tarik-kénca" href = "#" >
  4. <img class = "média-obyek" data-src = "holder.js/64x64" >
  5. </a>
  6. <div class = "media-body" >
  7. <h4 class = "media-heading" > Media heading </h4>
  8. ...
  9.  
  10. <!-- Obyék média bersarang -->
  11. <div class = "média" >
  12. ...
  13. </div>
  14. </div>
  15. </li>
  16. </ul>

Sumur

Paké ogé salaku éfék basajan dina hiji unsur pikeun méré éfék inset.

Tingali, kuring aya dina sumur!
  1. <div class = "saé" >
  2. ...
  3. </div>

kelas pilihan

Kontrol padding sareng sudut buleud kalayan dua kelas modifier pilihan.

Tingali, kuring aya dina sumur!
  1. <div class = "well well-gede" >
  2. ...
  3. </div>
Tingali, kuring aya dina sumur!
  1. <div class = "alus-alit" >
  2. ...
  3. </div>

Tutup ikon

Anggo ikon tutup umum pikeun ngaleungitkeun eusi sapertos modal sareng panggeuing.

  1. <tombol kelas = "tutup" > & kali; </tombol>

Alat ios ngabutuhkeun acara href="#"pikeun klik upami anjeun langkung resep nganggo jangkar.

  1. <a class = "deukeut" href = "#"> & kali; </a>

Kelas pembantu

Basajan, kelas fokus pikeun tampilan leutik atawa tweaks kabiasaan.

.tarik-kénca

Ngambang hiji unsur ditinggalkeun

  1. kelas = "tarik-kénca"
  1. . tarik - kénca {
  2. ngambang : ditinggalkeun ;
  3. }

.tarik-katuhu

Ngambang hiji unsur katuhu

  1. class = "tarik-katuhu"
  1. . tarik - katuhu {
  2. ngambang : katuhu ;
  3. }

.diteuteup

Ngarobah warna hiji unsur pikeun#999

  1. kelas = "dipikanyaah"
  1. . diredam {
  2. warna : #999;
  3. }

.clearfix

Hapus floatunsur naon waé

  1. kelas = "clearfix"
  1. . clearfix {
  2. * zum : 1 ;
  3. &: sateuacanna ,
  4. &: sanggeus {
  5. tampilan : méja ;
  6. eusi : "" ;
  7. }
  8. &: sanggeus {
  9. jelas : duanana ;
  10. }
  11. }