Têgihiştinî

Kesane an berhevkirî

Pêvek dikarin bi rengek kesane (bi karanîna *.jspelên kesane yên Bootstrap bikar bînin), an jî bi yekcarî (bikaranîna bootstrap.jsan kêmkirina bootstrap.min.js).

Bikaranîna JavaScript-a berhevkirî

Hem bootstrap.jsû hem bootstrap.min.jsjî di pelek yekane de hemî pêvekan hene. Tenê yek tê de.

Girêdanên pêvekan

Hin pêvek û hêmanên CSS bi pêvekên din ve girêdayî ne. Ger hûn pêvekên kesane bi nav bikin, pê ewle bin ku hûn van girêdanan di belgeyan de kontrol bikin. Di heman demê de bala xwe bidin ku hemî pêvek bi jQuery ve girêdayî ne (ev tê vê wateyê ku jQuery divê berî pelên pêvekê were nav kirin). Bi me re şêwirbower.json bikin ku bibînin ka kîjan guhertoyên jQuery têne piştgirî kirin.

Taybetmendiyên daneyê

Hûn dikarin hemî pêvekên Bootstrap tenê bi navgîniya API-ya nîşankirinê bêyî nivîsandina yek rêzek JavaScript-ê bikar bînin. Ev API-a çîna yekem a Bootstrap-ê ye û dema ku pêvekek bikar tîne divê bala weya yekem be.

Wusa got, di hin rewşan de dibe ku were xwestin ku vê fonksiyonê were qut kirin. Ji ber vê yekê, em di heman demê de şiyana neçalakkirina API-a taybetmendiya daneyê peyda dikin bi veqetandina hemî bûyerên li ser cîhê navên belgeyê bi data-api. Ev bi vî rengî xuya dike:

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

Wekî din, ji bo armanckirina pêvekek taybetî, tenê navê pêvekê wekî navek bi navgîniya daneya-api re bi vî rengî têxin nav:

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

Tenê yek pêvek ji bo hêmanek bi taybetmendiyên daneyê

Taybetmendiyên daneyê ji pir pêvekan li ser heman elementê bikar neynin. Mînakî, bişkokek hem nikare xwedan amûrek be û hem jî modalek biguhezîne. Ji bo pêkanîna vê, hêmanek pêçandî bikar bînin.

API bername

Em her weha bawer dikin ku hûn dikarin hemî pêvekên Bootstrap bi tenê bi navgîniya JavaScript API-ê bikar bînin. Hemî API-yên gelemperî rêbazên yekane, zincîrbar in, û berhevoka ku li ser hatî kirin vedigerînin.

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

Pêdivî ye ku hemî rêbaz tiştek vebijarkek vebijarkî, rêzek ku rêbazek taybetî armanc dike, an tiştek (ya ku pêvekek bi tevgerek xwerû dest pê dike) qebûl bikin:

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

Her pêvek di heman demê de çêkerê xweya xav li ser Constructortaybetmendiyek eşkere dike: $.fn.popover.Constructor. Heke hûn dixwazin mînakek pêvekek taybetî bistînin, wê rasterast ji hêmanek bistînin: $('[rel="popover"]').data('popover').

Mîhengên xwerû

Hûn dikarin mîhengên xwerû ji bo pêvekê bi guheztina Constructor.DEFAULTStiştê pêvekê biguhezînin:

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

Nakokî tune

Carinan hewce ye ku pêvekên Bootstrap bi çarçoveyên UI yên din re bikar bînin. Di van şertan de, car caran dibe ku pevçûnên navan çêbibin. Ger ev diqewime, hûn dikarin gazî .noConflictpêveka ku hûn dixwazin nirxa wê vegerînin bikin.

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

Events

Bootstrap ji bo çalakiyên yekta yên piraniya pêvekan bûyerên xwerû peyda dike. Bi gelemperî, ev bi rengek nebinavkirî û paşverû têne - ku di destpêka bûyerekê de nefsbiçûk (mînak. show) di destpêka bûyerekê de, û forma wê ya dema borî (mînak. shown) bi qedandina kirdeyekê tê derxistin.

Ji 3.0.0-ê ve, hemî bûyerên Bootstrap bi navan têne navnîş kirin.

Hemî bûyerên bêdawî preventDefaultfonksiyonê peyda dikin. Ev şiyana rawestandina pêkanîna çalakiyek berî ku ew dest pê bike peyda dike.

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

Hejmarên Versiyon

Guhertoya her yek ji pêvekên jQuery yên Bootstrap dikare bi navgîniya avakera VERSIONpêvekê ve were gihîştin. Mînakî, ji bo pêveka tooltip:

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

Dema ku JavaScript neçalak be paşveçûnek taybetî tune

Pêvekên Bootstrap dema ku JavaScript neçalak be bi taybetî bi dilşikestî paşve naçin. Heke hûn di vê rewşê de ji ezmûna bikarhêner eleqedar dibin, bikar bînin <noscript>ku rewşê (û çawa JavaScript-ê ji nû ve çalak bikin) ji bikarhênerên xwe re rave bikin, û/an jî paşverûyên xweyên xwerû lê zêde bikin.

Pirtûkxaneyên partiya sêyemîn

Bootstrap bi fermî pirtûkxaneyên JavaScript-ê yên wekî Prototype an jQuery UI piştgirî nake. Tevî .noConflictbûyer û navan, dibe ku pirsgirêkên lihevhatinê hebin ku hûn hewce ne ku bi serê xwe rast bikin.

Transitions derbasbûn.js

Der barê veguherînan de

Ji bo bandorên veguherîna hêsan, transition.jscarekê bi pelên JS yên din re têxin nav xwe. Heke hûn berhevkirî (an kêmkirî) bikar tînin bootstrap.js, ne hewce ye ku hûn vê yekê têxin nav xwe - ew jixwe li wir e.

Di hundurê de çi ye

Transition.js ji bo transitionEndbûyeran û hem jî emulatorek veguherîna CSS-ê arîkarek bingehîn e. Ew ji hêla pêvekên din ve tê bikar anîn da ku piştgiriya veguheztina CSS-ê kontrol bike û veguheztinên daleqandî bigire.

Neçalakkirina veguherînan

Veguhastin dikarin li seranserê cîhanê bi karanîna pişka JavaScriptê ya jêrîn, ku divê piştî barkirin transition.js(an bootstrap.jsan jî bootstrap.min.js, li gorî rewşê) were neçalak kirin:

$.support.transition = false

Modals modal.js

Modal rêkûpêk in, lê maqûl in, diyalogê bi fonksiyonên herî hindik ên hewce û pêşnumayên biaqil dişoxilîne.

Gelek modalên vekirî nayê piştgirî kirin

Bawer bikin ku hûn modalek vekin dema ku yekî din hîn xuya ye. Nîşandana ji yekê zêdetir modal di carekê de koda xwerû hewce dike.

Cihkirina nîşankirina modal

Her gav hewl bidin ku koda HTML-a modalê di belgeya xwe de di pozîsyonek jorîn de bi cîh bikin da ku hêmanên din bandorê li xuyang û/an fonksiyona modal nekin.

Hişyariyên cîhaza mobîl

Di derbarê karanîna modalên li ser cîhazên mobîl de hin hişyarî hene. Ji bo hûragahiyan li belgeyên piştevaniya geroka me binêrin.

Ji ber ku HTML5 çawa semantîka xwe diyar dike, autofocustaybetmendiya HTML-ê di modalên Bootstrap de bandorek nake. Ji bo bidestxistina heman bandorê, hin JavaScript-a xwerû bikar bînin:

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

Examples

Mînaka statîk

Modalek çêkirî ya bi sernav, laş û komek çalakiyan di pêlavê de.

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

Modalek bi JavaScript-ê ve bi tikandina bişkoja jêrîn veguhezînin. Ew ê ji jorê rûpelê ve biçe xwarê û têkeve hundur.

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

Modalan bigihînin

Bê guman lê zêde bikin role="dialog"û aria-labelledby="...", sernavê modal, bi .modal, û role="document"bi .modal-dialogxwe re referans bikin.

Wekî din, hûn dikarin ravekirina diyaloga xweya modal bi aria-describedbyli ser re bidin .modal.

Veguheztina vîdyoyên YouTube

Veguheztina vîdyoyên YouTube-ê di modalan de JavaScriptek din hewce dike ku ne di Bootstrap-ê de ye da ku bixweber lîstin û bêtir rawestîne. Ji bo bêtir agahdarî vê posta alîkar a Stack Overflow bibînin.

Mezinahiyên Bijarî

Modal xwedan du mezinahiyên vebijarkî ne, ku bi navgîniya dersên guhêrbar ve têne peyda kirin ku li ser a .modal-dialog.

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

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

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

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

Anîmasyonê rakin

Ji bo modalên ku bi hêsanî xuya dikin ne ku di nav dîtinê de biqewimin, polê ji nîşankirina modaliya xwe derxînin .fade.

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

Bikaranîna pergala torê

Ji bo ku hûn ji pergala torê ya Bootstrap-ê di nav modalek de sûd werbigirin, tenê .rowdi hundurê de hêlîn bikin .modal-bodyû dûv re çînên pergala torê ya normal bikar bînin.

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

Xwedî komek bişkok hene ku hemî heman modalê, tenê bi naverokên piçûktir cûda vedigirin? Taybetmendiyênevent.relatedTarget HTML û HTML-êdata-* bikar bînin (dibe ku bi riya jQuery ) ve girêdayî naveroka modalê li gorî kîjan bişkojkê hatî klîk kirin biguhezînin. Ji bo hûrgulî li belgeyên Modal Events binêre relatedTarget,

...bişkokên bêtir...
<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)
})

Bikaranîna

Pêveka modal li gorî daxwazê, bi navgîniya taybetmendiyên daneyê an JavaScript-ê naveroka weya veşartî diguhezîne. Di heman demê de ew li ser guheztina tevgerê gerokê ya xwerû zêde .modal-opendike <body>û ji bo .modal-backdropku deverek klîk peyda bike ji bo rakirina modalên nîşankirî dema ku li derveyî modalê bitikîne peyda dike.

Bi taybetmendiyên daneyê

Bêyî nivîsandina JavaScriptê modalek çalak bikin. Li data-toggle="modal"ser hêmanek kontrolker, mîna bişkokek, bi hev re data-target="#foo"an jî href="#foo"ji bo veguheztina modalek taybetî were danîn.

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

Bi JavaScript

myModalBi yek rêzek JavaScript re modalek bi id re bang bikin :

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

Vebijêrk

Vebijark dikarin bi taybetmendiyên daneyan an JavaScriptê ve werin derbas kirin. Ji bo taybetmendiyên daneyê, navê vebijarkê lê zêde bikin data-, wekî di data-backdrop="".

Nav awa destçûnî terîf
paşperdeya boolean an string'static' rast Hêmanek modal-backdrop tê de ye. Wekî din, staticji bo paşnavek ku modalê li ser klîk negire diyar bikin.
kilawye boolean rast Dema ku bişkojka revê tê pêlkirin modalê digire
rêdan boolean rast Dema ku tê destpêkirin modalê nîşan dide.
dûr şop şaş

Ev vebijêrk ji v3.3.0-ê ve hatî hilweşandin û di v4 de hate rakirin. Em li şûna vê yekê pêşniyar dikin ku şablonek ji hêla xerîdar an çarçoveyek girêdana daneyê bikar bînin, an ji xwe re gazî jQuery.load bikin.

Ger URLek dûr were peyda kirin, naverok dê yek carî bi loadrêbaza jQuery were barkirin û di .modal-contentdiv-ê de were derz kirin. Heke hûn data-api bikar tînin, hûn dikarin wekî din hreftaybetmendiyê bikar bînin da ku çavkaniya dûr diyar bikin. Mînaka vê li jêr tê nîşandan:

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

Methods

Naveroka we wekî modal çalak dike. Vebijarkek vebijarkî qebûl objectdike.

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

Modalek bi destan diguhezîne. Berî ku modal bi rastî were xuyang kirin an veşartin (ango berî ku bûyer shown.bs.modalan hidden.bs.modalbûyer çêbibe) vedigere bangkerê.

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

Bi destan modalek vedike. Berî ku modal bi rastî were xuyang kirin (ango berî ku shown.bs.modalbûyer çêbibe) vedigere bangewazî.

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

Bi destan modalek vedişêre. Berî ku modal bi rastî veşêre (ango berî ku hidden.bs.modalbûyer çêbibe) vedigere bangewazî.

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

Pozîsyona modalê ji nû ve sererast dike da ku li hember çîçekek gerokek xuya bibe, ev yek dê modalê ber bi çepê ve biçe.

Tenê pêdivî ye ku dema ku bilindahiya modalê dema ku vekirî ye diguhezîne.

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

Events

Dersa modal a Bootstrap çend bûyeran ji bo girêdana fonksiyonên modal eşkere dike.

Hemî bûyerên modal li modal bixwe (ango li <div class="modal">).

Cureyê bûyerê Terîf
nîşan bide.bs.modal showDema ku rêbaza nimûneyê tê gazî kirin ev bûyer tavilê dişewite. Ger ji ber klîkekê be, hêmana klîkkirî wekî relatedTargettaybetmendiya bûyerê peyda dibe.
nîşan dan.bs.modal Dema ku modal ji bikarhênerê re xuya bibe ev bûyer tê şewitandin (dê li benda bidawîbûna veguheztinên CSS bimîne). Ger ji ber klîkekê be, hêmana klîkkirî wekî relatedTargettaybetmendiya bûyerê peyda dibe.
veşêre.bs.modal hideDema ku rêbaza nimûneyê hate gazîkirin , ev bûyer tavilê tê şewitandin .
veşartî.bs.modal Dema ku modal ji bikarhênerê veşartî qediya ev bûyer tê şewitandin (dê li benda bidawîbûna veguheztinên CSS bimîne).
barkirin.bs.modal Dema ku modal bi karanîna remotevebijarkê naverok barkiriye ev bûyer tê şewitandin.
$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

Dropdowns dropdown.js

Bi vê pêveka sade, di nav de navbar, tab, û heban, pêşekên dakêşanê li hema hema her tiştî zêde bikin.

Di navbarekê de

Di nav heban de

Bi riya taybetmendiyên daneyê an JavaScriptê, pêveka dakêşanê naveroka veşartî (menekên daketî) bi guheztina .openpola li ser xala navnîşa dêûbav diguhezîne.

Li ser cîhazên desta, vekirina peldankek .dropdown-backdropji bo girtina pêşekên dakêşanê dema ku li derveyî menuyê tê tikandin, deverek wekî deverek lêzêde dike, pêdivîyek ji bo piştgirîya rast a iOS. Ev tê vê wateyê ku veguheztina ji pêşekek dakêşanê ya vekirî ji pêşekek dakêşanê ya cihêreng pêvekek zêde li ser mobîl hewce dike.

Nîşe: data-toggle="dropdown"Taybetmendî ji bo girtina pêşekên dakêşanê di astek serîlêdanê de pê ve girêdayî ye, ji ber vê yekê ramanek baş e ku hûn her gav wê bikar bînin.

Bi taybetmendiyên daneyê

Ji data-toggle="dropdown"bo guheztina peldankekê li lînkek an bişkokek zêde bikin.

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

Ji bo ku URLan bi bişkokên lînkê saxlem bihêlin, li data-targetşûna 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>

Bi JavaScript

Bi navgîniya JavaScript-ê ve bang bikin:

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

data-toggle="dropdown"hîn jî pêwîst e

Her çiqas hûn bi JavaScript-ê ve gazî daketina xwe bikin an li şûna data-api-ê bikar bînin, data-toggle="dropdown"pêdivî ye ku her gav li ser hêmana dakêşanê hebe.

Netû

Menûya dakêşanê ya navbarek diyarkirî an navîgasyonek tabloyê vedike.

Hemî bûyerên dakêşanê li .dropdown-menuhêmana dêûbavê '' têne avêtin.

Hemî bûyerên dakêşanê xwedan relatedTargettaybetmendiyek e, ku nirxa wê hêmana lengerê ya guhezbar e.

Cureyê bûyerê Terîf
nîşan bide.bs.dropdown Dema ku rêbaza mînaka nîşandanê tê gazî kirin, ev bûyer tavilê dişewite.
nîşan dan.bs.dropdown Dema ku dakêşana ji bikarhênerê re xuya bibe (dê li benda veguheztinên CSS-ê bisekine, biqede), ev bûyer tê şewitandin.
veşêre.bs.dropdown Dema ku rêbaza mînaka veşartinê hate gazî kirin, ev bûyer tavilê tê şewitandin.
veşartî.bs.dropdown Ev bûyer dema ku dakêşana ku ji bikarhênerê veşartî xilas bû (dê li benda veguheztinên CSS-ê bisekine, biqede) tê şewitandin.
$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})

ScrollSpy scrollspy.js

Mînak di navbarê de

Pêveka ScrollSpy ji bo nûvekirina bixweber armancên nav li ser bingeha pozîsyona gerokê ye. Li qada li jêr navbarê bigerin û li guhertina çîna çalak temaşe bikin. Dê jêr-tiştên daketî jî werin ronî kirin.

@rûn

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi ber wan qui firotin. Tumblr farm-to-table mafên bisîkletan çi be. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui we belkî li ser wan nebihîstiye û fona pêbaweriya cardigan culpa biodiesel wes anderson estetîk. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

@mdo

Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork rih. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat çar loko nisi, ea helvetica nulla carles. Kamyona xwarinê ya cosby ya tattookirî, vinyl quis non freegan ya mcsweeney. Lo-fi wes anderson +1 sartorial. Karlês ne estetîk quis gentrify. Brooklyn adipisicing craft beer cîgirê keytar deserunt.

yek

Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo mafên bisîkletan adipisicing banh mi, velit ea sunt asta next locavore yek-eslê qehwe li magna veniam. Vînyl id jiyana bilind, echo park consequat quis aliquip banh mi pitchfork. Vero VHS edipisicing. Consectetur nisi DIY minim qasid bag. Cred ex in, domdar delectus consectetur fanny pack iphone.

du

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 bag marfa her tiştê ku kamyonek xwarinê delectus. Sapiente synth id assumenda. Locavore sed helvetica klîşeya îroniya, birûskên ku we belkî li ser wan nebihîstiye bi hoodie-free gluten lo-fi fap aliquip. Beriya ku wan bifroşin, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan amade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ulamco thundercats.

Bikaranîna

Navê Bootstrap hewce dike

Scrollspy niha ji bo ronîkirina rast a girêdanên çalak pêdivî bi karanîna hêmanek navokê ya Bootstrap heye .

Armancên nasnameyê yên çareserkirî hewce ne

Pêdivî ye ku girêdanên navbar xwedî armancên nasnameyê yên çareserkirî bin. Mînakî, <a href="#home">home</a>pêdivî ye ku bi tiştek di DOM-ê de mîna <div id="home"></div>.

Hêmanên ne- :visiblearmanc paşguh kirin

Hêmanên mebest ên ku ne :visibleli gorî jQuery ne dê werin paşguh kirin û tiştên navên wan ên têkildar dê çu carî neyên ronî kirin.

Pêdiviya pozîsyona têkildar heye

Rêbaza pêkanînê ferq nake, scrollspy hewce dike ku position: relative;li ser hêmana ku hûn li ser sîxuriyê dikin bikar bînin. Di pir rewşan de ev e <body>. Dema scrollspying li ser hêmanên din ji bilî <body>, bawer bin ku xwedî heightset û overflow-y: scroll;sepandin.

Bi taybetmendiyên daneyê

Ji bo ku bi hêsanî behreya scrollspy li navîgasyona xweya jorîn zêde data-spy="scroll"bikin, li hêmana ku hûn dixwazin bişopînin lê zêde bikin (bi gelemperî ev dê bibe <body>). Dûv re data-targettaybetmendiyê bi ID an pola hêmana dêûbavê ya her .navpêkhateyek Bootstrap ve zêde bikin.

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>

Bi JavaScript

Piştî ku position: relative;CSS-ya xwe zêde kirin, bi JavaScript-ê re bang bikin scrollspy:

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

Methods

.scrollspy('refresh')

Dema ku scrollspy digel lê zêdekirin an rakirina hêmanan ji DOM-ê re bikar bînin, hûn ê hewce bikin ku rêbaza nûvekirinê ya weha bang bikin:

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

Vebijêrk

Vebijark dikarin bi taybetmendiyên daneyan an JavaScriptê ve werin derbas kirin. Ji bo taybetmendiyên daneyê, navê vebijarkê lê zêde bikin data-, wekî di data-offset="".

Nav awa destçûnî terîf
offset jimare 10 Pixelên ku ji jor ve têne veqetandin dema ku pozîsyona gerokê hesab dikin.

Events

Cureyê bûyerê Terîf
activate.bs.scrollspy Dema ku babetek nû ji hêla scrollspy ve tê çalak kirin ev bûyer dişewite.
$('#myScrollspy').on('activate.bs.scrollspy', function () {
  // do something…
})

tab.js tab.js

Tabloyên nimûne

Karbidestiya tabê ya bilez û dînamîkî lê zêde bikin da ku di nav paceyên naveroka herêmî de derbas bibin, tewra bi navgîniya pêşekên dakêşanê. Tabên hêlîn nayên piştgirî kirin.

Denim raw belkî we nebihîstiye ji wan jean shorts Austin. Nesciunt tofu stumptown aliqua, paqijkirina masterê synth retro. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip cîhê salvia cillum iphone. Seitan aliquip quis cardigan kincên amerîkî, qesab 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.

Navîgasyon tabloyan dirêj dike

Ev pêvek hêmana navîgasyonê ya tabloyê dirêj dike da ku deverên tabloyê zêde bike.

Bikaranîna

Bi JavaScript-ê tabloyên tabloyê çalak bikin (pêdivî ye ku her tabloyek kesane were çalak kirin):

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

Hûn dikarin tabloyên kesane bi çend awayan çalak bikin:

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

Markup

Hûn dikarin navîgasyonek tabloyek an pileyek bêyî nivîsandina JavaScriptê bi tenê diyar kirin data-toggle="tab"an data-toggle="pill"li ser hêmanek çalak bikin. Zêdekirina çînên û li tabê dê şêwaza tabloya Bootstrap bicîh bîne , lê zêdekirina çînên û dê şêwaza navheban bicîh bîne .nav-tabsulnavnav-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>

Bandora fade

Ji bo ku tabloyan bişewitînin, li her yekê zêde .fadebikin .tab-pane. Pêdivî ye ku tabloya yekem jî pêdivî .inye ku naveroka destpêkê xuya bike.

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

Methods

$().tab

Elementek tabê û konteynir naverokê çalak dike. Tabê pêdivî ye ku di DOM-ê de girêkek konteynerê data-targetan jî armancek hebe. hrefDi mînakên li jor de, tabloyên <a>bi data-toggle="tab"taybetmendiyan in.

.tab('show')

Tabloya diyarkirî hildibijêre û naveroka wê ya têkildar nîşan dide. Tebeke din a ku berê hatibû hilbijartin, nayê hilbijartin û naveroka wê ya têkildar tê veşartin. Berî ku tablo bi rastî were xuyang kirin (ango berî ku shown.bs.tabbûyer çêbibe) vedigere bangewazî.

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

Events

Dema ku tabloyek nû nîşan dide, bûyer bi rêza jêrîn dişewitin:

  1. hide.bs.tab(li ser tabloya çalak a heyî)
  2. show.bs.tab(li ser tabloya ku tê xuyang kirin)
  3. hidden.bs.tab(li ser tabloya çalak a berê, heman wekî hide.bs.tabbûyerê)
  4. shown.bs.tab(li ser tabloya ku nû-çalak hatî xuyang kirin, heman wekî show.bs.tabbûyerê)

Ger tu tablo jixwe çalak nebûya, wê hingê hide.bs.tabû hidden.bs.tabbûyer nayên avêtin.

Cureyê bûyerê Terîf
nîşan bide.bs.tab Ev bûyer di pêşandana tabloyê de dişewite, lê berî ku tabloya nû were xuyang kirin. Bi rêzdarî tabloya çalak û tabloya çalak a berê (heke hebe) bikar bînin event.targetû bikin hedef.event.relatedTarget
nîşan dan.bs.tab Ev bûyer piştî ku tabloyek hate pêşandan li ser pêşandana tabê derdikeve. Bi rêzdarî tabloya çalak û tabloya çalak a berê (heke hebe) bikar bînin event.targetû bikin hedef.event.relatedTarget
veşêre.bs.tab Dema ku tabloyek nû were xuyang kirin ev bûyer dişewite (û bi vî rengî tabloya çalak a berê were veşartin). Bi rêzê ve tabloya aktîf a heyî û tabloya nû ya zû-çalak bibe event.targetû armanc bikin.event.relatedTarget
veşartî.bs.tab Ev bûyer piştî ku tabloyek nû tê xuyang kirin dişewite (û bi vî rengî tabloya çalak a berê tê veşartin). Bi rêzê ve tabloya çalak a berê û tabloya nû ya çalak bikar bînin event.targetû bikin hedef.event.relatedTarget
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})

Tooltips tooltip.js

Ji pêveka hêja ya jQuery.tipsy ku ji hêla Jason Frame ve hatî nivîsandin ve hatî îlhama kirin; Tooltips guhertoyek nûvekirî ye, ku xwe dispêre wêneyan, CSS3 ji bo anîmasyon, û taybetmendiyên daneyan ji bo hilanîna sernavên herêmî bikar tîne.

Sernavên amûran ên bi sernavên zero-dirêj qet nayên xuyang kirin.

Examples

Li ser zencîreyên jêrîn bihêlin ku hûn serişteyên amûran bibînin:

Pantorên teng ên asta din keffiyeh dibe ku we ji wan nebihîstiye. Bûka wêneyan rîh denim raw letterpress vegan qasid bag stumptown. Cil û bergên Amerîkî yên 8-bit quinoa domdar a mcsweeney ji çandiniyê-to-maseyê, xwedan şamek vinyl a terry richardson e. Stûpê rîh, kardigan banh mi lomo birûskên. Tofu biodiesel williamsburg marfa, çar loko mcsweeney's chambray vegan paqij dike. A artisan bi rastî îronîk çi keytar , dîmendera farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin coffee viral.

Tîpa amûra statîk

Çar vebijark hene: jor, rast, jêr û çepê rêzkirî.

Çar rê

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

Vebijêrk-li fonksiyonê

Ji ber sedemên performansê, Tooltip û Popover data-apis bijartî ne, tê vê wateyê ku divê hûn bi xwe wan dest pê bikin .

Yek rê ji bo destpêkirina hemî serişteyên amûran li ser rûpelek dê ev be ku hûn wan li gorî taybetmendiya xwe data-togglehilbijêrin:

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

Bikaranîna

Pêveka tooltip li gorî daxwazê ​​naverok û nîşankirinê çêdike, û ji hêla xwerû ve şîretên amûran li dû hêmana wan a tîrêjê bi cîh dike.

Serişteya amûrê bi JavaScriptê vekin:

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

Markup

Nîşana pêdivî ya ji bo serişteyek amûrek tenê datataybetmendiyek e û titleli ser hêmana HTML-ê hûn dixwazin şîreta amûrekê hebe. Nîşana hilberandî ya amûrek pir hêsan e, her çend ew pozîsyonek hewce dike (ji hêla xwerû, ji tophêla pêvekê ve hatî saz kirin).

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

Girêdanên pir-hêl

Carinan hûn dixwazin pêvekek amûrek li hîpergirêdanek ku pir rêzan pêça dike zêde bikin. Tevgera xwerû ya pêveka tooltip ev e ku wê navendek horizontî û vertîkal bike. Li lengerên white-space: nowrap;xwe zêde bikin da ku ji vê yekê dûr bikevin.

Serişteyên amûran ên di komên bişkok, komên têketinê û tabloyan de mîhengek taybetî hewce dike

Dema ku şîretên amûran li ser hêmanên di nav a .btn-groupan an .input-group, an jî li ser hêmanên girêdayî tabloyê ( <td>, <th>, <tr>, , <thead>, <tbody>, <tfoot>) bikar tînin, hûn neçar in vebijarkê container: 'body'(li jêr hatî belge kirin) diyar bikin da ku ji bandorên alî yên nexwestî dûr bikevin (wek mînak hêman berfirehtir dibe û/ an dema ku şîreta amûrê tê kişandin quncikên xwe yên dorpêçkirî winda bike).

Hewl nedin ku serişteyên amûran li ser hêmanên veşartî nîşan bidin

Dema $(...).tooltip('show')ku hêmana mebest be bangkirin display: none;dê bibe sedem ku şîreta amûrê bi xeletî were danîn.

Ji bo bikarhênerên klavyeyê û teknolojiya arîkar serişteyên amûran ên gihîştî

Ji bo bikarhênerên ku bi klavyeyekê rêve dibin, û bi taybetî bikarhênerên teknolojiyên arîkar, divê hûn tenê şîretên amûran li hêmanên ku bi klavyeyê ve girêdayî ne, mîna lînkan, kontrolên formê, an hêmanek keyfî bi tabindex="0"taybetmendiyekê zêde bikin.

Pêşniyarên amûran ên li ser hêmanên neçalak hêmanên pêçandî hewce dikin

Ji bo lêzêdekirina amûrekê li hêmanekê disabledan jî .disabledhêmanekê, hêmanê têxin hundurê a <div>û li <div>şûna wê şîreta amûrê bi cîh bikin.

Vebijêrk

Vebijark dikarin bi taybetmendiyên daneyan an JavaScriptê ve werin derbas kirin. Ji bo taybetmendiyên daneyê, navê vebijarkê lê zêde bikin data-, wekî di data-animation="".

Nav Awa Destçûnî Terîf
jayandarî boolean rast Veguheztinek fade ya CSS-ê li ser amûrê bicîh bikin
têrr string | şaş şaş

Serişteya amûrê li hêmanek taybetî vedike. Mînak container: 'body':. Ev vebijark bi taybetî bikêrhatî ye ku ew dihêle hûn şîreta amûrê di herikîna belgeyê de li nêzikî hêmana vekêşanê bi cih bikin - ku dê rê li ber ku şîreta amûrê di dema mezinbûna pencereyê de ji hêmana vekêşanê dûr nekeve.

derengxistin hejmar | tişt 0

Dereng nîşankirin û veşartina şîreta amûrê (ms) - ji bo celebê destana destan nayê sepandin

Ger jimarek were peyda kirin, dereng hem ji bo veşêrin/nîşandanê tê sepandin

Struktura objektê ev e:delay: { "show": 500, "hide": 100 }

html boolean şaş HTML-ê têxe nav şîreta amûrê. Ger xelet be, textdê rêbaza jQuery were bikar anîn da ku naverokê têxe nav DOM-ê. Heke hûn ji êrîşên XSS-ê ditirsin, nivîsê bikar bînin.
danîn string | karî 'lûtik'

Meriv çawa şîreta amûrê bi cih dike - top | binê | çep | rast | auto.
Dema ku "oto" were diyar kirin, ew ê bi dînamîk veguhezîne şîreta amûrê. Mînakî, heke cîhkirin "xweber çep" be, gava ku mimkun be dê serişteya amûrê li çepê nîşan bide, wekî din ew ê rast nîşan bide.

Dema ku fonksiyonek ji bo destnîşankirina cîhê tê bikar anîn, ew bi girêka amûrê DOM-ê wekî argumana wê ya yekem û hêmana vekêşanê wekî girêka DOM-ê wekî duyemîn tê gotin. Têkilî thisji bo nimûneya tooltip tête danîn.

hilbijêr ben şaş Ger hilbijarkek were peyda kirin, dê tiştên şîreta amûrê ji armancên diyarkirî re werin şandin. Di pratîkê de, ev tê bikar anîn da ku naveroka HTML-a dînamîkî çalak bike ku serişteyên amûran lê zêde bike. Vê û mînakek agahdar bibînin .
şablon ben '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'

Bingeha HTML-ê ji bo ku dema çêkirina şîreta amûrê bikar bîne.

The tooltip's titledê di nav de were derzî kirin .tooltip-inner.

.tooltip-arrowdê bibe tîra amûrê.

Pêdivî ye ku hêmana pêçanê ya herî derveyî .tooltipçîna xwe hebe.

nav string | karî ''

titleGer taybetmendî tune be nirxa sernavê ya xwerû.

Ger fonksiyonek were dayîn, ew ê bi thiskoma referansa xwe re ji hêmana ku pêveka amûrê pê ve girêdayî ye were gazî kirin.

kişok ben 'fokusa hilavêtinê' Çawa tooltip tê derxistin - bikirtînin | hover | fokus | destî. Hûn dikarin gelek teşqeleyan derbas bikin; wan bi cihekî veqetînin. manualnikare bi ti kêşek din re were hev kirin.
viewport string | object | karî { hilbijêr: 'beden', padding: 0 }

Tîpa amûrê di nav sînorên vê hêmanê de digire. Mînak: viewport: '#viewport'an{ "selector": "#viewport", "padding": 0 }

Ger fonksiyonek were dayîn, ew bi hêmana vekêşanê ya DOM-ê wekî argumana wê ya yekane tê gotin. Têkilî thisji bo nimûneya tooltip tête danîn.

Taybetmendiyên daneyê ji bo serişteyên amûran ên kesane

Vebijarkên ji bo serişteyên amûran ên takekesî dikarin bi karanîna taybetmendiyên daneyê, wekî ku li jor hatî ravekirin, bi alternatîf werin destnîşan kirin.

Methods

$().tooltip(options)

Pêşkêşkarek amûrek bi berhevokek elementê ve girêdide.

.tooltip('show')

Tîpa amûrek hêmanek eşkere dike. Berî ku şîreta amûrê bi rastî were xuyang kirin (ango berî ku shown.bs.tooltipbûyer çêbibe) vedigere bangewazî. Ev wekî "bi destan" vekêşana amûrê tê hesibandin. Sernavên amûran ên bi sernavên zero-dirêj qet nayên xuyang kirin.

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

.tooltip('hide')

Tîpa amûrekê vedişêre. Berî ku şîreta amûrê bi rastî veşêre (ango berî ku hidden.bs.tooltipbûyer çêbibe) vedigere bangkerê. Ev wekî "bi destan" vekêşana amûrê tê hesibandin.

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

.tooltip('toggle')

Destûra amûrek hêmanek vedike. Berî ku şîreta amûrê bi rastî were xuyang kirin an veşartin (ango berî ku bûyer shown.bs.tooltipan hidden.bs.tooltipbûyer çêbibe) vedigere bangkerê. Ev wekî "bi destan" vekêşana amûrê tê hesibandin.

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

.tooltip('destroy')

Tîpa amûrekê vedişêre û hilweşîne. Pêşniyarên amûran ên ku delegasyonê bikar tînin (yên ku bi vebijarkê têne afirandin ) selectornekarin bi rengekî ferdî li ser hêmanên nifûsê werin hilweşandin.

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

Events

Cureyê bûyerê Terîf
nîşan bide.bs.tooltip showDema ku rêbaza nimûneyê tê gazî kirin ev bûyer tavilê dişewite.
nîşan dan.bs.tooltip Dema ku şîreta amûrê ji bikarhênerê re xuya bibe ev bûyer tê şewitandin (dê li bendê bimîne ku veguheztinên CSS temam bibin).
veşêre.bs.tooltip hideDema ku rêbaza nimûneyê hate gazîkirin , ev bûyer tavilê tê şewitandin .
veşartî.bs.tooltip Dema ku şîreta amûrê ji bikarhênerê veşartî qediya ev bûyer tê şewitandin (dê li bendê bimîne ku veguheztinên CSS temam bibin).
xistin.bs.tooltip Ev bûyer piştî show.bs.tooltipbûyera dema ku şablonê tooltip li DOM-ê hate zêdekirin tê şewitandin.
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})

Popovers popover.js

Ji bo agahdariya duyemîn xanî li her hêmanek naverokê, mîna yên li ser iPad-ê, naverokên piçûk zêde bikin.

Popoverên ku hem sernav û hem jî naveroka wan sifir-dirêj in qet nayên xuyang kirin.

Girêdana pêvekê

Popover hewce dike ku pêveka tooltip -ê di guhertoya weya Bootstrap-ê de were girtin.

Vebijêrk-li fonksiyonê

Ji ber sedemên performansê, Tooltip û Popover data-apis bijartî ne, tê vê wateyê ku divê hûn bi xwe wan dest pê bikin .

Yek rê ji bo destpêkirina hemî popoverên li ser rûpelek dê ev be ku hûn wan li gorî taybetmendiya xwe data-togglehilbijêrin:

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

Popoverên di komên bişkok, komên têketinê û tabloyan de mîhengek taybetî hewce dike

Dema ku popoverên li ser hêmanên di hundurê .btn-groupan an an an .input-groupjî li ser hêmanên girêdayî tabloyê ( <td>, <th>, <tr>, , <thead>, <tbody>, <tfoot>), bikar bînin, hûn neçar in vebijarkê container: 'body'(li jêr hatî belge kirin) diyar bikin da ku ji bandorên alî yên nedilxwaz dûr bikevin (wek mînak hêman berfirehtir dibe û/ an dema ku popover tê dest pê kirin quncikên xwe yên dorpêçkirî winda bike).

Hewl nedin ku popoveran li ser hêmanên veşartî nîşan bidin

$(...).popover('show')Dema ku hêmana mebest be bang kirin dê bibe sedem ku popover display: none;bi xeletî were danîn.

Popoverên li ser hêmanên astengdar hêmanên pêçandî hewce dikin

Ji bo ku popoverek li hêmanek disabledan .disabledhêmanek zêde bikin, hêmanê têxin hundurê a <div>û li şûna wê popoverê bicîh <div>bikin.

Girêdanên pir-hêl

Carinan hûn dixwazin popoverek li hîperlîndekek ku gelek rêzan dipêçe zêde bikin. Tevgera xwerû ya pêveka popover ev e ku wê navendek horizontî û vertîkal bike. Li lengerên white-space: nowrap;xwe zêde bikin da ku ji vê yekê dûr bikevin.

Examples

Popover statîk

Çar vebijark hene: jor, rast, jêr û çepê rêzkirî.

Popover top

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

Popover rast

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

Popover bottom

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

Popover derket

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

Demo zindî

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

Çar rê

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

Li ser klîkek paşîn veqetînin

Tetikê bikar focusbînin da ku popoveran li ser klîkek din a ku bikarhêner çêdike berde.

Nîşanek taybetî ji bo rakirina-li-pêş-klîk hewce ye

Ji bo behremendiya xaça gerok û çar-platformê ya rast, divê hûn tagê bikar bînin , <a>ne tag<button> , û her weha divê hûn taybetmendiyê role="button"û têxin nav xwe.tabindex

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

Bikaranîna

Bi JavaScriptê popovers çalak bikin:

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

Vebijêrk

Vebijark dikarin bi taybetmendiyên daneyan an JavaScriptê ve werin derbas kirin. Ji bo taybetmendiyên daneyê, navê vebijarkê lê zêde bikin data-, wekî di data-animation="".

Nav Awa Destçûnî Terîf
jayandarî boolean rast Veguheztinek fade ya CSS-ê li popoverê bicîh bikin
têrr string | şaş şaş

Popoverê li hêmanek taybetî vedike. Mînak container: 'body':. Ev vebijark bi taybetî bikêrhatî ye ku ew dihêle hûn popoverê di herikîna belgeyê de li nêzî hêmana vekêşanê bi cih bikin - ku dê rê li ber ku popover di dema mezinbûna pencereyê de ji hêmana vekêşanê dûr nekeve.

dilşad string | karî ''

data-contentHeke taybetmendî tune be nirxa naverokê ya xwerû.

Ger fonksiyonek were dayîn, ew ê bi thiskoma referansa xwe re ji hêmana ku popover pê ve girêdayî ye were gazî kirin.

derengxistin hejmar | tişt 0

Dereng xuyangkirin û veşartina popover (ms) - ji bo celebê destkêşana destan nayê sepandin

Ger jimarek were peyda kirin, dereng hem ji bo veşêrin/nîşandanê tê sepandin

Struktura objektê ev e:delay: { "show": 500, "hide": 100 }

html boolean şaş HTML-ê têxe nav popover. Ger xelet be, textdê rêbaza jQuery were bikar anîn da ku naverokê têxe nav DOM-ê. Heke hûn ji êrîşên XSS-ê ditirsin, nivîsê bikar bînin.
danîn string | karî 'rast'

Meriv çawa popoverê bi cih dike - top | binê | çep | rast | auto.
Dema ku "auto" tête diyar kirin, ew ê bi dînamîk veguhezîne popover. Mînakî, heke cîh "xweber çep" be, popover gava ku gengaz be dê li çepê nîşan bide, wekî din ew ê rast nîşan bide.

Dema ku fonksiyonek ji bo destnîşankirina cîhê tê bikar anîn, ew bi girêka DOM-a popover wekî argumana wê ya yekem û hêmana vekêşana girê DOM-ê wekî duyemîn tê gotin. Çarçove thisli ser mînaka popoverê tête danîn.

hilbijêr ben şaş Ger hilbijêrek were peyda kirin, dê tiştên popover ji armancên diyarkirî re werin veguheztin. Di pratîkê de, ev tê bikar anîn da ku naveroka HTML-ê ya dînamîkî bikar bîne da ku popovers lê zêde bibin. Vê û mînakek agahdar bibînin .
şablon ben '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'

Bingeha HTML-ê ku dema afirandina popover bikar bînin bikar bînin.

The popover's titledê bê derzîkirin .popover-title.

The popover's contentdê bê derzîkirin .popover-content.

.arrowdê bibe tîra popoverê.

Pêdivî ye ku hêmana pêçanê ya herî derveyî .popoverçîna xwe hebe.

nav string | karî ''

titleGer taybetmendî tune be nirxa sernavê ya xwerû.

Ger fonksiyonek were dayîn, ew ê bi thiskoma referansa xwe re ji hêmana ku popover pê ve girêdayî ye were gazî kirin.

kişok ben 'bitikîne' Popover çawa tê derxistin - bikirtînin | hover | fokus | destî. Hûn dikarin gelek teşqeleyan derbas bikin; wan bi cihekî veqetînin. manualnikare bi ti kêşek din re were hev kirin.
viewport string | object | karî { hilbijêr: 'beden', padding: 0 }

Popover di nav sînorên vê hêmanê de digire. Mînak: viewport: '#viewport'an{ "selector": "#viewport", "padding": 0 }

Ger fonksiyonek were dayîn, ew bi hêmana vekêşanê ya DOM-ê wekî argumana wê ya yekane tê gotin. Çarçove thisli ser mînaka popoverê tête danîn.

Taybetmendiyên daneyê ji bo popoverên kesane

Vebijarkên ji bo popoverên takekesî dikare wekî ku li jor hatî ravekirin bi karanîna taybetmendiyên daneyê ve were destnîşankirin.

Methods

$().popover(options)

Ji bo berhevokek hêmanan popoveran dide destpêkirin.

.popover('show')

Popovera hêmanek eşkere dike. Berî ku popover bi rastî were xuyang kirin (ango berî ku shown.bs.popoverbûyer çêbibe) vedigere bangewazî. Ev wekî "bi destan" vekêşana popover tê hesibandin. Popoverên ku hem sernav û hem jî naveroka wan sifir-dirêj in qet nayên xuyang kirin.

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

.popover('hide')

Hêmanek popover vedişêre. Berî ku popover bi rastî veşêre (ango berî ku hidden.bs.popoverbûyer çêbibe) vedigere bangkerê. Ev wekî "bi destan" vekêşana popover tê hesibandin.

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

.popover('toggle')

Pîvana hêmanekê vedike. Berî ku popover bi rastî were xuyang kirin an veşartin (ango berî ku bûyer shown.bs.popoveran hidden.bs.popoverbûyer çêbibe) vedigere bangkerê. Ev wekî "bi destan" vekêşana popover tê hesibandin.

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

.popover('destroy')

Hêmanek popover vedişêre û hilweşîne. Popoverên ku delegasyonê bikar tînin (yên ku bi karanîna vebijarkê selectortêne afirandin ) nekarin bi rengekî ferdî li ser hêmanên nifûsê werin hilweşandin.

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

Events

Cureyê bûyerê Terîf
nîşan bide.bs.popover showDema ku rêbaza nimûneyê tê gazî kirin ev bûyer tavilê dişewite.
nîşan dan.bs.popover Dema ku popover ji bikarhêner re xuya bibe ev bûyer tê şewitandin (dê li bendê bimîne ku veguheztinên CSS biqede).
veşêre.bs.popover hideDema ku rêbaza nimûneyê hate gazîkirin , ev bûyer tavilê tê şewitandin .
veşartî.bs.popover Dema ku popover ji bikarhênerê veşartî xilas bû ev bûyer tê şewitandin (dê li bendê bimîne ku veguherînên CSS temam bibin).
xistin.bs.popover Ev bûyer piştî show.bs.popoverbûyerê dema ku şablonê popover li DOM-ê hate zêdekirin tê şewitandin.
$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})

Alert messages alert.js

Mînak alerts

Bi vê pêvekê re fonksiyona betalkirinê li hemî peyamên hişyariyê zêde bikin.

Dema ku .closebişkokek bikar tîne, divê ew zaroka yekem be .alert-dismissibleû naveroka nivîsê di nîşankirinê de neyê pêşiya wê.

Bikaranîna

Tenê data-dismiss="alert"li bişkoka xweya nêzîk zêde bikin da ku bixweber fonksiyonek girtina hişyariyê bidin. Girtina hişyariyek wê ji DOM-ê derdixe.

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

Ji bo ku hişyariyên we dema girtina anîmasyonê bikar bînin, pê ewle bin ku ew xwedî .fadeû.in dersên berê li wan hatine sepandin.

Methods

$().alert()

Ji bo bûyerên klîk ên li ser hêmanên dûv ku xwedî data-dismiss="alert"taybetmendiyê ne, hişyariyek dike. (Gava ku destpêkirina xweseriya data-api bikar bînin ne hewce ye.)

$().alert('close')

Bi rakirina wê ji DOM-ê hişyariyek digire. Ger çînên .fadeû .inli ser hêmanê hebin, berî ku were rakirin hişyar dê biqede.

Events

Pêveka hişyariya Bootstrap çend bûyeran ji bo girêdana fonksiyona hişyariyê eşkere dike.

Cureyê bûyerê Terîf
girtin.bs.hişyar closeDema ku rêbaza nimûneyê tê gazî kirin ev bûyer tavilê dişewite.
girtî.bs.hişyar Dema ku hişyarî hat girtin ev bûyer tê şewitandin (dê li benda bidawîbûna veguheztinên CSS bimîne).
$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})

ButtonsBişkokên

Zêdetir bi bişkokan bikin. Rewşên bişkojka kontrol bikin an jî ji bo hêmanên zêdetir ên mîna darikên amûran komên bişkokan biafirînin.

Lihevhatina cross-browser

Firefox di nav barkirina rûpelan de rewşên kontrolê (seqetbûn û kontrolkirin) berdewam dike . Rêbazek ji bo vê yekê karanîna autocomplete="off"ye. Binêre xeletiya Mozilla #654072 .

Dewletî

Zêde data-loading-text="Loading..."bikin ku li ser bişkokek rewşek barkirinê bikar bînin.

Ev taybetmendî ji v3.3.5-ê hatî derxistin û di v4-ê de hatî rakirin.

Kîjan dewleta ku hûn dixwazin bikar bînin!

Ji bo xatirê vê xwenîşandanê, em bikar tînin data-loading-textû $().button('loading'), lê ew ne tenê dewlet e ku hûn dikarin bikar bînin. Di belgeyê de li ser vê yekê bêtir bibînin$().button(string) .

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

Veguheztina yekane

Zêde data-toggle="button"bikin ku guheztina li ser bişkokek yekane çalak bikin.

Pêdivî ye ku bişkokên pêş-veguheztin.active ûaria-pressed="true"

Ji bo bişkokên pêş-veguheztin, divê hûn .activeçîn û aria-pressed="true"taybetmendiyê li buttonxwe zêde bikin.

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

Qutiya kontrolê / Radyo

Zêde data-toggle="buttons"bikin .btn-groupqutiyek kontrolê an têketinên radyoyê yên tê de hene da ku veguheztina şêwazên wan ên têkildar çalak bikin.

Vebijarkên pêşhilbijartî hewce ne.active

Ji bo vebijarkên pêşhilbijartî, divê hûn bi xwe .activepolê li têketinê zêde labelbikin.

Rewşa kontrolkirî ya dîtbar tenê bi klîk tê nûve kirin

Ger rewşa kontrolkirî ya bişkojka qutiya kontrolê bêyî ku clickbûyerek li ser bişkokê were avêtin were nûve kirin (mînak bi riya <input type="reset">an bi danîna checkedtaybetmendiya têketinê), hûn ê hewce bikin ku hûn bi xwe .activeçîna li ser têketinê biguherînin label.

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

Methods

$().button('toggle')

Rewşa pushê vedike. Bişkojk xuya dike ku ew çalak bûye.

$().button('reset')

Rewşa bişkojkê ji nû ve vedike - nivîsê bi nivîsa orîjînal diguhezîne. Ev rêbaz asynkron e û berî ku vesazkirin bi rastî qediya vedigere.

$().button(string)

Nivîsarê li her rewşa nivîsê ya diyarkirî diguhezîne.

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

Hilweşîn hilweşîn.js

Pêveka maqûl a ku ji bo guheztina hêsan çend çîn bikar tîne.

Girêdana pêvekê

Ji bo hilweşandinê pêdivî ye ku pêveka veguherînan di guhertoya weya Bootstrap de hebe.

Mînak

Bişkojkên jêrîn bikirtînin da ku elementek din bi guhertinên polê ve nîşan bidin û veşêrin:

  • .collapsenaverokê vedişêre
  • .collapsingdi dema veguherînan de tê sepandin
  • .collapse.innaverokê nîşan dide

Hûn dikarin girêdanek bi hreftaybetmendiyê, an bişkokek bi data-targettaybetmendiyê bikar bînin. Di her du rewşan de, data-toggle="collapse"pêdivî ye.

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>

Mînaka Accordion

Tevgera hilweşînê ya xwerû dirêj bikin da ku bi pêkhateya panelê re akordeyonek çêbikin.

Anim paratur klîşeya reprehenderit, enim eiusmod jiyana bilind accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Kamyona xwarinê quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua teyrek danî ser wê squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan exclusiveeur butcher cîgirê lomo. Leggings occaecat craft beer farm-to-sef, denim raw estetîk synth nesciunt we belkî li ser wan nebihîstiye accusamus labore domdar VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
      <h4 class="panel-title">
        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingTwo">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingThree">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>

Di heman demê de gengaz e ku meriv .panel-bodys-yê bi .list-groups-yê veguhezîne.

  • Bootply
  • One itmus ac facilin
  • Second eros

Berfirehkirin/hilweşandina kontrolan bigihînin

Bawer bikin aria-expandedku li hêmana kontrolê zêde bikin. Ev taybetmendî bi eşkere rewşa heyî ya hêmana hilweşandî ji xwendevanên ekranê û teknolojiyên alîkar ên mîna wan re diyar dike. Ger hêmana hilavêtinê ji hêla xwerû ve girtî be, divê nirxa wê hebe aria-expanded="false". Ger we hêmana hilavêtinê destnîşan kiriye ku ji hêla xwerû ve bi karanîna inpolê vekirî be, aria-expanded="true"li şûna wê li ser kontrolê bicîh bikin. Pêvek dê bixweber vê taybetmendiyê biguherîne li ser bingeha ku hêmana hilweşandî hatiye vekirin an girtî ye.

Wekî din, heke hêmana kontrolê ya we hêmanek yekane ya hilaweşkirî hedef digire - ango data-targettaybetmendî ber bi idhilbijêrek ve îşaret dike - hûn dikarin aria-controlstaybetmendiyek din li hêmana kontrolê zêde bikin, ku idhêmana hilweşandî tê de ye. Xwendevanên ekrana nûjen û teknolojiyên arîkar ên bi vî rengî vê taybetmendiyê bikar tînin da ku ji bikarhêneran kurtebirên zêde peyda bikin da ku rasterast li hêmana hilweşandî bixwe bigerin.

Bikaranîna

Pêveka hilweşînê ji bo hilgirtina giran çend dersan bikar tîne:

  • .collapsenaverokê vedişêre
  • .collapse.innaverokê nîşan dide
  • .collapsingdema ku veguheztin dest pê dike tê zêdekirin, û dema ku ew qediya tê jêbirin

Van dersan dikarin li component-animations.less.

Bi taybetmendiyên daneyê

Tenê data-toggle="collapse"û a data-targetli hêmanê zêde bikin da ku bixweber kontrola hêmanek hilweşandî destnîşan bikin. Taybetmendî data-targethilbijêrek CSS-ê qebûl dike ku hilweşînê li ser bicîh bike. Bawer bikin ku polê collapseli hêmana hilweşandî zêde bikin. Heke hûn dixwazin ku ew bi xweber vebe, çîna pêvek zêde bikin in.

Ji bo ku rêveberiya komê ya mîna akordeyonê li kontrolek dagirtî zêde bikin, taybetmendiya daneyê zêde bikin data-parent="#selector". Ji bo dîtina vê di çalakiyê de, serî li demo bidin.

Bi JavaScript

Bi destan çalak bike bi:

$('.collapse').collapse()

Vebijêrk

Vebijark dikarin bi taybetmendiyên daneyan an JavaScriptê ve werin derbas kirin. Ji bo taybetmendiyên daneyê, navê vebijarkê lê zêde bikin data-, wekî di data-parent="".

Nav awa destçûnî terîf
dê û bav hilbijêr şaş Ger hilbijarkek were peyda kirin, wê hingê hemî hêmanên hilweşandî yên di binê dêûbavê diyarkirî de dê werin girtin dema ku ev tişta hilvekirî were xuyang kirin. (wek behreya akordionê ya kevneşopî - ev bi polê ve girêdayî panelye)
toggle boolean rast Hêmana hilavêtinê ya li ser bangkirinê vedike

Methods

.collapse(options)

Naveroka we wekî hêmanek hilweşandî çalak dike. Vebijarkek vebijarkî qebûl objectdike.

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

.collapse('toggle')

Hêmanek dagirtî ji bo xuyangkirin an veşartinê vedigire. Berî ku hêmana hilavêtinê bi rastî were xuyang kirin an veşartin (ango berî ku bûyer shown.bs.collapsean hidden.bs.collapsebûyer çêbibe) vedigere bangkerê.

.collapse('show')

Elementeke davekirî nîşan dide. Berî ku hêmana hilavêtinê bi rastî were xuyang kirin (ango berî ku shown.bs.collapsebûyer çêbibe) vedigere bangkerê.

.collapse('hide')

Hêmanek hilweşandî vedişêre. Berî ku hêmana hilavêtinê bi rastî were veşartin (ango berî ku hidden.bs.collapsebûyer çêbibe) vedigere bangkerê.

Events

Dersa hilweşînê ya Bootstrap çend bûyeran ji bo girêdana fonksiyona hilweşînê eşkere dike.

Cureyê bûyerê Terîf
nîşan bide.bs.hilweşîn showDema ku rêbaza nimûneyê tê gazî kirin ev bûyer tavilê dişewite.
nîşan dan.bs.hilweşîn Dema ku hêmanek hilweşandî ji bikarhênerê re xuya bibe ev bûyer tê şewitandin (dê li bendê bimîne ku veguheztinên CSS temam bibin).
veşartin.bs.hilweşîn hideDema ku rêbaz hate gazî kirin ev bûyer yekser tê şewitandin .
veşartî.bs.hilweşîn Ev bûyer dema ku hêmanek hilweşandî ji bikarhêner ve hatî veşartin tê şewitandin (dê li bendê bimîne ku veguheztinên CSS biqede).
$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})

Carousel carousel.js

Parçeyek slideshow ji bo bisiklêtan di nav hêmanan de, mîna karûzek. Karûzelên hêlînkirî nayên piştgirî kirin.

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

Sernivîsên Bijarî

.carousel-captionBi hêmanek di nav her yekê de sernavan li slaytên xwe zêde bikin .item. Hema hema hema her HTML-ya vebijarkî li wir bi cîh bikin û ew ê bixweber were rêzkirin û formatkirin.

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

Gelek carousels

Ji bo ku kontrolên carousel bi rêkûpêk tevbigerin, pêdivî ye ku idkarûzek li ser konteynera herî derveyî (ya ) were bikar anîn. .carouselDema ku gelek carousel lê zêde dikin, an dema ku carouselek diguhezînin id, pê ewle bin ku kontrolên têkildar nûve bikin.

Bi taybetmendiyên daneyê

Taybetmendiyên daneyê bikar bînin da ku bi hêsanî pozîsyona carouselê kontrol bikin. data-slidekeywords prevan jî qebûl dike next, ku pozîsyona slideyê li gorî pozîsyona wê ya heyî diguhezîne. Alternatîf, bikar bînin data-slide-toku navnîşek slide ya xav bi karûselê re derbas bikin data-slide-to="2", ku pozîsyona slideyê vediguhezîne navnîşek taybetî ya ku bi dest pê dike 0.

Taybetmendî data-ride="carousel"ji bo nîşankirina carouselek wekî anîmasyonek ku di barkirina rûpelê de dest pê dike tê bikar anîn. Ew nikare bi hevberdana bi destpêkirina JavaScriptê ya eşkere ya heman carouselê (zêde û nehewce) re were bikar anîn.

Bi JavaScript

Carousel bi destan bang bikin bi:

$('.carousel').carousel()

Vebijark dikarin bi taybetmendiyên daneyan an JavaScriptê ve werin derbas kirin. Ji bo taybetmendiyên daneyê, navê vebijarkê lê zêde bikin data-, wekî di data-interval="".

Nav awa destçûnî terîf
navber jimare 5000 Rêjeya dema derengmayîna di navbera bisiklêta bixweber a babetek de. Ger derew be, carousel dê bixweber nekeve.
mizdan string | null "livîn" Ger "hover"bisiklêtê bisiklêtê li ser were danîn rawestîne û bisiklêta carouselê ji nû ve mouseenterdest pê bike mouseleave. Ger li ser were danîn null, hejandina li ser karûselê wê rawestîne.
pêçan boolean rast Ger carousel bi domdarî bizivire an rawestgehên dijwar hebin.
kilawye boolean rast Ma carousel divê ji bûyerên klavyeyê re bertek nîşan bide.

Karûselê bi vebijarkek vebijarkî objectdest pê dike û di nav tiştan de bisiklêtê dest pê dike.

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

Ji çepê ber bi rastê ve di nav tiştên karûselê re digere.

Karûselê ji bisiklêtan di nav tiştan re rawestîne.

Karûselê di çarçoveyek taybetî de (0 bingeh, dişibihe rêzeyekê) digerîne.

Dûv re berbi babeta berê ve diçe.

Dûv re ber bi babeta din ve diçe.

Dersa karûselê ya Bootstrap du bûyeran ji bo girêdana fonksiyona karûselê eşkere dike.

Her du bûyer xwedî taybetmendiyên din ên jêrîn in:

  • direction: Arasteya ku carousel tê de dizivire (yan yan "left""right").
  • relatedTarget: Hêmana DOM-ê ya ku wekî hêmanek çalak di cîhê xwe de tê hilanîn.

Hemû bûyerên carousel li carousel bi xwe (ango li <div class="carousel">).

Cureyê bûyerê Terîf
slide.bs.carousel slideDema ku rêbaza nimûneyê tê xwestin ev bûyer tavilê dişewite.
slid.bs.carousel Dema ku carousel veguherîna xwe ya slaytê qedand ev bûyer tê şewitandin.
$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
})

Affix affix.js

Mînak

Pêveka affix -ê vedibe position: fixed;û vedike, bandora ku bi position: sticky;. Subnavîgasyon li milê rastê demoyek zindî ya pêveka affix-ê ye.


Bikaranîna

Pêveka pêvekê bi taybetmendiyên daneyê an bi destê xwe bi JavaScript-a xwe re bikar bînin. Di her du rewşan de, divê hûn ji bo cîh û firehiya naveroka xweya pêvekirî CSS peyda bikin.

Nîşe: Pêveka pêvekirinê li ser hêmanek ku di nav hêmanek bi pozîsyonek nisbeten de cih digire, wekî stûnek kişandî an pêvekirî, ji ber xeletiyek vegotina Safari bikar neynin .

Positioning bi rêya CSS

Pêveka pêvekê di navbera sê çînan de vediguhere, her yek dewletek taybetî temsîl dike: .affix, .affix-top, û .affix-bottom. Pêdivî ye ku hûn şêwazan, ji bilî li position: fixed;ser .affix, ji bo van dersan bi xwe (ji vê pêvekê serbixwe) peyda bikin da ku pozîsyonên rastîn birêve bibin.

Li vir pêveka affix çawa dixebite:

  1. Ji bo destpêkirinê, pêvek lê zêde dike .affix-topku nîşan bide ku hêman di pozîsyona xweya herî jorîn de ye. Di vê nuqteyê de pozîsyona CSS-ê ne hewce ye.
  2. Gera li ber hêmana ku hûn dixwazin pêvekirî derbas bibin divê pêvekirina rastîn dest pê bike. Li vir .affixcîh digire .affix-topû saz dike position: fixed;(ji hêla CSS ya Bootstrap ve hatî peyda kirin).
  3. Ger guheztinek jêrîn were diyar kirin, pêdivî ye ku meriv berê xwe bide .affixguheztin .affix-bottom. Ji ber ku veqetandin vebijarkî ne, ji bo danîna yekê hewce dike ku hûn CSS-ya guncan saz bikin. Di vê rewşê de, position: absolute;dema ku hewce bike lê zêde bike. Pêvek taybetmendiya daneyê an vebijarka JavaScript-ê bikar tîne da ku diyar bike ku hêman ji wir li ku derê bi cîh bike.

Pêngavên jorîn bişopînin da ku CSS-ya xwe ji bo yek ji vebijarkên karanîna jêrîn saz bikin.

Bi taybetmendiyên daneyê

Ji bo ku bi hêsanî behreya pêvekirinê li her hêmanekê zêde data-spy="affix"bikin, tenê li hêmana ku hûn dixwazin bişopînin lê zêde bikin. Ji bo pênasekirina kengê guheztina pînekirina hêmanekê guheztinan bikar bînin.

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

Bi JavaScript

Bi JavaScriptê re pêveka affix bang bikin:

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

Vebijêrk

Vebijark dikarin bi taybetmendiyên daneyan an JavaScriptê ve werin derbas kirin. Ji bo taybetmendiyên daneyê, navê vebijarkê lê zêde bikin data-, wekî di data-offset-top="200".

Nav awa destçûnî terîf
offset hejmar | fonksiyon | tişt 10 Pîkselên ku ji ekranê têne derxistin dema ku pozîsyona gerokê hesab dikin. Ger jimareyek yekane were peyda kirin, dê guheztin hem di rêyên jorîn û jêrîn de were sepandin. Ji bo peydakirina yekane, binî û jor veqetandek tenê tiştek peyda bikin offset: { top: 10 }an offset: { top: 10, bottom: 5 }. Dema ku hûn hewce ne ku bi dînamîk veqetandinê hesab bikin fonksiyonek bikar bînin.
armanc hilbijêr | girêk | hêmana jQuery windowobject _ Hêmana armancê ya pêvekê diyar dike.

Methods

.affix(options)

Naveroka we wekî naveroka pêvekirî çalak dike. Vebijarkek vebijarkî qebûl objectdike.

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

.affix('checkPosition')

Li ser bingeha pîvan, pozîsyon û pozîsyona gerîdeyê ya hêmanên têkildar, rewşa pêvekê ji nû ve hesab dike. Çîn .affix, .affix-top, û .affix-bottomli gorî dewleta nû li naveroka pêvekirî têne zêdekirin an jê têne derxistin. Dema ku pîvanên naveroka pêvekirî an hêmana armanc têne guheztin pêdivî ye ku ev rêbaz were gazî kirin, da ku cîhgirtina rast a naveroka pêvekirî were misoger kirin.

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

Events

Pêveka pêvekirinê ya Bootstrap çend bûyeran ji bo girêdana fonksiyona pêvekirinê eşkere dike.

Cureyê bûyerê Terîf
affix.bs.affix Berî ku hêman were pêvekirin, ev bûyer yekser dişewite.
pêxist.bs.affix Ev bûyer piştî ku hêman hate pêvekirin tê şewitandin.
affix-top.bs.affix Berî ku hêman li jorê were girêdan ev bûyer yekser dişewite.
affixed-top.bs.affix Ev bûyer piştî ku hêman li jorê hate girêdan tê şewitandin.
affix-bottom.bs.affix Berî ku hêman li jêr were girêdan, ev bûyer yekser dişewite.
affixed-bottom.bs.affix Ev bûyer piştî ku hêman li jêr hate pêvekirin tê şewitandin.