Akopọ

Olukuluku tabi akopọ

Awọn afikun le wa ni ẹyọkan (lilo awọn *.jsfaili kọọkan Bootstrap), tabi gbogbo wọn ni ẹẹkan (lilo bootstrap.jstabi miniified bootstrap.min.js).

Lilo JavaScript ti a ṣajọ

Mejeeji bootstrap.jsati bootstrap.min.jsni gbogbo awọn afikun ninu faili kan. Fi ọkan nikan kun.

Awọn igbẹkẹle itanna

Diẹ ninu awọn afikun ati awọn paati CSS dale lori awọn afikun miiran. Ti o ba pẹlu awọn afikun ni ẹyọkan, rii daju lati ṣayẹwo fun awọn igbẹkẹle wọnyi ninu awọn docs. Tun ṣe akiyesi pe gbogbo awọn afikun da lori jQuery (eyi tumọ si jQuery gbọdọ wa pẹlu awọn faili itanna). Kan si wabower.json lati rii iru awọn ẹya ti jQuery ni atilẹyin.

Awọn eroja data

O le lo gbogbo awọn afikun Bootstrap nikan nipasẹ API isamisi laisi kikọ laini kan ti JavaScript. Eyi jẹ API kilasi akọkọ Bootstrap ati pe o yẹ ki o jẹ akiyesi akọkọ rẹ nigbati o nlo ohun itanna kan.

Iyẹn ti sọ, ni awọn ipo miiran o le jẹ iwunilori lati pa iṣẹ ṣiṣe yii. Nitoribẹẹ, a tun pese agbara lati mu awọn abuda data API kuro nipa ṣiṣiṣẹpọ gbogbo awọn iṣẹlẹ lori aaye ti o ni orukọ pẹlu data-api. Eyi dabi eyi:

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

Ni omiiran, lati fojusi ohun itanna kan pato, kan ṣafikun orukọ ohun itanna bi aaye orukọ kan pẹlu aaye orukọ data-api bii eyi:

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

Ohun itanna kan nikan fun eroja nipasẹ awọn abuda data

Maṣe lo awọn abuda data lati awọn afikun pupọ lori eroja kanna. Fun apẹẹrẹ, bọtini kan ko le mejeeji ni itọpa irinṣẹ ati yi modal kan pada. Lati ṣaṣeyọri eyi, lo nkan mimu.

API ètò

A tun gbagbọ pe o yẹ ki o ni anfani lati lo gbogbo awọn afikun Bootstrap nikan nipasẹ JavaScript API. Gbogbo API ti gbogbo eniyan jẹ ẹyọkan, awọn ọna ẹwọn, ati da ikojọpọ ti a ṣiṣẹ lori pada.

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

Gbogbo awọn ọna yẹ ki o gba ohun aṣayan aṣayan, okun ti o fojusi ọna kan pato, tabi ohunkohun (eyiti o bẹrẹ ohun itanna kan pẹlu ihuwasi aiyipada):

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

Ohun itanna kọọkan tun ṣafihan olupilẹṣẹ aise lori ohun Constructor-ini kan $.fn.popover.Constructor:. Ti o ba fẹ lati gba apẹẹrẹ itanna kan pato, gba pada taara lati ẹya: $('[rel="popover"]').data('popover').

Awọn eto aiyipada

O le yi awọn eto aiyipada pada fun ohun itanna kan nipa yiyipada ohun itanna Constructor.DEFAULTSnaa:

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

Ko si ija

Nigba miiran o jẹ dandan lati lo awọn afikun Bootstrap pẹlu awọn ilana UI miiran. Ni awọn ipo wọnyi, awọn ikọlu aaye orukọ le waye lẹẹkọọkan. Ti eyi ba ṣẹlẹ, o le pe .noConflictohun itanna ti o fẹ lati yi iye pada.

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

Awọn iṣẹlẹ

Bootstrap n pese awọn iṣẹlẹ aṣa fun ọpọlọpọ awọn iṣe alailẹgbẹ awọn afikun. Ni gbogbogbo, iwọnyi wa ni fọọmu ailopin ati ti o ti kọja - nibiti ailopin (fun apẹẹrẹ show) ti jẹ okunfa ni ibẹrẹ iṣẹlẹ, ati fọọmu apakan apakan ti o kọja (fun apẹẹrẹ shown) ti nfa lori ipari iṣẹ kan.

Bi ti 3.0.0, gbogbo awọn iṣẹlẹ Bootstrap jẹ orukọ.

Gbogbo awọn iṣẹlẹ ailopin pese preventDefaultiṣẹ ṣiṣe. Eyi n pese agbara lati da ipaniyan iṣe ṣaaju ki o to bẹrẹ.

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

Awọn nọmba ẹya

Ẹya ti ọkọọkan awọn afikun jQuery Bootstrap ni a le wọle nipasẹ VERSIONohun-ini ti olupilẹṣẹ ohun itanna naa. Fun apẹẹrẹ, fun ohun itanna ọpa:

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

Ko si awọn ipadasẹhin pataki nigbati JavaScript jẹ alaabo

Awọn afikun Bootstrap ko ṣubu sẹhin paapaa ni oore-ọfẹ nigbati JavaScript jẹ alaabo. Ti o ba bikita nipa iriri olumulo ninu ọran yii, lo <noscript>lati ṣalaye ipo naa (ati bi o ṣe le tun JavaScript ṣiṣẹ) si awọn olumulo rẹ, ati/tabi ṣafikun awọn isubu aṣa tirẹ.

Awọn ile-ikawe ẹni-kẹta

Bootstrap ko ṣe atilẹyin fun awọn ile-ikawe JavaScript ẹni-kẹta gẹgẹbi Afọwọṣe tabi jQuery UI. Laibikita .noConflictati awọn iṣẹlẹ ti a fun lorukọ, awọn iṣoro ibamu le wa ti o nilo lati ṣatunṣe funrararẹ.

Awọn iyipada.js

Nipa awọn iyipada

Fun awọn ipa iyipada ti o rọrun, pẹlu transition.jslẹẹkan lẹgbẹẹ awọn faili JS miiran. Ti o ba nlo akopọ (tabi miniified) bootstrap.js, ko si iwulo lati ṣafikun eyi — o ti wa tẹlẹ.

Kini inu

Transition.js jẹ oluranlọwọ ipilẹ fun transitionEndawọn iṣẹlẹ bii emulator iyipada CSS kan. O jẹ lilo nipasẹ awọn afikun miiran lati ṣayẹwo fun atilẹyin iyipada CSS ati lati yẹ awọn iyipada ikele.

Pa awọn iyipada kuro

Awọn iyipada le jẹ alaabo agbaye ni lilo snippet JavaScript atẹle, eyiti o gbọdọ wa lẹhin transition.js(tabi bootstrap.js, bootstrap.min.jsbi ọran ti le jẹ) ti kojọpọ:

$.support.transition = false

Modals modal.js

Modals ti wa ni ṣiṣan, ṣugbọn rọ, awọn itọsi ọrọ sisọ pẹlu iṣẹ ṣiṣe ti o kere julọ ti a beere ati awọn aṣiṣe ọlọgbọn.

Awọn awoṣe ṣiṣi lọpọlọpọ ko ni atilẹyin

Rii daju pe ki o ma ṣii modal nigba ti omiiran tun han. Fifihan modal ju ọkan lọ ni akoko kan nilo koodu aṣa.

Ipo isamisi awoṣe

Nigbagbogbo gbiyanju lati gbe koodu HTML modal kan si ipo oke-ipele ninu iwe rẹ lati yago fun awọn paati miiran ti o ni ipa lori irisi modal ati/tabi iṣẹ ṣiṣe.

Mobile ẹrọ caveats

Awọn ikilọ kan wa nipa lilo awọn modals lori awọn ẹrọ alagbeka. Wo awọn iwe atilẹyin ẹrọ aṣawakiri wa fun awọn alaye.

Nitori bi HTML5 ṣe n ṣalaye awọn itumọ-ọrọ rẹ, ẹda autofocusHTML ko ni ipa ni awọn awoṣe Bootstrap. Lati ṣaṣeyọri ipa kanna, lo diẹ ninu JavaScript aṣa:

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

Awọn apẹẹrẹ

Apẹẹrẹ aimi

Modal ti a ṣe pẹlu akọsori, ara, ati ṣeto awọn iṣe ni ẹlẹsẹ.

<div class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Live demo

Yi modal pada nipasẹ JavaScript nipa titẹ bọtini ni isalẹ. Yoo rọra si isalẹ ati ipare ni lati oke ti oju-iwe naa.

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

Ṣe awọn awoṣe wiwọle

Rii daju lati ṣafikun role="dialog"ati aria-labelledby="...", tọka akọle modal, si .modal, ati role="document"si .modal-dialogfunrararẹ.

Ni afikun, o le fun ni apejuwe ti ibaraẹnisọrọ modal rẹ pẹlu aria-describedbylori .modal.

Ifisinu YouTube awọn fidio

Ifisinu awọn fidio YouTube ni awọn awoṣe nilo afikun JavaScript kii ṣe ni Bootstrap lati da ṣiṣiṣẹsẹhin duro laifọwọyi ati diẹ sii. Wo ifiweranṣẹ Stack Overflow ti o ṣe iranlọwọ fun alaye diẹ sii.

Awọn iwọn iyan

Modals ni awọn iwọn iyan meji, wa nipasẹ awọn kilasi modifier lati gbe sori faili .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>

Yọ iwara kuro

Fun awọn awoṣe ti o han nirọrun kuku ju ipare sinu lati wo, yọ .fadekilasi kuro lati isamisi modal rẹ.

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

Lilo awọn akoj eto

Lati lo anfani ti eto akoj Bootstrap laarin modal kan, kan itẹ-ẹiyẹ .rows laarin .modal-bodyati lẹhinna lo awọn kilasi eto akoj deede.

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

Ni opo kan ti awọn bọtini ti gbogbo awọn okunfa kanna modal, o kan pẹlu die-die o yatọ si awọn akoonu ti? Lo event.relatedTargetati awọn abuda HTMLdata-* (o ṣee ṣe nipasẹ jQuery ) lati ṣe iyatọ awọn akoonu ti modal da lori bọtini wo ni o tẹ. Wo Awọn iwe aṣẹ Awọn iṣẹlẹ Modal fun awọn alaye lori relatedTarget,

Awọn bọtini diẹ sii ...
<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)
})

Lilo

Ohun itanna modal yi akoonu ti o farapamọ pada lori ibeere, nipasẹ awọn abuda data tabi JavaScript. O tun ṣe afikun .modal-opensi <body>lati bori ihuwasi yiyi lọ aiyipada ati ṣe ipilẹṣẹ kan .modal-backdroplati pese agbegbe tẹ kan fun yiyọ awọn awoṣe ti o han nigbati titẹ si ita modal.

Nipasẹ awọn abuda data

Mu modal ṣiṣẹ laisi kikọ JavaScript. Ṣeto data-toggle="modal"lori eroja oludari, bii bọtini kan, pẹlu kan data-target="#foo"tabi href="#foo"lati fojusi modal kan pato lati yi.

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

Nipasẹ JavaScript

Pe modal pẹlu id myModalpẹlu laini JavaScript kan:

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

Awọn aṣayan

Awọn aṣayan le ṣee kọja nipasẹ awọn abuda data tabi JavaScript. Fun awọn abuda data, fi orukọ aṣayan si data-, bi ninu data-backdrop="".

Oruko iru aiyipada apejuwe
sile boolian tabi okun'static' ooto Pẹlu a modal-backdrop ano. Ni omiiran, pato staticfun ẹhin ẹhin eyiti ko pa modal naa ni titẹ.
keyboard boolianu ooto Tilekun modal nigbati o ba tẹ bọtini ona abayo
ifihan boolianu ooto Ṣe afihan modal nigbati o bẹrẹ.
latọna jijin ona eke

Aṣayan yii ti parẹ lati v3.3.0 ati pe o ti yọkuro ni v4. A ṣeduro dipo lilo iṣapẹẹrẹ ẹgbẹ-alabara tabi ilana abuda data, tabi pipe jQuery.load funrararẹ.

Ti URL latọna jijin ba pese, akoonu yoo jẹ kojọpọ ni akoko kan nipasẹ ọna jQuery loadati itasi sinu .modal-contentdiv. Ti o ba nlo data-api, o le lo abuda miiran hreflati ṣe pato orisun isakoṣo latọna jijin. Apẹẹrẹ eyi ni a fihan ni isalẹ:

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

Awọn ọna

Mu akoonu rẹ ṣiṣẹ bi modal. Gba awọn aṣayan iyan object.

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

Pẹlu ọwọ yipada modal kan. Pada si olupe ṣaaju ki modal ti han gangan tabi farapamọ (ie ṣaaju ki iṣẹlẹ shown.bs.modaltabi hidden.bs.modaliṣẹlẹ waye).

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

Pẹlu ọwọ ṣii modal kan. Pada si olupe ṣaaju ki modal ti han gangan (ie ṣaaju ki shown.bs.modaliṣẹlẹ naa to waye).

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

Pẹlu ọwọ hides a modal. Pada si olupe ṣaaju ki modal naa ti farapamọ gangan (ie ṣaaju ki hidden.bs.modaliṣẹlẹ naa to waye).

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

Ṣe atunṣe ipo ipo modal lati koju ọpa lilọ kiri ni irú ọkan yẹ ki o han, eyiti yoo jẹ ki modal fo si apa osi.

Nikan nilo nigbati giga ti modal yipada lakoko ti o ṣii.

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

Awọn iṣẹlẹ

Kilasi modal Bootstrap ṣafihan awọn iṣẹlẹ diẹ fun sisọ sinu iṣẹ ṣiṣe modal.

Gbogbo awọn iṣẹlẹ modal jẹ ina ni modal funrararẹ (ie ni <div class="modal">).

Iṣẹlẹ Iru Apejuwe
fihan.bs.modal Yi iṣẹlẹ ina lẹsẹkẹsẹ nigbati awọn showapẹẹrẹ ọna ti a npe ni. Ti o ba ṣẹlẹ nipasẹ titẹ kan, eroja ti o tẹ wa bi relatedTargetohun-ini ti iṣẹlẹ naa.
han.bs.modal Iṣẹlẹ yii jẹ ina nigbati modal ti jẹ ki o han si olumulo (yoo duro fun awọn iyipada CSS lati pari). Ti o ba ṣẹlẹ nipasẹ titẹ kan, eroja ti o tẹ wa bi relatedTargetohun-ini ti iṣẹlẹ naa.
tọju.bs.modal Iṣẹlẹ yii jẹ ina lẹsẹkẹsẹ nigbati ọna hideapẹẹrẹ ti pe.
farasin.bs.modal Iṣẹlẹ yii jẹ ina nigbati modal naa ba ti pari fifipamọ lati ọdọ olumulo (yoo duro fun awọn iyipada CSS lati pari).
kojọpọ.bs.modal Iṣẹlẹ yii jẹ ina nigbati modal ti kojọpọ akoonu nipa lilo remoteaṣayan.
$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

Sisọ silẹ silẹ.js

Ṣafikun awọn akojọ aṣayan silẹ si ohunkohun pẹlu ohun itanna ti o rọrun yii, pẹlu navbar, awọn taabu, ati awọn oogun.

Laarin a navbar

Laarin awọn oogun

Nipasẹ awọn abuda data tabi JavaScript, ohun itanna sisọ silẹ yipada akoonu ti o farapamọ (awọn akojọ aṣayan silẹ) nipa yiyi .openkilaasi lori ohun atokọ obi.

Lori awọn ẹrọ alagbeka, ṣiṣi silẹ silẹ kan ṣafikun .dropdown-backdropbii agbegbe tẹ ni kia kia fun pipade awọn akojọ aṣayan silẹ nigbati titẹ ni ita akojọ aṣayan, ibeere fun atilẹyin iOS to dara. Eyi tumọ si pe yi pada lati akojọ aṣayan silẹ ṣiṣi si akojọ aṣayan silẹ ti o yatọ nilo afikun tẹ ni kia kia lori alagbeka.

Akiyesi: Ẹya data-toggle="dropdown"naa gbarale fun pipade awọn akojọ aṣayan silẹ ni ipele ohun elo, nitorinaa o jẹ imọran ti o dara lati lo nigbagbogbo.

Nipasẹ awọn abuda data

Ṣafikun data-toggle="dropdown"si ọna asopọ kan tabi bọtini lati yi jisilẹ silẹ.

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

Lati jẹ ki awọn URL wa titi pẹlu awọn bọtini ọna asopọ, lo data-targetabuda dipo 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>

Nipasẹ JavaScript

Pe awọn silẹ nipasẹ JavaScript:

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

data-toggle="dropdown"si tun beere

Laibikita boya o pe dropdown rẹ nipasẹ JavaScript tabi dipo lo data-api, data-toggle="dropdown"nigbagbogbo nilo lati wa lori eroja okunfa dropdown.

Ko si

Yipada akojọ aṣayan-silẹ ti navbar ti a fun tabi lilọ kiri taabu.

Gbogbo dropdown iṣẹlẹ ti wa ni kuro lenu ise ni .dropdown-menu's obi ano.

Gbogbo awọn iṣẹlẹ sisọ silẹ ni relatedTargetohun-ini kan, eyiti iye rẹ jẹ eroja oran toggling.

Iṣẹlẹ Iru Apejuwe
fihan.bs.dropdown Yi iṣẹlẹ ina lẹsẹkẹsẹ nigbati awọn show apẹẹrẹ ọna ti a npe ni.
han.bs.dropdown Iṣẹlẹ yii jẹ ina nigbati sisọ silẹ ti jẹ ki o han si olumulo (yoo duro fun awọn iyipada CSS, lati pari).
tọju.bs.dropdown Iṣẹlẹ yii jẹ ina lẹsẹkẹsẹ nigbati ọna apẹẹrẹ pamọ ti pe.
farasin.bs.dropdown Iṣẹlẹ yii jẹ ina nigbati sisọ silẹ ba ti pari fifipamọ lati ọdọ olumulo (yoo duro fun awọn iyipada CSS, lati pari).
$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})

ScrollSpy scrollspy.js

Apeere ni navbar

Ohun itanna ScrollSpy jẹ fun mimu dojuiwọn awọn ibi-afẹde nav da lori ipo yi lọ. Yi lọ si agbegbe ni isalẹ navbar ki o wo iyipada kilasi ti nṣiṣe lọwọ. Awọn nkan isọ silẹ yoo jẹ afihan bi daradara.

@sanra

Ad leggings keytar, brunch id art party dolor laala. Pitchfork yr enim lo-fi kí wọn tó ta qui. Tumblr oko-to-tabili awọn ẹtọ keke ohunkohun ti. Animu keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby siweta lomo Jean shorts, williamsburg hoodie minim qui o jasi ko ti gbọ ti wọn et cardigan Trust fund culpa biodiesel wes anderson aesthetic. Nihi tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

@mdo

Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork irungbọn. Freegan irungbọn aliqua cupidatat mcsweeney ká vero. Cupidatat mẹrin loko nisi, ea helvetica nulla carles. Tatuu cosby siweta ounje ikoledanu, mcsweeney ká quis ti kii freegan fainali. Lo-fi wes anderson +1 sartorial. Carles ti kii ṣe adaṣe darapupo quis gentrify. Brooklyn adipisicing ọnà ọti igbakeji keytar deserunt.

ọkan

Occaecat commodo aliqua delectus. Fap iṣẹ ọti deserunt skateboard ea. Lomo keke awọn ẹtọ adipisicing banh mi, velit ea sunt next level locavore nikan-origin kofi in magna veniam. Giga aye id fainali, iwoyi o duro si ibikan consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minim ojiṣẹ apo. cred ex in, alagbero delectus consectetur fanny pack ipad.

meji

In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.

three

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

Keytar twee bulọọgi, culpa ojiṣẹ apo marfa ohunkohun ti delectus ounje ikoledanu. Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats o jasi ko tii gbọ ti wọn consequat hoodie gluten-free lo-fi fap aliquip. Labore elit placeat ṣaaju ki wọn to ta, Terry Richardson proident brunch nesciunt quis cosby siweta pariatur keffiyeh ut helvetica artisan. Cardigan iṣẹ ọti seitan readymade velit. VHS chambray laboris tempor veniam. Animu mollit minim commodo ullamco thundercats.

Lilo

Nilo Bootstrap nav

Scrollspy Lọwọlọwọ nbeere lilo ti Bootstrap nav paati fun afihan to dara ti awọn ọna asopọ lọwọ.

Awọn ibi-afẹde ID ti o yanju nilo

Awọn ọna asopọ Navbar gbọdọ ni awọn ibi-afẹde id ti o yanju. Fun apẹẹrẹ, <a href="#home">home</a>gbọdọ ṣe deede si nkan kan ninu DOM bii <div id="home"></div>.

Awọn eroja ti kii ṣe ibi- afẹde :visiblekọju

Awọn eroja ibi-afẹde ti kii ṣe :visibleni ibamu si jQuery ni yoo foju kọbikita ati pe awọn nkan nav ti o baamu wọn kii yoo ṣe afihan.

Nbeere ipo ojulumo

Laibikita ọna imuse, scrollspy nilo lilo position: relative;lori eroja ti o ṣe amí lori. Ni ọpọlọpọ igba eyi ni <body>. Nigbati o ba n lọ kiri lori awọn eroja miiran yatọ si <body>, rii daju pe o heightṣeto ati overflow-y: scroll;lo.

Nipasẹ awọn abuda data

Lati fi irọrun ṣafikun ihuwasi scrollspy si lilọ kiri oke rẹ, ṣafikun data-spy="scroll"si ipin ti o fẹ ṣe amí lori (julọ julọ eyi yoo jẹ <body>). Lẹhinna ṣafikun data-targetẹda pẹlu ID tabi kilasi ti ẹya obi ti .navpaati Bootstrap eyikeyi.

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>

Nipasẹ JavaScript

Lẹhin fifi kun position: relative;ninu CSS rẹ, pe scrollspy nipasẹ JavaScript:

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

Awọn ọna

.scrollspy('refresh')

Nigbati o ba nlo scrollspy ni apapo pẹlu fifi kun tabi yiyọ awọn eroja kuro lati DOM, iwọ yoo nilo lati pe ọna isọdọtun bii bẹ:

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

Awọn aṣayan

Awọn aṣayan le ṣee kọja nipasẹ awọn abuda data tabi JavaScript. Fun awọn abuda data, fi orukọ aṣayan si data-, bi ninu data-offset="".

Oruko iru aiyipada apejuwe
aiṣedeede nọmba 10 Awọn piksẹli lati aiṣedeede lati oke nigbati o ṣe iṣiro ipo ti yi lọ.

Awọn iṣẹlẹ

Iṣẹlẹ Iru Apejuwe
mu ṣiṣẹ.bs.scrollspy Iṣẹlẹ yii n ṣiṣẹ nigbakugba ti ohun kan ba muu ṣiṣẹ nipasẹ scrollspy.
$('#myScrollspy').on('activate.bs.scrollspy', function () {
  // do something…
})

Togglable awọn taabu tab.js

Awọn taabu apẹẹrẹ

Ṣafikun iyara, iṣẹ ṣiṣe taabu ti o ni agbara si iyipada nipasẹ awọn pane ti akoonu agbegbe, paapaa nipasẹ awọn akojọ aṣayan silẹ. Awọn taabu itẹle ko ni atilẹyin.

Aise Denimu o jasi ko ti gbọ ti wọn Jean shorts Austin. Nesciunt tofu stumptown aliqua, Retiro synth titunto si wẹ. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum ipad. Seitan aliquip quis cardigan American aso, butcher voluptate nisi qui.

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.

Fa lilọ kiri tabbed

Ohun itanna yii fa paati lilọ kiri tabbed lati ṣafikun awọn agbegbe tabbable.

Lilo

Mu awọn taabu taabu ṣiṣẹ nipasẹ JavaScript (taabu kọọkan nilo lati muu ṣiṣẹ ni ẹyọkan):

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

O le mu awọn taabu kọọkan ṣiṣẹ ni awọn ọna pupọ:

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

Siṣamisi

O le mu taabu kan ṣiṣẹ tabi lilọ kiri egbogi laisi kikọ eyikeyi JavaScript nipa sisọ pato data-toggle="tab"tabi data-toggle="pill"lori nkan kan. Ṣafikun navati nav-tabsawọn kilasi si taabu yoo lo iselona taabuul Bootstrap , lakoko ti o ṣafikun ati awọn kilasi yoo lo iselona pill .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>

Ipa ipare

Lati jẹ ki awọn taabu rẹ wọ inu, ṣafikun .fadesi ọkọọkan .tab-pane. PAN taabu akọkọ gbọdọ tun ni .inlati jẹ ki akoonu ibẹrẹ han.

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

Awọn ọna

$().tab

Mu eroja taabu ṣiṣẹ ati eiyan akoonu. Taabu yẹ ki o ni boya a data-targettabi hrefifọkansi oju ipade apoti kan ninu DOM. Ninu awọn apẹẹrẹ ti o wa loke, awọn taabu jẹ awọn <a>s pẹlu awọn abuda data-toggle="tab".

.tab('show')

Yan taabu ti a fun ati ṣafihan akoonu ti o somọ. Eyikeyi taabu miiran ti o ti yan tẹlẹ di aiyan ati akoonu ti o somọ ti wa ni pamọ. Pada si olupe ṣaaju ki iwe taabu ti han gangan (ie ṣaaju ki shown.bs.tabiṣẹlẹ naa to waye).

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

Awọn iṣẹlẹ

Nigbati o ba nfihan taabu tuntun, awọn iṣẹlẹ ina ni ilana atẹle:

  1. hide.bs.tab(lori taabu lọwọ lọwọlọwọ)
  2. show.bs.tab(lori taabu ti yoo han)
  3. hidden.bs.tab(lori taabu ti nṣiṣe lọwọ iṣaaju, ọkan kanna fun hide.bs.tabiṣẹlẹ naa)
  4. shown.bs.tab(lori taabu ti o ṣẹṣẹ n ṣiṣẹ tuntun, ọkan kanna fun show.bs.tabiṣẹlẹ naa)

Ti ko ba si taabu ti ṣiṣẹ tẹlẹ, lẹhinna hide.bs.tabati awọn hidden.bs.tabiṣẹlẹ kii yoo jẹ ina.

Iṣẹlẹ Iru Apejuwe
fihan.bs.taabu Iṣẹlẹ yii ina lori ifihan taabu, ṣugbọn ṣaaju ki o to han taabu tuntun. Lo event.targetati event.relatedTargetlati fojusi taabu ti nṣiṣe lọwọ ati taabu lọwọlọwọ ti tẹlẹ (ti o ba wa) ni atele.
han.bs.taabu Iṣẹlẹ yi ina lori ifihan taabu lẹhin ti a ti fi taabu kan han. Lo event.targetati event.relatedTargetlati fojusi taabu ti nṣiṣe lọwọ ati taabu lọwọlọwọ ti tẹlẹ (ti o ba wa) ni atele.
tọju.bs.taabu Iṣẹlẹ yii n ṣiṣẹ nigbati taabu tuntun yoo han (ati nitorinaa taabu ti nṣiṣe lọwọ tẹlẹ ni lati farapamọ). Lo event.targetati event.relatedTargetlati fojusi taabu ti nṣiṣe lọwọ lọwọlọwọ ati taabu tuntun lai-lati-ṣiṣẹ, ni atele.
farasin.bs.taabu Iṣẹlẹ yii n tan lẹhin ti taabu tuntun ti han (ati nitorinaa taabu ti nṣiṣe lọwọ iṣaaju ti farapamọ). Lo event.targetati event.relatedTargetlati fojusi taabu ti nṣiṣe lọwọ iṣaaju ati taabu ti nṣiṣe lọwọ tuntun, lẹsẹsẹ.
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})

Irinṣẹ irinṣẹ irinṣẹ.js

Atilẹyin nipasẹ ohun itanna jQuery.tipsy ti o dara julọ ti a kọ nipasẹ Jason Frame; Awọn imọran irinṣẹ jẹ ẹya imudojuiwọn, eyiti ko gbẹkẹle awọn aworan, lo CSS3 fun awọn ohun idanilaraya, ati awọn abuda data fun ibi ipamọ akọle agbegbe.

Awọn imọran irinṣẹ pẹlu awọn akọle gigun-odo ko han rara.

Awọn apẹẹrẹ

Raba lori awọn ọna asopọ ni isalẹ lati wo awọn imọran irinṣẹ:

Awọn sokoto to nipọn keffiyeh o ṣee ṣe ko tii gbọ ti wọn. Photo agọ irungbọn aise Denimu letterpress ajewebe ojiṣẹ apo stumptown. Farm-to-tabili seitan, mcsweeney's fixie alagbero quinoa 8-bit American aṣọ ni Terry Richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, mẹrin loko mcsweeney ká cleanse vegan chambray. A gan ironic artisan whatever keytar , scenester farm-to-table banksy Austin twitter handle freegan cred raw Denimu nikan-Oti kofi gbogun ti.

Aimi irinṣẹ

Awọn aṣayan mẹrin wa: oke, ọtun, isalẹ, ati ti osi.

Awọn itọnisọna mẹrin

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

Iṣẹ ṣiṣe ijade

Fun awọn idi iṣẹ ṣiṣe, Ohun elo irinṣẹ ati data-apis Agbejade ti wa ni ijade, afipamo pe o gbọdọ pilẹ wọn funrararẹ .

Ọna kan lati bẹrẹ gbogbo awọn imọran irinṣẹ lori oju-iwe kan yoo jẹ lati yan wọn nipasẹ data-toggleabuda wọn:

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

Lilo

Ohun itanna ohun elo n ṣe agbejade akoonu ati isamisi lori ibeere, ati nipasẹ awọn aaye aiyipada awọn itọnisọna irinṣẹ lẹhin ipin okunfa wọn.

Ṣe okunfa ohun elo irinṣẹ nipasẹ JavaScript:

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

Siṣamisi

Aami ti a beere fun itọsi irinṣẹ jẹ abuda kan dataati titlelori ẹya HTML ti o fẹ lati ni itọpa irinṣẹ kan. Aami ti ipilẹṣẹ ti ọpa irinṣẹ jẹ kuku rọrun, botilẹjẹpe o nilo ipo kan (nipasẹ aiyipada, ṣeto si topnipasẹ ohun itanna).

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

Awọn ọna asopọ ila-pupọ

Nigba miiran o fẹ lati ṣafikun itọsi irinṣẹ si hyperlink ti o murasilẹ awọn laini pupọ. Ihuwasi aiyipada ti ohun itanna ọpa ni lati aarin rẹ ni ita ati ni inaro. Ṣafikun white-space: nowrap;si awọn ìdákọró rẹ lati yago fun eyi.

Awọn imọran irinṣẹ ni awọn ẹgbẹ bọtini, awọn ẹgbẹ titẹ sii, ati awọn tabili nilo eto pataki

Nigbati o ba nlo awọn itọsona irinṣẹ lori awọn eroja laarin a .btn-grouptabi ẹya .input-group, tabi lori awọn eroja ti o ni ibatan tabili ( <td>, <th>, <tr>, <thead>, <tbody>, <tfoot>), iwọ yoo ni lati pato aṣayan container: 'body'(ti o wa ni isalẹ) lati yago fun awọn ipa ẹgbẹ ti aifẹ (gẹgẹbi nkan ti o dagba sii ati/ tabi sisọnu awọn igun rẹ ti o yika nigbati ọpa irinṣẹ ba ti ṣiṣẹ).

Maṣe gbiyanju lati ṣafihan awọn itọnisọna irinṣẹ lori awọn eroja ti o farapamọ

Pipe $(...).tooltip('show')nigbati nkan ibi-afẹde ba wa display: none;yoo fa ki ọpa irinṣẹ wa ni ipo ti ko tọ.

Awọn italologo irinṣẹ wiwọle fun keyboard ati awọn olumulo imọ-ẹrọ iranlọwọ

Fun awọn olumulo ti n lọ kiri pẹlu bọtini itẹwe kan, ati ni pato awọn olumulo ti awọn imọ-ẹrọ iranlọwọ, o yẹ ki o ṣafikun awọn itọsona irinṣẹ nikan si awọn eroja aifọwọyi-bọtini gẹgẹbi awọn ọna asopọ, awọn idari fọọmu, tabi eyikeyi lainidii ano pẹlu abuda kan tabindex="0".

Awọn imọran irinṣẹ lori awọn eroja alaabo nilo awọn eroja ipari

Lati ṣafikun itọsi irinṣẹ kan disabledtabi .disablederoja, fi nkan naa sinu inu kan <div>ki o lo itọsi irinṣẹ si iyẹn <div>dipo.

Awọn aṣayan

Awọn aṣayan le ṣee kọja nipasẹ awọn abuda data tabi JavaScript. Fun awọn abuda data, fi orukọ aṣayan si data-, bi ninu data-animation="".

Oruko Iru Aiyipada Apejuwe
iwara boolianu ooto Waye iyipada ipare CSS kan si itọpa irinṣẹ
eiyan okun | eke eke

Fi ohun elo irinṣẹ si eroja kan pato. Apeere container: 'body':. Aṣayan yii jẹ iwulo paapaa ni pe o fun ọ laaye lati gbe ọpa irinṣẹ ni ṣiṣan ti iwe-ipamọ nitosi nkan ti nfa - eyiti yoo ṣe idiwọ ọpa lati lilefoofo kuro ni nkan ti o nfa lakoko iwọn window kan.

idaduro nọmba | nkan 0

Idaduro fififihan ati fifipamọ awọn itọpa irinṣẹ (ms) - ko kan si iru okunfa afọwọṣe

Ti nọmba kan ba pese, idaduro jẹ lilo si tọju/fihan mejeeji

Eto nkan jẹ:delay: { "show": 500, "hide": 100 }

html boolianu eke Fi HTML sinu itọnisọna irinṣẹ. Ti o ba jẹ eke, textọna jQuery yoo ṣee lo lati fi akoonu sii sinu DOM. Lo ọrọ ti o ba ni aniyan nipa awọn ikọlu XSS.
ipo okun | iṣẹ 'oke'

Bawo ni lati ipo awọn Tooltip - oke | isalẹ | osi | ọtun | auto.
Nigbati “aifọwọyi” ba ti sọ pato, yoo ṣe atunto ohun-elo naa ni agbara. Fun apẹẹrẹ, ti ipo ba jẹ “osi aifọwọyi”, ọpa irinṣẹ yoo han si apa osi nigbati o ba ṣee ṣe, bibẹẹkọ yoo ṣafihan ọtun.

Nigbati a ba lo iṣẹ kan lati pinnu ipo, o pe pẹlu ọpa DOM node bi ariyanjiyan akọkọ rẹ ati node DOM ti o nfa bi keji rẹ. A thisti ṣeto ọrọ-ọrọ si apẹẹrẹ ọpa irinṣẹ.

yiyan okun eke Ti o ba pese yiyan, awọn ohun elo irinṣẹ yoo jẹ aṣoju si awọn ibi-afẹde pàtó. Ni iṣe, eyi ni a lo lati jẹ ki akoonu HTML ti o ni agbara lati ni awọn itọsi irinṣẹ kun. Wo eyi ati apẹẹrẹ alaye .
awoṣe okun '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'

HTML mimọ lati lo nigba ṣiṣẹda ọpa irinṣẹ.

Awọn itọsi irinṣẹ titleyoo jẹ itasi sinu .tooltip-inner.

.tooltip-arrowyoo di itọka ọpa irinṣẹ.

Awọn outermost wrapper ano yẹ ki o ni awọn .tooltipkilasi.

akọle okun | iṣẹ ''

Iwọn akọle aiyipada ti titleẹda ko ba si.

Ti a ba fun iṣẹ kan, yoo pe pẹlu thisitọka rẹ ti a ṣeto si ipin ti ọpa irinṣẹ ti so mọ.

okunfa okun 'fojusi lori' Bawo ni itọka irinṣẹ ti wa ni jeki - tẹ | rababa | idojukọ | Afowoyi. O le ṣe ọpọlọpọ awọn okunfa; ya wọn pẹlu aaye kan. manualko le wa ni idapo pelu eyikeyi miiran okunfa.
wiwo okun | ohun | iṣẹ {oluyan: 'ara', padding: 0}

Ntọju ọpa irinṣẹ laarin awọn aala ti nkan yii. Apeere: viewport: '#viewport'tabi{ "selector": "#viewport", "padding": 0 }

Ti a ba fun iṣẹ kan, o pe pẹlu node DOM ti o nfa bi ariyanjiyan rẹ nikan. A thisti ṣeto ọrọ-ọrọ si apẹẹrẹ ọpa irinṣẹ.

Awọn abuda data fun awọn irinṣẹ irinṣẹ kọọkan

Awọn aṣayan fun awọn itọnisọna irinṣẹ kọọkan le jẹ iyasọtọ nipasẹ lilo awọn abuda data, bi a ti salaye loke.

Awọn ọna

$().tooltip(options)

So olutọpa ohun elo kan si ikojọpọ eroja.

.tooltip('show')

Ṣe afihan ohun elo irinṣẹ eroja kan. Pada si olupe ṣaaju ki ohun elo irinṣẹ ti han (ie ṣaaju ki shown.bs.tooltipiṣẹlẹ naa to waye). Eyi ni a ka si “afọwọṣe” ti nfa ohun elo irinṣẹ. Awọn imọran irinṣẹ pẹlu awọn akọle gigun-odo ko han rara.

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

.tooltip('hide')

Ìbòmọlẹ ohun ano ká irinṣẹ. Pada si olupe ṣaaju ki ohun elo irinṣẹ ti wa ni ipamọ gangan (ie ṣaaju ki hidden.bs.tooltipiṣẹlẹ naa to waye). Eyi ni a ka si “afọwọṣe” ti nfa ohun elo irinṣẹ.

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

.tooltip('toggle')

Yipada ohun elo itọsi irinṣẹ. Pada si olupe ṣaaju ki ohun elo irinṣẹ to ti han tabi farapamọ (ie ṣaaju ki iṣẹlẹ shown.bs.tooltiptabi hidden.bs.tooltipiṣẹlẹ to waye). Eyi ni a ka si “afọwọṣe” ti nfa ohun elo irinṣẹ.

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

.tooltip('destroy')

Hides ati ki o run ohun ano ká irinṣẹ. Awọn imọran irinṣẹ ti o lo aṣoju (eyiti a ṣẹda nipa lilo aṣayan ) selectorko le ṣe iparun ni ẹyọkan lori awọn eroja ti o nfa ọmọ.

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

Awọn iṣẹlẹ

Iṣẹlẹ Iru Apejuwe
show.bs.tooltip Yi iṣẹlẹ ina lẹsẹkẹsẹ nigbati awọn showapẹẹrẹ ọna ti a npe ni.
han.bs.tooltip Iṣẹlẹ yii jẹ ina nigba ti ohun elo irinṣẹ ti han si olumulo (yoo duro fun awọn iyipada CSS lati pari).
tọju.bs.tooltip Iṣẹlẹ yii jẹ ina lẹsẹkẹsẹ nigbati ọna hideapẹẹrẹ ti pe.
farasin.bs.tooltip Iṣẹlẹ yii jẹ ina nigbati ohun elo irinṣẹ ba ti pari fifipamọ lati ọdọ olumulo (yoo duro fun awọn iyipada CSS lati pari).
ti a fi sii.bs.tooltip Iṣẹlẹ yii jẹ ina lẹhin show.bs.tooltipiṣẹlẹ naa nigbati awoṣe ọpa irinṣẹ ti ṣafikun si DOM.
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})

Popovers popover.js

Ṣafikun awọn agbekọja kekere ti akoonu, bii awọn ti o wa lori iPad, si eyikeyi ipin fun alaye Atẹle ile.

Awọn agbejade ti akọle ati akoonu mejeeji jẹ gigun odo ko han rara.

Igbẹkẹle ohun itanna

Popovers nilo ohun itanna irinṣẹ lati wa ninu ẹya Bootstrap rẹ.

Iṣẹ ṣiṣe ijade

Fun awọn idi iṣẹ ṣiṣe, Ohun elo irinṣẹ ati data-apis Agbejade jẹ ijade, itumope o gbọdọ pilẹ wọn funrararẹ .

Ọna kan lati bẹrẹ gbogbo awọn agbejade lori oju-iwe kan yoo jẹ lati yan wọn nipasẹ data-toggleẹda wọn:

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

Popovers ni awọn ẹgbẹ bọtini, awọn ẹgbẹ titẹ sii, ati awọn tabili nilo eto pataki

Nigbati o ba nlo popovers lori awọn eroja laarin a .btn-grouptabi ẹya .input-group, tabi lori awọn eroja ti o ni ibatan tabili ( <td>, <th>, <tr>, <thead>, <tbody>, <tfoot>), iwọ yoo ni lati pato aṣayan container: 'body'(ti o wa ni isalẹ) lati yago fun awọn ipa ẹgbẹ ti aifẹ (gẹgẹbi nkan ti o dagba sii ati/ tabi padanu awọn igun rẹ ti o yika nigbati popover ti wa ni okunfa).

Maṣe gbiyanju lati ṣafihan awọn agbejade lori awọn eroja ti o farapamọ

Pipe $(...).popover('show')nigba ti nkan display: none;ibi-afẹde yoo jẹ ki popover wa ni ipo ti ko tọ.

Popovers lori awọn eroja alaabo nilo awọn eroja murasilẹ

Lati ṣafikun agbejade kan si ipin kan, disabledfi .disablednkan naa sinu inu kan <div>ki o lo popover si iyẹn <div>dipo.

Awọn ọna asopọ ila-pupọ

Nigba miiran o fẹ lati ṣafikun agbejade kan si hyperlink ti o murasilẹ awọn laini pupọ. Iwa aiyipada ti ohun itanna agbejade ni lati aarin rẹ ni ita ati ni inaro. Ṣafikun white-space: nowrap;si awọn ìdákọró rẹ lati yago fun eyi.

Awọn apẹẹrẹ

Agbejade aimi

Awọn aṣayan mẹrin wa: oke, ọtun, isalẹ, ati ti osi.

Popover oke

Sed posuere consectetur est ni lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover ọtun

Sed posuere consectetur est ni lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover isalẹ

Sed posuere consectetur est ni lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover osi

Sed posuere consectetur est ni lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Live demo

<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

Awọn itọnisọna mẹrin

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

Yọọ kuro ni titẹ atẹle

Lo focusokunfa lati yọ awọn popovers kuro ni titẹ atẹle ti olumulo ṣe.

Siṣamisi kan pato nilo fun yiyọ kuro-lori-tẹle

Fun aṣawakiri agbelebu ti o tọ ati ihuwasi Syeed, o gbọdọ lo <a>tag, kii ṣe tag <button>, ati pe o tun gbọdọ pẹlu role="button"ati awọn tabindexabuda.

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

Lilo

Mu awọn agbejade ṣiṣẹ nipasẹ JavaScript:

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

Awọn aṣayan

Awọn aṣayan le ṣee kọja nipasẹ awọn abuda data tabi JavaScript. Fun awọn abuda data, fi orukọ aṣayan si data-, bi ninu data-animation="".

Oruko Iru Aiyipada Apejuwe
iwara boolianu ooto Waye iyipada ipare CSS kan si agbejade
eiyan okun | eke eke

Ṣafikun popover si nkan kan pato. Apeere container: 'body':. Aṣayan yii wulo paapaa ni pe o fun ọ laaye lati gbe agbejade ni ṣiṣan ti iwe-ipamọ nitosi nkan ti o nfa - eyiti yoo ṣe idiwọ agbejade lati lilefoofo kuro ni nkan ti o nfa lakoko iwọn window kan.

akoonu okun | iṣẹ ''

Aiyipada akoonu iye ti o ba tidata-content abuda ko ba si.

Ti iṣẹ kan ba fun, yoo pe pẹlu thisitọkasi ti a ṣeto si nkan ti a so popover si.

idaduro nọmba | nkan 0

Idaduro iṣafihan ati fifipamo popover (ms) - ko kan si iru okunfa afọwọṣe

Ti nọmba kan ba pese, idaduro jẹ lilo si tọju/fihan mejeeji

Eto nkan jẹ:delay: { "show": 500, "hide": 100 }

html boolianu eke Fi HTML sinu agbejade. Ti o ba jẹ eke, textọna jQuery yoo ṣee lo lati fi akoonu sii sinu DOM. Lo ọrọ ti o ba ni aniyan nipa awọn ikọlu XSS.
ipo okun | iṣẹ 'ọtun'

Bawo ni lati ipo awọn popover - oke | isalẹ | osi | ọtun | auto.
Nigbati “afọwọṣe” ba ti wa ni pato, yoo ṣe atunto agbejade naa lainidi. Fun apẹẹrẹ, ti ipo ba jẹ “apa osi”, agbejade yoo han si apa osi nigbati o ba ṣee ṣe, bibẹẹkọ yoo han ọtun.

Nigbati a ba lo iṣẹ kan lati pinnu ipo, o pe pẹlu agbejade DOM agbejade bi ariyanjiyan akọkọ rẹ ati node DOM ti o nfa bi keji rẹ. A thisti ṣeto ọrọ-ọrọ si apẹẹrẹ popover.

yiyan okun eke Ti o ba ti pese yiyan, awọn ohun agbejade yoo jẹ aṣoju si awọn ibi-afẹde ti a sọ. Ni iṣe, eyi ni a lo lati mu akoonu HTML ti o ni agbara lati ni afikun awọn agbejade. Wo eyi ati apẹẹrẹ alaye .
awoṣe okun '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'

HTML mimọ lati lo nigba ṣiṣẹda popover.

Awọn popover's titleyoo jẹ itasi sinu .popover-title.

Awọn popover's contentyoo jẹ itasi sinu .popover-content.

.arrowyoo di ofa popover.

Awọn outermost wrapper ano yẹ ki o ni awọn .popoverkilasi.

akọle okun | iṣẹ ''

Iwọn akọle aiyipada ti titleẹda ko ba si.

Ti iṣẹ kan ba fun, yoo pe pẹlu thisitọkasi ti a ṣeto si nkan ti a so popover si.

okunfa okun 'tẹ' Bawo ni popover ti wa ni jeki - tẹ | rababa | idojukọ | Afowoyi. O le ṣe ọpọlọpọ awọn okunfa; ya wọn pẹlu aaye kan. manualko le wa ni idapo pelu eyikeyi miiran okunfa.
wiwo okun | ohun | iṣẹ {oluyan: 'ara', padding: 0}

Ntọju popover laarin awọn aala ti yi ano. Apeere: viewport: '#viewport'tabi{ "selector": "#viewport", "padding": 0 }

Ti a ba fun iṣẹ kan, o pe pẹlu node DOM ti o nfa bi ariyanjiyan rẹ nikan. A thisti ṣeto ọrọ-ọrọ si apẹẹrẹ popover.

Data eroja fun olukuluku popovers

Awọn aṣayan fun awọn agbejade kọọkan le jẹ iyasọtọ nipasẹ lilo awọn abuda data, bi a ti salaye loke.

Awọn ọna

$().popover(options)

Initializes popovers fun ohun akojọpọ eroja.

.popover('show')

Ṣe afihan agbejade ano kan. Pada si olupe ṣaaju ki agbejade ti han gangan (ie ṣaaju ki shown.bs.popoveriṣẹlẹ naa to waye). Eyi ni a ka si “afọwọṣe” ti nfa popover. Awọn agbejade ti akọle ati akoonu mejeeji jẹ gigun odo ko han rara.

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

.popover('hide')

Ìbòmọlẹ ohun ano ká popover. Pada si olupe ṣaaju ki agbejade ti farapamọ gangan (ie ṣaaju ki hidden.bs.popoveriṣẹlẹ naa to waye). Eyi ni a ka si “afọwọṣe” ti nfa popover.

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

.popover('toggle')

Yipada ohun ano ká popover. Pada si olupe ṣaaju ki agbejade ti han gangan tabi farapamọ (ie ṣaaju ki iṣẹlẹ shown.bs.popovertabi hidden.bs.popoveriṣẹlẹ to waye). Eyi ni a ka si “afọwọṣe” ti nfa popover.

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

.popover('destroy')

Hides ati ki o run ohun ano ká popover. Popovers ti o lo aṣoju (eyi ti a ṣẹda nipa lilo aṣayan ) selectorko le ṣe iparun ni ẹyọkan lori awọn eroja ti o nfa ọmọ.

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

Awọn iṣẹlẹ

Iṣẹlẹ Iru Apejuwe
fihan.bs.popover Yi iṣẹlẹ ina lẹsẹkẹsẹ nigbati awọn showapẹẹrẹ ọna ti a npe ni.
han.bs.popover Iṣẹlẹ yii jẹ ina nigbati popover ti jẹ ki o han si olumulo (yoo duro fun awọn iyipada CSS lati pari).
tọju.bs.popover Iṣẹlẹ yii jẹ ina lẹsẹkẹsẹ nigbati ọna hideapẹẹrẹ ti pe.
farasin.bs.popover Iṣẹlẹ yii jẹ ina nigbati agbejade ba ti pari fifipamọ lati ọdọ olumulo (yoo duro fun awọn iyipada CSS lati pari).
ti a fi sii.bs.popover Iṣẹlẹ yii jẹ ina lẹhin show.bs.popoveriṣẹlẹ naa nigbati a ti ṣafikun awoṣe popover si DOM.
$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})

Itaniji awọn ifiranṣẹ alert.js

Awọn itaniji apẹẹrẹ

Ṣafikun iṣẹ idasile si gbogbo awọn ifiranṣẹ itaniji pẹlu ohun itanna yii.

Nigbati o ba nlo .closebọtini kan, o gbọdọ jẹ ọmọ akọkọ ti .alert-dismissibleko si si akoonu ọrọ ti o le wa niwaju rẹ ni isamisi.

Lilo

Kan ṣafikun data-dismiss="alert"si bọtini isunmọ rẹ lati funni ni iṣẹ ṣiṣe isunmọ titaniji laifọwọyi. Pipade titaniji yoo yọ kuro lati DOM.

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

Lati jẹ ki awọn titaniji rẹ lo iwara nigba pipade, rii daju pe wọn ni .fadeati .inawọn kilasi ti a ti lo tẹlẹ si wọn.

Awọn ọna

$().alert()

Mu ki o gbọ titaniji fun awọn iṣẹlẹ tẹ lori awọn eroja ti o ni data-dismiss="alert"ẹda. (Ko ṣe pataki nigba lilo ipilẹṣẹ-afọwọṣe data-api.)

$().alert('close')

Tititaniji pa nipa yiyọ kuro lati DOM. Ti awọn kilasi .fadeati .inawọn kilasi ba wa lori eroja, itaniji yoo parẹ ṣaaju ki o to yọkuro.

Awọn iṣẹlẹ

Ohun itanna gbigbọn Bootstrap ṣafihan awọn iṣẹlẹ diẹ fun sisọ sinu iṣẹ ṣiṣe titaniji.

Iṣẹlẹ Iru Apejuwe
sunmo.bs.titaniji Yi iṣẹlẹ ina lẹsẹkẹsẹ nigbati awọn closeapẹẹrẹ ọna ti a npe ni.
pipade.bs.titaniji Iṣẹlẹ yii jẹ ina nigbati itaniji ti wa ni pipade (yoo duro fun awọn iyipada CSS lati pari).
$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})

Awọn bọtini bọtini.js

Ṣe diẹ sii pẹlu awọn bọtini. Awọn ipinlẹ bọtini iṣakoso tabi ṣẹda awọn ẹgbẹ ti awọn bọtini fun awọn paati diẹ sii bi awọn ọpa irinṣẹ.

Stateful

Fikun -un data-loading-text="Loading..."lati lo ipo ikojọpọ lori bọtini kan.

Ẹya ara ẹrọ yii ti wa ni idinku lati v3.3.5 ati pe o ti yọkuro ni v4.

Lo eyikeyi ipinle ti o fẹ!

Fun nitori iṣafihan yii, a nlo data-loading-textati $().button('loading'), ṣugbọn iyẹn kii ṣe ipinlẹ nikan ti o le lo. Wo diẹ sii lori eyi ni isalẹ ninu iwe- $().button(string)ipamọ .

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

Yiyi ẹyọkan

Fikun -un data-toggle="button"lati mu yiyi ṣiṣẹ lori bọtini ẹyọkan.

Pre-toggled bọtini nilo .activeatiaria-pressed="true"

Fun awọn bọtini ti a ti yipada tẹlẹ, o gbọdọ ṣafikun .activekilasi ati aria-pressed="true"ẹda si buttonararẹ.

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

Apoti ayẹwo / Redio

Ṣafikun data-toggle="buttons"si .btn-groupapoti ayẹwo tabi awọn igbewọle redio lati jẹ ki yiyi pada ni awọn aṣa ara wọn.

Awọn aṣayan ti a ti yan tẹlẹ nilo.active

Fun awọn aṣayan ti a ti yan tẹlẹ, o gbọdọ ṣafikun .activekilasi naa si ti kikọ sii labelfunrararẹ.

Ipo ti a ṣayẹwo wiwo nikan ni imudojuiwọn lori tẹ

Ti ipo ti a ṣayẹwo ti bọtini apoti ti ni imudojuiwọn laisi fifi clickiṣẹlẹ kan han lori bọtini (fun apẹẹrẹ nipasẹ <input type="reset">tabi nipasẹ eto checkedohun-ini ti titẹ sii), iwọ yoo nilo lati .activeyi kilasi naa pada lori titẹ sii labelfunrararẹ.

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

Awọn ọna

$().button('toggle')

Toggles titari ipinle. Yoo fun bọtini naa hihan ti o ti muu ṣiṣẹ.

$().button('reset')

Tun ipo bọtini atunto - yi ọrọ pada si ọrọ atilẹba. Ọna yii jẹ asynchronous ati awọn ipadabọ ṣaaju ki atunto ti pari nitootọ.

$().button(string)

Yi ọrọ pada si eyikeyi data asọye ipo ọrọ.

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

Kọlulẹ.js _

Ohun itanna to rọ ti o lo iwonba awọn kilasi fun ihuwasi yilọ irọrun.

Igbẹkẹle ohun itanna

Collapse nbeere itanna awọn iyipada lati wa ninu ẹya Bootstrap rẹ.

Apeere

Tẹ awọn bọtini ni isalẹ lati ṣafihan ati tọju nkan miiran nipasẹ awọn ayipada kilasi:

  • .collapsehides akoonu
  • .collapsingti lo lakoko awọn iyipada
  • .collapse.infihan akoonu

O le lo ọna asopọ kan pẹlu hrefabuda, tabi bọtini kan pẹlu data-targetabuda. Ni awọn ọran mejeeji, o data-toggle="collapse"nilo.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
<a class="btn btn-primary" role="button" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Link with href
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Button with data-target
</button>
<div class="collapse" id="collapseExample">
  <div class="well">
    ...
  </div>
</div>

Accordion apẹẹrẹ

Faagun ihuwasi isubu aiyipada lati ṣẹda accordion pẹlu paati nronu.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus Terry Richardson ad squid. 3 Ikooko oṣupa officia aute, ti kii cupidatat skateboard dolor brunch. Ounjẹ ikoledanu quinoa nesciunt laborum eiusmod. Brunch 3 Ikooko oṣupa tempor, sunt aliqua fi kan eye lori o squid nikan-Oti kofi nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft ọti labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher igbakeji lomo. Leggings occaecat iṣẹ ọti oko-to-tabili, aise Denimu darapupo synth nesciunt o jasi ti ko ba ti gbọ ti wọn accusamus laala alagbero VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus Terry Richardson ad squid. 3 Ikooko oṣupa officia aute, ti kii cupidatat skateboard dolor brunch. Ounjẹ ikoledanu quinoa nesciunt laborum eiusmod. Brunch 3 Ikooko oṣupa tempor, sunt aliqua fi kan eye lori o squid nikan-Oti kofi nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft ọti labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher igbakeji lomo. Leggings occaecat iṣẹ ọti oko-to-tabili, aise Denimu darapupo synth nesciunt o jasi ti ko ba ti gbọ ti wọn accusamus laala alagbero VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus Terry Richardson ad squid. 3 Ikooko oṣupa officia aute, ti kii cupidatat skateboard dolor brunch. Ounjẹ ikoledanu quinoa nesciunt laborum eiusmod. Brunch 3 Ikooko oṣupa tempor, sunt aliqua fi kan eye lori o squid nikan-Oti kofi nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft ọti labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher igbakeji lomo. Leggings occaecat iṣẹ ọti oko-to-tabili, aise Denimu darapupo synth nesciunt o jasi ti ko ba ti gbọ ti wọn accusamus laala alagbero VHS.
<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>

O tun ṣee ṣe lati paarọ .panel-bodys pẹlu .list-groups.

  • Bootply
  • Ọkan itmus ac facilin
  • Eros keji

Mu ki awọn idari faagun/rukulẹ ni iraye si

Rii daju lati ṣafikun aria-expandedsi ipin iṣakoso. Ẹya-ara yii ṣe alaye ni gbangba ipo lọwọlọwọ ti eroja ti o le ṣagbe si awọn oluka iboju ati awọn imọ-ẹrọ iranlọwọ ti o jọra. Ti nkan ti o le kojọpọ ba wa ni pipade nipasẹ aiyipada, o yẹ ki o ni iye kan ti aria-expanded="false". Ti o ba ti ṣeto eroja ikojọpọ lati ṣii nipasẹ aiyipada nipa lilo inkilasi, ṣetoaria-expanded="true" lori iṣakoso dipo. Ohun itanna naa yoo yi abuda yii pada laifọwọyi da lori boya tabi ko ti ṣii ohun elo ikojọpọ tabi tiipa.

Ni afikun, ti abala iṣakoso rẹ ba n fojusi ohun elo ikojọpọ kan ṣoṣo - ie data-targetabuda naa n tọka si idoluyan - o le ṣafikun ẹya afikun aria-controlssi ipin iṣakoso, ti o ni nkan idti o le kọlu. Awọn oluka iboju ode oni ati awọn imọ-ẹrọ iranlọwọ ti o jọra ṣe lilo abuda yii lati pese awọn olumulo pẹlu awọn ọna abuja ni afikun lati lilö kiri taara si nkan ti o le kọlu funrararẹ.

Lilo

Ohun itanna idapọmọra nlo awọn kilasi diẹ lati mu gbigbe gbigbe ti o wuwo naa:

  • .collapsehides awọn akoonu
  • .collapse.infihan akoonu
  • .collapsingti wa ni afikun nigbati awọn orilede bẹrẹ, ati kuro nigbati o ba pari

Awọn kilasi wọnyi le wa ni component-animations.less.

Nipasẹ awọn abuda data

Kan ṣafikun data-toggle="collapse"ati kan data-targetsi eroja lati fi iṣakoso laifọwọyi ti nkan kan ti o le bajẹ. Ẹya naa data-targetgba oluyan CSS kan lati lo iṣubu si. Rii daju lati ṣafikun kilasi collapsenaa si nkan ti o le ṣubu. Ti o ba fẹ ki o ṣii aiyipada, ṣafikun afikun kilasi in.

Lati ṣafikun iṣakoso ẹgbẹ bi accordion si iṣakoso ikojọpọ, ṣafikun abuda data naa data-parent="#selector". Tọkasi demo lati wo eyi ni iṣe.

Nipasẹ JavaScript

Mu ṣiṣẹ pẹlu ọwọ pẹlu:

$('.collapse').collapse()

Awọn aṣayan

Awọn aṣayan le ṣee kọja nipasẹ awọn abuda data tabi JavaScript. Fun awọn abuda data, fi orukọ aṣayan si data-, bi ninu data-parent="".

Oruko iru aiyipada apejuwe
obi yiyan eke Ti o ba ti pese yiyan, lẹhinna gbogbo awọn eroja ti o le kojọpọ labẹ obi ti a ti sọ ni yoo wa ni pipade nigbati ohun kan ti o le kọlu ba han. (iru si iwa accordion ti aṣa - eyi da lori panelkilasi)
yipada boolianu ooto Yipada eroja ti o le kolu lori ẹbẹ

Awọn ọna

.collapse(options)

Mu akoonu rẹ ṣiṣẹ bi eroja ti o le kolu. Gba awọn aṣayan iyan object.

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

.collapse('toggle')

Yipada eroja ti o le kolu lati ṣafihan tabi pamọ. Pada si olupe ṣaaju ki nkan ti o le kọlu ti han tabi farapamọ gangan (ie ṣaaju ki iṣẹlẹ shown.bs.collapsetabi hidden.bs.collapseiṣẹlẹ to waye).

.collapse('show')

Ṣe afihan eroja ti o le ṣubu. Pada si olupe ṣaaju ki nkan ti o le kọlu ti han ni otitọ (ie ṣaaju ki shown.bs.collapseiṣẹlẹ naa to waye).

.collapse('hide')

Ìbòmọlẹ ohun kan collapsible. Pada si olupe ṣaaju ki nkan ti o le kolu ti farapamọ nitootọ (ie ṣaaju ki hidden.bs.collapseiṣẹlẹ naa to waye).

Awọn iṣẹlẹ

Kilasi Collapse Bootstrap ṣafihan awọn iṣẹlẹ diẹ fun sisọ sinu iṣẹ ṣiṣe iṣubu.

Iṣẹlẹ Iru Apejuwe
fihan.bs.kolapse Yi iṣẹlẹ ina lẹsẹkẹsẹ nigbati awọn showapẹẹrẹ ọna ti a npe ni.
ti a fihan.bs.kolapse Iṣẹlẹ yii jẹ ina nigba ti a ti jẹ ki nkan idaruku kan han si olumulo (yoo duro fun awọn iyipada CSS lati pari).
tọju.bs.collapse Yi iṣẹlẹ ti wa ni kuro lenu ise lẹsẹkẹsẹ nigbati awọn hideọna ti a ti a npe ni.
farasin.bs.colapse Iṣẹlẹ yii jẹ ina nigba ti ohun elo iṣubu kan ti farapamọ lati ọdọ olumulo (yoo duro fun awọn iyipada CSS lati pari).
$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})

Carousel carousel.js

Apakan agbelera fun gigun kẹkẹ nipasẹ awọn eroja, bii carousel kan. Awọn carousels itẹle ko ni atilẹyin.

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

Awọn akọle iyan

Ṣafikun awọn akọle si awọn ifaworanhan rẹ ni irọrun pẹlu .carousel-captioneroja laarin eyikeyi .item. Gbe o kan nipa eyikeyi HTML iyan laarin nibẹ ati pe yoo wa ni ibamu laifọwọyi ati ṣe akoonu.

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

Awọn carousels pupọ

Carousels nilo lilo ohun idlori apo eiyan ti ita (awọn .carousel) fun awọn iṣakoso carousel lati ṣiṣẹ daradara. Nigbati o ba nfi ọpọlọpọ awọn carousels kun, tabi nigba iyipada carousel's kan id, rii daju lati ṣe imudojuiwọn awọn idari ti o yẹ.

Nipasẹ awọn abuda data

Lo awọn abuda data lati ṣakoso ni irọrun ipo ti carousel. data-slidegba awọn koko-ọrọ prevtabi next, eyiti o paarọ ipo ifaworanhan ni ibatan si ipo lọwọlọwọ rẹ. Ni omiiran, lo data-slide-tolati kọja atọka ifaworanhan aise si carousel data-slide-to="2", eyiti o yi ipo ifaworanhan si atọka kan pato ti o bẹrẹ pẹlu 0.

Ẹya data-ride="carousel"naa ni a lo lati samisi carousel kan bi ere idaraya ti o bẹrẹ ni fifuye oju-iwe. Ko ṣee lo ni apapo pẹlu (laiṣe ati kobojumu) ipilẹṣẹ JavaScript ti o fojuhan ti carousel kanna.

Nipasẹ JavaScript

Pe carousel pẹlu ọwọ pẹlu:

$('.carousel').carousel()

Awọn aṣayan le ṣee kọja nipasẹ awọn abuda data tabi JavaScript. Fun awọn abuda data, fi orukọ aṣayan si data-, bi ninu data-interval="".

Oruko iru aiyipada apejuwe
aarin nọmba 5000 Iye akoko lati ṣe idaduro laarin gigun kẹkẹ ohun kan laifọwọyi. Ti o ba jẹ eke, carousel kii yoo yipo laifọwọyi.
da duro okun | asan "rababa" Ti o ba ṣeto si "hover", da duro gigun kẹkẹ ti carousel lori mouseenterati tun bẹrẹ gigun kẹkẹ ti carousel lori mouseleave. Ti a ba ṣeto si null, gbigbe lori carousel kii yoo da duro.
murasilẹ boolianu ooto Boya carousel yẹ ki o yipo nigbagbogbo tabi ni awọn iduro lile.
keyboard boolianu ooto Boya carousel yẹ ki o fesi si awọn iṣẹlẹ keyboard.

Ti bẹrẹ carousel pẹlu awọn aṣayan iyan objectati bẹrẹ gigun kẹkẹ nipasẹ awọn ohun kan.

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

Yiyipo nipasẹ awọn ohun carousel lati osi si otun.

Da carousel duro lati gigun kẹkẹ nipasẹ awọn ohun kan.

Yi kẹkẹ carousel lọ si fireemu kan pato (orisun 0, iru si orun).

Awọn iyipo si nkan ti tẹlẹ.

Awọn iyipo si nkan atẹle.

Kilasi carousel Bootstrap ṣafihan awọn iṣẹlẹ meji fun sisọ sinu iṣẹ ṣiṣe carousel.

Awọn iṣẹlẹ mejeeji ni awọn ohun-ini afikun wọnyi:

  • direction: Awọn itọsọna ninu eyi ti awọn carousel ti wa ni sisun (boya "left"tabi "right").
  • relatedTarget: Eroja DOM ti o wa ni slid sinu aaye bi ohun ti nṣiṣe lọwọ.

Gbogbo awọn iṣẹlẹ carousel jẹ ina si carousel funrararẹ (ie ni <div class="carousel">).

Iṣẹlẹ Iru Apejuwe
slide.bs.carousel Iṣẹlẹ yii ina lẹsẹkẹsẹ nigbati ọna slideapẹẹrẹ ba pe.
slid.bs.carousel Iṣẹlẹ yii jẹ ina nigbati carousel ti pari iyipada ifaworanhan rẹ.
$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
})

Affix.js _

Apeere

Ohun itanna affix naa yipada position: fixed;si tan ati pipa, ti o ṣe apẹẹrẹ ipa ti a rii pẹlu position: sticky;. Subnavigation ni apa ọtun jẹ demo ifiwe ti ohun itanna affix.


Lilo

Lo ohun itanna affix nipasẹ awọn abuda data tabi pẹlu ọwọ pẹlu JavaScript tirẹ.Ni awọn ipo mejeeji, o gbọdọ pese CSS fun ipo ati iwọn akoonu ti a fi si.

Akiyesi: Maṣe lo ohun itanna affix lori eroja ti o wa ninu ipo ipo ti o jo, gẹgẹbi ti o fa tabi ti ọwọn, nitori aṣiṣe ti n ṣe Safari .

Ipo nipasẹ CSS

Ohun itanna affix yi yipada laarin awọn kilasi mẹta, ọkọọkan ti o nsoju ipo kan: .affix, .affix-top, ati .affix-bottom. O gbọdọ pese awọn aza, pẹlu awọn sile ti position: fixed;lori .affix, fun awọn wọnyi kilasi ara rẹ (ominira ti yi ohun itanna) lati mu awọn gangan awọn ipo.

Eyi ni bii ohun itanna affix ṣe n ṣiṣẹ:

  1. Lati bẹrẹ, itanna naa ṣafikun.affix-top lati tọka pe eroja wa ni ipo oke-julọ julọ. Ni aaye yii ko si ipo CSS ko nilo.
  2. Yi lọ kọja nkan ti o fẹ fi sii yẹ ki o fa ifaramọ gangan. Eyi ni ibiti o ti .affixrọpo .affix-topati ṣeto position: fixed;(ti a pese nipasẹ Bootstrap's CSS).
  3. Ti aiṣedeede isalẹ ba jẹ asọye, yi lọ kọja o yẹ ki o rọpo .affixpẹlu .affix-bottom. Niwọn bi awọn aiṣedeede jẹ iyan, eto ọkan nilo ki o ṣeto CSS ti o yẹ. Ni idi eyi, fi sii position: absolute;nigbati o jẹ dandan. Ohun itanna naa nlo abuda data tabi aṣayan JavaScript lati pinnu ibiti o le gbe nkan naa si lati ibẹ.

Tẹle awọn igbesẹ ti o wa loke lati ṣeto CSS rẹ fun boya awọn aṣayan lilo ni isalẹ.

Nipasẹ awọn abuda data

Lati fi irọrun ṣafikun ihuwasi affix si eyikeyi eroja, kan ṣafikun data-spy="affix"si ipin ti o fẹ ṣe amí lori. Lo awọn aiṣedeede lati ṣalaye igba lati yi pinni ti nkan kan pada.

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

Nipasẹ JavaScript

Pe ohun itanna affix nipasẹ JavaScript:

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

Awọn aṣayan

Awọn aṣayan le ṣee kọja nipasẹ awọn abuda data tabi JavaScript. Fun awọn abuda data, fi orukọ aṣayan si data-, bi ninu data-offset-top="200".

Oruko iru aiyipada apejuwe
aiṣedeede nọmba | iṣẹ | nkan 10 Awọn piksẹli lati aiṣedeede lati iboju nigbati o ṣe iṣiro ipo ti yi lọ. Ti nọmba kan ba pese, aiṣedeede yoo lo ni awọn itọnisọna oke ati isalẹ. Lati pese alailẹgbẹ, isale ati aiṣedeede oke kan pese ohun kan offset: { top: 10 }tabi offset: { top: 10, bottom: 5 }. Lo iṣẹ kan nigbati o nilo lati ṣe iṣiro aiṣedeede kan ni agbara.
afojusun yiyan | ipade | jQuery eroja nkan windowna Ntọka ipin ibi-afẹde ti affix.

Awọn ọna

.affix(options)

Mu akoonu rẹ ṣiṣẹ bi akoonu ti a somọ. Gba awọn aṣayan iyan object.

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

.affix('checkPosition')

Ṣe atunto ipo affix ti o da lori awọn iwọn, ipo, ati ipo yi lọ ti awọn eroja ti o yẹ. Awọn .affix, .affix-top, ati .affix-bottomawọn kilasi ti wa ni afikun si tabi yọkuro lati akoonu ti a fi si ni ibamu si ipinle titun. Ọna yii nilo lati pe ni igbakugba ti awọn iwọn ti akoonu ti a fi si tabi eroja ibi-afẹde ti yipada, lati rii daju ipo ti o tọ ti akoonu ti a somọ.

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

Awọn iṣẹlẹ

Ohun itanna affix Bootstrap ṣe afihan awọn iṣẹlẹ diẹ fun sisọ sinu iṣẹ affix.

Iṣẹlẹ Iru Apejuwe
ìfisí.bs.àfikún Iṣẹlẹ yii n tan lẹsẹkẹsẹ ṣaaju ki nkan naa ti fi sii.
affixed.bs.afikun Yi iṣẹlẹ ti wa ni kuro lenu ise lẹhin ti awọn ano ti a ti somọ.
affix-oke.bs.afisi Iṣẹlẹ yii n tan lẹsẹkẹsẹ ṣaaju ki a ti fi nkan naa si oke.
affixed-oke.bs.afisi Yi iṣẹlẹ ti wa ni lenu ise lẹhin ti awọn ano ti a affixed-oke.
affix-bottom.bs.afisi Iṣẹlẹ yii n tan lẹsẹkẹsẹ ṣaaju ki a ti fi nkan naa si isalẹ.
affixed-bottom.bs.affix Iṣẹlẹ yii jẹ ina lẹhin ti a ti fi nkan naa si isalẹ.