Komponén

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

Grup tombol

Paké grup tombol pikeun gabung sababaraha tombol babarengan salaku hiji komponén komposit. Ngawangun aranjeunna ku runtuyan <a>atawa <button>elemen.

prakték pangalusna

Kami nyarankeun tungtunan di handap ieu pikeun ngagunakeun grup tombol sareng tulbar:

  • Salawasna nganggo unsur sarua dina grup tombol tunggal, <a>atawa <button>.
  • Ulah campur tombol tina kelir béda dina grup tombol sarua.
  • Paké ikon salian atawa gaganti téks, tapi pastikeun kaasup alt jeung judul téks mana luyu.

Grup Button patali jeung dropdowns (tempo di handap) kudu disebut kaluar misah tur salawasna ngawengku hiji caret dropdown pikeun nunjukkeun kabiasaan dimaksudkeun.

Conto standar

Kieu kumaha HTML milarian grup tombol standar anu diwangun ku 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>

Contona toolbar

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>

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. Tingali docs Javascript pikeun éta.

Kéngingkeun javascript »

Dropdowns dina grup tombol

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

Tombol dropdowns

Tinjauan jeung conto

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

Conto markup

Sarupa sareng grup tombol, markup kami nganggo markup tombol biasa, tapi kalayan sababaraha tambahan pikeun nyaring gaya sareng ngadukung plugin jQuery dropdown Bootstrap.

  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 dropdowns tiasa dianggo dina ukuran naon waé. ukuran tombol anjeun ka .btn-large, .btn-small, atawa .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.


Tombol pamisah dropdowns

Tinjauan jeung conto

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 katuhu sareng tautan kontekstual.

Ukuran

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

  1. <div class = "btn-group" >
  2. ...
  3. <ul class = "turun-menu tarik-katuhu" >
  4. <!-- link menu dropdown -->
  5. </ul>
  6. </div>

Conto markup

Urang dilegakeun dina dropdowns tombol normal nyadiakeun aksi tombol kadua nu ngoperasikeun salaku pemicu dropdown misah.

  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>

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 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>

Multicon-kaca pagination

Nalika ngagunakeun

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

Tumbu kaca stateful

Tautan tiasa disaluyukeun sareng tiasa dianggo dina sababaraha kaayaan sareng kelas anu leres. .disabledpikeun tumbu anu teu tiasa diklik sareng .activekanggo halaman ayeuna.

alignment fléksibel

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

Contona

Komponén pagination standar nyaéta fléksibel sareng tiasa dianggo dina sababaraha variasi.

Markup

Dibungkus a <div>, pagination ngan a <ul>.

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

Pager Pikeun gancang Tumbu saméméhna tur salajengna

Ngeunaan pager

Komponén pager mangrupikeun sakumpulan tautan pikeun palaksanaan pagination saderhana kalayan markup cahaya sareng gaya anu langkung hampang. Éta saé pikeun situs saderhana sapertos blog atanapi majalah.

kaayaan ditumpurkeun pilihan

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

Conto standar

Sacara standar, pager puseur tumbu.

  1. <ul class = "pager" >
  2. <li>
  3. <a href = "#" > saméméhna </a>
  4. </li>
  5. <li>
  6. <a href = "#" > Salajengna </a>
  7. </li>
  8. </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>
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>

Ngeunaan

Badges mangrupakeun leutik, komponén basajan pikeun mintonkeun hiji indikator atawa count tina sababaraha jenis. Éta biasana dipendakan dina klien email sapertos Mail.app atanapi dina aplikasi sélulér pikeun béwara push.

kelas sadia

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>

Unit pahlawan

Bootstrap nyadiakeun lightweight, komponén fléksibel disebut unit pahlawan pikeun showcase eusi dina situs anjeun. Gawéna ogé dina pamasaran jeung situs eusi-beurat.

Markup

Bungkus eusi anjeun divsapertos kieu:

  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>

Halo Dunya!

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

Diajar deui

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 kaca </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.

  • 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

  • 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.

Markupna

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 = "span3" >
  3. <a href = "#" class = "gambar leutik" >
  4. <img src = "https://placehold.it/260x180" 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 = "span3" >
  3. <div class = "gambar leutik" >
  4. <img src = "https://placehold.it/260x180" alt = "" >
  5. <h5> Label gambar leutik </h5>
  6. <p> Caption gambar leutik di dieu... </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.

standar lightweight

Ditulis ulang kelas dasar

Kalayan Bootstrap 2, kami parantos nyederhanakeun kelas dasar: .alerttibatan .alert-message. Kami ogé parantos ngirangan markup minimum anu diperyogikeun — henteu <p>diperyogikeun sacara standar, ngan ukur <div>.

Pesen waspada tunggal

Pikeun komponén anu langkung awét sareng kirang kode, kami parantos ngaleungitkeun tampilan anu ngabédakeun pikeun panggeuing blok, pesen anu langkung seueur padding sareng biasana langkung seueur téks. Kelas ogé geus robah jadi .alert-block.


Janten hébat sareng javascript

Bootstrap hadir kalawan plugin jQuery hébat nu ngarojong pesen waspada, sahingga dismissing aranjeunna gancang jeung gampang.

Kéngingkeun plugin »

Conto béwara

Bungkus pesen anjeun sareng ikon tutup pilihan dina div kalayan kelas anu sederhana.

Awas! Pangalusna cék anjeun sorangan, anjeun henteu katingali saé teuing.
  1. <div class = "waspada" >
  2. <button class = "tutup" data-dismiss = "waspada" > × </tombol>
  3. <strong> Awas! </strong> Pangsaéna cék sorangan, anjeun henteu katingali saé.
  4. </div>

Mastaka tegak! alat ios merlukeun hiji href="#"pikeun PHK tina ngabejaan. Pastikeun pikeun ngalebetkeun éta sareng atribut data pikeun ikon caket jangkar. 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.

Gampang manjangkeun pesen waspada standar sareng dua kelas opsional: .alert-blockkanggo langkung seueur padding sareng kadali téks sareng .alert-headingpikeun judul anu cocog.

Awas!

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

  1. <div class = "block waspada" >
  2. <a class = "close" data-dismiss = "waspada" href = "#" > × </a>
  3. <h4 class = "waspada-heading" > 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"
  3. style = " lebar : 60 %; " ></div>
  4. </div>

belang

Ngagunakeun gradién pikeun nyieun éfék belang (euweuh IE).

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

Animasi

Nyokot conto belang jeung animates eta (euweuh IE).

  1. <div class = "kamajuan kamajuan-belang
  2. aktip" >
  3. <div class = "bar"
  4. style = " lebar : 40 %; " ></div>
  5. </div>

Pilihan jeung rojongan browser

kelir tambahan

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

Bar belang

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

kalakuan

Bar kamajuan ngagunakeun transisi CSS3, jadi lamun dinamis nyaluyukeun lebar via JavaScript, eta bakal lancar ngarobah ukuran.

Upami anjeun nganggo .activekelas, .progress-stripedbar kamajuan anjeun bakal ngahirupkeun belang kénca ka katuhu.

Rojongan browser

Bar kamajuan ngagunakeun gradién CSS3, transisi, jeung animasi pikeun ngahontal sakabéh épék maranéhanana. Fitur ieu henteu dirojong dina IE7-9 atanapi versi Firefox anu langkung lami.

Opera sareng IE henteu ngadukung animasi ayeuna.

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>

Tutup ikon

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

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

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

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