Mwachidule

Munthu payekha kapena gulu

Mapulagini amatha kuphatikizidwa payekhapayekha (pogwiritsa ntchito *.jsmafayilo a Bootstrap), kapena zonse mwakamodzi (pogwiritsa ntchito bootstrap.jskapena minified bootstrap.min.js).

Makhalidwe a data

Mutha kugwiritsa ntchito mapulagini onse a Bootstrap kudzera mu API yamakapu osalemba mzere umodzi wa JavaScript. Iyi ndi API yoyamba ya Bootstrap ndipo iyenera kukhala kuganizira kwanu koyamba mukamagwiritsa ntchito pulogalamu yowonjezera.

Izi zati, nthawi zina zingakhale zofunika kuzimitsa ntchitoyi. Chifukwa chake, timaperekanso kuthekera koletsa API ya data pochotsa zochitika zonse pachikalatacho chokhala ndi dzina data-api. Izi zikuwoneka motere:

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

Kapenanso, kuti mulondole pulogalamu yowonjezera, ingophatikizani dzina la plugin ngati malo okhala ndi dzina la data-api monga chonchi:

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

Programmatic API

Tikukhulupiriranso kuti muyenera kugwiritsa ntchito mapulagini onse a Bootstrap kudzera mu JavaScript API. Ma API onse omwe ali pagulu ndi amodzi, njira zosinthira, ndikubweza zosonkhanitsa zomwe zachitika.

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

Njira zonse ziyenera kuvomereza chinthu chosankha, chingwe chomwe chimayang'ana njira inayake, kapena palibe (chomwe chimayambitsa pulogalamu yowonjezera yokhala ndi machitidwe osakhazikika):

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

Pulagi iliyonse imawululanso womanga wake panyumba Constructor: $.fn.popover.Constructor. Ngati mukufuna kupeza pulogalamu yowonjezera, itengereni mwachindunji ku chinthu: $('[rel="popover"]').data('popover').

Zokonda zofikira

Mutha kusintha makonda a pulogalamu yowonjezera posintha chinthu cha pulogalamu yowonjezera Constructor.DEFAULTS:

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

Palibe mkangano

Nthawi zina pamafunika kugwiritsa ntchito mapulagini a Bootstrap okhala ndi ma UI ena. Pazifukwa izi, kugunda kwa mayina kumachitika nthawi zina. Izi zikachitika, mutha kuyitanitsa pulogalamu yowonjezera .noConflictyomwe mukufuna kubwezeretsanso mtengo wake.

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

Zochitika

Bootstrap imapereka zochitika zapadera pazochita zapadera za mapulagini ambiri. Nthawi zambiri, izi zimabwera mu mawonekedwe osamalizidwa komanso am'mbuyomu - pomwe mawu osamalitsa (mwachitsanzo. show) amayambika kumayambiriro kwa chochitika, ndipo mawonekedwe ake apitalo (mwachitsanzo. shown) amayambika akamaliza kuchitapo kanthu.

Pofika pa 3.0.0, zochitika zonse za Bootstrap zili ndi mayina.

Zochitika zonse zopanda malire zimapereka preventDefaultmagwiridwe antchito. Izi zimapereka kuthekera koyimitsa kuchitapo kanthu kusanayambe.

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

Nambala za mtundu

Mtundu wa mapulagini aliwonse a Bootstrap a jQuery atha kupezeka kudzera pamtundu VERSIONwa wopanga pulogalamu yowonjezera. Mwachitsanzo, pa tooltip plugin:

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

Palibe zolakwika zapadera pomwe JavaScript yayimitsidwa

Mapulagini a Bootstrap samabwerera m'mbuyo mwachisomo pomwe JavaScript yazimitsidwa. Ngati mumasamala za ogwiritsa ntchito pankhaniyi, gwiritsani ntchito <noscript>kufotokoza momwe zinthu ziliri (ndi momwe mungayambitsirenso JavaScript) kwa ogwiritsa ntchito anu, ndi/kapena onjezani zolakwika zanu.

Transitions transition.js

Za kusintha

Zosavuta kusintha, phatikizani transition.jskamodzi pamodzi ndi mafayilo ena a JS. Ngati mukugwiritsa ntchito compiled (kapena minified) bootstrap.js, palibe chifukwa chophatikizira izi - zili kale.

Zomwe zili mkati

Transition.js ndi mthandizi wofunikira transitionEndpazochitika komanso CSS transition emulator. Amagwiritsidwa ntchito ndi mapulagini ena kuti ayang'ane thandizo la kusintha kwa CSS ndikugwira masinthidwe olendewera.

Kuyimitsa zosintha

Zosintha zitha kuzimitsidwa padziko lonse lapansi pogwiritsa ntchito mawu a JavaScript otsatirawa, omwe ayenera kubwera transition.js(kapena bootstrap.js, bootstrap.min.jsmonga momwe zingakhalire) atakwezedwa:

$.support.transition = false

Modal.js _

Ma modals amasinthidwa, koma osinthika, ma dialog omwe ali ndi magwiridwe antchito ochepa komanso zosasintha zanzeru.

Chifukwa cha momwe HTML5 imatanthauzira semantics yake, mawonekedwe a autofocusHTML alibe mphamvu mu ma modals a Bootstrap. Kuti mukwaniritse zomwezo, gwiritsani ntchito JavaScript yokhazikika:

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

Zitsanzo

Chitsanzo chokhazikika

Mawonekedwe operekedwa okhala ndi mutu, thupi, ndi zochita m'munsimu.

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

Chiwonetsero chamoyo

Sinthani modal kudzera pa JavaScript podina batani pansipa. Idzatsika ndikuzimiririka kuchokera pamwamba pa tsamba.

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

Zosankha zazikulu

Ma Modals ali ndi makulidwe awiri osankha, omwe amapezeka kudzera pamagulu osintha kuti ayikidwe pa .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>

Chotsani makanema ojambula

Kwa ma mods omwe amangowoneka m'malo mozimiririka kuti awoneke, chotsani .fadekalasiyo pazolemba zanu.

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

Kugwiritsa ntchito gridi

Kuti mutengere mwayi pagulu la Bootstrap grid mkati mwa modal, ingokhala chisa .rowmkati mwa .modal-bodyndiyeno gwiritsani ntchito makalasi a grid system.

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

Zosintha za modal kutengera batani loyambitsa

Muli ndi mabatani ambiri omwe amayambitsa modali yofanana, yokhala ndi zosiyana pang'ono? Gwiritsani ntchito event.relatedTargetndi mawonekedwe a HTMLdata-* (mwina kudzera pa jQuery ) kuti musinthe zomwe zili mu modal kutengera batani lomwe ladina. Onani zolemba za Modal Events kuti mudziwe zambiri 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)
})

Kugwiritsa ntchito

Pulogalamu yowonjezera ya modal imasintha zinthu zanu zobisika mukafuna, kudzera pa data kapena JavaScript. Imawonjezeranso .modal-openkusokoneza machitidwe <body>opukutira osasintha ndikupanga a .modal-backdropkuti apereke malo odina kuti muchotse ma modal owonetsedwa mukadina kunja kwa modal.

Kudzera muzochita za data

Yambitsani modali osalemba JavaScript. Khazikitsani data-toggle="modal"chinthu chowongolera, ngati batani, limodzi ndi data-target="#foo"kapena href="#foo"kutsata njira inayake kuti musinthe.

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

Kudzera pa JavaScript

Imbani modal yokhala ndi id myModalyokhala ndi mzere umodzi wa JavaScript:

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

Zosankha

Zosankha zitha kuperekedwa kudzera pa data kapena JavaScript. Pamawonekedwe a data, yonjezerani dzina lachisankho ku data-, monga mu data-backdrop="".

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

Njira

.modal(options)

Imayambitsa zomwe zili ngati modal. Imavomereza zomwe mungachite object.

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

.modal('toggle')

Imatembenuza pamanja modali. Imabwereranso kwa woyimba foniyo isanasonyezedwe kapena kubisidwa (ie zisanachitike shown.bs.modalkapena hidden.bs.modalchochitikacho).

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

.modal('show')

Pamanja amatsegula modali. Imabwereranso kwa woyimba foniyo isanasonyezedwe (ie zisanachitike shown.bs.modal).

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

.modal('hide')

Amabisa pamanja modali. Imabwereranso kwa woyimbira foniyo isanabisike (ie zisanachitike hidden.bs.modal).

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

.modal('handleUpdate')

Imawongolera momwe ma modal alili kuti athane ndi scrollbar ngati wina angawonekere, zomwe zingapangitse kuti modal kudumphira kumanzere.

Zimangofunika pamene kutalika kwa modal kumasintha pamene ili lotseguka.

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

Zochitika

Kalasi ya modal ya Bootstrap imawulula zochitika zingapo kuti zigwirizane ndi machitidwe a modal.

Zochitika zonse za modal zimachotsedwa pa modal yokha (ie pa <div class="modal">).

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

Dropdowns dropdown.js

Zitsanzo

Onjezani mindandanda yotsitsa pafupifupi chilichonse ndi pulogalamu yowonjezera iyi, kuphatikiza navbar, ma tabo, ndi mapiritsi.

M'kati mwa navbar

Mkati mwa mapiritsi

Kugwiritsa ntchito

Pogwiritsa ntchito mawonekedwe a data kapena JavaScript, pulogalamu yowonjezera yotsitsa imasintha zobisika (mindandanda yotsikira) posintha .openkalasiyo pamndandanda wa makolo.

Pazida zam'manja, kutsegula kutsika kumawonjezera .dropdown-backdropngati malo opopera kuti mutseke mindandanda yotsikira mukadina kunja kwa menyu, chofunikira pakuthandizira koyenera kwa iOS. Izi zikutanthauza kuti kusintha kuchokera pa menyu otsika otsegula kupita kumitundu ina yotsikira kumafuna kudina kowonjezera pa foni yam'manja.

Zindikirani: Makhalidwewa data-toggle="dropdown"amadaliridwa potseka mindandanda yazakudya pamlingo wogwiritsa ntchito, ndiye ndibwino kuti muzigwiritsa ntchito nthawi zonse.

Kudzera muzochita za data

Onjezani data-toggle="dropdown"ku ulalo kapena batani kuti musinthe kutsitsa.

<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 ma URL asungidwe ndi mabatani a ulalo, gwiritsani ntchito data-targetmawuwo m'malo mwa 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>

Kudzera pa JavaScript

Imbani zotsitsa kudzera pa JavaScript:

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

Zosankha

Palibe

Njira

$().dropdown('toggle')

Imatembenuza menyu yotsikira ya navbar yopatsidwa kapena kusakatula kwa tabu.

Zochitika

Zochitika zonse zotsika zimathamangitsidwa ku .dropdown-menu's parent element.

Zochitika zonse zotsikira zili ndi relatedTargetchinthu, chomwe mtengo wake ndi chinthu chosinthira nangula.

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

ScrollSpy scrollspy.js

Chitsanzo mu navbar

Pulagi ya ScrollSpy ndi yongosintha zokha za nav kutengera malo opukutira. Sungani malo omwe ali pansi pa navbar ndikuwona kusintha kwa kalasi yogwira. Zinthu zotsikirapo zidzawonetsedwanso.

Kugwiritsa ntchito

Pamafunika malo achibale

Ziribe kanthu njira yoyendetsera, scrollspy imafuna kugwiritsa ntchito position: relative;chinthu chomwe mukuchizonda. Nthawi zambiri izi ndi <body>. Pamene scrollspying pa zinthu zina osati <body>, onetsetsani kukhala ndi heightseti ndi overflow-y: scroll;ntchito.

Kudzera muzochita za data

Kuti muwonjezere machitidwe a scrollspy pamayendedwe anu apamwamba, onjezani data-spy="scroll"ku chinthu chomwe mukufuna kuti mukazonde (nthawi zambiri izi zitha kukhala <body>). Kenako onjezani mawonekedwewo data-targetndi ID kapena kalasi ya kholo la gawo lililonse la 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>

Kudzera pa JavaScript

Mukawonjezera position: relative;CSS yanu, imbani scrollspy kudzera pa JavaScript:

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

Njira

.scrollspy('refresh')

Mukamagwiritsa ntchito scrollspy molumikizana ndi kuwonjezera kapena kuchotsa zinthu mu DOM, muyenera kuyimbira njira yotsitsimutsa motere:

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

Zosankha

Zosankha zitha kuperekedwa kudzera pa data kapena JavaScript. Pamawonekedwe a data, yonjezerani dzina lachisankho ku data-, monga mu data-offset="".

Zochitika

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

Togglable tabs tab.js

Zitsanzo tabu

Onjezani magwiridwe antchito a tabu achangu, osinthika kuti musinthe pazigawo zazomwe zili m'deralo, ngakhale kudzera m'mindandanda yotsitsa. Ma tabu okhala ndi zisa sagwiritsidwa ntchito.

Kugwiritsa ntchito

Yambitsani ma tabable kudzera pa JavaScript (tabu iliyonse iyenera kutsegulidwa payekhapayekha):

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

Mutha kuyambitsa ma tabo amodzi m'njira zingapo:

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

Mutha kuyambitsa tabu kapena kuyenda kwamapiritsi osalemba JavaScript mwa kungotchulapo data-toggle="tab"kapena data-toggle="pill"pa chinthu. Kuonjezera navndi nav-tabsmakalasi pa tabu kudzagwiritsaul ntchito kalembedwe ka Bootstrap , pamene kuwonjezera ndi makalasi adzagwiritsa ntchito kalembedwe ka mapiritsi .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>

Kuzimiririka

Kuti ma tabo azizimire, onjezani .fadealiyense .tab-pane. Gawo loyamba la tabu liyeneranso .inkupangitsa kuti zomwe zili zoyamba ziwonekere.

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

Njira

$().tab

Imayatsa chinthu cha tabu ndi chidebe cha zinthu. Tabu iyenera kukhala ndi imodzi data-targetkapena hrefyolunjika ku chidebe mu DOM. M'zitsanzo zomwe zili pamwambapa, ma tabu ndi <a>s okhala ndi mawonekedwe data-toggle="tab".

.tab('show')

Imasankha tabu yomwe yaperekedwa ndikuwonetsa zomwe ikugwirizana nayo. Tabu ina iliyonse yomwe idasankhidwa kale imakhala yosasankhidwa ndipo zomwe zikugwirizana nazo zimabisika. Imabwereranso kwa woyimbayo tsamba la tabu lisanasonyezedwe (ie zisanachitike shown.bs.tab).

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

Zochitika

Mukawonetsa tabu yatsopano, zochitika zimayaka motere:

1. hide.bs.tab(pa tabu yomwe ikugwira ntchito pano)
2. show.bs.tab(pa tabu yomwe ikuyenera kuwonetsedwa)
3. hidden.bs.tab(pa tabu yogwira kale, yofanana ndi ya hide.bs.tabchochitikacho)
4. shown.bs.tab(pa tabu yomwe yangowonetsedwa kumene, yofanana ndi ya show.bs.tabchochitikacho)

Ngati palibe tabu yomwe idagwira kale, ndiye kuti hide.bs.tabndi hidden.bs.tabzochitika sizidzachotsedwa.

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

Tooltips tooltip.js

Kulimbikitsidwa ndi pulogalamu yowonjezera ya jQuery.tipsy yolembedwa ndi Jason Frame; Tooltips ndi mtundu wosinthidwa, womwe sudalira zithunzi, gwiritsani ntchito CSS3 pa makanema ojambula pamanja, ndi mawonekedwe a data posungira mitu yanu.

Zida zokhala ndi ziro zazitali sizimawonetsedwa.

Zitsanzo

Yendani pamwamba pa maulalo omwe ali pansipa kuti muwone zida zothandizira:

Chida chokhazikika

Zosankha zinayi zilipo: pamwamba, kumanja, pansi, ndi kumanzere.

Njira zinayi

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

Kugwiritsa ntchito

Pulogalamu yowonjezera ya tooltip imapanga zokhutira ndi zolembera zomwe zimafunidwa, ndipo mwachisawawa zimayika zida pambuyo pa zomwe zimayambitsa.

Yambitsani chida kudzera pa JavaScript:

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

Markup

Cholembera chofunikira pa chida ndi mawonekedwe chabe datandipo titlepa chinthu cha HTML mukufuna kukhala ndi chida. Zolemba zopangira zida ndizosavuta, ngakhale zimafunikira malo (mwachisawawa, zokhazikitsidwa topndi pulogalamu yowonjezera).

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

Zosankha

Zosankha zitha kuperekedwa kudzera pa data kapena JavaScript. Pamawonekedwe a data, yonjezerani dzina lachisankho ku data-, monga mu data-animation="".

Njira

$().tooltip(options)

Imangiriza chogwirizira ku zida zosonkhanitsira.

.tooltip('show')

Imawulula zida za chinthu. Imabwerera kwa woyimbirayo chida chisanasonyezedwe (ie zisanachitike shown.bs.tooltip). Izi zimatengedwa ngati "mawu" oyambitsa chida. Zida zokhala ndi ziro zazitali sizimawonetsedwa.

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

.tooltip('hide')

Imabisa chida cha chinthu. Imabwerera kwa woyimbirayo chida chisanabisike (ie zisanachitike hidden.bs.tooltip). Izi zimatengedwa ngati "mawu" oyambitsa chida.

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

.tooltip('toggle')

Imatembenuza chida cha chinthu. Imabwerera kwa woyimbirayo chida chisanasonyezedwe kapena kubisidwa (ie chisanachitike shown.bs.tooltipkapena hidden.bs.tooltipchochitikacho). Izi zimatengedwa ngati "mawu" oyambitsa chida.

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

.tooltip('destroy')

Imabisa ndi kuwononga chida cha chinthu. Zida zomwe zimagwiritsa ntchito kugawira ena (omwe amapangidwa pogwiritsa ntchito selectorkusankha ) sizingawonongeke pazigawo zoyambitsa mbadwa.

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

Zochitika

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

Popovers popover.js

Onjezani zophatikizika zazing'ono, monga zomwe zili pa iPad, kuzinthu zilizonse zachidziwitso chachiwiri.

Popovers omwe mutu wawo ndi zomwe zili zazitali sizimawonetsedwa.

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

Zitsanzo

Static popover

Zosankha zinayi zilipo: pamwamba, kumanja, pansi, ndi kumanzere.

Chiwonetsero chamoyo

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

Njira zinayi

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

Chotsani mukadina kwina

Gwiritsani ntchito focuschoyambitsa kuti muchotse popover pakadina kotsatira komwe wogwiritsa akupanga.

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

Kugwiritsa ntchito

Yambitsani popover kudzera pa JavaScript:

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

Zosankha

Zosankha zitha kuperekedwa kudzera pa data kapena JavaScript. Pamawonekedwe a data, yonjezerani dzina lachisankho ku data-, monga mu data-animation="".

Njira

$().popover(options)

Imayambitsa ma popover pazosonkhanitsira zinthu.

.popover('show')

Imawulula kuchuluka kwa zinthu. Imabwereranso kwa woyimba foniyo isanawonetsedwe (ie zisanachitike shown.bs.popover). Izi zimaganiziridwa kuti ndizoyambitsa "kuyambitsa" kwa popover. Popovers omwe mutu wawo ndi zomwe zili zazitali sizimawonetsedwa.

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

.popover('hide')

Imabisa kuchuluka kwa zinthu. Imabwereranso kwa woyimba foniyo isanabisike (ie zisanachitike hidden.bs.popover). Izi zimaganiziridwa kuti ndizoyambitsa "kuyambitsa" kwa popover.

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

.popover('toggle')

Imasintha kuphulika kwa chinthu. Imabwereranso kwa woyimba foniyo isanawonetsedwe kapena kubisidwa (ie zisanachitike shown.bs.popoverkapena hidden.bs.popoverchochitikacho). Izi zimaganiziridwa kuti ndizoyambitsa "kuyambitsa" kwa popover.

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

.popover('destroy')

Imabisa ndikuwononga kufalikira kwa chinthu. Ma Popovers omwe amagwiritsa ntchito kugawira ena (omwe amapangidwa pogwiritsa ntchito selectormwayi ) sangawonongedwe paokha pazoyambitsa zoyambitsa.

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

Zochitika

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

Mauthenga ochenjeza alert.js

Zidziwitso zachitsanzo

Onjezani magwiridwe antchito ku mauthenga onse ochenjeza omwe ali ndi pulogalamu yowonjezera iyi.

Mukamagwiritsa ntchito .closebatani, akuyenera kukhala mwana woyamba .alert-dismissiblendipo palibe mawu omwe angabwere patsogolo pake.

Kugwiritsa ntchito

Ingowonjezerani data-dismiss="alert"ku batani lanu lakutseka kuti mungopereka chidziwitso chapafupi. Kutseka chenjezo kumachotsa ku DOM.

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

Kuti zidziwitso zanu zigwiritse ntchito makanema ojambula potseka, onetsetsani kuti zili .fadendi .inmakalasi omwe agwiritsidwa ntchito kale.

Njira

$().alert()

Imachititsa chidwi kumvetsera zochitika zomwe zimadulidwa pazotsatira zomwe zili ndi tanthauzo data-dismiss="alert". (Sizofunikira mukamagwiritsa ntchito data-api's auto-initialization.)

$().alert('close')

Kutseka chenjezo pochotsa mu DOM. Ngati ma .fadendi .inmakalasi alipo pa chinthucho, chenjezo lizimiririka lisanachotsedwe.

Zochitika

Pulogalamu yowonjezera yochenjeza ya Bootstrap imawulula zochitika zingapo kuti zigwirizane ndi ntchito zochenjeza.

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

Mabatani batani.js

Chitani zambiri ndi mabatani. Batani lowongolera likunena kapena pangani magulu a mabatani azinthu zambiri ngati zida.

Zomveka

Onjezani data-loading-text="Loading..."kuti mugwiritse ntchito potsitsa batani.

Mbali imeneyi yachotsedwa ntchito kuyambira v3.3.5 ndipo yachotsedwa mu 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>

Kusintha kumodzi

Onjezani data-toggle="button"kuti mutsegule batani limodzi.

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

Bokosi / Wailesi

Onjezani data-toggle="buttons"ku .btn-groupbokosi loyang'ana kapena zolowetsa wailesi kuti mutsegule masitayelo awo.

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

Njira

$().button('toggle')

Imatembenuza dziko lokankhira. Imawonetsa batani kuwonekera kuti yayatsidwa.

$().button('reset')

Bwezerani mawonekedwe a batani - kusintha mawu kukhala mawu oyamba. Njirayi ndi yofanana ndipo imabwerera kukonzanso kusanamalize.

$().button(string)

Imasintha mawu kukhala mtundu uliwonse wa mawu.

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

Kugwa collapse.js

Flexible plugin yomwe imagwiritsa ntchito makalasi angapo kuti ikhale yosavuta kusintha.

Chitsanzo

Dinani mabatani omwe ali pansipa kuti muwonetse ndikubisa chinthu china kudzera mukusintha kwamakalasi:

• .collapseamabisa zomwe zili
• .collapsingimagwiritsidwa ntchito panthawi ya kusintha
• .collapse.inzikuwonetsa zomwe zili

Mutha kugwiritsa ntchito ulalo wokhala ndi mawonekedwe href, kapena batani lokhala ndi tanthauzo data-target. Muzochitika zonsezi, data-toggle="collapse"ndikofunikira.

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

Chitsanzo cha accordion

Wonjezerani kugwa kwachisawawa kuti mupange accordion ndi gawo lagawo.

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

Ndikothekanso kusinthana .panel-bodys ndi .list-groups.

Kugwiritsa ntchito

Pulagi ya kugwa imagwiritsa ntchito makalasi angapo kuti athe kunyamula zolemetsa:

• .collapseamabisa zomwe zili
• .collapse.inzikuwonetsa zomwe zili
• .collapsingimawonjezeredwa pamene kusintha kukuyamba, ndikuchotsedwa ikatha

Maphunzirowa amapezeka mu component-animations.less.

Kudzera muzochita za data

Ingowonjezerani data-toggle="collapse"ndi a data-targetku chinthucho kuti mugawiretu chiwongolero cha chinthu chomwe chimatha kutha. Malingaliro data-targetamavomereza chosankha cha CSS kuti agwiritse ntchito kugwa. Onetsetsani kuti mwawonjezera kalasi collapseku chinthu chomwe chimatha. Ngati mukufuna kuti isatseguke, onjezani kalasi yowonjezera in.

Kuti muwonjezere kasamalidwe kagulu ka accordion ku chiwongolero chosokonekera, onjezani mawonekedwe a data data-parent="#selector". Onani pachiwonetsero kuti muwone izi zikugwira ntchito.

Kudzera pa JavaScript

Yambitsani pamanja ndi:

$('.collapse').collapse()

Zosankha

Zosankha zitha kuperekedwa kudzera pa data kapena JavaScript. Pamawonekedwe a data, yonjezerani dzina lachisankho ku data-, monga mu data-parent="".

Njira

.collapse(options)

Imatsegula zomwe zili patsamba lanu ngati chinthu chosokonekera. Imavomereza zomwe mungachite object.

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

.collapse('toggle')

Imasintha zinthu zomwe zimagundika kuti ziwonetsedwe kapena zobisika. Imabwereranso kwa woyimbayo chinthu chomwe chingathe kutha sichinasonyezedwe kapena kubisika (ie chisanachitike shown.bs.collapsekapena hidden.bs.collapsechochitikacho).

.collapse('show')

Imawonetsa chinthu chomwe chimatha kutha. Imabwereranso kwa woyimbayo chinthu chomwe chingathe kugwetsedwa chisanasonyezedwe (mwachitsanzo, shown.bs.collapsechochitikacho chisanachitike).

.collapse('hide')

Imabisa chinthu chomwe chimatha kutha. Imabwereranso kwa woyimbirayo chinthu chosokonekera chisanabisike (mwachitsanzo, hidden.bs.collapsechochitikacho chisanachitike).

Zochitika

Gulu la kugwa la Bootstrap likuwonetsa zochitika zingapo zokokera pakugwa.

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

Carousel carousel.js

Chigawo cha slideshow cha kupalasa njinga kudzera muzinthu, ngati carousel. Ma carousel okhala ndi zisa sagwiritsidwa ntchito.

Zitsanzo

Zam'mbuyo Ena

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

Mawu omasulira osasankha

Onjezani mawu omasulira pamasiladi anu mosavuta ndi .carousel-captionchinthu chomwe chili mkati mwa .item. Ikani pafupifupi HTML iliyonse yomwe mwasankha mkati momwemo ndipo idzayanjanitsidwa ndi kusinthidwa.

Chizindikiro choyamba cha slide

Nulla vitae elit libero, pharetra augue mollis interdum.

Cholembera chachiwiri

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Silayidi yachitatu

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

Zam'mbuyo Ena

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

Kugwiritsa ntchito

Ma carousel angapo

Ma carousel amafuna kugwiritsa ntchito idchotengera chakunja (the .carousel) kuti zowongolera za carousel zizigwira bwino ntchito. Mukamawonjezera ma carousel angapo, kapena posintha ma carousel id, onetsetsani kuti mwasintha zowongolera zoyenera.

Kudzera muzochita za data

Gwiritsani ntchito mawonekedwe a data kuti muwongolere malo a carousel mosavuta. data-slideimavomereza mawu osakira prevkapena next, omwe amasintha malo a slide mogwirizana ndi momwe alili pano. Kapenanso, gwiritsani ntchito data-slide-tokupititsa index ya silayidi ku carousel data-slide-to="2", yomwe imasamutsa malo a slide kupita ku index inayake kuyambira ndi 0.

Makhalidwewa data-ride="carousel"amagwiritsidwa ntchito kuyika carousel ngati yosangalatsa kuyambira pamasamba. Sichingagwiritsidwe ntchito limodzi ndi (zosafunikira komanso zosafunikira) kutsegulira kwa JavaScript kwa carousel yomweyo.

Kudzera pa JavaScript

Imbani carousel pamanja ndi:

$('.carousel').carousel()

Zosankha

Zosankha zitha kuperekedwa kudzera pa data kapena JavaScript. Pamawonekedwe a data, yonjezerani dzina lachisankho ku data-, monga mu data-interval="".

Njira

.carousel(options)

Imayambitsa carousel ndi zosankha zomwe mungasankhe objectndikuyamba kuyendetsa zinthu.

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

.carousel('cycle')

Amazungulira zinthu za carousel kuchokera kumanzere kupita kumanja.

.carousel('pause')

Imayimitsa carousel kuti isayendetse zinthu.

.carousel(number)

Azunguliza carousel ku chimango china (0 kutengera, ofanana ndi gulu).

.carousel('prev')

Kuzungulira kwa chinthu cham'mbuyo.

.carousel('next')

Kuzungulira ku chinthu chotsatira.

Zochitika

Kalasi ya carousel ya Bootstrap imawulula zochitika ziwiri zolumikizana ndi machitidwe a carousel.

Zochitika zonsezi zili ndi zotsatirazi zowonjezera:

• direction: Njira yomwe carousel ikutsetserekera (kaya "left"kapena "right").
• relatedTarget: Chigawo cha DOM chomwe chikusunthidwa kuti chikhale chogwira ntchito.

Zochitika zonse za carousel zimathamangitsidwa pa carousel yomwe (ie pa <div class="carousel">).

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

Ikani affix.js

Chitsanzo

Pulagi ya affix imasintha position: fixed;ndi kuzimitsa, kutengera zomwe zapezeka ndi position: sticky;. The subnavigation kumanja ndi moyo chiwonetsero cha affix plugin.

Kugwiritsa ntchito

Gwiritsani ntchito pulogalamu yowonjezera pogwiritsa ntchito mawonekedwe a data kapena pamanja ndi JavaScript yanu. Muzochitika zonsezi, muyenera kupereka CSS pamayimidwe ndi m'lifupi mwazolemba zanu.

Zindikirani: Osagwiritsa ntchito pulogalamu yowonjezera pa chinthu chomwe chili m'malo okhazikika, monga mzati wokokedwa kapena kukankhidwa, chifukwa cha vuto la Safari .

Kuyika kudzera pa CSS

Pulogalamu yowonjezera imasinthasintha pakati pa makalasi atatu, iliyonse ikuyimira dziko linalake: .affix, .affix-top, ndi .affix-bottom. Muyenera kupereka masitayelo, kupatula position: fixed;pa .affix, pamakalasi awa nokha (osadalira pulogalamu yowonjezera iyi) kuti muthane ndi malo enieni.

Umu ndi momwe plugin ya affix imagwirira ntchito:

1. Kuyamba, pulogalamu yowonjezera imawonjezera .affix-topkusonyeza kuti chinthucho chili pamwamba kwambiri. Pakadali pano palibe malo a CSS omwe amafunikira.
2. Kudutsa pa chinthu chomwe mukufuna kuyika kuyenera kuyambitsa kuyika kwenikweni. Apa ndi pamene .affixm'malo .affix-topndi seti position: fixed;(zoperekedwa ndi Bootstrap's CSS).
3. Ngati kutsika kwapansi kwafotokozedwa, kupukusa kuyenera kusinthidwa .affixndi .affix-bottom. Popeza zochotsera ndizosankha, kukhazikitsa imodzi kumafuna kuti muyike CSS yoyenera. Pankhaniyi, onjezani position: absolute;ngati kuli kofunikira. Pulagiyi imagwiritsa ntchito mawonekedwe a data kapena njira ya JavaScript kuti idziwe komwe mungayike chinthucho kuchokera pamenepo.

Tsatirani njira zomwe zili pamwambazi kuti mukhazikitse CSS yanu pazosankha zilizonse zomwe zili pansipa.

Kudzera muzochita za data

Kuti muwonjezeke mosavuta kuzinthu zilizonse, ingowonjezerani data-spy="affix"chinthu chomwe mukufuna kuti muzichiyang'ana. Gwiritsani ntchito ma offsets kutanthauzira nthawi yosinthira kusindikiza kwa chinthu.

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

Kudzera pa JavaScript

Imbani pulogalamu yowonjezera kudzera pa JavaScript:

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

Zosankha

Zosankha zitha kuperekedwa kudzera pa data kapena JavaScript. Pamawonekedwe a data, yonjezerani dzina lachisankho ku data-, monga mu data-offset-top="200".

Njira

.affix(options)

Imatsegula zomwe zili patsamba lanu ngati zophatikizika. Imavomereza zomwe mungachite object.

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

.affix('checkPosition')

Imawerengetseranso malo a affix kutengera miyeso, malo, ndi malo a mpukutu wa zinthu zoyenera. The .affix, .affix-top, and .affix-bottommakalasi amawonjezedwa kapena kuchotsedwa pazomwe zayikidwa molingana ndi dziko latsopano. Njirayi iyenera kutchedwa nthawi iliyonse miyeso ya zomwe zayikidwa kapena zomwe mukufuna zisinthidwa, kuti zitsimikizire kuti zomwe zaikidwazo zili bwino.

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

Zochitika

Pulogalamu yowonjezera ya Bootstrap imawulula zochitika zingapo kuti zigwirizane ndi magwiridwe antchito.