ਸੰਖੇਪ ਜਾਣਕਾਰੀ

ਵਿਅਕਤੀਗਤ ਜਾਂ ਸੰਕਲਿਤ

ਪਲੱਗਇਨਾਂ ਨੂੰ ਵਿਅਕਤੀਗਤ ਤੌਰ 'ਤੇ ਸ਼ਾਮਲ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ (ਬੂਟਸਟ੍ਰੈਪ ਦੀਆਂ ਵਿਅਕਤੀਗਤ *.jsਫਾਈਲਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ), ਜਾਂ ਸਾਰੀਆਂ ਇੱਕੋ ਵਾਰ (ਵਰਤਦੇ ਹੋਏ bootstrap.jsਜਾਂ ਮਿਨਿਫਾਈਡ bootstrap.min.js)।

ਡਾਟਾ ਗੁਣ

ਤੁਸੀਂ JavaScript ਦੀ ਇੱਕ ਵੀ ਲਾਈਨ ਲਿਖੇ ਬਿਨਾਂ ਮਾਰਕਅੱਪ API ਰਾਹੀਂ ਸਾਰੇ ਬੂਟਸਟਰੈਪ ਪਲੱਗਇਨਾਂ ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹੋ। ਇਹ ਬੂਟਸਟਰੈਪ ਦਾ ਫਸਟ-ਕਲਾਸ API ਹੈ ਅਤੇ ਪਲੱਗਇਨ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਸਮੇਂ ਤੁਹਾਡਾ ਪਹਿਲਾ ਵਿਚਾਰ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ।

ਉਸ ਨੇ ਕਿਹਾ, ਕੁਝ ਸਥਿਤੀਆਂ ਵਿੱਚ ਇਸ ਕਾਰਜਸ਼ੀਲਤਾ ਨੂੰ ਬੰਦ ਕਰਨਾ ਫਾਇਦੇਮੰਦ ਹੋ ਸਕਦਾ ਹੈ। ਇਸਲਈ, ਅਸੀਂ ਦਸਤਾਵੇਜ਼ ਦੇ ਨਾਮ-ਸਪੇਸ 'ਤੇ ਸਾਰੇ ਇਵੈਂਟਾਂ ਨੂੰ ਅਨਬਾਈਂਡ ਕਰਕੇ ਡੇਟਾ ਵਿਸ਼ੇਸ਼ਤਾ API ਨੂੰ ਅਸਮਰੱਥ ਬਣਾਉਣ ਦੀ ਯੋਗਤਾ ਵੀ ਪ੍ਰਦਾਨ ਕਰਦੇ ਹਾਂ data-api। ਇਹ ਇਸ ਤਰ੍ਹਾਂ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ:

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

ਵਿਕਲਪਕ ਤੌਰ 'ਤੇ, ਕਿਸੇ ਖਾਸ ਪਲੱਗਇਨ ਨੂੰ ਨਿਸ਼ਾਨਾ ਬਣਾਉਣ ਲਈ, ਸਿਰਫ਼ ਪਲੱਗਇਨ ਦਾ ਨਾਮ ਇੱਕ ਨੇਮ-ਸਪੇਸ ਦੇ ਨਾਲ-ਨਾਲ ਡੇਟਾ-ਏਪੀਆਈ ਨੇਮਸਪੇਸ ਦੇ ਨਾਲ ਇਸ ਤਰ੍ਹਾਂ ਸ਼ਾਮਲ ਕਰੋ:

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

ਪ੍ਰੋਗਰਾਮੇਟਿਕ API

ਅਸੀਂ ਇਹ ਵੀ ਮੰਨਦੇ ਹਾਂ ਕਿ ਤੁਹਾਨੂੰ JavaScript API ਰਾਹੀਂ ਸਾਰੇ ਬੂਟਸਟਰੈਪ ਪਲੱਗਇਨਾਂ ਦੀ ਵਰਤੋਂ ਕਰਨ ਦੇ ਯੋਗ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ। ਸਾਰੇ ਜਨਤਕ API ਸਿੰਗਲ, ਚੇਨ ਕਰਨ ਯੋਗ ਢੰਗ ਹਨ, ਅਤੇ ਕਾਰਵਾਈ ਕੀਤੇ ਗਏ ਸੰਗ੍ਰਹਿ ਨੂੰ ਵਾਪਸ ਕਰਦੇ ਹਨ।

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

ਸਾਰੀਆਂ ਵਿਧੀਆਂ ਨੂੰ ਇੱਕ ਵਿਕਲਪਿਕ ਵਿਕਲਪ ਆਬਜੈਕਟ, ਇੱਕ ਸਤਰ ਜੋ ਕਿਸੇ ਖਾਸ ਵਿਧੀ ਨੂੰ ਨਿਸ਼ਾਨਾ ਬਣਾਉਂਦਾ ਹੈ, ਜਾਂ ਕੁਝ ਨਹੀਂ (ਜੋ ਡਿਫੌਲਟ ਵਿਵਹਾਰ ਨਾਲ ਇੱਕ ਪਲੱਗਇਨ ਸ਼ੁਰੂ ਕਰਦਾ ਹੈ) ਨੂੰ ਸਵੀਕਾਰ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ:

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

ਹਰੇਕ ਪਲੱਗਇਨ ਇੱਕ ਵਿਸ਼ੇਸ਼ਤਾ 'ਤੇ ਇਸਦੇ ਕੱਚੇ ਕੰਸਟਰਕਟਰ ਨੂੰ ਵੀ ਪ੍ਰਗਟ ਕਰਦੀ ਹੈ Constructor: $.fn.popover.Constructor. ਜੇਕਰ ਤੁਸੀਂ ਇੱਕ ਖਾਸ ਪਲੱਗਇਨ ਉਦਾਹਰਣ ਪ੍ਰਾਪਤ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ ਇਸਨੂੰ ਸਿੱਧੇ ਇੱਕ ਤੱਤ ਤੋਂ ਪ੍ਰਾਪਤ ਕਰੋ: $('[rel="popover"]').data('popover').

ਪੂਰਵ-ਨਿਰਧਾਰਤ ਸੈਟਿੰਗਾਂ

Constructor.DEFAULTSਤੁਸੀਂ ਪਲੱਗਇਨ ਦੇ ਆਬਜੈਕਟ ਨੂੰ ਸੋਧ ਕੇ ਪਲੱਗਇਨ ਲਈ ਡਿਫੌਲਟ ਸੈਟਿੰਗਾਂ ਨੂੰ ਬਦਲ ਸਕਦੇ ਹੋ :

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

ਕੋਈ ਟਕਰਾਅ ਨਹੀਂ

ਕਈ ਵਾਰ ਬੂਟਸਟਰੈਪ ਪਲੱਗਇਨ ਨੂੰ ਹੋਰ UI ਫਰੇਮਵਰਕ ਨਾਲ ਵਰਤਣਾ ਜ਼ਰੂਰੀ ਹੁੰਦਾ ਹੈ। ਇਹਨਾਂ ਹਾਲਤਾਂ ਵਿੱਚ, ਨੇਮਸਪੇਸ ਦੀ ਟੱਕਰ ਕਦੇ-ਕਦਾਈਂ ਹੋ ਸਕਦੀ ਹੈ। ਜੇਕਰ ਅਜਿਹਾ ਹੁੰਦਾ ਹੈ, ਤਾਂ ਤੁਸੀਂ .noConflictਉਸ ਪਲੱਗਇਨ 'ਤੇ ਕਾਲ ਕਰ ਸਕਦੇ ਹੋ ਜਿਸ ਦਾ ਮੁੱਲ ਤੁਸੀਂ ਵਾਪਸ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ।

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

ਸਮਾਗਮ

ਬੂਟਸਟਰੈਪ ਜ਼ਿਆਦਾਤਰ ਪਲੱਗਇਨਾਂ ਦੀਆਂ ਵਿਲੱਖਣ ਕਾਰਵਾਈਆਂ ਲਈ ਕਸਟਮ ਇਵੈਂਟ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ। ਆਮ ਤੌਰ 'ਤੇ, ਇਹ ਇੱਕ ਅਨੰਤ ਅਤੇ ਪੂਰਵ ਭਾਗੀ ਰੂਪ ਵਿੱਚ ਆਉਂਦੇ ਹਨ - ਜਿੱਥੇ ਇੱਕ ਘਟਨਾ ਦੀ ਸ਼ੁਰੂਆਤ ਵਿੱਚ ਅਨੰਤ (ਉਦਾਹਰਨ show) ਨੂੰ ਚਾਲੂ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, ਅਤੇ ਇਸਦਾ ਪਿਛਲਾ ਭਾਗੀ ਰੂਪ (ਉਦਾਹਰਨ shown) ਇੱਕ ਕਿਰਿਆ ਦੇ ਪੂਰਾ ਹੋਣ 'ਤੇ ਚਾਲੂ ਹੁੰਦਾ ਹੈ।

3.0.0 ਤੱਕ, ਸਾਰੇ ਬੂਟਸਟਰੈਪ ਇਵੈਂਟਸ ਨੇਮਸਪੇਸ ਵਿੱਚ ਹਨ।

ਸਾਰੀਆਂ ਅਨੰਤ ਘਟਨਾਵਾਂ preventDefaultਕਾਰਜਕੁਸ਼ਲਤਾ ਪ੍ਰਦਾਨ ਕਰਦੀਆਂ ਹਨ। ਇਹ ਕਿਸੇ ਕਾਰਵਾਈ ਦੇ ਸ਼ੁਰੂ ਹੋਣ ਤੋਂ ਪਹਿਲਾਂ ਉਸ ਨੂੰ ਲਾਗੂ ਕਰਨ ਨੂੰ ਰੋਕਣ ਦੀ ਸਮਰੱਥਾ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ।

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

ਸੈਨੀਟਾਈਜ਼ਰ

ਟੂਲਟਿਪਸ ਅਤੇ ਪੋਪੋਵਰ HTML ਨੂੰ ਸਵੀਕਾਰ ਕਰਨ ਵਾਲੇ ਵਿਕਲਪਾਂ ਨੂੰ ਰੋਗਾਣੂ-ਮੁਕਤ ਕਰਨ ਲਈ ਸਾਡੇ ਬਿਲਟ-ਇਨ ਸੈਨੀਟਾਈਜ਼ਰ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਨ।

ਡਿਫੌਲਟ whiteListਮੁੱਲ ਹੇਠਾਂ ਦਿੱਤਾ ਗਿਆ ਹੈ:

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: []
}

ਜੇਕਰ ਤੁਸੀਂ ਇਸ ਡਿਫੌਲਟ ਵਿੱਚ ਨਵੇਂ ਮੁੱਲ ਜੋੜਨਾ ਚਾਹੁੰਦੇ ਹੋ ਤਾਂ ਤੁਸੀਂ ਇਹ whiteListਕਰ ਸਕਦੇ ਹੋ:

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)

ਜੇਕਰ ਤੁਸੀਂ ਸਾਡੇ ਸੈਨੀਟਾਈਜ਼ਰ ਨੂੰ ਬਾਈਪਾਸ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ ਕਿਉਂਕਿ ਤੁਸੀਂ ਇੱਕ ਸਮਰਪਿਤ ਲਾਇਬ੍ਰੇਰੀ ਦੀ ਵਰਤੋਂ ਕਰਨਾ ਪਸੰਦ ਕਰਦੇ ਹੋ, ਉਦਾਹਰਨ ਲਈ DOMpurify , ਤਾਂ ਤੁਹਾਨੂੰ ਇਹ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ:

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

ਸੰਸਕਰਣ ਨੰਬਰ

ਬੂਟਸਟਰੈਪ ਦੇ ਹਰੇਕ jQuery ਪਲੱਗਇਨ ਦੇ ਸੰਸਕਰਣ ਨੂੰ VERSIONਪਲੱਗਇਨ ਦੇ ਨਿਰਮਾਤਾ ਦੀ ਵਿਸ਼ੇਸ਼ਤਾ ਦੁਆਰਾ ਐਕਸੈਸ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ। ਉਦਾਹਰਨ ਲਈ, ਟੂਲਟਿਪ ਪਲੱਗਇਨ ਲਈ:

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

JavaScript ਅਯੋਗ ਹੋਣ 'ਤੇ ਕੋਈ ਖਾਸ ਫਾਲਬੈਕ ਨਹੀਂ

ਬੂਟਸਟਰੈਪ ਦੇ ਪਲੱਗਇਨ ਖਾਸ ਤੌਰ 'ਤੇ ਸ਼ਾਨਦਾਰ ਢੰਗ ਨਾਲ ਵਾਪਸ ਨਹੀਂ ਆਉਂਦੇ ਹਨ ਜਦੋਂ JavaScript ਅਸਮਰੱਥ ਹੁੰਦੀ ਹੈ। ਜੇਕਰ ਤੁਸੀਂ ਇਸ ਮਾਮਲੇ ਵਿੱਚ ਉਪਭੋਗਤਾ ਅਨੁਭਵ ਦੀ ਪਰਵਾਹ ਕਰਦੇ ਹੋ, <noscript>ਤਾਂ ਆਪਣੇ ਉਪਭੋਗਤਾਵਾਂ ਨੂੰ ਸਥਿਤੀ (ਅਤੇ JavaScript ਨੂੰ ਮੁੜ-ਸਮਰੱਥ ਕਿਵੇਂ ਕਰਨਾ ਹੈ) ਦੀ ਵਿਆਖਿਆ ਕਰਨ ਲਈ ਵਰਤੋ, ਅਤੇ/ਜਾਂ ਆਪਣੇ ਖੁਦ ਦੇ ਕਸਟਮ ਫਾਲਬੈਕ ਜੋੜੋ।

ਪਰਿਵਰਤਨ transition.js

ਪਰਿਵਰਤਨ ਬਾਰੇ

ਸਧਾਰਨ ਪਰਿਵਰਤਨ ਪ੍ਰਭਾਵਾਂ ਲਈ, transition.jsਦੂਜੀਆਂ JS ਫਾਈਲਾਂ ਦੇ ਨਾਲ ਇੱਕ ਵਾਰ ਸ਼ਾਮਲ ਕਰੋ। ਜੇਕਰ ਤੁਸੀਂ ਕੰਪਾਇਲ ਕੀਤੇ (ਜਾਂ ਮਿੰਨੀਫਾਈਡ) ਦੀ ਵਰਤੋਂ ਕਰ ਰਹੇ ਹੋ bootstrap.js, ਤਾਂ ਇਸ ਨੂੰ ਸ਼ਾਮਲ ਕਰਨ ਦੀ ਕੋਈ ਲੋੜ ਨਹੀਂ ਹੈ—ਇਹ ਪਹਿਲਾਂ ਹੀ ਮੌਜੂਦ ਹੈ।

ਅੰਦਰ ਕੀ ਹੈ

Transition.js ਇਵੈਂਟਾਂ ਲਈ ਇੱਕ ਬੁਨਿਆਦੀ ਸਹਾਇਕ ਹੈ transitionEndਅਤੇ ਨਾਲ ਹੀ ਇੱਕ CSS ਪਰਿਵਰਤਨ ਇਮੂਲੇਟਰ ਹੈ। ਇਹ ਦੂਜੇ ਪਲੱਗਇਨਾਂ ਦੁਆਰਾ CSS ਪਰਿਵਰਤਨ ਸਮਰਥਨ ਦੀ ਜਾਂਚ ਕਰਨ ਅਤੇ ਲਟਕਣ ਵਾਲੀਆਂ ਤਬਦੀਲੀਆਂ ਨੂੰ ਫੜਨ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ।

ਤਬਦੀਲੀਆਂ ਨੂੰ ਅਸਮਰੱਥ ਬਣਾਇਆ ਜਾ ਰਿਹਾ ਹੈ

ਹੇਠਾਂ ਦਿੱਤੇ JavaScript ਸਨਿੱਪਟ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਪਰਿਵਰਤਨ ਗਲੋਬਲ ਤੌਰ 'ਤੇ ਅਸਮਰੱਥ ਕੀਤੇ ਜਾ ਸਕਦੇ ਹਨ, ਜੋ ਲੋਡ ਹੋਣ ਤੋਂ ਬਾਅਦ transition.js(ਜਾਂ bootstrap.js, bootstrap.min.jsਜਿਵੇਂ ਕਿ ਕੇਸ ਹੋ ਸਕਦਾ ਹੈ) ਆਉਣਾ ਚਾਹੀਦਾ ਹੈ:

$.support.transition = false

ਮਾਡਲਸ modal.js

ਮਾਡਲ ਸੁਚਾਰੂ, ਪਰ ਲਚਕਦਾਰ, ਘੱਟੋ-ਘੱਟ ਲੋੜੀਂਦੀ ਕਾਰਜਸ਼ੀਲਤਾ ਅਤੇ ਸਮਾਰਟ ਡਿਫੌਲਟ ਦੇ ਨਾਲ ਡਾਇਲਾਗ ਪ੍ਰੋਂਪਟ ਹਨ।

HTML5 ਆਪਣੇ ਅਰਥ ਵਿਗਿਆਨ ਨੂੰ ਕਿਵੇਂ ਪਰਿਭਾਸ਼ਿਤ ਕਰਦਾ ਹੈ, autofocusHTML ਗੁਣ ਦਾ ਬੂਟਸਟਰੈਪ ਮਾਡਲਾਂ ਵਿੱਚ ਕੋਈ ਪ੍ਰਭਾਵ ਨਹੀਂ ਹੁੰਦਾ ਹੈ। ਉਸੇ ਪ੍ਰਭਾਵ ਨੂੰ ਪ੍ਰਾਪਤ ਕਰਨ ਲਈ, ਕੁਝ ਕਸਟਮ JavaScript ਦੀ ਵਰਤੋਂ ਕਰੋ:

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

ਉਦਾਹਰਨਾਂ

ਸਥਿਰ ਉਦਾਹਰਨ

ਫੁੱਟਰ ਵਿੱਚ ਸਿਰਲੇਖ, ਬਾਡੀ, ਅਤੇ ਕਾਰਵਾਈਆਂ ਦੇ ਸੈੱਟ ਦੇ ਨਾਲ ਇੱਕ ਰੈਂਡਰ ਕੀਤਾ ਮਾਡਲ।

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

ਲਾਈਵ ਡੈਮੋ

ਹੇਠਾਂ ਦਿੱਤੇ ਬਟਨ 'ਤੇ ਕਲਿੱਕ ਕਰਕੇ JavaScript ਰਾਹੀਂ ਇੱਕ ਮਾਡਲ ਨੂੰ ਟੌਗਲ ਕਰੋ। ਇਹ ਪੰਨੇ ਦੇ ਸਿਖਰ ਤੋਂ ਹੇਠਾਂ ਸਲਾਈਡ ਅਤੇ ਫਿੱਕਾ ਹੋ ਜਾਵੇਗਾ।

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

ਵਿਕਲਪਿਕ ਆਕਾਰ

ਮਾਡਲਾਂ ਦੇ ਦੋ ਵਿਕਲਪਿਕ ਆਕਾਰ ਹੁੰਦੇ ਹਨ, ਜੋ ਮੋਡੀਫਾਇਰ ਕਲਾਸਾਂ ਰਾਹੀਂ ਉਪਲਬਧ ਹੁੰਦੇ ਹਨ ਜੋ ਕਿ ਇੱਕ 'ਤੇ ਰੱਖੇ ਜਾਣ ਲਈ ਹਨ .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>

ਐਨੀਮੇਸ਼ਨ ਹਟਾਓ

ਉਹਨਾਂ ਮਾਡਲਾਂ ਲਈ ਜੋ ਦੇਖਣ ਲਈ ਫਿੱਕੇ ਹੋਣ ਦੀ ਬਜਾਏ ਸਿਰਫ਼ ਦਿਖਾਈ ਦਿੰਦੇ ਹਨ, .fadeਆਪਣੇ ਮਾਡਲ ਮਾਰਕਅੱਪ ਤੋਂ ਕਲਾਸ ਨੂੰ ਹਟਾਓ।

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

ਗਰਿੱਡ ਸਿਸਟਮ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ

ਇੱਕ ਮਾਡਲ ਦੇ ਅੰਦਰ ਬੂਟਸਟਰੈਪ ਗਰਿੱਡ ਸਿਸਟਮ ਦਾ ਫਾਇਦਾ ਉਠਾਉਣ ਲਈ, ਸਿਰਫ਼ Nest .rows ਦੇ ਅੰਦਰ .modal-bodyਅਤੇ ਫਿਰ ਆਮ ਗਰਿੱਡ ਸਿਸਟਮ ਕਲਾਸਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ।

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

ਟਰਿੱਗਰ ਬਟਨ ਦੇ ਆਧਾਰ 'ਤੇ ਵੱਖ-ਵੱਖ ਮਾਡਲ ਸਮੱਗਰੀ

ਕੀ ਤੁਹਾਡੇ ਕੋਲ ਬਟਨਾਂ ਦਾ ਇੱਕ ਸਮੂਹ ਹੈ ਜੋ ਸਾਰੇ ਇੱਕੋ ਮਾਡਲ ਨੂੰ ਟਰਿੱਗਰ ਕਰਦੇ ਹਨ, ਸਿਰਫ ਥੋੜੀ ਵੱਖਰੀ ਸਮੱਗਰੀ ਦੇ ਨਾਲ? ਮਾਡਲ ਦੀ ਸਮੱਗਰੀ ਨੂੰ ਵੱਖ-ਵੱਖ ਕਰਨ ਲਈ HTML ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ (ਸੰਭਵ ਤੌਰ ' ਤੇ jQuery ਰਾਹੀਂ ) ਦੀ ਵਰਤੋਂ ਕਰੋ event.relatedTargetਅਤੇ ਇਸ 'ਤੇ ਨਿਰਭਰ ਕਰਦਾ ਹੈ ਕਿ ਕਿਹੜਾ ਬਟਨ ਕਲਿੱਕ ਕੀਤਾ ਗਿਆ ਸੀ। 'ਤੇ ਵੇਰਵਿਆਂ ਲਈ ਮਾਡਲ ਇਵੈਂਟਸ ਦਸਤਾਵੇਜ਼ ਵੇਖੋ ,data-*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)
})

ਵਰਤੋਂ

ਮਾਡਲ ਪਲੱਗਇਨ ਡਾਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਜਾਂ JavaScript ਦੁਆਰਾ, ਮੰਗ 'ਤੇ ਤੁਹਾਡੀ ਲੁਕੀ ਹੋਈ ਸਮੱਗਰੀ ਨੂੰ ਟੌਗਲ ਕਰਦਾ ਹੈ। ਇਹ ਡਿਫੌਲਟ ਸਕ੍ਰੋਲਿੰਗ ਵਿਵਹਾਰ ਨੂੰ ਓਵਰਰਾਈਡ ਕਰਨ .modal-openਲਈ ਵੀ ਜੋੜਦਾ ਹੈ ਅਤੇ ਮਾਡਲ ਤੋਂ ਬਾਹਰ ਕਲਿੱਕ ਕਰਨ ਵੇਲੇ ਦਿਖਾਏ ਗਏ ਮਾਡਲਾਂ ਨੂੰ ਖਾਰਜ ਕਰਨ ਲਈ ਇੱਕ ਕਲਿੱਕ ਖੇਤਰ ਪ੍ਰਦਾਨ ਕਰਨ ਲਈ ਇੱਕ ਬਣਾਉਂਦਾ ਹੈ।<body>.modal-backdrop

ਡਾਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਰਾਹੀਂ

JavaScript ਲਿਖੇ ਬਿਨਾਂ ਇੱਕ ਮਾਡਲ ਨੂੰ ਸਰਗਰਮ ਕਰੋ। data-toggle="modal"ਇੱਕ ਕੰਟਰੋਲਰ ਤੱਤ 'ਤੇ ਸੈੱਟ ਕਰੋ , ਜਿਵੇਂ ਕਿ ਇੱਕ ਬਟਨ, ਇੱਕ ਦੇ ਨਾਲ data-target="#foo"ਜਾਂ href="#foo"ਟੌਗਲ ਕਰਨ ਲਈ ਇੱਕ ਖਾਸ ਮਾਡਲ ਨੂੰ ਨਿਸ਼ਾਨਾ ਬਣਾਉਣ ਲਈ।

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

JavaScript ਰਾਹੀਂ

myModalJavaScript ਦੀ ਇੱਕ ਲਾਈਨ ਨਾਲ id ਦੇ ਨਾਲ ਇੱਕ ਮਾਡਲ ਨੂੰ ਕਾਲ ਕਰੋ :

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

ਵਿਕਲਪ

ਵਿਕਲਪਾਂ ਨੂੰ ਡੇਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਜਾਂ JavaScript ਦੁਆਰਾ ਪਾਸ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ। ਡੇਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਲਈ, ਵਿਕਲਪ ਦਾ ਨਾਮ ਸ਼ਾਮਲ ਕਰੋ data-, ਜਿਵੇਂ ਕਿ ਵਿੱਚ data-backdrop=""।

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

ਢੰਗ

.modal(options)

ਤੁਹਾਡੀ ਸਮੱਗਰੀ ਨੂੰ ਇੱਕ ਮਾਡਲ ਵਜੋਂ ਸਰਗਰਮ ਕਰਦਾ ਹੈ। ਇੱਕ ਵਿਕਲਪਿਕ ਵਿਕਲਪ ਸਵੀਕਾਰ ਕਰਦਾ ਹੈ object।

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

.modal('toggle')

ਇੱਕ ਮਾਡਲ ਨੂੰ ਹੱਥੀਂ ਟੌਗਲ ਕਰਦਾ ਹੈ। ਮਾਡਲ ਅਸਲ ਵਿੱਚ ਦਿਖਾਏ ਜਾਂ ਲੁਕਾਏ ਜਾਣ ਤੋਂ ਪਹਿਲਾਂ ਕਾਲਰ ਕੋਲ ਵਾਪਸ ਆ ਜਾਂਦਾ ਹੈ (ਭਾਵ shown.bs.modalਜਾਂ hidden.bs.modalਘਟਨਾ ਵਾਪਰਨ ਤੋਂ ਪਹਿਲਾਂ)।

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

.modal('show')

ਹੱਥੀਂ ਇੱਕ ਮਾਡਲ ਖੋਲ੍ਹਦਾ ਹੈ। ਮਾਡਲ ਅਸਲ ਵਿੱਚ ਦਿਖਾਏ ਜਾਣ ਤੋਂ ਪਹਿਲਾਂ ਕਾਲਰ ਨੂੰ ਵਾਪਸ ਕਰਦਾ ਹੈ (ਭਾਵ shown.bs.modalਘਟਨਾ ਵਾਪਰਨ ਤੋਂ ਪਹਿਲਾਂ)।

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

.modal('hide')

ਹੱਥੀਂ ਇੱਕ ਮਾਡਲ ਲੁਕਾਉਂਦਾ ਹੈ। ਮਾਡਲ ਅਸਲ ਵਿੱਚ ਲੁਕਾਏ ਜਾਣ ਤੋਂ ਪਹਿਲਾਂ ਕਾਲਰ ਨੂੰ ਵਾਪਸ ਕਰਦਾ ਹੈ (ਭਾਵ hidden.bs.modalਘਟਨਾ ਵਾਪਰਨ ਤੋਂ ਪਹਿਲਾਂ)।

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

.modal('handleUpdate')

ਇੱਕ ਸਕ੍ਰੌਲਬਾਰ ਦਾ ਮੁਕਾਬਲਾ ਕਰਨ ਲਈ ਮਾਡਲ ਦੀ ਸਥਿਤੀ ਨੂੰ ਮੁੜ-ਵਿਵਸਥਿਤ ਕਰਦਾ ਹੈ ਜੇਕਰ ਕੋਈ ਦਿਖਾਈ ਦੇਣਾ ਚਾਹੀਦਾ ਹੈ, ਜੋ ਕਿ ਮਾਡਲ ਨੂੰ ਖੱਬੇ ਪਾਸੇ ਜੰਪ ਕਰੇਗਾ।

ਸਿਰਫ ਉਦੋਂ ਲੋੜ ਹੁੰਦੀ ਹੈ ਜਦੋਂ ਮੋਡਲ ਦੀ ਉਚਾਈ ਬਦਲ ਜਾਂਦੀ ਹੈ ਜਦੋਂ ਇਹ ਖੁੱਲ੍ਹਾ ਹੁੰਦਾ ਹੈ।

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

ਸਮਾਗਮ

ਬੂਟਸਟਰੈਪ ਦੀ ਮਾਡਲ ਕਲਾਸ ਮਾਡਲ ਫੰਕਸ਼ਨੈਲਿਟੀ ਨੂੰ ਜੋੜਨ ਲਈ ਕੁਝ ਘਟਨਾਵਾਂ ਨੂੰ ਉਜਾਗਰ ਕਰਦੀ ਹੈ।

ਸਾਰੀਆਂ ਮਾਡਲ ਇਵੈਂਟਾਂ ਨੂੰ ਮਾਡਲ 'ਤੇ ਹੀ ਫਾਇਰ ਕੀਤਾ ਜਾਂਦਾ ਹੈ (ਭਾਵ 'ਤੇ <div class="modal">)।

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

ਡ੍ਰੌਪਡਾਊਨ ਡਰਾਪਡਾਊਨ. js

ਉਦਾਹਰਨਾਂ

ਇਸ ਸਧਾਰਨ ਪਲੱਗਇਨ ਨਾਲ ਲਗਭਗ ਕਿਸੇ ਵੀ ਚੀਜ਼ ਵਿੱਚ ਡ੍ਰੌਪਡਾਉਨ ਮੀਨੂ ਸ਼ਾਮਲ ਕਰੋ, ਜਿਸ ਵਿੱਚ ਨਵਬਾਰ, ਟੈਬਾਂ ਅਤੇ ਗੋਲੀਆਂ ਸ਼ਾਮਲ ਹਨ।

ਇੱਕ ਨਵਬਾਰ ਦੇ ਅੰਦਰ

ਗੋਲੀਆਂ ਦੇ ਅੰਦਰ

ਵਰਤੋਂ

ਡਾਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਜਾਂ JavaScript ਰਾਹੀਂ, ਡ੍ਰੌਪਡਾਉਨ ਪਲੱਗਇਨ .openਮਾਤਾ-ਪਿਤਾ ਸੂਚੀ ਆਈਟਮ 'ਤੇ ਕਲਾਸ ਨੂੰ ਟੌਗਲ ਕਰਕੇ ਲੁਕੀ ਹੋਈ ਸਮੱਗਰੀ (ਡ੍ਰੌਪਡਾਉਨ ਮੀਨੂ) ਨੂੰ ਟੌਗਲ ਕਰਦੀ ਹੈ।

ਮੋਬਾਈਲ ਡਿਵਾਈਸਾਂ 'ਤੇ, ਡ੍ਰੌਪਡਾਉਨ ਖੋਲ੍ਹਣ ਨਾਲ .dropdown-backdropਡ੍ਰੌਪਡਾਉਨ ਮੀਨੂ ਨੂੰ ਬੰਦ ਕਰਨ ਲਈ ਇੱਕ ਟੈਪ ਖੇਤਰ ਵਜੋਂ ਜੋੜਦਾ ਹੈ ਜਦੋਂ ਮੀਨੂ ਤੋਂ ਬਾਹਰ ਟੈਪ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, ਸਹੀ iOS ਸਹਾਇਤਾ ਲਈ ਇੱਕ ਲੋੜ। ਇਸਦਾ ਮਤਲਬ ਹੈ ਕਿ ਇੱਕ ਖੁੱਲੇ ਡ੍ਰੌਪਡਾਉਨ ਮੀਨੂ ਤੋਂ ਇੱਕ ਵੱਖਰੇ ਡ੍ਰੌਪਡਾਉਨ ਮੀਨੂ ਵਿੱਚ ਬਦਲਣ ਲਈ ਮੋਬਾਈਲ 'ਤੇ ਇੱਕ ਵਾਧੂ ਟੈਪ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ।

ਨੋਟ: data-toggle="dropdown"ਵਿਸ਼ੇਸ਼ਤਾ ਇੱਕ ਐਪਲੀਕੇਸ਼ਨ ਪੱਧਰ 'ਤੇ ਡ੍ਰੌਪਡਾਉਨ ਮੀਨੂ ਨੂੰ ਬੰਦ ਕਰਨ ਲਈ ਨਿਰਭਰ ਕਰਦੀ ਹੈ, ਇਸਲਈ ਇਸਨੂੰ ਹਮੇਸ਼ਾ ਵਰਤਣਾ ਇੱਕ ਚੰਗਾ ਵਿਚਾਰ ਹੈ।

ਡਾਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਰਾਹੀਂ

data-toggle="dropdown"ਡ੍ਰੌਪਡਾਉਨ ਨੂੰ ਟੌਗਲ ਕਰਨ ਲਈ ਲਿੰਕ ਜਾਂ ਬਟਨ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰੋ।

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

ਲਿੰਕ ਬਟਨਾਂ ਨਾਲ URL ਨੂੰ ਬਰਕਰਾਰ ਰੱਖਣ ਲਈ, ਦੀ data-targetਬਜਾਏ ਵਿਸ਼ੇਸ਼ਤਾ ਦੀ ਵਰਤੋਂ ਕਰੋ 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>

JavaScript ਰਾਹੀਂ

JavaScript ਦੁਆਰਾ ਡਰਾਪਡਾਊਨ ਨੂੰ ਕਾਲ ਕਰੋ:

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

ਵਿਕਲਪ

ਕੋਈ ਨਹੀਂ

ਢੰਗ

$().dropdown('toggle')

ਦਿੱਤੇ ਗਏ ਨੇਵੀਬਾਰ ਜਾਂ ਟੈਬਡ ਨੈਵੀਗੇਸ਼ਨ ਦੇ ਡ੍ਰੌਪਡਾਉਨ ਮੀਨੂ ਨੂੰ ਟੌਗਲ ਕਰਦਾ ਹੈ।

ਸਮਾਗਮ

ਸਾਰੇ ਡ੍ਰੌਪਡਾਉਨ ਇਵੈਂਟਸ .dropdown-menuਦੇ ਮੂਲ ਤੱਤ 'ਤੇ ਫਾਇਰ ਕੀਤੇ ਜਾਂਦੇ ਹਨ।

ਸਾਰੇ ਡ੍ਰੌਪਡਾਉਨ ਇਵੈਂਟਸ ਦੀ ਇੱਕ relatedTargetਵਿਸ਼ੇਸ਼ਤਾ ਹੁੰਦੀ ਹੈ, ਜਿਸਦਾ ਮੁੱਲ ਟੌਗਲ ਕਰਨ ਵਾਲਾ ਐਂਕਰ ਤੱਤ ਹੁੰਦਾ ਹੈ।

$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})

ScrollSpy scrollspy.js

ਨਵਬਾਰ ਵਿੱਚ ਉਦਾਹਰਨ

ScrollSpy ਪਲੱਗਇਨ ਸਕ੍ਰੋਲ ਸਥਿਤੀ ਦੇ ਆਧਾਰ 'ਤੇ ਨੈਵੀ ਟੀਚਿਆਂ ਨੂੰ ਸਵੈਚਲਿਤ ਤੌਰ 'ਤੇ ਅੱਪਡੇਟ ਕਰਨ ਲਈ ਹੈ। ਨਵਬਾਰ ਦੇ ਹੇਠਾਂ ਖੇਤਰ ਨੂੰ ਸਕ੍ਰੋਲ ਕਰੋ ਅਤੇ ਸਰਗਰਮ ਕਲਾਸ ਤਬਦੀਲੀ ਦੇਖੋ। ਡ੍ਰੌਪਡਾਉਨ ਸਬ ਆਈਟਮਾਂ ਨੂੰ ਵੀ ਉਜਾਗਰ ਕੀਤਾ ਜਾਵੇਗਾ।

ਵਰਤੋਂ

ਸੰਬੰਧਿਤ ਸਥਿਤੀ ਦੀ ਲੋੜ ਹੈ

ਕੋਈ ਗੱਲ ਲਾਗੂ ਕਰਨ ਦੇ ਢੰਗ, scrollspy position: relative;ਤੁਹਾਨੂੰ 'ਤੇ ਜਾਸੂਸੀ ਕਰ ਰਹੇ ਹੋ ਤੱਤ 'ਤੇ ਵਰਤਣ ਦੀ ਲੋੜ ਹੈ. ਜ਼ਿਆਦਾਤਰ ਮਾਮਲਿਆਂ ਵਿੱਚ ਇਹ ਹੈ <body>. ਤੋਂ ਇਲਾਵਾ ਹੋਰ ਤੱਤਾਂ 'ਤੇ ਸਕ੍ਰੌਲਸਪਾਈ ਕਰਦੇ ਸਮੇਂ , ਇੱਕ ਸੈੱਟ ਅਤੇ ਲਾਗੂ <body>ਕਰਨਾ ਯਕੀਨੀ ਬਣਾਓ ।heightoverflow-y: scroll;

ਡਾਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਰਾਹੀਂ

ਆਪਣੀ ਟੌਪਬਾਰ ਨੈਵੀਗੇਸ਼ਨ ਵਿੱਚ ਆਸਾਨੀ ਨਾਲ ਸਕ੍ਰੌਲਸਪੀ ਵਿਵਹਾਰ ਨੂੰ ਸ਼ਾਮਲ data-spy="scroll"ਕਰਨ ਲਈ, ਉਸ ਤੱਤ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰੋ ਜਿਸਦੀ ਤੁਸੀਂ ਜਾਸੂਸੀ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ (ਆਮ ਤੌਰ 'ਤੇ ਇਹ ਹੋਵੇਗਾ <body>)। ਫਿਰ ਕਿਸੇ ਵੀ ਬੂਟਸਟਰੈਪ ਕੰਪੋਨੈਂਟ data-targetਦੇ ਪੇਰੈਂਟ ਐਲੀਮੈਂਟ ਦੀ ID ਜਾਂ ਕਲਾਸ ਨਾਲ ਵਿਸ਼ੇਸ਼ਤਾ ਜੋੜੋ।.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>

JavaScript ਰਾਹੀਂ

ਆਪਣੇ CSS ਵਿੱਚ ਸ਼ਾਮਲ ਕਰਨ ਤੋਂ ਬਾਅਦ position: relative;, JavaScript ਦੁਆਰਾ scrollspy ਨੂੰ ਕਾਲ ਕਰੋ:

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

ਢੰਗ

.scrollspy('refresh')

DOM ਤੋਂ ਤੱਤਾਂ ਨੂੰ ਜੋੜਨ ਜਾਂ ਹਟਾਉਣ ਦੇ ਨਾਲ scrollspy ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਸਮੇਂ, ਤੁਹਾਨੂੰ ਰਿਫਰੈਸ਼ ਵਿਧੀ ਨੂੰ ਇਸ ਤਰ੍ਹਾਂ ਕਾਲ ਕਰਨ ਦੀ ਲੋੜ ਪਵੇਗੀ:

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

ਵਿਕਲਪ

ਵਿਕਲਪਾਂ ਨੂੰ ਡੇਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਜਾਂ JavaScript ਦੁਆਰਾ ਪਾਸ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ। ਡੇਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਲਈ, ਵਿਕਲਪ ਦਾ ਨਾਮ ਸ਼ਾਮਲ ਕਰੋ data-, ਜਿਵੇਂ ਕਿ ਵਿੱਚ data-offset=""।

ਸਮਾਗਮ

$('#myScrollspy').on('activate.bs.scrollspy', function () {
  // do something…
})

ਟੌਗਲ ਕਰਨ ਯੋਗ ਟੈਬਾਂ tab.js

ਉਦਾਹਰਨ ਟੈਬਾਂ

ਸਥਾਨਕ ਸਮਗਰੀ ਦੇ ਪੈਨਾਂ ਰਾਹੀਂ ਤਬਦੀਲੀ ਕਰਨ ਲਈ ਤੇਜ਼, ਗਤੀਸ਼ੀਲ ਟੈਬ ਕਾਰਜਕੁਸ਼ਲਤਾ ਸ਼ਾਮਲ ਕਰੋ, ਇੱਥੋਂ ਤੱਕ ਕਿ ਡ੍ਰੌਪਡਾਉਨ ਮੀਨੂ ਰਾਹੀਂ ਵੀ। ਨੇਸਟਡ ਟੈਬਾਂ ਸਮਰਥਿਤ ਨਹੀਂ ਹਨ।

ਵਰਤੋਂ

JavaScript ਰਾਹੀਂ ਟੈਬਬਲ ਟੈਬਾਂ ਨੂੰ ਸਮਰੱਥ ਬਣਾਓ (ਹਰੇਕ ਟੈਬ ਨੂੰ ਵੱਖਰੇ ਤੌਰ 'ਤੇ ਕਿਰਿਆਸ਼ੀਲ ਕਰਨ ਦੀ ਲੋੜ ਹੈ):

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

ਤੁਸੀਂ ਵਿਅਕਤੀਗਤ ਟੈਬਾਂ ਨੂੰ ਕਈ ਤਰੀਕਿਆਂ ਨਾਲ ਸਰਗਰਮ ਕਰ ਸਕਦੇ ਹੋ:

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

ਮਾਰਕਅੱਪ

data-toggle="tab"ਤੁਸੀਂ ਕਿਸੇ ਵੀ ਜਾਵਾ ਸਕ੍ਰਿਪਟ ਨੂੰ ਸਿਰਫ਼ ਨਿਰਧਾਰਿਤ ਕਰਕੇ ਜਾਂ data-toggle="pill"ਕਿਸੇ ਤੱਤ 'ਤੇ ਲਿਖੇ ਬਿਨਾਂ ਇੱਕ ਟੈਬ ਜਾਂ ਪਿਲ ਨੈਵੀਗੇਸ਼ਨ ਨੂੰ ਸਰਗਰਮ ਕਰ ਸਕਦੇ ਹੋ । navਟੈਬ ਵਿੱਚ ਅਤੇ nav-tabsਕਲਾਸਾਂ ਨੂੰ ਜੋੜਨ ulਨਾਲ ਬੂਟਸਟਰੈਪ ਟੈਬ ਸਟਾਈਲਿੰਗ ਲਾਗੂ ਹੋਵੇਗੀ , ਜਦੋਂ ਕਿ navਅਤੇ nav-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ਹਰੇਕ ਵਿੱਚ ਜੋੜੋ .tab-pane। ਪਹਿਲੇ ਟੈਬ ਪੈਨ ਨੂੰ ਵੀ .inਸ਼ੁਰੂਆਤੀ ਸਮੱਗਰੀ ਨੂੰ ਦ੍ਰਿਸ਼ਮਾਨ ਬਣਾਉਣਾ ਚਾਹੀਦਾ ਹੈ।

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

ਢੰਗ

$().tab

ਇੱਕ ਟੈਬ ਤੱਤ ਅਤੇ ਸਮੱਗਰੀ ਕੰਟੇਨਰ ਨੂੰ ਸਰਗਰਮ ਕਰਦਾ ਹੈ। ਟੈਬ ਵਿੱਚ DOM ਵਿੱਚ ਇੱਕ data-targetਜਾਂ hrefਇੱਕ ਕੰਟੇਨਰ ਨੋਡ ਨੂੰ ਨਿਸ਼ਾਨਾ ਬਣਾਉਣਾ ਚਾਹੀਦਾ ਹੈ। ਉਪਰੋਕਤ ਉਦਾਹਰਨਾਂ ਵਿੱਚ, ਟੈਬ ਗੁਣਾਂ ਵਾਲੇ <a>s ਹਨ।data-toggle="tab"

.tab('show')

ਦਿੱਤੀ ਗਈ ਟੈਬ ਨੂੰ ਚੁਣਦਾ ਹੈ ਅਤੇ ਇਸ ਨਾਲ ਸੰਬੰਧਿਤ ਸਮੱਗਰੀ ਦਿਖਾਉਂਦਾ ਹੈ। ਕੋਈ ਵੀ ਹੋਰ ਟੈਬ ਜੋ ਪਹਿਲਾਂ ਚੁਣੀ ਗਈ ਸੀ, ਅਣ-ਚੁਣਿਆ ਜਾਂਦਾ ਹੈ ਅਤੇ ਇਸ ਨਾਲ ਸੰਬੰਧਿਤ ਸਮੱਗਰੀ ਲੁਕ ਜਾਂਦੀ ਹੈ। ਟੈਬ ਪੈਨ ਦੇ ਅਸਲ ਵਿੱਚ ਵਿਖਾਏ ਜਾਣ ਤੋਂ ਪਹਿਲਾਂ ਕਾਲਰ ਨੂੰ ਵਾਪਸ ਕਰਦਾ ਹੈ (ਭਾਵ shown.bs.tabਘਟਨਾ ਵਾਪਰਨ ਤੋਂ ਪਹਿਲਾਂ)।

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

ਸਮਾਗਮ

ਇੱਕ ਨਵੀਂ ਟੈਬ ਦਿਖਾਉਂਦੇ ਸਮੇਂ, ਇਵੈਂਟਸ ਹੇਠਾਂ ਦਿੱਤੇ ਕ੍ਰਮ ਵਿੱਚ ਚਾਲੂ ਹੁੰਦੇ ਹਨ:

1. hide.bs.tab(ਮੌਜੂਦਾ ਸਰਗਰਮ ਟੈਬ 'ਤੇ)
2. show.bs.tab(ਦਿਖਾਈ ਜਾਣ ਵਾਲੀ ਟੈਬ 'ਤੇ)
3. hidden.bs.tabhide.bs.tab(ਪਿਛਲੀ ਕਿਰਿਆਸ਼ੀਲ ਟੈਬ 'ਤੇ, ਇਵੈਂਟ ਲਈ ਉਹੀ )
4. shown.bs.tabshow.bs.tab(ਨਵੇਂ-ਸਰਗਰਮ ਹੁਣੇ-ਦਿਖਾਈ ਗਈ ਟੈਬ 'ਤੇ, ਘਟਨਾ ਲਈ ਉਹੀ )

ਜੇਕਰ ਕੋਈ ਟੈਬ ਪਹਿਲਾਂ ਹੀ ਕਿਰਿਆਸ਼ੀਲ ਨਹੀਂ ਸੀ, ਤਾਂ hide.bs.tabਅਤੇ hidden.bs.tabਇਵੈਂਟਾਂ ਨੂੰ ਚਾਲੂ ਨਹੀਂ ਕੀਤਾ ਜਾਵੇਗਾ।

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})

ਟੂਲਟਿਪਸ tooltip.js

ਜੇਸਨ ਫਰੇਮ ਦੁਆਰਾ ਲਿਖੇ ਸ਼ਾਨਦਾਰ jQuery.tipsy ਪਲੱਗਇਨ ਤੋਂ ਪ੍ਰੇਰਿਤ; ਟੂਲਟਿਪਸ ਇੱਕ ਅੱਪਡੇਟ ਕੀਤਾ ਸੰਸਕਰਣ ਹੈ, ਜੋ ਚਿੱਤਰਾਂ 'ਤੇ ਨਿਰਭਰ ਨਹੀਂ ਕਰਦਾ, ਐਨੀਮੇਸ਼ਨਾਂ ਲਈ CSS3 ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ, ਅਤੇ ਸਥਾਨਕ ਸਿਰਲੇਖ ਸਟੋਰੇਜ ਲਈ ਡਾਟਾ-ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ।

ਜ਼ੀਰੋ-ਲੰਬਾਈ ਦੇ ਸਿਰਲੇਖਾਂ ਵਾਲੇ ਟੂਲਟਿੱਪ ਕਦੇ ਵੀ ਪ੍ਰਦਰਸ਼ਿਤ ਨਹੀਂ ਹੁੰਦੇ ਹਨ।

ਉਦਾਹਰਨਾਂ

ਟੂਲਟਿਪਸ ਦੇਖਣ ਲਈ ਹੇਠਾਂ ਦਿੱਤੇ ਲਿੰਕਾਂ 'ਤੇ ਹੋਵਰ ਕਰੋ:

ਸਥਿਰ ਟੂਲਟਿਪ

ਚਾਰ ਵਿਕਲਪ ਉਪਲਬਧ ਹਨ: ਉੱਪਰ, ਸੱਜੇ, ਹੇਠਾਂ, ਅਤੇ ਖੱਬਾ ਇਕਸਾਰ।

ਚਾਰ ਦਿਸ਼ਾਵਾਂ

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

ਵਰਤੋਂ

ਟੂਲਟਿਪ ਪਲੱਗਇਨ ਮੰਗ 'ਤੇ ਸਮੱਗਰੀ ਅਤੇ ਮਾਰਕਅੱਪ ਬਣਾਉਂਦਾ ਹੈ, ਅਤੇ ਡਿਫੌਲਟ ਤੌਰ 'ਤੇ ਉਹਨਾਂ ਦੇ ਟਰਿੱਗਰ ਤੱਤ ਦੇ ਬਾਅਦ ਟੂਲਟਿਪ ਰੱਖਦਾ ਹੈ।

JavaScript ਦੁਆਰਾ ਟੂਲਟਿਪ ਨੂੰ ਟਰਿੱਗਰ ਕਰੋ:

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

ਮਾਰਕਅੱਪ

ਟੂਲਟਿਪ ਲਈ ਲੋੜੀਂਦਾ ਮਾਰਕਅੱਪ ਸਿਰਫ਼ ਇੱਕ dataਵਿਸ਼ੇਸ਼ਤਾ ਹੈ ਅਤੇ titleHTML ਤੱਤ 'ਤੇ ਤੁਸੀਂ ਟੂਲਟਿਪ ਲੈਣਾ ਚਾਹੁੰਦੇ ਹੋ। ਇੱਕ ਟੂਲਟਿਪ ਦਾ ਤਿਆਰ ਕੀਤਾ ਮਾਰਕਅੱਪ ਕਾਫ਼ੀ ਸਧਾਰਨ ਹੈ, ਹਾਲਾਂਕਿ ਇਸਨੂੰ ਇੱਕ ਸਥਿਤੀ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ (ਮੂਲ ਰੂਪ ਵਿੱਚ, topਪਲੱਗਇਨ ਦੁਆਰਾ ਸੈੱਟ ਕੀਤਾ ਗਿਆ ਹੈ)।

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

ਵਿਕਲਪ

ਵਿਕਲਪਾਂ ਨੂੰ ਡੇਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਜਾਂ JavaScript ਦੁਆਰਾ ਪਾਸ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ। ਡੇਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਲਈ, ਵਿਕਲਪ ਦਾ ਨਾਮ ਸ਼ਾਮਲ ਕਰੋ data-, ਜਿਵੇਂ ਕਿ ਵਿੱਚ data-animation=""।

ਢੰਗ

$().tooltip(options)

ਇੱਕ ਤੱਤ ਸੰਗ੍ਰਹਿ ਵਿੱਚ ਇੱਕ ਟੂਲਟਿਪ ਹੈਂਡਲਰ ਨੱਥੀ ਕਰਦਾ ਹੈ।

.tooltip('show')

ਇੱਕ ਤੱਤ ਦੇ ਟੂਲਟਿਪ ਨੂੰ ਪ੍ਰਗਟ ਕਰਦਾ ਹੈ। ਟੂਲਟਿਪ ਅਸਲ ਵਿੱਚ ਵਿਖਾਏ ਜਾਣ ਤੋਂ ਪਹਿਲਾਂ ਕਾਲਰ ਨੂੰ ਵਾਪਸ ਆਉਂਦੀ ਹੈ (ਭਾਵ shown.bs.tooltipਘਟਨਾ ਵਾਪਰਨ ਤੋਂ ਪਹਿਲਾਂ)। ਇਸਨੂੰ ਟੂਲਟਿਪ ਦਾ "ਮੈਨੁਅਲ" ਟ੍ਰਿਗਰਿੰਗ ਮੰਨਿਆ ਜਾਂਦਾ ਹੈ। ਜ਼ੀਰੋ-ਲੰਬਾਈ ਦੇ ਸਿਰਲੇਖਾਂ ਵਾਲੇ ਟੂਲਟਿੱਪ ਕਦੇ ਵੀ ਪ੍ਰਦਰਸ਼ਿਤ ਨਹੀਂ ਹੁੰਦੇ ਹਨ।

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

.tooltip('hide')

ਕਿਸੇ ਤੱਤ ਦੀ ਟੂਲਟਿਪ ਨੂੰ ਲੁਕਾਉਂਦਾ ਹੈ। ਟੂਲਟਿਪ ਨੂੰ ਅਸਲ ਵਿੱਚ ਲੁਕਾਉਣ ਤੋਂ ਪਹਿਲਾਂ ਕਾਲਰ ਨੂੰ ਵਾਪਸ ਕਰਦਾ ਹੈ (ਭਾਵ hidden.bs.tooltipਘਟਨਾ ਵਾਪਰਨ ਤੋਂ ਪਹਿਲਾਂ)। ਇਸਨੂੰ ਟੂਲਟਿਪ ਦਾ "ਮੈਨੁਅਲ" ਟ੍ਰਿਗਰਿੰਗ ਮੰਨਿਆ ਜਾਂਦਾ ਹੈ।

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

.tooltip('toggle')

ਕਿਸੇ ਤੱਤ ਦੀ ਟੂਲਟਿਪ ਨੂੰ ਟੌਗਲ ਕਰਦਾ ਹੈ। ਟੂਲਟਿਪ ਦੇ ਅਸਲ ਵਿੱਚ ਦਿਖਾਏ ਜਾਂ ਲੁਕਾਏ ਜਾਣ ਤੋਂ ਪਹਿਲਾਂ ਕਾਲਰ ਕੋਲ ਵਾਪਸ ਆ ਜਾਂਦਾ ਹੈ (ਭਾਵ shown.bs.tooltipਜਾਂ hidden.bs.tooltipਘਟਨਾ ਵਾਪਰਨ ਤੋਂ ਪਹਿਲਾਂ)। ਇਸਨੂੰ ਟੂਲਟਿਪ ਦਾ "ਮੈਨੁਅਲ" ਟ੍ਰਿਗਰਿੰਗ ਮੰਨਿਆ ਜਾਂਦਾ ਹੈ।

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

.tooltip('destroy')

ਕਿਸੇ ਤੱਤ ਦੀ ਟੂਲਟਿਪ ਨੂੰ ਲੁਕਾਉਂਦਾ ਅਤੇ ਨਸ਼ਟ ਕਰਦਾ ਹੈ। ਟੂਲਟਿਪਸ ਜੋ ਡੈਲੀਗੇਸ਼ਨ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਨ (ਜੋ ਵਿਕਲਪ ਦੀ ਵਰਤੋਂ ਕਰਕੇselector ਬਣਾਏ ਗਏ ਹਨ ) ਨੂੰ ਵੰਸ਼ਜ ਟਰਿੱਗਰ ਤੱਤਾਂ 'ਤੇ ਵਿਅਕਤੀਗਤ ਤੌਰ 'ਤੇ ਨਸ਼ਟ ਨਹੀਂ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ।

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

ਸਮਾਗਮ

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

Popovers popover.js

ਹਾਊਸਿੰਗ ਸੈਕੰਡਰੀ ਜਾਣਕਾਰੀ ਲਈ ਕਿਸੇ ਵੀ ਤੱਤ ਵਿੱਚ ਸਮੱਗਰੀ ਦੇ ਛੋਟੇ ਓਵਰਲੇ ਸ਼ਾਮਲ ਕਰੋ, ਜਿਵੇਂ ਕਿ ਆਈਪੈਡ 'ਤੇ।

Popovers ਜਿਨ੍ਹਾਂ ਦਾ ਸਿਰਲੇਖ ਅਤੇ ਸਮੱਗਰੀ ਦੋਵੇਂ ਜ਼ੀਰੋ-ਲੰਬਾਈ ਹਨ, ਕਦੇ ਪ੍ਰਦਰਸ਼ਿਤ ਨਹੀਂ ਕੀਤੇ ਜਾਂਦੇ ਹਨ।

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

ਉਦਾਹਰਨਾਂ

ਸਥਿਰ ਪੌਪਓਵਰ

ਚਾਰ ਵਿਕਲਪ ਉਪਲਬਧ ਹਨ: ਉੱਪਰ, ਸੱਜੇ, ਹੇਠਾਂ, ਅਤੇ ਖੱਬਾ ਇਕਸਾਰ।

ਲਾਈਵ ਡੈਮੋ

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

ਚਾਰ ਦਿਸ਼ਾਵਾਂ

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

ਅਗਲੀ ਕਲਿੱਕ 'ਤੇ ਖਾਰਜ ਕਰੋ

focusਉਪਭੋਗਤਾ ਦੁਆਰਾ ਕੀਤੀ ਗਈ ਅਗਲੀ ਕਲਿੱਕ 'ਤੇ ਪੋਪਓਵਰ ਨੂੰ ਖਾਰਜ ਕਰਨ ਲਈ ਟਰਿੱਗਰ ਦੀ ਵਰਤੋਂ ਕਰੋ।

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

ਵਰਤੋਂ

JavaScript ਦੁਆਰਾ ਪੌਪਓਵਰ ਨੂੰ ਸਮਰੱਥ ਬਣਾਓ:

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

ਵਿਕਲਪ

ਵਿਕਲਪਾਂ ਨੂੰ ਡੇਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਜਾਂ JavaScript ਦੁਆਰਾ ਪਾਸ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ। ਡੇਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਲਈ, ਵਿਕਲਪ ਦਾ ਨਾਮ ਸ਼ਾਮਲ ਕਰੋ data-, ਜਿਵੇਂ ਕਿ ਵਿੱਚ data-animation=""।

ਢੰਗ

$().popover(options)

ਇੱਕ ਤੱਤ ਸੰਗ੍ਰਹਿ ਲਈ ਪੌਪਓਵਰ ਸ਼ੁਰੂ ਕਰਦਾ ਹੈ।

.popover('show')

ਕਿਸੇ ਤੱਤ ਦੇ ਪੌਪਓਵਰ ਨੂੰ ਦਰਸਾਉਂਦਾ ਹੈ। ਪੌਪਓਵਰ ਅਸਲ ਵਿੱਚ ਦਿਖਾਏ ਜਾਣ ਤੋਂ ਪਹਿਲਾਂ ਕਾਲਰ ਨੂੰ ਵਾਪਸ ਕਰਦਾ ਹੈ (ਭਾਵ shown.bs.popoverਘਟਨਾ ਵਾਪਰਨ ਤੋਂ ਪਹਿਲਾਂ)। ਇਸਨੂੰ ਪੌਪਓਵਰ ਦਾ "ਮੈਨੁਅਲ" ਟ੍ਰਿਗਰਿੰਗ ਮੰਨਿਆ ਜਾਂਦਾ ਹੈ। Popovers ਜਿਨ੍ਹਾਂ ਦਾ ਸਿਰਲੇਖ ਅਤੇ ਸਮੱਗਰੀ ਦੋਵੇਂ ਜ਼ੀਰੋ-ਲੰਬਾਈ ਹਨ, ਕਦੇ ਪ੍ਰਦਰਸ਼ਿਤ ਨਹੀਂ ਕੀਤੇ ਜਾਂਦੇ ਹਨ।

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

.popover('hide')

ਕਿਸੇ ਤੱਤ ਦੇ ਪੌਪਓਵਰ ਨੂੰ ਲੁਕਾਉਂਦਾ ਹੈ। ਪੌਪਓਵਰ ਅਸਲ ਵਿੱਚ ਲੁਕਾਏ ਜਾਣ ਤੋਂ ਪਹਿਲਾਂ ਕਾਲਰ ਨੂੰ ਵਾਪਸ ਕਰਦਾ ਹੈ (ਭਾਵ hidden.bs.popoverਘਟਨਾ ਵਾਪਰਨ ਤੋਂ ਪਹਿਲਾਂ)। ਇਸਨੂੰ ਪੌਪਓਵਰ ਦਾ "ਮੈਨੁਅਲ" ਟ੍ਰਿਗਰਿੰਗ ਮੰਨਿਆ ਜਾਂਦਾ ਹੈ।

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

.popover('toggle')

ਕਿਸੇ ਤੱਤ ਦੇ ਪੌਪਓਵਰ ਨੂੰ ਟੌਗਲ ਕਰਦਾ ਹੈ। ਪੌਪਓਵਰ ਅਸਲ ਵਿੱਚ ਦਿਖਾਏ ਜਾਂ ਲੁਕਾਏ ਜਾਣ ਤੋਂ ਪਹਿਲਾਂ ਕਾਲਰ ਨੂੰ ਵਾਪਸ ਕਰਦਾ ਹੈ (ਭਾਵ shown.bs.popoverਜਾਂ hidden.bs.popoverਘਟਨਾ ਵਾਪਰਨ ਤੋਂ ਪਹਿਲਾਂ)। ਇਸਨੂੰ ਪੌਪਓਵਰ ਦਾ "ਮੈਨੁਅਲ" ਟ੍ਰਿਗਰਿੰਗ ਮੰਨਿਆ ਜਾਂਦਾ ਹੈ।

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

.popover('destroy')

ਇੱਕ ਤੱਤ ਦੇ ਪੌਪਓਵਰ ਨੂੰ ਲੁਕਾਉਂਦਾ ਅਤੇ ਨਸ਼ਟ ਕਰਦਾ ਹੈ। ਡੈਲੀਗੇਸ਼ਨ ਦੀ ਵਰਤੋਂ ਕਰਨ ਵਾਲੇ ਪੌਪਓਵਰ (ਜੋ ਵਿਕਲਪ ਦੀ ਵਰਤੋਂ ਕਰਕੇselector ਬਣਾਏ ਗਏ ਹਨ ) ਨੂੰ ਵੰਸ਼ਜ ਟਰਿੱਗਰ ਤੱਤਾਂ 'ਤੇ ਵਿਅਕਤੀਗਤ ਤੌਰ 'ਤੇ ਨਸ਼ਟ ਨਹੀਂ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ।

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

ਸਮਾਗਮ

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

ਚੇਤਾਵਨੀ ਸੁਨੇਹੇ alert.js

ਉਦਾਹਰਨ ਚੇਤਾਵਨੀਆਂ

ਇਸ ਪਲੱਗਇਨ ਨਾਲ ਸਾਰੇ ਚੇਤਾਵਨੀ ਸੰਦੇਸ਼ਾਂ ਵਿੱਚ ਖਾਰਜ ਕਾਰਜਸ਼ੀਲਤਾ ਸ਼ਾਮਲ ਕਰੋ।

ਇੱਕ .closeਬਟਨ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਸਮੇਂ, ਇਹ ਲਾਜ਼ਮੀ ਤੌਰ 'ਤੇ ਦਾ ਪਹਿਲਾ ਬੱਚਾ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ .alert-dismissibleਅਤੇ ਮਾਰਕਅੱਪ ਵਿੱਚ ਇਸ ਤੋਂ ਪਹਿਲਾਂ ਕੋਈ ਟੈਕਸਟ ਸਮੱਗਰੀ ਨਹੀਂ ਆ ਸਕਦੀ ਹੈ।

ਵਰਤੋਂ

data-dismiss="alert"ਸਵੈਚਲਿਤ ਤੌਰ 'ਤੇ ਅਲਰਟ ਨਜ਼ਦੀਕੀ ਕਾਰਜਸ਼ੀਲਤਾ ਦੇਣ ਲਈ ਬਸ ਆਪਣੇ ਬੰਦ ਬਟਨ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰੋ। ਇੱਕ ਚੇਤਾਵਨੀ ਨੂੰ ਬੰਦ ਕਰਨਾ ਇਸਨੂੰ DOM ਤੋਂ ਹਟਾ ਦਿੰਦਾ ਹੈ।

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

ਤੁਹਾਡੇ ਸੁਚੇਤਨਾਵਾਂ ਨੂੰ ਬੰਦ ਕਰਨ ਵੇਲੇ ਐਨੀਮੇਸ਼ਨ ਦੀ ਵਰਤੋਂ ਕਰਨ ਲਈ, ਯਕੀਨੀ ਬਣਾਓ ਕਿ ਉਹਨਾਂ ਕੋਲ ਪਹਿਲਾਂ ਤੋਂ ਹੀ ਲਾਗੂ ਹਨ .fadeਅਤੇ .inਕਲਾਸਾਂ ਹਨ।

ਢੰਗ

$().alert()

data-dismiss="alert"ਵਿਸ਼ੇਸ਼ਤਾ ਵਾਲੇ ਉੱਤਰਾਧਿਕਾਰੀ ਤੱਤਾਂ 'ਤੇ ਕਲਿੱਕ ਇਵੈਂਟਾਂ ਲਈ ਇੱਕ ਚੇਤਾਵਨੀ ਸੁਣਦਾ ਹੈ । (ਡਾਟਾ-ਏਪੀਆਈ ਦੀ ਸਵੈ-ਸ਼ੁਰੂਆਤ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਸਮੇਂ ਜ਼ਰੂਰੀ ਨਹੀਂ ਹੈ।)

$().alert('close')

ਇੱਕ ਚੇਤਾਵਨੀ ਨੂੰ DOM ਤੋਂ ਹਟਾ ਕੇ ਬੰਦ ਕਰਦਾ ਹੈ। ਜੇਕਰ ਐਲੀਮੈਂਟ 'ਤੇ .fadeਅਤੇ .inਕਲਾਸ ਮੌਜੂਦ ਹਨ, ਤਾਂ ਇਸ ਨੂੰ ਹਟਾਉਣ ਤੋਂ ਪਹਿਲਾਂ ਅਲਰਟ ਖਤਮ ਹੋ ਜਾਵੇਗਾ।

ਸਮਾਗਮ

ਬੂਟਸਟਰੈਪ ਦਾ ਅਲਰਟ ਪਲੱਗਇਨ ਚੇਤਾਵਨੀ ਕਾਰਜਕੁਸ਼ਲਤਾ ਨੂੰ ਜੋੜਨ ਲਈ ਕੁਝ ਘਟਨਾਵਾਂ ਦਾ ਪਰਦਾਫਾਸ਼ ਕਰਦਾ ਹੈ।

$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})

ਬਟਨ button.js

ਬਟਨਾਂ ਨਾਲ ਹੋਰ ਕਰੋ। ਕੰਟਰੋਲ ਬਟਨ ਸਟੇਟਸ ਜਾਂ ਟੂਲਬਾਰ ਵਰਗੇ ਹੋਰ ਹਿੱਸਿਆਂ ਲਈ ਬਟਨਾਂ ਦੇ ਸਮੂਹ ਬਣਾਓ।

ਸਟੇਟਫੁੱਲ

data-loading-text="Loading..."ਇੱਕ ਬਟਨ 'ਤੇ ਲੋਡਿੰਗ ਸਥਿਤੀ ਦੀ ਵਰਤੋਂ ਕਰਨ ਲਈ ਜੋੜੋ ।

ਇਹ ਵਿਸ਼ੇਸ਼ਤਾ v3.3.5 ਤੋਂ ਬਰਤਰਫ਼ ਹੈ ਅਤੇ 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>

ਸਿੰਗਲ ਟੌਗਲ

data-toggle="button"ਇੱਕ ਸਿੰਗਲ ਬਟਨ 'ਤੇ ਟੌਗਲਿੰਗ ਨੂੰ ਸਰਗਰਮ ਕਰਨ ਲਈ ਸ਼ਾਮਲ ਕਰੋ।

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

ਚੈੱਕਬਾਕਸ / ਰੇਡੀਓ

ਉਹਨਾਂ ਦੀਆਂ ਸੰਬੰਧਿਤ ਸ਼ੈਲੀਆਂ ਵਿੱਚ ਟੌਗਲਿੰਗ ਨੂੰ ਸਮਰੱਥ ਬਣਾਉਣ data-toggle="buttons"ਲਈ ਇੱਕ .btn-groupਰੱਖਣ ਵਾਲੇ ਚੈਕਬਾਕਸ ਜਾਂ ਰੇਡੀਓ ਇਨਪੁਟਸ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰੋ।

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

ਢੰਗ

$().button('toggle')

ਪੁਸ਼ ਸਥਿਤੀ ਨੂੰ ਟੌਗਲ ਕਰਦਾ ਹੈ। ਬਟਨ ਨੂੰ ਇਹ ਦਿੱਖ ਦਿੰਦਾ ਹੈ ਕਿ ਇਹ ਕਿਰਿਆਸ਼ੀਲ ਹੋ ਗਿਆ ਹੈ।

$().button('reset')

ਬਟਨ ਸਥਿਤੀ ਨੂੰ ਰੀਸੈੱਟ ਕਰਦਾ ਹੈ - ਟੈਕਸਟ ਨੂੰ ਮੂਲ ਟੈਕਸਟ ਵਿੱਚ ਬਦਲਦਾ ਹੈ। ਇਹ ਵਿਧੀ ਅਸਿੰਕ੍ਰੋਨਸ ਹੈ ਅਤੇ ਰੀਸੈਟਿੰਗ ਅਸਲ ਵਿੱਚ ਪੂਰੀ ਹੋਣ ਤੋਂ ਪਹਿਲਾਂ ਵਾਪਸ ਆਉਂਦੀ ਹੈ।

$().button(string)

ਟੈਕਸਟ ਨੂੰ ਕਿਸੇ ਵੀ ਡੇਟਾ ਪਰਿਭਾਸ਼ਿਤ ਟੈਕਸਟ ਸਥਿਤੀ ਵਿੱਚ ਬਦਲਦਾ ਹੈ।

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

collapse.js ਨੂੰ ਸੰਕੁਚਿਤ ਕਰੋ

ਲਚਕਦਾਰ ਪਲੱਗਇਨ ਜੋ ਆਸਾਨ ਟੌਗਲ ਵਿਵਹਾਰ ਲਈ ਮੁੱਠੀ ਭਰ ਕਲਾਸਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ।

ਉਦਾਹਰਨ

ਕਲਾਸ ਤਬਦੀਲੀਆਂ ਰਾਹੀਂ ਕਿਸੇ ਹੋਰ ਤੱਤ ਨੂੰ ਦਿਖਾਉਣ ਅਤੇ ਲੁਕਾਉਣ ਲਈ ਹੇਠਾਂ ਦਿੱਤੇ ਬਟਨਾਂ 'ਤੇ ਕਲਿੱਕ ਕਰੋ:

• .collapseਸਮੱਗਰੀ ਨੂੰ ਲੁਕਾਉਂਦਾ ਹੈ
• .collapsingਪਰਿਵਰਤਨ ਦੌਰਾਨ ਲਾਗੂ ਕੀਤਾ ਜਾਂਦਾ ਹੈ
• .collapse.inਸਮੱਗਰੀ ਦਿਖਾਉਂਦਾ ਹੈ

ਤੁਸੀਂ ਵਿਸ਼ੇਸ਼ਤਾ ਦੇ ਨਾਲ ਇੱਕ ਲਿੰਕ href, ਜਾਂ ਵਿਸ਼ੇਸ਼ਤਾ ਦੇ ਨਾਲ ਇੱਕ ਬਟਨ ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹੋ data-target। ਦੋਵਾਂ ਮਾਮਲਿਆਂ ਵਿੱਚ, data-toggle="collapse"ਲੋੜੀਂਦਾ ਹੈ.

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

Accordion ਉਦਾਹਰਨ

ਪੈਨਲ ਕੰਪੋਨੈਂਟ ਦੇ ਨਾਲ ਇੱਕ ਅਕਾਰਡੀਅਨ ਬਣਾਉਣ ਲਈ ਡਿਫੌਲਟ ਸਮੇਟਣ ਦੇ ਵਿਹਾਰ ਨੂੰ ਵਧਾਓ।

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

.panel-bodys ਨੂੰ s ਨਾਲ ਸਵੈਪ ਕਰਨਾ ਵੀ ਸੰਭਵ ਹੈ .list-group।

ਵਰਤੋਂ

ਸਮੇਟਣਾ ਪਲੱਗਇਨ ਭਾਰੀ ਲਿਫਟਿੰਗ ਨੂੰ ਸੰਭਾਲਣ ਲਈ ਕੁਝ ਕਲਾਸਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ:

• .collapseਸਮੱਗਰੀ ਨੂੰ ਲੁਕਾਉਂਦਾ ਹੈ
• .collapse.inਸਮੱਗਰੀ ਨੂੰ ਦਿਖਾਉਂਦਾ ਹੈ
• .collapsingਜਦੋਂ ਪਰਿਵਰਤਨ ਸ਼ੁਰੂ ਹੁੰਦਾ ਹੈ ਤਾਂ ਜੋੜਿਆ ਜਾਂਦਾ ਹੈ, ਅਤੇ ਜਦੋਂ ਇਹ ਖਤਮ ਹੁੰਦਾ ਹੈ ਤਾਂ ਹਟਾ ਦਿੱਤਾ ਜਾਂਦਾ ਹੈ

ਇਹ ਕਲਾਸਾਂ ਵਿੱਚ ਲੱਭੀਆਂ ਜਾ ਸਕਦੀਆਂ ਹਨ component-animations.less।

ਡਾਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਰਾਹੀਂ

ਇੱਕ ਸਮੇਟਣਯੋਗ ਤੱਤ ਦੇ ਨਿਯੰਤਰਣ ਨੂੰ ਸਵੈਚਲਿਤ ਤੌਰ 'ਤੇ ਨਿਰਧਾਰਤ ਕਰਨ ਲਈ ਤੱਤ ਵਿੱਚ ਬਸ ਜੋੜੋ data-toggle="collapse"ਅਤੇ a । ਵਿਸ਼ੇਸ਼ਤਾ ਸਮੇਟਣ ਨੂੰ ਲਾਗੂ ਕਰਨ ਲਈ ਇੱਕ CSS ਚੋਣਕਾਰ ਨੂੰ ਸਵੀਕਾਰ ਕਰਦੀ ਹੈ data-target। ਕਲਾਸ ਨੂੰ ਸਮੇਟਣਯੋਗ ਤੱਤ ਵਿੱਚ data-targetਸ਼ਾਮਲ ਕਰਨਾ ਯਕੀਨੀ ਬਣਾਓ । collapseਜੇਕਰ ਤੁਸੀਂ ਇਸਨੂੰ ਡਿਫੌਲਟ ਖੋਲ੍ਹਣਾ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ ਵਾਧੂ ਕਲਾਸ ਸ਼ਾਮਲ ਕਰੋ in।

ਇੱਕ ਸਮੇਟਣਯੋਗ ਨਿਯੰਤਰਣ ਵਿੱਚ ਅਕਾਰਡੀਅਨ-ਵਰਗੇ ਸਮੂਹ ਪ੍ਰਬੰਧਨ ਨੂੰ ਜੋੜਨ ਲਈ, ਡੇਟਾ ਵਿਸ਼ੇਸ਼ਤਾ ਸ਼ਾਮਲ ਕਰੋ data-parent="#selector"। ਇਸ ਨੂੰ ਕਾਰਵਾਈ ਵਿੱਚ ਦੇਖਣ ਲਈ ਡੈਮੋ ਵੇਖੋ।

JavaScript ਰਾਹੀਂ

ਇਸ ਨਾਲ ਹੱਥੀਂ ਯੋਗ ਕਰੋ:

$('.collapse').collapse()

ਵਿਕਲਪ

ਵਿਕਲਪਾਂ ਨੂੰ ਡੇਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਜਾਂ JavaScript ਦੁਆਰਾ ਪਾਸ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ। ਡੇਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਲਈ, ਵਿਕਲਪ ਦਾ ਨਾਮ ਸ਼ਾਮਲ ਕਰੋ data-, ਜਿਵੇਂ ਕਿ ਵਿੱਚ data-parent=""।

ਢੰਗ

.collapse(options)

ਤੁਹਾਡੀ ਸਮਗਰੀ ਨੂੰ ਇੱਕ ਸਮੇਟਣਯੋਗ ਤੱਤ ਦੇ ਰੂਪ ਵਿੱਚ ਕਿਰਿਆਸ਼ੀਲ ਕਰਦਾ ਹੈ। ਇੱਕ ਵਿਕਲਪਿਕ ਵਿਕਲਪ ਸਵੀਕਾਰ ਕਰਦਾ ਹੈ object।

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

.collapse('toggle')

ਇੱਕ ਸਮੇਟਣਯੋਗ ਤੱਤ ਨੂੰ ਦਿਖਾਉਣ ਜਾਂ ਲੁਕਾਉਣ ਲਈ ਟੌਗਲ ਕਰਦਾ ਹੈ। ਸਮੇਟਣਯੋਗ ਤੱਤ ਅਸਲ ਵਿੱਚ ਦਿਖਾਏ ਜਾਂ ਲੁਕਾਏ ਜਾਣ ਤੋਂ ਪਹਿਲਾਂ ਕਾਲਰ ਨੂੰ ਵਾਪਸ ਕਰਦਾ ਹੈ (ਭਾਵ shown.bs.collapseਜਾਂ hidden.bs.collapseਘਟਨਾ ਵਾਪਰਨ ਤੋਂ ਪਹਿਲਾਂ)।

.collapse('show')

ਇੱਕ ਸਮੇਟਣਯੋਗ ਤੱਤ ਦਿਖਾਉਂਦਾ ਹੈ। ਸਮੇਟਣਯੋਗ ਤੱਤ ਅਸਲ ਵਿੱਚ ਦਿਖਾਏ ਜਾਣ ਤੋਂ ਪਹਿਲਾਂ ਕਾਲਰ ਨੂੰ ਵਾਪਸ ਕਰਦਾ ਹੈ (ਭਾਵ shown.bs.collapseਘਟਨਾ ਵਾਪਰਨ ਤੋਂ ਪਹਿਲਾਂ)।

.collapse('hide')

ਇੱਕ ਸਮੇਟਣਯੋਗ ਤੱਤ ਨੂੰ ਲੁਕਾਉਂਦਾ ਹੈ। ਸਮੇਟਣਯੋਗ ਤੱਤ ਅਸਲ ਵਿੱਚ ਲੁਕਾਏ ਜਾਣ ਤੋਂ ਪਹਿਲਾਂ ਕਾਲਰ ਨੂੰ ਵਾਪਸ ਕਰਦਾ ਹੈ (ਭਾਵ hidden.bs.collapseਘਟਨਾ ਵਾਪਰਨ ਤੋਂ ਪਹਿਲਾਂ)।

ਸਮਾਗਮ

ਬੂਟਸਟਰੈਪ ਦੀ ਸਮੇਟਣ ਵਾਲੀ ਕਲਾਸ ਸਮੇਟਣ ਦੀ ਕਾਰਜਸ਼ੀਲਤਾ ਨੂੰ ਜੋੜਨ ਲਈ ਕੁਝ ਘਟਨਾਵਾਂ ਨੂੰ ਉਜਾਗਰ ਕਰਦੀ ਹੈ।

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

ਕੈਰੋਜ਼ਲ carousel.js

ਐਲੀਮੈਂਟਸ ਦੁਆਰਾ ਸਾਈਕਲ ਚਲਾਉਣ ਲਈ ਇੱਕ ਸਲਾਈਡਸ਼ੋ ਭਾਗ, ਜਿਵੇਂ ਕਿ ਕੈਰੋਸਲ। ਨੇਸਟਡ ਕੈਰੋਸਲ ਸਮਰਥਿਤ ਨਹੀਂ ਹਨ।

ਉਦਾਹਰਨਾਂ

ਪਿਛਲਾ ਅਗਲਾ

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

ਵਿਕਲਪਿਕ ਸੁਰਖੀਆਂ

.carousel-captionਕਿਸੇ ਵੀ ਵਿੱਚ ਤੱਤ ਦੇ ਨਾਲ ਆਸਾਨੀ ਨਾਲ ਆਪਣੀਆਂ ਸਲਾਈਡਾਂ ਵਿੱਚ ਸੁਰਖੀਆਂ ਸ਼ਾਮਲ ਕਰੋ .item। ਉੱਥੇ ਕਿਸੇ ਵੀ ਵਿਕਲਪਿਕ HTML ਨੂੰ ਰੱਖੋ ਅਤੇ ਇਹ ਆਪਣੇ ਆਪ ਹੀ ਇਕਸਾਰ ਅਤੇ ਫਾਰਮੈਟ ਹੋ ਜਾਵੇਗਾ।

ਪਹਿਲੀ ਸਲਾਈਡ ਲੇਬਲ

ਨੂਲਾ ਵਿਟਾਏ ਇਲੀਟ ਲਿਬੇਰੋ, ਇੱਕ ਫੈਰੇਟਰਾ ਔਗ ਮੋਲਿਸ ਇੰਟਰਡਮ।

Second slide label

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Third slide label

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

ਪਿਛਲਾ ਅਗਲਾ

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

ਵਰਤੋਂ

ਕਈ ਕੈਰੋਜ਼ਲ

ਕੈਰੋਸੇਲ ਨੂੰ ਸਹੀ ਢੰਗ ਨਾਲ ਕੰਮ ਕਰਨ ਲਈ ਕੈਰੋਜ਼ਲ ਨਿਯੰਤਰਣ ਲਈ idਸਭ ਤੋਂ ਬਾਹਰੀ ਕੰਟੇਨਰ (the ) ਦੀ ਵਰਤੋਂ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ । .carouselਇੱਕ ਤੋਂ ਵੱਧ ਕੈਰੋਜ਼ਲ ਜੋੜਦੇ ਸਮੇਂ, ਜਾਂ ਇੱਕ ਕੈਰੋਸੇਲ ਨੂੰ ਬਦਲਦੇ ਸਮੇਂ id, ਸੰਬੰਧਿਤ ਨਿਯੰਤਰਣਾਂ ਨੂੰ ਅੱਪਡੇਟ ਕਰਨਾ ਯਕੀਨੀ ਬਣਾਓ।

ਡਾਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਰਾਹੀਂ

ਕੈਰੋਜ਼ਲ ਦੀ ਸਥਿਤੀ ਨੂੰ ਆਸਾਨੀ ਨਾਲ ਕੰਟਰੋਲ ਕਰਨ ਲਈ ਡਾਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ। data-slideਕੀਵਰਡਸ ਨੂੰ ਸਵੀਕਾਰ ਕਰਦਾ ਹੈ prevਜਾਂ next, ਜੋ ਇਸਦੀ ਮੌਜੂਦਾ ਸਥਿਤੀ ਦੇ ਅਨੁਸਾਰ ਸਲਾਈਡ ਸਥਿਤੀ ਨੂੰ ਬਦਲਦਾ ਹੈ। ਵਿਕਲਪਕ ਤੌਰ 'ਤੇ, data-slide-toਇੱਕ ਕੱਚੀ ਸਲਾਈਡ ਸੂਚਕਾਂਕ ਨੂੰ ਕੈਰੋਜ਼ਲ ਨੂੰ ਪਾਸ ਕਰਨ ਲਈ ਵਰਤੋ data-slide-to="2", ਜੋ ਸਲਾਈਡ ਸਥਿਤੀ ਨੂੰ ਨਾਲ ਸ਼ੁਰੂ ਹੋਣ ਵਾਲੇ ਇੱਕ ਖਾਸ ਸੂਚਕਾਂਕ ਵਿੱਚ ਬਦਲਦਾ ਹੈ 0।

ਵਿਸ਼ੇਸ਼ਤਾ ਦੀ data-ride="carousel"ਵਰਤੋਂ ਪੰਨੇ ਦੇ ਲੋਡ ਤੋਂ ਸ਼ੁਰੂ ਹੋਣ ਵਾਲੇ ਕੈਰੋਜ਼ਲ ਨੂੰ ਐਨੀਮੇਟ ਕਰਨ ਲਈ ਚਿੰਨ੍ਹਿਤ ਕਰਨ ਲਈ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਇਹ ਉਸੇ ਕੈਰੋਜ਼ਲ ਦੇ (ਬੇਲੋੜੀ ਅਤੇ ਬੇਲੋੜੀ) ਸਪੱਸ਼ਟ JavaScript ਸ਼ੁਰੂਆਤ ਦੇ ਨਾਲ ਨਹੀਂ ਵਰਤਿਆ ਜਾ ਸਕਦਾ ਹੈ।

JavaScript ਰਾਹੀਂ

ਕੈਰੋਸੇਲ ਨੂੰ ਇਸ ਨਾਲ ਹੱਥੀਂ ਕਾਲ ਕਰੋ:

$('.carousel').carousel()

ਵਿਕਲਪ

ਵਿਕਲਪਾਂ ਨੂੰ ਡੇਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਜਾਂ JavaScript ਦੁਆਰਾ ਪਾਸ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ। ਡੇਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਲਈ, ਵਿਕਲਪ ਦਾ ਨਾਮ ਸ਼ਾਮਲ ਕਰੋ data-, ਜਿਵੇਂ ਕਿ ਵਿੱਚ data-interval=""।

ਢੰਗ

.carousel(options)

ਇੱਕ ਵਿਕਲਪਿਕ ਵਿਕਲਪਾਂ ਨਾਲ ਕੈਰੋਜ਼ਲ ਨੂੰ objectਸ਼ੁਰੂ ਕਰਦਾ ਹੈ ਅਤੇ ਆਈਟਮਾਂ ਰਾਹੀਂ ਸਾਈਕਲ ਚਲਾਉਣਾ ਸ਼ੁਰੂ ਕਰਦਾ ਹੈ।

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

.carousel('cycle')

ਖੱਬੇ ਤੋਂ ਸੱਜੇ ਕੈਰੋਜ਼ਲ ਆਈਟਮਾਂ ਰਾਹੀਂ ਚੱਕਰ।

.carousel('pause')

ਕੈਰੋਜ਼ਲ ਨੂੰ ਆਈਟਮਾਂ ਰਾਹੀਂ ਸਾਈਕਲ ਚਲਾਉਣ ਤੋਂ ਰੋਕਦਾ ਹੈ।

.carousel(number)

ਕੈਰੋਸਲ ਨੂੰ ਕਿਸੇ ਖਾਸ ਫ੍ਰੇਮ (0 ਅਧਾਰਤ, ਇੱਕ ਐਰੇ ਦੇ ਸਮਾਨ) ਵਿੱਚ ਚੱਕਰ ਲਗਾਉਂਦਾ ਹੈ।

.carousel('prev')

ਪਿਛਲੀ ਆਈਟਮ ਲਈ ਚੱਕਰ।

.carousel('next')

ਅਗਲੀ ਆਈਟਮ 'ਤੇ ਚੱਕਰ ਲਗਾਓ।

ਸਮਾਗਮ

ਬੂਟਸਟਰੈਪ ਦੀ ਕੈਰੋਜ਼ਲ ਕਲਾਸ ਕੈਰੋਜ਼ਲ ਕਾਰਜਕੁਸ਼ਲਤਾ ਨੂੰ ਜੋੜਨ ਲਈ ਦੋ ਘਟਨਾਵਾਂ ਦਾ ਪਰਦਾਫਾਸ਼ ਕਰਦੀ ਹੈ।

ਦੋਵਾਂ ਘਟਨਾਵਾਂ ਦੀਆਂ ਹੇਠ ਲਿਖੀਆਂ ਵਾਧੂ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਹਨ:

• direction: ਉਹ ਦਿਸ਼ਾ ਜਿਸ ਵਿੱਚ ਕੈਰੋਜ਼ਲ ਖਿਸਕ ਰਿਹਾ ਹੈ (ਜਾਂ "left"ਜਾਂ "right")।
• relatedTarget: DOM ਤੱਤ ਜੋ ਕਿਰਿਆਸ਼ੀਲ ਆਈਟਮ ਦੇ ਤੌਰ 'ਤੇ ਥਾਂ 'ਤੇ ਖਿਸਕਿਆ ਜਾ ਰਿਹਾ ਹੈ।

ਕੈਰੋਜ਼ਲ ਦੀਆਂ ਸਾਰੀਆਂ ਘਟਨਾਵਾਂ ਕੈਰੋਜ਼ਲ 'ਤੇ ਹੀ ਫਾਇਰ ਕੀਤੀਆਂ ਜਾਂਦੀਆਂ ਹਨ (ਭਾਵ 'ਤੇ <div class="carousel">)।

$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
})

affix.js _

ਉਦਾਹਰਨ

affix ਪਲੱਗਇਨ position: fixed;ਨਾਲ ਮਿਲੇ ਪ੍ਰਭਾਵ ਦੀ ਨਕਲ ਕਰਦੇ ਹੋਏ, ਚਾਲੂ ਅਤੇ ਬੰਦ ਟੌਗਲ ਕਰਦਾ ਹੈ position: sticky;। ਸੱਜੇ ਪਾਸੇ ਸਬਨੇਵੀਗੇਸ਼ਨ affix ਪਲੱਗਇਨ ਦਾ ਲਾਈਵ ਡੈਮੋ ਹੈ।

ਵਰਤੋਂ

ਡੇਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਦੁਆਰਾ ਜਾਂ ਆਪਣੀ ਖੁਦ ਦੀ JavaScript ਨਾਲ ਹੱਥੀਂ affix ਪਲੱਗਇਨ ਦੀ ਵਰਤੋਂ ਕਰੋ। ਦੋਵਾਂ ਸਥਿਤੀਆਂ ਵਿੱਚ, ਤੁਹਾਨੂੰ ਆਪਣੀ ਚਿਪਕਾਈ ਸਮੱਗਰੀ ਦੀ ਸਥਿਤੀ ਅਤੇ ਚੌੜਾਈ ਲਈ CSS ਪ੍ਰਦਾਨ ਕਰਨਾ ਲਾਜ਼ਮੀ ਹੈ।

ਨੋਟ: ਇੱਕ Safari ਰੈਂਡਰਿੰਗ ਬੱਗ ਦੇ ਕਾਰਨ, ਇੱਕ ਮੁਕਾਬਲਤਨ ਸਥਿਤੀ ਵਾਲੇ ਤੱਤ, ਜਿਵੇਂ ਕਿ ਖਿੱਚਿਆ ਜਾਂ ਧੱਕਿਆ ਗਿਆ ਕਾਲਮ, ਵਿੱਚ ਸ਼ਾਮਲ ਕਿਸੇ ਤੱਤ 'ਤੇ affix ਪਲੱਗਇਨ ਦੀ ਵਰਤੋਂ ਨਾ ਕਰੋ ।

CSS ਦੁਆਰਾ ਸਥਿਤੀ

affix ਪਲੱਗਇਨ ਤਿੰਨ ਸ਼੍ਰੇਣੀਆਂ ਦੇ ਵਿਚਕਾਰ ਟੌਗਲ ਕਰਦਾ ਹੈ, ਹਰੇਕ ਇੱਕ ਖਾਸ ਸਥਿਤੀ ਨੂੰ ਦਰਸਾਉਂਦਾ ਹੈ: .affix, .affix-top, ਅਤੇ .affix-bottom. ਤੁਹਾਨੂੰ ਅਸਲ ਸਥਿਤੀਆਂ ਨੂੰ ਸੰਭਾਲਣ ਲਈ ਇਹਨਾਂ ਕਲਾਸਾਂ ਲਈ (ਇਸ ਪਲੱਗਇਨ ਤੋਂ ਸੁਤੰਤਰ) ਦੇ ਅਪਵਾਦ ਦੇ ਨਾਲ, ਸ਼ੈਲੀਆਂ ਪ੍ਰਦਾਨ ਕਰਨੀਆਂ ਚਾਹੀਦੀਆਂ ਹਨ position: fixed;।.affix

ਇੱਥੇ affix ਪਲੱਗਇਨ ਕਿਵੇਂ ਕੰਮ ਕਰਦਾ ਹੈ:

1. ਸ਼ੁਰੂ ਕਰਨ ਲਈ, ਪਲੱਗਇਨ ਜੋੜਦਾ ਹੈ.affix-top ਇਹ ਦਰਸਾਉਣ ਲਈ ਜੋੜਦਾ ਹੈ ਕਿ ਤੱਤ ਆਪਣੀ ਸਭ ਤੋਂ ਉੱਚੀ ਸਥਿਤੀ ਵਿੱਚ ਹੈ। ਇਸ ਸਮੇਂ ਕੋਈ CSS ਪੋਜੀਸ਼ਨਿੰਗ ਦੀ ਲੋੜ ਨਹੀਂ ਹੈ।
2. ਜਿਸ ਤੱਤ ਨੂੰ ਤੁਸੀਂ ਚਿਪਕਾਉਣਾ ਚਾਹੁੰਦੇ ਹੋ ਉਸ ਤੋਂ ਪਿੱਛੇ ਨੂੰ ਸਕ੍ਰੋਲ ਕਰਨਾ ਅਸਲ ਫਿਕਸਿੰਗ ਨੂੰ ਚਾਲੂ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ। ਇਹ ਉਹ ਥਾਂ ਹੈ ਜਿੱਥੇ .affixਬਦਲਦਾ ਹੈ .affix-topਅਤੇ ਸੈੱਟ ਕਰਦਾ ਹੈ position: fixed;(ਬੂਟਸਟ੍ਰੈਪ ਦੇ CSS ਦੁਆਰਾ ਪ੍ਰਦਾਨ ਕੀਤਾ ਜਾਂਦਾ ਹੈ)।
3. ਜੇਕਰ ਇੱਕ ਹੇਠਲਾ ਆਫਸੈੱਟ ਪਰਿਭਾਸ਼ਿਤ ਕੀਤਾ ਗਿਆ ਹੈ, ਤਾਂ ਇਸ ਨੂੰ .affixਨਾਲ ਬਦਲਣਾ ਚਾਹੀਦਾ ਹੈ .affix-bottom। ਕਿਉਂਕਿ ਆਫਸੈੱਟ ਵਿਕਲਪਿਕ ਹਨ, ਇੱਕ ਸੈੱਟ ਕਰਨ ਲਈ ਤੁਹਾਨੂੰ ਉਚਿਤ CSS ਸੈੱਟ ਕਰਨ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ। ਇਸ ਸਥਿਤੀ ਵਿੱਚ, position: absolute;ਲੋੜ ਪੈਣ 'ਤੇ ਸ਼ਾਮਲ ਕਰੋ. ਪਲੱਗਇਨ ਇਹ ਨਿਰਧਾਰਤ ਕਰਨ ਲਈ ਡੇਟਾ ਵਿਸ਼ੇਸ਼ਤਾ ਜਾਂ JavaScript ਵਿਕਲਪ ਦੀ ਵਰਤੋਂ ਕਰਦੀ ਹੈ ਕਿ ਉੱਥੋਂ ਤੱਤ ਨੂੰ ਕਿੱਥੇ ਰੱਖਣਾ ਹੈ।

ਹੇਠਾਂ ਦਿੱਤੇ ਕਿਸੇ ਵੀ ਵਰਤੋਂ ਵਿਕਲਪਾਂ ਲਈ ਆਪਣਾ CSS ਸੈਟ ਕਰਨ ਲਈ ਉਪਰੋਕਤ ਕਦਮਾਂ ਦੀ ਪਾਲਣਾ ਕਰੋ।

ਡਾਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਰਾਹੀਂ

ਕਿਸੇ ਵੀ ਤੱਤ ਨੂੰ ਆਸਾਨੀ ਨਾਲ ਜੋੜਨ ਲਈ ਵਿਵਹਾਰ ਨੂੰ ਜੋੜਨ data-spy="affix"ਲਈ, ਸਿਰਫ਼ ਉਸ ਤੱਤ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰੋ ਜਿਸਦੀ ਤੁਸੀਂ ਜਾਸੂਸੀ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ। ਕਿਸੇ ਤੱਤ ਦੀ ਪਿਨਿੰਗ ਨੂੰ ਕਦੋਂ ਟੌਗਲ ਕਰਨਾ ਹੈ ਪਰਿਭਾਸ਼ਿਤ ਕਰਨ ਲਈ ਆਫਸੈੱਟਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ।

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

JavaScript ਰਾਹੀਂ

JavaScript ਦੁਆਰਾ affix ਪਲੱਗਇਨ ਨੂੰ ਕਾਲ ਕਰੋ:

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

ਵਿਕਲਪ

ਵਿਕਲਪਾਂ ਨੂੰ ਡੇਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਜਾਂ JavaScript ਦੁਆਰਾ ਪਾਸ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ। ਡੇਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਲਈ, ਵਿਕਲਪ ਦਾ ਨਾਮ ਸ਼ਾਮਲ ਕਰੋ data-, ਜਿਵੇਂ ਕਿ ਵਿੱਚ data-offset-top="200"।

ਢੰਗ

.affix(options)

ਤੁਹਾਡੀ ਸਮਗਰੀ ਨੂੰ ਫਿਕਸ ਕੀਤੀ ਸਮਗਰੀ ਦੇ ਰੂਪ ਵਿੱਚ ਸਰਗਰਮ ਕਰਦਾ ਹੈ। ਇੱਕ ਵਿਕਲਪਿਕ ਵਿਕਲਪ ਸਵੀਕਾਰ ਕਰਦਾ ਹੈ object।

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

.affix('checkPosition')

ਸੰਬੰਧਿਤ ਤੱਤਾਂ ਦੇ ਮਾਪ, ਸਥਿਤੀ, ਅਤੇ ਸਕ੍ਰੋਲ ਸਥਿਤੀ ਦੇ ਆਧਾਰ 'ਤੇ affix ਦੀ ਸਥਿਤੀ ਦੀ ਮੁੜ ਗਣਨਾ ਕਰਦਾ ਹੈ। , .affix, .affix-topਅਤੇ .affix-bottomਕਲਾਸਾਂ ਨੂੰ ਨਵੀਂ ਸਥਿਤੀ ਦੇ ਅਨੁਸਾਰ ਚਿਪਕਾਈ ਗਈ ਸਮੱਗਰੀ ਵਿੱਚ ਜੋੜਿਆ ਜਾਂ ਹਟਾਇਆ ਜਾਂਦਾ ਹੈ। ਇਸ ਵਿਧੀ ਨੂੰ ਉਦੋਂ ਬੁਲਾਇਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ ਜਦੋਂ ਵੀ ਚਿਪਕਾਈ ਸਮੱਗਰੀ ਦੇ ਮਾਪ ਜਾਂ ਨਿਸ਼ਾਨਾ ਤੱਤ ਨੂੰ ਬਦਲਿਆ ਜਾਂਦਾ ਹੈ, ਤਾਂ ਜੋ ਚਿਪਕਾਈ ਸਮੱਗਰੀ ਦੀ ਸਹੀ ਸਥਿਤੀ ਨੂੰ ਯਕੀਨੀ ਬਣਾਇਆ ਜਾ ਸਕੇ।

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

ਸਮਾਗਮ

ਬੂਟਸਟਰੈਪ ਦਾ ਐਫਿਕਸ ਪਲੱਗਇਨ ਐਫੀਕਸ ਕਾਰਜਕੁਸ਼ਲਤਾ ਨੂੰ ਜੋੜਨ ਲਈ ਕੁਝ ਇਵੈਂਟਾਂ ਦਾ ਪਰਦਾਫਾਸ਼ ਕਰਦਾ ਹੈ।