Dubawa

Mutum ko harhada

Ana iya haɗa plugins daban-daban (ta amfani da *.jsfayilolin guda ɗaya na Bootstrap), ko duka a lokaci ɗaya (amfani bootstrap.jsko ƙarami bootstrap.min.js).

Bayanan bayanai

Kuna iya amfani da duk Bootstrap plugins zalla ta hanyar API ɗin alama ba tare da rubuta layi ɗaya na JavaScript ba. Wannan shine API-aji na farko na Bootstrap kuma yakamata ya zama abin lura na farko lokacin amfani da plugin.

Wannan ya ce, a wasu yanayi yana iya zama kyawawa a kashe wannan aikin. Sabili da haka, muna kuma ba da ikon musaki sifa ta API ta hanyar cire duk abubuwan da suka faru akan takaddun suna tare da data-api. Wannan yayi kama da haka:

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

A madadin, don ƙaddamar da takamaiman plugin ɗin, kawai haɗa sunan plugin ɗin azaman sarari suna tare da bayanan-api sunaye kamar haka:

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

API ɗin shirye-shirye

Mun kuma yi imanin ya kamata ku iya amfani da duk abubuwan Bootstrap kawai ta JavaScript API. Duk APIs na jama'a guda ɗaya ne, hanyoyin da za a iya sarƙa, da dawo da tarin da aka yi aiki da su.

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

Duk hanyoyin ya kamata su karɓi zaɓin zaɓi na zaɓi, kirtani wanda ke nufin wata hanya, ko ba komai (wanda ke fara plugin ɗin tare da halayen tsoho):

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

Kowane plugin kuma yana fallasa ɗanyen ginin sa akan wata Constructorkadara: $.fn.popover.Constructor. Idan kuna son samun misalan plugin ɗin, dawo da shi kai tsaye daga wani abu: $('[rel="popover"]').data('popover').

Saitunan tsoho

Kuna iya canza saitunan tsoho don plugin ta hanyar gyara abin plugin ɗin Constructor.DEFAULTS:

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

Babu rikici

Wani lokaci yana da mahimmanci a yi amfani da plugins Bootstrap tare da wasu tsarin UI. A cikin waɗannan yanayi, karon sararin samaniya na iya faruwa lokaci-lokaci. Idan wannan ya faru, kuna iya kiran .noConflictplugin ɗin da kuke son mayar da darajar.

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

Abubuwan da suka faru

Bootstrap yana ba da al'amuran al'ada don yawancin ayyuka na musamman na plugins. Gabaɗaya, waɗannan suna zuwa ne a cikin sigar ɓarna ta ƙarshe da ta gabata - inda ƙarshen (misali show) ke haifar da shi a farkon wani lamari, kuma sigar ɓangarorinsa na baya (misali shown) yana haifar da ƙarshen aikin.

Tun daga 3.0.0, duk abubuwan da suka faru na Bootstrap an ba su suna.

Duk abubuwan da ba su da iyaka suna ba da preventDefaultayyuka. Wannan yana ba da ikon dakatar da aiwatar da wani aiki kafin ya fara.

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

Lambobin sigar

Za a iya isa ga sigar kowane na Bootstrap's jQuery plugins ta hanyar VERSIONmallakar maginin plugin ɗin. Misali, don plugin ɗin kayan aiki:

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

Babu faɗuwa ta musamman lokacin da aka kashe JavaScript

Bootstrap's plugins ba sa komawa baya musamman cikin alheri lokacin da aka kashe JavaScript. Idan kuna kula da ƙwarewar mai amfani a wannan yanayin, yi amfani <noscript>da bayanin halin da ake ciki (da kuma yadda ake sake kunna JavaScript) ga masu amfani da ku, da/ko ƙara naku faɗuwar al'ada.

Canje -canje.js

Game da sauyi

Don sauƙaƙan tasirin canji, haɗa transition.jssau ɗaya tare da sauran fayilolin JS. Idan kana amfani da abin da aka haɗa (ko rage) bootstrap.js, babu buƙatar haɗa wannan - ya riga ya kasance a can.

Me ke ciki

Transition.js shine mataimaki na asali don transitionEndabubuwan da suka faru da kuma abin koyi na CSS. Sauran plugins ke amfani da shi don bincika tallafin canjin CSS da kuma kama canjin rataye.

Kashe canjin canji

Ana iya kashe canje-canje a duniya ta amfani da snippet JavaScript mai zuwa, wanda dole ne ya zo bayan transition.js(ko bootstrap.js, bootstrap.min.jskamar yadda al'amarin ya kasance) an loda:

$.support.transition = false

Modal.js _

Modals an daidaita su, amma masu sassauƙa, maganganun tattaunawa tare da mafi ƙarancin aikin da ake buƙata da kuma rashin daidaituwa.

Saboda yadda HTML5 ke bayyana ma'anar tarukan sa, autofocussifa ta HTML ba ta da wani tasiri a cikin tsarin Bootstrap. Don cimma sakamako iri ɗaya, yi amfani da wasu JavaScript na al'ada:

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

Misalai

Misali a tsaye

Modal da aka yi tare da kai, jiki, da saitin ayyuka a cikin ƙafar ƙafa.

<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

Juya modal ta JavaScript ta danna maɓallin da ke ƙasa. Zai zame ƙasa ya dushe daga saman shafin.

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

Girman zaɓi

Modals suna da girma dabam na zaɓi biyu, ana samun su ta azuzuwan gyara don sanya su akan .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>

Cire rayarwa

Don ƙirar ƙirar da kawai ke bayyana maimakon faɗuwa don dubawa, cire .fadeajin daga alamar ƙirar ku.

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

Amfani da tsarin grid

Don amfani da tsarin grid na Bootstrap a cikin modal, kawai nest .rows cikin .modal-bodysa'an nan kuma yi amfani da azuzuwan tsarin grid na yau da kullun.

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

Bambance-bambancen abun ciki na modal dangane da maɓallin jawo

Kuna da gungun maɓallai waɗanda duk ke haifar da modal iri ɗaya, kawai tare da abun ciki daban-daban? Yi amfani event.relatedTargetda halayen HTMLdata-* (yiwuwar ta jQuery ) don bambanta abubuwan da ke cikin tsarin ya danganta da wane maballin da aka danna. Dubi Dokokin Modal Events don cikakkun bayanai akan 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)
})

Amfani

Modal plugin yana jujjuya abubuwan da ke ɓoye akan buƙatu, ta hanyar sifofin bayanai ko JavaScript. Hakanan yana ƙarawa .modal-opendon <body>soke halayen gungurawa na asali kuma yana haifar da .modal-backdropdon samar da wurin dannawa don korar abubuwan da aka nuna lokacin dannawa wajen modal.

Ta hanyar bayanan halayen

Kunna modal ba tare da rubuta JavaScript ba. Saita data-toggle="modal"a kan abin sarrafawa, kamar maɓalli, tare da data-target="#foo"ko href="#foo"don ƙaddamar da takamaiman tsari don juyawa.

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

Ta hanyar JavaScript

Kira modal tare da id myModaltare da layi ɗaya na JavaScript:

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

Zabuka

Za a iya wucewa ta hanyar sifofin bayanai ko JavaScript. Don halayen bayanai, saka sunan zaɓin zuwa data-, kamar a cikin data-backdrop="".

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

Hanyoyin

.modal(options)

Yana kunna abun cikin ku azaman tsari. Yana yarda da zaɓin zaɓi object.

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

.modal('toggle')

Da hannu yana jujjuya modal. Komawa ga mai kira kafin a nuna tsarin a zahiri ko ɓoye (watau kafin abin shown.bs.modalko hidden.bs.modalabin ya faru).

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

.modal('show')

Da hannu yana buɗe modal. Komawa ga mai kira kafin a nuna ainihin tsari (watau kafin shown.bs.modalabin ya faru).

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

.modal('hide')

Da hannu yana ɓoye modal. Komawa ga mai kira kafin a ɓoye tsarin (watau kafin hidden.bs.modalabin ya faru).

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

.modal('handleUpdate')

Yana gyara madaidaicin modal don fuskantar gungurawa idan mutum ya bayyana, wanda zai sa tsarin ya yi tsalle zuwa hagu.

Ana buƙata kawai lokacin da tsayin yanayin ya canza yayin buɗewa.

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

Abubuwan da suka faru

Ajin modal na Bootstrap yana fallasa ƴan abubuwan da suka faru don haɗawa cikin ayyukan modal.

Duk abubuwan da suka faru na modal ana harba su akan modal kanta (watau a <div class="modal">).

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

Zazzagewar saukarwa.js

Misalai

Ƙara menu na zaɓuka zuwa kusan komai tare da wannan plugin ɗin mai sauƙi, gami da navbar, shafuka, da kwayoyi.

A cikin navbar

A cikin kwayoyin

Amfani

Ta hanyar sifofin bayanai ko JavaScript, zazzage plugin ɗin yana jujjuya abun ciki na ɓoye (menun zaɓuka) ta hanyar jujjuya .openaji akan abin jerin iyaye.

A kan na'urorin tafi-da-gidanka, buɗe jerin zaɓuka yana ƙara .dropdown-backdropazaman yanki na famfo don rufe menu na zazzage lokacin dannawa wajen menu, buƙatu don ingantaccen tallafin iOS. Wannan yana nufin canzawa daga menu na buɗewa zuwa menu na zaɓuka daban yana buƙatar ƙarin taɓawa akan wayar hannu.

Lura: An data-toggle="dropdown"dogara da sifa don rufe menu na zazzagewa a matakin aikace-aikacen, don haka yana da kyau a yi amfani da shi koyaushe.

Ta hanyar bayanan halayen

Ƙara data-toggle="dropdown"zuwa hanyar haɗi ko maɓalli don kunna zazzagewa.

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

Don kiyaye URLs tare da maɓallan mahaɗi, yi amfani da data-targetsifa maimakon 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>

Ta hanyar JavaScript

Kira zazzagewar ta hanyar JavaScript:

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

Zabuka

Babu

Hanyoyin

$().dropdown('toggle')

Yana jujjuya menu na zaɓuka na mashigar kewayawa da aka bayar ko kewayawa da aka buga.

Abubuwan da suka faru

Duk abubuwan da suka faru na zazzage ana harba su ne akan .dropdown-menuɓangaren iyaye.

Duk abubuwan da suka faru na zazzagewa suna da wata relatedTargetkadara, wacce ƙimarta ita ce ɓangarorin anka mai juyawa.

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

ScrollSpy scrollspy.js

Misali a cikin navbar

The ScrollSpy plugin shine don sabunta makasudin nav ta atomatik dangane da matsayin gungurawa. Gungura wurin da ke ƙasa da maɓallin kewayawa kuma duba canjin aji mai aiki. Za a kuma haskaka ƙananan abubuwan da aka zazzage su ma.

Amfani

Yana buƙatar matsayi na dangi

Komai hanyar aiwatarwa, scrollspy yana buƙatar amfani da abun da position: relative;kuke leƙo asirin ƙasa. A mafi yawan lokuta wannan shine <body>. Lokacin gungurawa akan abubuwan da ba na <body>, tabbatar an sami heightsaiti kuma overflow-y: scroll;a yi amfani da su.

Ta hanyar bayanan halayen

Don ƙara halayyar scrollspy cikin sauƙi zuwa kewayawa na saman mashaya, ƙara data-spy="scroll"zuwa ɓangaren da kuke son yin rahõto a kai (mafi yawanci wannan shine <body>). Sannan ƙara data-targetsifa tare da ID ko aji na ɓangaren mahaifa na kowane .navɓangaren 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>

Ta hanyar JavaScript

Bayan ƙara position: relative;a cikin CSS ɗin ku, kira gungurawa ta hanyar JavaScript:

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

Hanyoyin

.scrollspy('refresh')

Lokacin amfani da scrollspy tare da ƙara ko cire abubuwa daga DOM, kuna buƙatar kiran hanyar wartsakewa kamar haka:

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

Zabuka

Za a iya wucewa ta hanyar sifofin bayanai ko JavaScript. Don halayen bayanai, saka sunan zaɓin zuwa data-, kamar a cikin data-offset="".

Abubuwan da suka faru

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

Shafukan da za a iya juyawa.js

Misali shafuka

Ƙara aikin shafin mai sauri, mai ƙarfi don canzawa ta cikin fakitin abun ciki na gida, har ma ta menu na zazzagewa. Ba a tallafawa shafuka masu gida.

Amfani

Kunna shafukan da za a iya amfani da su ta hanyar JavaScript (kowane shafin yana buƙatar kunna shi daban):

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

Kuna iya kunna shafuka guda ɗaya ta hanyoyi da yawa:

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

Alamar alama

Kuna iya kunna shafi ko kewayawa kwaya ba tare da rubuta kowane JavaScript ba ta hanyar tantancewa kawai data-toggle="tab"ko data-toggle="pill"akan wani abu. Ƙara da navkuma nav-tabsazuzuwan zuwa shafin ulzai yi amfani da Bootstrap shafin salo , yayin da ƙara navkuma nav-pillsazuzuwan za su yi amfani da salo na kwaya .

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

Don sanya shafuka su shuɗe, ƙara .fadezuwa kowane .tab-pane. Rukunin shafin farko kuma dole ne ya .insanya abun cikin farko a bayyane.

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

Hanyoyin

$().tab

Yana kunna abun shafi da kwandon abun ciki. Tab ya kamata ya kasance yana da ko dai data-targetko wani hrefkumburin kwantena mai niyya a cikin DOM. A cikin misalan da ke sama, shafuka sune <a>s masu data-toggle="tab"halaye.

.tab('show')

Yana zaɓar shafin da aka bayar kuma yana nuna abun ciki mai alaƙa. Duk wani shafin da aka zaɓa a baya ya zama ba zaɓaɓɓe ba kuma abun ciki mai alaƙa yana ɓoye. Komawa ga mai kira kafin a nuna ainihin ɓangaren shafin (watau kafin shown.bs.tababin ya faru).

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

Abubuwan da suka faru

Lokacin nuna sabon shafin, abubuwan da suka faru sun yi wuta a cikin tsari mai zuwa:

1. hide.bs.tab(a kan shafin mai aiki na yanzu)
2. show.bs.tab(a kan shafin da za a nuna)
3. hidden.bs.tab(a kan shafin da ya gabata mai aiki, iri ɗaya da na hide.bs.tabtaron)
4. shown.bs.tab(akan sabon shafin da aka nuna, iri ɗaya da na show.bs.tabtaron)

Idan babu shafin da ya riga ya fara aiki, to ba za a kori abubuwan hide.bs.tabda abubuwan da suka faru ba.hidden.bs.tab

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

Tukwici kayan aiki Tooltip.js

Ƙaddamar da kyakkyawan jQuery.tipsy plugin wanda Jason Frame ya rubuta; Tukwici kayan aiki sigar da aka sabunta ne, waɗanda ba su dogara da hotuna ba, amfani da CSS3 don rayarwa, da sifofin bayanai don ajiyar take na gida.

Ba a taɓa nuna nassoshin kayan aiki masu tsayin sifili ba.

Misalai

Tsallake kan hanyoyin da ke ƙasa don ganin tukwici na kayan aiki:

Tushen kayan aiki a tsaye

Akwai zaɓuɓɓuka huɗu: saman, dama, ƙasa, da hagu masu layi.

Hanyoyi hudu

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

Amfani

Filogin kayan aiki yana haifar da abun ciki da alama akan buƙata, kuma ta tsohuwa wuraren abubuwan kayan aiki bayan abubuwan jawo su.

Ƙaddamar da kayan aiki ta hanyar JavaScript:

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

Alamar alama

Alamar da ake buƙata don tip ɗin kayan aiki datasifa ce kawai kuma titleakan ɓangarorin HTML ɗin da kuke son samun tip ɗin kayan aiki. Samfuran alamar kayan aiki yana da sauƙi, kodayake yana buƙatar matsayi (ta tsohuwa, an saita shi topta 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>

Zabuka

Za a iya wucewa ta hanyar sifofin bayanai ko JavaScript. Don halayen bayanai, saka sunan zaɓin zuwa data-, kamar a cikin data-animation="".

Hanyoyin

$().tooltip(options)

Haɗa mai sarrafa kayan aiki zuwa tarin abubuwa.

.tooltip('show')

Yana bayyana matakin kayan aiki. Komawa ga mai kira kafin a nuna matakin kayan aiki (watau kafin shown.bs.tooltipabin ya faru). Ana ɗaukar wannan a matsayin "manual" mai kunna tip ɗin kayan aiki. Ba a taɓa nuna nassoshin kayan aiki masu tsayin sifili ba.

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

.tooltip('hide')

Yana ɓoye bayanan kayan aiki. Komawa ga mai kira kafin a ɓoye bayanan kayan aiki (watau kafin hidden.bs.tooltipabin ya faru). Ana ɗaukar wannan a matsayin "manual" mai kunna tip ɗin kayan aiki.

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

.tooltip('toggle')

Yana jujjuya matakin kayan aiki. Komawa ga mai kira kafin a nuna tip ɗin kayan aiki a zahiri ko a ɓoye (watau kafin abin shown.bs.tooltipko hidden.bs.tooltipabin ya faru). Ana ɗaukar wannan a matsayin "manual" mai kunna tip ɗin kayan aiki.

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

.tooltip('destroy')

Yana ɓoyewa kuma yana lalata tushen kayan aiki. Nasihun kayan aiki waɗanda ke amfani da wakilai (wanda aka ƙirƙira ta amfani da selectorzaɓi ) ba za a iya lalata su daban-daban akan abubuwan da ke haifar da zuriya ba.

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

Abubuwan da suka faru

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

Popovers popover.js

Ƙara ƙarami mai rufi na abun ciki, kamar waɗanda ke kan iPad, zuwa kowane nau'i na bayanan sakandare na gidaje.

Popovers waɗanda duka take da abun ciki ba tsawon sifili ba ba a taɓa nunawa ba.

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

Misalai

A tsaye popover

Akwai zaɓuɓɓuka huɗu: saman, dama, ƙasa, da hagu masu layi.

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>

Hanyoyi hudu

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

Kore a danna gaba

Yi amfani da focusfaɗakarwa don korar popovers akan danna gaba wanda mai amfani yayi.

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

Amfani

Kunna popovers ta JavaScript:

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

Zabuka

Za a iya wucewa ta hanyar sifofin bayanai ko JavaScript. Don halayen bayanai, saka sunan zaɓin zuwa data-, kamar a cikin data-animation="".

Hanyoyin

$().popover(options)

Yana farawa popovers don tarin abubuwa.

.popover('show')

Yana bayyana faɗuwar wani abu. Komawa ga mai kira kafin a nuna popover a zahiri (watau kafin shown.bs.popoverabin ya faru). Ana ɗaukar wannan a matsayin "manual" yana haifar da popover. Popovers waɗanda duka take da abun ciki ba tsawon sifili ba ba a taɓa nunawa ba.

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

.popover('hide')

Yana ɓoye ɓoyayyen abu. Komawa ga mai kira kafin a ɓoye popover a zahiri (watau kafin hidden.bs.popoverabin ya faru). Ana ɗaukar wannan a matsayin "manual" yana haifar da popover.

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

.popover('toggle')

Yana jujjuya faɗuwar wani abu. Komawa ga mai kira kafin a nuna ko ɓoye a zahiri (watau kafin abin shown.bs.popoverko hidden.bs.popoverabin ya faru). Ana ɗaukar wannan a matsayin "manual" yana haifar da popover.

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

.popover('destroy')

Yana ɓoyewa da lalata faɗuwar wani abu. Popovers da ke amfani da wakilai (waɗanda aka ƙirƙira ta amfani da selectorzaɓi ) ba za a iya lalata su daban-daban akan abubuwan da ke haifar da zuriya ba.

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

Abubuwan da suka faru

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

faɗakarwar saƙonnin faɗakarwa.js

Misali faɗakarwa

Ƙara aikin korar zuwa duk saƙonnin faɗakarwa tare da wannan plugin ɗin.

Lokacin amfani da .closemaɓalli, dole ne ya zama ɗan fari na farko .alert-dismissiblekuma babu wani abun ciki na rubutu da zai iya zuwa gabansa a cikin alamar.

Amfani

Kawai ƙara data-dismiss="alert"zuwa maɓallin ku don ba da aikin kusa da faɗakarwa ta atomatik. Rufe faɗakarwa yana cire shi daga DOM.

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

Don samun faɗakarwar ku ta yi amfani da rayarwa lokacin rufewa, tabbatar suna da .fadekuma.in azuzuwan da azuzuwan.

Hanyoyin

$().alert()

Yana sa faɗakarwa yana saurare don danna abubuwan da suka faru a kan abubuwan da suka fito waɗanda ke da data-dismiss="alert"sifa. (Ba lallai ba ne lokacin amfani da bayanan-api ta atomatik-farawa.)

$().alert('close')

Yana rufe faɗakarwa ta cire shi daga DOM. Idan azuzuwan .fadesuna .innan akan kashi, faɗakarwar zata shuɗe kafin a cire ta.

Abubuwan da suka faru

Flugin faɗakarwar Bootstrap yana fallasa ƴan abubuwan da suka faru don haɗawa cikin ayyukan faɗakarwa.

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

Buttons maɓalli.js

Yi ƙari tare da maɓalli. Maɓallin sarrafawa ko ƙirƙiri ƙungiyoyin maɓalli don ƙarin abubuwan haɗin gwiwa kamar sandunan kayan aiki.

Jiha

Ƙara data-loading-text="Loading..."don amfani da yanayin lodi akan maɓalli.

Wannan fasalin an soke shi tun v3.3.5 kuma an cire shi a cikin 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>

Juyawa guda ɗaya

Ƙara data-toggle="button"don kunna juyawa akan maɓalli ɗaya.

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

Duba akwatin / Rediyo

Ƙara data-toggle="buttons"zuwa .btn-groupakwati mai ƙunshe da abubuwan shigar da rediyo don ba da damar jujjuyawa cikin salo daban-daban.

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

Hanyoyin

$().button('toggle')

Canza yanayin turawa. Yana ba da maɓallin kamannin cewa an kunna shi.

$().button('reset')

Yana sake saita yanayin maɓallin - musanya rubutu zuwa rubutu na asali. Wannan hanyar ba ta dace ba kuma tana dawowa kafin a gama sake saiti.

$().button(string)

Yana canza rubutu zuwa kowane yanayin rubutu da aka ayyana.

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

Rushewar rugujewa.js

Filogi mai sassauƙa wanda ke amfani da ɗimbin azuzuwan don sauƙin jujjuya hali.

Misali

Danna maɓallan da ke ƙasa don nunawa da ɓoye wani abu ta canje-canjen aji:

• .collapseboye abun ciki
• .collapsingana amfani dashi a lokacin sauyawa
• .collapse.inyana nuna abun ciki

Kuna iya amfani da hanyar haɗi tare da hrefsifa, ko maɓalli tare da data-targetsifa. A cikin duka biyun, data-toggle="collapse"ana buƙatar.

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

Misalin Accordion

Ƙarfafa halayen rugujewar tsoho don ƙirƙirar haɗin gwiwa tare da bangaren 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>

Hakanan yana yiwuwa a canza .panel-bodys tare da .list-groups.

Amfani

Fasinjojin rushewa yana amfani da ƴan azuzuwan don ɗaukar nauyi mai nauyi:

• .collapseboye abun ciki
• .collapse.inyana nuna abun ciki
• .collapsingana ƙara lokacin da aka fara canji, kuma a cire idan ya ƙare

Ana iya samun waɗannan azuzuwan a component-animations.less.

Ta hanyar bayanan halayen

Kawai ƙara data-toggle="collapse"da data-targeta cikin kashi don ba da ikon sarrafa abin da zai iya rushewa ta atomatik. Siffar data-targettana karɓar mai zaɓin CSS don amfani da rushewar zuwa. Tabbatar ƙara ajin collapsezuwa kashi mai rugujewa. Idan kuna son buɗewa ta tsohuwa, ƙara ƙarin ajin in.

Don ƙara gudanarwar rukuni-kamar accordion zuwa sarrafawa mai yuwuwa, ƙara sifa na bayanai data-parent="#selector". Koma zuwa demo don ganin wannan a aikace.

Ta hanyar JavaScript

Kunna da hannu tare da:

$('.collapse').collapse()

Zabuka

Za a iya wucewa ta hanyar sifofin bayanai ko JavaScript. Don halayen bayanai, saka sunan zaɓin zuwa data-, kamar a cikin data-parent="".

Hanyoyin

.collapse(options)

Yana kunna abun cikin ku azaman abin da zai iya rugujewa. Yana yarda da zaɓin zaɓi object.

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

.collapse('toggle')

Yana juya wani abu mai rugujewa zuwa nunawa ko ɓoye. Komawa ga mai kira kafin a nuna abin da zai iya rugujewa a zahiri ko a ɓoye (watau kafin abin shown.bs.collapseko hidden.bs.collapseya faru).

.collapse('show')

Yana nuna kashi mai rugujewa. Komawa ga mai kira kafin a nuna ainihin abin da zai iya rushewa (watau kafin shown.bs.collapseabin ya faru).

.collapse('hide')

Yana ɓoye wani abu mai rugujewa. Komawa ga mai kira kafin abin da zai iya rushewa ya kasance a ɓoye (watau kafin hidden.bs.collapseabin ya faru).

Abubuwan da suka faru

Ajin rushewar Bootstrap yana fallasa ƴan abubuwan da suka faru don haɗawa cikin ayyukan rugujewa.

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

Carousel carousel.js

Bangaren nunin faifai don yin keke ta hanyar abubuwa, kamar carousel. Ba a tallafawa carousels masu gida.

Misalai

A baya Na gaba

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

Bayanin zaɓi

Ƙara taken magana a cikin nunin faifan ku cikin sauƙi tare da abin da .carousel-captionke cikin kowane .item. Sanya kusan kowane HTML na zaɓi a ciki kuma za a daidaita shi ta atomatik kuma a tsara shi.

Alamar zamewar farko

Nulla vitae elit libero, a pharetra augue mollis interdum.

Second slide label

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Third slide label

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

A baya Na gaba

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

Amfani

Yawancin carousels

Carousels na buƙatar amfani da wani ida kan babban akwati (da .carousel) don sarrafa carousel don yin aiki da kyau. Lokacin ƙara carousels da yawa, ko lokacin canza carousel's id, tabbatar da sabunta abubuwan sarrafawa masu dacewa.

Ta hanyar bayanan halayen

Yi amfani da sifofin bayanai don sarrafa matsayin carousel cikin sauƙi. data-slideyana karɓar kalmomin maɓalli prevko next, wanda ke canza matsayi na faifai dangane da matsayinsa na yanzu. A madadin, yi amfani data-slide-toda don ƙaddamar da ɗanyen fihirisar zamewa zuwa carousel data-slide-to="2", wanda ke canza wurin zamewar zuwa wani fihirisar takamammen farawa da 0.

Ana data-ride="carousel"amfani da sifa don yiwa carousel alama azaman mai rai wanda yake farawa daga nauyin shafi. Ba za a iya amfani da shi a hade tare da (m kuma ba dole ba) bayyanannen farawar JavaScript na carousel iri ɗaya.

Ta hanyar JavaScript

Kira carousel da hannu tare da:

$('.carousel').carousel()

Zabuka

Za a iya wucewa ta hanyar sifofin bayanai ko JavaScript. Don halayen bayanai, saka sunan zaɓin zuwa data-, kamar a cikin data-interval="".

Hanyoyin

.carousel(options)

Ya fara carousel tare da zaɓin zaɓi objectkuma ya fara hawan keke ta abubuwa.

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

.carousel('cycle')

Zagayawa ta abubuwan carousel daga hagu zuwa dama.

.carousel('pause')

Yana dakatar da carousel daga yin keke ta cikin abubuwa.

.carousel(number)

Yana kewaya carousel zuwa wani firam na musamman (0 tushen, kama da tsararru).

.carousel('prev')

Kewaya zuwa abu na baya.

.carousel('next')

Kewaya zuwa abu na gaba.

Abubuwan da suka faru

Ajin carousel na Bootstrap yana fallasa abubuwa biyu don haɗawa cikin ayyukan carousel.

Duk abubuwan biyu suna da ƙarin kaddarorin masu zuwa:

• direction: Hanyar da carousel ke zamewa (ko dai "left"ko "right").
• relatedTarget: Abubuwan DOM da ake zamewa cikin wuri azaman abu mai aiki.

Duk abubuwan da suka faru na carousel ana harba su a kan carousel kanta (watau a <div class="carousel">).

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

Affix.js _

Misali

Affix plugin yana kunna position: fixed;da kashewa, yana kwaikwayon tasirin da aka samu tare da position: sticky;. Ƙarƙashin kewayawa a hannun dama shine nunin nunin raye-raye na affix plugin.

Amfani

Yi amfani da affix plugin ta sifofin bayanai ko da hannu tare da JavaScript naka. A cikin yanayi guda biyu, dole ne ka samar da CSS don matsayi da faɗin abubuwan da aka makala.

Lura: Kar a yi amfani da plugin ɗin affix akan wani abu da ke ƙunshe a cikin wani wuri mai ɗanɗano, kamar ginshiƙin ja ko turawa, saboda bug ɗin ma'anar Safari .

Matsayi ta hanyar CSS

Affix plugin yana juyawa tsakanin aji uku, kowanne yana wakiltar wata jiha: .affix, .affix-top, da .affix-bottom. Dole ne ku samar da salon, ban da position: fixed;kan .affix, don waɗannan azuzuwan da kanku (mai zaman kansa na wannan plugin ɗin) don ɗaukar ainihin matsayi.

Ga yadda affix plugin ke aiki:

1. Don farawa, plugin ɗin yana ƙara .affix-topdon nuna kashi yana cikin mafi girman matsayi. A wannan lokacin ba a buƙatar sakawa CSS.
2. Gungurawa da abin da kuke so a liƙa ya kamata ya jawo ainihin maƙala. Anan ne wurin .affixmaye gurbin .affix-topda saita position: fixed;(wanda Bootstrap's CSS ya samar).
3. Idan an ayyana ɓarna na ƙasa, gungurawa ya kamata a maye gurbinsa .affixda .affix-bottom. Tunda kashe-kashe na zaɓi ne, saitin ɗaya yana buƙatar ka saita CSS mai dacewa. A wannan yanayin, ƙara position: absolute;lokacin da ya cancanta. Plugin yana amfani da sifa na bayanai ko zaɓin JavaScript don ƙayyade inda za a sanya kashi daga can.

Bi matakan da ke sama don saita CSS ɗin ku don ɗayan zaɓuɓɓukan amfani da ke ƙasa.

Ta hanyar bayanan halayen

Don ƙara ɗabi'ar affix cikin sauƙi zuwa kowane nau'in, kawai ƙara data-spy="affix"zuwa ɓangaren da kuke son yin leken asiri. Yi amfani da kashewa don ayyana lokacin da za a kunna pinning na wani abu.

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

Ta hanyar JavaScript

Kira plugin ɗin affix ta JavaScript:

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

Zabuka

Za a iya wucewa ta hanyar sifofin bayanai ko JavaScript. Don halayen bayanai, saka sunan zaɓin zuwa data-, kamar a cikin data-offset-top="200".

Hanyoyin

.affix(options)

Yana kunna abun cikin ku azaman abin da aka makala. Yana yarda da zaɓin zaɓi object.

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

.affix('checkPosition')

Yana sake ƙididdige yanayin affix dangane da girma, matsayi, da matsayin gungura na abubuwan da suka dace. Ana ƙara .affix, .affix-top, da .affix-bottomazuzuwan zuwa ko cire su daga abubuwan da aka makala bisa ga sabuwar jiha. Ana buƙatar kiran wannan hanyar a duk lokacin da aka canza girman abubuwan da aka maƙala ko kuma abin da ake nufi, don tabbatar da daidaitaccen matsayi na abin da aka makala.

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

Abubuwan da suka faru

Bootstrap's affix plugin yana fallasa ƴan abubuwan da suka faru don haɗawa cikin ayyukan affix.