Overview

Mumwe nemumwe kana kuunganidzwa

Maplugins anogona kuverengerwa ega (uchishandisa Bootstrap's ega *.jsmafaera), kana ese kamwechete (uchishandisa bootstrap.jskana minified bootstrap.min.js).

Data attribute

Unogona kushandisa ese Bootstrap plugins chete kuburikidza neiyo markup API pasina kunyora mutsara mumwechete weJavaScript. Iyi ndiyo yekutanga-kirasi API yeBootstrap uye inofanirwa kuve yako yekutanga kufunga kana uchishandisa plugin.

Izvozvo zvakati, mune mamwe mamiriro ezvinhu zvingave zvinodiwa kudzima basa iri. Naizvozvo, isu tinopawo kugona kudzima iyo data attribute API nekusunungura zvese zviitiko pagwaro rakaiswa mazita ne data-api. Izvi zvinotaridzika seizvi:

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

Neimwe nzira, kunanga imwe plugin, ingo sanganisira zita replugin sezita rezita pamwe chete nedata-api namespace seizvi:

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

Purogiramu yepurogiramu

Isu tinotenda zvakare kuti unofanirwa kukwanisa kushandisa ese Bootstrap plugins kuburikidza neJavaScript API. MaAPI ese eruzhinji inzira imwechete, inobatika, uye inodzosa kuunganidzwa kwaitwa.

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

Nzira dzese dzinofanirwa kugamuchira chinhu chekusarudza sarudzo, tambo inonangana neimwe nzira, kana hapana (iyo inotanga plugin ine default maitiro):

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

Imwe neimwe plugin zvakare inofumura mugadziri wayo mbishi pachivakwa Constructor: $.fn.popover.Constructor. Kana iwe uchida kuwana imwe plugin muenzaniso, itore zvakananga kubva kune chinhu: $('[rel="popover"]').data('popover').

Default settings

Unogona kushandura zvigadziriso zveplugin nekugadzirisa chinhu cheplugin Constructor.DEFAULTS:

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

Hapana kunetsana

Dzimwe nguva zvinodikanwa kushandisa Bootstrap plugins nemamwe maUI maficha. Mumamiriro ezvinhu aya, kudhumhana kwemazita kunogona kuitika dzimwe nguva. Kana izvi zvikaitika, unogona kufonera .noConflictplugin yaunoda kudzorera kukosha kwayo.

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

Zviitiko

Bootstrap inopa zviitiko zvetsika kune akawanda plugins 'akasarudzika zviito. Kazhinji, izvi zvinouya muchimiro chechirevo chisingaperi uye chekare - apo chisingaperi (ex. show) chinotangwa pakutanga kwechiitiko, uye chimiro chayo chechirevo chekare (ex. shown) chinotangwa pakupedzwa kwechiito.

Kubva pa3.0.0, zviitiko zvese zveBootstrap zvine mazita.

Zvose zvisingagumi zviitiko zvinopa preventDefaultkushanda. Izvi zvinopa kugona kumisa kuitwa kwechiito chisati chatanga.

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

Nhamba dzeshanduro

Iyo vhezheni yeimwe neimwe yeBootstrap's jQuery plugins inogona kuwanikwa kuburikidza nemudziyo wemugadziri weplugin VERSION. Semuenzaniso, kune iyo tooltip plugin:

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

Hapana zvakakosha zvinodzokera kana JavaScript yakadzimwa

Bootstrap's plugins haidzoke kumashure zvakanyanya nenyasha kana JavaScript yakadzimwa. Kana iwe uine hanya neruzivo rwemushandisi mune iyi kesi, shandisa <noscript>kutsanangura mamiriro acho (uye maitiro ekuitazve JavaScript) kune vashandisi vako, uye/kana wedzera yako wega yekudonha.

Transitions transition.js

Nezvekuchinja

Kuti uite shanduko yakapusa, sanganisira transition.jskamwe chete padivi pemamwe mafaera eJS. Kana uri kushandisa compiled (kana minified) bootstrap.js, hapana chikonzero chekuisa izvi-zvatovepo.

Chii chiri mukati

Transition.js mubatsiri wekutanga transitionEndwezviitiko pamwe neCSS transition emulator. Inoshandiswa nemamwe maplugins kutarisa CSS shanduko yerutsigiro uye kubata yakarembera shanduko.

Kudzima shanduko

Shanduko dzinogona kuvharwa pasi rose uchishandisa inotevera JavaScript snippet, iyo inofanirwa kuuya mushure transition.js(kana bootstrap.js, bootstrap.min.jssezvazvingave) yatakura:

$.support.transition = false

Modals modal.js

Modals inogadziridzwa, asi inoshanduka, dialog inokurudzira ine hushoma hunodiwa mashandiro uye smart defaults.

Nekuda kwekuti HTML5 inotsanangura sei semantics yayo, iyo autofocusHTML hunhu haina mhedzisiro muBootstrap modal. Kuti uwane maitiro akafanana, shandisa imwe tsika JavaScript:

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

Mienzaniso

Muenzaniso wakasimba

A revered modal ine musoro, muviri, uye seti yezviito munyasi.

<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

Shandura modal kuburikidza neJavaScript nekudzvanya bhatani riri pazasi. Ichatsvedza pasi uye kupera mukati kubva kumusoro kwepeji.

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

Optional sizes

Modals dzine saizi mbiri dzekusarudzika, dzinowanikwa kuburikidza nemodhifita makirasi kuti aiswe pane .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>

Bvisa animation

Kune ma modal anongooneka pane kudzima kuti aone, bvisa .fadekirasi kubva pane yako modal markup.

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

Kushandisa grid system

Kuti utore mukana weBootstrap grid system mukati me modal, ingori nest .rows mukati .modal-bodyuye wobva washandisa yakajairika grid system makirasi.

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

Kusiyanisa modal zvemukati zvichibva pane trigger bhatani

Iva neboka remabhatani anokonzeresa modal imwe chete, iine zvinhu zvakasiyana zvishoma? Shandisa event.relatedTargetuye HTML data-*hunhu (pamwe kuburikidza nejQuery ) kusiyanisa zviri mukati me modal zvichienderana nekuti bhatani ripi rakadzvanywa. Ona iyo Modal Zviitiko zvinyorwa zveruzivo pa 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)
})

Usage

Iyo modal plugin inoshandura yako yakavanzika yemukati paunoda, kuburikidza nedata hunhu kana JavaScript. Iyo inowedzerawo .modal-openkune <body>yekupfuura default kupuruzira maitiro uye inogadzira .modal-backdropyekupa yekudzvanya nzvimbo yekudzinga yakaratidzwa modal kana uchidzvanya kunze kwe modal.

Via data hunhu

Shandisa modal pasina kunyora JavaScript. Gadzirisa data-toggle="modal"chinhu chekutonga, sebhatani, pamwe chete nea data-target="#foo"kana href="#foo"kunanga imwe modhi yekushandura.

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

Via JavaScript

Fonera modal ine id myModaline mutsara mumwechete weJavaScript:

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

Options

Sarudzo dzinogona kupfuudzwa kuburikidza nedata hunhu kana JavaScript. Nezve data hunhu, wedzera iyo sarudzo zita ku data-, semu data-backdrop="".

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

Nzira

.modal(options)

Inomisa zvirimo zvako se modal. Inobvuma sarudzo dzaungada object.

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

.modal('toggle')

Pamaoko anoshandura modal. Inodzokera kune akafona modal isati yanyatsoratidzwa kana kuvanzwa (kureva kuti shown.bs.modalkana hidden.bs.modalchiitiko chisati chaitika).

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

.modal('show')

Nemaoko anovhura modal. Inodzokera kune akafona modal isati yanyatsoratidzwa (kureva kuti shown.bs.modalchiitiko chisati chaitika).

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

.modal('hide')

Anozvivanza modal. Inodzokera kune akafona modal isati yanyatsovanzwa (kureva kuti hidden.bs.modalchiitiko chisati chaitika).

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

.modal('handleUpdate')

Inogadzirisa nzvimbo ye modal kupikisa scrollbar kana imwe ikaonekwa, izvo zvinoita kuti modal isvetuke kuruboshwe.

Inongodiwa chete kana kureba kwe modal kuchichinja payakavhurika.

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

Zviitiko

Bootstrap's modal kirasi inofumura zviitiko zvishoma zvekukochekera kuita modal mashandiro.

Zvese zviitiko zve modal zvinodzingwa pa modal pachayo (kureva pa <div class="modal">).

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

Dropdowns dropdown.js

Mienzaniso

Wedzera mamenu ekudonha kune chero chinhu neiyi plugin iri nyore, kusanganisira iyo navbar, ma tabo, uye mapiritsi.

Mukati menavbar

Mukati memapiritsi

Usage

Kuburikidza nehunhu hwedhata kana JavaScript, iyo yekudonha plugin inoshandura zvakavanzika zvemukati (mamenu ekudonha) nekuchinja .openkirasi pane yevabereki rondedzero chinhu.

Pane nharembozha, kuvhura kudonhedza kunowedzera .dropdown-backdropsenzvimbo yepombi yekuvhara mamenu ekudonha kana uchibaya kunze kwemenyu, chinodiwa cherutsigiro chakakodzera cheIOS. Izvi zvinoreva kuti kuchinja kubva pane yakavhurika yekudonhedza menyu kuenda kune yakasiyana yekudonha menyu kunoda imwe tepi panharembozha.

Ongorora: data-toggle="dropdown"Humwe hunhu hunovimbwa nahwo pakuvhara mamenu ekudonha padanho rekushandisa, saka ipfungwa yakanaka kugara uchiishandisa.

Via data hunhu

Wedzera data-toggle="dropdown"kune chinongedzo kana bhatani kuti uchinje kudonhedza pasi.

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

Kuti uchengetedze maURL akazara nemabhatani ekubatanidza, shandisa data-targethunhu pachinzvimbo che 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>

Via JavaScript

Fonera zvinodonha kuburikidza neJavaScript:

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

Options

Hapana

Nzira

$().dropdown('toggle')

Shandura menyu yekudonhedza yakapihwa navbar kana tabbed navigation.

Zviitiko

Zvese zviitiko zvekudonhedza zvinodzingwa kune .dropdown-menu's mubereki element.

Zviitiko zvese zvekudonhedza zvine relatedTargetpfuma, iyo kukosha kwayo ndeye toggling anchor element.

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

ScrollSpy scrollspy.js

Muenzaniso mu navbar

Iyo ScrollSpy plugin ndeyekugadzirisa otomatiki zvinangwa zve nav zvichienderana nenzvimbo yekupumburudza. Skrodza nzvimbo iri pazasi pebhari uye tarisa iyo inoshanda kirasi shanduko. Izvo zvinodonhedza sub zvinhu zvicharatidzwa zvakare.

Usage

Inoda nzvimbo inodiwa

Hazvina mhosva kuti nzira yekushandisa sei, scrollspy inoda kushandiswa position: relative;kwechinhu chauri kuongorora. Kazhinji iyi ndiyo <body>. Paunenge uchipuruzira pane zvimwe zvinhu zvisiri izvo <body>, ita shuwa kuti une heightseti uye overflow-y: scroll;yaiswa.

Via data hunhu

Kuti uwedzere nyore scrollspy maitiro kune yako topbar navigation, wedzera data-spy="scroll"kune chinhu chaunoda kunosora (kazhinji ichi chingave icho <body>). Wobva wawedzera data-targethunhu neID kana kirasi yemubereki chinhu cheBootstrap .navchikamu.

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>

Via JavaScript

Mushure mekuwedzera position: relative;muCSS yako, fonera iyo scrollspy kuburikidza neJavaScript:

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

Nzira

.scrollspy('refresh')

Paunenge uchishandisa scrollspy pamwe nekuwedzera kana kubvisa zvinhu kubva kuDOM, iwe unozofanirwa kufonera nzira yekuzorodza senge:

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

Options

Sarudzo dzinogona kupfuudzwa kuburikidza nedata hunhu kana JavaScript. Nezve data hunhu, wedzera iyo sarudzo zita ku data-, semu data-offset="".

Zviitiko

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

Togglable tabs tab.js

Muenzaniso tabs

Wedzera nekukurumidza, kusimba kwetabhu kushanda kwekuchinja kuburikidza nemapaneru ezvemukati zvemukati, kunyangwe kuburikidza nekudonhedza menyu. Nested tabs haatsigirwe.

Usage

Gonesa tabable tabs kuburikidza neJavaScript (tebhu yega yega inoda kuvhurwa yega):

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

Iwe unogona kumisa ma tabo ega ega munzira dzinoverengeka:

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

Unogona kumisikidza tebhu kana piritsi kufamba usinganyore chero JavaScript nekungotsanangura data-toggle="tab"kana data-toggle="pill"pane chinhu. Kuwedzera iyo navuye nav-tabsmakirasi kune iyo tebhu ulichashandisa iyo Bootstrap tebhu styling , uchiwedzera iyo navuye nav-pillsmakirasi anozoshandisa mapiritsi styling .

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

Fade effect

Kuita kuti ma tabo asvike mukati, wedzera .fadekune imwe neimwe .tab-pane. Yekutanga tebhu pani inofanirawo .inkuita kuti zvekutanga zvionekwe.

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

Nzira

$().tab

Inomisikidza chinhu chetabhu uye mudziyo wemukati. Tab inofanirwa kunge iine data-targetkana hrefyakanangana nemudziyo node muDOM. Mumienzaniso iri pamusoro, ma tabs ndiwo <a>s ane data-toggle="tab"hunhu.

.tab('show')

Inosarudza tabhu yakapihwa uye inoratidza zvayakabatana nazvo. Chero imwe tab yakambosarudzwa inove isina kusarudzwa uye zvine chekuita nazvo zvakavanzwa. Inodzokera kumunhu arikufona tebhu isati yanyatsoratidzwa (kureva kuti shown.bs.tabchiitiko chisati chaitika).

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

Zviitiko

Kana uchiratidza tebhu nyowani, zviitiko zvinopisa nenzira inotevera:

1. hide.bs.tab(pane ikozvino inoshanda tab)
2. show.bs.tab(paicha-kuratidzwa tab)
3. hidden.bs.tab(paiyo yapfuura inoshanda tebhu, yakafanana hide.bs.tabneyechiitiko)
4. shown.bs.tab(paiyo ichangobva-kushanda ichangoratidzwa tab, yakafanana show.bs.tabneyechiitiko)

Kana pasina tebhu yanga yatoshanda, saka iyo hide.bs.tabuye hidden.bs.tabzviitiko hazvizodzingwa.

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})

Tooltips tooltip.js

Yakafuridzirwa neyakanakisa jQuery.tipsy plugin yakanyorwa naJason Frame; Maturusi ivhezheni yakagadziridzwa, isingavimbi nemifananidzo, shandisa CSS3 yemifananidzo, uye data-maitiro ekuchengetera mazita enzvimbo.

Zvishandiso zvine mazita akareba zero hazvimbotaridzwa.

Mienzaniso

Hover pamusoro pemalink ari pasi apa kuti uone maturusi ekushandisa:

Static tooltip

Sarudzo ina dziripo: kumusoro, kurudyi, pasi, uye kuruboshwe zvakaenderana.

Nzira ina

<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()
})

Usage

Iyo tooltip plugin inogadzira zvirimo uye markup pane inodiwa, uye neyakagadzika nzvimbo matipi eturusi mushure meiyo trigger element.

Tamba chishandiso kuburikidza neJavaScript:

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

Markup

Mucherechedzo unodiwa wetipi yeturusi ingori datahunhu uye titlepane HTML chinhu chaunoshuvira kuve nechokushandisa. Iyo yakagadzirwa markup yeturusitip iri nyore, kunyangwe ichida chinzvimbo (nekumisikidza, yakarongedzwa topneplugin).

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

Options

Sarudzo dzinogona kupfuudzwa kuburikidza nedata hunhu kana JavaScript. Nezve data hunhu, wedzera iyo sarudzo zita ku data-, semu data-animation="".

Nzira

$().tooltip(options)

Inonamira chibatiso cheturusi kune muunganidzwa wezvinhu.

.tooltip('show')

Inoratidza chekushandisa chechinhu. Inodzokera kumunhu arikufona tip rekushandisa risati ranyatsoratidzwa (kureva kuti shown.bs.tooltipchiitiko chisati chaitika). Izvi zvinoonekwa se "manual" inokonzeresa yeturusitip. Zvishandiso zvine mazita akareba zero hazvimbotaridzwa.

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

.tooltip('hide')

Inovanza zano rekushandisa. Inodzokera kune ari kufona chitupa chisati chavanzwa (kureva kuti hidden.bs.tooltipchiitiko chisati chaitika). Izvi zvinoonekwa se "manual" inokonzeresa yeturusitip.

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

.tooltip('toggle')

Inoshandura matipi echinhu. Inodzokera kune ari kufona chitupa chisati charatidzwa kana kuvanzwa (kureva kuti shown.bs.tooltipkana hidden.bs.tooltipchiitiko chisati chaitika). Izvi zvinoonekwa se "manual" inokonzeresa yeturusitip.

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

.tooltip('destroy')

Inoviga nekuparadza mudziyo wekushandisa. Zvishandiso zvinoshandisa kugovera (zvinogadzirwa pachishandiswa sarudzoselector ) hazvingaparadzwi pachega pazvikamu zvinokonzeresa zvedzinza .

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

Zviitiko

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

Popovers popover.js

Wedzera zvidiki zvakafukidzwa zvemukati, sezviya zviri paPadad, kune chero chinhu cheimba yechipiri ruzivo.

Mapopovers ane zvese zita uye zvirimo zviri zero-kureba hazvimbotaridzwa.

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

Mienzaniso

Static popover

Sarudzo ina dziripo: kumusoro, kurudyi, pasi, uye kuruboshwe zvakaenderana.

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>

Nzira ina

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

Ramba paunodzvanya kunotevera

Shandisa focuschinokonzeresa kudzinga mapopovers pakudzvanya kunotevera kunoitwa nemushandisi.

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

Usage

Gonesa mapopovers kuburikidza neJavaScript:

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

Options

Sarudzo dzinogona kupfuudzwa kuburikidza nedata hunhu kana JavaScript. Nezve data hunhu, wedzera iyo sarudzo zita ku data-, semu data-animation="".

Nzira

$().popover(options)

Inotanga popover yekuunganidza zvinhu.

.popover('show')

Inoratidza kubuda kwechimwe chinhu. Inodzokera kumunhu arikufona popover isati yanyatsoratidzwa (kureva kuti shown.bs.popoverchiitiko chisati chaitika). Izvi zvinoonekwa se "manual" inokonzeresa yepopover. Mapopovers ane zvese zita uye zvirimo zviri zero-kureba hazvimbotaridzwa.

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

.popover('hide')

Inovanza kubuda kwechinhu. Inodzokera kune ari kufona popover isati yanyatsovanzwa (kureva hidden.bs.popoverchiitiko chisati chaitika). Izvi zvinoonekwa se "manual" inokonzeresa yepopover.

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

.popover('toggle')

Inoshandura kubuda kwechinhu. Inodzokera kumunhu arikufona popover isati yanyatsoratidzwa kana kuvanzwa (kureva kuti shown.bs.popoverkana hidden.bs.popoverchiitiko chisati chaitika). Izvi zvinoonekwa se "manual" inokonzeresa yepopover.

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

.popover('destroy')

Inoviga uye inoparadza popover yechinhu. Mapopover anoshandisa kugovera (ayo anogadzirwa pachishandiswa sarudzoselector ) haagone kuparadzwa ega pane zvinokonzeresa zvinhu .

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

Zviitiko

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

Mameseji echenjedzo alert.js

Muenzaniso chenjedzo

Wedzera mashandiro ekudzinga kune ese mameseji echenjedzo ane plugin iyi.

Paunenge uchishandisa .closebhatani, anofanira kunge ari mwana wekutanga weiyo .alert-dismissibleuye hapana mavara emukati anogona kuuya pamberi payo mumarkup.

Usage

Ingo wedzera data-dismiss="alert"kune yako bhatani rekuvhara kuti upe otomatiki yambiro yepedyo kushanda. Kuvhara yambiro kunoibvisa kubva kuDOM.

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

Kuti zviziviso zvako zvishandise animation paunenge uchivhara, ita shuwa kuti vane.fade uye .inmakirasi atoiswa kwavari.

Nzira

$().alert()

Inoita yambiro yekuteerera kune zviitiko zvekudzvanya pane zvedzinza zvine data-dismiss="alert"hunhu. (Hazvina basa kana uchishandisa iyo data-api's auto-initialization.)

$().alert('close')

Inovhara yambiro nekuibvisa muDOM. Kana .fadeuye.in makirasi aripo pane chinhu, yambiro inopera isati yabviswa.

Zviitiko

Bootstrap's alert plugin inofumura zviitiko zvishoma zvekukochekera mune yambiro mashandiro.

$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})

Mabhatani bhatani.js

Ita zvakawanda nemabhatani. Kudzora bhatani rinotaura kana kugadzira mapoka emabhatani ezvimwe zvinhu zvakaita sematurusi.

Stateful

Wedzeradata-loading-text="Loading..." kushandisa mamiriro ekurodha pane bhatani.

Ichi chimiro chakaregwa kubvira v3.3.5 uye chakabviswa muv4.

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

Single toggle

Wedzera data-toggle="button"ku activate toggling pane rimwe bhatani.

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

Checkbox / Radio

Wedzera data-toggle="buttons"kune .btn-groupine cheki bhokisi kana redhiyo inopinza kuti igone kuchinjika mumataera avo.

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

Nzira

$().button('toggle')

Toggles push state. Inopa bhatani kutaridzika kuti rakaitwa.

$().button('reset')

Reset mamiriro ebhatani - kuchinjanisa mavara kune mavara ekutanga. Iyi nzira ndeye asynchronous uye inodzoka kugadziridza kusati kwanyatsopera.

$().button(string)

Chinja mavara kune chero data yakatsanangurwa mamiriro emavara.

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

Collapse collapse.js

Flexible plugin inoshandisa mashoma emakirasi kuitira nyore kuchinja maitiro.

Muenzaniso

Dzvanya mabhatani ari pazasi kuratidza uye kuviga chimwe chinhu kuburikidza nekuchinja kwekirasi:

• .collapseanovanza zviri mukati
• .collapsinginoshandiswa panguva yekuchinja
• .collapse.ininoratidza zvirimo

Unogona kushandisa chinongedzo chine hrefhunhu, kana bhatani rine data-targethunhu. Muzviitiko zvose izvi, data-toggle="collapse"zvinodiwa.

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

Accordion muenzaniso

Wedzera maitiro ekudonha kuti ugadzire accordion nechikamu chepaneru.

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

Izvo zvakare zvinogoneka kuchinjanisa kunze .panel-bodys ne .list-groups.

Usage

Iyo yekudonha plugin inoshandisa mashoma makirasi kubata inorema kusimudza:

• .collapseinovanza zviri mukati
• .collapse.ininoratidza zviri mukati
• .collapsinginowedzerwa kana shanduko yatanga, uye inobviswa kana yapera

Aya makirasi anogona kuwanikwa mu component-animations.less.

Via data hunhu

Ingo wedzera data-toggle="collapse"uye a data-targetkune chinhu kuti upe otomatiki kutonga kwechinhu chinoputika. Hunhu data-targethunogamuchira CSS selector yekushandisa iyo kuputsika. Iva nechokwadi chekuwedzera kirasi collapsekune chinhu chinoputika. Kana uchida kuti risavhurika, wedzera imwe kirasi in.

Kuwedzera accordion-senge boka manejimendi kune inodonha kutonga, wedzera iyo data hunhu data-parent="#selector". Tarisa kune demo kuti uone izvi mukuita.

Via JavaScript

Vhura nemaoko ne:

$('.collapse').collapse()

Options

Sarudzo dzinogona kupfuudzwa kuburikidza nedata hunhu kana JavaScript. Nezve data hunhu, wedzera iyo sarudzo zita ku data-, semu data-parent="".

Nzira

.collapse(options)

Inobatisa zvirimo sechinhu chinogoneka. Inobvuma sarudzo dzaungada object.

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

.collapse('toggle')

Inoshandura chinhu chinopeta kuti chiratidze kana kuvanzwa. Inodzokera kune ari kufona chinhu chinopeta chisati charatidzwa kana kuvanzwa (kureva kuti shown.bs.collapsekana hidden.bs.collapsechiitiko chisati chaitika).

.collapse('show')

Inoratidza chinhu chinopeta. Inodzokera kumunhu arikufona chinhu chinopeta chisati charatidzwa (kureva kuti shown.bs.collapsechiitiko chisati chaitika).

.collapse('hide')

Inoviga chinhu chinopeta. Inodzokera kumunhu arikufona chinhu chinopeta chisati chavanzwa (kureva kuti hidden.bs.collapsechiitiko chisati chaitika).

Zviitiko

Bootstrap's kudonha kirasi inofumura zviitiko zvishoma zvekukochekera mukudonha kushanda.

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

Carousel carousel.js

Chikamu chemasiraidhi chekuchovha bhasikoro kuburikidza nezvinhu, senge carousel. Nested carousels haatsigirwe.

Mienzaniso

Previous Next

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

Optional captions

Wedzera zvinyorwa kune masiraidhi ako zviri nyore nechinhu .carousel-captionchiri mukati mechero .item. Isa ingangoita chero sarudzo yeHTML mukati imomo uye inozorongedzerwa otomatiki uye kufomatidzwa.

Kutanga masiraidhi

Nulla vitae elit libero, pharetra augue mollis interdum.

Siraidhi yechipiri

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Siraidhi yechitatu

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

Previous Next

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

Usage

Multiple carousels

Carousels inoda kushandiswa kweiyo idpamudziyo wekunze (iyo .carousel) kuti carousel control ishande nemazvo. Paunenge uchiwedzera akawanda macarousels, kana kana uchichinja carousel's id, ita shuwa yekuvandudza akakodzera kudzora.

Via data hunhu

Shandisa data hunhu kudzora zviri nyore chinzvimbo checarousel. data-slideinogamuchira mazwi makuru prevkana next, iyo inoshandura nzvimbo yemasiraidhi maererano nenzvimbo yayo yazvino. Neimwe nzira, shandisa data-slide-tokupfuudza masiraidhi indekisi ku carousel data-slide-to="2", iyo inoshandura nzvimbo yemasiraidhi kuenda kune imwe index inotanga na 0.

Hunhu data-ride="carousel"hunoshandiswa kumaka carousel seanorarama kutanga pakurodha peji. Haikwanise kushandiswa pamwe chete ne (zvisina basa uye zvisina basa) zvakajeka JavaScript kutanga kwekarosi imwechete.

Via JavaScript

Fonera carousel nemaoko ne:

$('.carousel').carousel()

Options

Sarudzo dzinogona kupfuudzwa kuburikidza nedata hunhu kana JavaScript. Nezve data hunhu, wedzera iyo sarudzo zita ku data-, semu data-interval="".

Nzira

.carousel(options)

Inotanga carousel ine sarudzo yesarudzo objectuye inotanga kuchovha bhasikoro kuburikidza nezvinhu.

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

.carousel('cycle')

Kutenderera nepakati pezvinhu zvecarousel kubva kuruboshwe kuenda kurudyi.

.carousel('pause')

Inomisa carousel kubva kubhasikoro kuburikidza nezvinhu.

.carousel(number)

Inotenderedza carousel kune imwe furemu (0 yakavakirwa, yakafanana neyakarongwa).

.carousel('prev')

Kutenderera kune chinhu chapfuura.

.carousel('next')

Kutenderera kuenda kuchinhu chinotevera.

Zviitiko

Bootstrap's carousel kirasi inofumura zviitiko zviviri zvekukochekera mukuita kwecarousel.

Zviitiko zviviri izvi zvine zvimwe zvinotevera:

• direction: Nzira iyo carousel iri kutsvedza (zvichida "left"kana "right").
• relatedTarget: Chinhu cheDOM chiri kutsvedzerwa panzvimbo sechinhu chinoshanda.

Zvese zviitiko zvecarousel zvinodzingwa pacarousel pachayo (kureva pa <div class="carousel">).

$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
})

Affix affix.js

Muenzaniso

Iyo affix plugin inobatidza nekudzima position: fixed;, kutevedzera maitiro anowanikwa ne position: sticky;. Iyo subnavigation kurudyi idemo mhenyu yeaffix plugin.

Usage

Shandisa iyo affix plugin kuburikidza ne data hunhu kana nemaoko neJavaScript yako. Mune ese ari maviri mamiriro, iwe unofanirwa kupa CSS yekumisikidza uye hupamhi hwezvako zvakanamirwa.

Ongorora: Usashandise affix plugin pane chinhu chiri muchinhu chakamira zvakati, senge koramu yakadhonzwa kana kusundidzirwa, nekuda kweSafari inopa bug .

Positioning kuburikidza neCSS

Iyo affix plugin inochinja pakati pemakirasi matatu, imwe neimwe ichimiririra imwe nyika: .affix, .affix-top, uye .affix-bottom. Iwe unofanirwa kupa masitaera, kunze kwe position: fixed;on .affix, kune aya makirasi iwe pachako (yakazvimirira yeiyi plugin) kubata izvo chaizvo zvinzvimbo.

Heino mashandiro anoita iyo affix plugin:

1. Kutanga, iyo plugin inowedzera .affix-topkuratidza chinhu chiri munzvimbo yayo yepamusoro-yakawanda. Panguva ino hapana CSS chinzvimbo chinodiwa.
2. Kupfuura uchipfuura chinhu chaunoda kunamirwa kunofanirwa kukonzeresa iko kumisa chaiko. Apa ndipo .affixpanotsiva .affix-topuye kuseta position: fixed;(inopihwa neBootstrap's CSS).
3. Kana pazasi offset ichitsanangurwa, kupuruzira yapfuura inofanira kutsiva .affixne .affix-bottom. Sezvo maoffsets ari sarudzo, kuseta imwe kunoda kuti uise CSS yakakodzera. Muchiitiko ichi, wedzera position: absolute;kana zvichidiwa. Iyo plugin inoshandisa iyo data hunhu kana JavaScript sarudzo yekuona pekuisa chinhu kubva ipapo.

Tevedza matanho ari pamusoro apa kuti uise CSS yako kune imwe yesarudzo dzekushandisa pazasi.

Via data hunhu

Kuti uwedzere nyore affix maitiro kune chero chinhu, ingo wedzera data-spy="affix"kune chinhu chaunoda kunosora. Shandisa maoffset kutsanangura nguva yekushandura pining yechinhu.

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

Via JavaScript

Fonera iyo affix plugin kuburikidza neJavaScript:

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

Options

Sarudzo dzinogona kupfuudzwa kuburikidza nedata hunhu kana JavaScript. Nezve data hunhu, wedzera iyo sarudzo zita ku data-, semu data-offset-top="200".

Nzira

.affix(options)

Inobatisa zvirimo zvako sezvakanamirwa. Inobvuma sarudzo dzaungada object.

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

.affix('checkPosition')

Inoverengerazve mamiriro eiyo affix zvichienderana nehukuru, chinzvimbo, uye chinzvimbo chemupumburu wezvinhu zvinoenderana. Iyo .affix, .affix-top, uye .affix-bottommakirasi anowedzerwa kana kubviswa kubva pane zvakanamirwa zvinoenderana nenyika itsva. Iyi nzira inoda kudaidzwa pese kana zviyero zvezvakanamirwa kana chinhu chinotarirwa chashandurwa, kuve nechokwadi chekumisikidzwa kwezvakanamirwa.

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

Zviitiko

Bootstrap's affix plugin inofumura zviitiko zvishoma zvekukochekera mune affix mashandiro.