Incamake

Umuntu ku giti cye cyangwa yakusanyijwe

Amacomeka arashobora gushyirwamo kugiti cye (ukoresheje *.jsdosiye ya Bootstrap), cyangwa byose icyarimwe (ukoresheje bootstrap.jscyangwa ugabanijwe bootstrap.min.js).

Ukoresheje JavaScript yakozwe

Byombi bootstrap.jskandi bootstrap.min.jsbirimo amacomeka yose muri dosiye imwe. Shyiramo imwe gusa.

Amacomeka

Amacomeka hamwe nibice bya CSS biterwa nandi macomeka. Niba ushizemo amacomeka kugiti cye, menya neza niba ugenzura ibyo biterwa muri doc. Menya kandi ko amacomeka yose aterwa na jQuery (ibi bivuze ko jQuery igomba kuba irimo mbere ya dosiye ya plugin). Menyesha ibyacubower.json kugirango urebe verisiyo ya jQuery ishyigikiwe.

Ibiranga amakuru

Urashobora gukoresha amacomeka ya Bootstrap yose ukoresheje marike API utanditse umurongo umwe wa JavaScript. Nibikorwa bya Bootstrap byo mucyiciro cya mbere API kandi bigomba kuba ibitekerezo byambere mugihe ukoresheje plugin.

Ibyo byavuzwe, mubihe bimwe na bimwe birashobora kuba byiza kuzimya iyi mikorere. Kubwibyo, turatanga kandi ubushobozi bwo guhagarika amakuru ikiranga API muguhuza ibyabaye byose kumazina yinyandiko yashyizwe hamwe data-api. Ibi bisa nkibi:

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

Ubundi, kugirango ugaragaze plugin yihariye, shyiramo gusa izina rya plugin nkumwanya wizina hamwe na data-api izina ryumwanya nkuyu:

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

Gucomeka kamwe gusa kuri element ukoresheje ibiranga amakuru

Ntukoreshe ibiranga amakuru kuva mumacomeka menshi kubintu bimwe. Kurugero, buto ntishobora kugira ibikoresho byombi no guhinduranya modal. Kugirango ubigereho, koresha ikintu cyo gupfunyika.

Gahunda ya API

Turizera kandi ko ugomba gushobora gukoresha amacomeka yose ya Bootstrap ukoresheje JavaScript API. API rusange rusange ni imwe, uburyo bukurikirana, kandi igasubiza icyegeranyo cyakozwe.

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

Uburyo bwose bugomba kwemera ibintu bidahitamo ikintu, umugozi ugamije uburyo runaka, cyangwa ntakintu (gitangiza plugin hamwe nimyitwarire idasanzwe):

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

Buri plugin irerekana kandi ibyubaka byayo ku Constructormutungo : $.fn.popover.Constructor. Niba ushaka kubona plugin runaka urugero, iyikure muburyo butaziguye : $('[rel="popover"]').data('popover').

Igenamiterere risanzwe

Urashobora guhindura igenamiterere risanzwe rya plugin uhindura Constructor.DEFAULTSikintu cya plugin:

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

Nta makimbirane

Rimwe na rimwe, birakenewe gukoresha amacomeka ya Bootstrap hamwe nibindi UI. Muri ibi bihe, umwanya wizina urashobora guhura rimwe na rimwe. Niba ibi bibaye, urashobora guhamagara .noConflictkuri plugin wifuza guhindura agaciro ka.

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

Ibyabaye

Bootstrap itanga ibyabaye kubintu byinshi byacometse kubikorwa byihariye. Mubisanzwe, ibi biza muburyo butagira ingano kandi bwashize - aho infinitive (ex. show) Itangizwa mugitangira ibirori, kandi ifishi yacyo ya kera (ex. shown) Iterwa no kurangiza igikorwa.

Kuva 3.0.0, ibyabaye byose muri Bootstrap ni amazina.

Ibintu byose bitagira ingano bitanga preventDefaultimikorere. Ibi bitanga ubushobozi bwo guhagarika ikorwa ryigikorwa mbere yuko gitangira.

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

Inomero

Verisiyo ya buri pompe ya jQuery ya Bootstrap irashobora kugerwaho hifashishijwe VERSIONumutungo wububiko bwa plugin. Kurugero, kubikoresho bya plugin:

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

Nta gusubira inyuma bidasanzwe iyo JavaScript ihagaritswe

Amacomeka ya Bootstrap ntasubira inyuma cyane cyane mugihe JavaScript ihagaritswe. Niba witaye kuburambe bwabakoresha muriki kibazo, koresha <noscript>kugirango usobanure uko ibintu bimeze (nuburyo bwo kongera gukora JavaScript) kubakoresha, kandi / cyangwa wongereho ibyo wiboneye.

Isomero ryabandi

Bootstrap ntabwo ishigikira kumugaragaro amasomero-yandi masomero ya JavaScript nka Prototype cyangwa jQuery UI. Nubwo .noConflicthamwe n'amazina yibyabaye, hashobora kubaho ibibazo byo guhuza ukeneye kwikemurira wenyine.

Inzibacyuho.js _

Ibyerekeye inzibacyuho

Kubintu byoroshye byinzibacyuho, shyiramo transition.jsrimwe kuruhande rwizindi dosiye za JS. Niba ukoresha icyegeranyo (cyangwa cyaciwe) bootstrap.js, nta mpamvu yo gushyiramo ibi-birahari.

Ibiri imbere

Inzibacyuho.js numufasha wibanze transitionEndkubyabaye kimwe na CSS yinzibacyuho. Ikoreshwa nandi macomeka kugirango agenzure inkunga ya CSS yinzibacyuho no gufata inzibacyuho.

Guhagarika inzibacyuho

Inzibacyuho irashobora guhagarikwa kwisi yose ukoresheje ibice bikurikira bya JavaScript, bigomba kuza nyuma transition.js(cyangwa bootstrap.js, bootstrap.min.jsnkuko bigenda) byapakiwe:

$.support.transition = false

Uburyo modal.js

Moderi iroroshe, ariko iroroshye, ikiganiro kibaza hamwe nibikorwa byibuze bisabwa nibikorwa byubwenge.

Inzira nyinshi zifunguye ntabwo zishyigikiwe

Witondere kudafungura modal mugihe undi aracyagaragara. Kwerekana modal zirenze imwe icyarimwe bisaba kode yihariye.

Ikimenyetso cyerekana

Buri gihe gerageza gushyira kode ya modal ya HTML muburyo bwo hejuru murwego rwinyandiko yawe kugirango wirinde ibindi bice bigira ingaruka kumiterere ya modal na / cyangwa imikorere.

Igikoresho kigendanwa

Hano hari caveats zijyanye no gukoresha modal kubikoresho bigendanwa. Reba amashakiro yacu ashyigikira doc kubisobanuro birambuye.

Bitewe nuburyo HTML5 isobanura ibisobanuro byayo, autofocusikiranga HTML nta ngaruka igira muburyo bwa Bootstrap. Kugirango ugere ku ngaruka zimwe, koresha JavaScript imwe yihariye:

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

Ingero

Urugero ruhamye

Byahinduwe modal hamwe numutwe, umubiri, hamwe nibikorwa byumutwe.

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

Kubaho

Hindura modal ukoresheje JavaScript ukanze buto hepfo. Bizanyerera kandi bishire hejuru yurupapuro.

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

Kora uburyo bworoshye

Wemeze kongeramo role="dialog"kandi aria-labelledby="...", werekeza kumutwe wuburyo, kuri .modal, no role="document"kuri .modal-dialogwenyine.

Byongeye kandi, urashobora gutanga ibisobanuro byuburyo bwikiganiro hamwe aria-describedbyna .modal.

Gushyira amashusho ya YouTube

Gushyira amashusho ya YouTube muburyo busaba JavaScript yinyongera itari muri Bootstrap kugirango ihite ihagarika gukina nibindi. Reba iyi nyandiko ifasha Stack Overflow post kubindi bisobanuro.

Ingano

Moderi ifite ubunini bubiri butandukanye, buraboneka binyuze mumashuri ahindura kugirango ashyirwe kuri a .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>

Kuraho animasiyo

Kuburyo bugaragara gusa aho gushira kugirango turebe, kura urwego muburyo .fadebwawe.

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

Koresha sisitemu ya gride

Kugirango ukoreshe sisitemu ya Bootstrap ya sisitemu muburyo bwa modal, gusa icyari .rows muri .modal-bodyhanyuma hanyuma ukoreshe urwego rusanzwe rwa sisitemu.

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

Ufite buto ya buto yose itera modal imwe, gusa nibirimo bitandukanye? Koresha event.relatedTargetna HTML data-*ibiranga (birashoboka binyuze kuri jQuery ) kugirango uhindure ibiri muri modal ukurikije buto yakanze. Reba Modal Events docs ibisobanuro birambuye kuri relatedTarget,

... buto nyinshi ...
<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)
})

Ikoreshwa

Amacomeka ya modal ahinduranya ibintu byihishe kubisabwa, ukoresheje ibiranga data cyangwa JavaScript. Iyongera kandi .modal-openkuri <body>to override imyitwarire idasanzwe yo kuzunguruka kandi ikabyara a .modal-backdropgutanga agace kanda kugirango wirukane moderi yerekanwe mugihe ukanze hanze yuburyo.

Binyuze mu biranga amakuru

Kora modal utanditse JavaScript. Shyira data-toggle="modal"ku kintu kigenzura, nka buto, hamwe na a data-target="#foo"cyangwa href="#foo"ugamije uburyo bwihariye bwo guhinduranya.

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

Binyuze kuri JavaScript

Hamagara modal ifite id myModalifite umurongo umwe wa JavaScript:

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

Amahitamo

Amahitamo arashobora kunyuzwa kumurongo wamakuru cyangwa JavaScript. Kubiranga Ibyatanzwe, Ongeraho Ihitamo Izina Kuri data-, Nka Muri data-backdrop="".

Izina Ubwoko Mburabuzi ibisobanuro
Inyuma boolean cyangwa umugozi'static' ni ukuri Harimo modal-backdrop element. Ubundi, vuga statickuri backdrop idafunga modal kanda.
Mwandikisho boolean ni ukuri Gufunga modal mugihe urufunguzo rwo guhunga rukanda
kwerekana boolean ni ukuri Erekana modal mugihe yatangijwe.
kure inzira ibinyoma

Ihitamo ryataye agaciro kuva v3.3.0 kandi ryakuweho muri v4. Turasaba ahubwo gukoresha abakiriya kuruhande rwicyitegererezo cyangwa guhuza amakuru, cyangwa guhamagara jQuery.wikore wenyine.

Niba URL ya kure yatanzwe, ibirimo bizapakirwa inshuro imwe hakoreshejwe uburyo bwa jQuery loadhanyuma binjizwe muri .modal-contentdiv. Niba ukoresha data-api, urashobora gukoresha ubundi buryo hrefkugirango ugaragaze inkomoko ya kure. Urugero rwibi rwerekanwe hepfo:

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

Uburyo

Koresha ibikubiyemo nkibisanzwe. Emera amahitamo object.

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

Intoki ihinduranya modal. Garuka kumuhamagara mbere yuburyo bwerekanwe cyangwa bwihishe (ni ukuvuga mbere yuko ibyabaye shown.bs.modalcyangwa hidden.bs.modalibyabaye bibaho).

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

Nintoki ifungura modal. Garuka kumuhamagara mbere yuburyo bwerekanwe (ni ukuvuga mbere yuko shown.bs.modalibyabaye biba).

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

Nintoki ihishe modal. Garuka kumuhamagara mbere yuburyo bwihishe (nukuvuga mbere yuko hidden.bs.modalibyabaye bibaho).

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

Ongera uhindure modal ihagaze kugirango uhangane numuzingo mugihe umuntu agomba kugaragara, byatuma modal isimbuka ibumoso.

Gusa birakenewe mugihe uburebure bwa modal buhinduka mugihe burakinguye.

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

Ibyabaye

Icyiciro cya Bootstrap cyerekana ibyabaye bike kugirango bifatanye mubikorwa.

Ibintu byose byabaye birasa kuri modal ubwayo (ni ukuvuga kuri <div class="modal">).

Ubwoko bwibyabaye Ibisobanuro
kwerekana.bs.modal Ibirori birasa ako kanya mugihe showurugero rwitwa. Niba byatewe no gukanda, ibintu byakanze birahari relatedTargetnkumutungo wibyabaye.
yerekanwe.bs.modal Ibirori birukanwa mugihe modal yakozwe igaragara kubakoresha (izategereza ko inzibacyuho ya CSS irangira). Niba byatewe no gukanda, ibintu byakanze birahari relatedTargetnkumutungo wibyabaye.
guhisha.bs.modal Ibi birori birahita bisohoka mugihe uburyo hidebwurugero bwahamagawe.
bihishe.bs.modal Ibirori birukanwa mugihe modal yarangije guhishwa kubakoresha (izategereza ko inzibacyuho ya CSS irangira).
yapimwe.bs.modal Ibirori birukanwa mugihe modal yapakiye ibintu ukoresheje remoteamahitamo.
$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

Ibitonyanga bitonyanga.js

Ongeraho ibimanuka hafi kubintu byose hamwe niyi plugin yoroshye, harimo na navbar, tabs, n'ibinini.

Muri navbar

Mu binini

Binyuze muri data ibiranga cyangwa JavaScript, plugin yamanutse ihinduranya ibintu byihishe (ibimanuka byamanutse) muguhindura .openicyiciro kurutonde rwababyeyi.

Ku bikoresho bigendanwa, gufungura ibitonyanga byongeraho .dropdown-backdropnka kanda yo gufunga ibimanuka mugihe ukanda hanze ya menu, ibisabwa kugirango ubone ubufasha bukwiye bwa iOS. Ibi bivuze ko guhindukira ukava kuri menu yamanutse ukajya kurutonde rutandukanye bisaba gukanda kuri mobile.

Icyitonderwa: data-toggle="dropdown"Ikiranga gishingiye ku gufunga ibimanuka kurutonde rwa porogaramu, nibyiza rero guhora tuyikoresha.

Binyuze mu biranga amakuru

Ongeraho data-toggle="dropdown"kumurongo cyangwa buto kugirango uhindure ibitonyanga.

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

Kugirango URL igumane hamwe na buto ihuza, koresha data-targetikiranga aho 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>

Binyuze kuri JavaScript

Hamagara ibitonyanga ukoresheje JavaScript:

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

data-toggle="dropdown"biracyasabwa

Utitaye ko wahamagaye ibitonyanga ukoresheje JavaScript cyangwa ugakoresha data-api, data-toggle="dropdown"burigihe birasabwa kuba uhari kubintu byamanutse.

Nta na kimwe

Kuzuza menu yamanutse ya navbar yatanzwe cyangwa kugendagenda.

Ibintu byose byamanutse birasa kuri .dropdown-menu's element element.

Ibintu byose byamanutse bifite relatedTargetumutungo, agaciro kayo nikintu gihindagurika.

Ubwoko bwibyabaye Ibisobanuro
kwerekana.bs.dropdown Ibirori birasa ako kanya iyo kwerekana urugero uburyo bwitwa.
yerekanwe.bs.kumanuka Ibirori birukanwa mugihe ibitonyanga byakozwe kugaragara kubakoresha (bizategereza inzibacyuho ya CSS, kugirango birangire).
guhisha.bs.kumanuka Ibi birori birahita bisohoka mugihe uburyo bwo guhisha bwahamagawe.
bihishe.bs.dropdown Ibirori birukanwa mugihe ibitonyanga byarangije guhishwa kubakoresha (bizategereza inzibacyuho ya CSS, kugirango birangire).
$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})

UmuzingoSpy umuzingo.js

Urugero muri navbar

Gucomeka kwa ScrollSpy nuguhita uvugurura intego za nav ukurikije umwanya wizingo. Kuzenguruka agace kari munsi ya navbar hanyuma urebe ibyiciro bikora. Ibitonyanga byamanuka bizagaragazwa kandi.

@fat

Ad leggings keytar, brunch id art ibirori dolor labore. Pitchfork yr enim lo-fi mbere yuko bagurisha qui. Tumblr umurima-kumeza uburenganzira bwamagare ibyo aribyo byose. Anim keffiyeh carles cardigan. Velit seitan mcsweeney ifoto yicyumba 3 impyisi ukwezi irure. Cosby swater lomo jean ikabutura, williamsburg hoodie minim qui ushobora kuba utarigeze ubyumva et cardigan kwizera ikigega culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, inguzanyo irony biodiesel keffiyeh artisan ullamco ingaruka.

@mdo

Veniam marfa ubwanwa bwa skateboard, adipisising fugiat velit pitchfork ubwanwa. Freegan ubwanwa aliqua cupidatat mcsweeney's vero. Cupidatat bane loko nisi, ea helvetica nulla carles. Tattooed cosby swater ikamyo y'ibiryo, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles imyitozo idahwitse quis gentrify. Brooklyn adipisising ubukorikori byeri vice keytar deserunt.

imwe

Occaecat commodo aliqua delectus. Fap craft inzoga deserunt skateboard ea. Lomo uburenganzira bwamagare adipisising banh mi, velit ea sunt urwego rukurikira locavore ikawa imwe ikomoka muri magna veniam. Ubuzima burebure id vinyl, echo parike ibisubizo quis aliquip banh mi pitchfork. Vero VHS est adipisising. Consectetur nisi DIY minim messenger umufuka. Cred ex in, irambye delectus consectetur fanny pack iphone.

bibiri

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 blog, culpa messenger umufuka marfa icyaricyo cyose cya delectus ikamyo. Sapiente synth id assnda. Lokavore sed helvetica cliche irony, inkuba ushobora kuba utarigeze uyumva ingaruka za hoodie gluten-yubusa lo-fi fap aliquip. Umurimo elit umwanya mbere yuko bagurisha, terry richardson proident brunch nesciunt quis cosby swater pariatur keffiyeh ut helvetica umunyabukorikori. Cardigan craft byeri seitan yiteguye gukora velit. VHS chambray laboris by'agateganyo veniam. Anim mollit minim commodo ullamco inkuba.

Ikoreshwa

Irasaba Bootstrap nav

Scrollspy isaba gukoresha ikoreshwa rya Bootstrap nav kugirango igaragaze neza amahuza akora.

Intego z'indangamuntu zikemurwa zisabwa

Imiyoboro ya Navbar igomba kuba ifite intego id idakemuka. Kurugero, <a href="#home">home</a>hagomba guhura nibintu muri DOM nka <div id="home"></div>.

Ibintu bitari :visibleintego birengagijwe

Intego yibintu bidahuye :visiblena jQuery izirengagizwa kandi ibintu bihuye nabyo ntibizigera bigaragara.

Irasaba umwanya ugereranije

Ntakibazo cyogushira mubikorwa, umuzingo usaba gukoresha ikoreshwa position: relative;mubintu urimo kuneka. Mu bihe byinshi iyi ni <body>. Mugihe uzunguruka ku bindi bitari u <body>, menya neza ko heightwashyizeho kandi ugashyirwa overflow-y: scroll;mubikorwa.

Binyuze mu biranga amakuru

Kugirango wongere byoroshye imyitwarire ya scrollspy kumurongo wawe wo hejuru, ongera kubintu ushaka kuneka data-spy="scroll"(mubisanzwe ibi byaba aribyo <body>). Noneho ongeraho data-targetikiranga hamwe nindangamuntu cyangwa urwego rwibintu byababyeyi .navbigize 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>

Binyuze kuri JavaScript

Nyuma yo kongera position: relative;muri CSS yawe, hamagara umuzingo ukoresheje JavaScript:

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

Uburyo

.scrollspy('refresh')

Mugihe ukoresheje umuzingo ufatanije no kongera cyangwa gukuraho ibintu muri DOM, uzakenera guhamagara uburyo bushya nka gutya:

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

Amahitamo

Amahitamo arashobora kunyuzwa kumurongo wamakuru cyangwa JavaScript. Kubiranga Ibyatanzwe, Ongeraho Ihitamo Izina Kuri data-, Nka Muri data-offset="".

Izina Ubwoko Mburabuzi ibisobanuro
offset umubare 10 Pixels kugirango uve hejuru iyo ubaze umwanya wumuzingo.

Ibyabaye

Ubwoko bwibyabaye Ibisobanuro
gukora.bs.scrollspy Ibirori birashya igihe cyose ikintu gishya gihinduwe na muzingo.
$('#myScrollspy').on('activate.bs.scrollspy', function () {
  // do something…
})

Togglable tabs tab.js

Urugero

Ongeraho byihuse, imbaraga za tab imikorere kugirango uhindurwe unyuze kumurongo wibirimo byaho, ndetse unyuze kumurongo. Utubuto twashyizwe hamwe ntabwo dushyigikiwe.

Raw denim ushobora kuba utarigeze wumva ibya jean ikabutura Austin. Nesciunt tofu stumptown aliqua, retro synth master suku. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh inzozi zo gufata. Cosby swater eu banh mi, qui irure terry richardson ex squid. Aliquip umwanya wa saliviya cillum iphone. Seitan aliquip quis cardigan imyambaro yabanyamerika, 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.

Kwagura kugendagenda

Gucomeka kwagura ibice byateganijwe kugirango wongere ahantu hashobora kuboneka.

Ikoreshwa

Gushoboza imbonerahamwe ya tabs ukoresheje JavaScript (buri tab igomba gukenera kugiti cye):

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

Urashobora gukora ama tabs kugiti cye muburyo butandukanye:

$('#myTabs a[href="#profile"]').tab('show') // Select tab by name
$('#myTabs a:first').tab('show') // Select first tab
$('#myTabs a:last').tab('show') // Select last tab
$('#myTabs li:eq(2) a').tab('show') // Select third tab (0-indexed)

Markup

Urashobora gukora tab cyangwa ibinini bigenda utanditse JavaScript iyo ari yo yose ugaragaza gusa data-toggle="tab"cyangwa data-toggle="pill"kubintu. Ongeraho ibyiciro navhamwe nav-tabsnamasomo kuri tab bizashyiraul mubikorwa bya Bootstrap , mugihe wongeyeho ibyiciro bizakoresha ibinini .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>

Ingaruka zashize

Kugirango utume gushira, ongera .fadekuri buri .tab-pane. Urupapuro rwa mbere rwa pane rugomba kandi .ingukora ibintu byambere bigaragara.

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

Uburyo

$().tab

Gukora tab element hamwe nibikoresho birimo. Tab igomba kuba ifite a data-targetcyangwa hrefigamije icyerekezo cya kontineri muri DOM. Mu ngero zavuzwe haruguru, tabs ni <a>s hamwe data-toggle="tab"nibiranga.

.tab('show')

Hitamo tab yatanzwe kandi yerekana ibiyirimo. Iyindi tab yose yatoranijwe mbere iba itatoranijwe kandi ibiyirimo bifitanye isano. Garuka kumuhamagara mbere yuko tab pane yerekanwe mubyukuri (nukuvuga mbere yuko shown.bs.tabibyabaye biba).

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

Ibyabaye

Iyo werekanye tab nshya, ibyabaye birashya muburyo bukurikira:

  1. hide.bs.tab(kuri tab ikora)
  2. show.bs.tab(kuri to-kwerekanwa tab)
  3. hidden.bs.tab(kurupapuro rwibanze rukora, kimwe hide.bs.tabnkicyabaye)
  4. shown.bs.tab(ku gishya-gikora gusa-cyerekanwe tab, kimwe kimwe show.bs.tabnicyabaye)

Niba nta tab yari isanzwe ikora, noneho hide.bs.tabibyabaye hidden.bs.tabntibizasezererwa.

Ubwoko bwibyabaye Ibisobanuro
kwerekana.bs.tab Ibirori birasa kuri tab yerekana, ariko mbere yuko tab nshya yerekanwe. Koresha event.targetno event.relatedTargetgutondekanya tab ikora hamwe na tab yabanjirije gukora (niba ihari).
yerekanwe.bs.tab Ibirori birasa kuri tab yerekanwe nyuma ya tab yerekanwe. Koresha event.targetno event.relatedTargetgutondekanya tab ikora hamwe na tab yabanjirije gukora (niba ihari).
guhisha.bs.tab Ibirori birasa iyo tab nshya igomba kwerekanwa (nuko rero tab ikora ibanza igomba guhishwa). Koresha event.targetno event.relatedTargetkugenera icyerekezo gikora hamwe nigishya vuba-kugirango-gikore, kimwe.
bihishe.bs.tab Ibirori birashya nyuma ya tab nshya yerekanwe (nuko rero tab yabanjirije gukora irahishe). Koresha event.targetno event.relatedTargetguhitamo intego yabanjirije gukora hamwe na tab nshya ikora, uko bikurikirana.
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})

Ibikoresho by'ibikoresho.js

Ahumekewe na jQuery nziza cyane.ipipsy plugin yanditswe na Jason Frame; Ibikoresho ni verisiyo ivuguruye, idashingiye ku mashusho, koresha CSS3 kuri animasiyo, hamwe na data-ibiranga kubika inyito yaho.

Ibikoresho bifite imitwe ya zeru-ndende ntibigaragara.

Ingero

Hisha hejuru yibi bikurikira kugirango urebe ibikoresho:

Ipantaro ifatanye urwego rukurikira keffiyeh birashoboka ko utigeze ubyumva. Ifoto icyumba cyogosha ubwanwa mbisi denim inyuguti ya vegan messenger umufuka stumptown. Umurima-kumeza seitan, mcsweeney's fixie irambye quinoa 8-biti byabanyamerika bafite terry richardson vinyl chambray. Ubwanwa bwatsitaye, abakarigani banh mi lomo inkuba. Tofu biodiesel williamsburg marfa, bane loko mcsweeney yoza vegan chambray. Umunyabukorikori rwose birasekeje icyaricyo cyose keytar , scenester umurima-kumeza banki bankin Austin twitter ikora freegan inguzanyo mbisi denim inkomoko yikawa ya virusi.

Igikoresho gihamye

Amahitamo ane arahari: hejuru, iburyo, hepfo, n'ibumoso.

Ibyerekezo bine

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

Gukora neza

Kubwimpamvu zimikorere, Tooltip na Popover data-apis bahitamo, bivuze ko ugomba kubitangira wenyine .

Uburyo bumwe bwo gutangiza ibikoresho byose kurupapuro byaba ari uguhitamo data-togglekubiranga:

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

Ikoreshwa

Ibikoresho bya plugin bitanga ibikubiyemo nibiranga kubisabwa, kandi kubisanzwe byerekana ibikoresho nyuma yibintu byabo.

Koresha ibikoresho ukoresheje JavaScript:

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

Markup

Ikimenyetso gisabwa kubikoresho ni dataikiranga gusa no titlekuri element ya HTML wifuza kugira igikoresho. Ikimenyetso cyakozwe mubikoresho byoroshye biroroshye, nubwo bisaba umwanya (kubisanzwe, byashyizweho topna plugin).

<!-- HTML to write -->
<a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>

<!-- Generated markup by the plugin -->
<div class="tooltip top" role="tooltip">
  <div class="tooltip-arrow"></div>
  <div class="tooltip-inner">
    Some tooltip text!
  </div>
</div>

Imirongo myinshi

Rimwe na rimwe, ushaka kongeramo igikoresho kuri hyperlink ipfunyika imirongo myinshi. Mburabuzi Imyitwarire ya plugin ni igikoresho cyo hagati itambitse kandi ihagaritse. Ongeraho white-space: nowrap;inanga kugirango wirinde ibi.

Ibikoresho mu matsinda ya buto, amatsinda yinjiza, hamwe nameza bisaba gushiraho bidasanzwe

Mugihe ukoresheje ibikoresho byibikoresho biri muri a .btn-groupcyangwa an , .input-groupcyangwa kubintu bifitanye isano nimbonerahamwe (,,,,, ) , <td>ugomba kwerekana amahitamo ( yanditse hano hepfo) kugirango wirinde ingaruka zitifuzwa (nkibintu bigenda byiyongera kandi / cyangwa gutakaza inguni zayo zegeranye mugihe igikoresho gikoreshwa).<th><tr><thead><tbody><tfoot>container: 'body'

Ntugerageze kwerekana ibikoresho byibikoresho byihishe

Kwiyambaza $(...).tooltip('show')mugihe intego yibintu aribyo display: none;bizatera igikoresho guhagarikwa nabi.

Ibikoresho byoroshye kubikoresho bya clavier hamwe nabafasha gukoresha ikoranabuhanga

Kubakoresha bagendana na clavier, na cyane cyane abakoresha tekinoroji ifasha, ugomba kongeramo gusa ibikoresho byibikoresho byibanda kuri clavier nkibisobanuro, imiterere igenzura, cyangwa ikintu icyo aricyo cyose gifite tabindex="0"ikiranga.

Ibikoresho ku bikoresho byamugaye bisaba ibintu bipfunyika

Kugirango wongere igikoresho kuri a disabledcyangwa .disabledelement, shyira element imbere ya a <div>hanyuma ushyire ibikoresho kuriyo <div>aho.

Amahitamo

Amahitamo arashobora kunyuzwa kumurongo wamakuru cyangwa JavaScript. Kubiranga Ibyatanzwe, Ongeraho Ihitamo Izina Kuri data-, Nka Muri data-animation="".

Izina Andika Mburabuzi Ibisobanuro
animasiyo boolean ni ukuri Koresha CSS igenda ihinduka kubikoresho
kontineri umugozi | ibinyoma ibinyoma

Ongeraho ibikoresho byibikoresho runaka. Urugero : container: 'body'. Ihitamo ni ingirakamaro cyane cyane kuburyo rigufasha gushyira ibikoresho byifashishwa mugutembera kwinyandiko hafi yikintu gikurura - bizarinda igikoresho cyo kureremba kure yikintu gikurura mugihe idirishya rinini.

gutinda umubare | ikintu 0

Gutinda kwerekana no guhisha ibikoresho (ms) - ntibikoreshwa muburyo bwintoki

Niba umubare watanzwe, gutinda gukoreshwa byombi guhisha / kwerekana

Imiterere yibintu ni:delay: { "show": 500, "hide": 100 }

html boolean ibinyoma Shyiramo HTML mubikoresho. Niba ari ibinyoma, uburyo bwa jQuery textbuzakoreshwa mugushyiramo ibintu muri DOM. Koresha inyandiko niba uhangayikishijwe n'ibitero bya XSS.
gushyira umugozi | imikorere 'hejuru'

Nigute ushobora gushyira ibikoresho - hejuru | munsi | ibumoso | iburyo | imodoka.
Iyo "auto" isobanuwe, izahindura icyerekezo cyibikoresho. Kurugero, niba gushyira "auto ibumoso", ibikoresho byerekana ibumoso mugihe bishoboka, bitabaye ibyo bizerekana iburyo.

Iyo imikorere ikoreshwa mukumenya aho ishyirwa, byitwa hamwe na tooltip DOM node nkibisobanuro byayo byambere hamwe na elementing DOM node nkibya kabiri. Imirongo thisyashizwe kumurongo wibikoresho.

uwatoranije umugozi ibinyoma Niba uwatoranije atanzwe, ibikoresho byibikoresho bizahabwa intego zerekanwe. Mubimenyerezo, ibi bikoreshwa mugushoboza HTML yingirakamaro kugirango hongerwemo ibikoresho. Reba ibi nurugero rwamakuru .
Inyandikorugero umugozi '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'

Shingiro HTML yo gukoresha mugihe uremye ibikoresho.

Ibikoresho bya titlebikoresho bizaterwa muri .tooltip-inner.

.tooltip-arrowByahindutse umwambi wibikoresho.

Ikintu cyo gupfunyika hanze kigomba kugira urwego .tooltip.

Umutwe umugozi | imikorere ''

Mburabuzi Umutwe Agaciro niba titleIkiranga kidahari.

Niba imikorere yatanzwe, izahamagarwa hamwe namakuru yayo thisyerekanwe kubintu ibikoresho bifatanye.

imbarutso umugozi 'hover yibanze' Uburyo ibikoresho byifashishwa - kanda | hover | kwibanda | imfashanyigisho. Urashobora gutsinda imbarutso nyinshi; kubatandukanya n'umwanya. manualntishobora guhuzwa nizindi mbarutso.
Reba umugozi | ikintu | imikorere {uwatoranije: 'umubiri', padi: 0}

Gumana ibikoresho byerekana imbibi ziki kintu. Urugero: viewport: '#viewport'cyangwa{ "selector": "#viewport", "padding": 0 }

Niba imikorere yatanzwe, yitwa hamwe na triggering element DOM node nkimpaka zonyine. Imirongo thisyashizwe kumurongo wibikoresho.

Ibiranga amakuru kubikoresho byihariye

Amahitamo kubikoresho bya buri muntu arashobora gutondekwa muburyo bwo gukoresha ibiranga amakuru, nkuko byasobanuwe haruguru.

Uburyo

$().tooltip(options)

Ongeraho ibikoresho byifashishwa mugukusanya ibintu.

.tooltip('show')

Yerekana igikoresho cyibikoresho. Garuka kumuhamagara mbere yuko ibikoresho byerekanwe (ni ukuvuga mbere yuko shown.bs.tooltipibyabaye biba). Ibi bifatwa nk "intoki" itera ibikoresho. Ibikoresho bifite imitwe ya zeru-ndende ntibigaragara.

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

.tooltip('hide')

Hisha igikoresho cyibikoresho. Garuka kumuhamagara mbere yigikoresho cyihishe mubyukuri (nukuvuga mbere yuko hidden.bs.tooltipibyabaye biba). Ibi bifatwa nk "intoki" itera ibikoresho.

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

.tooltip('toggle')

Kuzuza ibikoresho by'ibikoresho. Garuka kumuhamagara mbere yuko ibikoresho byerekanwe cyangwa byihishe (ni ukuvuga mbere yuko ibyabaye shown.bs.tooltipcyangwa hidden.bs.tooltipibyabaye bibaho). Ibi bifatwa nk "intoki" itera ibikoresho.

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

.tooltip('destroy')

Hisha kandi usenye ibikoresho bya element. Ibikoresho bifashisha intumwa (zakozwe hakoreshejwe amahitamoselector ) ntibishobora gusenywa kugiti cyawe kubintu bikomokaho .

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

Ibyabaye

Ubwoko bwibyabaye Ibisobanuro
kwerekana.bs.igikoresho Ibirori birasa ako kanya mugihe showurugero rwitwa.
yerekanwe.bs.igikoresho Ibi birori birukanwa mugihe ibikoresho byakorewe kugaragara kubakoresha (bizategereza ko CSS ihinduka).
guhisha.bs.igikoresho Ibi birori birahita bisohoka mugihe uburyo hidebwurugero bwahamagawe.
bihishe.bs.igikoresho Ibirori birukanwa mugihe ibikoresho byarangije guhishwa kubakoresha (bizategereza ko CSS ihinduka).
Byinjijwe.bs.ibikoresho Ibirori birukanwa nyuma show.bs.tooltipyibyabaye mugihe ibikoresho byifashishijwe byongewe kuri DOM.
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})

Ibyamamare popover.js

Ongeraho uduce duto twibirimo, nkibiri kuri iPad, kubintu byose byo guturamo amakuru yisumbuye.

Popovers imitwe yombi nibirimo byose ni zeru-ndende ntibigaragara.

Amacomeka

Popovers isaba ibikoresho bya plugin kugirango bishyirwe muri verisiyo yawe ya Bootstrap.

Gukora neza

Kubwimpamvu zimikorere, Tooltip na Popover data-apis bahitamo, bivuze ko ugomba kubitangira wenyine .

Uburyo bumwe bwo gutangiza popovers zose kurupapuro kwaba ari uguhitamo data-togglekubiranga:

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

Popovers mumatsinda ya buto, amatsinda yinjiza, hamwe nameza bisaba gushiraho bidasanzwe

Mugihe ukoresheje popovers kubintu biri muri a .btn-groupcyangwa an , .input-groupcyangwa kubintu bifitanye isano nameza (,,,,, ) , <td>ugomba kwerekana amahitamo ( yanditse hepfo) kugirango wirinde ingaruka zitifuzwa (nkibintu bigenda byiyongera kandi / cyangwa gutakaza impande zose zegeranye iyo popover itangiye).<th><tr><thead><tbody><tfoot>container: 'body'

Ntugerageze kwerekana popovers kubintu byihishe

Kwiyambaza $(...).popover('show')mugihe intego yibintu aribyo display: none;bizatera popover guhagarara nabi.

Popovers kubintu byamugaye bisaba ibintu bipfunyika

Kugirango wongere popover kuri a disabledcyangwa .disabledelement, shyira element imbere ya a <div>hanyuma ushyire popover kuriyo <div>aho.

Imirongo myinshi

Rimwe na rimwe, ushaka kongeramo popover kuri hyperlink ipfunyika imirongo myinshi. Imyitwarire isanzwe ya popover plugin nuguhuza hagati itambitse kandi ihagaritse. Ongeraho white-space: nowrap;inanga kugirango wirinde ibi.

Ingero

Imiterere ihagaze

Amahitamo ane arahari: hejuru, iburyo, hepfo, n'ibumoso.

Hejuru

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

Popover iburyo

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

Hasi

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

Popover ibumoso

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

Kubaho

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

Ibyerekezo bine

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

Kwirukana gukanda

Koresha focusimbarutso kugirango wirukane popovers kurikurikiraho umukoresha akora.

Ikimenyetso cyihariye gisabwa kugirango wirukanwe-gukurikira-gukanda

Kuburyo bukwiye bwambukiranya-mbuga hamwe nimyitwarire ya cross-platform, ugomba gukoresha <a>tagi, ntabwo ari <button>tagi, kandi ugomba no gushyiramo role="button"nibiranga tabindex.

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

Ikoreshwa

Gushoboza popovers ukoresheje JavaScript:

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

Amahitamo

Amahitamo arashobora kunyuzwa kumurongo wamakuru cyangwa JavaScript. Kubiranga Ibyatanzwe, Ongeraho Ihitamo Izina Kuri data-, Nka Muri data-animation="".

Izina Andika Mburabuzi Ibisobanuro
animasiyo boolean ni ukuri Koresha CSS igenda ihinduka kuri popover
kontineri umugozi | ibinyoma ibinyoma

Ongeraho popover kubintu runaka. Urugero : container: 'body'. Ihitamo ningirakamaro cyane kuberako igufasha gushyira popover mugutemba kwinyandiko hafi yikintu gikurura - bizarinda popover kureremba kure yikintu gikurura mugihe idirishya rinini.

ibirimo umugozi | imikorere ''

Mburabuzi agaciro agaciro niba data-contentikiranga kidahari.

Niba imikorere yatanzwe, izahamagarwa hamwe thisnibisobanuro byayo kuri element popover ifatanye.

gutinda umubare | ikintu 0

Gutinda kwerekana no guhisha popover (ms) - ntabwo ikoreshwa muburyo bwintoki

Niba umubare watanzwe, gutinda gukoreshwa byombi guhisha / kwerekana

Imiterere yibintu ni:delay: { "show": 500, "hide": 100 }

html boolean ibinyoma Shyiramo HTML muri popover. Niba ari ibinyoma, uburyo bwa jQuery textbuzakoreshwa mugushyiramo ibintu muri DOM. Koresha inyandiko niba uhangayikishijwe n'ibitero bya XSS.
gushyira umugozi | imikorere 'iburyo'

Nigute washyira popover - hejuru | munsi | ibumoso | iburyo | imodoka.
Iyo "auto" isobanuwe, izahindura icyerekezo cya popover. Kurugero, niba gushyira "auto ibumoso", popover izerekana ibumoso mugihe bishoboka, naho ubundi izerekana iburyo.

Iyo imikorere ikoreshwa mukumenya aho ishyirwa, byitwa hamwe na popover DOM node nkibitekerezo byayo byambere hamwe na elementing DOM node nkibya kabiri. Imirongo thisyashyizweho kuri popover urugero.

uwatoranije umugozi ibinyoma Niba hatoranijwe uwatoranijwe, ibintu bya popover bizahabwa intego zagenwe. Mu myitozo, ibi bikoreshwa mugushoboza HTML ifite imbaraga kugirango hongerwe popovers. Reba ibi nurugero rwamakuru .
Inyandikorugero umugozi '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'

Shingiro HTML yo gukoresha mugihe uremye popover.

Amashanyarazititle bizaterwa muri .popover-title.

Amashanyarazicontent bizaterwa muri .popover-content.

.arrowbizahinduka umwambi wa popover.

Ikintu cyo gupfunyika hanze kigomba kugira urwego .popover.

Umutwe umugozi | imikorere ''

Mburabuzi Umutwe Agaciro nibatitleIkiranga kidahari.

Niba imikorere yatanzwe, izahamagarwa hamwe thisnibisobanuro byayo kuri element popover ifatanye.

imbarutso umugozi 'kanda' Uburyo popover iterwa - kanda | hover | kwibanda | imfashanyigisho. Urashobora gutsinda imbarutso nyinshi; kubatandukanya n'umwanya. manualntishobora guhuzwa nizindi mbarutso.
Reba umugozi | ikintu | imikorere {uwatoranije: 'umubiri', padi: 0}

Gumana popover mumipaka yiki kintu. Urugero: viewport: '#viewport'cyangwa{ "selector": "#viewport", "padding": 0 }

Niba imikorere yatanzwe, yitwa hamwe na triggering element DOM node nkimpaka zonyine. Imirongo thisyashyizweho kuri popover urugero.

Ibiranga amakuru kuri popovers kugiti cye

Amahitamo ya popovers kugiti cye arashobora gusobanurwa muburyo bwo gukoresha ibiranga amakuru, nkuko byasobanuwe haruguru.

Uburyo

$().popover(options)

Itangiza popovers yikintu cyo gukusanya.

.popover('show')

Yerekana ikintu cya popover. Garuka kumuhamagara mbere yuko popover yerekanwe (nukuvuga mbere yuko shown.bs.popoveribyabaye biba). Ibi bifatwa nk "intoki" itera popover. Popovers imitwe yombi nibirimo byose ni zeru-ndende ntibigaragara.

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

.popover('hide')

Hisha ikintu cya popover. Garuka kumuhamagaye mbere yuko popover ihishwa mubyukuri (nukuvuga mbere yuko hidden.bs.popoveribyabaye biba). Ibi bifatwa nk "intoki" itera popover.

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

.popover('toggle')

Kuzuza ikintu cya popover. Garuka kumuhamagara mbere yuko popover yerekanwe cyangwa yihishe (nukuvuga mbere yuko ibyabaye shown.bs.popovercyangwa hidden.bs.popoveribyabaye bibaho). Ibi bifatwa nk "intoki" itera popover.

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

.popover('destroy')

Hisha kandi usenye ikintu cya popover. Popovers ikoresha delegasiyo (yashizweho hakoreshejwe amahitamoselector ) ntishobora gusenywa kugiti cye kubintu bikomokaho .

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

Ibyabaye

Ubwoko bwibyabaye Ibisobanuro
kwerekana.bs Ibirori birasa ako kanya mugihe showurugero rwitwa.
yerekanwe.bs Ibirori birukanwa mugihe popover yakozwe igaragara kubakoresha (izategereza ko inzibacyuho ya CSS irangira).
guhisha.bs Ibi birori birahita bisohoka mugihe uburyo hidebwurugero bwahamagawe.
bihishe.bs Ibirori birukanwa mugihe popover yarangije guhishwa uyikoresha (azategereza ko inzibacyuho ya CSS irangira).
Byinjijwe.bs Ibirori birukanwe nyuma show.bs.popoveryibyabaye mugihe icyitegererezo cya popover cyongewe kuri DOM.
$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})

Menyesha ubutumwa bwimenyesha.js

Urugero

Ongeraho imikorere yo kwirukana ubutumwa bwose bwamenyeshejwe hamwe niyi plugin.

Iyo ukoresheje .closebuto, igomba kuba umwana wambere wa .alert-dismissiblekandi ntakintu cyanditse gishobora kuza mbere yacyo muri marike.

Ikoreshwa

Gusa ongeraho data-dismiss="alert"kuri bouton yawe yegeranye kugirango uhite utanga integuza yimikorere. Gufunga integuza bikuraho muri DOM.

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

Kugira ngo imenyesha ryawe ukoreshe animasiyo mugihe ufunze, menya neza ko bafite .fadeamasomo .innamasomo yamaze kubakoreshwa.

Uburyo

$().alert()

Kora integuza yumve gukanda ibyabaye kubintu bikomokaho bifite data-dismiss="alert"ikiranga. (Ntabwo ari ngombwa mugihe ukoresheje data-api yo gutangiza-auto.)

$().alert('close')

Funga integuza uyikuye muri DOM. Niba i .fadehamwe .innamasomo ahari kuri element, integuza izashira mbere yuko ikurwaho.

Ibyabaye

Amacomeka ya Bootstrap yerekana ibintu bike byo guhuza ibikorwa.

Ubwoko bwibyabaye Ibisobanuro
gufunga.bs.alert Ibirori birasa ako kanya mugihe closeurugero rwitwa.
gufunga.bs.alert Ibi birori birukanwa mugihe integuza yafunzwe (izategereza ko CSS ihinduka).
$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})

Akabuto ka buto.js

Kora byinshi hamwe na buto. Kugenzura buto ivuga cyangwa gukora amatsinda ya buto kubindi bikoresho nkibikoresho.

Guhuza-mushakisha

Firefox ikomeza gushiraho uburyo bwo kugenzura (ubumuga no kugenzura) kurupapuro rwuzuye . Imikorere kuriyi ni ugukoresha autocomplete="off". Reba Mozilla bug # 654072 .

Leta

Ongeraho data-loading-text="Loading..."kugirango ukoreshe ibintu biremereye kuri buto.

Iyi mikorere itaye agaciro kuva v3.3.5 kandi yakuweho muri v4.

Koresha leta iyo ari yo yose ukunda!

Kubwiyi myiyerekano, turimo gukoresha data-loading-textkandi $().button('loading'), ariko ntabwo aribwo leta yonyine ushobora gukoresha. Reba byinshi kuriyi hepfo mu $().button(string)nyandiko .

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

Guhindura umwe

Ongeraho data-toggle="button"kugirango utangire guhinduranya kuri buto imwe.

Mbere yo guhinduranya buto ikeneye .activekandiaria-pressed="true"

Kuri pre-toggled buto, ugomba kongeramo .activeurwego aria-pressed="true"nibiranga buttonwenyine.

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

Agasanduku / Radio

Ongeraho data-toggle="buttons"kubisobanuro .btn-groupbirimo agasanduku cyangwa radio yinjiza kugirango ushoboze guhindagurika muburyo bwabo.

Amahitamo yatoranijwe arakenewe.active

Kuburyo bwatoranijwe, ugomba kongeramo .activeurwego mubyinjira labelwenyine.

Igenzura ryagaragaye leta ivugururwa gusa kanda

Niba imiterere yagenzuwe ya buto yo kugenzura ivugururwa nta kurasa clickibyabaye kuri buto (urugero binyuze <input type="reset">cyangwa binyuze mugushiraho checkedumutungo winjiza), uzakenera guhinduranya .activeicyiciro kumurongo winjiye labelwenyine.

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

Uburyo

$().button('toggle')

Toggles gusunika leta. Itanga buto igaragara ko yakoreshejwe.

$().button('reset')

Kugarura buto leta - guhinduranya inyandiko kumyandiko yumwimerere. Ubu buryo ntibusanzwe kandi bugaruka mbere yuko gusubiramo birangira.

$().button(string)

Hindura inyandiko kumakuru ayo ari yo yose asobanuwe inyandiko.

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

Gusenyuka gusenyuka.js

Amacomeka yoroheje akoresha urutonde rwamasomo kugirango byoroshye imyitwarire.

Amacomeka

Gusenyuka bisaba plugin yinzibacyuho gushyirwa muri verisiyo yawe ya Bootstrap.

Urugero

Kanda buto hepfo kugirango werekane kandi uhishe ikindi kintu ukoresheje impinduka zamasomo:

  • .collapseahisha ibirimo
  • .collapsingni Byakoreshejwe Mugihe Cyinzibacyuho
  • .collapse.inyerekana ibirimo

Urashobora gukoresha umurongo hamwe hrefnibiranga, cyangwa buto hamwe data-targetnibiranga. Muri ibyo bihe byombi, data-toggle="collapse"urasabwa.

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>

Urugero

Ongera imyitwarire isanzwe yo gusenyuka kugirango ukore akanya hamwe nibice bigize ibice.

Anim pariatur cliche reprehenderit, enim eiusmod ubuzima bwo hejuru accusamus terry richardson ad squid. 3 impyisi ukwezi officia aute, non cupidatat skateboard dolor brunch. Ikamyo y'ibiryo quinoa nesciunt laborum eiusmod. Brunch 3 impyisi ukwezi kwigihe, sunt aliqua shyiramo inyoni kuri squid inkomoko imwe yikawa nulla assome shoreditch et. Nihil anim keffiyeh helvetica, ubukorikori bwinzoga labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat ubukorikori bwinzoga umurima-kumeza, mbisi denim aesthetic synth nesciunt ushobora kuba utarigeze wumva bavuga accusamus labore irambye VHS.
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.
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 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>

Birashoboka kandi guhinduranya .panel-bodys hamwe na .list-groups.

  • Bootply
  • One itmus ac facilin
  • Second eros

Kora kwaguka / gusenyuka kugenzura kugerwaho

Witondere kongera aria-expandedkubintu bigenzura. Iyi miterere isobanura neza uko ibintu bimeze ubu ibintu byangirika kugirango ugaragaze abasomyi hamwe na tekinoroji ifasha. Niba ikintu gishobora gusenyuka gifunzwe byanze bikunze, kigomba kugira agaciro ka aria-expanded="false". Niba washyizeho ikintu gishobora kugwa kugirango ufungure byanze bikunze ukoresheje urwego in, shirahoaria-expanded="true" kugenzura aho. Gucomeka izahita ihindura iyi miterere ukurikije niba ikintu gishobora kugwa cyarafunguwe cyangwa gifunze.

Byongeye kandi, niba igenzura ryawe rigamije ikintu kimwe gishobora gusenyuka - ni ukuvuga data-targetikiranga cyerekana iduwatoranije - urashobora kongeramo ikindi kintu aria-controlskiranga kugenzura ibintu, birimo idibintu byangirika. Abasomyi ba kijyambere bigezweho hamwe nubuhanga busa bufasha gukoresha iyi miterere kugirango batange abakoresha ama shortcuts yinyongera kugirango bayobore neza kubintu byangirika ubwabyo.

Ikoreshwa

Gusenyuka plugin ikoresha ibyiciro bike kugirango ikemure ibintu biremereye:

  • .collapseahisha ibirimo
  • .collapse.inyerekana ibirimo
  • .collapsingyongeweho iyo inzibacyuho itangiye, ikanakurwaho iyo irangiye

Aya masomo murayasanga muri component-animations.less.

Binyuze mu biranga amakuru

Gusa ongeraho data-toggle="collapse"na a data-targetkubintu kugirango uhite ugenera kugenzura ikintu gishobora kugwa. Ikiranga data-targetcyakira CSS uhitamo kugirango akoreshe gusenyuka kuri. Wemeze kongeramo urwego collapsekubintu bishobora kugwa. Niba wifuza ko byafungura, ongeraho urwego rwinyongera in.

Kugirango wongere imiyoborere isa nitsinda rishinzwe kugenzura kugabanuka, ongeramo amakuru ikiranga data-parent="#selector". Reba kuri demo kugirango ubone ibi mubikorwa.

Binyuze kuri JavaScript

Gushoboza intoki hamwe na:

$('.collapse').collapse()

Amahitamo

Amahitamo arashobora kunyuzwa kumurongo wamakuru cyangwa JavaScript. Kubiranga Ibyatanzwe, Ongeraho Ihitamo Izina Kuri data-, Nka Muri data-parent="".

Izina Ubwoko Mburabuzi ibisobanuro
umubyeyi uwatoranije ibinyoma Niba hatoranijwe uwatoranije, noneho ibintu byose bishobora kugwa munsi yumubyeyi wabigenewe bizafungwa mugihe iki kintu kiguye cyerekanwe. (bisa nimyitwarire gakondo ya bordion - ibi biterwa panelnurwego)
guhinduranya boolean ni ukuri Kuzuza ibintu bishobora kugwa kuri invocation

Uburyo

.collapse(options)

Koresha ibikubiyemo nkibintu bishobora gusenyuka. Emera amahitamo object.

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

.collapse('toggle')

Kuzuza ikintu gishobora kugwa kugirango werekane cyangwa uhishe. Garuka kumuhamagara mbere yuko ikintu gishobora kugwa cyerekanwe cyangwa cyihishe (ni ukuvuga mbere yuko ibyabaye shown.bs.collapsecyangwa hidden.bs.collapseibyabaye bibaho).

.collapse('show')

Erekana ikintu gishobora kugwa. Garuka kumuhamagara mbere yuko ikintu kigwa cyerekanwe mubyukuri (nukuvuga mbere yuko shown.bs.collapseibyabaye bibaho).

.collapse('hide')

Hisha ikintu gishobora kugwa. Garuka kumuhamagara mbere yuko ibintu bigwa byihishe mubyukuri (nukuvuga mbere yuko hidden.bs.collapseibyabaye biba).

Ibyabaye

Bootstrap yo gusenyuka ibyiciro byerekana ibintu bike byo guhuza ibikorwa.

Ubwoko bwibyabaye Ibisobanuro
kwerekana.bs.isenyuka Ibirori birasa ako kanya mugihe showurugero rwitwa.
yerekanwe.bs.isenyuka Ibi birori birukanwa mugihe ikintu cyo gusenyuka cyakozwe kigaragara kubakoresha (bizategereza ko inzibacyuho ya CSS irangira).
guhisha.bs. gusenyuka Iki gikorwa kirahita gihita iyo hideuburyo bwahamagawe.
guhisha.bs.isenyuka Ibirori birukanwa mugihe ikintu cyo gusenyuka cyihishe kumukoresha (uzategereza ko inzibacyuho ya CSS irangira).
$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})

Carousel carousel.js

Igice cya slideshow yo gusiganwa ku magare binyuze mu bintu, nka karuseli. Carousels yatowe ntabwo ishyigikiwe.

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

Ibisobanuro byanditse

Ongeraho ibisobanuro kuri slide yawe byoroshye hamwe .carousel-captionnibintu muri byose .item. Shyira hafi ya HTML iyo ari yo yose itabishaka imbere kandi izahita ihuzwa kandi ihindurwe.

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

Karuseli nyinshi

Carousels isaba gukoresha an idkuri kontineri yo hanze (the .carousel) kugirango karuseli igenzure gukora neza. Mugihe wongeyeho karuseli nyinshi, cyangwa mugihe uhinduye karuseli id, menya neza kugenzura ibyerekeranye.

Binyuze mu biranga amakuru

Koresha ibiranga amakuru kugirango ugenzure byoroshye umwanya wa karuseli. data-slideyemera ijambo ryibanze prevcyangwa next, rihindura umwanya uhagaze ugereranije nubu. Ubundi, koresha data-slide-tokunyuza urutonde rwibanze kuri karuseli data-slide-to="2", ihinduranya umwanya uhagaze kumurongo runaka utangirana na 0.

Ikiranga data-ride="carousel"gikoreshwa mukuranga karuseli nka animasiyo itangirira kurupapuro. Ntishobora gukoreshwa ifatanije na (kurenza kandi bitari ngombwa) JavaScript itangizwa ya karuseli imwe.

Binyuze kuri JavaScript

Hamagara karuseli intoki hamwe na:

$('.carousel').carousel()

Amahitamo arashobora kunyuzwa kumurongo wamakuru cyangwa JavaScript. Kubiranga Ibyatanzwe, Ongeraho Ihitamo Izina Kuri data-, Nka Muri data-interval="".

Izina Ubwoko Mburabuzi ibisobanuro
intera umubare 5000 Ingano yigihe cyo gutinda hagati yizunguruka yikintu. Niba ari ibinyoma, karuseli ntabwo izahita izunguruka.
hagarara umugozi | null "hover" Niba byashyizweho "hover", ihagarika amagare ya karuseli mouseenterhanyuma ikomeza gusiganwa ku magare ya karuseli kuri mouseleave. Niba byashyizweho null, kugendagenda hejuru ya karuseli ntibizahagarara.
gupfunyika boolean ni ukuri Niba karuseli igomba kuzunguruka ubudasiba cyangwa ifite guhagarara gukomeye.
Mwandikisho boolean ni ukuri Niba karuseli igomba kwitwara kubyabaye kuri clavier.

Itangiza karuseli hamwe nuburyo bwo guhitamo objecthanyuma igatangira gusiganwa ku magare binyuze mubintu.

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

Amagare anyuze muri karuseli kuva ibumoso ugana iburyo.

Hagarika karuseli gusiganwa ku magare binyuze mu bintu.

Kuzenguruka karuseli kumurongo runaka (0 ishingiye, isa na array).

Amagare ku kintu kibanziriza iki.

Amagare ku kintu gikurikira.

Bootstrap ya karuseli yerekana ibintu bibiri byo guhuza imikorere ya karuseli.

Ibyabaye byombi bifite imitungo yinyongera ikurikira:

  • direction: Icyerekezo karuseli iranyerera (haba "left"cyangwa "right").
  • relatedTarget: Ikintu cya DOM kirimo kunyerera ahantu nkibintu bikora.

Ibintu byose bya karuseli birasa kuri karuseli ubwayo (ni ukuvuga kuri <div class="carousel">).

Ubwoko bwibyabaye Ibisobanuro
slide.bs.carousel Ibirori birasa ako kanya mugihe slideurugero rwakoreshejwe.
slide.bs.carousel Ibirori birukanwa mugihe karuseli yarangije kunyerera.
$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
})

Umugereka w'umugereka.js

Urugero

Umugereka plugin uhinduranya position: fixed;no kuzimya, wigana ingaruka zabonetse hamwe position: sticky;. Subnavigation iburyo ni demo nzima ya plugin.


Ikoreshwa

Koresha umugereka wa plugin ukoresheje ibiranga data cyangwa intoki hamwe na JavaScript yawe. Muri ibyo bihe byombi, ugomba gutanga CSS kumwanya hamwe nubugari bwibirimo byometseho.

Icyitonderwa: Ntugakoreshe umugereka wongeyeho kubintu bikubiye mubintu bisa nkaho bihagaze, nkibikururwa cyangwa byasunitswe, kubera Safari yerekana amakosa .

Umwanya ukoresheje CSS

Umugereka plugin uhinduranya hagati yamasomo atatu, buriwese uhagarariye leta runaka : .affix, .affix-topna .affix-bottom. Ugomba gutanga imisusire, usibye position: fixed;kuri .affix, kuri aya masomo wenyine (utitaye kuriyi plugin) kugirango ukore imyanya ifatika.

Dore uko plugin ya affix ikora:

  1. Gutangira, plugin yongeyeho.affix-top kugirango yerekane ikintu kiri murwego rwo hejuru-rwinshi. Kuri ubu nta mwanya wa CSS usabwa.
  2. Kuzenguruka ushize ikintu ushaka gushyirwaho bigomba gukurura nyirizina. Aha niho .affixhasimburwa .affix-topno gushiraho position: fixed;(bitangwa na CSS ya Bootstrap).
  3. Niba igice cyo hasi cyasobanuwe, kuzenguruka byashize bigomba gusimburwa .affixna .affix-bottom. Kubera ko offsets itabishaka, gushiraho imwe igusaba gushyiraho CSS ikwiye. Muri iki kibazo, ongeraho position: absolute;igihe bibaye ngombwa. Gucomeka ikoresha amakuru yikiranga cyangwa JavaScript ihitamo kugirango umenye aho washyira element kuva aho.

Kurikiza intambwe yavuzwe haruguru kugirango ushireho CSS yawe muburyo bumwe bwo gukoresha hepfo.

Binyuze mu biranga amakuru

Kugirango byoroshye kongeramo imyitwarire ya affix kubintu byose, ongera gusa data-spy="affix"kubintu ushaka kuneka. Koresha offsets kugirango usobanure igihe cyo guhinduranya pinning yikintu.

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

Binyuze kuri JavaScript

Hamagara plugin ya affix ukoresheje JavaScript:

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

Amahitamo

Amahitamo arashobora kunyuzwa kumurongo wamakuru cyangwa JavaScript. Kubiranga Ibyatanzwe, Ongeraho Ihitamo Izina Kuri data-, Nka Muri data-offset-top="200".

Izina Ubwoko Mburabuzi ibisobanuro
offset umubare | imikorere | ikintu 10 Pixels kugirango uve kuri ecran mugihe ubara umwanya wumuzingo. Niba umubare umwe watanzwe, offset izashyirwa mubikorwa byombi hejuru no hepfo. Gutanga umwihariko, hepfo na hejuru ya offset gusa utange ikintu offset: { top: 10 }cyangwa offset: { top: 10, bottom: 5 }. Koresha imikorere mugihe ukeneye kubara byimazeyo offset.
intego uwatoranije | node | Ikintu windowikintu _ Kugaragaza intego yibintu byumugereka.

Uburyo

.affix(options)

Koresha ibikubiyemo nkibirimo. Emera amahitamo object.

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

.affix('checkPosition')

Ongera usubiremo imiterere yumugereka ukurikije ibipimo, umwanya, hamwe nu muzingo wibintu bijyanye. ,,, .affixNibyiciro byongeweho .affix-topcyangwa .affix-bottombivanwe mubirimo byashyizweho ukurikije leta nshya. Ubu buryo bugomba guhamagarwa igihe cyose ibipimo byibirimo byongeweho cyangwa intego yibintu byahinduwe, kugirango hamenyekane neza neza ibirimo byashyizweho.

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

Ibyabaye

Amacomeka ya Bootstrap yerekana ibintu bike byo guhuza ibikorwa bya affix.

Ubwoko bwibyabaye Ibisobanuro
umugereka.bs.umugereka Ibirori birasa ako kanya mbere yuko ikintu gishyirwaho.
byashyizweho.bs.umugereka Ibirori birukanwa nyuma yikintu kimaze gushyirwaho.
umugereka-hejuru.bs.umugereka Ibi birori birasa ako kanya mbere yuko ikintu gishyirwaho-hejuru.
yashyizwe hejuru-hejuru.bs.umugereka Ibirori birukanwa nyuma yikintu kimaze gushyirwaho-hejuru.
umugereka-munsi.bs.umugereka Ibi birori birasa ako kanya mbere yuko ikintu gishyirwaho-hepfo.
byashyizweho-hepfo.bs.umugereka Ibirori birukanwa nyuma yikintu kimaze gushyirwaho-hepfo.