Dubawa

Mutum ko harhada

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

Amfani da JavaScript da aka haɗa

Duka bootstrap.jskuma bootstrap.min.jssun ƙunshi duk plugins a cikin fayil ɗaya. Haɗa guda ɗaya kawai.

Abubuwan dogaro da plugin

Wasu plugins da abubuwan CSS sun dogara da wasu plugins. Idan kun haɗa plugins daban-daban, tabbatar da bincika waɗannan abubuwan dogaro a cikin takaddun. Har ila yau lura cewa duk plugins sun dogara da jQuery (wannan yana nufin jQuery dole ne a haɗa shi kafin fayilolin plugin). Tuntuɓi mubower.json don ganin waɗanne nau'ikan jQuery ne ake tallafawa.

Bayanan bayanai

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

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

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

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

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

Plugin guda ɗaya kawai akan kowane kashi ta hanyar halayen bayanai

Kada a yi amfani da sifofin bayanai daga plugins da yawa akan wannan kashi. Misali, maɓalli ba zai iya samun tip ɗin kayan aiki ba kuma ya juya modal. Don yin wannan, yi amfani da abin rufewa.

API ɗin shirye-shirye

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

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

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

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

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

Saitunan tsoho

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

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

Babu rikici

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

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

Abubuwan da suka faru

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

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

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

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

Lambobin sigar

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

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

Babu faɗuwa ta musamman lokacin da aka kashe JavaScript

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

Dakunan karatu na ɓangare na uku

Bootstrap baya goyan bayan dakunan karatu na ɓangare na uku a hukumance kamar Prototype ko jQuery UI. Duk .noConflictda abubuwan da aka raba suna, ana iya samun matsalolin daidaitawa waɗanda kuke buƙatar gyara da kanku.

Canje -canje.js

Game da sauyi

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

Me ke ciki

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

Kashe canjin canji

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

$.support.transition = false

Modal.js _

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

Ba a goyan bayan buɗaɗɗen modal masu yawa

Tabbatar cewa kar a buɗe modal yayin da wani ke bayyane. Nuna modal fiye da ɗaya a lokaci guda yana buƙatar lambar al'ada.

Matsakaicin alamar tsari

Koyaushe gwada sanya lambar HTML na modal a cikin babban matsayi a cikin takaddun ku don guje wa wasu abubuwan da ke shafar bayyanar modal da/ko aikin.

Alamun na'urar hannu

Akwai wasu fa'idodi game da amfani da modal akan na'urorin hannu. Duba takaddun tallafin burauzan mu don cikakkun bayanai.

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

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

Misalai

Misali a tsaye

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

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

Live demo

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

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

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

Samar da hanyoyin samun dama

Tabbatar ƙara role="dialog"da aria-labelledby="...", yin magana da taken modal, zuwa .modal, da role="document"kanta .modal-dialog.

Bugu da ƙari, kuna iya ba da bayanin yanayin maganganun ku tare da aria-describedbykan .modal.

Shigar da bidiyon YouTube

Shigar da bidiyon YouTube a cikin ƙirar yana buƙatar ƙarin JavaScript ba a cikin Bootstrap don dakatar da sake kunnawa ta atomatik da ƙari ba. Dubi wannan taimako mai taimako Stack Overflow post don ƙarin bayani.

Girman zaɓi

Modals suna da girma dabam na zaɓi biyu, ana samun su ta azuzuwan gyara don sanya su akan .modal-dialog.

<!-- Large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

<!-- Small modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button>

<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
  <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

Cire rayarwa

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

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

Amfani da tsarin grid

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

<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="gridSystemModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-md-4">.col-md-4</div>
          <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
        </div>
        <div class="row">
          <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
          <div class="col-md-2 col-md-offset-4">.col-md-2 .col-md-offset-4</div>
        </div>
        <div class="row">
          <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
        </div>
        <div class="row">
          <div class="col-sm-9">
            Level 1: .col-sm-9
            <div class="row">
              <div class="col-xs-8 col-sm-6">
                Level 2: .col-xs-8 .col-sm-6
              </div>
              <div class="col-xs-4 col-sm-6">
                Level 2: .col-xs-4 .col-sm-6
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

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

... ƙarin maɓalli...
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button>
...more buttons...

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="exampleModalLabel">New message</h4>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="recipient-name" class="control-label">Recipient:</label>
            <input type="text" class="form-control" id="recipient-name">
          </div>
          <div class="form-group">
            <label for="message-text" class="control-label">Message:</label>
            <textarea class="form-control" id="message-text"></textarea>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Send message</button>
      </div>
    </div>
  </div>
</div>
$('#exampleModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget) // Button that triggered the modal
  var recipient = button.data('whatever') // Extract info from data-* attributes
  // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
  // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
  var modal = $(this)
  modal.find('.modal-title').text('New message to ' + recipient)
  modal.find('.modal-body input').val(recipient)
})

Amfani

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

Ta hanyar bayanan halayen

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

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

Ta hanyar JavaScript

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

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

Zabuka

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

Suna nau'in tsoho bayanin
baya boolean ko kirtani'static' gaskiya Ya ƙunshi nau'in modal-backdrop. A madadin, saka staticdon bayanan baya wanda baya rufe tsarin a dannawa.
keyboard boolean gaskiya Yana rufe tsarin lokacin da aka danna maɓallin guduwa
nuna boolean gaskiya Yana nuna tsarin lokacin farawa.
m hanya karya

An soke wannan zaɓi tun v3.3.0 kuma an cire shi a v4. Muna ba da shawarar maimakon yin amfani da samfuri-gefen abokin ciniki ko tsarin daurin bayanai, ko kiran jQuery.load da kanku.

Idan an samar da URL mai nisa, za a loda abun ciki sau ɗaya ta hanyar jQuery loadkuma a yi allurar cikin .modal-contentdiv. Idan kuna amfani da data-api, zaku iya amfani da hrefsifa don tantance tushen nesa. Ana nuna misalin wannan a ƙasa:

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

Hanyoyin

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

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

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

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

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

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

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

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

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

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

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

Abubuwan da suka faru

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

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

Nau'in Taron Bayani
nuna.bs.modal Wannan taron yana gobara nan da nan lokacin da showaka kira hanyar misali. Idan dannawa ya haifar, ana samun ɓangaren da aka latsa azaman relatedTargetmallakin taron.
nuna.bs.modal Ana korar wannan taron lokacin da aka bayyana yanayin ga mai amfani (zai jira canjin CSS ya kammala). Idan dannawa ya haifar, ana samun ɓangaren da aka latsa azaman relatedTargetmallakin taron.
boye.bs.modal Ana korar wannan taron nan da nan lokacin da hideaka kira hanyar misali.
boye.bs.modal Ana korar wannan taron lokacin da tsarin ya gama ɓoyewa daga mai amfani (zai jira canjin CSS ya kammala).
ɗora Kwatancen.bs.modal Ana korar wannan taron lokacin da tsarin ya loda abun ciki ta amfani da remotezaɓi.
$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

Zazzagewar saukarwa.js

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

A cikin navbar

A cikin kwayoyin

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

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

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

Ta hanyar bayanan halayen

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

<div class="dropdown">
  <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

Don kiyaye URLs tare da maɓallan mahaɗi, yi amfani da data-targetsifa maimakon href="#".

<div class="dropdown">
  <a id="dLabel" data-target="#" href="http://example.com/" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
    <span class="caret"></span>
  </a>

  <ul class="dropdown-menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

Ta hanyar JavaScript

Kira zazzagewar ta hanyar JavaScript:

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

data-toggle="dropdown"har yanzu ake bukata

Ko da kun kira zazzagewar ku ta JavaScript ko kuma a maimakon haka amfani da data-api, data-toggle="dropdown"ana buƙatar koyaushe don kasancewa akan abubuwan faɗakarwa.

Babu

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

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

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

Nau'in Taron Bayani
nuna.bs. saukarwa Wannan taron yana gobara nan da nan lokacin da aka kira hanyar misalin nuni.
an nuna.bs. saukarwa Ana korar wannan taron lokacin da aka bayyana zazzagewa ga mai amfani (zai jira canjin CSS, don kammala).
boye.bs. saukarwa Ana korar wannan taron nan da nan lokacin da aka kira hanyar misalin ɓoye.
boye.bs. saukarwa Ana kora wannan taron lokacin da jerin abubuwan da aka gama ɓoye daga mai amfani (zai jira canjin CSS, don kammala).
$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})

ScrollSpy scrollspy.js

Misali a cikin navbar

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

@mai

Ad leggings keytar, brunch id art party dolor labour. Pitchfork yr enim lo-fi kafin su sayar da qui. Tumblr gona-zuwa tebur haƙƙin keke komai. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby suwaita lomo Jean shorts, williamsburg hoodie minim qui mai yiwuwa ba ku ji labarin su ba da cardigan Trust fund culpa biodiesel wes anderson aesthetical. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

@mdo

Veniam marfa gashin baki skateboard, adipisicing fugiat velit pitchfork gemu. Freegan gemu aliqua cupidatat mcsweeney's vero. Cupidatat guda huɗu loko nisi, da helvetica nulla carles. Tattooed cosby sweater truck abinci, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles ba kayan motsa jiki ba yana buƙatar kulawa. Brooklyn adipisicing craft giya mataimakin keytar desrunt.

daya

Occaecat commodo aliqua delectus. Fap craft giya deserunt skateboard ea. Haƙƙin keke na Lomo adipisicing banh mi, velit ea sunt next level locavore kofi na asali guda a magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS yana da matukar damuwa. Consectetur nisi DIY minim jakar jaka. Cred ex in, dorewa delectus consectetur fanny fakitin iphone.

biyu

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 jakar marfa duk abin da motar abinci ta delectus. Sapiente synth id zatonnda. Locavore sed helvetica cliche irony, tsawa mai yiwuwa ba ku ji labarin su ba sakamakon hoodie gluten-free lo-fi fap aliquip. Labour elit placeat kafin su sayar da su, Terry Richardson proident brunch nesciunt quis cosby suweter pariatur keffiyeh ut helvetica artisan. Cardigan craft giya seitan readymade velit. VHS chambray labs na dan lokaci veniam. Anim mollit minim commodo ullamco thundercats.

Amfani

Yana buƙatar Bootstrap nav

Scrollspy a halin yanzu yana buƙatar amfani da bangaren Bootstrap nav don haskaka hanyoyin haɗin kai daidai.

Ana buƙatar makasudin ID mai warwarewa

Dole ne hanyoyin haɗin Navbar su kasance da maƙasudin id masu warwarewa. Misali, <a href="#home">home</a>dole ne ya dace da wani abu a cikin DOM kamar <div id="home"></div>.

Abubuwan :visibleda ba manufa ba sun yi watsi da su

Abubuwan da ba su :visibledace da jQuery ba za a yi watsi da su kuma ba za a taɓa haskaka abubuwan da suka dace ba.

Yana buƙatar matsayi na dangi

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

Ta hanyar bayanan halayen

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

body {
  position: relative;
}
<body data-spy="scroll" data-target="#navbar-example">
  ...
  <div id="navbar-example">
    <ul class="nav nav-tabs" role="tablist">
      ...
    </ul>
  </div>
  ...
</body>

Ta hanyar JavaScript

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

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

Hanyoyin

.scrollspy('refresh')

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

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

Zabuka

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

Suna nau'in tsoho bayanin
biya diyya lamba 10 Pixels don kashewa daga sama yayin ƙididdige matsayi na gungurawa.

Abubuwan da suka faru

Nau'in Taron Bayani
kunna.bs.scrollspy Wannan taron yana ƙonewa a duk lokacin da sabon abu ya kunna ta hanyar gungurawa.
$('#myScrollspy').on('activate.bs.scrollspy', function () {
  // do something…
})

Shafukan da za a iya juyawa.js

Misali shafuka

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

Raw denim tabbas ba ku ji labarin su jeans shorts Austin ba. Nesciunt tofu stumptown aliqua, retro synth master cleanse. gashin baki cliche tempor, williamsburg carles vegan helvetica. Reprehenderit mahauci retro keffiyeh dreamcatcher synth. Cosby suwaita eu banh mi, qui irure terry richardson ex squid. Yadda ake yin salvia cillum iphone. Seitan aliquip quis cardigan Amurka tufafi, mahauta 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.

Yana ƙara kewayawa tabbed

Wannan plugin ɗin yana faɗaɗa ɓangaren kewayawa da aka buga don ƙara wuraren da za a iya ɗaurewa.

Amfani

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

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

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

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

Alamar alama

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

<div>

  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home">...</div>
    <div role="tabpanel" class="tab-pane" id="profile">...</div>
    <div role="tabpanel" class="tab-pane" id="messages">...</div>
    <div role="tabpanel" class="tab-pane" id="settings">...</div>
  </div>

</div>

Fade sakamako

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

<div class="tab-content">
  <div role="tabpanel" class="tab-pane fade in active" id="home">...</div>
  <div role="tabpanel" class="tab-pane fade" id="profile">...</div>
  <div role="tabpanel" class="tab-pane fade" id="messages">...</div>
  <div role="tabpanel" class="tab-pane fade" id="settings">...</div>
</div>

Hanyoyin

$().tab

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

.tab('show')

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

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

Abubuwan da suka faru

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

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

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

Nau'in Taron Bayani
nuna.bs.tab Wannan taron yana gobara akan nunin shafin, amma kafin a nuna sabon shafin. Yi amfani event.targetda event.relatedTargetniyya shafi mai aiki da shafin da ya gabata (idan akwai) bi da bi.
nuna.bs.tab Wannan taron yana gobara akan nunin shafin bayan an nuna shafin. Yi amfani event.targetda event.relatedTargetniyya shafi mai aiki da shafin da ya gabata (idan akwai) bi da bi.
boye.bs.tab Wannan taron yana ƙone lokacin da za a nuna sabon shafin (don haka za a ɓoye shafin da ya gabata). Yi amfani event.targetda event.relatedTargetniyya shafi mai aiki na yanzu da sabon shafin da za a yi aiki nan ba da jimawa ba, bi da bi.
boye.bs.tab Wannan taron yana gobara bayan an nuna sabon shafin (saboda haka shafin da ya gabata yana ɓoye). Yi amfani event.targetda event.relatedTargetniyya shafi na baya mai aiki da sabon shafin mai aiki, bi da bi.
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})

Tukwici kayan aiki Tooltip.js

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

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

Misalai

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

Tattara wando next level keffiyeh kila ba ki ji labarin su ba. Hoton hoton gemu raw denim wasiƙar vegan messenger jakar stumptown. Farm-to-tebur seitan, mcsweeney's fixie mai dorewa quinoa 8-bit tufafin Amurka suna da terry Richardson vinyl chambray. Gemu stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, hudu loko mcsweeney's tsabtace vegan chambray. A really ironic artisan whatever keytar , scenester farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin kofi viral.

Tushen kayan aiki a tsaye

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

Hanyoyi hudu

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>

Ayyukan ficewa

Don dalilan aiki, Tooltip da Popover data-apis suna shiga, ma'ana dole ne ka fara su da kanka .

Hanya ɗaya don fara duk shawarwarin kayan aiki akan shafi shine zaɓi su ta yanayin su data-toggle:

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

Amfani

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

Ƙaddamar da kayan aiki ta hanyar JavaScript:

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

Alamar alama

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

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

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

Hanyoyin haɗin layi da yawa

Wani lokaci kana so ka ƙara kayan aiki zuwa hyperlink wanda ke kunshe da layukan da yawa. Dalili na tsohowar kayan aikin kayan aiki shine a tsakiya shi a kwance da a tsaye. Ƙara white-space: nowrap;zuwa anka don guje wa wannan.

Bayanan kayan aiki a cikin ƙungiyoyin maɓalli, ƙungiyoyin shigarwa, da teburi suna buƙatar saiti na musamman

Lokacin amfani da tukwici akan abubuwan da ke cikin wani .btn-groupko .input-group, ko akan abubuwan da ke da alaƙa da tebur ( <td>, <th>, <tr>, , , , , , , , <thead>, <tbody>, <tfoot>) dole ne ku ƙayyade zaɓi container: 'body'(wanda aka rubuta a ƙasa) don guje wa illolin da ba'a so (kamar kashi na girma da girma da/ ko rasa sasanninta masu zagaye lokacin da aka kunna tip ɗin kayan aiki).

Kar a yi ƙoƙarin nuna bayanan kayan aiki akan abubuwan ɓoye

Kira $(...).tooltip('show')lokacin da abin da ake nufi ya kasance display: none;zai sa a sanya tip ɗin kayan aiki daidai ba daidai ba.

Nasihun kayan aiki masu isa ga madannai da masu amfani da fasaha masu taimako

Don masu amfani da ke kewayawa da madannai, musamman masu amfani da fasahar taimako, yakamata ku ƙara nasihu na kayan aiki zuwa abubuwan da za a iya mayar da hankali kan madannai kamar hanyoyin haɗin kai, sarrafa tsari, ko duk wani abu na sabani tare da tabindex="0"sifa.

Bayanan kayan aiki akan abubuwan da aka kashe suna buƙatar abubuwan nannade

Don ƙara tip ɗin kayan aiki zuwa wani abu disabledko .disabledkashi, sanya kashi a cikin wani <div>kuma yi amfani da tip ɗin a <div>maimakon haka.

Zabuka

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

Suna Nau'in Tsohuwar Bayani
tashin hankali boolean gaskiya Aiwatar da canjin CSS fade zuwa tip ɗin kayan aiki
ganga zaren | karya karya

Yana haɗa tip ɗin kayan aiki zuwa takamaiman yanki. Misali container: 'body':. Wannan zaɓin yana da amfani musamman don yana ba ku damar sanya kayan aiki a cikin kwararar daftarin aiki kusa da abin da ke haifarwa - wanda zai hana kayan aikin daga shawagi daga abin da ke kunnawa yayin girman taga.

jinkiri lamba | abu 0

Jinkirin nunawa da ɓoye bayanan kayan aiki (ms) - baya aiki ga nau'in fararwa na hannu

Idan an ba da lamba, ana amfani da jinkiri ga duka ɓoye/nunawa

Tsarin abu shine:delay: { "show": 500, "hide": 100 }

html boolean karya Saka HTML cikin kayan aiki. Idan ƙarya, textza a yi amfani da hanyar jQuery don saka abun ciki a cikin DOM. Yi amfani da rubutu idan kun damu da harin XSS.
jeri zaren | aiki ' saman'

Yadda ake sanya kayan aiki - saman | kasa | hagu | dama | mota.
Lokacin da aka ayyana "atomatik", zai sake jujjuya matakin kayan aiki. Misali, idan jeri “hagu ne ta atomatik”, tip ɗin kayan aiki zai nuna zuwa hagu lokacin da zai yiwu, in ba haka ba zai nuna dama.

Lokacin da aka yi amfani da aiki don ƙayyade wuri, ana kiran shi tare da kayan aiki na DOM node a matsayin hujja ta farko da maɓallin DOM mai jawowa a matsayin na biyu. An thissaita mahallin zuwa misalin kayan aiki.

mai zaɓe kirtani karya Idan an samar da mai zaɓe, za a ba da abubuwan da suka shafi kayan aiki zuwa takamaiman maƙasudai. A aikace, ana amfani da wannan don ba da damar abun ciki na HTML mai ƙarfi don ƙara ƙarin bayanan kayan aiki. Dubi wannan da misali mai ba da labari .
samfuri kirtani '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'

Tushen HTML don amfani yayin ƙirƙirar tukwici.

Za a yi allurar kayan aiki titlea cikin .tooltip-inner.

.tooltip-arrowzai zama kibiyar tip ɗin kayan aiki.

Abun nadi na waje yakamata ya kasance yana da .tooltipaji.

take zaren | aiki ''

Tsohuwar ƙimar take idan babu titlesifa.

Idan an ba da aiki, za a kira shi tare da thissaita saitin abin da aka makala kayan aikin.

jawo kirtani 'Hover focus' Yadda ake kunna tip ɗin kayan aiki - danna | shawa | mayar da hankali | manual. Kuna iya wuce abubuwan jan hankali da yawa; raba su da sarari. manualba za a iya haɗa shi da wani abin tayar da hankali ba.
kallon kallo zaren | abu | aiki {mai zaɓe: 'jiki', padding: 0}

Yana kiyaye tip ɗin kayan aiki a cikin iyakokin wannan kashi. Misali: viewport: '#viewport'ko{ "selector": "#viewport", "padding": 0 }

Idan an ba da aiki, ana kiran shi tare da kumburin DOM mai jawo a matsayin hujja kawai. An thissaita mahallin zuwa misalin kayan aiki.

Halayen bayanai don ƙa'idodin kayan aiki guda ɗaya

Zaɓuɓɓuka don ƙayyadaddun bayanan kayan aiki ɗaya na iya zama a madadin ta hanyar amfani da sifofin bayanai, kamar yadda aka bayyana a sama.

Hanyoyin

$().tooltip(options)

Haɗa mai sarrafa kayan aiki zuwa tarin abubuwa.

.tooltip('show')

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

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

.tooltip('hide')

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

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

.tooltip('toggle')

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

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

.tooltip('destroy')

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

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

Abubuwan da suka faru

Nau'in Taron Bayani
nuna.bs.tooltip Wannan taron yana gobara nan da nan lokacin da showaka kira hanyar misali.
nuna.bs.tooltip Ana korar wannan taron ne lokacin da aka bayyana kayan aikin ga mai amfani (zai jira canjin CSS ya kammala).
boye.bs.tooltip Ana korar wannan taron nan da nan lokacin da hideaka kira hanyar misali.
boye.bs.tooltip Ana kora wannan taron lokacin da kayan aikin ya gama ɓoye daga mai amfani (zai jira canjin CSS ya kammala).
shigar.bs.tooltip An kori wannan taron bayan show.bs.tooltiptaron lokacin da aka ƙara samfurin kayan aiki zuwa DOM.
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})

Popovers popover.js

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

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

Dogaro da plugin

Popovers suna buƙatar kayan aikin tukwici don haɗa su cikin sigar Bootstrap ɗin ku.

Ayyukan ficewa

Don dalilan aiki, Tooltip da Popover data-apis suna shiga, ma'ana dole ne ka fara su da kanka .

Hanya ɗaya don fara duk popovers akan shafi shine zaɓi su ta hanyar data-togglehalayensu:

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

Popovers a cikin ƙungiyoyin maɓalli, ƙungiyoyin shigarwa, da teburi suna buƙatar saiti na musamman

Lokacin amfani da popovers akan abubuwan da ke cikin wani .btn-groupko .input-group, ko akan abubuwan da ke da alaƙa ( <td>, <th>, <tr>, , , , <thead>, <tbody>, <tfoot>), dole ne ku ƙayyade zaɓi container: 'body'(wanda aka rubuta a ƙasa) don guje wa illolin da ba'a so (kamar ɓangaren da ke girma da fadi da/ ko rasa sasanninta masu zagaye lokacin da aka kunna popover).

Kar a yi ƙoƙarin nuna popovers akan abubuwan ɓoye

Kira $(...).popover('show')lokacin da abin da ake nufi ya kasance display: none;zai sa popover ya zama kuskuren matsayi.

Popovers akan abubuwan da ba su da nakasa suna buƙatar abubuwan nannade

Don ƙara popover zuwa wani abu disabledko .disabledelement, sanya kashi a cikin wani <div>kuma yi amfani da popover a <div>maimakon haka.

Hanyoyin haɗin layi da yawa

Wani lokaci kana so ka ƙara popover zuwa hyperlink wanda ke kunshe da layi daya. Dalili na tsohowar plugin ɗin popover shine a tsakiya shi a kwance da a tsaye. Ƙara white-space: nowrap;zuwa anka don guje wa wannan.

Misalai

A tsaye popover

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

Popover saman

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

Popover dama

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

Popover kasa

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

Popover hagu

Sed posuere consectetur est a 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>

Hanyoyi hudu

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on left
</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on top
</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on bottom
</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on right
</button>

Kore a danna gaba

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

Takamaiman alamar da ake buƙata don korar-kan-na gaba-danna

Don ingantaccen mai binciken giciye da kuma halayyar dandamali, dole ne ku yi amfani da <a>alamar, ba alamar ba <button>, kuma dole ne ku haɗa role="button"da tabindexsifofi.

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>

Amfani

Kunna popovers ta JavaScript:

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

Zabuka

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

Suna Nau'in Tsohuwar Bayani
tashin hankali boolean gaskiya Aiwatar da canjin Fade CSS zuwa popover
ganga zaren | karya karya

Haɗa popover zuwa takamaiman yanki. Misali container: 'body':. Wannan zaɓin yana da amfani musamman domin yana ba ku damar sanya popover a cikin kwararar daftarin aiki kusa da abin da ke haifarwa - wanda zai hana popover daga shawagi daga abin da ke kunnawa yayin girman taga.

abun ciki zaren | aiki ''

Ƙimar abun ciki na asali idandata-content sifa ba ta nan.

Idan an ba da aiki, za a kira shi tare da thissaita saitin abin da aka makala popover da shi.

jinkiri lamba | abu 0

Jinkirin nunawa da ɓoye popover (ms) - baya shafi nau'in fararwa na hannu

Idan an ba da lamba, ana amfani da jinkiri ga duka ɓoye/nunawa

Tsarin abu shine:delay: { "show": 500, "hide": 100 }

html boolean karya Saka HTML a cikin popover. Idan ƙarya, textza a yi amfani da hanyar jQuery don saka abun ciki a cikin DOM. Yi amfani da rubutu idan kun damu da harin XSS.
jeri zaren | aiki 'dama'

Yadda ake sanya popover - top | kasa | hagu | dama | mota.
Lokacin da aka ayyana "atomatik", zai sake jujjuya yanayin popover. Misali, idan jeri "hagu ne ta atomatik", popover zai nuna zuwa hagu lokacin da zai yiwu, in ba haka ba zai nuna dama.

Lokacin da aka yi amfani da aiki don ƙayyade wurin, ana kiran shi tare da kumburin DOM popover a matsayin hujjarsa ta farko da maɓallin DOM mai jawowa a matsayin na biyu. An thissaita mahallin zuwa misalin popover.

mai zaɓe kirtani karya Idan an samar da mai zaɓe, za a ba da abubuwan da za a yi amfani da su zuwa takamaiman maƙasudan. A aikace, ana amfani da wannan don ba da damar abun ciki na HTML mai ƙarfi don ƙara fa'ida. Dubi wannan da misali mai ba da labari .
samfuri kirtani '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'

Tushen HTML don amfani yayin ƙirƙirar popover.

Za a yi allurar popover titlea cikin .popover-title.

Za a yi allurar popover contenta cikin .popover-content.

.arrowzai zama kibiya popover.

Abun nadi na waje yakamata ya kasance yana da .popoveraji.

take zaren | aiki ''

Tsohuwar ƙimar take idan babu titlesifa.

Idan an ba da aiki, za a kira shi tare da thissaita saitin abin da aka makala popover da shi.

jawo kirtani 'danna' Yadda ake kunna popover - danna | shawa | mayar da hankali | manual. Kuna iya wuce abubuwan jan hankali da yawa; raba su da sarari. manualba za a iya haɗa shi da wani abin tayar da hankali ba.
kallon kallo zaren | abu | aiki {mai zaɓe: 'jiki', padding: 0}

Yana kiyaye popover a cikin iyakokin wannan kashi. Misali: viewport: '#viewport'ko{ "selector": "#viewport", "padding": 0 }

Idan an ba da aiki, ana kiran shi tare da kumburin DOM mai jawo a matsayin hujja kawai. An thissaita mahallin zuwa misalin popover.

Halayen bayanai don faɗuwar mutum ɗaya

Zaɓuɓɓuka don faɗuwar faɗuwar mutum ɗaya ana iya a madadin su ta hanyar amfani da sifofin bayanai, kamar yadda aka bayyana a sama.

Hanyoyin

$().popover(options)

Yana farawa popovers don tarin abubuwa.

.popover('show')

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

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

.popover('hide')

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

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

.popover('toggle')

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

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

.popover('destroy')

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

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

Abubuwan da suka faru

Nau'in Taron Bayani
nuna.bs.popover Wannan taron yana gobara nan da nan lokacin da showaka kira hanyar misali.
nuna.bs.popover Ana korar wannan taron lokacin da aka bayyana popover ga mai amfani (zai jira canjin CSS ya kammala).
boye.bs.popover Ana korar wannan taron nan da nan lokacin da hideaka kira hanyar misali.
boye.bs.popover Ana kora wannan taron lokacin da popover ya gama ɓoyewa daga mai amfani (zai jira canjin CSS ya kammala).
shigar.bs.popover An kori wannan taron bayan show.bs.popovertaron lokacin da aka ƙara samfurin popover zuwa DOM.
$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})

faɗakarwar saƙonnin faɗakarwa.js

Misali faɗakarwa

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

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

Amfani

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

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

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

Hanyoyin

$().alert()

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

$().alert('close')

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

Abubuwan da suka faru

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

Nau'in Taron Bayani
kusa.bs.jijjiga Wannan taron yana gobara nan da nan lokacin da closeaka kira hanyar misali.
rufaffiyar.bs.jijjiga Ana kora wannan taron lokacin da aka rufe faɗakarwa (zai jira canjin CSS don kammala).
$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})

Buttons maɓalli.js

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

Jiha

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

Wannan fasalin an soke shi tun v3.3.5 kuma an cire shi a cikin v4.

Yi amfani da kowace jiha da kuke so!

Saboda wannan zanga-zangar, muna amfani data-loading-textda $().button('loading'), amma wannan ba shine kaɗai jihar da zaku iya amfani da ita ba. Dubi ƙarin akan wannan a ƙasa a cikin $().button(string)takaddun .

<button type="button" id="myButton" data-loading-text="Loading..." class="btn btn-primary" autocomplete="off">
  Loading state
</button>

<script>
  $('#myButton').on('click', function () {
    var $btn = $(this).button('loading')
    // business logic...
    $btn.button('reset')
  })
</script>

Juyawa guda ɗaya

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

Maɓallan da aka riga aka kunna suna buƙatar.active kumaaria-pressed="true"

Don maɓallan da aka riga aka kunna, dole ne ku ƙara .activeajin da aria-pressed="true"sifa ga buttonkanku.

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

Duba akwatin / Rediyo

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

Zaɓuɓɓukan da aka riga aka zaɓa suna buƙatar.active

Don zaɓin da aka riga aka zaɓa, dole ne ka ƙara .activeajin zuwa abubuwan shigar da labelkanka.

Yanayin duba gani kawai an sabunta shi akan dannawa

Idan an sabunta maballin akwati da aka duba ba tare da harba wani clickabu akan maballin ba (misali ta hanyar <input type="reset">ko ta hanyar saita checkedkayan abin shigarwa), kuna buƙatar kunna .activeajin akan shigar da labelkanku.

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="checkbox" autocomplete="off" checked> Checkbox 1 (pre-checked)
  </label>
  <label class="btn btn-primary">
    <input type="checkbox" autocomplete="off"> Checkbox 2
  </label>
  <label class="btn btn-primary">
    <input type="checkbox" autocomplete="off"> Checkbox 3
  </label>
</div>
<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (preselected)
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option2" autocomplete="off"> Radio 2
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option3" autocomplete="off"> Radio 3
  </label>
</div>

Hanyoyin

$().button('toggle')

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

$().button('reset')

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

$().button(string)

Yana canza rubutu zuwa kowane yanayin rubutu da aka ayyana.

<button type="button" id="myStateButton" data-complete-text="finished!" class="btn btn-primary" autocomplete="off">
  ...
</button>

<script>
  $('#myStateButton').on('click', function () {
    $(this).button('complete') // button text will be "finished!"
  })
</script>

Rushewar rugujewa.js

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

Dogaro da plugin

Rushewa yana buƙatar shigar da plugin ɗin sauyawa a cikin sigar Bootstrap ɗin ku.

Misali

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

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

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

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>

Misalin Accordion

Ƙarfafa halayen rugujewar tsoho don ƙirƙirar haɗin gwiwa tare da bangaren panel.

Anim pariatur cliche reprehenderit, babban rayuwa wanda ake zargi Terry Richardson da squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Motar abinci quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua ya sa tsuntsu a kai squid guda- asali kofi nulla zaton shoreditch et. Nihil anim keffiyeh helvetica, craft Beer Labore wes anderson cred nesciunt sapiente ea proident. Ad vegan banda mahauta mataimakin lomo. Leggings occaecat sana'ar giya gona-zuwa tebur, danyen denim aesthetic synth nesciunt mai yiwuwa ba ka ji labarin su accusamus labore VHS mai dorewa.
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>

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

  • Bootply
  • One itmus ac facilin
  • Second eros

Samar da faɗaɗawa / rugujewar sarrafawa mai samun dama

Tabbatar ƙara aria-expandedzuwa sashin sarrafawa. Wannan sifa tana fayyace ƙayyadaddun yanayin halin yanzu na ɓangaren da zai iya rugujewa zuwa ga masu karanta allo da makamantan fasahar taimako. Idan an rufe kashi mai rugujewa ta tsohuwa, yakamata ya sami darajar aria-expanded="false". Idan kun saita abin da zai iya rushewa don buɗewa ta tsohuwa ta amfani da inajin, saita aria-expanded="true"kan sarrafawa maimakon. Plugin zai juya wannan sifa ta atomatik bisa ko an buɗe ko rufe ɓangaren da zai iya rushewa ko a'a.

Bugu da ƙari, idan ɓangaren sarrafa ku yana yin niyya ga wani abu guda ɗaya mai ruɗewa - watau data-targetsifa tana nuni ga mai idzaɓi - kuna iya ƙara ƙarin aria-controlssifa zuwa sashin sarrafawa, wanda ya ƙunshi ɓangaren idda zai iya rushewa. Masu karanta allo na zamani da makamantan fasahar taimako suna amfani da wannan sifa don samarwa masu amfani ƙarin gajerun hanyoyi don kewaya kai tsaye zuwa ɓangaren da zai iya rugujewa kansa.

Amfani

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

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

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

Ta hanyar bayanan halayen

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

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

Ta hanyar JavaScript

Kunna da hannu tare da:

$('.collapse').collapse()

Zabuka

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

Suna nau'in tsoho bayanin
iyaye mai zaɓe karya Idan an ba da zaɓi, to duk abubuwan da za su iya haɗuwa a ƙarƙashin ƙayyadaddun iyaye za a rufe su lokacin da aka nuna wannan abu mai yuwuwa. (mai kama da dabi'ar haɗin kai na gargajiya - wannan ya dogara da panelaji)
juya boolean gaskiya Yana kunna abin da zai iya rushewa akan kira

Hanyoyin

.collapse(options)

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

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

.collapse('toggle')

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

.collapse('show')

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

.collapse('hide')

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

Abubuwan da suka faru

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

Nau'in Taron Bayani
nuna.bs.rushewa Wannan taron yana gobara nan da nan lokacin da showaka kira hanyar misali.
an nuna.bs.rushewa Ana korar wannan taron lokacin da aka bayyana ɓangaren rugujewa ga mai amfani (zai jira canjin CSS ya kammala).
boye.bs.rushe Ana korar wannan taron nan da nan lokacin da hideaka kira hanyar.
boye.bs.rushewa Ana korar wannan taron lokacin da aka ɓoye ɓoyayyiyar ɓarna daga mai amfani (zai jira canjin CSS ya kammala).
$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})

Carousel carousel.js

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

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    <div class="item">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    ...
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Bayanin zaɓi

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

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

Yawancin carousels

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

Ta hanyar bayanan halayen

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

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

Ta hanyar JavaScript

Kira carousel da hannu tare da:

$('.carousel').carousel()

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

Suna nau'in tsoho bayanin
tazara lamba 5000 Adadin lokacin jinkirta tsakanin yin keke ta atomatik abu. Idan karya, carousel ba zai sake zagayawa ta atomatik ba.
dakatarwa zaren | banza "tsayawa" Idan an saita zuwa "hover", dakatar da hawan keke na carousel a kunne mouseenterkuma ya dawo da keken carousel akan mouseleave. Idan an saita zuwa null, shawagi akan carousel ba zai dakata da shi ba.
kunsa boolean gaskiya Ko carousel ya kamata a ci gaba da zagayawa ko kuma yana da tasha.
keyboard boolean gaskiya Ko carousel ya kamata ya mayar da martani ga abubuwan da suka faru na madannai.

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

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

Zagayawa ta abubuwan carousel daga hagu zuwa dama.

Yana dakatar da carousel daga yin keke ta cikin abubuwa.

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

Kewaya zuwa abu na baya.

Kewaya zuwa abu na gaba.

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

Duk abubuwan biyu suna da ƙarin kaddarorin masu zuwa:

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

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

Nau'in Taron Bayani
slide.bs.carousel Wannan taron yana gobara nan da nan lokacin da slideaka kira hanyar misali.
slid.bs.carousel Ana korar wannan taron lokacin da carousel ya gama sauye-sauyen zamewar sa.
$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
})

Affix.js _

Misali

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


Amfani

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

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

Matsayi ta hanyar CSS

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

Ga yadda affix plugin ke aiki:

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

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

Ta hanyar bayanan halayen

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

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

Ta hanyar JavaScript

Kira plugin ɗin affix ta JavaScript:

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

Zabuka

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

Suna nau'in tsoho bayanin
biya diyya lamba | aiki | abu 10 Pixels don kashewa daga allo lokacin ƙididdige matsayi na gungurawa. Idan an ba da lamba ɗaya, za a yi amfani da kashewa a cikin kwatance sama da ƙasa. Don samar da na musamman, ƙasa da sama na biya kawai samar da wani abu offset: { top: 10 }ko offset: { top: 10, bottom: 5 }. Yi amfani da aiki lokacin da kake buƙatar ƙididdige ƙididdigewa.
manufa mai zabar | kumburi | jQuery element windowabin _ Yana ƙayyadadden abin da ake nufi na affix.

Hanyoyin

.affix(options)

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

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

.affix('checkPosition')

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

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

Abubuwan da suka faru

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

Nau'in Taron Bayani
affix.bs.affix Wannan taron yana ci gaba nan da nan kafin a saka sinadarin.
anfafi.bs.affix Ana korar wannan taron bayan an saka sinadarin.
affix-top.bs.affix Wannan taron yana gobara nan da nan kafin a saka kashi a saman.
maɗaukaki-saman.bs.affix An kori wannan taron bayan an saka kashi-sama.
affix-kasa.bs.affix Wannan taron yana ci gaba nan da nan kafin a saka kashi-kasa.
manne-kasa.bs.affix Ana korar wannan taron bayan an maƙala kashi-ƙasa.