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

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 bjalo ka se:

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

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

Sedirišwa sa go hlwekiša

Tooltips le Popovers sebelisa rona a haha-ka sanitizer ho sanitize dikgetho tse amohelang HTML.

Boleng bja go se fetoge whiteListke bjo bo latelago:

var ARIA_ATTRIBUTE_PATTERN = /^aria-[\w-]*$/i
var DefaultWhitelist = {
  // Global attributes allowed on any supplied element below.
  '*': ['class', 'dir', 'id', 'lang', 'role', ARIA_ATTRIBUTE_PATTERN],
  a: ['target', 'href', 'title', 'rel'],
  area: [],
  b: [],
  br: [],
  col: [],
  code: [],
  div: [],
  em: [],
  hr: [],
  h1: [],
  h2: [],
  h3: [],
  h4: [],
  h5: [],
  h6: [],
  i: [],
  img: ['src', 'alt', 'title', 'width', 'height'],
  li: [],
  ol: [],
  p: [],
  pre: [],
  s: [],
  small: [],
  span: [],
  sub: [],
  sup: [],
  strong: [],
  u: [],
  ul: []
}

Ge o nyaka go oketša dikelo tše mpsha go tlwaelo ye whiteListo ka dira tše di latelago:

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.whiteList

// To allow table elements
myDefaultWhiteList.table = []

// To allow td elements and data-option attributes on td elements
myDefaultWhiteList.td = ['data-option']

// You can push your custom regex to validate your attributes.
// Be careful about your regular expressions being too lax
var myCustomRegex = /^data-my-app-[\w-]+/
myDefaultWhiteList['*'].push(myCustomRegex)

Ge e ba o nyaka go tlola sanitizer ya rena ka gobane o rata go diriša bokgobapuku bjo bo kgethegilego, mohlala DOMPurify , o swanetše go dira tše di latelago:

$('#yourTooltip').tooltip({
  sanitizeFn: function (content) {
    return DOMPurify.sanitize(content)
  }
})

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.4.1"

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

Di-plugin tša Bootstrap ga di wele 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.

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.

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>

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

Fapaneng modal dikahare thehiloeng qholotsa konopo

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

<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="".

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

Mekgwa ya go šoma

.modal(options)

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

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

.modal('toggle')

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

.modal('show')

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

.modal('hide')

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

.modal('handleUpdate')

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">).

$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

Di- dropdown tša go theoga.js

Mehlala

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

Tšhomišo

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

Dikgetho

Ga go selo

Mekgwa ya go šoma

$().dropdown('toggle')

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

Ditiragalo

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.

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

Tšhomišo

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="".

Ditiragalo

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

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

$('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:

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>

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

Dikgetho

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

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

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

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.

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

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.

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.

<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="".

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

$('#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 dipopaye ge o tswalela, kgonthiša gore di na le .fadele .indiklase 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 le gore .fadele.in gore diklase 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.

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

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.

<button type="button" id="myButton" data-loading-text="Loading..." class="btn btn-primary">
  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.

<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false">
  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.

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="checkbox" checked> Checkbox 1 (pre-checked)
  </label>
  <label class="btn btn-primary">
    <input type="checkbox"> Checkbox 2
  </label>
  <label class="btn btn-primary">
    <input type="checkbox"> Checkbox 3
  </label>
</div>

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="radio" name="options" id="option1" checked> Radio 1 (preselected)
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option2"> Radio 2
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option3"> 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">
  ...
</button>

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

Phuhlama ya collapse.js

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

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.

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

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

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="".

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.

$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})

Carousel ya 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.

Mehlala

Peleng Latelago

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

Leina la pele la selaete

Nulla vitae elit libero, e lego pharetra yeo e lego mollis ya magareng.

Leina la bobedi la selaete

Lorem ipsum dolor lula amet, consectetur adipiscing elit.

Leina la boraro la selaete

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

Peleng Latelago

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

Tšhomišo

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 yeo e thomago ka 0.

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

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="".

Mekgwa ya go šoma

.carousel(options)

Initializes carousel le dikgetho boikhethelo objectle qala baesekele ka dintho.

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

.carousel('cycle')

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

.carousel('pause')

E thibela carousel go sepela ka dipaesekele ka dilo.

.carousel(number)

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

.carousel('prev')

Didikologo go ya go selo sa go feta.

.carousel('next')

Didikologo go ya go selo se se latelago.

Ditiragalo

Sehlopha sa carousel sa Bootstrap se pepentšha ditiragalo tše pedi tša go goketša mošomong 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">).

$('#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-topgo 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".

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.