Ihtisar

Individu atawa disusun

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

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

Programmatic API

Kami ogé yakin yén anjeun kedah tiasa nganggo sadayana plugins Bootstrap murni ngalangkungan API JavaScript. Kabéh API umum anu 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
})

Sanitizer

Tooltips sareng Popovers nganggo sanitizer anu diwangun pikeun ngabersihan pilihan anu nampi HTML.

Nilai standar whiteListnyaéta kieu:

var ARIA_ATTRIBUTE_PATTERN = /^aria-[\w-]*$/i
var DefaultWhitelist = {
  // Global attributes allowed on any supplied element below.
  '*': ['class', 'dir', 'id', 'lang', 'role', ARIA_ATTRIBUTE_PATTERN],
  a: ['target', 'href', 'title', 'rel'],
  area: [],
  b: [],
  br: [],
  col: [],
  code: [],
  div: [],
  em: [],
  hr: [],
  h1: [],
  h2: [],
  h3: [],
  h4: [],
  h5: [],
  h6: [],
  i: [],
  img: ['src', 'alt', 'title', 'width', 'height'],
  li: [],
  ol: [],
  p: [],
  pre: [],
  s: [],
  small: [],
  span: [],
  sub: [],
  sup: [],
  strong: [],
  u: [],
  ul: []
}

Upami anjeun hoyong nambihan nilai anyar kana standar ieu whiteListanjeun tiasa ngalakukeun ieu:

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.whiteList

// To allow table elements
myDefaultWhiteList.table = []

// To allow td elements and data-option attributes on td elements
myDefaultWhiteList.td = ['data-option']

// You can push your custom regex to validate your attributes.
// Be careful about your regular expressions being too lax
var myCustomRegex = /^data-my-app-[\w-]+/
myDefaultWhiteList['*'].push(myCustomRegex)

Upami anjeun hoyong ngalangkungan sanitizer kami sabab anjeun langkung resep ngagunakeun perpustakaan khusus, contona DOMPurify , anjeun kedah ngalakukeun ieu:

$('#yourTooltip').tooltip({
  sanitizeFn: function (content) {
    return DOMPurify.sanitize(content)
  }
})

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.4.1"

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.

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

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>

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

Variasi eusi modal dumasar kana tombol pemicu

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,

<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 unsur 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="".

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

Métode

.modal(options)

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

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

.modal('toggle')

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

.modal('show')

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

.modal('hide')

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

.modal('handleUpdate')

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">).

$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

Dropdowns dropdown.js

Contona

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

Dina navbar a

Dina pil

Pamakéan

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 turun-handap dina tingkat aplikasi, janten éta hadé pikeun 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()

Pilihan

Euweuh

Métode

$().dropdown('toggle')

Toggles menu dropdown tina navbar tinangtu atawa navigasi tab.

Kajadian

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

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

$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})

ScrollSpy scrollspy.js

Contona dina navbar

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

Pamakéan

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="".

Kajadian

$('#myScrollspy').on('activate.bs.scrollspy', function () {
  // do something…
})

Tab togglable tab.js

Conto tab

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

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.

$('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:

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>

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

Pilihan

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

Métode

$().tooltip(options)

Ngagantelkeun panangan tooltip ka kumpulan unsur.

.tooltip('show')

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

$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})

Popovers popover.js

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

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

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

Contona

Popover statik

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

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.

<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="".

Métode

$().popover(options)

Initializes popovers pikeun kumpulan unsur.

.popover('show')

Nembongkeun popover unsur. Mulih ka panelepon saméméh popover sabenerna geus ditémbongkeun (ie saméméh shown.bs.popoveracara lumangsung). Ieu dianggap "manual" triggering of popover nu. Popovers anu judulna 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

$('#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 masihan panggeuing anjeun nganggo animasi nalika nutup, pastikeun aranjeunna gaduh .fadesareng .inkelas 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 dipiceun.

Kajadian

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

$('#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.

Stateful

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

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

<button type="button" id="myButton" data-loading-text="Loading..." class="btn btn-primary">
  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.

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

Kotak centang / Radio

Tambihkeun data-toggle="buttons"kana .btn-groupkotak centang atanapi input radio pikeun ngaktipkeun togling dina gaya masing-masing.

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="checkbox" checked> Checkbox 1 (pre-checked)
  </label>
  <label class="btn btn-primary">
    <input type="checkbox"> Checkbox 2
  </label>
  <label class="btn btn-primary">
    <input type="checkbox"> Checkbox 3
  </label>
</div>

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="radio" name="options" id="option1" checked> Radio 1 (preselected)
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option2"> Radio 2
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option3"> 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">
  ...
</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.

Contona

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

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

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

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

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 kana 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="".

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.

$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})

Carousel carousel.js

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

Contona

saméméhna Teras

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

Label slide munggaran

Nulla vitae elit libero, a pharetra augue mollis interdum.

labél slide kadua

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

labél slide katilu

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

saméméhna Teras

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

Pamakéan

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 ngalirkeun indéks slide atah ka carousel data-slide-to="2", nu shifts posisi slide ka indéks husus dimimitian ku 0.

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

Ngaliwatan JavaScript

Telepon carousel sacara manual nganggo:

$('.carousel').carousel()

Pilihan

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

Métode

.carousel(options)

Initializes carousel kalawan pilihan pilihan objecttur mimitian Ngabuburit ngaliwatan item.

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

.carousel('cycle')

Siklus ngaliwatan item carousel ti kénca ka katuhu.

.carousel('pause')

Ngeureunkeun carousel tina ngurilingan barang.

.carousel(number)

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

.carousel('prev')

Siklus ka item saméméhna.

.carousel('next')

Siklus ka item salajengna.

Kajadian

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">).

$('#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 kawilang posisina, 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, iwal position: fixed;on .affix, pikeun kelas ieu sorangan (bebas tina plugin ieu) pikeun nanganan posisi sabenerna.

Ieu kumaha plugin affix jalanna:

1. Pikeun ngamimitian, plugin nambihkeun .affix-toppikeun 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 tempat .affixngagantian .affix-topjeung set position: 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".

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.