Kakaretšo

Motho ka o tee ka o tee goba e kgobokeditšwego

Di-plugin di ka akaretšwa ka botee (go diriša *.jsdifaele tša Bootstrap ka botee), goba ka moka ka nako e tee (go diriša bootstrap.jsgoba go fokotšwa bootstrap.min.js).

Go diriša JavaScript yeo e kgobokeditšwego

Bobedi bootstrap.jsle bootstrap.min.jsdi na le di-plugin tsohle ka faele e le 'ngoe. Akaretša e tee feela.

Ditshepetšo tša go ithekga ka Plugin

Di-plugin tše dingwe le dikarolo tša CSS di ithekgile ka di-plugin tše dingwe. Ge o akaretša di-plugin ka botee, kgonthiša gore o hlahloba dilo tše tšeo di ithekgilego ka tšona ka go di-doc. Gape ela hloko gore di-plugin ka moka di ithekgile ka jQuery (se se ra gore jQuery e swanetše go akaretšwa pele ga difaele tša di-plugin). Bona ya renabower.json go bona gore ke diphetolelo dife tša jQuery tšeo di thekgwago.

Dika tša datha

O ka šomiša di-plugin ka moka tša Bootstrap ka go hlweka ka API ya go swaya ntle le go ngwala mola o tee wa JavaScript. Ye ke API ya maemo a pele ya Bootstrap gomme e swanetše go ba taba ya gago ya mathomo ge o diriša plugin.

Seo se boletšwe, maemong a mangwe go ka ba mo go kganyogegago go tima mošomo wo. Ka fao, re fana gape ka bokgoni bja go šitiša API ya seka sa datha ka go tloša ditiragalo ka moka godimo ga tokumente yeo e beilwego sekgoba sa maina ka data-api. Se se lebelega ka tsela ye:

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

Ka go fapana le moo, go nepiša plugin ye e itšego, akaretša fela leina la plugin bjalo ka sekgoba sa maina gotee le sekgoba sa maina sa data-api ka tsela ye:

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

Plugin e tee fela ka elemente ka dika tša datha

O se ke wa šomiša dika tša datha go tšwa go di-plugin tše dintši go elemente e tee. Go fa mohlala, konope e ka se be le bobedi keletšo ya sedirišwa le go fetoša modal. Go phethagatša se, diriša elemente ya go phuthela.

API ya lenaneo

Re dumela gape gore o swanetše go kgona go diriša di-plugin ka moka tša Bootstrap feela ka JavaScript API. Di-API ka moka tša setšhaba ke mekgwa e tee, yeo e ka tsenywago diketane, gomme e bušetša kgoboketšo yeo e dirilwego ka yona.

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

Mekgwa ka moka e swanetše go amogela selo sa dikgetho tša boikhethelo, thapo yeo e nepišago mokgwa wo o itšego, goba go se be le selo (yeo e thomago polaka ka boitshwaro bja go se fetoge):

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

Plugin ye nngwe le ye nngwe gape e pepentšha moagi wa yona wo tala godimo ga Constructorthepa: $.fn.popover.Constructor. Ge o rata go hwetša mohlala wo o itšego wa plugin, o e bušetše thwii go tšwa go elemente: $('[rel="popover"]').data('popover').

Dipeakanyo tša go se fetoge

O ka fetola dipeakanyo tša go se fetoge tša plugin ka go fetoša Constructor.DEFAULTSselo sa plugin:

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

Ga go na thulano

Ka dinako tše dingwe go a nyakega go diriša di-plugin tša Bootstrap le ditlhako tše dingwe tša UI. Maemong a, dithulano tša sekgoba sa maina di ka direga ka dinako tše dingwe. Ge se se direga, o ka bitša .noConflictplugin yeo o nyakago go bušetša boleng bja yona.

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

Ditiragalo

Bootstrap e fana ka ditiragalo tša tlwaelo bakeng sa bontši bja ditiro tše di kgethegilego tša di-plugin. Ka kakaretšo, tše di tla ka mokgwa wa go se fele le wa lediri la nakong ye e fetilego - moo lediri la go se fele (ex. show) le hlohleletšwago mathomong a tiragalo, gomme sebopego sa lona sa lediri la nakong ye e fetilego (ex. shown) se hlohleletšwa ge tiro e phethilwe.

Go tloga go 3.0.0, ditiragalo ka moka tša Bootstrap di arotšwe ka sekgoba sa maina.

Ditiragalo ka moka tša go se fele di fa preventDefaultmošomo. Se se fa bokgoni bja go emiša phethagatšo ya tiro pele e thoma.

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

Dinomoro tša phetolelo

Phetolelo ya e nngwe le e nngwe ya di-plugin tša jQuery tša Bootstrap e ka fihlelelwa ka VERSIONthepa ya moagi wa plugin. Ka mohlala, bakeng sa plugin ya tooltip:

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

Ga go na di-fallback tše di kgethegilego ge JavaScript e šitišitšwe

Di-plugin tša Bootstrap ga di we morago ka mo go kgethegilego ka mogau ge JavaScript e šitišitšwe. Ge e le gore o na le taba le maitemogelo a modiriši tabeng ye, šomiša <noscript>go hlaloša seemo (le ka moo o ka kgontšhago JavaScript gape) go badiriši ba gago, le/goba go oketša di-fallback tša gago tša tlwaelo.

Makgobapuku a batho ba boraro

Bootstrap ga e thekge semmušo dilaeborari tša JavaScript tša mokgatlo wa boraro go swana le Prototype goba jQuery UI. Go sa šetšwe .noConflictle ditiragalo tša sekgoba sa maina, go ka ba le mathata a go sepelelana ao o swanetšego go a lokiša ka bowena.

Diphetogo phetogo.js

Mabapi le diphetogo

Bakeng sa diphetho tše bonolo tša phetogo, akaretša transition.jsgatee go bapa le difaele tše dingwe tša JS. If you’re using the compiled (or minified) bootstrap.js, ga go nyakege gore o akaretše se—se šetše se le gona.

Seo se lego ka gare

Transition.js ke mothuši wa motheo wa transitionEndditiragalo gammogo le emulator ya phetogo ya CSS. E šomišwa ke di-plugin tše dingwe go lekola thekgo ya phetogo ya CSS le go swara diphetogo tše di fegilwego.

Go šitiša diphetogo

Diphetogo di ka šitišwa lefaseng ka bophara ka go šomiša seripa se se latelago sa JavaScript, seo se swanetšego go tla ka morago ga ge transition.js(goba bootstrap.jsgoba bootstrap.min.js, go ya ka maemo) e laeditšwe:

$.support.transition = false

Di -modal tša modal.js

Di-modal di nolofaditšwe, eupša di feto-fetoga, di kgopela poledišano ka bonnyane bjo bo nyakegago bja mošomo le dilo tše di sa fetogego tše bohlale.

Di-modal tše dintši tše di bulegilego ga di thekgwe

Kgonthiša gore ga o bule modal mola e nngwe e sa bonagala. Go bontšha modal ya go feta e tee ka nako go nyaka khoutu ya tlwaelo.

Go bewa ga go swaya ga Modal

Ka mehla leka go bea khoutu ya HTML ya modal maemong a godimo ka go tokumente ya gago go efoga dikarolo tše dingwe tšeo di amago ponagalo ya modal le/goba mošomo.

Ditemošo tša sedirišwa sa sellathekeng

Go na le ditemošo tše dingwe mabapi le go diriša di-modal go didirišwa tša sellathekeng. Bona ditokomane tša rena tša thekgo ya sephephediši bakeng sa dintlha.

Ka lebaka la ka moo HTML5 e hlalošago semantiki ya yona, autofocusseka sa HTML ga se na mafelelo ka go dimodal tša Bootstrap. Go fihlelela mafelelo a swanago, diriša JavaScript e itšego ya tlwaelo:

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

Mehlala

Mohlala wa static

Modal ye e tšweleditšwego ka hlogo, mmele, le sete ya ditiro ka go letlakala la ka fase.

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

Demo e phelang

Toggle a modal ka JavaScript ka ho tobetsa konopo e ka tlase. E tla thelela fase gomme ya fifala ka gare go tšwa godimo ga letlakala.

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

Dira gore di-modal di fihlelelege

Kgonthiša gore o tlaleletša role="dialog"le aria-labelledby="...", o šupa sehlogo sa modal, go .modal, le role="document"go yona .modal-dialogka boyona.

Go tlaleletša, o ka fa tlhalošo ya poledišano ya gago ya modal ka aria-describedbygo .modal.

Go tsenya dibidio tša YouTube

Go tsenya dibidio tša YouTube ka gare ga modals go nyaka JavaScript ya tlaleletšo e sego ka go Bootstrap go emiša ka go iketla go bapala le tše dingwe. Bona poso ye e thušago ya Stack Overflow bakeng sa tshedimošo e oketšegilego.

Bogolo bja boikgethelo

Di-modal di na le bogolo bjo bobedi bja boikhethelo, bjo bo hwetšagalago ka dihlopha tša sefetoši tšeo di tlago go bewa godimo ga .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>

Tlosa ditshwantsho tse di phelang

Bakeng sa di-modal tšeo di fo tšwelelago go e na le go fifala ka gare go lebelela, tloša .fadesehlopha go tšwa go leswao la gago la modal.

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

Go diriša tshepedišo ya keriti

Go diriša mohola wa tshepedišo ya keriti ya Bootstrap ka gare ga modal, e no bea .rows ka gare ga .modal-bodygomme ka morago o šomiše diklase tša tshepedišo ya keriti ye e tlwaelegilego.

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

Na o na le sehlopha sa dikonope tšeo ka moka di hlohleletšago modal e swanago, feela ka dikagare tše di fapanego ganyenyane? Šomiša event.relatedTargetle dika tša HTMLdata-* (mohlomongwe ka jQuery ) go fapantšha dikagare tša modal go ya ka gore ke konope efe yeo e kgottšwego. Bona ditokomane tša Ditiragalo tša Modal go hwetša dintlha ka botlalo ka ga relatedTarget, .

...dikonope tše dingwe...
<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)
})

Tšhomišo

Plugin ya modal e fetoša diteng tša gago tše di utilwego ge di nyakega, ka dika tša datha goba JavaScript. E tlaleletša gape .modal-opengo <body>go tloša boitshwaro bja go kgokološa bja go se fetoge gomme e tšweletša a .modal-backdropgo fa lefelo la go klika bakeng sa go lahla di-modal tše di bontšhitšwego ge o kgotla ka ntle ga modal.

Ka dika ya data

Dira gore modal e šome ntle le go ngwala JavaScript. Beakanya data-toggle="modal"godimo ga elemente ya molaodi, go swana le konope, gotee le data-target="#foo"goba href="#foo"go nepiša modal ye e itšego go fetola.

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

Ka JavaScript

Bitsa modal ka id myModalka mola o le mong oa JavaScript:

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

Dikgetho

Dikgetho di ka fetišwa ka dika tša datha goba JavaScript. Bakeng sa dika tša datha, tlaleletša leina la kgetho go data-, bjalo ka go data-backdrop="".

Leina mohuta hlokomologa tlhalošo
lemorago la ka morago boolean goba thapo'static' nnete E akaretša elemente ya modal-backdrop. Ka go fapana le moo, laetša staticbakeng sa backdrop yeo e sa tswalelego modal ka go klika.
khiiboto ya boolean ya go swana nnete E tswalela modal ge senotlelo sa go tšhaba se tobetšwe
bontšha boolean ya go swana nnete E bontšha modal ge e thongwa.
kgole tsela maaka

Kgetho ye e tlošitšwe go tloga ka v3.3.0 gomme e tlošitšwe go v4. Re kgothaletša go e na le moo go diriša thempleite ya lehlakoreng la moreki goba tlhako ya go tlama ya data, goba go bitša jQuery.load ka bowena.

Ge e ba URL ya kgole e filwe, diteng di tla imelwa nako e tee ka mokgwa wa jQuery loadgomme tša hlabja ka gare ga .modal-contentdiv. Ge e ba o diriša data-api, o ka diriša hrefseka ka tsela e nngwe go laetša mothopo wa kgole. Mohlala wa se o bontšhitšwe ka mo tlase:

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

Mekgwa ya go šoma

E dira gore diteng tša gago di šome bjalo ka modal. E amogela dikgetho tša boikhethelo object.

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

Ka seatla e fetola modal. E boela go mogala pele ga ge modal e tloga e bontšhitšwe goba e utilwe (ke gore pele ga ge tiragalo ya shown.bs.modalgoba hidden.bs.modale direga).

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

Ka letsoho bula e modal. E boela go mogala pele ga ge modal e bontšhitšwe e le ka kgonthe (ke gore pele ga ge shown.bs.modaltiragalo e direga).

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

Ka seatla e pata modal. E boela go mogala pele ga ge modal e tloga e utilwe (ke gore pele ga ge hidden.bs.modaltiragalo e direga).

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

E beakanya gape boemo bja modal go lwantšha bara ya go sepelasepela ge go ka direga gore e tee e tšwelele, yeo e bego e tla dira gore modal e tlolele ka go le letshadi.

E nyakega fela ge bophagamo bja modal bo fetoga ge e bulegile.

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

Ditiragalo

Bootstrap o modal sehlopha pepesa liketsahalo tse seng kae bakeng sa hooking ka modal tshebetso.

Ditiragalo ka moka tša modal di thuntšhwa go modal ka boyona (ke gore go <div class="modal">).

Mohuta wa Tiragalo Tlhalošo
bontša.bs.modal Tiragalo ye e thunya ka pela ge showmokgwa wa mohlala o bitšwa. Ge e bakwa ke go klika, elemente ye e klikilwego e hwetšagala bjalo ka relatedTargetthepa ya tiragalo.
e bontšhitšwe.bs.modal Tiragalo ye e thuntšhwa ge modal e dirilwe gore e bonagale go modiriši (e tla emela gore diphetogo tša CSS di phethe). Ge e bakwa ke go klika, elemente ye e klikilwego e hwetšagala bjalo ka relatedTargetthepa ya tiragalo.
pata.bs.modal Tiragalo ye e thuntšhwa ka pela ge hidemokgwa wa mohlala o biditšwe.
e utilwego.bs.modal Tiragalo ye e thuntšhwa ge modal e feditše go utollwa go tšwa go modiriši (e tla emela gore diphetogo tša CSS di phethe).
e imelwa.bs.modal Tiragalo ye e thuntšhwa ge modal e laetše diteng ka go šomiša remotekgetho.
$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

Di- dropdown tša go theoga.js

Oketša dimenu tša go theoga go mo e nyakilego go ba selo le ge e le sefe ka plugin ye e bonolo, go akaretša le navbar, dithepo le dipilisi.

Ka gare ga navbar

Ka gare ga dipilisi

Ka dika tša datha goba JavaScript, polaka ya go theoga e fetoša diteng tše di utilwego (dimenu tša go theoga) ka go fetoša .opensehlopha go aetheme ya lenaneo la motswadi.

Go didirišwa tša sellathekeng, go bula go theoga go tlaleletša ka .dropdown-backdropbjalo ka lefelo la go kgotla bakeng sa go tswalela dimenu tša go theoga ge o kgotla ka ntle ga thepo, e lego tlhokego ya thekgo e swanetšego ya iOS. Se se ra gore go fetola go tšwa go thepo ya go theoga ye e bulegilego go ya go thepo ya go theoga ye e fapanego go nyaka go kgotla mo go oketšegilego go sellathekeng.

Ela hloko: Sebopego data-toggle="dropdown"se ithekgile ka go tswalela dimenu tša go theoga maemong a tirišo, ka fao ke kgopolo ye botse go se šomiša ka mehla.

Ka dika ya data

Oketša data-toggle="dropdown"go kgokagano goba konope go fetoša go theoga.

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

Go boloka di-URL di sa senyege ka dikonope tša kgokagano, diriša data-targetseka go e na le 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>

Ka JavaScript

Bitša di-drolodown ka JavaScript:

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

data-toggle="dropdown"e sa dutše e nyakega

Go sa šetšwe gore o bitša dropdown ya gago ka JavaScript goba go e na le moo o diriša data-api, data-toggle="dropdown"go nyakega ka mehla go ba gona go elemente ya go hlohleletša ya dropdown.

Ga go selo

E fetola thepo ya go theoga ya navbar ye e filwego goba go sepelasepela ga dithepo.

Ditiragalo ka moka tša go theoga di thuntšhwa go .dropdown-menuelemente ya motswadi ya 's.

Ditiragalo ka moka tša go theoga di na le relatedTargetthepa, yeo boleng bja yona e lego elemente ya ankora ya go fetoša.

Mohuta wa Tiragalo Tlhalošo
bontšha.bs.go theoga Tiragalo ye e thunya ka pela ge mokgwa wa mohlala wa pontšho o bitšwa.
e bontšhitšwe.bs.dropdown Tiragalo ye e thuntšhwa ge go theoga go dirilwe gore go bonagale go modiriši (e tla emela diphetogo tša CSS, go phetha).
pata.bs.go theoga Tiragalo ye e thuntšhwa ka pela ge mokgwa wa go uta mohlala o biditšwe.
e utilwego.bs.dropdown Tiragalo ye e thuntšhwa ge go theoga go feditše go utollwa go tšwa go modiriši (e tla emela diphetogo tša CSS, go phetha).
$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})

ScrollSpy scrollspy.js ya go sepelasepela

Mohlala ka navbar

The ScrollSpy plugin ke bakeng sa ka tsela e iketsang ntjhafatsa nav diphetho thehiloeng scroll boemo. Scroll lefelo ka fase ga navbar gomme o lebelele phetogo ya sehlopha se se šomago. Diaetheme tša ka fasana tša go theoga di tla hlaolwa gape.

@lekhura

Ad leggings keytar, brunch id bonono mokga dolor labore. Pitchfork yr enim lo-fi pele ba rekisa qui. Tumblr polasa-ho-tafoleng baesekele ditokelo eng kapa eng. Anim keffiyeh carles cardigan ya go swana le yona. Velit seitan mcsweeney o foto lephephe 3 phiri ngwedi irure. Cosby jesi lomo jean shorts, williamsburg hoodie minim qui mohlomong ha ua utloa ka bona et cardigan letlole la tšepo culpa biodiesel wes anderson botsebi. Nihil tattooed accusamus, cred kgegeo biodiesel keffiyeh mosebetsi oa matsoho ullamco consequat.

@mdo

Veniam marfa ditedu skateboard, adipisicing fugiat velit ditedu tša foroko ya pitchfork. Freegan ditedu aliqua cupidatat vero ya mcsweeney. Cupidatat ba bane loko nisi, ea helvetica nulla carles. Tattooed cosby jesi lijo teraka, mcsweeney o quis bao e seng freegan vinyl. Lo-fi wes anderson +1 seaparo sa go robala. Carles bao e seng botsebi boitšhidullo quis gentrify. Brooklyn adipisicing mesebetsi ea matsoho biri motlatsi keytar deserunt.

tee

Occaecat commodo ya go swana le ya go swana le ya delectus. Fap mesebetsi ea matsoho biri deserunt skateboard ea. Lomo baesekele ditokelo adipisicing banh mi, velit ea sunt boemo bo latelang locavore e le 'ngoe-tšimoloho kofi ka magna veniam. Bophelo bo phahameng id vinyl, echo phakeng consequat quis aliquip banh mi foroko ea pitchfork. Vero VHS est go godiša. Consectetur nisi DIY bonyane mokotla wa moromiwa. Cred ex ka, tšoarellang delectus consectetur fanny pakete iphone.

pedi

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 mokotla wa moromiwa marfa eng kapa eng delectus lijo teraka. Sapiente synth id assumenda. Locavore sed helvetica cliche kgegeo, thundercats mohlomong ha ua utloa ka bona consequat hoodie gluten-free lo-fi fap aliquip. Labore elit placeat pele ba rekisa, terry richardson proident brunch nesciunt quis cosby jesi pariatur keffiyeh ut helvetica mosebetsi oa matsoho. Cardigan mesebetsi ea matsoho biri seitan readymade velit. VHS chambray laboris veniam ya nakwana. Anim mollit minima commodo ullamco dikatse tsa diaduma.

Tšhomišo

E hloka Bootstrap nav

Scrollspy ga bjale e nyaka tšhomišo ya karolo ya nav ya Bootstrap bakeng sa go hlaola gabotse dikgokagano tše di šomago.

Diphetho tša ID tšeo di ka rarollwago di a nyakega

Dikgokagano tša Navbar di swanetše go ba le diphetho tša id tšeo di ka rarollwago. Go fa mohlala, a e <a href="#home">home</a>swanetše go sepelelana le selo se sengwe ka go DOM go swana le <div id="home"></div>.

Dielemente tšeo e sego tša :visiblenepišo di hlokomologwa

Dielemente tša nepišo tšeo di sego :visiblego ya ka jQuery di tla hlokomologwa gomme dilo tša tšona tša nav tše di swanetšego di ka se tsoge di hlaotšwe.

E nyaka go bewa maemong a go lekana

Go sa kgathalege mokgwa wa phethagatšo, scrollspy e nyaka tšhomišo ya position: relative;godimo ga elemente yeo o e hlolago. Mabakeng a mantši se ke <body>. Ge o scrollspying ka dielemente tše dingwe ntle le <body>, kgonthišetša gore o na le heightsete le go overflow-y: scroll;dirišwa.

Ka dika ya data

Go oketša gabonolo boitshwaro bja scrollspy go go sepelasepela ga gago ga topbar, oketša data-spy="scroll"go elemente yeo o nyakago go e hlola (ka tlwaelo kudu se e be e tla ba <body>). Ke moka o tlaleletše data-targetseka ka ID goba sehlopha sa elemente ya motswadi ya karolo efe goba efe ya Bootstrap .nav.

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

Ka JavaScript

Ka morago ga go tlaleletša position: relative;ka go CSS ya gago, bitša scrollspy ka JavaScript:

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

Mekgwa ya go šoma

.scrollspy('refresh')

Ge o diriša scrollspy ka kopanelo le go tlaleletša goba go tloša dielemente go tšwa go DOM, o tla swanelwa ke go bitša mokgwa wa go hlabolla go swana le bjalo:

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

Dikgetho

Dikgetho di ka fetišwa ka dika tša datha goba JavaScript. Bakeng sa dika tša datha, tlaleletša leina la kgetho go data-, bjalo ka go data-offset="".

Leina mohuta hlokomologa tlhalošo
offset nomoro 10. Dipiksele go offset go tšwa godimo ge o bala boemo bja go phurolla.

Ditiragalo

Mohuta wa Tiragalo Tlhalošo
tsenya tirišong.bs.scrollspy Tiragalo ye e a tuka neng le neng ge selo se sefsa se thoma go šoma ke scrollspy.
$('#myScrollspy').on('activate.bs.scrollspy', function () {
  // do something…
})

Dithepo tše di fetošwago tab.js

Dithepo tša mohlala

Oketša mošomo wa thepo ya ka pela, ye e fetogago go phetogo ka diphanephe tša diteng tša selegae, gaešita le ka dimenu tša go theoga. Dithepo tše di tsentšwego ka gare ga diphapoši ga di thekgwe.

Raw denim mohlomongwe ga se wa kwa ka bona jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth mong'a hloekisa. Ditedu cliche nakwana, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh mohlapetši wa ditoro synth. Cosby jesi eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone.. Ke nyaka go nyoba nnywana ya mosadi. Seitan aliquip quis cardigan liaparo tsa american, 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.

E atološa go sepelasepela ka dithepo

Plugin ye e katološa karolo ya go sepelasepela ya dithepo go oketša mafelo a dithepo.

Tšhomišo

Kgontšha dithepo tša dithepo ka JavaScript (thepo ye nngwe le ye nngwe e swanetše go tsenywa tirišong ka botee):

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

O ka tsenya tirišong dithepo ka botee ka ditsela tše mmalwa:

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

Go swaya

O ka tsenya tirišong go sepelasepela ga thepo goba pilisi ntle le go ngwala JavaScript efe goba efe ka go fo laetša data-toggle="tab"goba data-toggle="pill"godimo ga elemente. Go oketša diklase tša navle nav-tabsgo thepo go tla diriša setaele sa thepo yaul Bootstrap , mola go oketša diklase tša le go tla diriša setaele sa pilisi .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>

Fade phello

Go dira gore dithepo di fifala ka gare, oketša .fadego e nngwe le e nngwe .tab-pane. Lefasetešana la thepo ya mathomo le lona le swanetše go ba le .ingo dira gore diteng tša mathomo di bonagale.

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

Mekgwa ya go šoma

$().tab

E tsenya tirišong elemente ya thepo le setshelo sa diteng. Tab e swanetše go ba le e ka ba a data-targetgoba ya go hrefnepiša noutu ya setshelo ka go DOM. Mehlaleng ye e lego ka mo godimo, dithepo ke <a>s yeo e nago le data-toggle="tab"dika.

.tab('show')

Kgetha thepo ye e filwego gomme e bontšha diteng tša yona tše di amanago. Thepo efe goba efe ye nngwe yeo e bego e kgethilwe peleng e ba yeo e sa kgethwago gomme diteng tša yona tše di amanago le yona di a utilwe. E boela go mogala pele lefasetere la thepo le bontšhitšwe e le ka kgonthe (ke gore pele ga ge shown.bs.tabtiragalo e direga).

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

Ditiragalo

Ge o bontšha thepo ye mpsha, ditiragalo di thunya ka tatelano ye e latelago:

  1. hide.bs.tab(go thepo ya bjale ye e šomago) .
  2. show.bs.tab(go thepo yeo e tlago go bontšhwa)
  3. hidden.bs.tab(go thepong ya go šoma ya peleng, e swanago le ya hide.bs.tabtiragalo)
  4. shown.bs.tab(go thepong yeo e sa tšwago go šoma yeo e sa tšwago go bontšhwa, e swanago le ya show.bs.tabtiragalo)

Ge e ba go se na thepo yeo e bego e šetše e šoma, gona ditiragalo tša hide.bs.table hidden.bs.tabdi ka se thuntšwe.

Mohuta wa Tiragalo Tlhalošo
bontša.bs.tab Tiragalo ye e thunya ka pontšho ya thepo, eupša pele ga ge thepo ye mpsha e bontšhitšwe. Šomiša event.targetle event.relatedTargetgo nepiša thepo ye e šomago le thepo ye e šomago ya peleng (ge e le gona) ka go latelelana.
e bontšhitšwe.bs.tab Tiragalo ye e thunya pontšhong ya thepo ka morago ga ge thepo e bontšhitšwe. Šomiša event.targetle event.relatedTargetgo nepiša thepo ye e šomago le thepo ye e šomago ya peleng (ge e le gona) ka go latelelana.
pata.bs.thepo Tiragalo ye e a tuka ge thepo ye mpsha e swanetše go bontšhwa (gomme ka go realo thepo ye e šomago ya peleng e swanetše go utollwa). Šomiša event.targetle event.relatedTargetgo nepiša thepo ya bjale ye e šomago le thepo ye mpsha yeo e tlago go šoma kgauswinyane, ka go latelelana.
e utilwego.bs.tab Tiragalo ye e thunya ka morago ga ge thepo ye mpsha e bontšhitšwe (gomme ka go realo thepo ye e šomago ya peleng e a utilwe). Šomiša event.targetle event.relatedTargetgo nepiša thepo ye e šomago ya peleng le thepo ye mpsha ye e šomago, ka go latelelana.
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})

Dikeletšo tša didirišwa tooltip.js

E hlohleleditšwe ke plugin ye botse kudu ya jQuery.tipsy yeo e ngwadilwego ke Jason Frame; Dikeletšo tša didirišwa ke phetolelo ye e mpshafaditšwego, yeo e sa ithekgego ka diswantšho, e šomiša CSS3 bakeng sa ditshwantšho tša go phela, le dika tša datha bakeng sa polokelo ya thaetlele ya selegae.

Dikeletšo tša didirišwa tšeo di nago le dihlogo tša botelele bja lefela ga di ke di bontšhwa.

Mehlala

Beakanya godimo ga dikgokagano tše di lego ka mo tlase go bona ditšhišinyo tša didirišwa:

Tight pants next level keffiyeh mohlomongwe ga se wa kwa ka tšona. Photo lephephe ditedu tala denim letterpress vegan moromiwa mokotla stumptown. Polase-ho-tafoleng seitan, mcsweeney o fixie tšoarellang quinoa 8-bit american liaparo na le terry richardson vinyl chambray. Ditedu stumptown, cardigans banh mi lomo dikatse tsa diaduma. Tofu biodiesel williamsburg marfa, tse 'nè loko mcsweeney o hloekisa vegan chambray. A hlile ironic artisan eng kapa eng keytar , scenester polasi-ho-tafoleng banksy Austin twitter sebetsana freegan cred tala denim e le 'ngoe-tšimoloho kofi kokoana-hloko.

Sedirišwa sa go se fetoge

Dikgetho tše nne di a hwetšagala: di logagantšwe ka godimo, ka go le letona, ka tlase le ka go le letshadi.

Ditaelo tše nne

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

Opt-in tshebetso

Ka mabaka a tshepedišo, Tooltip le Popover data-apis ke go kgetha go tsena, go ra gore o swanetše go di thoma ka bowena .

Tsela e nngwe ya go thoma ditšhišinyo ka moka tša didirišwa letlakaleng e tla ba go di kgetha ka data-toggleseka sa tšona:

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

Tšhomišo

Plugin ya keletšo ya didirišwa e tšweletša dikagare le go swaya ka nyakego, gomme ka go ikemela e bea ditšhupetšo ka morago ga elemente ya bona ya go hlohleletša.

Hlohleletša keletšo ya sedirišwa ka JavaScript:

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

Go swaya

Tswao ye e nyakegago ya keletšo ya sedirišwa ke dataseka fela gomme titlegodimo ga elemente ya HTML o nyaka go ba le keletšo ya sedirišwa. The generated markup ya tooltip e e-na le bonolo, le hoja e etsa hloka boemo (ka default, beha ho topke 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>

Dikgokagano tša mela e mentši

Ka nako ye nngwe o nyaka go oketša keletšo ya sedirišwa go kgokaganyo ya godimo yeo e phuthelago methalo ye mentši. Boitshwaro bja go se fetoge bja plugin ya tooltip ke go e tsepamiša ka go rapalala le ka go otlologa. Oketša white-space: nowrap;go ditshetledi tša gago go efoga se.

Dikeletšo tša didirišwa ka dihlopha tša dikonope, dihlopha tša go tsenya, le ditafola di nyaka peakanyo ye e kgethegilego

Ge o diriša dielemente tša didirišwa go dielemente ka gare ga a .btn-groupgoba an .input-group, goba go dielemente tše di amanago le tafola ( <td>, <th>, <tr>, <thead>, <tbody>, <tfoot>), o tla swanelwa ke go laetša kgetho container: 'body'(yeo e ngwadilwego ka mo tlase) go efoga ditlamorago tše di sa nyakegego (go swana le elemente yeo e golago ka bophara le/ goba go lahlegelwa ke dikhutlo tša yona tše di kgokologilego ge ntlha ya sedirišwa e hlohleletšwa).

O se ke wa leka go bontšha ditlhagišo tša didirišwa go dielemente tše di utilwego

Go bitša $(...).tooltip('show')ge elemente ya nepišo e le gona go display: none;tla dira gore keletšo ya sedirišwa e bewe ka mo go fošagetšego.

Dikeletšo tša didirišwa tše di fihlelelwago bakeng sa badiriši ba khiiboto le theknolotši ya go thuša

Bakeng sa badiriši bao ba sepelago ka khiiboto, le ka mo go kgethegilego badiriši ba theknolotši ya go thuša, o swanetše go oketša fela dielemente tša didirišwa go dielemente tše di tsepeletšego go khiiboto tša go swana le dikgokagano, ditaolo tša foromo, goba elemente efe goba efe ya boithatelo yeo e nago le tabindex="0"seka.

Dikeletšo tša didirišwa go dielemente tše di golofetšego di nyaka dielemente tša go phuthela

Go tlaleletša keletšo ya sedirišwa go a disabledgoba .disabledelemente, bea elemente ka gare ga a <div>gomme o diriše keletšo ya sedirišwa go seo <div>go e na le moo.

Dikgetho

Dikgetho di ka fetišwa ka dika tša datha goba JavaScript. Bakeng sa dika tša datha, tlaleletša leina la kgetho go data-, bjalo ka go data-animation="".

Leina Mohuta Hlokomologa Tlhalošo
ditshwantsho tse di phelang boolean ya go swana nnete Diriša phetogo ya go fifala ya CSS go keletšo ya sedirišwa
setshelo thapo ya | maaka maaka

E tlaleletša keletšo ya sedirišwa go elemente ye e itšego. Mohlala: container: 'body'. Kgetho ye e na le mohola kudu ka gore e go dumelela go bea ntlha ya sedirišwa ka go elela ga tokumente kgauswi le elemente ya go hlohleletša - yeo e tlago thibela ntlha ya sedirišwa go phaphamala go tloga go elemente ya go hlohleletša nakong ya go fetoša bogolo bja lefasetere.

diega nomoro ya | selo 0.

Tiego ya go bontšha le go uta keletšo ya sedirišwa (ms) - ga e šome go mohuta wa go hlohleletša ka seatla

Ge e le gore nomoro e filwe, go diega go dirišwa go bobedi go uta/bontšha

Sebopego sa selo ke:delay: { "show": 500, "hide": 100 }

html boolean ya go swana maaka Tsenya HTML ka gare ga keletšo ya sedirišwa. Ge e le maaka, mokgwa wa jQuery texto tla šomišwa go tsenya diteng ka gare ga DOM. Diriša sengwalwa ge e ba o tshwenyegile ka ditlhaselo tša XSS.
go bewa ga dilo thapo ya | mošomo 'godimo'

Tsela ya go bea tooltip - godimo | tlase | le letšehali | tokelo ya | auto.
Ge "auto" e laeditšwe, e tla lebiša gape ka go fetoga ntlha ya sedirišwa. Go fa mohlala, ge e le gore go bewa ke "go itiriša ka go le letshadi", keletšo ya sedirišwa e tla bontšha ka go le letshadi ge go kgonega, go sego bjalo e tla bontšha ka go le letona.

Ge mošomo o šomišwa go bona go bewa, o bitšwa ka noutu ya DOM ya ntlha ya sedirišwa bjalo ka ngangišano ya yona ya mathomo le noutu ya DOM ya elemente ye e hlohleletšago bjalo ka noutu ya yona ya bobedi. Seemo thisse beakantšwe go mohlala wa keletšo ya sedirišwa.

mokgethi wa go kgetha thapo maaka Ge e le gore mokgethi o filwe, dilo tša keletšo ya sedirišwa di tla abelwa diphetho tše di laeditšwego. Ka go diragatša, se se šomišwa go kgontšha diteng tša HTML tše di fetogago go ba le ditšhupetšo tša didirišwa tše di okeditšwego. Bona se le mohlala o rutago .
thempleite ya thapo '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'

Thea HTML go šomiša ge o hlama keletšo ya sedirišwa.

Di- tooltip's titledi tla hlabja ka gare ga .tooltip-inner.

.tooltip-arrowe tla ba motsu wa tooltip.

The ka ntle ka ho fetisisa wrapper elements lokela ho ba le .tooltipsehlopha.

thaetlele thapo ya | mošomo '' .

Boleng bja thaetlele bja maitirelo ge e titlele gore seka se se gona.

Ge e le gore mošomo o filwe, o tla bitšwa ka thissete ya wona ya tšhupetšo go elemente yeo keletšo ya sedirišwa e kgomareditšwego go yona.

šušumetša thapo 'hover tsepamiso ya maikutlo'. Kamoo tooltip e hlohleletšwago ka gona - klika | hover | go tsepamiša kgopolo | manyuale. O ka feta dihlohleletši tše dintši; di aroganye ka sekgoba. manuale ka se kopanywe le selo le ge e le sefe se sengwe seo se hlohleletšago.
lefelo la go lebelela thapo ya | selo sa | mošomo { mokgethi: 'mmele', padding: 0 } .

E boloka keletšo ya sedirišwa ka gare ga mellwane ya elemente ye. Mohlala: viewport: '#viewport'goba{ "selector": "#viewport", "padding": 0 }

Ge e le gore mošomo o filwe, o bitšwa ka noutu ya DOM ya elemente ya go hlohleletša bjalo ka ngangišano ya yona e nnoši. Seemo thisse beakantšwe go mohlala wa keletšo ya sedirišwa.

Dika tša datha tša didirišwa tša motho ka o tee ka o tee

Dikgetho tša maele a didirišwa ka botee ka tsela ye nngwe di ka laetšwa ka tšhomišo ya dika tša datha, bjalo ka ge go hlalošitšwe ka godimo.

Mekgwa ya go šoma

$().tooltip(options)

E kgomaretša sedirišwa sa go swara sedirišwa go kgoboketšo ya elemente.

.tooltip('show')

E utolla keletšo ya sedirišwa ya elemente. E boela go mogala pele ga ge keletšo ya sedirišwa e bontšhitšwe e le ka kgonthe (ke gore pele ga ge shown.bs.tooltiptiragalo e direga). Se se tšewa e le go hlohleletša "ka seatla" ga keletšo ya sedirišwa. Dikeletšo tša didirišwa tšeo di nago le dihlogo tša botelele bja lefela ga di ke di bontšhwa.

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

.tooltip('hide')

E uta keletšo ya sedirišwa ya elemente. E boela go mogala pele ga ge keletšo ya sedirišwa e tloga e utilwe (ke gore pele ga ge hidden.bs.tooltiptiragalo e direga). Se se tšewa e le go hlohleletša "ka seatla" ga keletšo ya sedirišwa.

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

.tooltip('toggle')

E fetola keletšo ya sedirišwa ya elemente. E boela go mogala pele ga ge keletšo ya sedirišwa e tloga e bontšhitšwe goba e utilwe (ke gore pele ga ge tiragalo ya shown.bs.tooltipgoba hidden.bs.tooltipe direga). Se se tšewa e le go hlohleletša "ka seatla" ga keletšo ya sedirišwa.

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

.tooltip('destroy')

E uta le go senya sedirišwa sa elemente. Dikeletšo tša didirišwa tšeo di šomišago kabo (tšeo di hlotšwego ka go šomiša kgetho selector) di ka se senywe ka botee go dielemente tša go hlohleletša tša setlogolo.

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

Ditiragalo

Mohuta wa Tiragalo Tlhalošo
bontša.bs.sedirišwa Tiragalo ye e thunya ka pela ge showmokgwa wa mohlala o bitšwa.
bontšitsoeng.bs.sedirišwa Tiragalo ye e thuntšhwa ge keletšo ya sedirišwa e dirilwe gore e bonagale go modiriši (e tla emela gore diphetogo tša CSS di phethe).
pata.bs.keletšo ya sedirišwa Tiragalo ye e thuntšhwa ka pela ge hidemokgwa wa mohlala o biditšwe.
patilwe.bs.sedirišwa Tiragalo ye e thuntšhwa ge keletšo ya sedirišwa e feditše go utollwa go tšwa go modiriši (e tla emela gore diphetogo tša CSS di phethe).
e tsentšwe.bs.sedirišwa Tiragalo ye e thuntšhwa ka morago ga show.bs.tooltiptiragalo ge thempleite ya keletšo ya sedirišwa e okeditšwe go DOM.
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})

Dipopovers popover.js

Oketša dikhupetšo tše nnyane tša dikagare, go swana le tšeo di lego go iPad, go elemente efe goba efe ya go amoša tshedimošo ya bobedi.

Dipopo tšeo bobedi sehlogo le diteng tša tšona e lego tša botelele bja lefela ga di ke di bontšhwa.

Go ithekga ka plugin

Popovers e nyaka gore plugin ya tooltip e akaretšwe phetolelong ya gago ya Bootstrap.

Opt-in tshebetso

Ka mabaka a tshepedišo, Tooltip le Popover data-apis ke tša go kgetha go tsena, go ra gore o swanetše go di thoma ka bowena .

Tsela e nngwe ya go thoma di-popover ka moka letlakaleng e be e tla ba go di kgetha ka data-toggleseka sa tšona:

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

Dipopo ka dihlopha tša dikonope, dihlopha tša go tsenya, le ditafola di nyaka peakanyo ye e kgethegilego

Ge o diriša di-popover go dielemente ka gare ga a .btn-groupgoba an .input-group, goba go dielemente tše di amanago le tafola ( <td>, <th>, <tr>, <thead>, <tbody>, <tfoot>), o tla swanelwa ke go laetša kgetho container: 'body'(yeo e ngwadilwego ka mo tlase) go efoga ditlamorago tše di sa nyakegego (tše bjalo ka elemente yeo e golago ka bophara le/ goba go lahlegelwa ke dikhutlo tša yona tše di kgokologilego ge popover e hlohleletšwa).

O se ke wa leka go bontšha di-popover go dielemente tše di utilwego

Go bitša $(...).popover('show')ge elemente ya nepišo e le gona go display: none;tla dira gore popover e bewe ka mo go fošagetšego.

Popovers ka dielemente tše di golofetšego di nyaka dielemente tša go phuthela

Go oketša popover go a disabledgoba .disabledelemente, bea elemente ka gare ga a <div>gomme o diriše popover go seo <div>go e na le moo.

Dikgokagano tša mela e mentši

Ka nako ye nngwe o nyaka go oketša popover go hyperlink yeo e phuthelago mela ye mentši. Boitshwaro bja go se fetoge bja plugin ya popover ke go e tsepamiša ka go rapalala le ka go otlologa. Oketša white-space: nowrap;go ditshetledi tša gago go efoga se.

Mehlala

Popover e sa fetoheng

Dikgetho tše nne di a hwetšagala: di logagantšwe ka godimo, ka go le letona, ka tlase le ka go le letshadi.

Popover godimo ga

Sed posuere kgethehileng est ka lobortis. Aenean eu leo ​​quam. Pellentesque e kgabišwa ke lacinia quam venenatis vestibulum.

Popover e nepahetseng

Sed posuere kgethehileng est ka lobortis. Aenean eu leo ​​quam. Pellentesque e kgabišwa ke lacinia quam venenatis vestibulum.

Popover tlase

Sed posuere kgethehileng est ka lobortis. Aenean eu leo ​​quam. Pellentesque e kgabišwa ke lacinia quam venenatis vestibulum.

Popover o ile a tloga

Sed posuere kgethehileng est ka lobortis. Aenean eu leo ​​quam. Pellentesque e kgabišwa ke lacinia quam venenatis vestibulum.

Demo e phelang

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

Ditaelo tše nne

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

Raka ka tobetsa e latelang

Diriša focussešušumeletši go raka di-popover go kgotla ye e latelago yeo mosediriši a e dirago.

Go nyakega go swaya mo go itšego bakeng sa go raka-go-klika-go-kgotla mo go latelago

Bakeng sa boitshwaro bjo bo swanetšego bja sefapano sa sephephediši le sefapano sa sefala, o swanetše go šomiša <a>leswao, e sego<button> leswao, gomme gape o swanetše go akaretša role="button"le tabindexdika.

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

Tšhomišo

Kgontšha di-popover ka JavaScript:

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

Dikgetho

Dikgetho di ka fetišwa ka dika tša datha goba JavaScript. Bakeng sa dika tša datha, tlaleletša leina la kgetho go data-, bjalo ka go data-animation="".

Leina Mohuta Hlokomologa Tlhalošo
ditshwantsho tse di phelang boolean ya go swana nnete Diriša phetogo ya go fifala ya CSS go popover
setshelo thapo ya | maaka maaka

E tlaleletša popover go elemente ye e itšego. Mohlala: container: 'body'. Kgetho ye e na le mohola kudu ka gore e go dumelela go bea popover ka go elela ga tokumente kgauswi le elemente ya go hlohleletša - yeo e tlago thibela popover go phaphamala go tloga go elemente ya go hlohleletša nakong ya go fetoša bogolo bja lefasetere.

diteng thapo ya | mošomo '' .

Boleng bja diteng bja maitirelo ge e data-contentle gore seka se se gona.

Ge mošomo o filwe, o tla bitšwa ka thissete ya yona ya tšhupetšo go elemente yeo popover e kgomareditšwego go yona.

diega nomoro ya | selo 0.

Tiego ya go bontšha le go uta popover (ms) - ga e šome go mohuta wa go hlohleletša ka seatla

Ge e le gore nomoro e filwe, go diega go dirišwa go bobedi go uta/bontšha

Sebopego sa selo ke:delay: { "show": 500, "hide": 100 }

html boolean ya go swana maaka Tsenya HTML ka gare ga popover. Ge e le maaka, mokgwa wa jQuery texto tla šomišwa go tsenya diteng ka gare ga DOM. Diriša sengwalwa ge e ba o tshwenyegile ka ditlhaselo tša XSS.
go bewa ga dilo thapo ya | mošomo 'nepagetše'

Tsela ya go bea popover - godimo | tlase | le letšehali | tokelo ya | auto.
Ge "auto" e laeditšwe, e tla lebiša gape popover ka go fetoga. Mohlala, ge e le gore go bewa ke "auto left", popover e tla bontšha ka go le letshadi ge go kgonega, go sego bjalo e tla bontšha ka go le letona.

Ge mošomo o šomišwa go bona go bewa, o bitšwa ka noutu ya DOM ya popover bjalo ka ngangišano ya yona ya mathomo le noutu ya DOM ya elemente ye e hlohleletšago bjalo ka noutu ya yona ya bobedi. Seemo thisse beakantšwe go mohlala wa popover.

mokgethi wa go kgetha thapo maaka Ge e le gore mokgethi o filwe, dilo tša popover di tla abelwa diphetho tše di laeditšwego. Ka go diragatša, se se šomišwa go kgontšha diteng tša HTML tše di fetogago go ba le dipopovers tše di okeditšwego. Bona se le mohlala o rutago .
thempleite ya thapo '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'

Thea HTML go šomiša ge o hlama popover.

Popover's e titletla hlabja ka gare ga .popover-title.

Popover's e contenttla hlabja ka gare ga .popover-content.

.arrowe tla fetoga motsu wa popover.

The ka ntle ka ho fetisisa wrapper elements lokela ho ba le .popoversehlopha.

thaetlele thapo ya | mošomo '' .

Boleng bja thaetlele bja maitirelo ge e titlele gore seka se se gona.

Ge mošomo o filwe, o tla bitšwa ka thissete ya yona ya tšhupetšo go elemente yeo popover e kgomareditšwego go yona.

šušumetša thapo 'klika'. Kamoo popover e hlohleletšwago ka gona - tobetsa | hover | go tsepamiša kgopolo | manyuale. O ka feta dihlohleletši tše dintši; di aroganye ka sekgoba. manuale ka se kopanywe le selo le ge e le sefe se sengwe seo se hlohleletšago.
lefelo la go lebelela thapo ya | selo sa | mošomo { mokgethi: 'mmele', padding: 0 } .

E boloka popover ka gare ga mellwane ya elemente ye. Mohlala: viewport: '#viewport'goba{ "selector": "#viewport", "padding": 0 }

Ge e le gore mošomo o filwe, o bitšwa ka noutu ya DOM ya elemente ya go hlohleletša bjalo ka ngangišano ya yona e nnoši. Seemo thisse beakantšwe go mohlala wa popover.

Data litšobotsi bakeng sa popovers motho ka mong

Dikgetho tša dipopovers ka botee di ka laetšwa ka tsela ye nngwe ka tšhomišo ya dika tša datha, bjalo ka ge go hlalošitšwe ka godimo.

Mekgwa ya go šoma

$().popover(options)

E thoma di-popovers bakeng sa kgoboketšo ya elemente.

.popover('show')

E utolla popover ya elemente. E boela go mogala pele ga ge popover e bontšhitšwe e le ka kgonthe (ke gore pele shown.bs.popovertiragalo e direga). Se se tšewa e le "manual" triggering ya popover. Di-popover tšeo bobedi sehlogo le diteng tša tšona e lego tša botelele bja lefela ga di ke di bontšhwa.

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

.popover('hide')

Pata popover ya elemente. E boela go mogala pele ga ge popover e tloga e utilwe (ke gore pele ga ge hidden.bs.popovertiragalo e direga). Se se tšewa e le "manual" triggering ya popover.

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

.popover('toggle')

Toggles popover ya elemente. E boela go mogala pele ga ge popover e tloga e bontšhitšwe goba e utilwe (ke gore pele ga ge tiragalo ya shown.bs.popovergoba hidden.bs.popovere direga). Se se tšewa e le "manual" triggering ya popover.

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

.popover('destroy')

Pata le go senya popover ya elemente. Popovers hore sebelisa kabo (tseo di bōptjoa sebelisa kgetho selector) ke ke ka bomong senya ka setloholo qholotsa elements.

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

Ditiragalo

Mohuta wa Tiragalo Tlhalošo
bontša.bs.popover Tiragalo ye e thunya ka pela ge showmokgwa wa mohlala o bitšwa.
e bontšhitšwe.bs.bodiidi Tiragalo ye e thuntšhwa ge popover e dirilwe gore e bonagale go modiriši (e tla emela gore diphetogo tša CSS di phethe).
pata.bs.bodiidi Tiragalo ye e thuntšhwa ka pela ge hidemokgwa wa mohlala o biditšwe.
e utilwego.bs.bodiidi Tiragalo ye e thuntšhwa ge popover e feditše go utollwa go modiriši (e tla emela gore diphetogo tša CSS di phethe).
e tsentšwe.bs.bodiidi Tiragalo ye e thuntšhwa ka morago ga show.bs.popovertiragalo ge thempleite ya popover e okeditšwe go DOM.
$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})

Melaetša ya temošo alert.js

Ditemošo tša mohlala

Oketša mošomo wa go raka go melaetša ka moka ya temošo ka plugin ye.

Ge o šomiša .closekonope, e swanetše go ba ngwana wa mathomo wa .alert-dismissiblegomme ga go diteng tša sengwalwa tšeo di ka tlago pele ga yona ka go swaya.

Tšhomišo

E no tlaleletša data-dismiss="alert"go konope ya gago ya go tswalela go fa ka go iketla mošomo wa go tswalela temošo. Go tswalela temošo go e tloša go tšwa go DOM.

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

Go dira gore ditemošo tša gago di šomiše ditshwantšho tša go phela ge o tswalela, kgonthiša gore di na le .fadele.in diklase tšeo di šetšego di dirišitšwe go tšona.

Mekgwa ya go šoma

$().alert()

E dira gore temošo e theeletša ditiragalo tša go klika go dielemente tša setlogolo tšeo di nago le data-dismiss="alert"seka. (Ga go nyakege ge o diriša go thoma ga go itiriša ga data-api.)

$().alert('close')

E tswalela temošo ka go e tloša go DOM. Ge e .fadele gore .indiklase tša le di gona godimo ga elemente, temošo e tla fifala pele e tlošwa.

Ditiragalo

Bootstrap o temošo plugin pepentšha ditiragalo tše mmalwa bakeng sa hooking ka temošo tshebetso.

Mohuta wa Tiragalo Tlhalošo
tswalela.bs.temošo Tiragalo ye e thunya ka pela ge closemokgwa wa mohlala o bitšwa.
e tswaletšwe.bs.temošo Tiragalo ye e thuntšhwa ge temošo e tswaletšwe (e tla emela gore diphetogo tša CSS di phethe).
$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})

Dikonope konopo.js

Dira mo gontši ka dikonope. Taolo konope e bolela goba hlama dihlopha tša dikonope bakeng sa dikarolo tše dingwe go swana le dibara tša didirišwa.

Go sepelelana ga sefapano sa sephephediši

Firefox e phegelela maemo a taolo ya foromo (go golofala le go hlahlobja) go ralala le merwalo ya letlakala . Tsela ya go rarolla se ke go diriša autocomplete="off". Bona phošo ya Mozilla #654072 .

Stateful

Oketša data-loading-text="Loading..."go šomiša boemo bja go laetša godimo ga konope.

Sebopego se se tlošitšwe go tloga ka v3.3.5 gomme se tlošitšwe go v4.

Diriša boemo le ge e le bofe bjo o bo ratago!

Ka lebaka la pontšho ye, re diriša data-loading-textle $().button('loading'), eupša seo ga se boemo bjo tee feela bjoo o ka bo dirišago. Bona tše dingwe ka ga se ka fase ka go $().button(string)ditokomane .

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

Toggle e le nngwe

Oketša data-toggle="button"go tsenya tirišong go fetola go konope e tee.

Pre-toggled dikonopo hloka .activelearia-pressed="true"

Bakeng sa dikonope tše di fetotšwego pele, o swanetše go oketša .activesehlopha le aria-pressed="true"seka go ya ka buttonbowena.

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

Lepokisi la go hlahloba / Radio

Oketša data-toggle="buttons"go .btn-grouplepokisi la go hlahloba leo le nago le goba ditseno tša radio go kgontšha go fetoša ka ditaele tša tšona ka go latelana.

Dikgetho tše di kgethilwego pele di hloka.active

Bakeng sa dikgetho tše di kgethilwego pele, o swanetše go oketša .activesehlopha go input's labelka bowena.

Pono hlahloba boemo feela ntjhafatswa ka tobetsa

Ge e le gore boemo bjo bo hlahlobilwego bja konope ya lepokisi la go hlahloba bo mpshafaditšwe ntle le go thuntšha clicktiragalo godimo ga konope (mohlala ka <input type="reset">goba ka go beakanya checkedthepa ya tsenyo), o tla swanelwa ke go fetoša .activesehlopha godimo ga tsenyo ka labelbowena.

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

Mekgwa ya go šoma

$().button('toggle')

Toggles kgorometsa boemo. E fa konope ponagalo ya gore e tsentšwe tirišong.

$().button('reset')

E beakanya gape boemo bja konope - e fapantšha sengwalwa go sengwalwa sa mathomo. Mokgwa wo ke wa asynchronous gomme o boela morago pele ga ge go beakanya gape go phethilwe e le ka kgonthe.

$().button(string)

Swaps sengwalwa go seemo sefe goba sefe sa sengwalwa sa datha ye e hlalošitšwego.

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

Collapse phuhlama.js

Tenyetsehang plugin hore utilizes seatla se senyenyane sa diklase bakeng sa bonolo toggle boitšoaro.

Go ithekga ka plugin

Go phuhlama go nyaka gore plugin ya diphetogo e akaretšwe ka go phetolelo ya gago ya Bootstrap.

Mohlala

Klika dikonope tše di lego ka mo tlase go bontšha le go uta elemente ye nngwe ka diphetogo tša sehlopha:

  • .collapsee uta diteng
  • .collapsinge dirišwa nakong ya diphetogo
  • .collapse.ine bontšha diteng

O ka šomiša kgokagano ye e nago le hrefseka, goba konope ye e nago le data-targetseka. Maemong a mabedi, the data-toggle="collapse"e a nyakega.

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>

Mohlala wa accordion

Atološa boitshwaro bja go phuhlama bja go se fetoge go hlama accordion ka karolo ya phanele.

Anim pariatur cliche reprehenderit, enim eiusmod bophelo bo phahameng accusamus terry richardson papatso squid. 3 phiri ngwedi officia aute, bao e seng cupidat skateboard dolor brunch. Tereka ya dijo quinoa nesciunt laborum eiusmod. Brunch 3 phiri ngwedi tempor, sunt aliqua beha nonyana ka eona squid e le 'ngoe-tšimoloho kofi nulla assumenda shoreditch et. Nihil ani keffiyeh helvetica, mošomo wa diatla wa biri wa go šoma ka diatla wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur nama motlatsi lomo. Leggings occaecat craft biri polasi-ho-tafoleng, tala denim aesthetic synth nesciunt mohlomong ha ua utloa ka bona accusamus labore tšoarellang VHS.
Anim pariatur cliche reprehenderit, enim eiusmod bophelo bo phahameng accusamus terry richardson papatso squid. 3 phiri ngwedi officia aute, bao e seng cupidat skateboard dolor brunch. Tereka ya dijo quinoa nesciunt laborum eiusmod. Brunch 3 phiri ngwedi tempor, sunt aliqua beha nonyana ka eona squid e le 'ngoe-tšimoloho kofi nulla assumenda shoreditch et. Nihil ani keffiyeh helvetica, mošomo wa diatla wa biri wa go šoma ka diatla wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur nama motlatsi lomo. Leggings occaecat craft biri polasi-ho-tafoleng, tala denim aesthetic synth nesciunt mohlomong ha ua utloa ka bona accusamus labore tšoarellang VHS.
Anim pariatur cliche reprehenderit, enim eiusmod bophelo bo phahameng accusamus terry richardson papatso squid. 3 phiri ngwedi officia aute, bao e seng cupidat skateboard dolor brunch. Tereka ya dijo quinoa nesciunt laborum eiusmod. Brunch 3 phiri ngwedi tempor, sunt aliqua beha nonyana ka eona squid e le 'ngoe-tšimoloho kofi nulla assumenda shoreditch et. Nihil ani keffiyeh helvetica, mošomo wa diatla wa biri wa go šoma ka diatla wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur nama motlatsi lomo. Leggings occaecat craft biri polasi-ho-tafoleng, tala denim aesthetic synth nesciunt mohlomong ha ua utloa ka bona accusamus labore tšoarellang 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>

Gape go a kgonega go fapantšha .panel-bodys ka .list-groups.

  • Bootply ya go thoma
  • Itmus e tee ya ac facilin
  • Eros ya bobedi

Dira gore ditaolo tša go katološa/go phuhlama di fihlelelege

Kgonthiša gore o tlaleletša aria-expandedgo elemente ya taolo. Sebopego se se hlaloša ka go lebanya seemo sa bjale sa elemente ye e phuhlamago go babadi ba go hlahloba le theknolotši ya go thuša ye e swanago. Ge e le gore elemente ye e phuhlamago e tswaletšwe ka go ikemela, e swanetše go ba le boleng bja aria-expanded="false". Ge e le gore o beakantše elemente ye e phuhlamago gore e bulege ka go ikemela o šomiša insehlopha, beakanyaaria-expanded="true" godimo ga taolo go e na le moo. Plugin e tla fetola seka se ka go iketla go ya ka gore elemente ye e phuhlamago e butšwe goba e tswaletšwe goba aowa.

Go tlaleletša, ge e le gore elemente ya gago ya taolo e nepiša elemente e tee ye e phuhlamago – ke gore data-targetseka se šupa idmokgethi – o ka oketša aria-controlsseka sa tlaleletšo go elemente ya taolo, yeo e nago le idya elemente ye e phuhlamago. Dibadi tša sebjalebjale tša skrine le theknolotši ye e swanago ya go thuša di šomiša seka se go fa badiriši dikgaoletšo tša tlaleletšo tša go sepela thwii go elemente yeo e phuhlamago ka boyona.

Tšhomišo

Plugin ya go phuhlama e šomiša diklase tše mmalwa go swaragana le go phagamiša boima:

  • .collapsee uta diteng
  • .collapse.ine bontšha diteng
  • .collapsinge tlaleletšwa ge phetogo e thoma, gomme ya tlošwa ge e fedile

Diklase tše di ka hwetšwa go component-animations.less.

Ka dika ya data

E no tlaleletša data-toggle="collapse"le a data-targetgo elemente go abela ka go iketla taolo ya elemente ye e phuhlamago. Sebopego data-targetse amogela mokgethi wa CSS go diriša go phuhlama go. Kgonthiša gore o tlaleletša sehlopha collapsego elemente ye e phuhlamago. Ge e ba o rata gore e bulege ka go ikemela, oketša sehlopha sa tlaleletšo in.

Go oketša taolo ya sehlopha ya go swana le accordion go taolo ye e phuhlamago, oketša seka sa datha data-parent="#selector". Lebelela demo go bona se se šoma.

Ka JavaScript

Kgontšha ka seatla ka:

$('.collapse').collapse()

Dikgetho

Dikgetho di ka fetišwa ka dika tša datha goba JavaScript. Bakeng sa dika tša datha, tlaleletša leina la kgetho go data-, bjalo ka go data-parent="".

Leina mohuta hlokomologa tlhalošo
motswadi mokgethi wa go kgetha maaka Ge e le gore mokgethi o filwe, gona dielemente ka moka tše di phuhlamago ka fase ga motswadi yo a laeditšwego di tla tswalelwa ge selo se se se phuhlamago se bontšhwa. (e tšoanang le boitšoaro ba setso ba accordion - sena se itšetlehile ka panelsehlopha)
go fetola boolean ya go swana nnete Toggles elements collapsible ka pitso

Mekgwa ya go šoma

.collapse(options)

E dira gore diteng tša gago di šome bjalo ka elemente ye e phuhlamago. E amogela dikgetho tša boikhethelo object.

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

.collapse('toggle')

E fetola elemente ye e phuhlamago go bontšhwa goba ye e utilwego. E boela go mogala pele ga ge elemente ye e phuhlamago e tloga e bontšhitšwe goba e utilwe (ke gore pele ga ge tiragalo ya shown.bs.collapsegoba hidden.bs.collapsee direga).

.collapse('show')

E bontšha elemente yeo e ka phuhlamago. E boela go mogala pele ga ge elemente ye e phuhlamago e bontšhitšwe e le ka kgonthe (ke gore pele ga ge shown.bs.collapsetiragalo e direga).

.collapse('hide')

E uta elemente yeo e ka phuhlamago. E boela go mogala pele ga ge elemente ye e phuhlamago e tloga e utilwe (ke gore pele ga ge hidden.bs.collapsetiragalo e direga).

Ditiragalo

Sehlopha sa go phuhlama sa Bootstrap se pepentšha ditiragalo tše mmalwa tša go goketša ka mošomo wa go phuhlama.

Mohuta wa Tiragalo Tlhalošo
bontšha.bs.go phuhlama Tiragalo ye e thunya ka pela ge showmokgwa wa mohlala o bitšwa.
e bontšhitšwe.bs.e phuhlama Tiragalo ye e thuntšhwa ge elemente ya go phuhlama e dirilwe gore e bonagale go modiriši (e tla emela gore diphetogo tša CSS di phethe).
pata.bs.e phuhlama Tiragalo ye e thuntšhwa ka pela ge thehide mokgwa o biditšwe.
e utilwego.bs.e phuhlama Tiragalo ye e thuntšhwa ge elemente ya go phuhlama e utilwe go tšwa go modiriši (e tla emela gore diphetogo tša CSS di phethe).
$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})

Carousel ya go swara carousel.js

Karolo ya pontšho ya diselaete ya go sepela ka dipaesekele ka dielemente, go swana le carousel.Di-carousel tše di tsentšwego ka gare ga dihlaga ga di thekgwe.

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

Ditlhaloso tša boikgethelo

Oketša ditlhalošo go dilaete tša gago gabonolo ka .carousel-captionelemente ka gare ga efe goba efe .item. Bea mo e nyakilego go ba HTML efe goba efe ya boikhethelo ka gare moo gomme e tla logaganya le go fometwa ka go iketla.

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

Di-carousel tše dintši

Di-carousel di nyaka go dirišwa ga idsebjana sa ka ntle kudu (the .carousel) gore ditaolo tša di-carousel di šome gabotse. Ge o oketša di-carousel tše dintši, goba ge o fetoša carousel’s id, kgonthišetša gore o mpshafatša ditaolo tše di swanetšego.

Ka dika ya data

Diriša dika tša data go laola gabonolo boemo bja carousel. data-slidee amogela mantšu a bohlokwa prevgoba next, yeo e fetošago maemo a selaete ge e bapetšwa le maemo a yona a bjale. Ka go fapana le moo, šomiša data-slide-togo fetiša tšhupamabaka ya selaete ye tala go carousel data-slide-to="2", yeo e fetošago boemo bja selaete go tšhupamabaka ye e itšego go thoma ka0 .

Sebopego data-ride="carousel"se šomišwa go swaya carousel bjalo ka go phela go thoma ka go rwala letlakala. E ka se šomišwe ka kopanyo le (go sa nyakege le mo go sa nyakegego) go thoma ga JavaScript mo go lego molaleng ga carousel e swanago.

Ka JavaScript

Bitsa carousel ka letsoho le:

$('.carousel').carousel()

Dikgetho di ka fetišwa ka dika tša datha goba JavaScript. Bakeng sa dika tša datha, tlaleletša leina la kgetho go data-, bjalo ka go data-interval="".

Leina mohuta hlokomologa tlhalošo
sekgoba nomoro 5000 e le Palo ya nako ya go diega magareng ga go sepela ka paesekele ka go itiragalela selo. Ge e ba e le maaka, carousel e ka se dikološe ka go iketla.
ema nakwana thapo ya | ya lefela "hover" . Ge e beakantšwe go "hover", e emiša go sepela ga carousel ka mouseenterpaesekele gomme e thoma gape go sepela ka paesekele ya carousel godimo mouseleave. Ge e ba o beakantšwe go null, go phaphamala godimo ga carousel go ka se e khutše.
phuthela boolean ya go swana nnete Gore na carousel e swanetše go sepela ka paesekele ka mo go tšwelago pele goba e be le mafelo a thata a go ema.
khiiboto ya boolean ya go swana nnete Gore na carousel e swanetše go arabela ditiragalong tša khiiboto.

Initializes carousel le dikgetho boikhethelo objectle qala baesekele ka dintho.

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

Didikologa ka dilo tša carousel go tloga go le letshadi go ya go le letona.

E thibela carousel go sepela ka dipaesekele ka dilo.

Cycles carousel ho foreime e itseng (0 e thehiloeng, e tšoanang le hlophisitsoeng).

Didikologo go ya go selo sa go feta.

Didikologo go ya go selo se se latelago.

Sehlopha sa carousel sa Bootstrap se pepentšha ditiragalo tše pedi tša go goketša ka mošomo wa carousel.

Ditiragalo tše ka bobedi di na le dithoto tše di latelago tša tlaleletšo:

  • direction: Tsela yeo carousel e thelelago ka yona (e ka ba "left"goba "right").
  • relatedTarget: Elemente ya DOM yeo e thelelago lefelong bjalo ka selo se se šomago.

Ditiragalo ka moka tša carousel di thuntšhwa go carousel ka boyona (ke gore go <div class="carousel">).

Mohuta wa Tiragalo Tlhalošo
dia.bs.kharosele Tiragalo ye e thunya ka pela ge slidemokgwa wa mohlala o bitšwa.
go thelela.bs.kharosele Tiragalo ye e thuntšhwa ge carousel e phethile phetogo ya yona ya diselaete.
$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
})

Kgomaretša affix.js

Mohlala

Plugin ya go kgomaretša e fetoša position: fixed;le go tima, e ekiša mafelelo ao a hwetšwago ka position: sticky;. The subnavigation ka ho le letona ke phela demo ya affix plugin.


Tšhomišo

Šomiša polaka ya go kgomaretša ka dika tša datha goba ka seatla ka JavaScript ya gago. Maemong a mabedi, o swanetše go fa CSS ya maemo le bophara bja diteng tša gago tše di kgomareditšwego.

Ela hloko: O se ke wa šomiša polaka ya go kgomaretša go elemente yeo e lego ka gare ga elemente yeo e beilwego ka tekanyo ye e lekanyeditšwego, go swana le kholomo ye e gogilwego goba ye e kgoromeditšwego, ka lebaka la phošo ya go fetolela ya Safari .

Go beakanya maemo ka CSS

Plugin ya affix e fetola magareng ga diklase tše tharo, ye nngwe le ye nngwe e emela seemo se se itšego: .affix, .affix-top, le .affix-bottom. O swanetše go fa mekgwa, ntle le position: fixed;godimo ga .affix, bakeng sa diklase tše ka bowena (go ikemetše ka plugin ye) go swara maemo a nnete.

Ke kamoo plugin ya go kgomaretša e šomago ka gona:

  1. Go thoma, plugin e tlaleletša.affix-top go laetša gore elemente e boemong bja yona bja godimo kudu. Mo nakong ye ga go nyakege go beakanya CSS.
  2. Go sepelasepela go feta elemente yeo o nyakago go e kgomaretša go swanetše go hlohleletša go kgomaretša ga nnete. Ke moo e .affixtšeago sebaka .affix-tople go beakanya position: fixed;(e filwego ke CSS ya Bootstrap).
  3. Ge e le gore offset ya ka fase e hlalošitšwe, go sepelasepela go feta yona go swanetše go tšeela legato .affixka .affix-bottom. Ka ge di-offset e le tša boikgethelo, go beakanya e tee go nyaka gore o beakantše CSS ya maleba. Tabeng ye, oketša position: absolute;ge go nyakega. Plugin e šomiša seka sa datha goba kgetho ya JavaScript go bona gore e bea elemente kae go tšwa fao.

Latela dikgato tše di lego ka mo godimo go beakanya CSS ya gago bakeng sa e nngwe ya dikgetho tša tšhomišo tše di lego ka mo tlase.

Ka dika ya data

Go oketša gabonolo boitshwaro bja go kgomaretša go elemente efe goba efe, e no oketša data-spy="affix"go elemente yeo o nyakago go e hlola. Šomiša di-offset go hlaloša gore o swanetše go fetoša neng go kgomaretša ga elemente.

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

Ka JavaScript

Bitsa plugin ya affix ka JavaScript:

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

Dikgetho

Dikgetho di ka fetišwa ka dika tša datha goba JavaScript. Bakeng sa dika tša datha, tlaleletša leina la kgetho go data-, bjalo ka go data-offset-top="200".

Leina mohuta hlokomologa tlhalošo
offset nomoro ya | mosebetsi | selo 10. Dipiksele go offset go tšwa skrineng ge o bala boemo bja go phurolla. Ge e le gore nomoro e tee e filwe, offset e tla dirišwa ka bobedi ka mahlakoreng a godimo le a fase. Go fana ka offset ya moswananoši, ya fase le ya godimo e no fa selo offset: { top: 10 }goba offset: { top: 10, bottom: 5 }. Šomiša mošomo ge o nyaka go bala ka go fetoga offset.
tebanyo mokgethi wa | noutu ya | jQuery elemente ya selo windowseo E laetša elemente ya nepišo ya sehlomathišo.

Mekgwa ya go šoma

.affix(options)

E dira gore diteng tša gago di šome bjalo ka diteng tše di kgomareditšwego. E amogela dikgetho tša boikhethelo object.

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

.affix('checkPosition')

E bala gape seemo sa sehlomathišo go ya ka ditekanyo, maemo, le maemo a go kgokološa a dielemente tša maleba. Diklase tša .affix, .affix-top, le .affix-bottomdi tlaleletšwa goba di tlošwa go tšwa go diteng tše di kgomareditšwego go ya ka seemo se sefsa. Mokgwa wo o swanetše go bitšwa neng le neng ge ditekanyo tša diteng tše di kgomareditšwego goba elemente ye e nepišitšwego di fetošwa, go netefatša gore diteng tše di kgomareditšwego di bewa gabotse.

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

Ditiragalo

Bootstrap o affix plugin pepesa liketsahalo tse seng kae bakeng sa hooking ka affix tshebetso.

Mohuta wa Tiragalo Tlhalošo
affix.bs.affix Tiragalo ye e thunya gateetee pele elemente e kgomareditšwe.
e kgomareditšwego.bs.affix Tiragalo ye e thuntšhwa ka morago ga ge elemente e kgomareditšwe.
affix-top.bs.affix Tiragalo ye e thunya gateetee pele elemente e kgomareditšwe-godimo.
e kgomareditšwego-godimo.bs.affix Tiragalo ye e thuntšhwa ka morago ga ge elemente e kgomareditšwe-godimo.
affix-bottom.bs.kgomaretši Tiragalo ye e thunya gateetee pele elemente e kgomareditšwe-fase.
e kgomareditšwego-tlase.bs.affix Tiragalo ye e thuntšhwa ka morago ga ge elemente e kgomareditšwe-fase.