Ihtisar

Individu atawa disusun

Plugins tiasa dilebetkeun masing-masing (ngagunakeun *.jsfile individu Bootstrap), atanapi sadayana sakaligus (ngagunakeun bootstrap.jsatanapi minified bootstrap.min.js).

Ngagunakeun JavaScript disusun

Duanana bootstrap.jssarta bootstrap.min.jsngandung sakabéh plugins dina file tunggal. Kaasup ngan hiji.

kagumantungan plugin

Sababaraha plugins sareng komponén CSS gumantung kana plugins séjén. Upami anjeun ngalebetkeun plugin masing-masing, pastikeun pikeun pariksa katergantungan ieu dina dokumén. Catet ogé yén sadaya plugins gumantung kana jQuery (ieu hartosna jQuery kedah kalebet sateuacan file plugin). Taroskeun kamibower.json pikeun ningali versi jQuery mana anu dirojong.

Atribut data

Anjeun tiasa nganggo sadayana plugins Bootstrap murni ngalangkungan API markup tanpa nyerat hiji baris JavaScript. Ieu mangrupikeun API kelas munggaran Bootstrap sareng kedah janten pertimbangan munggaran anjeun nalika nganggo plugin.

Kitu cenah, dina sababaraha kaayaan, éta pantes pikeun mareuman fungsionalitas ieu. Ku alatan éta, kami ogé nyadiakeun kamampuhan pikeun nganonaktipkeun API atribut data ku unbinding sakabeh kajadian dina ngaran spasi dokumen kalawan data-api. Ieu sigana kieu:

$(document).off('.data-api')

Alternatipna, pikeun nargétkeun hiji plugin husus, ngan kaasup ngaran plugin urang salaku ngaranspasi babarengan jeung data-api ngaranspasi kawas kieu:

$(document).off('.alert.data-api')

Ngan hiji plugin per elemen via atribut data

Entong nganggo atribut data tina sababaraha plugin dina unsur anu sami. Contona, hiji tombol teu bisa duanana mibanda tooltip sarta toggle modal a. Jang ngalampahkeun ieu, ngagunakeun unsur wrapping.

Programmatic API

Kami ogé yakin yén anjeun kedah tiasa nganggo sadayana plugins Bootstrap murni ngalangkungan API JavaScript. Kabéh API umum téh tunggal, métode chainable, sarta balik kempelan acted kana.

$('.btn.danger').button('toggle').addClass('fat')

Sadaya metode kedah nampi pilihan obyék pilihan, senar anu nargétkeun metodeu khusus, atanapi henteu nanaon (anu ngamimitian plugin kalayan paripolah standar):

$('#myModal').modal()                      // initialized with defaults
$('#myModal').modal({ keyboard: false })   // initialized with no keyboard
$('#myModal').modal('show')                // initializes and invokes show immediately

Unggal plugin ogé ngungkabkeun konstruktor atah na dina Constructorharta $.fn.popover.Constructor:. Upami anjeun hoyong kéngingkeun conto plugin khusus, cokot deui langsung tina unsur: $('[rel="popover"]').data('popover').

Setélan standar

Anjeun tiasa ngarobih setélan standar pikeun plugin ku ngarobih Constructor.DEFAULTSobyék plugin:

$.fn.modal.Constructor.DEFAULTS.keyboard = false // changes default for the modal plugin's `keyboard` option to false

Taya konflik

Kadang-kadang perlu ngagunakeun plugins Bootstrap sareng kerangka UI anu sanés. Dina kaayaan ieu, tabrakan ngaranspasi kadang bisa lumangsung. Upami ieu kajantenan, anjeun tiasa nelepon .noConflictkana plugin anu anjeun hoyong balikkeun nilaina.

var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
$.fn.bootstrapBtn = bootstrapButton            // give $().bootstrapBtn the Bootstrap functionality

Kajadian

Bootstrap nyayogikeun acara khusus pikeun kalolobaan tindakan unik plugins. Sacara umum, ieu datangna dina bentuk participle infinitive jeung kaliwat - dimana infinitive (ex. show) dipicu dina mimiti hiji acara, sarta formulir participle kaliwat na (ex. shown) dipicu nalika parantosan hiji aksi.

Dina 3.0.0, sadaya acara Bootstrap dibéré ngaran.

Kabéh acara infinitive nyadiakeun preventDefaultfungsionalitas. Ieu nyadiakeun kamampuhan pikeun ngeureunkeun palaksanaan hiji aksi saméméh dimimitian.

$('#myModal').on('show.bs.modal', function (e) {
  if (!data) return e.preventDefault() // stops modal from being shown
})

angka Vérsi

Versi masing-masing plugins jQuery Bootstrap tiasa diaksés via VERSIONhak milik konstruktor plugin. Contona, pikeun plugin tooltip:

$.fn.tooltip.Constructor.VERSION // => "3.3.7"

Taya fallbacks husus nalika JavaScript ditumpurkeun

Plugin Bootstrap henteu mundur sacara khusus nalika JavaScript ditumpurkeun. Upami anjeun paduli kana pangalaman pangguna dina hal ieu, paké <noscript>pikeun ngajelaskeun kaayaan (sareng kumaha cara ngaktipkeun deui JavaScript) ka pangguna anjeun, sareng / atanapi tambahkeun fallbacks adat anjeun sorangan.

Perpustakaan pihak katilu

Bootstrap henteu sacara resmi ngadukung perpustakaan JavaScript pihak katilu sapertos Prototype atanapi jQuery UI. Sanaos .noConflictacara sareng namespaced, meureun aya masalah kasaluyuan anu anjeun kedah ngalereskeun nyalira.

Transisi transisi.js

Ngeunaan transisi

Pikeun épék transisi saderhana, lebetkeun transition.jssakali sareng file JS anu sanés. Upami anjeun nganggo kompilasi (atanapi minified) bootstrap.js, teu kedah kalebet ieu-éta parantos aya.

Naon di jero

Transition.js mangrupikeun pembantu dasar pikeun transitionEndacara ogé émulator transisi CSS. Éta dianggo ku plugins anu sanés pikeun mariksa dukungan transisi CSS sareng nangkep transisi gantung.

Nganonaktipkeun transisi

Transisi tiasa ditumpurkeun sacara global nganggo snippet JavaScript di handap ieu, anu kedah sumping saatos transition.js(atanapi bootstrap.js, bootstrap.min.jssakumaha kasusna) parantos dimuat:

$.support.transition = false

Modal modal.js

Modals anu streamlined, tapi fléksibel, dialog prompts kalawan fungsionalitas diperlukeun minimum jeung standar pinter.

Sababaraha modals kabuka teu dirojong

Pastikeun teu muka modal bari sejen masih katingali. Némbongkeun leuwih ti hiji modal dina hiji waktu merlukeun kode custom.

Penempatan markup modal

Salawasna cobian nempatkeun kode HTML modal dina posisi tingkat luhur dina dokumén anjeun pikeun ngahindarkeun komponén sanés anu mangaruhan penampilan sareng / atanapi fungsionalitas modal.

caveats alat mobile

Aya sababaraha caveats ngeunaan ngagunakeun modals dina alat nu bagerak. Tingali dokumén pangrojong browser kami pikeun detil.

Kusabab kumaha HTML5 ngahartikeun semantik na, autofocusatribut HTML teu boga pangaruh dina modals Bootstrap. Pikeun ngahontal éfék anu sami, paké sababaraha JavaScript khusus:

$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').focus()
})

Contona

Contona statik

Modal anu disayogikeun sareng lulugu, awak, sareng set tindakan dina footer.

<div class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Live demo

Toggle a modal via JavaScript ku ngaklik tombol di handap. Bakal ngageser ka handap sareng luntur ti luhur halaman.

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Jieun modals diaksés

Pastikeun pikeun nambahkeun role="dialog"jeung aria-labelledby="...", ngarujuk kana judul modal, ka .modal, jeung role="document"ka .modal-dialogsorangan.

Salaku tambahan, anjeun tiasa masihan pedaran ngeunaan dialog modal anjeun sareng aria-describedbyon .modal.

Embedding video YouTube

Embedding video YouTube dina modals merlukeun JavaScript tambahan teu di Bootstrap pikeun otomatis ngeureunkeun playback sareng nu sanesna. Tingali tulisan Stack Overflow ieu pikeun inpormasi anu langkung lengkep.

Ukuran pilihan

Modals gaduh dua ukuran pilihan, sadia via kelas modifier pikeun ditempatkeun dina .modal-dialog.

<!-- Large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

<!-- Small modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button>

<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
  <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

Leupaskeun animasi

Pikeun modal anu ngan saukur némbongan tinimbang luntur pikeun ditingali, cabut .fadekelas tina markup modal anjeun.

<div class="modal" tabindex="-1" role="dialog" aria-labelledby="...">
  ...
</div>

Ngagunakeun sistem grid

Pikeun ngamangpaatkeun sistem grid Bootstrap dina modal, ngan sarang .rows dina .modal-bodyteras nganggo kelas sistem grid normal.

<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="gridSystemModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-md-4">.col-md-4</div>
          <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
        </div>
        <div class="row">
          <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
          <div class="col-md-2 col-md-offset-4">.col-md-2 .col-md-offset-4</div>
        </div>
        <div class="row">
          <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
        </div>
        <div class="row">
          <div class="col-sm-9">
            Level 1: .col-sm-9
            <div class="row">
              <div class="col-xs-8 col-sm-6">
                Level 2: .col-xs-8 .col-sm-6
              </div>
              <div class="col-xs-4 col-sm-6">
                Level 2: .col-xs-4 .col-sm-6
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Boga kebat tombol anu sadayana micu modal anu sami, ngan kalayan eusi anu rada béda? Paké event.relatedTargetjeung atribut HTMLdata-* (jigana via jQuery ) pikeun rupa-rupa eusi modal gumantung kana tombol nu diklik. Tingali dokumén Modal Events pikeun detil ngeunaan relatedTarget,

... tombol deui ...
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button>
...more buttons...

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="exampleModalLabel">New message</h4>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="recipient-name" class="control-label">Recipient:</label>
            <input type="text" class="form-control" id="recipient-name">
          </div>
          <div class="form-group">
            <label for="message-text" class="control-label">Message:</label>
            <textarea class="form-control" id="message-text"></textarea>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Send message</button>
      </div>
    </div>
  </div>
</div>
$('#exampleModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget) // Button that triggered the modal
  var recipient = button.data('whatever') // Extract info from data-* attributes
  // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
  // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
  var modal = $(this)
  modal.find('.modal-title').text('New message to ' + recipient)
  modal.find('.modal-body input').val(recipient)
})

Pamakéan

Modél plugin toggles eusi disumputkeun Anjeun on demand, via atribut data atawa JavaScript. Ogé nambihan .modal-openka <body>override kabiasaan ngagugulung standar sarta dibangkitkeun a .modal-backdropnyadiakeun wewengkon klik pikeun dismissing modals ditémbongkeun nalika ngaklik luar modal.

Via atribut data

Aktipkeun modal tanpa nulis JavaScript. Disetél data-toggle="modal"dina elemen controller, kawas tombol, babarengan jeung data-target="#foo"atawa href="#foo"pikeun nargétkeun modal husus pikeun toggle.

<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>

Ngaliwatan JavaScript

Nelepon modal sareng id myModalsareng hiji baris JavaScript:

$('#myModal').modal(options)

Pilihan

Pilihan bisa diliwatan via atribut data atawa JavaScript. Pikeun atribut data, tambahkeun nami pilihan ka data-, sapertos dina data-backdrop="".

Ngaran ngetik standar katerangan
latar boolean atawa string'static' leres Ngawengku unsur modal-backdrop. Alternatipna, tangtukeun staticpikeun backdrop nu teu nutup modal dina klik.
kibor boolean leres Nutup modal nalika konci kabur dipencet
nempokeun boolean leres Némbongkeun modal nalika dimimitian.
jauh jalur palsu

pilihan ieu deprecated saprak v3.3.0 sarta geus dihapus dina v4. Kami ngarékoméndasikeun tinimbang ngagunakeun templating sisi klien atawa kerangka data mengikat, atawa nelepon jQuery.load sorangan.

Upami URL jauh disayogikeun, eusi bakal dimuat sakali nganggo metode jQuery loadsareng disuntikkeun kana .modal-contentdiv. Upami anjeun nganggo data-api, anjeun tiasa nganggo hrefatribut pikeun nangtukeun sumber jauh. Conto ieu dipidangkeun di handap:

<a data-toggle="modal" href="remote.html" data-target="#modal">Click me</a>

Métode

Aktipkeun eusi anjeun salaku modal. Narima hiji pilihan pilihan object.

$('#myModal').modal({
  keyboard: false
})

Sacara manual toggles modal. Mulih ka panelepon saméméh modal sabenerna geus ditémbongkeun atawa disumputkeun (ie saméméh shown.bs.modalatawa hidden.bs.modalkajadian lumangsung).

$('#myModal').modal('toggle')

Sacara manual muka modal. Mulih ka panelepon saméméh modal sabenerna geus ditémbongkeun (ie saméméh shown.bs.modalacara lumangsung).

$('#myModal').modal('show')

Sacara manual nyumputkeun modal. Mulih ka panelepon saméméh modal geus sabenerna disumputkeun (ie saméméh hidden.bs.modalacara lumangsung).

$('#myModal').modal('hide')

Nyaluyukeun deui posisi modal pikeun ngalawan scrollbar upami aya anu muncul, anu bakal ngajantenkeun modal luncat ka kénca.

Ngan diperlukeun nalika jangkungna modal robah bari dibuka.

$('#myModal').modal('handleUpdate')

Kajadian

Kelas modal Bootstrap ngungkabkeun sababaraha acara pikeun nyambungkeun kana fungsionalitas modal.

Sadaya acara modal dipecat dina modal sorangan (ie di <div class="modal">).

Jenis Acara Katerangan
show.bs.modal Kajadian ieu langsung hurung nalika showmetode conto disebut. Upami disababkeun ku klik, unsur anu diklik sayogi salaku relatedTargethak milik acara.
ditémbongkeun.bs.modal Acara ieu dipecat nalika modal parantos katingali ku pangguna (bari ngadagoan transisi CSS réngsé). Upami disababkeun ku klik, unsur anu diklik sayogi salaku relatedTargethak milik acara.
hide.bs.modal Kajadian ieu langsung dipecat nalika hidemetode conto parantos disebut.
hidden.bs.modal Acara ieu dipecat nalika modal parantos disumputkeun tina pangguna (bari ngadagoan transisi CSS réngsé).
loaded.bs.modal Kajadian ieu dipecat nalika modal parantos ngamuat eusi nganggo remotepilihan.
$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

Dropdowns dropdown.js

Tambihkeun ménu lungsur ka ampir naon waé kalayan plugin saderhana ieu, kalebet navbar, tab, sareng pil.

Dina navbar a

Dina pil

Ngaliwatan atribut data atanapi JavaScript, plugin dropdown toggles eusi disumputkeun (dropdown menu) ku toggling .openkelas dina item daptar indungna.

Dina alat nu bagerak, muka dropdown a nambahkeun .dropdown-backdropsalaku aréa ketok pikeun nutup menu dropdown nalika ngetok luar menu, sarat pikeun rojongan ios ditangtoskeun. Ieu ngandung harti yén pindah tina menu dropdown kabuka ka menu dropdown béda merlukeun ketok tambahan dina mobile.

Catetan: data-toggle="dropdown"Atribut ieu diandelkeun pikeun nutup ménu lungsur dina tingkat aplikasi, janten langkung saé ngagunakeun éta.

Via atribut data

Tambihkeun data-toggle="dropdown"kana tautan atanapi tombol pikeun ngagentoskeun turunna.

<div class="dropdown">
  <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

Pikeun ngajaga URL gembleng sareng tombol link, paké data-targetatribut tinimbang href="#".

<div class="dropdown">
  <a id="dLabel" data-target="#" href="http://example.com/" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
    <span class="caret"></span>
  </a>

  <ul class="dropdown-menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

Ngaliwatan JavaScript

Nelepon dropdowns via JavaScript:

$('.dropdown-toggle').dropdown()

data-toggle="dropdown"masih diperlukeun

Paduli naha anjeun nelepon dropdown Anjeun liwat JavaScript atawa gantina ngagunakeun data-api, data-toggle="dropdown"salawasna diperlukeun pikeun hadir dina elemen pemicu dropdown urang.

Euweuh

Toggles menu dropdown tina navbar tinangtu atawa navigasi tab.

Sadaya acara dropdown dipecat dina .dropdown-menu's elemen indungna.

Sadaya acara dropdown gaduh relatedTargetsipat, anu nilaina mangrupikeun unsur jangkar anu toggling.

Jenis Acara Katerangan
show.bs.dropdown Kajadian ieu langsung hurung nalika metode conto acara disebut.
ditémbongkeun.bs.dropdown Kajadian ieu dipecat nalika turunna parantos katingali ku pangguna (bari ngadagoan transisi CSS, réngsé).
hide.bs.dropdown Kajadian ieu langsung dipecat nalika metode conto sumputkeun parantos disebut.
hidden.bs.dropdown Acara ieu dipecat nalika dropdown tos rengse disumputkeun ti pamaké (bakal ngadagoan transisi CSS, pikeun ngalengkepan).
$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})

ScrollSpy scrollspy.js

Contona dina navbar

ScrollSpy plugin pikeun otomatis ngamutahirkeun target nav dumasar kana posisi ngagugulung. Gulung wewengkon handap navbar jeung lalajo robah kelas aktip. Sub item dropdown bakal disorot ogé.

@gajih

Ad leggings keytar, brunch id pésta seni dolor kuli. Pitchfork yr enim lo-fi saméméh maranéhna dijual kaluar qui. Tumblr ladang-ka-méja hak sapedah naon. Anim keffiyeh carles cardigan. stan poto Velit seitan mcsweeney 3 serigala bulan irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui Anjeun meureun geus teu ngadéngé éta et cardigan trust fund culpa biodiesel wes anderson estetika. Nihil tato accusamus, cred ironi biodiesel keffiyeh artisan ullamco consequat.

@mdo

Veniam marfa kumis skateboard, adipisicing fugiat velit pitchfork janggot. Freegan janggot aliqua cupidatat mcsweeney urang vero. Cupidatat opat loko nisi, ea helvetica nulla carles. treuk dahareun baju haneut cosby tato, mcsweeney urang quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles non estetika exercitation quis gentrify. Brooklyn adipisicing karajinan bir wakil keytar deserunt.

hiji

Occaecat commodo aliqua delectus. Fap karajinan bir deserunt skateboard ea. Hak sapedah Lomo adipisicing banh mi, velit ea sunt tingkat salajengna locavore kopi asal tunggal di magna veniam. Kahirupan tinggi id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS nyaéta adipisicing. Consectetur nisi DIY mini kantong utusan. Cred ex di, sustainable delectus consectetur fanny pak iphone.

dua

In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.

three

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

Keytar twee blog, culpa messenger bag marfa naon delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica cliche ironi, thundercats Anjeun meureun geus teu ngadéngé éta consequat hoodie gluten bébas lo-fi fap aliquip. Labore elit placeat saméméh maranéhna dijual kaluar, terry richardson proident brunch nesciunt quis cosby baju haneut pariatur keffiyeh ut helvetica artisan. Cardigan karajinan bir seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.

Pamakéan

Merlukeun Bootstrap nav

Scrollspy ayeuna merlukeun pamakéan komponén nav Bootstrap pikeun panyorot ditangtoskeun tina Tumbu aktip.

target ID resolvable diperlukeun

Tumbu Navbar kudu boga target id resolvable. Contona, hiji <a href="#home">home</a>kudu pakait jeung hal di DOM kawas <div id="home"></div>.

Unsur non- :visibletarget teu dipalire

elemen target nu teu :visiblenurutkeun jQuery bakal dipaliré jeung item nav saluyu maranéhna bakal pernah disorot.

Merlukeun posisi relatif

Perkara teu metoda palaksanaan, scrollspy merlukeun pamakéan position: relative;dina unsur nu nuju spionase on. Dina kalolobaan kasus ieu teh <body>. Nalika scrollspying on elemen lian ti éta <body>, pastikeun gaduh heightset sarta overflow-y: scroll;dilarapkeun.

Via atribut data

Pikeun gampang nambahkeun kabiasaan scrollspy kana navigasi topbar Anjeun, tambahkeun data-spy="scroll"ka elemen rék nénjo dina (paling ilaharna ieu bakal jadi <body>). Teras tambahkeun data-targetatribut sareng ID atanapi kelas unsur indung tina .navkomponén Bootstrap.

body {
  position: relative;
}
<body data-spy="scroll" data-target="#navbar-example">
  ...
  <div id="navbar-example">
    <ul class="nav nav-tabs" role="tablist">
      ...
    </ul>
  </div>
  ...
</body>

Ngaliwatan JavaScript

Saatos nambahkeun position: relative;kana CSS anjeun, nelepon scrollspy via JavaScript:

$('body').scrollspy({ target: '#navbar-example' })

Métode

.scrollspy('refresh')

Nalika nganggo scrollspy sareng nambihan atanapi ngahapus unsur tina DOM, anjeun kedah nyauran metode refresh sapertos kieu:

$('[data-spy="scroll"]').each(function () {
  var $spy = $(this).scrollspy('refresh')
})

Pilihan

Pilihan bisa diliwatan via atribut data atawa JavaScript. Pikeun atribut data, tambahkeun nami pilihan ka data-, sapertos dina data-offset="".

Ngaran ngetik standar katerangan
ngimbangan angka 10 Piksel pikeun ngimbangan ti luhur nalika ngitung posisi ngagugulung.

Kajadian

Jenis Acara Katerangan
activate.bs.scrollspy Kajadian ieu hurung iraha waé item anyar diaktipkeun ku scrollspy.
$('#myScrollspy').on('activate.bs.scrollspy', function () {
  // do something…
})

Tab togglable tab.js

Conto tab

Tambihkeun fungsionalitas tab anu gancang sareng dinamis pikeun ngaliwat panel eusi lokal, bahkan ngalangkungan ménu turun. Tab Nested teu dirojong.

Denim atah anjeun panginten henteu acan kantos nguping aranjeunna kaos jeans Austin. Nesciunt tahu stumptown aliqua, retro synth master cleanse. Kumis klise tempor, williamsburg carles vegan helvetica. Reprehenderit tukang daging retro keffiyeh dreamcatcher synth. Baju haneut Cosby eu banh mi, qui irure Terry richardson ex cumi. Aliquip nempatkeun salvia cillum iphone. Seitan aliquip quis cardigan apparel Amérika, jagal voluptate nisi qui.

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.

Ngalegaan navigasi tab

Plugin ieu ngalegaan komponén navigasi tab pikeun nambihan daérah tabable.

Pamakéan

Aktipkeun tab tabable via JavaScript (unggal tab kudu diaktipkeun individual):

$('#myTabs a').click(function (e) {
  e.preventDefault()
  $(this).tab('show')
})

Anjeun tiasa ngaktipkeun tab individu ku sababaraha cara:

$('#myTabs a[href="#profile"]').tab('show') // Select tab by name
$('#myTabs a:first').tab('show') // Select first tab
$('#myTabs a:last').tab('show') // Select last tab
$('#myTabs li:eq(2) a').tab('show') // Select third tab (0-indexed)

Markup

Anjeun tiasa ngaktipkeun navigasi tab atanapi pil tanpa nyerat JavaScript ku ngan saukur nangtukeun data-toggle="tab"atanapi data-toggle="pill"dina unsur. Nambahkeun kelas navjeung nav-tabska tab ulbakal nerapkeun gaya tab Bootstrap , bari nambahkeun navjeung nav-pillskelas bakal nerapkeun styling pil .

<div>

  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home">...</div>
    <div role="tabpanel" class="tab-pane" id="profile">...</div>
    <div role="tabpanel" class="tab-pane" id="messages">...</div>
    <div role="tabpanel" class="tab-pane" id="settings">...</div>
  </div>

</div>

Pangaruh luntur

Pikeun nyieun tab luntur, tambahkeun .fadeka unggal .tab-pane. Panel tab munggaran ogé kedah .inngajantenkeun eusi awal katingali.

<div class="tab-content">
  <div role="tabpanel" class="tab-pane fade in active" id="home">...</div>
  <div role="tabpanel" class="tab-pane fade" id="profile">...</div>
  <div role="tabpanel" class="tab-pane fade" id="messages">...</div>
  <div role="tabpanel" class="tab-pane fade" id="settings">...</div>
</div>

Métode

$().tab

Aktipkeun unsur tab sareng wadah eusi. Tab kedah gaduh data-targetatanapi hrefnargétkeun titik wadah dina DOM. Dina conto di luhur, tab nyaéta <a>s sareng data-toggle="tab"atribut.

.tab('show')

Milih tab nu dibikeun tur nembongkeun eusi pakait na. Tab séjén nu saméméhna dipilih jadi teu dipilih jeung eusi pakait disumputkeun. Mulih ka panelepon saméméh panel tab sabenerna geus ditémbongkeun (ie saméméh shown.bs.tabacara lumangsung).

$('#someTab').tab('show')

Kajadian

Nalika ningalikeun tab anyar, kajadian-kajadian hurung dina urutan ieu:

  1. hide.bs.tab(dina tab aktip ayeuna)
  2. show.bs.tab(dina tab anu bakal dipidangkeun)
  3. hidden.bs.tab(dina tab aktip saméméhna, sarua jeung pikeun hide.bs.tabacara)
  4. shown.bs.tab(dina tab anu nembé ditingalikeun, sami sareng show.bs.tabacara)

Upami teu aya tab anu parantos aktip, maka acara hide.bs.tabsareng hidden.bs.tabmoal dipecat.

Jenis Acara Katerangan
show.bs.tab Kajadian ieu hurung dina acara tab, tapi sateuacan tab anyar ditingalikeun. Anggo event.targetsareng event.relatedTargetnargétkeun tab aktip sareng tab aktip sateuacana (upami sayogi).
ditémbongkeun.bs.tab Kajadian ieu hurung dina acara tab saatos tab dipintonkeun. Anggo event.targetsareng event.relatedTargetnargétkeun tab aktip sareng tab aktip sateuacana (upami sayogi).
hide.bs.tab Kajadian ieu hurung nalika tab anyar bakal ditingalikeun (sahingga tab aktip saméméhna bakal disumputkeun). Anggo event.targetsareng event.relatedTargetnargétkeun tab aktip anu ayeuna sareng tab anu énggal-énggal aktip, masing-masing.
disumputkeun.bs.tab Kajadian ieu hurung saatos tab énggal ditampilkeun (sahingga tab aktip sateuacana disumputkeun). Anggo event.targetsareng event.relatedTargetnargétkeun tab aktip sateuacana sareng tab aktip énggal, masing-masing.
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})

Tooltips tooltip.js

Diideuan ku jQuery.tipsy plugin unggulan ditulis ku Jason pigura; Tooltips mangrupikeun vérsi anu diropéa, anu henteu ngandelkeun gambar, nganggo CSS3 pikeun animasi, sareng atribut data pikeun neundeun judul lokal.

Tooltips kalawan judul nol-panjangna pernah ditémbongkeun.

Contona

Hover dina tumbu di handap pikeun ningali tooltips:

Calana ketat tingkat salajengna keffiyeh Anjeun meureun geus teu ngadéngé éta. Booth poto janggot denim atah letterpress vegan utusan kantong stumptown. Ladang-ka-méja seitan, fixie sustainable quinoa 8-bit Amérika apparel 8-bit mcsweeney urang boga terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tahu biodiesel williamsburg marfa, opat loko mcsweeney urang cleanse vegan chambray. A artisan bener ironis keytar naon , scenester tegalan-to-méja banksy Austin twitter nanganan freegan cred denim atah single-asal kopi viral.

tooltip statik

Opat pilihan sadia: luhur, katuhu, handap, jeung kénca Blok.

Opat arah

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>

Pungsi milih-di

Pikeun alesan kinerja, Tooltip na Popover data-apis téh opt-in, hartina anjeun kudu initialize aranjeunna sorangan .

Salah sahiji cara pikeun ngamimitian sadaya tooltip dina halaman nyaéta milih ku data-toggleatributna:

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

Pamakéan

Plugin tooltip ngahasilkeun eusi sareng markup dumasar kana paménta, sareng sacara standar nempatkeun tooltip saatos unsur pemicuna.

Micu tooltip via JavaScript:

$('#example').tooltip(options)

Markup

Markup anu diperyogikeun pikeun tooltip ngan ukur dataatribut sareng titledina unsur HTML anjeun hoyong gaduh tooltip. Markup anu dihasilkeun tina tooltip rada saderhana, sanaos peryogi posisi (sacara standar, disetel topku plugin).

<!-- HTML to write -->
<a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>

<!-- Generated markup by the plugin -->
<div class="tooltip top" role="tooltip">
  <div class="tooltip-arrow"></div>
  <div class="tooltip-inner">
    Some tooltip text!
  </div>
</div>

Tumbu sababaraha-garis

Kadang anjeun hoyong nambihan tooltip kana hyperlink anu ngabungkus sababaraha garis. Paripolah standar tina plugin tooltip nyaéta pikeun ngapusatkeunana sacara horisontal sareng vertikal. Tambahkeun white-space: nowrap;ka jangkar anjeun pikeun nyegah ieu.

Tooltips dina grup tombol, grup input, sarta tabel merlukeun setelan husus

Lamun ngagunakeun tooltips dina elemen dina hiji .btn-groupatawa hiji .input-group, atawa dina elemen nu patali tabel ( <td>, <th>, <tr>, <thead>, <tbody>, <tfoot>), anjeun bakal kudu nangtukeun pilihan container: 'body'(documented handap) pikeun nyegah efek samping nu teu dihoyongkeun (kayaning unsur tumuwuh lega tur/ atawa kaleungitan juru buleud nalika tooltip dipicu).

Entong nyobian nunjukkeun tip alat dina elemen anu disumputkeun

Invoking $(...).tooltip('show')nalika unsur targétna display: none;bakal ngabalukarkeun tooltip diposisikan salah.

Tooltips diaksés pikeun keyboard jeung pamaké téhnologi assistive

Pikeun pamaké nganapigasi maké kibor, sarta hususna pamaké téknologi assistive, Anjeun ngan kudu nambahkeun tooltips ka elemen fokus-kibor kayaning Tumbu, kontrol formulir, atawa unsur sawenang nu mibanda tabindex="0"atribut.

Tooltips on elemen ditumpurkeun merlukeun elemen wrapper

Nambahkeun tooltip ka hiji disabledatawa .disabledunsur, nempatkeun unsur di jero a <div>jeung nerapkeun tooltip ka eta <div>gantina.

Pilihan

Pilihan bisa diliwatan via atribut data atawa JavaScript. Pikeun atribut data, tambahkeun nami pilihan ka data-, sapertos dina data-animation="".

Ngaran Tipe Default Katerangan
animasi boolean leres Larapkeun transisi fade CSS kana tooltip
wadahna string | palsu palsu

Appends tooltip ka elemen husus. Contona: container: 'body'. Pilihan ieu hususna kapaké sabab ngamungkinkeun anjeun pikeun nempatkeun tooltip dina aliran dokumen caket unsur pemicu - anu bakal nyegah tooltip ngambang jauh tina unsur pemicu nalika ngarobah ukuran jandela.

reureuh angka | objék 0

Reureuh némbongkeun sarta nyumputkeun tooltip (ms) - teu dilarapkeun ka tipe pemicu manual

Lamun jumlah disadiakeun, reureuh diterapkeun ka duanana nyumputkeun / acara

Struktur objék nyaéta:delay: { "show": 500, "hide": 100 }

html boolean palsu Selapkeun HTML kana tooltip nu. Upami palsu, textmetode jQuery bakal dianggo pikeun nyelapkeun eusi kana DOM. Anggo téks upami anjeun hariwang ngeunaan serangan XSS.
panempatan string | fungsi 'luhureun'

Kumaha posisi tooltip - top | handap | ditinggalkeun | katuhu | otomatis.
Lamun "otomatis" dieusian, éta bakal dinamis reorient tooltip nu. Contona, upami panempatan "otomatis kénca", tooltip bakal dipintonkeun ka kénca lamun mungkin, disebutkeun eta bakal nembongkeun katuhu.

Nalika hiji fungsi dipaké pikeun nangtukeun panempatan, mangka disebut titik tooltip DOM salaku argumen kahiji sarta triggering unsur titik DOM salaku kadua. Kontéks thisdisetel ka conto tooltip.

pamilih senar palsu Upami pamilih disayogikeun, obyék tooltip bakal didelegasikeun ka target anu ditangtukeun. Dina prakna, ieu dipaké pikeun ngaktipkeun eusi HTML dinamis boga tooltips ditambahkeun. Tingali ieu sareng conto informatif .
citakan senar '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'

Dasar HTML pikeun dianggo nalika nyiptakeun tooltip.

The tooltip urang titlebakal nyuntik kana .tooltip-inner.

.tooltip-arrowbakal janten panah tooltip.

Unsur wrapper pangluarna kudu boga .tooltipkelas.

judul string | fungsi ''

Nilai judul standar upami titleatribut teu aya.

Upami fungsina dipasihkeun, éta bakal disebat ku thisset rujukanna kana unsur anu napel tooltip.

pemicu senar 'fokus fokus' Kumaha tooltip dipicu - klik | ngalayang | fokus | manual. Anjeun tiasa ngalangkungan sababaraha pemicu; misahkeun aranjeunna kalayan spasi. manualteu bisa digabungkeun jeung sagala pemicu séjén.
viewport string | objék | fungsi { pamilih: 'awak', padding: 0 }

Ngajaga tooltip dina wates unsur ieu. Contona: viewport: '#viewport'atawa{ "selector": "#viewport", "padding": 0 }

Upami fungsina dipasihkeun, éta disebut ku titik DOM unsur pemicu salaku hiji-hijina argumen. Kontéks thisdisetel ka conto tooltip.

Atribut data pikeun tooltips individu

Pilihan pikeun tooltips individu Alternatipna bisa dieusian ngaliwatan pamakéan atribut data, sakumaha dipedar di luhur.

Métode

$().tooltip(options)

Ngagantelkeun panangan tooltip ka kumpulan unsur.

.tooltip('show')

Nembongkeun tooltip hiji unsur. Mulih ka nu nelepon saméméh tooltip sabenerna geus ditémbongkeun (ie saméméh shown.bs.tooltipacara lumangsung). Ieu dianggap "manual" pemicu tooltip. Tooltips kalawan judul nol-panjangna pernah ditémbongkeun.

$('#element').tooltip('show')

.tooltip('hide')

Nyumputkeun tooltip unsur. Mulih ka panelepon saméméh tooltip sabenerna disumputkeun (ie saméméh hidden.bs.tooltipacara lumangsung). Ieu dianggap "manual" pemicu tooltip.

$('#element').tooltip('hide')

.tooltip('toggle')

Toggles tooltip hiji unsur. Mulih ka nu nelepon saméméh tooltip sabenerna geus ditémbongkeun atawa disumputkeun (ie saméméh shown.bs.tooltipatawa hidden.bs.tooltipkajadian lumangsung). Ieu dianggap "manual" pemicu tooltip.

$('#element').tooltip('toggle')

.tooltip('destroy')

Nyumputkeun sareng ngancurkeun tooltip unsur. Tooltips nu make delegasi (anu dijieun maké pilihanselector ) teu bisa individual ancur dina elemen pemicu turunan.

$('#element').tooltip('destroy')

Kajadian

Jenis Acara Katerangan
show.bs.tooltip Kajadian ieu langsung hurung nalika showmetode conto disebut.
ditémbongkeun.bs.tooltip Kajadian ieu dipecat nalika tooltip parantos katingali ku pangguna (bari ngantosan transisi CSS réngsé).
hide.bs.tooltip Kajadian ieu langsung dipecat nalika hidemetode conto parantos disebut.
hidden.bs.tooltip Kajadian ieu dipecat nalika tooltip parantos disumputkeun tina pangguna (bari ngantosan transisi CSS réngsé).
inserted.bs.tooltip Kajadian ieu dipecat sanggeus show.bs.tooltipkajadian nalika template tooltip geus ditambahkeun kana DOM.
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})

Popovers popover.js

Nambahkeun overlays leutik eusi, kawas nu aya dina iPad, kana elemen naon wae pikeun perumahan informasi sekundér.

Popovers anu judul sareng eusina nol-panjangna henteu pernah ditampilkeun.

kagumantungan plugin

Popovers ngabutuhkeun plugin tooltip pikeun dilebetkeun kana versi Bootstrap anjeun.

Pungsi milih-di

Pikeun alesan kinerja, Tooltip na Popover data-apis téh opt-in, hartina anjeun kudu initialize aranjeunna sorangan .

Salah sahiji cara pikeun ngamimitian sadayana popovers dina halaman nyaéta milih aranjeunna dumasar kana data-toggleatributna:

$(function () {
  $('[data-toggle="popover"]').popover()
})

Popovers dina grup tombol, grup input, sarta tabel merlukeun setelan husus

Lamun make popovers on elemen dina hiji .btn-groupatawa hiji .input-group, atawa dina elemen nu patali tabel ( <td>, <th>, <tr>, <thead>, <tbody>, <tfoot>), Anjeun bakal kudu nangtukeun pilihan container: 'body'(documented handap) pikeun nyegah efek samping nu teu dihoyongkeun (saperti unsur tumuwuh lega tur / atanapi kaleungitan juru buleud nalika popover dipicu).

Ulah coba pikeun nembongkeun popovers on elemen disumputkeun

Invoking $(...).popover('show')nalika unsur targétna display: none;bakal ngabalukarkeun popover diposisikan salah.

Popovers on elemen ditumpurkeun merlukeun elemen wrapper

Nambahkeun popover ka hiji disabledatawa .disabledunsur, nempatkeun unsur di jero a <div>jeung nerapkeun popover ka eta <div>gantina.

Tumbu sababaraha-garis

Kadang anjeun hoyong nambihan popover kana hyperlink anu ngabungkus sababaraha garis. Paripolah standar tina plugin popover nyaéta pikeun dipuseurkeun sacara horisontal sareng vertikal. Tambahkeun white-space: nowrap;ka jangkar anjeun pikeun nyegah ieu.

Contona

Popover statik

Opat pilihan sadia: luhur, katuhu, handap, jeung kénca Blok.

Popover luhur

Sed posuere consectetur est at lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover katuhu

Sed posuere consectetur est at lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover handap

Sed posuere consectetur est at lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover ditinggalkeun

Sed posuere consectetur est at lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Live demo

<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

Opat arah

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on left
</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on top
</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on bottom
</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on right
</button>

Leupaskeun dina klik salajengna

Anggo focuspemicu pikeun ngaleungitkeun popovers dina klik salajengna anu dilakukeun ku pangguna.

Markup spésifik dipikabutuh pikeun dismiss-on-next-click

Pikeun paripolah cross-browser sareng cross-platform anu leres, anjeun kedah nganggo <a>tag, sanés tag <button>, sareng anjeun ogé kedah ngalebetkeun atribut role="button"sareng .tabindex

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>

Pamakéan

Aktipkeun popovers via JavaScript:

$('#example').popover(options)

Pilihan

Pilihan bisa diliwatan via atribut data atawa JavaScript. Pikeun atribut data, tambahkeun nami pilihan ka data-, sapertos dina data-animation="".

Ngaran Tipe Default Katerangan
animasi boolean leres Larapkeun transisi fade CSS kana popover
wadahna string | palsu palsu

Appends popover ka elemen husus. Contona: container: 'body'. Pilihan ieu hususna kapaké sabab ngamungkinkeun anjeun pikeun nempatkeun popover dina aliran dokumen caket unsur pemicu - anu bakal nyegah popover ngambang jauh tina unsur pemicu nalika ukuran jandela.

eusi string | fungsi ''

Nilai eusi standar lamundata-content atribut teu aya.

Upami fungsina dipasihkeun, éta bakal disebat ku thisset rujukanna kana unsur anu napel na popover.

reureuh angka | objék 0

Reureuh némbongkeun sarta nyumputkeun popover (ms) - teu dilarapkeun ka tipe pemicu manual

Lamun jumlah disadiakeun, reureuh diterapkeun ka duanana nyumputkeun / acara

Struktur objék nyaéta:delay: { "show": 500, "hide": 100 }

html boolean palsu Selapkeun HTML kana popover nu. Upami palsu, textmetode jQuery bakal dianggo pikeun nyelapkeun eusi kana DOM. Anggo téks upami anjeun hariwang ngeunaan serangan XSS.
panempatan string | fungsi 'leres'

Kumaha posisi popover - top | handap | ditinggalkeun | katuhu | otomatis.
Nalika "otomatis" dieusian, éta bakal dinamis reorient popover nu. Contona, upami panempatan "otomatis kénca", popover bakal dipintonkeun ka kénca lamun mungkin, disebutkeun eta bakal nembongkeun katuhu.

Nalika fungsi dipaké pikeun nangtukeun panempatan, mangka disebut titik popover DOM salaku argumen kahijina sarta triggering unsur titik DOM salaku kadua. Kontéks thisdisetel ka conto popover.

pamilih senar palsu Upami pamilih disayogikeun, obyék popover bakal didelegasikeun ka target anu ditangtukeun. Dina prakték, ieu dipaké pikeun ngaktipkeun eusi HTML dinamis boga popovers ditambahkeun. Tingali ieu sareng conto informatif .
citakan senar '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'

Dasar HTML pikeun dianggo nalika nyiptakeun popover.

The popover urang titlebakal nyuntik kana .popover-title.

The popover urang contentbakal nyuntik kana .popover-content.

.arrowbakal janten panah popover.

Unsur wrapper pangluarna kudu boga .popoverkelas.

judul string | fungsi ''

Nilai judul standar upami titleatribut teu aya.

Upami fungsina dipasihkeun, éta bakal disebat ku thisset rujukanna kana unsur anu napel na popover.

pemicu senar 'klik' Kumaha popover dipicu - klik | ngalayang | fokus | manual. Anjeun tiasa ngalangkungan sababaraha pemicu; misahkeun aranjeunna kalayan spasi. manualteu bisa digabungkeun jeung sagala pemicu séjén.
viewport string | objék | fungsi { pamilih: 'awak', padding: 0 }

Ngajaga popover dina wates unsur ieu. Contona: viewport: '#viewport'atawa{ "selector": "#viewport", "padding": 0 }

Upami fungsina dipasihkeun, éta disebut ku titik DOM unsur pemicu salaku hiji-hijina argumen. Kontéks thisdisetel ka conto popover.

Atribut data pikeun popovers individu

Pilihan pikeun popovers individu bisa Alternatipna dieusian ngaliwatan pamakéan atribut data, sakumaha dipedar di luhur.

Métode

$().popover(options)

Initializes popovers pikeun kumpulan unsur.

.popover('show')

Nembongkeun popover unsur. Mulih ka nu nelepon saméméh popover nu sabenerna geus ditémbongkeun (ie saméméh shown.bs.popoveracara lumangsung). Ieu dianggap "manual" triggering of popover nu. Popovers anu judul sareng eusina nol-panjangna henteu pernah ditampilkeun.

$('#element').popover('show')

.popover('hide')

Nyumputkeun popover unsur. Mulih ka panelepon saméméh popover sabenerna geus disumputkeun (ie saméméh hidden.bs.popoveracara lumangsung). Ieu dianggap "manual" triggering of popover nu.

$('#element').popover('hide')

.popover('toggle')

Toggles popover unsur urang. Mulih ka nu nelepon saméméh popover sabenerna geus ditémbongkeun atawa disumputkeun (ie saméméh shown.bs.popoveratawa hidden.bs.popoverkajadian lumangsung). Ieu dianggap "manual" triggering of popover nu.

$('#element').popover('toggle')

.popover('destroy')

Nyumputkeun sareng ngancurkeun popover unsur. Popovers nu make delegasi (anu dijieun maké pilihanselector ) teu bisa individual ancur dina elemen pemicu turunan.

$('#element').popover('destroy')

Kajadian

Jenis Acara Katerangan
show.bs.popover Kajadian ieu langsung hurung nalika showmetode conto disebut.
ditémbongkeun.bs.popover Kajadian ieu dipecat nalika popover parantos katingali ku pangguna (bari ngantosan transisi CSS réngsé).
hide.bs.popover Kajadian ieu langsung dipecat nalika hidemetode conto parantos disebut.
disumputkeun.bs.popover Acara ieu dipecat nalika popover parantos disumputkeun tina pangguna (bari ngantosan transisi CSS réngsé).
diselapkeun.bs.popover Kajadian ieu dipecat sanggeus show.bs.popoverkajadian nalika template popover geus ditambahkeun kana DOM.
$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})

Talatah siaga alert.js

Conto béwara

Tambihkeun pungsionalitasna pikeun sadaya pesen waspada nganggo plugin ieu.

Nalika nganggo .closetombol, éta kedah janten anak anu munggaran .alert-dismissiblesareng henteu aya eusi téks anu aya sateuacanna dina markup.

Pamakéan

Ngan tambahkeun data-dismiss="alert"kana tombol nutup anjeun pikeun otomatis masihan hiji fungsi nutup ngageter. Nutup ngageter ngaluarkeun tina DOM.

<button type="button" class="close" data-dismiss="alert" aria-label="Close">
  <span aria-hidden="true">&times;</span>
</button>

Pikeun ngageter anjeun nganggo animasi nalika nutup, pastikeun aranjeunna gaduh .fadesareng.in kelas anu parantos dilarapkeun ka aranjeunna.

Métode

$().alert()

Ngadamel waspada ngadangukeun acara klik dina unsur turunan anu ngagaduhan data-dismiss="alert"atribut. (Teu diperlukeun nalika ngagunakeun data-api sacara otomatis-inisialisasi.)

$().alert('close')

Nutup ngageter ku cara ngahapus tina DOM. Upami kelas .fadesareng .inaya dina unsur, waspada bakal luntur sateuacan dicabut.

Kajadian

Plugin ngageter Bootstrap ngungkabkeun sababaraha acara pikeun ngahubungkeun kana fungsionalitas waspada.

Jenis Acara Katerangan
close.bs.waspada Kajadian ieu langsung hurung nalika closemetode conto disebut.
closed.bs.waspada Acara ieu dipecat nalika ngageter parantos ditutup (bari ngantosan transisi CSS réngsé).
$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})

Kancing kancing.js

Ngalakukeun leuwih ku tombol. Tombol kontrol nyatakeun atanapi jieun grup tombol pikeun langkung seueur komponén sapertos tulbar.

Kasaluyuan cross-browser

Firefox tetep kaayaan kontrol formulir (cacad tur checkedness) sakuliah beban kaca . Solusi pikeun ieu nyaéta ngagunakeun autocomplete="off". Tempo bug Mozilla #654072 .

Stateful

Tambahkeun data-loading-text="Loading..."ka make kaayaan loading on tombol a.

fitur ieu deprecated saprak v3.3.5 sarta geus dihapus dina v4.

Anggo nagara mana waé anu anjeun pikahoyong!

Demi démo ieu, kami nganggo data-loading-textna $().button('loading'), tapi éta teu hijina kaayaan anjeun bisa make. Tingali langkung seueur ngeunaan ieu di handap dina $().button(string)dokuméntasi .

<button type="button" id="myButton" data-loading-text="Loading..." class="btn btn-primary" autocomplete="off">
  Loading state
</button>

<script>
  $('#myButton').on('click', function () {
    var $btn = $(this).button('loading')
    // business logic...
    $btn.button('reset')
  })
</script>

Togel tunggal

Tambahkeun data-toggle="button"pikeun ngaktipkeun toggling dina hiji tombol.

Butuh tombol anu tos togél.active naaria-pressed="true"

Pikeun tombol tos toggled, Anjeun kudu nambahkeun .activekelas jeung aria-pressed="true"atribut ka buttondiri.

<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
  Single toggle
</button>

Kotak centang / Radio

Tambahkeun data-toggle="buttons"ka .btn-groupkotak centang atanapi input radio anu ngandung pikeun ngaktipkeun toggling dina gaya masing-masing.

Pilihan preselected peryogi.active

Pikeun pilihan anu tos dipilih, anjeun kedah nambihan .activekelas kana input labelanjeun nyalira.

Kaayaan dipariksa visual ngan diropéa dina klik

Lamun kaayaan dipariksa tina hiji tombol kotak centang diropéa tanpa némbak hiji clickkajadian dina tombol (misalna via <input type="reset">atawa via setelan checkedmilik input), anjeun bakal kudu toggle .activekelas on input urang labelsorangan.

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="checkbox" autocomplete="off" checked> Checkbox 1 (pre-checked)
  </label>
  <label class="btn btn-primary">
    <input type="checkbox" autocomplete="off"> Checkbox 2
  </label>
  <label class="btn btn-primary">
    <input type="checkbox" autocomplete="off"> Checkbox 3
  </label>
</div>
<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (preselected)
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option2" autocomplete="off"> Radio 2
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option3" autocomplete="off"> Radio 3
  </label>
</div>

Métode

$().button('toggle')

Toggles kaayaan push. Méré tombol tampilan yén éta geus diaktipkeun.

$().button('reset')

Reset kaayaan tombol - swaps téks kana téks aslina. Metoda ieu asynchronous sarta balik saméméh reset sabenerna geus réngsé.

$().button(string)

Swap téks kana sagala data ditetepkeun kaayaan téks.

<button type="button" id="myStateButton" data-complete-text="finished!" class="btn btn-primary" autocomplete="off">
  ...
</button>

<script>
  $('#myStateButton').on('click', function () {
    $(this).button('complete') // button text will be "finished!"
  })
</script>

Rubuh rubuh.js

Plugin fléksibel anu ngagunakeun sakeupeul kelas pikeun paripolah toggle anu gampang.

kagumantungan plugin

Collapse merlukeun plugin transisi diasupkeun kana versi Bootstrap anjeun.

Contona

Pencét tombol di handap pikeun nunjukkeun sareng nyumputkeun unsur sanés ku parobihan kelas:

  • .collapsenyumputkeun eusi
  • .collapsingditerapkeun dina mangsa transisi
  • .collapse.innembongkeun eusi

Anjeun tiasa nganggo tautan sareng hrefatribut, atanapi tombol sareng data-targetatribut. Dina duanana kasus, éta data-toggle="collapse"diperlukeun.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
<a class="btn btn-primary" role="button" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Link with href
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Button with data-target
</button>
<div class="collapse" id="collapseExample">
  <div class="well">
    ...
  </div>
</div>

Conto akordion

Manjangkeun paripolah runtuhna standar pikeun nyiptakeun akordion sareng komponén panel.

Anim pariatur cliche reprehenderit, enim eiusmod hirup tinggi accusamus Terry richardson ad cumi. 3 ajag bulan officia aute, non cupidatat skateboard dolor brunch. Truk dahareun quinoa nesciunt laborum eiusmod. Brunch 3 ajag bulan tempor, sunt aliqua nempatkeun manuk dina eta cumi tunggal-asal kopi nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Iklan vegan excepteur jagal wakil lomo. Leggings occaecat karajinan bir ladang-to-méja, denim atah estetika synth nesciunt Anjeun meureun geus teu ngadéngé éta accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod hirup tinggi accusamus Terry richardson ad cumi. 3 ajag bulan officia aute, non cupidatat skateboard dolor brunch. Truk dahareun quinoa nesciunt laborum eiusmod. Brunch 3 ajag bulan tempor, sunt aliqua nempatkeun manuk dina eta cumi tunggal-asal kopi nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Iklan vegan excepteur jagal wakil lomo. Leggings occaecat karajinan bir ladang-to-méja, denim atah estetika synth nesciunt Anjeun meureun geus teu ngadéngé éta accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod hirup tinggi accusamus Terry richardson ad cumi. 3 ajag bulan officia aute, non cupidatat skateboard dolor brunch. Truk dahareun quinoa nesciunt laborum eiusmod. Brunch 3 ajag bulan tempor, sunt aliqua nempatkeun manuk dina eta cumi tunggal-asal kopi nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Iklan vegan excepteur jagal wakil lomo. Leggings occaecat karajinan bir ladang-to-méja, denim atah estetika synth nesciunt Anjeun meureun geus teu ngadéngé éta accusamus labore sustainable VHS.
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
      <h4 class="panel-title">
        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingTwo">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingThree">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>

Ieu oge mungkin mun swap kaluar .panel-bodys kalawan .list-groups.

  • Bootply
  • Hiji itmus ac facilin
  • Eros kadua

Jieun kadali dilegakeun / runtuhna diaksés

Pastikeun pikeun nambahkeun aria-expandedkana elemen kontrol. Atribut ieu sacara eksplisit ngahartikeun kaayaan ayeuna tina unsur anu tiasa digulung pikeun layar pamiarsa sareng téknologi pitulung anu sami. Lamun unsur collapsible ditutup sacara standar, éta kudu boga nilai aria-expanded="false". Upami anjeun parantos nyetél unsur anu tiasa digulung janten kabuka sacara standar nganggo inkelas, setel aria-expanded="true"dina kontrol. Plugin bakal otomatis toggle atribut ieu dumasar kana naha atanapi henteu unsur collapsible geus dibuka atawa ditutup.

Salaku tambahan, upami unsur kontrol anjeun nargétkeun hiji unsur anu tiasa dilipat - nyaéta data-targetatributna nujul ka idpamilih - anjeun tiasa nambihan atribut tambahan aria-controlskana unsur kontrol, anu ngandung idunsur anu tiasa dilipat. Pamiarsa layar modéren sareng téknologi pitulung anu sami ngagunakeun atribut ieu pikeun nyayogikeun potong kompas tambahan pikeun pangguna pikeun langsung napigasi ka unsur anu tiasa dilipat.

Pamakéan

Plugin runtuh ngagunakeun sababaraha kelas pikeun nanganan angkat beurat:

  • .collapsenyumputkeun eusi
  • .collapse.innembongkeun eusi
  • .collapsingditambahkeun nalika transisi dimimitian, sarta dihapus nalika rengse

kelas ieu bisa kapanggih dina component-animations.less.

Via atribut data

Ngan tambahkeun data-toggle="collapse"na a data-targetkana unsur pikeun otomatis napelkeun kadali unsur collapsible. Atribut data-targetnampi pamilih CSS pikeun nerapkeun runtuhna. Pastikeun pikeun nambahkeun kelas collapseka elemen collapsible. Upami anjeun hoyong kabuka sacara standar, tambahkeun kelas tambahan in.

Pikeun nambahkeun manajemén grup kawas akordion ka kontrol collapsible, tambahkeun atribut data data-parent="#selector". Tingali kana demo pikeun ningali ieu aksi.

Ngaliwatan JavaScript

Aktipkeun sacara manual nganggo:

$('.collapse').collapse()

Pilihan

Pilihan bisa diliwatan via atribut data atawa JavaScript. Pikeun atribut data, tambahkeun nami pilihan ka data-, sapertos dina data-parent="".

Ngaran ngetik standar katerangan
kolot pamilih palsu Upami pamilih disayogikeun, maka sadaya elemen anu tiasa dilipat dina indungna anu ditangtukeun bakal ditutup nalika item anu tiasa dilipat ieu ditampilkeun. (sarupa jeung kabiasaan akordion tradisional - ieu gumantung kana panelkelas)
togél boolean leres Toggles unsur collapsible on invocation

Métode

.collapse(options)

Aktipkeun eusi anjeun salaku unsur collapsible. Narima hiji pilihan pilihan object.

$('#myCollapsible').collapse({
  toggle: false
})

.collapse('toggle')

Toggles unsur collapsible mun ditémbongkeun atawa disumputkeun. Mulih ka nu nelepon saméméh unsur collapsible sabenerna geus ditémbongkeun atawa disumputkeun (ie saméméh shown.bs.collapseatawa hidden.bs.collapsekajadian lumangsung).

.collapse('show')

Némbongkeun unsur collapsible. Mulih ka panelepon saméméh unsur collapsible sabenerna geus ditémbongkeun (ie saméméh shown.bs.collapseacara lumangsung).

.collapse('hide')

Nyumputkeun unsur anu tiasa dilipat. Mulih ka panelepon saméméh unsur collapsible sabenerna disumputkeun (ie saméméh hidden.bs.collapseacara lumangsung).

Kajadian

Kelas runtuh Bootstrap ngungkabkeun sababaraha acara pikeun ngaitkeun kana fungsionalitas runtuh.

Jenis Acara Katerangan
show.bs.collapse Kajadian ieu langsung hurung nalika showmetode conto disebut.
ditémbongkeun.bs.collapse Kajadian ieu dipecat nalika unsur runtuh parantos katingali ku pangguna (bari ngantosan transisi CSS réngsé).
hide.bs.collapse Kajadian ieu dipecat langsung nalika hidepadika geus disebut.
disumputkeun.bs.collapse Acara ieu dipecat nalika unsur runtuhna disumputkeun ti pangguna (bari ngadagoan transisi CSS réngsé).
$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})

Carousel carousel.js

Komponén pintonan slaid pikeun ngurilingan elemen, sapertos carousel. Carousel Nested teu dirojong.

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    <div class="item">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    ...
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Captions pilihan

Tambihkeun caption kana slide anjeun kalayan gampang kalayan .carousel-captionunsur anu aya dina .item. Tempatkeun naon waé HTML pilihan di dinya sareng éta bakal otomatis dijajarkeun sareng diformat.

<div class="item">
  <img src="..." alt="...">
  <div class="carousel-caption">
    <h3>...</h3>
    <p>...</p>
  </div>
</div>

Sababaraha carousels

Carousels merlukeun pamakéan hiji idon wadahna pangluarna (éta .carousel) pikeun kadali carousel fungsina leres. Nalika nambihan sababaraha carousel, atanapi nalika ngarobih carousel id, pastikeun pikeun ngapdet kadali anu relevan.

Via atribut data

Paké atribut data pikeun gampang ngadalikeun posisi carousel nu. data-slidenarima kecap konci prevatawa next, nu ngarobah posisi slide relatif ka posisi ayeuna. Alternatipna, pake data-slide-topikeun ngirimkeun indéks slide atah ka carousel data-slide-to="2", anu mindahkeun posisi slide ka indéks tinangtu dimimitian ku 0.

Atribut data-ride="carousel"dipaké pikeun nandaan carousel salaku animasi dimimitian dina beban kaca. Ieu teu bisa dipaké dina kombinasi kalayan (kaleuleuwihan jeung teu perlu) initialization JavaScript eksplisit tina carousel sarua.

Ngaliwatan JavaScript

Telepon carousel sacara manual nganggo:

$('.carousel').carousel()

Pilihan bisa diliwatan via atribut data atawa JavaScript. Pikeun atribut data, tambahkeun nami pilihan ka data-, sapertos dina data-interval="".

Ngaran ngetik standar katerangan
interval angka 5000 Jumlah waktu reureuh antara otomatis Ngabuburit hiji item. Lamun palsu, carousel moal otomatis siklus.
reureuh sakeudeung string | null "ngalayang" Lamun disetel ka "hover", ngareureuhkeun muter tina carousel on mouseentersarta neruskeun muter tina carousel on mouseleave. Upami disetel ka null, hovering dina carousel moal ngareureuhkeun eta.
bungkus boolean leres Naha carousel kedah ngurilingan kontinyu atanapi kedah eureun.
kibor boolean leres Naha carousel kedah ngaréspon kana acara keyboard.

Initializes carousel kalawan pilihan pilihan objecttur mimitian Ngabuburit ngaliwatan item.

$('.carousel').carousel({
  interval: 2000
})

Siklus ngaliwatan item carousel ti kénca ka katuhu.

Ngeureunkeun carousel tina ngurilingan barang.

Siklus carousel ka pigura nu tangtu (0 dumasar, sarupa hiji Asép Sunandar Sunarya).

Siklus ka item saméméhna.

Siklus ka item salajengna.

Kelas carousel Bootstrap ngungkabkeun dua acara pikeun ngaitkeun kana fungsionalitas carousel.

Kadua acara gaduh sipat tambahan di handap ieu:

  • direction: Arah nu carousel nu ngageser (boh "left"atawa "right").
  • relatedTarget: Unsur DOM nu keur slid kana tempat salaku item aktip.

Sadaya acara carousel dipecat dina carousel sorangan (ie di <div class="carousel">).

Jenis Acara Katerangan
slide.bs.carousel Kajadian ieu langsung hurung sawaktos slidemetodeu invoked.
slid.bs.carousel Acara ieu dipecat nalika carousel parantos réngsé transisi slide na.
$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
})

Afiks afiks.js

Contona

Plugin afiks position: fixed;hurung sareng mareuman, niru éfék anu kapanggih sareng position: sticky;. Subnavigasi di beulah katuhu mangrupikeun demo langsung tina plugin afiks.


Pamakéan

Anggo plugin afiks via atribut data atanapi sacara manual nganggo JavaScript anjeun nyalira. Dina duanana kaayaan, Anjeun kudu nyadiakeun CSS pikeun positioning jeung lebar eusi affixed Anjeun.

Catetan: Entong nganggo plugin afiks dina unsur anu aya dina unsur anu rada diposisikan, sapertos kolom anu ditarik atanapi didorong, kusabab kutu rendering Safari .

Positioning via CSS

Plugin afiks toggles antara tilu kelas, masing-masing ngagambarkeun kaayaan nu tangtu: .affix, .affix-top, jeung .affix-bottom. Anjeun kudu nyadiakeun gaya, iwalposition: fixed; on .affix, pikeun kelas ieu sorangan (bebas tina plugin ieu) pikeun nanganan posisi sabenerna.

Ieu kumaha plugin affix jalanna:

  1. Pikeun ngamimitian, plugin nambihan.affix-top pikeun nunjukkeun yén unsur aya dina posisi anu paling luhur. Dina titik ieu euweuh positioning CSS diperlukeun.
  2. Ngagulung ngaliwatan unsur nu Anjeun hoyong affixing kedah memicu affixing sabenerna. Ieu dimana .affixngagantikeun .affix-topsarta susunanposition: fixed; (disadiakeun ku Bootstrap urang CSS).
  3. Lamun hiji offset handap ditetepkeun, ngagulung kaliwat eta kudu diganti .affixku .affix-bottom. Kusabab offsets mangrupakeun pilihan, netepkeun hiji merlukeun anjeun nyetel CSS luyu. Dina hal ieu, tambahkeun position: absolute;lamun perlu. Plugin ngagunakeun atribut data atanapi pilihan JavaScript pikeun nangtukeun dimana nempatkeun unsur ti dinya.

Turutan léngkah-léngkah di luhur pikeun nyetél CSS anjeun pikeun salah sahiji pilihan pamakean di handap ieu.

Via atribut data

Pikeun gampang nambihan paripolah afiks kana unsur naon waé, tambahkeun data-spy="affix"kana unsur anu anjeun hoyong nénjo. Paké offsets pikeun nangtukeun iraha bade togél pinning unsur.

<div data-spy="affix" data-offset-top="60" data-offset-bottom="200">
  ...
</div>

Ngaliwatan JavaScript

Nelepon plugin afiks via JavaScript:

$('#myAffix').affix({
  offset: {
    top: 100,
    bottom: function () {
      return (this.bottom = $('.footer').outerHeight(true))
    }
  }
})

Pilihan

Pilihan bisa diliwatan via atribut data atawa JavaScript. Pikeun atribut data, tambahkeun nami pilihan ka data-, sapertos dina data-offset-top="200".

Ngaran ngetik standar katerangan
ngimbangan angka | fungsi | objék 10 Piksel pikeun ngimbangan tina layar nalika ngitung posisi ngagugulung. Upami nomer tunggal disayogikeun, offset bakal diterapkeun dina arah luhur sareng handap. Pikeun nyadiakeun unik, handap tur luhur offset ngan nyadiakeun hiji obyék offset: { top: 10 }atawa offset: { top: 10, bottom: 5 }. Anggo fungsi nalika anjeun kedah ngitung sacara dinamis offset.
udagan pamilih | titik | unsur jQuery windowobjék _ Nangtukeun unsur target tina afiks.

Métode

.affix(options)

Aktipkeun eusi anjeun salaku eusi anu ditempelkeun. Narima hiji pilihan pilihan object.

$('#myAffix').affix({
  offset: 15
})

.affix('checkPosition')

Ngitung deui kaayaan afiks dumasar kana dimensi, posisi, sareng posisi gulir unsur-unsur anu aya hubunganana. The .affix, .affix-top, sarta .affix-bottomkelas ditambahkeun kana atawa dipiceun tina eusi affixed nurutkeun kaayaan anyar. Metoda ieu perlu disebut iraha wae dimensi eusi affixed atawa unsur target dirobah, pikeun mastikeun positioning bener tina eusi affixed.

$('#myAffix').affix('checkPosition')

Kajadian

Plugin afiks Bootstrap ngungkabkeun sababaraha acara pikeun nyambungkeun kana fungsionalitas afiks.

Jenis Acara Katerangan
afiks.bs.afiks Kajadian ieu langsung hurung sateuacan unsur dipasang.
afiks.bs.afiks Kajadian ieu dipecat saatos unsur ditempelkeun.
afiks-top.bs.afiks Kajadian ieu langsung hurung sateuacan unsur dipasang-luhur.
affixed-top.bs.afiks Kajadian ieu dipecat sanggeus unsur geus affixed-luhur.
afiks-bottom.bs.afiks Kajadian ieu langsung hurung sateuacan unsur ditempelkeun-handap.
affixed-bottom.bs.afiks Kajadian ieu dipecat saatos unsur ditempelkeun-handap.