Muhtasari

Ya mtu binafsi au iliyokusanywa

Programu-jalizi zinaweza kujumuishwa kibinafsi (kwa kutumia *.jsfaili za kibinafsi za Bootstrap), au zote mara moja (kwa kutumia bootstrap.jsau minified bootstrap.min.js).

Sifa za data

Unaweza kutumia programu-jalizi zote za Bootstrap kupitia API ya ghafi bila kuandika safu moja ya JavaScript. Hii ni API ya daraja la kwanza ya Bootstrap na inapaswa kuwa fikira yako ya kwanza unapotumia programu-jalizi.

Hiyo ilisema, katika hali zingine inaweza kuhitajika kuzima utendakazi huu. Kwa hivyo, tunatoa pia uwezo wa kuzima API ya sifa ya data kwa kufungia matukio yote kwenye hati iliyo na nafasi ya majina data-api. Hii inaonekana kama hii:

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

Vinginevyo, ili kulenga programu-jalizi maalum, jumuisha tu jina la programu-jalizi kama nafasi ya majina pamoja na nafasi ya majina ya data-api kama hii:

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

Programu ya API

Pia tunaamini kuwa unapaswa kutumia programu jalizi zote za Bootstrap kupitia JavaScript API. API zote za umma ni njia moja, zinazoweza kuunganishwa, na hurejesha mkusanyiko uliochukuliwa hatua.

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

Mbinu zote zinapaswa kukubali chaguo la chaguo la chaguo, mfuatano ambao unalenga mbinu fulani, au chochote (ambacho huanzisha programu-jalizi yenye tabia chaguo-msingi):

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

Kila programu-jalizi pia inafichua mjenzi wake mbichi kwenye Constructormali: $.fn.popover.Constructor. Ikiwa ungependa kupata mfano fulani wa programu-jalizi, irejeshe moja kwa moja kutoka kwa kipengele: $('[rel="popover"]').data('popover').

Mipangilio chaguomsingi

Unaweza kubadilisha mipangilio chaguomsingi ya programu-jalizi kwa kurekebisha kipengee cha programu-jalizi Constructor.DEFAULTS:

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

Hakuna mgongano

Wakati mwingine ni muhimu kutumia programu-jalizi za Bootstrap na mifumo mingine ya UI. Katika hali hizi, migongano ya nafasi ya majina inaweza kutokea mara kwa mara. Hili likitokea, unaweza kupiga simu .noConflictkwenye programu-jalizi unayotaka kurejesha thamani yake.

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

Matukio

Bootstrap hutoa matukio maalum kwa vitendo vingi vya kipekee vya programu-jalizi. Kwa ujumla, hizi huja katika umbo lisilo na kikomo na la wakati uliopita - ambapo hali isiyo na kikomo (mf. show) huanzishwa mwanzoni mwa tukio, na umbo lake la zamani la kishirikishi (mf. shown) huanzishwa wakati kitendo kinapokamilika.

Kufikia 3.0.0, matukio yote ya Bootstrap yamewekwa kwa majina.

Matukio yote yasiyo na mwisho hutoa preventDefaultutendaji. Hii hutoa uwezo wa kusimamisha utekelezaji wa kitendo kabla ya kuanza.

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

Nambari za toleo

Toleo la kila programu jalizi ya jQuery ya Bootstrap linaweza kufikiwa kupitia sifa ya VERSIONkijenzi cha programu-jalizi. Kwa mfano, kwa programu-jalizi ya zana:

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

Hakuna njia mbadala maalum wakati JavaScript imezimwa

Programu-jalizi za Bootstrap hazirudi nyuma kwa uzuri haswa wakati JavaScript imezimwa. Iwapo unajali kuhusu matumizi ya mtumiaji katika kesi hii, tumia <noscript>kueleza hali (na jinsi ya kuwezesha tena JavaScript) kwa watumiaji wako, na/au ongeza vikwazo vyako maalum.

Transitions transition.js

Kuhusu mabadiliko

Kwa athari rahisi za mpito, jumuisha transition.jsmara moja pamoja na faili zingine za JS. Ikiwa unatumia compiled (au minified) bootstrap.js, hakuna haja ya kujumuisha hii - tayari iko.

Kuna nini ndani

Transition.js ni msaidizi wa kimsingi wa transitionEndmatukio na vile vile emulator ya mpito ya CSS. Inatumiwa na programu-jalizi zingine kuangalia usaidizi wa mpito wa CSS na kupata mabadiliko yanayoning'inia.

Inalemaza mabadiliko

Mabadiliko yanaweza kuzimwa duniani kote kwa kutumia kijisehemu kifuatacho cha JavaScript, ambacho lazima kije baada ya transition.js( bootstrap.jsau bootstrap.min.js, kama itakavyokuwa) kupakiwa:

$.support.transition = false

Modals modal.js

Miundo imeratibiwa, lakini rahisi, vidokezo vya mazungumzo na utendakazi wa chini unaohitajika na chaguomsingi mahiri.

Kutokana na jinsi HTML5 inavyofafanua semantiki zake, autofocussifa ya HTML haina athari katika miundo ya Bootstrap. Ili kufikia athari sawa, tumia JavaScript maalum:

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

Mifano

Mfano tuli

Modali inayotekelezwa yenye kichwa, mwili, na seti ya vitendo katika kijachini.

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

Onyesho la moja kwa moja

Geuza modali kupitia JavaScript kwa kubofya kitufe kilicho hapa chini. Itateleza chini na kufifia kutoka juu ya ukurasa.

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

Ukubwa wa hiari

Moduli zina saizi mbili za hiari, zinapatikana kupitia madarasa ya kurekebisha kuwekwa kwenye .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>

Ondoa uhuishaji

Kwa moduli zinazoonekana tu badala ya kufifia ili kutazamwa, ondoa .fadedarasa kutoka kwa alama yako ya modal.

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

Kutumia mfumo wa gridi ya taifa

Ili kuchukua fursa ya mfumo wa gridi ya Bootstrap ndani ya modali, nest .rows ndani ya .modal-bodykisha utumie madarasa ya mfumo wa gridi ya kawaida.

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

Kubadilisha maudhui ya modali kulingana na kitufe cha kichochezi

Je! una vifungo vingi ambavyo vyote huanzisha muundo sawa, na yaliyomo tofauti kidogo tu? Tumia event.relatedTargetna sifa za HTMLdata-* (labda kupitia jQuery ) ili kubadilisha yaliyomo kwenye modali kulingana na kitufe kilichobofya. Tazama hati za Matukio ya Modal kwa maelezo kuhusu 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)
})

Matumizi

Programu-jalizi ya modal hugeuza maudhui yako yaliyofichwa inapohitajika, kupitia sifa za data au JavaScript. Pia huongeza .modal-openkwa <body>kubatilisha tabia ya kusogeza chaguo-msingi na hutoa a .modal-backdropkutoa eneo la kubofya kwa ajili ya kuondoa miundo iliyoonyeshwa unapobofya nje ya modali.

Kupitia sifa za data

Washa modali bila kuandika JavaScript. Weka data-toggle="modal"kwenye kipengele cha kidhibiti, kama kitufe, pamoja na data-target="#foo"au href="#foo"kulenga modi mahususi ya kugeuza.

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

Kupitia JavaScript

Piga modali na kitambulisho myModalna safu moja ya JavaScript:

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

Chaguo

Chaguzi zinaweza kupitishwa kupitia sifa za data au JavaScript. Kwa sifa za data, ongeza jina la chaguo kwa data-, kama katika data-backdrop="".

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

Mbinu

.modal(options)

Huwasha maudhui yako kama modali. Inakubali chaguo za hiari object.

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

.modal('toggle')

Hugeuza modali mwenyewe. Hurejesha kwa mpigaji simu kabla modali haijaonyeshwa au kufichwa (yaani kabla ya tukio shown.bs.modalau hidden.bs.modaltukio).

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

.modal('show')

Hufungua modali mwenyewe. Hurejesha kwa mpigaji simu kabla modali haijaonyeshwa (yaani kabla ya shown.bs.modaltukio kutokea).

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

.modal('hide')

Huficha modali mwenyewe. Hurejesha kwa mpigaji simu kabla modali haijafichwa (yaani kabla ya hidden.bs.modaltukio kutokea).

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

.modal('handleUpdate')

Hurekebisha mkao wa modali ili kukabiliana na upau wa kusogeza iwapo mtu atatokea, jambo ambalo lingefanya modali kuruka upande wa kushoto.

Inahitajika tu wakati urefu wa modal unabadilika wakati imefunguliwa.

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

Matukio

Darasa la modali la Bootstrap linafichua matukio machache ya kuunganisha kwenye utendakazi wa modal.

Matukio yote ya modal yanarushwa kwa modali yenyewe (yaani kwenye <div class="modal">).

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

Dropdowns dropdown.js

Mifano

Ongeza menyu kunjuzi kwa karibu chochote ukitumia programu-jalizi hii rahisi, ikijumuisha upau wa uelekezaji, vichupo na vidonge.

Ndani ya upau wa urambazaji

Ndani ya vidonge

Matumizi

Kupitia sifa za data au JavaScript, programu-jalizi kunjuzi hugeuza maudhui yaliyofichwa (menu kunjuzi) kwa kugeuza .opendarasa kwenye kipengee cha orodha kuu.

Kwenye vifaa vya mkononi, kufungua menyu kunjuzi huongeza .dropdown-backdropkama eneo la kugonga kwa ajili ya kufunga menyu kunjuzi unapogonga nje ya menyu, hitaji la usaidizi sahihi wa iOS. Hii inamaanisha kuwa kubadili menyu kunjuzi iliyo wazi hadi menyu kunjuzi tofauti kunahitaji mguso wa ziada kwenye simu ya mkononi.

Kumbuka: data-toggle="dropdown"Sifa hiyo inategemewa kwa kufunga menyu kunjuzi katika kiwango cha programu, kwa hivyo ni wazo nzuri kuitumia kila wakati.

Kupitia sifa za data

Ongeza data-toggle="dropdown"kwenye kiungo au kitufe ili kugeuza menyu kunjuzi.

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

Ili kuweka URLs zikiwa na vitufe vya viungo, tumia data-targetsifa badala ya 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>

Kupitia JavaScript

Piga kushuka kupitia JavaScript:

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

Chaguo

Hakuna

Mbinu

$().dropdown('toggle')

Hugeuza menyu kunjuzi ya upau wa urambazaji au urambazaji wa kichupo.

Matukio

Matukio yote kunjuzi yametupwa kwenye .dropdown-menukipengele cha mzazi.

Matukio yote kunjuzi yana sifa relatedTarget, ambayo thamani yake ni kipengee cha kugeuza nanga.

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

ScrollSpy scrollspy.js

Mfano katika navbar

Programu-jalizi ya ScrollSpy ni ya kusasisha kiotomatiki malengo ya nav kulingana na nafasi ya kusogeza. Tembeza eneo chini ya upau wa urambazaji na utazame mabadiliko ya darasa amilifu. Vipengee vidogo vya kunjuzi vitaangaziwa pia.

Matumizi

Inahitaji nafasi ya jamaa

Haijalishi njia ya utekelezaji, scrollspy inahitaji utumiaji wa position: relative;kitu unachopeleleza. Katika hali nyingi hii ni <body>. Wakati wa kusogeza kwenye vipengee vingine isipokuwa <body>, hakikisha kuwa una heightseti na overflow-y: scroll;kutumika.

Kupitia sifa za data

Ili kuongeza kwa urahisi tabia ya kusongesha kwenye urambazaji wa upau wako wa juu, ongeza data-spy="scroll"kwenye kipengee unachotaka kupeleleza (kawaida hii itakuwa <body>). Kisha ongeza data-targetsifa na kitambulisho au darasa la kipengele kikuu cha kipengele chochote cha Bootstrap .nav.

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>

Kupitia JavaScript

Baada ya kuongeza position: relative;katika CSS yako, piga scrollspy kupitia JavaScript:

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

Mbinu

.scrollspy('refresh')

Unapotumia scrollspy kwa kushirikiana na kuongeza au kuondoa vitu kutoka kwa DOM, utahitaji kupiga njia ya kuburudisha kama hivyo:

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

Chaguo

Chaguzi zinaweza kupitishwa kupitia sifa za data au JavaScript. Kwa sifa za data, ongeza jina la chaguo kwa data-, kama katika data-offset="".

Matukio

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

Vichupo vinavyoweza kugeuzwa tab.js

Vichupo vya mfano

Ongeza utendakazi wa kichupo cha haraka na unaobadilika ili kubadilisha vidirisha vya maudhui ya ndani, hata kupitia menyu kunjuzi. Vichupo vilivyowekwa havitumiki.

Matumizi

Washa vichupo vinavyoweza kutekelezeka kupitia JavaScript (kila kichupo kinahitaji kuamilishwa kivyake):

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

Unaweza kuwezesha tabo binafsi kwa njia kadhaa:

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

Alama

Unaweza kuwezesha urambazaji wa kichupo au kidonge bila kuandika JavaScript yoyote kwa kubainisha data-toggle="tab"au data-toggle="pill"kwa kipengee. Kuongeza navna nav-tabsmadarasa kwenye kichupo kutatumia mtindo wa kichupoul cha Bootstrap , huku kuongeza na madarasa kutatumika mtindo wa kidonge .navnav-pills

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

Fifisha athari

Ili kufanya vichupo kufifia, ongeza .fadekwa kila .tab-pane. Kidirisha cha kichupo cha kwanza lazima pia kiwe na .inmaudhui ya awali kuonekana.

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

Mbinu

$().tab

Huwasha kipengele cha kichupo na kontena ya maudhui. Kichupo kinapaswa kuwa na nodi ya chombo data-targetau inayolenga kwenye DOM. hrefKatika mifano iliyo hapo juu, tabo ni <a>s zilizo na data-toggle="tab"sifa.

.tab('show')

Huchagua kichupo kilichotolewa na kuonyesha maudhui yake yanayohusiana. Kichupo kingine chochote ambacho kilichaguliwa hapo awali kitaacha kuchaguliwa na maudhui yake yanayohusiana yanafichwa. Hurejesha kwa mpigaji kabla kidirisha cha kichupo hakijaonyeshwa (yaani kabla ya shown.bs.tabtukio kutokea).

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

Matukio

Wakati wa kuonyesha kichupo kipya, matukio huwaka kwa mpangilio ufuatao:

1. hide.bs.tab(kwenye kichupo kinachotumika sasa)
2. show.bs.tab(kwenye kichupo cha-kuonyeshwa)
3. hidden.bs.tab(kwenye kichupo amilifu kilichotangulia, sawa na cha hide.bs.tabtukio)
4. shown.bs.tab(kwenye kichupo kipya-kilichoonyeshwa, sawa na cha show.bs.tabtukio)

Ikiwa hakuna kichupo kilichokuwa tayari kinatumika, basi matukio hide.bs.tabna hidden.bs.tabmatukio hayatafutwa.

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

Vidokezo vya zana tip.js

Imehamasishwa na programu-jalizi bora ya jQuery.tipsy iliyoandikwa na Jason Frame; Vidokezo vya zana ni toleo lililosasishwa, ambalo halitegemei picha, tumia CSS3 kwa uhuishaji, na sifa za data kwa hifadhi ya mada ya ndani.

Vidokezo vya zana vyenye vichwa vya urefu sifuri havionyeshwi kamwe.

Mifano

Elea juu ya viungo vilivyo hapa chini ili kuona vidokezo vya zana:

Kidokezo tuli

Chaguzi nne zinapatikana: juu, kulia, chini, na kushoto iliyokaa.

Maelekezo manne

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

Matumizi

Programu-jalizi ya kidokezo huzalisha maudhui na uwekaji alama inapohitajika, na kwa chaguo-msingi vidokezo vya mahali baada ya kipengee cha vianzishaji.

Anzisha kidokezo cha zana kupitia JavaScript:

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

Alama

Alama inayohitajika ya kidokezo ni datasifa tu na titlekwenye kipengee cha HTML ungependa kuwa na kidokezo. Alama inayozalishwa ya kidokezo ni rahisi, ingawa inahitaji nafasi (kwa chaguo-msingi, iliyowekwa topna programu-jalizi).

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

Chaguo

Chaguzi zinaweza kupitishwa kupitia sifa za data au JavaScript. Kwa sifa za data, ongeza jina la chaguo kwa data-, kama katika data-animation="".

Mbinu

$().tooltip(options)

Huambatisha kidhibiti kidokezo kwenye mkusanyiko wa vipengele.

.tooltip('show')

Hufichua kidokezo cha kipengele. Hurejesha kwa mpigaji simu kabla ya kidokezo cha zana kuonyeshwa (yaani kabla ya shown.bs.tooltiptukio kutokea). Hii inachukuliwa kuwa "mwongozo" wa kuchochea wa kidokezo cha zana. Vidokezo vya zana vyenye vichwa vya urefu sifuri havionyeshwi kamwe.

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

.tooltip('hide')

Huficha kidokezo cha kipengele. Hurejesha kwa mpigaji simu kabla ya kidokezo cha zana kufichwa (yaani kabla ya hidden.bs.tooltiptukio kutokea). Hii inachukuliwa kuwa "mwongozo" wa kuchochea wa kidokezo cha zana.

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

.tooltip('toggle')

Hugeuza kidokezo cha kipengee. Hurejesha kwa mpigaji simu kabla ya kidokezo cha zana kuonyeshwa au kufichwa (yaani kabla ya tukio shown.bs.tooltipau hidden.bs.tooltiptukio). Hii inachukuliwa kuwa "mwongozo" wa kuchochea wa kidokezo cha zana.

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

.tooltip('destroy')

Huficha na kuharibu ncha ya zana ya kipengele. Vidokezo vya zana vinavyotumia ugawaji madaraka (ambavyo vimeundwa kwa kutumia chaguo )selector haviwezi kuharibiwa kibinafsi kwenye vipengele vya vichochezi vya kizazi.

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

Matukio

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

Popovers popover.js

Ongeza viwekeleo vidogo vya maudhui, kama vile vilivyo kwenye iPad, kwa kipengele chochote kwa maelezo ya upili.

Popovers ambao mada na maudhui yao ni sifuri kamwe hawaonyeshwi.

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

Mifano

Pover tuli

Chaguzi nne zinapatikana: juu, kulia, chini, na kushoto iliyokaa.

Onyesho la moja kwa moja

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

Maelekezo manne

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

Ondoa kwa kubofya ijayo

Tumia focuskichochezi ili kuondoa popover kwenye mbofyo unaofuata ambao mtumiaji hufanya.

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

Matumizi

Washa popover kupitia JavaScript:

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

Chaguo

Chaguzi zinaweza kupitishwa kupitia sifa za data au JavaScript. Kwa sifa za data, ongeza jina la chaguo kwa data-, kama katika data-animation="".

Mbinu

$().popover(options)

Huanzisha popover kwa mkusanyiko wa vipengele.

.popover('show')

Hufichua kuongezeka kwa kipengele. Hurejesha kwa mpigaji simu kabla popover haijaonyeshwa (yaani kabla ya shown.bs.popovertukio kutokea). Hii inachukuliwa kuwa "mwongozo" wa kuchochea wa popover. Popovers ambao mada na maudhui yao ni sifuri kamwe hawaonyeshwi.

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

.popover('hide')

Huficha popover ya kipengele. Hurejesha kwa mpigaji simu kabla popover haijafichwa (yaani kabla ya hidden.bs.popovertukio kutokea). Hii inachukuliwa kuwa "mwongozo" wa kuchochea wa popover.

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

.popover('toggle')

Hugeuza popover ya kipengele. Hurejesha kwa mpigaji simu kabla popover haijaonyeshwa au kufichwa (yaani kabla ya tukio shown.bs.popoverau hidden.bs.popovertukio). Hii inachukuliwa kuwa "mwongozo" wa kuchochea wa popover.

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

.popover('destroy')

Huficha na kuharibu popover ya kipengele. Popovers zinazotumia utumaji kaumu (ambazo zinaundwa kwa kutumia chaguo )selector haziwezi kuharibiwa kibinafsi kwa vipengele vya vichochezi vya kizazi.

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

Matukio

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

Ujumbe wa arifa alert.js

Arifa za mfano

Ongeza utendakazi wa kukataa kwa ujumbe wote wa tahadhari na programu-jalizi hii.

Unapotumia .closekitufe, lazima kiwe mtoto wa kwanza wa .alert-dismissiblena hakuna maandishi yanayoweza kuja mbele yake kwenye lebo.

Matumizi

Ongeza tu data-dismiss="alert"kwenye kitufe chako cha kufunga ili kutoa kiotomatiki utendakazi wa karibu wa tahadhari. Kufunga arifa huiondoa kwenye DOM.

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

Ili arifa zako zitumie uhuishaji unapofunga, hakikisha kuwa zina .fadena.in madarasa tayari yametumika kwao.

Mbinu

$().alert()

Hufanya arifa ya kusikiliza kwa matukio ya kubofya kwenye vipengele vya kizazi ambavyo vina data-dismiss="alert"sifa. (Sio lazima unapotumia uanzishaji kiotomatiki wa data-api.)

$().alert('close')

Hufunga arifa kwa kuiondoa kwenye DOM. Ikiwa .fadena .indarasa zipo kwenye kipengele, tahadhari itafifia kabla ya kuondolewa.

Matukio

Programu-jalizi ya tahadhari ya Bootstrap inafichua matukio machache ya kuunganisha katika utendaji wa tahadhari.

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

Vifungo _

Fanya zaidi na vifungo. Kitufe cha kudhibiti kinasema au unda vikundi vya vitufe vya vipengee zaidi kama vile upau wa vidhibiti.

Ya serikali

Ongeza data-loading-text="Loading..."ili kutumia hali ya upakiaji kwenye kitufe.

Kipengele hiki kimeacha kutumika tangu v3.3.5 na kimeondolewa katika v4.

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

Kugeuza moja

Ongeza data-toggle="button"ili kuwezesha kugeuza kwenye kitufe kimoja.

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

Kisanduku cha kuteua / Redio

Ongeza data-toggle="buttons"kwenye kisanduku cha .btn-groupkuteua au pembejeo za redio ili kuwezesha kugeuza katika mitindo husika.

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

Mbinu

$().button('toggle')

Hugeuza hali ya kusukuma. Hutoa kitufe mwonekano kwamba kimewashwa.

$().button('reset')

Huweka upya hali ya kitufe - hubadilisha maandishi hadi maandishi asili. Njia hii hailingani na hurudi kabla ya uwekaji upya kukamilika.

$().button(string)

Hubadilisha maandishi kwa hali yoyote ya maandishi iliyoainishwa na data.

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

Kunja collapse.js

Programu-jalizi inayoweza kubadilika ambayo hutumia madarasa machache kwa tabia rahisi ya kugeuza.

Mfano

Bofya vitufe vilivyo hapa chini ili kuonyesha na kuficha kipengele kingine kupitia mabadiliko ya darasa:

• .collapsehuficha yaliyomo
• .collapsinginatumika wakati wa mabadiliko
• .collapse.ininaonyesha maudhui

Unaweza kutumia kiungo hrefkilicho na sifa, au kitufe kilicho na data-targetsifa. Katika visa vyote viwili, data-toggle="collapse"inahitajika.

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

Mfano wa accordion

Panua tabia ya kukunja chaguomsingi ili kuunda mfuatano na kijenzi cha paneli.

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

Inawezekana pia kubadilisha .panel-bodys na .list-groups.

Matumizi

Programu-jalizi ya kuporomoka hutumia madarasa machache kushughulikia unyanyuaji mzito:

• .collapsehuficha yaliyomo
• .collapse.ininaonyesha yaliyomo
• .collapsinghuongezwa wakati mpito unapoanza, na kuondolewa ukikamilika

Madarasa haya yanaweza kupatikana katika component-animations.less.

Kupitia sifa za data

Ongeza tu data-toggle="collapse"na a data-targetkwa kipengee ili kukabidhi kiotomatiki udhibiti wa kipengele kinachoweza kukunjwa. Sifa data-targetinakubali kiteuzi cha CSS cha kutumia kukunja kwake. Hakikisha umeongeza darasa collapsekwenye kipengele kinachoweza kukunjwa. Ikiwa ungependa ifungue chaguomsingi, ongeza darasa la ziada in.

Ili kuongeza usimamizi wa kikundi kama accordion kwenye kidhibiti kinachoweza kukunjwa, ongeza sifa ya data data-parent="#selector". Rejelea onyesho ili kuona hili likiendelea.

Kupitia JavaScript

Washa wewe mwenyewe na:

$('.collapse').collapse()

Chaguo

Chaguzi zinaweza kupitishwa kupitia sifa za data au JavaScript. Kwa sifa za data, ongeza jina la chaguo kwa data-, kama katika data-parent="".

Mbinu

.collapse(options)

Huwasha maudhui yako kama kipengele kinachoweza kukunjwa. Inakubali chaguo za hiari object.

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

.collapse('toggle')

Hugeuza kipengele kinachoweza kukunjwa kuonyeshwa au kufichwa. Hurejesha kwa anayepiga kabla kipengele kinachoweza kukunjwa hakijaonyeshwa au kufichwa (yaani kabla ya tukio shown.bs.collapseau hidden.bs.collapsetukio).

.collapse('show')

Inaonyesha kipengele kinachoweza kukunjwa. Hurejesha kwa mpigaji simu kabla kipengele kinachoweza kukunjwa hakijaonyeshwa (yaani kabla ya shown.bs.collapsetukio kutokea).

.collapse('hide')

Huficha kipengele kinachoweza kukunjwa. Hurejesha kwa anayepiga kabla kipengele kinachoweza kukunjwa hakijafichwa (yaani kabla ya hidden.bs.collapsetukio kutokea).

Matukio

Darasa la kukunja la Bootstrap linafichua matukio machache ya kunasa katika utendakazi wa kukunja.

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

Jukwaa la jukwa.js

Kipengele cha onyesho la slaidi cha kuendesha baiskeli kupitia vipengele, kama jukwa. Miduara iliyopachikwa haitumiki.

Mifano

Iliyotangulia Inayofuata

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

Manukuu ya hiari

Ongeza manukuu kwenye slaidi zako kwa urahisi na .carousel-captionkipengele kilicho ndani ya .item. Weka takriban HTML yoyote ya hiari ndani hapo na itapangiliwa kiotomatiki na kuumbizwa.

Lebo ya kwanza ya slaidi

Nulla vitae elit libero, pharetra augue mollis interdum.

Lebo ya pili ya slaidi

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lebo ya tatu ya slaidi

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

Iliyotangulia Inayofuata

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

Matumizi

Majukwaa mengi

Majukwaa yanahitaji matumizi ya chombo idkwenye chombo cha nje (the .carousel) ili vidhibiti vya jukwa kufanya kazi vizuri. Unapoongeza jukwa nyingi, au unapobadilisha jukwa id, hakikisha kuwa umesasisha vidhibiti husika.

Kupitia sifa za data

Tumia sifa za data ili kudhibiti kwa urahisi nafasi ya jukwa. data-slideinakubali manenomsingi prevau next, ambayo hubadilisha nafasi ya slaidi kulingana na nafasi yake ya sasa. Vinginevyo, tumia data-slide-tokupitisha faharasa mbichi ya slaidi kwa carousel data-slide-to="2", ambayo huhamisha nafasi ya slaidi hadi faharasa fulani inayoanza na 0.

Sifa data-ride="carousel"hutumika kutia alama kwenye jukwa kama linalohuisha kuanzia kwenye upakiaji wa ukurasa. Haiwezi kutumika pamoja na (isiyohitajika na isiyo ya lazima) uanzishaji wa JavaScript ya jukwa moja.

Kupitia JavaScript

Piga jukwa mwenyewe na:

$('.carousel').carousel()

Chaguo

Chaguzi zinaweza kupitishwa kupitia sifa za data au JavaScript. Kwa sifa za data, ongeza jina la chaguo kwa data-, kama katika data-interval="".

Mbinu

.carousel(options)

Huanzisha jukwa kwa chaguo za hiari objectna kuanza kuendesha baiskeli kupitia vitu.

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

.carousel('cycle')

Huzungusha vitu vya jukwa kutoka kushoto kwenda kulia.

.carousel('pause')

Husimamisha jukwa lisiendeshe baiskeli kupitia vitu.

.carousel(number)

Huzungusha jukwa hadi fremu fulani (0 msingi, sawa na safu).

.carousel('prev')

Mizunguko ya kipengee kilichotangulia.

.carousel('next')

Mizunguko hadi kipengee kinachofuata.

Matukio

Darasa la jukwa la Bootstrap linafichua matukio mawili ya kuunganisha kwenye utendakazi wa jukwa.

Matukio yote mawili yana sifa zifuatazo za ziada:

• direction: Mwelekeo ambao jukwa linateleza (ama "left"au "right").
• relatedTarget: Kipengele cha DOM ambacho kinatelezeshwa mahali kama kipengee kinachotumika.

Matukio yote ya jukwa hupigwa risasi kwenye jukwa lenyewe (yaani kwenye <div class="carousel">).

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

Bandika affix.js

Mfano

Programu-jalizi ya kiambishi huwasha position: fixed;na kuzima, ikiiga athari inayopatikana na position: sticky;. Urambazaji ulio upande wa kulia ni onyesho la moja kwa moja la programu-jalizi ya kiambatisho.

Matumizi

Tumia programu-jalizi ya bandika kupitia sifa za data au wewe mwenyewe na JavaScript yako mwenyewe. Katika hali zote mbili, lazima utoe CSS kwa nafasi na upana wa maudhui yako yaliyobandikwa.

Kumbuka: Usitumie programu-jalizi ya kiambatisho kwenye kipengele kilicho katika kipengele kilichowekwa kwa kiasi, kama vile safu wima iliyovutwa au kusukumwa, kwa sababu ya hitilafu ya uwasilishaji ya Safari .

Nafasi kupitia CSS

Programu-jalizi ya affix hugeuza kati ya aina tatu, kila moja ikiwakilisha hali fulani: .affix, .affix-top, na .affix-bottom. Lazima utoe mitindo, isipokuwa position: fixed;on .affix, kwa madarasa haya mwenyewe (huru ya programu-jalizi hii) ili kushughulikia nafasi halisi.

Hivi ndivyo programu jalizi ya affix inavyofanya kazi:

1. Kuanza, programu-jalizi inaongeza .affix-topkuashiria kipengele kiko katika nafasi yake ya juu zaidi. Kwa wakati huu hakuna nafasi ya CSS inahitajika.
2. Kusogeza mbele ya kipengee unachotaka kubandikwa kunapaswa kusababisha upachikaji halisi. Hapa ndipo mahali .affixpa kubadilisha .affix-topna kuweka position: fixed;(zinazotolewa na Bootstrap's CSS).
3. Ikiwa urekebishaji wa chini umefafanuliwa, kusogeza mbele kunapaswa kuchukua nafasi .affixya .affix-bottom. Kwa kuwa urekebishaji ni wa hiari, kuweka moja kunahitaji uweke CSS inayofaa. Katika kesi hii, ongeza position: absolute;ikiwa ni lazima. Programu-jalizi hutumia sifa ya data au chaguo la JavaScript ili kubainisha mahali pa kuweka kipengele kutoka hapo.

Fuata hatua zilizo hapo juu ili kuweka CSS yako kwa mojawapo ya chaguo za matumizi zilizo hapa chini.

Kupitia sifa za data

Ili kuongeza kwa urahisi tabia ya kubandika kwa kipengele chochote, ongeza tu data-spy="affix"kwenye kipengele unachotaka kupeleleza. Tumia vipunguzio kufafanua wakati wa kugeuza ubandikaji wa kipengele.

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

Kupitia JavaScript

Piga programu-jalizi ya kiambatisho kupitia JavaScript:

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

Chaguo

Chaguzi zinaweza kupitishwa kupitia sifa za data au JavaScript. Kwa sifa za data, ongeza jina la chaguo kwa data-, kama katika data-offset-top="200".

Mbinu

.affix(options)

Huwasha maudhui yako kama yaliyobandikwa. Inakubali chaguo za hiari object.

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

.affix('checkPosition')

Hukokotoa upya hali ya kiambishi kulingana na vipimo, nafasi, na nafasi ya kusogeza ya vipengele husika. , .affix, .affix-topna .affix-bottommadarasa huongezwa kwa au kuondolewa kutoka kwa maudhui yaliyobandikwa kulingana na hali mpya. Njia hii inahitaji kuitwa wakati wowote vipimo vya maudhui yaliyobandikwa au kipengele lengwa kinapobadilishwa, ili kuhakikisha uwekaji sahihi wa maudhui yaliyobandikwa.

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

Matukio

Programu-jalizi ya kiambishi cha Bootstrap inafichua matukio machache ya kuunganisha kwenye utendaji wa viambatisho.