Tirohanga

Takitahi, whakahiato ranei

Ka taea te whakauru takitahi (ma te whakamahi i nga *.jskonae takitahi a Bootstrap), i te wa kotahi ranei (ma te whakamahi i bootstrap.jste iti ranei bootstrap.min.js).

Nga huanga raraunga

Ka taea e koe te whakamahi i nga taputapu Bootstrap katoa ma te tohu tohu API me te kore e tuhi i tetahi rarangi JavaScript. Koinei te API akomanga tuatahi a Bootstrap, a me whakaaro tuatahi koe ina whakamahi ana i te mono.

E ai ki tera, i etahi ahuatanga ka pai ki te whakaweto i tenei mahi. Na reira, ka tukuna ano e matou te kaha ki te whakakore i te API huanga raraunga ma te wetewete i nga huihuinga katoa i runga i te tuhinga kua whakaingoa ki te data-api. Ko te ahua tenei:

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

Hei taapiri, ki te aro ki tetahi mono motuhake, whakauruhia te ingoa o te mono hei mokowāingoa me te mokowāingoa raraunga-api penei:

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

API Papatono

E whakapono ana matou ka taea e koe te whakamahi i nga taputapu Bootstrap katoa ma te JavaScript API. Ko nga API whanui katoa he tikanga kotahi, ka taea te mekameka, ka whakahoki i te kohinga i mahia.

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

Ko nga tikanga katoa me whakaae ki tetahi ahanoa whiringa, he aho e aro ana ki tetahi tikanga, kaore ranei (e timata ana i te mono me te whanonga taunoa):

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

Ka whakaatu hoki ia mono i tana kaihanga mata ki runga i tetahi Constructorrawa: $.fn.popover.Constructor. Mena kei te pirangi koe ki te tiki i tetahi tauira mono, tiki tika mai i tetahi huānga: $('[rel="popover"]').data('popover').

Tautuhinga taunoa

Ka taea e koe te huri i nga tautuhinga taunoa mo te mono ma te whakarereke i te Constructor.DEFAULTSahanoa o te mono:

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

Karekau he pakanga

I etahi wa ka tika te whakamahi i nga taputapu Bootstrap me etahi atu angamahi UI. I roto i enei ahuatanga, ka taea e nga tukinga mokowā ingoa i etahi wa. Mena ka pa mai tenei, ka waea atu koe .noConflictki te mono e hiahia ana koe ki te whakahoki i te uara o.

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

Nga Takahanga

Ka whakarato a Bootstrap i nga huihuinga ritenga mo te nuinga o nga mahi ahurei. Ko te tikanga, ka puta mai enei i roto i te ahua whai mutunga me te ahua o mua - kei reira te infinitive (ex. show) ka puta i te timatanga o te takahanga, a ko tona puka participle o mua (ex. shown) ka puta i te otinga o te mahi.

Mai i te 3.0.0, kua whakaingoatia nga kaupapa Bootstrap katoa.

Ko nga huihuinga mutunga kore e whakarato preventDefaulttaumahinga. Ka whai waahi tenei ki te aukati i te mahi i mua i te tiimata.

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

Tau putanga

Ko te putanga o ia o nga taputapu jQuery a Bootstrap ka taea te uru ma te VERSIONtaonga o te kaihanga o te mono. Hei tauira, mo te taputapu taputapu:

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

Karekau he takahuri motuhake ina monokia a JavaScript

Ko nga taputapu a Bootstrap e kore e hoki whakamuri i te wa e monoa ana a JavaScript. Mena kei te whakaaro koe ki te wheako o te kaiwhakamahi i tenei keehi, whakamahia <noscript>ki te whakamarama i te ahuatanga (me pehea te whakahohe ano i te JavaScript) ki o kaiwhakamahi, me te taapiri i a koe ake ritenga takahuri.

Whakawhiti whakawhiti.js

Mo nga whakawhitinga

Mo nga paanga whakawhiti ngawari, whakauruhia transition.jskia kotahi ki te taha o etahi atu konae JS. Mēnā kei te whakamahi koe i te whakahiato (he iti ranei) bootstrap.js, kaore he take ki te whakauru i tenei—kei kona ano.

He aha kei roto

Ko te Transition.js he kaiawhina taketake mo transitionEndnga huihuinga me te emulator whakawhiti CSS. Ka whakamahia e etahi atu mono ki te tirotiro mo te tautoko whakawhiti CSS me te hopu i nga whakawhitinga iri.

Te whakakore i nga whakawhitinga

Ka taea te whakakore i nga whakawhitinga puta noa i te ao ma te whakamahi i te waahanga JavaScript e whai ake nei, me haere mai i muri i te utaina transition.js(me bootstrap.jste , ahakoa bootstrap.min.jste ahua) kua utaina:

$.support.transition = false

Modal modal.js

Ko nga tauira he mea whakamaarama, engari he ngawari, he korero akiaki me te iti rawa o nga mahi e hiahiatia ana me nga taunoa atamai.

Na te ahua o te HTML5 e tautuhi ana i ona tohu, autofocuskaore he painga o te huanga HTML ki nga tikanga Bootstrap. Hei whakatutuki i taua paanga, whakamahia etahi ritenga JavaScript:

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

Tauira

Tauira pateko

He tikanga tuku me te pane, te tinana, me te huinga hohenga kei te hiku.

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

Demo ora

Takahurihia he tikanga ma te JavaScript ma te paatene i te paatene kei raro nei. Ka paheke ki raro ka memeha mai i te tihi o te wharangi.

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

Rahi whiriwhiri

E rua nga rahi o nga tauira, e waatea ana ma nga karaehe whakarereke hei whakanoho ki runga i te .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>

Tango hākoritanga

Mo nga tauira ka puta noa, kaua e memeha ki te tiro, tangohia te .fadekaraehe mai i to tohu tohu.

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

Te whakamahi i te punaha matiti

Hei tango painga i te punaha matiti Bootstrap i roto i te tikanga, kohanga noa .rowki roto i te .modal-bodykatahi ka whakamahi i nga karaehe punaha matiti noa.

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

Te rereke i nga ihirangi aratau i runga i te paatene keu

He paihere o nga patene e whakaoho ana i te ahua kotahi, he paku rereke nga ihirangi? Whakamahia event.relatedTargetme nga huanga HTMLdata-* ( ma te jQuery pea ) ki te whakarereke i nga ihirangi o te tikanga i runga i te paatene i paatohia. Tirohia nga tuhinga Modal Events mo nga taipitopito mo 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)
})

Whakamahinga

Ko te mono mono ka huri i to ihirangi huna i runga i te tono, ma nga huanga raraunga, JavaScript ranei. Ka taapiri atu ano .modal-openki te <body>ki te whakakore i te whanonga panuku taunoa me te whakaputa .modal-backdropi tetahi waahi paatoo mo te whakakore i nga tikanga kua whakaatuhia ina paato i waho o te aratau.

Ma nga huanga raraunga

Whakahohehia he tikanga me te kore e tuhi JavaScript. Whakatakotoria data-toggle="modal"ki runga i tetahi huānga kaiwhakahaere, penei i te paatene, me te data-target="#foo", href="#foo"ki te whaaia tetahi aratau motuhake hei takahuri.

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

Ma te JavaScript

Karangahia he tikanga me te id myModalme te rarangi kotahi o JavaScript:

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

Kōwhiringa

Ko nga whiringa ka taea te tuku ma nga huanga raraunga, JavaScript ranei. Mo nga huanga raraunga, apitihia te ingoa whiringa ki data-, penei i te data-backdrop="".

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

Nga tikanga

.modal(options)

Whakahohehia to ihirangi hei aratau. Ka whakaae ki nga whiringa whiriwhiri object.

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

.modal('toggle')

Ka takahuri a-ringa i te ahua. Ka hoki ki te kaiwaea i mua i te whakaaturanga, i te hunanga ranei o te tikanga (arā, i mua i te puta mai o shown.bs.modalte hidden.bs.modaltakahanga).

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

.modal('show')

Ka whakatuwhera a-ringa i te tikanga. Ka hoki ki te kaiwaea i mua i te whakaaturanga o te tikanga (ara i mua i te shown.bs.modalputa o te takahanga).

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

.modal('hide')

Ka huna a-ringa i tetahi tikanga. Ka hoki ki te kaiwaea i mua i te hunanga o te tikanga (ara i mua i te hidden.bs.modalputa o te takahanga).

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

.modal('handleUpdate')

Ka whakatika i te tuunga o te aratau ki te paahi i te pae panuku mena ka puta mai tetahi, ka peke te aratau ki te taha maui.

Ka hiahiatia anake ina huri te teitei o te aratau i te wa e tuwhera ana.

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

Nga Takahanga

Ko te karaehe aratau a Bootstrap e whakaatu ana i etahi huihuinga mo te hono atu ki nga mahi tikanga.

Ko nga huihuinga aratau katoa ka puhia ki te aratau ake (arā i te <div class="modal">).

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

Whakataka iho.js

Tauira

Taapirihia nga tahua takaiho ki nga mea katoa me tenei mono ngawari, tae atu ki te pae whakatere, ripa, me nga pire.

I roto i te pae whakatere

I roto i nga pire

Whakamahinga

Ma nga huanga raraunga, JavaScript ranei, ka takahurihia e te mono takaiho nga ihirangi huna (nga tahua takaiho) ma te takahuri i te .openkaraehe ki te rarangi matua.

I runga i nga taputapu pūkoro, ko te whakatuwhera i te maturuturunga iho ka taapirihia he .dropdown-backdropwaahi tap mo te kati i nga tahua takaiho ka paopao ki waho o te tahua, he whakaritenga mo te tautoko tika a iOS. Ko te tikanga ko te huri mai i te tahua takaiho tuwhera ki tetahi tahua takaiho rereke me pa atu ki runga waea pūkoro.

Tuhipoka: Ka whakawhirinakihia te data-toggle="dropdown"huanga mo te kati i nga tahua takaiho i te taumata tono, no reira he pai ki te whakamahi i nga wa katoa.

Ma nga huanga raraunga

Tāpirihia data-toggle="dropdown"ki tētahi hono, pātene rānei hei takahuri i te takaiho.

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

Kia mau tonu nga URL me nga paatene hono, whakamahia te data-targethuanga hei utu 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>

Ma te JavaScript

Karangatia nga takaiho ma te JavaScript:

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

Kōwhiringa

Karekau

Nga tikanga

$().dropdown('toggle')

Ka takahuri i te tahua takaiho o te pae whakaterenga kua tohua, te whakatere ripa ranei.

Nga Takahanga

Ka pupuhihia nga takahanga takaiho katoa ki te .dropdown-menuhuānga matua o te.

He relatedTargettaonga nga takahanga takaiho katoa, ko tona uara ko te huānga punga takahuri.

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

ScrollSpy scrollspy.js

Tauira i roto i te navbar

Ko te mono ScrollSpy mo te whakahou aunoa i nga whaainga nav i runga i te tuunga panuku. Panuku i te waahi kei raro i te pae whakatere ka mataki i te huringa o te karaehe hohe. Ka miramirahia nga mea iti takaiho.

Whakamahinga

Me whakarite tūnga whanaunga

Ahakoa te tikanga whakatinanatanga, me whakamahi te scrollspy i position: relative;runga i te huānga e torotoro ana koe. I te nuinga o nga wa koinei te <body>. I te wa e tirotirohia ana nga huānga i tua atu i te <body>, me whai heighthuinga me overflow-y: scroll;te tono.

Ma nga huanga raraunga

Kia ngawari te taapiri i te whanonga scrollspy ki to whakatere pae runga, taapiri atu data-spy="scroll"ki te huānga e hiahia ana koe ki te tutei (te nuinga ko te <body>). Na ka taapirihia te data-targethuanga me te ID, te karaehe ranei o te huānga matua o tetahi .navwaahanga 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>

Ma te JavaScript

Whai muri i te taapiri position: relative;i to CSS, waeahia te scrollspy ma te JavaScript:

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

Nga tikanga

.scrollspy('refresh')

Ina whakamahi i te scrollspy me te taapiri, te tango ranei i nga huānga mai i te DOM, me waea koe ki te tikanga whakahou penei:

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

Kōwhiringa

Ko nga whiringa ka taea te tuku ma nga huanga raraunga, JavaScript ranei. Mo nga huanga raraunga, apitihia te ingoa whiringa ki data-, penei i te data-offset="".

Nga Takahanga

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

ripa takahuri tab.js

Tauira ripa

Tāpirihia te mahinga ripa tere, hihiko ki te whakawhiti i roto i nga pihanga o nga ihirangi o te rohe, ahakoa ma nga tahua takaiho. Kaore i te tautokohia nga ripa kohanga.

Whakamahinga

Whakahohehia nga ripa ripa ma te JavaScript (me whakahohe takitahi ia ripa):

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

Ka taea e koe te whakahohe i nga ripa takitahi i roto i nga huarahi maha:

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

Tohutohu

Ka taea e koe te whakahohe i te whakatere ripa, pire ranei me te kore e tuhi i tetahi JavaScript ma te tohu noa , ki runga data-toggle="tab"ranei data-toggle="pill"i tetahi huānga. Ko te taapiri i nga navme nav-tabsnga karaehe ki te ripa ka whakamahi i te whakaahua ripaul Bootstrap , i te taapiri i nga karaehe me nga karaehe ka whakamahia te hanga pire .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>

Painga muhani

Kia memeha haere nga ripa, taapiri atu .fadeki ia .tab-pane. Ko te pihanga ripa tuatahi me .inwhakaatu te ihirangi tuatahi.

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

Nga tikanga

$().tab

Ka whakahohe i te huānga ripa me te ipu ihirangi. Me whai Ripa he kohanga ipu data-targetranei hrefi te DOM. I nga tauira o runga ake nei, ko nga ripa ko nga <a>s me nga data-toggle="tab"huanga.

.tab('show')

Ka kowhiri i te ripa kua hoatu ka whakaatu i ona ihirangi e hono ana. Ko etahi atu ripa i kowhiria i mua ka kore i tohua, ka hunahia nga ihirangi e hono ana. Ka hoki ki te kaiwaea i mua i te whakaaturanga o te pihanga ripa (arā i mua i te shown.bs.tabputa o te takahanga).

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

Nga Takahanga

Ina whakaatu ana i te ripa hou, ka pupuhi nga takahanga i roto i te raupapa e whai ake nei:

1. hide.bs.tab(i runga i te ripa hohe onāianei)
2. show.bs.tab(i runga i te ripa hei whakaatu)
3. hidden.bs.tab(i runga i te ripa hohe o mua, he rite ki te hide.bs.tabkaupapa)
4. shown.bs.tab(i runga i te ripa katahi ano ka hohe ka whakaatuhia, he rite tonu ki tera mo te show.bs.tabtakahanga)

Mena karekau he ripa i hohe, karekau te hide.bs.tabme hidden.bs.tabnga takahanga e pana.

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

Aki taputapu tooltip.js

I whakaaweahia e te mono jQuery.tipsy pai i tuhia e Jason Frame; Ko nga aki-utauta he putanga whakahou, kaore e whakawhirinaki ki nga whakaahua, whakamahi CSS3 mo nga pakiwaituhi, me nga huanga-raraunga mo te rokiroki taitara rohe.

Ko nga aki utauta me nga taitara kore-roa e kore e whakaatuhia.

Tauira

Whakaparo ki runga i nga hononga i raro nei kia kite i nga aki taputapu:

Aki taputapu pateko

E wha nga whiringa e waatea ana: runga, matau, raro me te taha maui.

E wha nga ahunga

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

Whakamahinga

Ko te taputapu taputapu e whakaputa ihirangi me te tohu i runga i te tono, a ma te taunoa ka tuu i nga aki taputapu i muri i o raatau huānga whakaoho.

Whakaohohia te aki taputapu ma te JavaScript:

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

Tohutohu

Ko te tohu e hiahiatia ana mo te akiutauta he datahuanga anake, titlekei runga i te huānga HTML e hiahia ana koe ki te whai aki taputapu. He maamaa noa te tohu tohu taputapu, ahakoa me whai waahi (ma te taunoa, ka whakatauhia tope te mono).

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

Kōwhiringa

Ko nga whiringa ka taea te tuku ma nga huanga raraunga, JavaScript ranei. Mo nga huanga raraunga, apitihia te ingoa whiringa ki data-, penei i te data-animation="".

Nga tikanga

$().tooltip(options)

Ka taapirihia he kaihautu taputapu ki tetahi kohinga huānga.

.tooltip('show')

He whakaatu i te aki taputapu o tetahi huānga. Ka hoki ki te kaiwaea i mua i te whakaaturanga o te aki taputapu (arā i mua i te shown.bs.tooltipputa o te takahanga). Ka kiia tenei he "a-ringa" te whakaoho o te aki taputapu. Ko nga aki taputapu whai taitara kore-roa e kore e whakaatuhia.

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

.tooltip('hide')

Hunaia te aki taputapu o tetahi huānga. Ka hoki ki te kaiwaea i mua i te hunanga o te aki taputapu (ara i mua i te hidden.bs.tooltipputa o te takahanga). Ka kiia tenei he "a-ringa" te whakaoho o te aki taputapu.

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

.tooltip('toggle')

Ka takahurihia te akiutauta o tetahi huānga. Ka hoki ki te kaiwaea i mua i te whakaaturanga, i te hunanga ranei o te aki taputapu (arā, i mua i te puta o shown.bs.tooltipte hidden.bs.tooltiptakahanga). Ka kiia tenei he "a-ringa" te whakaoho o te aki taputapu.

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

.tooltip('destroy')

He huna me te whakangaro i te aki taputapu o tetahi huānga. Ko nga aki utauta e whakamahi ana i te tukunga (he mea hanga ma te whakamahi i te selectorwhiringa ) kaore e taea te whakakore takitahi i runga i nga huānga whakaoho uri.

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

Nga Takahanga

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

Popovers popover.js

Tāpirihia nga whakakikorua iti o te ihirangi, penei i era i runga i te iPad, ki tetahi huānga mo nga korero tuarua mo te whare.

Ko nga Popovers ko te taitara me nga ihirangi he kore-roa te roa e kore e whakaatuhia.

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

Tauira

Pouaka pateko

E wha nga whiringa e waatea ana: runga, matau, raro me te taha maui.

Demo ora

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

E wha nga ahunga

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

Waiho i runga i te patene ka whai ake

Whakamahia te focuskeu ki te whakakore i nga popovers i runga i te paato ka mahia e te kaiwhakamahi.

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

Whakamahinga

Whakahohehia nga popovers ma JavaScript:

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

Kōwhiringa

Ko nga whiringa ka taea te tuku ma nga huanga raraunga, JavaScript ranei. Mo nga huanga raraunga, apitihia te ingoa whiringa ki data-, penei i te data-animation="".

Nga tikanga

$().popover(options)

He arataki popover mo te kohinga huānga.

.popover('show')

He whakaatu i te popover o tetahi huānga. Ka hoki ki te kaiwaea i mua i te whakaaturanga o te popover (arā i mua i te shown.bs.popoverputa o te takahanga). Ka kiia tenei he "a-ringa" te whakaoho o te popover. Ko nga Popovers ko te taitara me nga ihirangi he kore-roa te roa e kore e whakaatuhia.

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

.popover('hide')

Hunaia te popover o te huānga. Ka hoki ki te kaiwaea i mua i te hunanga o te popover (arā i mua i te hidden.bs.popoverputa o te takahanga). Ka kiia tenei he "a-ringa" te whakaoho o te popover.

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

.popover('toggle')

Ka takahuri i te poupou o tetahi huānga. Ka hoki ki te kaiwaea i mua i te whakaaturanga, i hunahia ranei te popover (arā, i mua i te puta o shown.bs.popoverte hidden.bs.popovertakahanga). Ka kiia tenei he "a-ringa" te whakaoho o te popover.

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

.popover('destroy')

He huna me te whakangaro i te popover o tetahi huānga. Ko nga popovers e whakamahi ana i te tuku (he mea hanga ma te whakamahi i te selectorwhiringa ) kaore e taea te whakakore takitahi i runga i nga huānga whakaoho uri.

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

Nga Takahanga

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

Karere matohi alert.js

Tauira matohi

Tāpirihia te mahi whakakore ki nga karere mataara katoa me tenei mono.

I te wa e whakamahi ana i te .closepaatene, me matua ko ia te tamaiti tuatahi o te .alert-dismissiblekarekau he ihirangi kuputuhi ka tae mai ki mua i te tohu tohu.

Whakamahinga

Taapiri noa data-dismiss="alert"ki to patene kati hei hoatu aunoa i te mahi kati matohi. Ma te kati i te matohi ka tangohia mai i te DOM.

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

Kia whakamahia e o matohi te hākoritanga i te wa e kati ana, me mohio kei a raatau nga karaehe .fademe .innga karaehe kua tukuna ki a raatau.

Nga tikanga

$().alert()

He mataara ki te whakarongo ki nga takahanga pawhiri i runga i nga huānga uri kei a ia te data-dismiss="alert"huanga. (Kare e tika ina whakamahi i te arataki-aunoa a te raraunga-api.)

$().alert('close')

Katia he matohi ma te tango mai i te DOM. Mena kei runga te .fademe .innga karaehe i runga i te huānga, ka memeha haere te matohi i mua i te tangohanga.

Nga Takahanga

Ko te mono matohi a Bootstrap e whakaatu ana i etahi huihuinga mo te hono ki te mahi mataara.

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

Pātene pātene.js

Mahi atu ki nga paatene. Ka whakatauhia te paatene mana, te hanga roopu paatene ranei mo etahi atu waahanga penei i nga paeutauta.

Stateful

Tāpiri data-loading-text="Loading..."ki te whakamahi i te ahua uta ki runga i te paatene.

Kua whakakorehia tenei ahuatanga mai i te v3.3.5 a kua tangohia i te 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>

Takahuri kotahi

Tāpirihia data-toggle="button"hei whakahohe i te takahuri i runga i te paatene kotahi.

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

Pouakataki / Reo Irirangi

Tāpirihia data-toggle="buttons"ki te .btn-grouppouakataki kei roto ranei nga whakauru reo irirangi kia taea ai te takahuri i roto i o raatau ahua.

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

Nga tikanga

$().button('toggle')

Ka takahuri te ahua pana. Ka hoatu ki te paatene te ahua kua whakahohehia.

$().button('reset')

Ka tautuhi ano i te ahua o te paatene - ka huri i te kuputuhi ki te tuhinga taketake. He tukutahi tenei tikanga ka hoki mai i mua i te otinga o te tautuhi.

$().button(string)

Ka huri i te kuputuhi ki tetahi ahuatanga kuputuhi kua tautuhia.

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

Tiango collapse.js

Ko te mono ngawari e whakamahi ana i te maha o nga karaehe mo te whanonga takahuri ngawari.

Tauira

Patohia nga paatene i raro nei hei whakaatu me te huna i tetahi atu huānga ma nga huringa akomanga:

• .collapsehuna ihirangi
• .collapsingka whakamahia i roto i nga whakawhitinga
• .collapse.inwhakaatu ihirangi

Ka taea e koe te whakamahi i te hono me te hrefhuanga, te paatene ranei me te data-targethuanga. I roto i nga take e rua, data-toggle="collapse"e hiahiatia ana.

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

Tauira akoriona

Whakaroahia te whanonga tiango taunoa ki te hanga akorioni me te waahanga o te roopu.

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

Ka taea hoki te huri i .panel-bodyte s ki .list-groupte s.

Whakamahinga

Ka whakamahia e te mono tiango etahi karaehe hei hapai i te hiki taumaha:

• .collapseka huna i te ihirangi
• .collapse.inwhakaatu te ihirangi
• .collapsingka taapirihia ina timata te whakawhiti, ka tangohia ina mutu

Ka kitea enei akomanga i roto i component-animations.less.

Ma nga huanga raraunga

Taapiri noa data-toggle="collapse"me te data-targeta ki te huānga hei tautapa aunoa i te mana o te huānga tiango. Ka data-targetwhakaaetia e te huanga he kaikowhiri CSS hei hoatu i te tiango ki. Me tino taapiri te karaehe collapseki te huānga tiango. Mena kei te pirangi koe kia tuwhera taunoa, taapirihia te akomanga taapiri in.

Hei taapiri i te whakahaere roopu rite-akordion ki te mana tiango, taapirihia te huanga raraunga data-parent="#selector". Tirohia te demo kia kite i tenei mahi.

Ma te JavaScript

Whakahohe ā-ringa ki:

$('.collapse').collapse()

Kōwhiringa

Ko nga whiringa ka taea te tuku ma nga huanga raraunga, JavaScript ranei. Mo nga huanga raraunga, apitihia te ingoa whiringa ki data-, penei i te data-parent="".

Nga tikanga

.collapse(options)

Ka whakahohe i to ihirangi hei huānga tiango. Ka whakaae ki nga whiringa whiriwhiri object.

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

.collapse('toggle')

Ka takahuri i tetahi huānga tiango hei whakaatu, huna ranei. Ka hoki ki te kaiwaea i mua i te whakaaturanga, huna ranei o te huānga tiango (arā, i mua i te puta o shown.bs.collapsete hidden.bs.collapsetakahanga).

.collapse('show')

He whakaatu huānga tiango. Ka hoki ki te kaiwaea i mua i te whakaaturanga o te huānga tiango (arā i mua i te shown.bs.collapseputa o te takahanga).

.collapse('hide')

Hunaia he huānga tiango. Ka hoki ki te kaiwaea i mua i te hunanga o te huānga tiango (arā i mua i te hidden.bs.collapseputa o te takahanga).

Nga Takahanga

Ko te karaehe tiango a Bootstrap e whakaatu ana i etahi huihuinga mo te hono ki te mahi tiango.

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

Carousel carousel.js

He waahanga whakaatakiriata mo te eke paihikara ma nga huānga, penei i te carousel. Kaore i te tautokohia nga carousels kua kohanga.

Tauira

Tuhinga o mua Panuku

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

Tapanga kōwhiringa

Tāpiri tapanga ki o kiriata me te .carousel-captionhuānga i roto i tetahi .item. Whakatakotoria noa tetahi HTML e whiriwhiri ana ki roto, ka whakatiaro aunoa, ka whakahōputuhia.

Tapanga kiriata tuatahi

Nulla vitae elit libero, a pharetra augue mollis interdum.

Tapanga kiriata tuarua

Kei te noho tonu koe, ka whakatauhia e koe.

Tapanga kiriata tuatoru

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

Tuhinga o mua Panuku

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

Whakamahinga

Carousels maha

Me whakamahi nga Carousel idi te ipu kei waho rawa atu (te .carousel) kia pai ai te mahi a nga carousel. I te taapiri i nga carousel maha, i te wa ranei e huri ana i nga carousel id, me tino whakahou i nga mana whakahaere.

Ma nga huanga raraunga

Whakamahia nga huanga raraunga kia ngawari te whakahaere i te tuunga o te carousel. data-slideka whakaae ki nga kupumatua prev, next, e whakarereke ana i te tuunga kiriata e pa ana ki tona turanga o naianei. Arā, whakamahia data-slide-toki te tuku i te taupū kiriata mata ki te carousel data-slide-to="2", ka huri i te tūnga kiriata ki tetahi taupū ka timata ki te 0.

Ka data-ride="carousel"whakamahia te huanga ki te tohu i te carousel hei whakaohooho timata mai i te utaina o te wharangi. Kaore e taea te whakamahi me te (he nui me te kore e tika) te arawhiti JavaScript o taua carousel.

Ma te JavaScript

Waea a ringatia te carousel me:

$('.carousel').carousel()

Kōwhiringa

Ko nga whiringa ka taea te tuku ma nga huanga raraunga, JavaScript ranei. Mo nga huanga raraunga, apitihia te ingoa whiringa ki data-, penei i te data-interval="".

Nga tikanga

.carousel(options)

Ka arataki i te carousel me etahi whiringa objectka tiimata ka timata te paihikara i roto i nga taonga.

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

.carousel('cycle')

Ka huri i nga taonga carousel mai i te maui ki te matau.

.carousel('pause')

Ka aukati te carousel i te eke paihikara ma nga taonga.

.carousel(number)

Ka huri i te carousel ki tetahi anga (0 te ahua, he rite ki te huranga).

.carousel('prev')

Ka huri ki te mea o mua.

.carousel('next')

Ka huri ki te tuemi e whai ake nei.

Nga Takahanga

Ko te karaehe carousel a Bootstrap e whakaatu ana i nga huihuinga e rua mo te hono ki te mahi carousel.

Ko nga huihuinga e rua nga waahanga taapiri e whai ake nei:

• direction: Ko te ahunga e retireti ana te carousel (ranei "left", "right").
• relatedTarget: Ko te huānga DOM kei te reheke ki te waahi hei taonga hohe.

Ko nga huihuinga carousel katoa ka pupuhihia ki te carousel ake (arā, ki te <div class="carousel">).

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

Affix affix.js

Tauira

Ka takahuri te mono affix position: fixed;ki runga me te weto, ka whakatauira i te paanga ka kitea me te position: sticky;. Ko te whakaterenga kei te taha matau he whakaaturanga ora o te mono affix.

Whakamahinga

Whakamahia te mono affix ma nga huanga raraunga, ma te ringaringa ranei me to ake JavaScript. I roto i nga ahuatanga e rua, me whakarato koe i te CSS mo te tuunga me te whanui o to ihirangi kua piri.

Tuhipoka: Kaua e whakamahi i te mono affix i runga i tetahi huānga kei roto i tetahi huānga kua rite te tuunga, penei i te kumea, i te pou panaia ranei, na te pepeke whakaputa Safari .

Te tuunga ma te CSS

Ka takahuri te mono affix i waenganui i nga karaehe e toru, he tohu mo ia ahuatanga: .affix, .affix-top, me .affix-bottom. Me whakarato e koe nga momo, haunga te position: fixed;on .affix, mo enei karaehe koe (motuhake i tenei mono) hei hapai i nga tuunga tuturu.

Anei te mahi a te affix mono:

1. Hei tiimata, ka taapirihia te mono .affix-topki te tohu kei roto te huānga i tana tuunga o runga rawa. I tenei wa kaore e hiahiatia he tuunga CSS.
2. Ma te panuku i mua i te huānga e hiahia ana koe ki te whakapiri, ka tiimata te taapiri. Koinei te waahi .affixwhakakapi .affix-topme te tautuhi position: fixed;(e whakaratohia ana e Bootstrap's CSS).
3. Mena kua tautuhia te waahi o raro, me huri ki mua me whakakapi .affixki te .affix-bottom. I te mea he mea kowhiria nga utu, ko te whakarite i tetahi me whakarite e koe te CSS tika. I tenei keehi, taapiri i te position: absolute;wa e tika ana. Ka whakamahia e te mono te huanga raraunga, te whiringa JavaScript ranei hei whakatau i te waahi ka tuuhia te huānga mai i reira.

Whaia nga mahi i runga ake nei ki te whakarite i to CSS mo tetahi o nga waahanga whakamahi i raro nei.

Ma nga huanga raraunga

Kia ngawari te taapiri i te whanonga piri ki tetahi huānga, taapiri noa data-spy="affix"ki te huānga e hiahia ana koe ki te tutei. Whakamahia nga whakawhangai hei tautuhi i te wa e takahuri ai te titi o te huānga.

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

Ma te JavaScript

Karangatia te mono affix ma te JavaScript:

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

Kōwhiringa

Ko nga whiringa ka taea te tuku ma nga huanga raraunga, JavaScript ranei. Mo nga huanga raraunga, apitihia te ingoa whiringa ki data-, penei i te data-offset-top="200".

Nga tikanga

.affix(options)

Whakahohe i to ihirangi hei ihirangi whakapiri. Ka whakaae ki nga whiringa whiriwhiri object.

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

.affix('checkPosition')

Ka tātai anō i te āhua o te tāpiritanga i runga i te rahi, te tūnga, me te tūnga panuku o ngā huānga e hāngai ana. Ko te .affix, .affix-top, me .affix-bottomnga karaehe ka taapirihia, ka tangohia ranei mai i nga ihirangi kua piri e ai ki te ahua hou. Me karanga tenei tikanga i nga wa katoa ka huri nga inenga o te ihirangi kua apitihia, te huānga whainga ranei, kia tika ai te tuunga o nga ihirangi kua piri.

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

Nga Takahanga

Ko te mono affix a Bootstrap e whakaatu ana i etahi huihuinga mo te hono ki te mahi affix.