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

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

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

ਕੰਪਾਇਲ ਕੀਤੀ ਜਾਵਾ ਸਕ੍ਰਿਪਟ ਦੀ ਵਰਤੋਂ ਕਰਨਾ

ਦੋਵੇਂ bootstrap.jsਅਤੇ bootstrap.min.jsਇੱਕ ਸਿੰਗਲ ਫਾਈਲ ਵਿੱਚ ਸਾਰੇ ਪਲੱਗਇਨ ਸ਼ਾਮਲ ਹਨ। ਸਿਰਫ਼ ਇੱਕ ਨੂੰ ਸ਼ਾਮਲ ਕਰੋ।

ਪਲੱਗਇਨ ਨਿਰਭਰਤਾ

ਕੁਝ ਪਲੱਗਇਨ ਅਤੇ CSS ਭਾਗ ਦੂਜੇ ਪਲੱਗਇਨਾਂ 'ਤੇ ਨਿਰਭਰ ਕਰਦੇ ਹਨ। ਜੇਕਰ ਤੁਸੀਂ ਵੱਖਰੇ ਤੌਰ 'ਤੇ ਪਲੱਗਇਨ ਸ਼ਾਮਲ ਕਰਦੇ ਹੋ, ਤਾਂ ਡੌਕਸ ਵਿੱਚ ਇਹਨਾਂ ਨਿਰਭਰਤਾਵਾਂ ਦੀ ਜਾਂਚ ਕਰਨਾ ਯਕੀਨੀ ਬਣਾਓ। ਇਹ ਵੀ ਨੋਟ ਕਰੋ ਕਿ ਸਾਰੇ ਪਲੱਗਇਨ jQuery 'ਤੇ ਨਿਰਭਰ ਕਰਦੇ ਹਨ (ਇਸਦਾ ਮਤਲਬ ਹੈ ਕਿ jQuery ਨੂੰ ਪਲੱਗਇਨ ਫਾਈਲਾਂ ਤੋਂ ਪਹਿਲਾਂ ਸ਼ਾਮਲ ਕੀਤਾ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ)। ਇਹ ਦੇਖਣ ਲਈ ਸਾਡੇbower.json ਨਾਲ ਸਲਾਹ ਕਰੋ ਕਿ jQuery ਦੇ ਕਿਹੜੇ ਸੰਸਕਰਣ ਸਮਰਥਿਤ ਹਨ।

ਡਾਟਾ ਗੁਣ

ਤੁਸੀਂ 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
})

ਸੰਸਕਰਣ ਨੰਬਰ

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

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

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

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

ਤੀਜੀ-ਧਿਰ ਲਾਇਬ੍ਰੇਰੀਆਂ

ਬੂਟਸਟਰੈਪ ਅਧਿਕਾਰਤ ਤੌਰ 'ਤੇ ਪ੍ਰੋਟੋਟਾਈਪ ਜਾਂ jQuery UI ਵਰਗੀਆਂ ਤੀਜੀ-ਧਿਰ ਦੀਆਂ JavaScript ਲਾਇਬ੍ਰੇਰੀਆਂ ਦਾ ਸਮਰਥਨ ਨਹੀਂ ਕਰਦਾ ਹੈ। ਇਵੈਂਟਾਂ ਅਤੇ ਨੇਮਸਪੇਸ ਦੇ ਬਾਵਜੂਦ .noConflict, ਅਨੁਕੂਲਤਾ ਸਮੱਸਿਆਵਾਂ ਹੋ ਸਕਦੀਆਂ ਹਨ ਜੋ ਤੁਹਾਨੂੰ ਆਪਣੇ ਆਪ ਠੀਕ ਕਰਨ ਦੀ ਲੋੜ ਹੈ।

ਪਰਿਵਰਤਨ 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

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

ਮਲਟੀਪਲ ਓਪਨ ਮੋਡਲ ਸਮਰਥਿਤ ਨਹੀਂ ਹਨ

ਇਹ ਸੁਨਿਸ਼ਚਿਤ ਕਰੋ ਕਿ ਇੱਕ ਮਾਡਲ ਨੂੰ ਨਾ ਖੋਲ੍ਹੋ ਜਦੋਂ ਕਿ ਕੋਈ ਹੋਰ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ। ਇੱਕ ਸਮੇਂ ਵਿੱਚ ਇੱਕ ਤੋਂ ਵੱਧ ਮਾਡਲ ਦਿਖਾਉਣ ਲਈ ਕਸਟਮ ਕੋਡ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ।

ਮਾਡਲ ਮਾਰਕਅੱਪ ਪਲੇਸਮੈਂਟ

ਮਾਡਲ ਦੀ ਦਿੱਖ ਅਤੇ/ਜਾਂ ਕਾਰਜਕੁਸ਼ਲਤਾ ਨੂੰ ਪ੍ਰਭਾਵਿਤ ਕਰਨ ਵਾਲੇ ਹੋਰ ਭਾਗਾਂ ਤੋਂ ਬਚਣ ਲਈ ਹਮੇਸ਼ਾਂ ਆਪਣੇ ਦਸਤਾਵੇਜ਼ ਵਿੱਚ ਇੱਕ ਮਾਡਲ ਦੇ HTML ਕੋਡ ਨੂੰ ਉੱਚ-ਪੱਧਰੀ ਸਥਿਤੀ ਵਿੱਚ ਰੱਖਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ।

ਮੋਬਾਈਲ ਡਿਵਾਈਸ ਚੇਤਾਵਨੀਆਂ

ਮੋਬਾਈਲ ਉਪਕਰਣਾਂ 'ਤੇ ਮਾਡਲਾਂ ਦੀ ਵਰਤੋਂ ਕਰਨ ਦੇ ਸੰਬੰਧ ਵਿੱਚ ਕੁਝ ਚੇਤਾਵਨੀਆਂ ਹਨ। ਵੇਰਵਿਆਂ ਲਈ ਸਾਡੇ ਬ੍ਰਾਊਜ਼ਰ ਸਹਾਇਤਾ ਦਸਤਾਵੇਜ਼ ਵੇਖੋ

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>

ਮਾਡਲਾਂ ਨੂੰ ਪਹੁੰਚਯੋਗ ਬਣਾਓ

ਮਾਡਲ ਸਿਰਲੇਖ ਦਾ ਹਵਾਲਾ ਦਿੰਦੇ ਹੋਏ, ਨੂੰ ਅਤੇ ਆਪਣੇ role="dialog"ਆਪ ਨੂੰ ਜੋੜਨਾ ਯਕੀਨੀ ਬਣਾਓ ।aria-labelledby="...".modalrole="document".modal-dialog

aria-describedbyਇਸ ਤੋਂ ਇਲਾਵਾ, ਤੁਸੀਂ on ਨਾਲ ਆਪਣੇ ਮਾਡਲ ਡਾਇਲਾਗ ਦਾ ਵੇਰਵਾ ਦੇ ਸਕਦੇ ਹੋ .modal

YouTube ਵੀਡੀਓਜ਼ ਨੂੰ ਏਮਬੈਡ ਕੀਤਾ ਜਾ ਰਿਹਾ ਹੈ

ਮੋਡਲਾਂ ਵਿੱਚ YouTube ਵਿਡੀਓਜ਼ ਨੂੰ ਏਮਬੈਡ ਕਰਨ ਲਈ ਵਾਧੂ JavaScript ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ ਨਾ ਕਿ ਬੂਟਸਟਰੈਪ ਵਿੱਚ ਪਲੇਬੈਕ ਅਤੇ ਹੋਰ ਬਹੁਤ ਕੁਝ ਬੰਦ ਕਰਨ ਲਈ। ਵਧੇਰੇ ਜਾਣਕਾਰੀ ਲਈ ਇਹ ਮਦਦਗਾਰ ਸਟੈਕ ਓਵਰਫਲੋ ਪੋਸਟ ਦੇਖੋ

ਵਿਕਲਪਿਕ ਆਕਾਰ

ਮਾਡਲਾਂ ਦੇ ਦੋ ਵਿਕਲਪਿਕ ਆਕਾਰ ਹੁੰਦੇ ਹਨ, ਜੋ ਮੋਡੀਫਾਇਰ ਕਲਾਸਾਂ ਰਾਹੀਂ ਉਪਲਬਧ ਹੁੰਦੇ ਹਨ ਜੋ ਕਿ ਇੱਕ 'ਤੇ ਰੱਖੇ ਜਾਣ ਲਈ ਹਨ .modal-dialog

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

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

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

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

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

ਉਹਨਾਂ ਮਾਡਲਾਂ ਲਈ ਜੋ ਦੇਖਣ ਲਈ ਫਿੱਕੇ ਹੋਣ ਦੀ ਬਜਾਏ ਸਿਰਫ਼ ਦਿਖਾਈ ਦਿੰਦੇ ਹਨ, .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=""

ਨਾਮ ਕਿਸਮ ਡਿਫਾਲਟ ਵਰਣਨ
ਪਿਛੋਕੜ ਬੂਲੀਅਨ ਜਾਂ ਸਤਰ'static' ਸੱਚ ਹੈ ਇੱਕ ਮਾਡਲ-ਬੈਕਡ੍ਰੌਪ ਤੱਤ ਸ਼ਾਮਲ ਕਰਦਾ ਹੈ। ਵਿਕਲਪਿਕ ਤੌਰ 'ਤੇ, staticਇੱਕ ਬੈਕਡ੍ਰੌਪ ਲਈ ਨਿਸ਼ਚਿਤ ਕਰੋ ਜੋ ਕਲਿੱਕ ਕਰਨ 'ਤੇ ਮਾਡਲ ਨੂੰ ਬੰਦ ਨਹੀਂ ਕਰਦਾ ਹੈ।
ਕੀਬੋਰਡ ਬੁਲੀਅਨ ਸੱਚ ਹੈ ਐਸਕੇਪ ਕੁੰਜੀ ਦਬਾਉਣ 'ਤੇ ਮਾਡਲ ਨੂੰ ਬੰਦ ਕਰ ਦਿੰਦਾ ਹੈ
ਦਿਖਾਓ ਬੁਲੀਅਨ ਸੱਚ ਹੈ ਸ਼ੁਰੂਆਤੀ ਹੋਣ 'ਤੇ ਮਾਡਲ ਦਿਖਾਉਂਦਾ ਹੈ।
ਰਿਮੋਟ ਮਾਰਗ ਝੂਠਾ

ਇਹ ਵਿਕਲਪ v3.3.0 ਤੋਂ ਬਰਤਰਫ਼ ਹੈ ਅਤੇ v4 ਵਿੱਚ ਹਟਾ ਦਿੱਤਾ ਗਿਆ ਹੈ। ਅਸੀਂ ਇਸ ਦੀ ਬਜਾਏ ਕਲਾਇੰਟ-ਸਾਈਡ ਟੈਂਪਲੇਟਿੰਗ ਜਾਂ ਡੇਟਾ ਬਾਈਡਿੰਗ ਫਰੇਮਵਰਕ ਦੀ ਵਰਤੋਂ ਕਰਨ, ਜਾਂ ਆਪਣੇ ਆਪ ਨੂੰ jQuery.load ਕਾਲ ਕਰਨ ਦੀ ਸਿਫਾਰਸ਼ ਕਰਦੇ ਹਾਂ।

ਜੇਕਰ ਇੱਕ ਰਿਮੋਟ URL ਪ੍ਰਦਾਨ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, ਤਾਂ ਸਮੱਗਰੀ ਨੂੰ jQuery ਦੀ ਵਿਧੀ ਰਾਹੀਂ ਇੱਕ ਵਾਰ ਲੋਡ ਕੀਤਾ ਜਾਵੇਗਾ ਅਤੇ div ਵਿੱਚ ਇੰਜੈਕਟ ਕੀਤਾ ਜਾਵੇਗਾ। ਜੇਕਰ ਤੁਸੀਂ ਡੇਟਾ-ਏਪੀਆਈ ਦੀ ਵਰਤੋਂ ਕਰ ਰਹੇ ਹੋ, ਤਾਂ ਤੁਸੀਂ ਰਿਮੋਟ ਸਰੋਤ ਨੂੰ ਨਿਰਧਾਰਤ ਕਰਨ ਲਈ ਵਿਕਲਪਿਕ ਤੌਰ 'ਤੇ ਵਿਸ਼ੇਸ਼ਤਾ ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹੋ। ਇਸਦਾ ਇੱਕ ਉਦਾਹਰਣ ਹੇਠਾਂ ਦਿਖਾਇਆ ਗਿਆ ਹੈ:load.modal-contenthref

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

ਢੰਗ

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

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

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

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

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

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

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

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

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

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

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

ਸਮਾਗਮ

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

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

ਘਟਨਾ ਦੀ ਕਿਸਮ ਵਰਣਨ
show.bs.modal ਇਹ ਘਟਨਾ ਤੁਰੰਤ ਫਾਇਰ ਹੋ ਜਾਂਦੀ ਹੈ ਜਦੋਂ showਉਦਾਹਰਨ ਵਿਧੀ ਨੂੰ ਬੁਲਾਇਆ ਜਾਂਦਾ ਹੈ। ਜੇਕਰ ਇੱਕ ਕਲਿੱਕ ਕਾਰਨ ਹੁੰਦਾ ਹੈ, ਤਾਂ ਕਲਿੱਕ ਕੀਤਾ ਗਿਆ ਤੱਤ relatedTargetਘਟਨਾ ਦੀ ਵਿਸ਼ੇਸ਼ਤਾ ਵਜੋਂ ਉਪਲਬਧ ਹੁੰਦਾ ਹੈ।
ਦਿਖਾਇਆ ਗਿਆ.bs.modal ਇਹ ਇਵੈਂਟ ਉਦੋਂ ਚਲਾਇਆ ਜਾਂਦਾ ਹੈ ਜਦੋਂ ਮਾਡਲ ਨੂੰ ਉਪਭੋਗਤਾ ਲਈ ਦ੍ਰਿਸ਼ਮਾਨ ਬਣਾਇਆ ਜਾਂਦਾ ਹੈ (CSS ਪਰਿਵਰਤਨ ਪੂਰਾ ਹੋਣ ਦੀ ਉਡੀਕ ਕਰੇਗਾ)। ਜੇਕਰ ਇੱਕ ਕਲਿੱਕ ਕਾਰਨ ਹੁੰਦਾ ਹੈ, ਤਾਂ ਕਲਿੱਕ ਕੀਤਾ ਗਿਆ ਤੱਤ relatedTargetਘਟਨਾ ਦੀ ਵਿਸ਼ੇਸ਼ਤਾ ਵਜੋਂ ਉਪਲਬਧ ਹੁੰਦਾ ਹੈ।
hide.bs.modal ਇਸ ਇਵੈਂਟ ਨੂੰ ਤੁਰੰਤ ਫਾਇਰ ਕੀਤਾ ਜਾਂਦਾ ਹੈ ਜਦੋਂ hideਉਦਾਹਰਨ ਵਿਧੀ ਨੂੰ ਬੁਲਾਇਆ ਜਾਂਦਾ ਹੈ।
hidden.bs.modal ਇਹ ਇਵੈਂਟ ਉਦੋਂ ਚਲਾਇਆ ਜਾਂਦਾ ਹੈ ਜਦੋਂ ਮਾਡਲ ਉਪਭੋਗਤਾ ਤੋਂ ਛੁਪਾਉਣਾ ਪੂਰਾ ਕਰ ਲੈਂਦਾ ਹੈ (CSS ਪਰਿਵਰਤਨ ਪੂਰਾ ਹੋਣ ਦੀ ਉਡੀਕ ਕਰੇਗਾ)।
loaded.bs.modal ਇਹ ਇਵੈਂਟ ਉਦੋਂ ਚਲਾਇਆ ਜਾਂਦਾ ਹੈ ਜਦੋਂ ਮਾਡਲ remoteਵਿਕਲਪ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਸਮੱਗਰੀ ਲੋਡ ਕਰਦਾ ਹੈ।
$('#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()

data-toggle="dropdown"ਅਜੇ ਵੀ ਲੋੜ ਹੈ

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

ਕੋਈ ਨਹੀਂ

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

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

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

ਘਟਨਾ ਦੀ ਕਿਸਮ ਵਰਣਨ
show.bs.dropdown ਇਹ ਇਵੈਂਟ ਤੁਰੰਤ ਫਾਇਰ ਹੋ ਜਾਂਦਾ ਹੈ ਜਦੋਂ ਸ਼ੋਅ ਇੰਸਟੈਂਸ ਵਿਧੀ ਨੂੰ ਬੁਲਾਇਆ ਜਾਂਦਾ ਹੈ।
ਦਿਖਾਇਆ ਗਿਆ.bs.ਡ੍ਰੌਪਡਾਊਨ ਇਹ ਇਵੈਂਟ ਉਦੋਂ ਚਲਾਇਆ ਜਾਂਦਾ ਹੈ ਜਦੋਂ ਡ੍ਰੌਪਡਾਉਨ ਉਪਭੋਗਤਾ ਨੂੰ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ (ਪੂਰਾ ਹੋਣ ਲਈ CSS ਪਰਿਵਰਤਨ ਦੀ ਉਡੀਕ ਕਰੇਗਾ)।
hide.bs.dropdown ਇਹ ਇਵੈਂਟ ਤੁਰੰਤ ਫਾਇਰ ਕੀਤਾ ਜਾਂਦਾ ਹੈ ਜਦੋਂ ਓਹਲੇ ਉਦਾਹਰਨ ਵਿਧੀ ਨੂੰ ਬੁਲਾਇਆ ਜਾਂਦਾ ਹੈ।
hidden.bs.dropdown ਇਹ ਇਵੈਂਟ ਉਦੋਂ ਚਲਾਇਆ ਜਾਂਦਾ ਹੈ ਜਦੋਂ ਡ੍ਰੌਪਡਾਉਨ ਉਪਭੋਗਤਾ ਤੋਂ ਛੁਪਿਆ ਹੋਇਆ ਹੁੰਦਾ ਹੈ (ਪੂਰਾ ਹੋਣ ਲਈ CSS ਪਰਿਵਰਤਨ ਦੀ ਉਡੀਕ ਕਰੇਗਾ)।
$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})

ScrollSpy scrollspy.js

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

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

@ਚਰਬੀ

ਐਡ ਲੈਗਿੰਗਸ ਕੀਟਾਰ, ਬ੍ਰੰਚ ਆਈਡੀ ਆਰਟ ਪਾਰਟੀ ਡੋਰ ਲੇਬਰ। Pitchfork yr enim lo-fi ਇਸ ਤੋਂ ਪਹਿਲਾਂ ਕਿ ਉਹ qui ਵਿਕ ਗਏ। ਟਮਬਲਰ ਫਾਰਮ-ਟੂ-ਟੇਬਲ ਸਾਈਕਲ ਅਧਿਕਾਰ ਜੋ ਵੀ ਹੋਵੇ। ਐਨੀਮ ਕੇਫੀਯੇਹ ਕਾਰਲੇਸ ਕਾਰਡਿਗਨ. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, Williamsburg hoodie minim qui ਸ਼ਾਇਦ ਤੁਸੀਂ ਉਨ੍ਹਾਂ ਬਾਰੇ ਨਹੀਂ ਸੁਣਿਆ ਹੋਵੇਗਾ ਅਤੇ ਕਾਰਡਿਗਨ ਟਰੱਸਟ ਫੰਡ ਕਲਪਾ ਬਾਇਓਡੀਜ਼ਲ ਵੇਸ ਐਂਡਰਸਨ ਸੁਹਜ। ਨਿਹਿਲ ਟੈਟੂਡ ਐਕਿਊਸੈਮਸ, ਕ੍ਰੈਡ ਆਇਰਨ ਬਾਇਓਡੀਜ਼ਲ ਕੇਫੀਯੇਹ ਕਾਰੀਗਰ ਉਲਮਕੋ ਨਤੀਜਾ.

@mdo

ਵੇਨੀਅਮ ਮਾਰਫਾ ਮੁੱਛਾਂ ਵਾਲਾ ਸਕੇਟਬੋਰਡ, ਐਡੀਪਿਸਿੰਗ ਫੂਗੀਆਟ ਵੇਲੀਟ ਪਿੱਚਫੋਰਕ ਦਾੜ੍ਹੀ। ਫ੍ਰੀਗਨ ਦਾੜ੍ਹੀ ਅਲੀਕਾ ਕਪਿਡਾਟੈਟ ਮੈਕਸਵੀਨੀ ਦਾ ਵੇਰੋ। ਕਪਿਡਾਟੈਟ ਚਾਰ ਲੋਕੋ ਨੀਸੀ, ਈ ਏ ਹੇਲਵੇਟਿਕਾ ਨੱਲਾ ਕਾਰਲਸ. ਟੈਟੂ ਕੀਤਾ cosby sweater ਭੋਜਨ ਟਰੱਕ, mcsweeney's quis non freegan vinyl. ਲੋ-ਫਾਈ ਵੇਸ ਐਂਡਰਸਨ +1 ਸਰਟੋਰੀਅਲ। ਕਾਰਲੇਸ ਗੈਰ ਸੁਹਜਾਤਮਕ ਅਭਿਆਸ quis gentrify. ਬਰੁਕਲਿਨ ਐਡੀਪਿਸਿਸਿੰਗ ਕਰਾਫਟ ਬੀਅਰ ਵਾਈਸ ਕੀਟਾਰ ਡਿਜ਼ਰੰਟ।

ਇੱਕ

Occaecat commodo aliqua delectus. ਫੈਪ ਕਰਾਫਟ ਬੀਅਰ ਡੇਜ਼ਰੰਟ ਸਕੇਟਬੋਰਡ ਈ.ਏ. ਲੋਮੋ ਸਾਈਕਲ ਰਾਈਟਸ ਐਡੀਪਿਸਿਸਿੰਗ ਬੈਨ ਮੀ, ਵੇਲੀਟ ਈਏ ਸਨਟ ਨੈਕਸਟ ਲੈਵਲ ਲੋਕਾਵੋਰ ਸਿੰਗਲ-ਓਰਿਜਨ ਕੌਫੀ ਇਨ ਮੈਗਨਾ ਵੇਨੀਅਮ। ਹਾਈ ਲਾਈਫ ਆਈਡੀ ਵਿਨਾਇਲ, ਈਕੋ ਪਾਰਕ ਕਨਸੈਕਟ ਕੁਇਸ ਅਲੀਕਿਪ ਬੈਨ ਮੀ ਪਿਚਫੋਰਕ। Vero VHS est adipising. DIY ਘੱਟੋ-ਘੱਟ ਮੈਸੇਂਜਰ ਬੈਗ ਦੀ ਵਰਤੋਂ ਕਰੋ। ਵਿੱਚ ਕ੍ਰੈਡਿਟ ਸਾਬਕਾ, ਸਸਟੇਨੇਬਲ ਡਿਲੈਕਟਸ ਕੰਸੈਕਟੁਰ ਫੈਨੀ ਪੈਕ ਆਈਫੋਨ.

ਦੋ

In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.

three

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

ਕੀਟਾਰ ਟਵੀ ਬਲੌਗ, ਕਲਪਾ ਮੈਸੇਂਜਰ ਬੈਗ ਮਾਰਫਾ ਜੋ ਵੀ ਡੀਲੈਕਟਸ ਫੂਡ ਟਰੱਕ। Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats ਸ਼ਾਇਦ ਤੁਸੀਂ ਉਹਨਾਂ ਬਾਰੇ ਨਹੀਂ ਸੁਣਿਆ ਹੋਵੇਗਾ ਜਿਸਦਾ ਨਤੀਜਾ ਹੂਡੀ ਗਲੁਟਨ-ਮੁਕਤ lo-fi fap aliquip ਹੈ। ਲੇਬਰ ਇਲੀਟ ਪਲੇਸੈਟ ਇਸ ਤੋਂ ਪਹਿਲਾਂ ਕਿ ਉਹ ਵਿਕ ਗਏ, ਟੈਰੀ ਰਿਚਰਡਸਨ ਪ੍ਰੋਡੈਂਟ ਬ੍ਰੰਚ ਨੇਸਸੀਅੰਟ ਕਵਿਸ ਕੋਸਬੀ ਸਵੈਟਰ ਪੈਰੀਟੁਰ ਕੇਫੀਏਹ ਯੂਟ ਹੈਲਵੇਟਿਕਾ ਆਰਟੀਸਨ। ਕਾਰਡਿਗਨ ਕਰਾਫਟ ਬੀਅਰ ਸੀਟਨ ਰੈਡੀਮੇਡ ਵੇਲੀਟ। VHS ਚੈਂਬਰੇ ਲੇਬਰਿਸ ਟੈਂਪਰ ਵੇਨੀਅਮ। ਐਨੀਮ ਮੋਲਟ ਮਿਨੀਮ ਕਮੋਡੋ ਉਲਮਕੋ ਗਰਜ.

ਵਰਤੋਂ

ਬੂਟਸਟਰੈਪ nav ਦੀ ਲੋੜ ਹੈ

ਸਕ੍ਰੌਲਸਪੀ ਨੂੰ ਵਰਤਮਾਨ ਵਿੱਚ ਸਰਗਰਮ ਲਿੰਕਾਂ ਦੀ ਸਹੀ ਹਾਈਲਾਈਟ ਕਰਨ ਲਈ ਇੱਕ ਬੂਟਸਟਰੈਪ ਨੈਵ ਕੰਪੋਨੈਂਟ ਦੀ ਵਰਤੋਂ ਦੀ ਲੋੜ ਹੈ।

ਹੱਲ ਕਰਨ ਯੋਗ ID ਟੀਚੇ ਲੋੜੀਂਦੇ ਹਨ

ਨਵਬਾਰ ਲਿੰਕਾਂ ਵਿੱਚ ਹੱਲ ਕਰਨ ਯੋਗ id ਟੀਚੇ ਹੋਣੇ ਚਾਹੀਦੇ ਹਨ। ਉਦਾਹਰਨ ਲਈ, ਇੱਕ <a href="#home">home</a>DOM ਵਿੱਚ ਕਿਸੇ ਚੀਜ਼ ਨਾਲ ਮੇਲ ਖਾਂਦਾ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ ਜਿਵੇਂ ਕਿ <div id="home"></div>.

ਗੈਰ- :visibleਨਿਸ਼ਾਨਾ ਤੱਤਾਂ ਨੂੰ ਅਣਡਿੱਠ ਕੀਤਾ ਗਿਆ

ਟਾਰਗੇਟ ਐਲੀਮੈਂਟਸ ਜੋ :visiblejQuery ਦੇ ਅਨੁਸਾਰ ਨਹੀਂ ਹਨ ਨੂੰ ਨਜ਼ਰਅੰਦਾਜ਼ ਕੀਤਾ ਜਾਵੇਗਾ ਅਤੇ ਉਹਨਾਂ ਦੇ ਅਨੁਸਾਰੀ ਨੇਵੀ ਆਈਟਮਾਂ ਨੂੰ ਕਦੇ ਵੀ ਉਜਾਗਰ ਨਹੀਂ ਕੀਤਾ ਜਾਵੇਗਾ।

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

ਕੋਈ ਗੱਲ ਲਾਗੂ ਕਰਨ ਦੇ ਢੰਗ, 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=""

ਨਾਮ ਕਿਸਮ ਡਿਫਾਲਟ ਵਰਣਨ
ਆਫਸੈੱਟ ਗਿਣਤੀ 10 ਸਕਰੋਲ ਦੀ ਸਥਿਤੀ ਦੀ ਗਣਨਾ ਕਰਦੇ ਸਮੇਂ ਸਿਖਰ ਤੋਂ ਔਫਸੈੱਟ ਕਰਨ ਲਈ ਪਿਕਸਲ।

ਸਮਾਗਮ

ਘਟਨਾ ਦੀ ਕਿਸਮ ਵਰਣਨ
activate.bs.scrollspy ਜਦੋਂ ਵੀ ਕੋਈ ਨਵੀਂ ਆਈਟਮ ਸਕ੍ਰੌਲਸਪੀ ਦੁਆਰਾ ਕਿਰਿਆਸ਼ੀਲ ਹੋ ਜਾਂਦੀ ਹੈ ਤਾਂ ਇਹ ਇਵੈਂਟ ਫਾਇਰ ਹੋ ਜਾਂਦਾ ਹੈ।
$('#myScrollspy').on('activate.bs.scrollspy', function () {
  // do something…
})

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

ਉਦਾਹਰਨ ਟੈਬਾਂ

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

ਕੱਚਾ ਡੈਨੀਮ ਤੁਸੀਂ ਸ਼ਾਇਦ ਉਹਨਾਂ ਬਾਰੇ ਨਹੀਂ ਸੁਣਿਆ ਹੋਵੇਗਾ ਜੀਨ ਸ਼ਾਰਟਸ ਔਸਟਿਨ. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, Williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh Dreamcatcher synth. Cosby sweater eu banh mi, qui irure Terry richardson ex squid. ਐਲੀਕਿਪ ਪਲੇਸੈਟ ਸੈਲਵੀਆ ਸਿਲਮ ਆਈਫੋਨ. Seitan aliquip quis cardigan American apparel, butcher voluptate nisi qui.

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.

ਟੈਬ ਕੀਤੇ ਨੈਵੀਗੇਸ਼ਨ ਨੂੰ ਵਧਾਉਂਦਾ ਹੈ

ਇਹ ਪਲੱਗਇਨ ਟੈਬ ਕੀਤੇ ਨੈਵੀਗੇਸ਼ਨ ਕੰਪੋਨੈਂਟ ਨੂੰ ਟੈਬਬਲ ਖੇਤਰਾਂ ਨੂੰ ਜੋੜਨ ਲਈ ਵਧਾਉਂਦੀ ਹੈ।

ਵਰਤੋਂ

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ਇਵੈਂਟਾਂ ਨੂੰ ਚਾਲੂ ਨਹੀਂ ਕੀਤਾ ਜਾਵੇਗਾ।

ਘਟਨਾ ਦੀ ਕਿਸਮ ਵਰਣਨ
show.bs.tab ਇਹ ਇਵੈਂਟ ਟੈਬ ਸ਼ੋਅ 'ਤੇ ਫਾਇਰ ਕਰਦਾ ਹੈ, ਪਰ ਨਵੀਂ ਟੈਬ ਦਿਖਾਈ ਦੇਣ ਤੋਂ ਪਹਿਲਾਂ। ਕ੍ਰਮਵਾਰ ਕਿਰਿਆਸ਼ੀਲ ਟੈਬ ਅਤੇ ਪਿਛਲੀ ਕਿਰਿਆਸ਼ੀਲ ਟੈਬ (ਜੇ ਉਪਲਬਧ ਹੋਵੇ) ਨੂੰ ਨਿਸ਼ਾਨਾ ਬਣਾਉਣ ਲਈ ਵਰਤੋਂ event.targetਅਤੇ ਨਿਸ਼ਾਨਾ ਬਣਾਓ।event.relatedTarget
ਦਿਖਾਇਆ ਗਿਆ.bs.tab ਇਹ ਇਵੈਂਟ ਇੱਕ ਟੈਬ ਦਿਖਾਏ ਜਾਣ ਤੋਂ ਬਾਅਦ ਟੈਬ ਸ਼ੋਅ 'ਤੇ ਫਾਇਰ ਕਰਦਾ ਹੈ। ਕ੍ਰਮਵਾਰ ਕਿਰਿਆਸ਼ੀਲ ਟੈਬ ਅਤੇ ਪਿਛਲੀ ਕਿਰਿਆਸ਼ੀਲ ਟੈਬ (ਜੇ ਉਪਲਬਧ ਹੋਵੇ) ਨੂੰ ਨਿਸ਼ਾਨਾ ਬਣਾਉਣ ਲਈ ਵਰਤੋਂ event.targetਅਤੇ ਨਿਸ਼ਾਨਾ ਬਣਾਓ।event.relatedTarget
hide.bs.tab ਇਹ ਇਵੈਂਟ ਉਦੋਂ ਚਾਲੂ ਹੁੰਦਾ ਹੈ ਜਦੋਂ ਇੱਕ ਨਵੀਂ ਟੈਬ ਦਿਖਾਈ ਜਾਂਦੀ ਹੈ (ਅਤੇ ਇਸ ਤਰ੍ਹਾਂ ਪਿਛਲੀ ਕਿਰਿਆਸ਼ੀਲ ਟੈਬ ਨੂੰ ਲੁਕਾਇਆ ਜਾਣਾ ਹੁੰਦਾ ਹੈ)। ਕ੍ਰਮਵਾਰ ਮੌਜੂਦਾ ਕਿਰਿਆਸ਼ੀਲ ਟੈਬ ਅਤੇ ਨਵੀਂ ਛੇਤੀ ਹੀ ਸਰਗਰਮ ਹੋਣ ਵਾਲੀ ਟੈਬ ਦੀ ਵਰਤੋਂ event.targetਅਤੇ ਨਿਸ਼ਾਨਾ ਬਣਾਉਣ ਲਈ।event.relatedTarget
hidden.bs.tab ਇਹ ਇਵੈਂਟ ਇੱਕ ਨਵੀਂ ਟੈਬ ਦਿਖਾਏ ਜਾਣ ਤੋਂ ਬਾਅਦ ਚਾਲੂ ਹੁੰਦਾ ਹੈ (ਅਤੇ ਇਸ ਤਰ੍ਹਾਂ ਪਿਛਲੀ ਕਿਰਿਆਸ਼ੀਲ ਟੈਬ ਲੁਕ ਜਾਂਦੀ ਹੈ)। ਕ੍ਰਮਵਾਰ ਪਿਛਲੀ ਐਕਟਿਵ ਟੈਬ ਅਤੇ ਨਵੀਂ ਐਕਟਿਵ ਟੈਬ ਦੀ ਵਰਤੋਂ ਕਰੋ event.targetਅਤੇ ਨਿਸ਼ਾਨਾ ਬਣਾਓ।event.relatedTarget
$('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 ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ, ਅਤੇ ਸਥਾਨਕ ਸਿਰਲੇਖ ਸਟੋਰੇਜ ਲਈ ਡਾਟਾ-ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ।

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

ਉਦਾਹਰਨਾਂ

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

ਤੰਗ ਪੈਂਟ ਅਗਲੇ ਪੱਧਰ ਦੇ ਕੇਫੀਯੇਹ ਤੁਸੀਂ ਸ਼ਾਇਦ ਉਹਨਾਂ ਬਾਰੇ ਨਹੀਂ ਸੁਣਿਆ ਹੋਵੇਗਾ। ਫੋਟੋ ਬੂਥ ਦਾੜ੍ਹੀ ਕੱਚੀ ਡੈਨੀਮ ਲੈਟਰਪ੍ਰੈਸ ਸ਼ਾਕਾਹਾਰੀ ਮੈਸੇਂਜਰ ਬੈਗ ਸਟੰਪਟਾਊਨ। ਫਾਰਮ-ਟੂ-ਟੇਬਲ ਸੀਟੈਨ, ਮੈਕਸਵੀਨੀ ਦੇ ਫਿਕਸੀ ਸਸਟੇਨੇਬਲ ਕਵਿਨੋਆ 8-ਬਿਟ ਅਮਰੀਕੀ ਲਿਬਾਸ ਵਿੱਚ ਟੈਰੀ ਰਿਚਰਡਸਨ ਵਿਨਾਇਲ ਚੈਂਬਰੇ ਹੈ। ਦਾੜ੍ਹੀ ਸਟੰਪਟਾਊਨ, ਕਾਰਡਿਗਨਸ ਬੈਨ ਮੀ ਲੋਮੋ ਥੰਡਰਕੇਟਸ। ਟੋਫੂ ਬਾਇਓਡੀਜ਼ਲ ਵਿਲੀਅਮਸਬਰਗ ਮਾਰਫਾ, ਚਾਰ ਲੋਕੋ ਮੈਕਸਵੀਨੀ ਦੀ ਕਲੀਨਜ਼ ਸ਼ਾਕਾਹਾਰੀ ਚੈਂਬਰੇ। ਇੱਕ ਸੱਚਮੁੱਚ ਵਿਅੰਗਾਤਮਕ ਕਾਰੀਗਰ ਜੋ ਵੀ ਕੀਟਾਰ, ਸੀਨਸਟਰ ਫਾਰਮ-ਟੂ-ਟੇਬਲ ਬੈਂਕਸੀ ਔਸਟਿਨ ਟਵਿੱਟਰ ਹੈਂਡਲ ਫ੍ਰੀਗਨ ਕ੍ਰੇਡ ਕੱਚਾ ਡੈਨੀਮ ਸਿੰਗਲ-ਓਰੀਜਨ ਕੌਫੀ ਵਾਇਰਲ।

ਸਥਿਰ ਟੂਲਟਿਪ

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

ਚਾਰ ਦਿਸ਼ਾਵਾਂ

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

ਔਪਟ-ਇਨ ਕਾਰਜਕੁਸ਼ਲਤਾ

ਪ੍ਰਦਰਸ਼ਨ ਦੇ ਕਾਰਨਾਂ ਕਰਕੇ, ਟੂਲਟਿਪ ਅਤੇ ਪੌਪਓਵਰ ਡੇਟਾ-ਏਪੀਸ ਆਪਟ-ਇਨ ਹਨ, ਮਤਲਬ ਕਿ ਤੁਹਾਨੂੰ ਉਹਨਾਂ ਨੂੰ ਆਪਣੇ ਆਪ ਸ਼ੁਰੂ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ

ਇੱਕ ਪੰਨੇ 'ਤੇ ਸਾਰੇ ਟੂਲਟਿਪਸ ਨੂੰ ਸ਼ੁਰੂ ਕਰਨ ਦਾ ਇੱਕ ਤਰੀਕਾ ਉਹਨਾਂ ਦੀ data-toggleਵਿਸ਼ੇਸ਼ਤਾ ਦੁਆਰਾ ਉਹਨਾਂ ਨੂੰ ਚੁਣਨਾ ਹੋਵੇਗਾ:

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

ਮਲਟੀਪਲ-ਲਾਈਨ ਲਿੰਕ

ਕਈ ਵਾਰ ਤੁਸੀਂ ਇੱਕ ਹਾਈਪਰਲਿੰਕ ਵਿੱਚ ਇੱਕ ਟੂਲਟਿਪ ਜੋੜਨਾ ਚਾਹੁੰਦੇ ਹੋ ਜੋ ਕਈ ਲਾਈਨਾਂ ਨੂੰ ਲਪੇਟਦਾ ਹੈ। ਟੂਲਟਿਪ ਪਲੱਗਇਨ ਦਾ ਡਿਫੌਲਟ ਵਿਵਹਾਰ ਇਸ ਨੂੰ ਖਿਤਿਜੀ ਅਤੇ ਲੰਬਕਾਰੀ ਤੌਰ 'ਤੇ ਕੇਂਦਰਿਤ ਕਰਨਾ ਹੈ। white-space: nowrap;ਇਸ ਤੋਂ ਬਚਣ ਲਈ ਆਪਣੇ ਐਂਕਰਾਂ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰੋ ।

ਬਟਨ ਸਮੂਹਾਂ, ਇਨਪੁਟ ਸਮੂਹਾਂ ਅਤੇ ਟੇਬਲਾਂ ਵਿੱਚ ਟੂਲਟਿੱਪਾਂ ਲਈ ਵਿਸ਼ੇਸ਼ ਸੈਟਿੰਗ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ

.btn-groupa ਜਾਂ an .input-group, ਜਾਂ ਸਾਰਣੀ-ਸਬੰਧਤ ਤੱਤਾਂ ( <td>, <th>, <tr>, , <thead>, <tbody>, ) ਦੇ ਅੰਦਰ ਤੱਤਾਂ 'ਤੇ ਟੂਲਟਿਪਸ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਸਮੇਂ <tfoot>, ਤੁਹਾਨੂੰ container: 'body'ਅਣਚਾਹੇ ਮਾੜੇ ਪ੍ਰਭਾਵਾਂ (ਜਿਵੇਂ ਕਿ ਤੱਤ ਦਾ ਵੱਧਣਾ ਅਤੇ/ ਜਾਂ ਜਦੋਂ ਟੂਲਟਿਪ ਚਾਲੂ ਹੁੰਦੀ ਹੈ ਤਾਂ ਇਸਦੇ ਗੋਲ ਕੋਨਿਆਂ ਨੂੰ ਗੁਆਉਣਾ)।

ਲੁਕਵੇਂ ਤੱਤਾਂ 'ਤੇ ਟੂਲਟਿੱਪ ਦਿਖਾਉਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਨਾ ਕਰੋ

$(...).tooltip('show')ਟੀਚਾ ਤੱਤ ਦੇ ਹੋਣ 'ਤੇ ਬੁਲਾਉਣਾ ਟੂਲਟਿਪ display: none;ਨੂੰ ਗਲਤ ਸਥਿਤੀ ਦਾ ਕਾਰਨ ਬਣੇਗਾ।

ਕੀਬੋਰਡ ਅਤੇ ਸਹਾਇਕ ਤਕਨਾਲੋਜੀ ਉਪਭੋਗਤਾਵਾਂ ਲਈ ਪਹੁੰਚਯੋਗ ਟੂਲਟਿਪਸ

ਕੀਬੋਰਡ ਨਾਲ ਨੈਵੀਗੇਟ ਕਰਨ ਵਾਲੇ ਉਪਭੋਗਤਾਵਾਂ ਲਈ, ਅਤੇ ਖਾਸ ਤੌਰ 'ਤੇ ਸਹਾਇਕ ਤਕਨਾਲੋਜੀਆਂ ਦੇ ਉਪਭੋਗਤਾਵਾਂ ਲਈ, ਤੁਹਾਨੂੰ ਕੀਬੋਰਡ-ਫੋਕਸ ਕਰਨ ਯੋਗ ਤੱਤਾਂ ਜਿਵੇਂ ਕਿ ਲਿੰਕ, ਫਾਰਮ ਨਿਯੰਤਰਣ, ਜਾਂ ਕਿਸੇ tabindex="0"ਵਿਸ਼ੇਸ਼ਤਾ ਵਾਲੇ ਕਿਸੇ ਵੀ ਮਨਮਾਨੇ ਤੱਤ ਵਿੱਚ ਟੂਲਟਿੱਪ ਸ਼ਾਮਲ ਕਰਨੇ ਚਾਹੀਦੇ ਹਨ।

ਅਯੋਗ ਤੱਤਾਂ 'ਤੇ ਟੂਲਟਿੱਪਾਂ ਲਈ ਰੈਪਰ ਐਲੀਮੈਂਟਸ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ

ਇੱਕ disabledਜਾਂ .disabledਐਲੀਮੈਂਟ ਵਿੱਚ ਟੂਲਟਿੱਪ ਜੋੜਨ ਲਈ, ਐਲੀਮੈਂਟ ਨੂੰ a ਦੇ ਅੰਦਰ ਰੱਖੋ ਅਤੇ ਇਸਦੀ ਬਜਾਏ <div>ਟੂਲਟਿਪ ਨੂੰ ਲਾਗੂ ਕਰੋ ।<div>

ਵਿਕਲਪ

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

ਨਾਮ ਟਾਈਪ ਕਰੋ ਡਿਫਾਲਟ ਵਰਣਨ
ਐਨੀਮੇਸ਼ਨ ਬੁਲੀਅਨ ਸੱਚ ਹੈ ਟੂਲਟਿਪ 'ਤੇ CSS ਫੇਡ ਤਬਦੀਲੀ ਲਾਗੂ ਕਰੋ
ਕੰਟੇਨਰ ਸਤਰ | ਝੂਠਾ ਝੂਠਾ

ਟੂਲਟਿਪ ਨੂੰ ਕਿਸੇ ਖਾਸ ਤੱਤ ਨਾਲ ਜੋੜਦਾ ਹੈ। ਉਦਾਹਰਨ: container: 'body'. ਇਹ ਵਿਕਲਪ ਖਾਸ ਤੌਰ 'ਤੇ ਲਾਭਦਾਇਕ ਹੈ ਕਿਉਂਕਿ ਇਹ ਤੁਹਾਨੂੰ ਦਸਤਾਵੇਜ਼ ਦੇ ਪ੍ਰਵਾਹ ਵਿੱਚ ਟੂਲਟਿਪ ਨੂੰ ਟਰਿਗਰਿੰਗ ਐਲੀਮੈਂਟ ਦੇ ਨੇੜੇ ਰੱਖਣ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦਾ ਹੈ - ਜੋ ਵਿੰਡੋ ਰੀਸਾਈਜ਼ ਦੌਰਾਨ ਟੂਲਟਿੱਪ ਨੂੰ ਟਰਿਗਰਿੰਗ ਐਲੀਮੈਂਟ ਤੋਂ ਦੂਰ ਜਾਣ ਤੋਂ ਰੋਕਦਾ ਹੈ।

ਦੇਰੀ ਨੰਬਰ | ਵਸਤੂ 0

ਟੂਲਟਿਪ (ms) ਨੂੰ ਦਿਖਾਉਣ ਅਤੇ ਲੁਕਾਉਣ ਵਿੱਚ ਦੇਰੀ - ਮੈਨੂਅਲ ਟਰਿੱਗਰ ਕਿਸਮ 'ਤੇ ਲਾਗੂ ਨਹੀਂ ਹੁੰਦਾ

ਜੇਕਰ ਕੋਈ ਨੰਬਰ ਸਪਲਾਈ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, ਤਾਂ ਦੇਰੀ ਨੂੰ ਲੁਕਾਉਣ/ਸ਼ੋਅ ਦੋਵਾਂ ਲਈ ਲਾਗੂ ਕੀਤਾ ਜਾਂਦਾ ਹੈ

ਵਸਤੂ ਬਣਤਰ ਹੈ:delay: { "show": 500, "hide": 100 }

html ਬੁਲੀਅਨ ਝੂਠਾ ਟੂਲਟਿਪ ਵਿੱਚ HTML ਪਾਓ। ਜੇਕਰ ਗਲਤ ਹੈ, ਤਾਂ jQuery ਦੀ textਵਿਧੀ DOM ਵਿੱਚ ਸਮੱਗਰੀ ਨੂੰ ਸ਼ਾਮਲ ਕਰਨ ਲਈ ਵਰਤੀ ਜਾਵੇਗੀ। ਜੇਕਰ ਤੁਸੀਂ XSS ਹਮਲਿਆਂ ਬਾਰੇ ਚਿੰਤਤ ਹੋ ਤਾਂ ਟੈਕਸਟ ਦੀ ਵਰਤੋਂ ਕਰੋ।
ਪਲੇਸਮੈਂਟ ਸਤਰ | ਫੰਕਸ਼ਨ 'ਸਿਖਰ'

ਟੂਲਟਿਪ ਦੀ ਸਥਿਤੀ ਕਿਵੇਂ ਕਰੀਏ - ਸਿਖਰ | ਥੱਲੇ | ਖੱਬੇ | ਸਹੀ | ਆਟੋ.
ਜਦੋਂ "ਆਟੋ" ਨਿਸ਼ਚਿਤ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, ਤਾਂ ਇਹ ਟੂਲਟਿਪ ਨੂੰ ਗਤੀਸ਼ੀਲ ਤੌਰ 'ਤੇ ਮੁੜ ਦਿਸ਼ਾ ਦੇਵੇਗਾ। ਉਦਾਹਰਨ ਲਈ, ਜੇਕਰ ਪਲੇਸਮੈਂਟ "ਆਟੋ ਖੱਬੇ" ਹੈ, ਤਾਂ ਟੂਲਟਿਪ ਜਦੋਂ ਸੰਭਵ ਹੋਵੇ ਤਾਂ ਖੱਬੇ ਪਾਸੇ ਦਿਖਾਈ ਦੇਵੇਗੀ, ਨਹੀਂ ਤਾਂ ਇਹ ਸੱਜੇ ਪਾਸੇ ਦਿਖਾਈ ਦੇਵੇਗੀ।

ਜਦੋਂ ਇੱਕ ਫੰਕਸ਼ਨ ਪਲੇਸਮੈਂਟ ਨੂੰ ਨਿਰਧਾਰਤ ਕਰਨ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ, ਤਾਂ ਇਸਨੂੰ ਟੂਲਟਿਪ DOM ਨੋਡ ਨੂੰ ਇਸਦੇ ਪਹਿਲੇ ਆਰਗੂਮੈਂਟ ਵਜੋਂ ਅਤੇ ਟਰਿਗਰਿੰਗ ਐਲੀਮੈਂਟ DOM ਨੋਡ ਨੂੰ ਇਸਦੇ ਦੂਜੇ ਦੇ ਰੂਪ ਵਿੱਚ ਬੁਲਾਇਆ ਜਾਂਦਾ ਹੈ। thisਸੰਦਰਭ ਟੂਲਟਿਪ ਉਦਾਹਰਨ ਲਈ ਸੈੱਟ ਕੀਤਾ ਗਿਆ ਹੈ ।

ਚੋਣਕਾਰ ਸਤਰ ਝੂਠਾ ਜੇਕਰ ਇੱਕ ਚੋਣਕਾਰ ਪ੍ਰਦਾਨ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, ਤਾਂ ਟੂਲਟਿਪ ਆਬਜੈਕਟ ਨਿਰਧਾਰਤ ਟੀਚਿਆਂ ਨੂੰ ਸੌਂਪੇ ਜਾਣਗੇ। ਅਭਿਆਸ ਵਿੱਚ, ਇਸਦੀ ਵਰਤੋਂ ਗਤੀਸ਼ੀਲ HTML ਸਮੱਗਰੀ ਨੂੰ ਟੂਲਟਿੱਪ ਜੋੜਨ ਲਈ ਯੋਗ ਬਣਾਉਣ ਲਈ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਇਹ ਅਤੇ ਇੱਕ ਜਾਣਕਾਰੀ ਭਰਪੂਰ ਉਦਾਹਰਨ ਦੇਖੋ ।
ਟੈਮਪਲੇਟ ਸਤਰ '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'

ਟੂਲਟਿਪ ਬਣਾਉਣ ਵੇਲੇ ਵਰਤਣ ਲਈ ਆਧਾਰ HTML।

ਟੂਲਟਿਪ titleਨੂੰ ਵਿੱਚ ਇੰਜੈਕਟ ਕੀਤਾ ਜਾਵੇਗਾ .tooltip-inner

.tooltip-arrowਟੂਲਟਿਪ ਦਾ ਤੀਰ ਬਣ ਜਾਵੇਗਾ।

ਸਭ ਤੋਂ ਬਾਹਰਲੇ ਰੈਪਰ ਤੱਤ ਵਿੱਚ .tooltipਕਲਾਸ ਹੋਣੀ ਚਾਹੀਦੀ ਹੈ।

ਸਿਰਲੇਖ ਸਤਰ | ਫੰਕਸ਼ਨ ''

ਜੇਕਰ titleਵਿਸ਼ੇਸ਼ਤਾ ਮੌਜੂਦ ਨਹੀਂ ਹੈ ਤਾਂ ਪੂਰਵ-ਨਿਰਧਾਰਤ ਸਿਰਲੇਖ ਮੁੱਲ।

ਜੇਕਰ ਕੋਈ ਫੰਕਸ਼ਨ ਦਿੱਤਾ ਜਾਂਦਾ ਹੈ, ਤਾਂ ਇਸਨੂੰ ਉਸ thisਤੱਤ ਦੇ ਸੰਦਰਭ ਦੇ ਨਾਲ ਬੁਲਾਇਆ ਜਾਵੇਗਾ ਜਿਸ ਨਾਲ ਟੂਲਟਿੱਪ ਜੁੜੀ ਹੈ।

ਟਰਿੱਗਰ ਸਤਰ 'ਹੋਵਰ ਫੋਕਸ' ਟੂਲਟਿਪ ਨੂੰ ਕਿਵੇਂ ਚਾਲੂ ਕੀਤਾ ਜਾਂਦਾ ਹੈ - ਕਲਿੱਕ ਕਰੋ | ਹੋਵਰ | ਫੋਕਸ | ਮੈਨੁਅਲ ਤੁਸੀਂ ਕਈ ਟਰਿਗਰ ਪਾਸ ਕਰ ਸਕਦੇ ਹੋ; ਉਹਨਾਂ ਨੂੰ ਇੱਕ ਸਪੇਸ ਨਾਲ ਵੱਖ ਕਰੋ। manualਕਿਸੇ ਹੋਰ ਟਰਿੱਗਰ ਨਾਲ ਜੋੜਿਆ ਨਹੀਂ ਜਾ ਸਕਦਾ।
ਵਿਊਪੋਰਟ ਸਤਰ | ਵਸਤੂ | ਫੰਕਸ਼ਨ { ਚੋਣਕਾਰ: 'ਸਰੀਰ', ਪੈਡਿੰਗ: 0 }

ਟੂਲਟਿਪ ਨੂੰ ਇਸ ਤੱਤ ਦੀਆਂ ਸੀਮਾਵਾਂ ਦੇ ਅੰਦਰ ਰੱਖਦਾ ਹੈ। ਉਦਾਹਰਨ: viewport: '#viewport'ਜਾਂ{ "selector": "#viewport", "padding": 0 }

ਜੇਕਰ ਕੋਈ ਫੰਕਸ਼ਨ ਦਿੱਤਾ ਜਾਂਦਾ ਹੈ, ਤਾਂ ਇਸ ਨੂੰ ਟਰਿਗਰਿੰਗ ਐਲੀਮੈਂਟ DOM ਨੋਡ ਦੇ ਨਾਲ ਇਸਦੇ ਸਿਰਫ ਆਰਗੂਮੈਂਟ ਵਜੋਂ ਬੁਲਾਇਆ ਜਾਂਦਾ ਹੈ। thisਸੰਦਰਭ ਟੂਲਟਿਪ ਉਦਾਹਰਨ ਲਈ ਸੈੱਟ ਕੀਤਾ ਗਿਆ ਹੈ ।

ਵਿਅਕਤੀਗਤ ਟੂਲਟਿਪਸ ਲਈ ਡੇਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ

ਵਿਅਕਤੀਗਤ ਟੂਲਟਿੱਪਾਂ ਲਈ ਵਿਕਲਪਾਂ ਨੂੰ ਵਿਕਲਪਿਕ ਤੌਰ 'ਤੇ ਡੇਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਦੀ ਵਰਤੋਂ ਦੁਆਰਾ ਨਿਰਧਾਰਤ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ, ਜਿਵੇਂ ਕਿ ਉੱਪਰ ਦੱਸਿਆ ਗਿਆ ਹੈ।

ਢੰਗ

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

ਸਮਾਗਮ

ਘਟਨਾ ਦੀ ਕਿਸਮ ਵਰਣਨ
show.bs.tooltip ਇਹ ਘਟਨਾ ਤੁਰੰਤ ਫਾਇਰ ਹੋ ਜਾਂਦੀ ਹੈ ਜਦੋਂ showਉਦਾਹਰਨ ਵਿਧੀ ਨੂੰ ਬੁਲਾਇਆ ਜਾਂਦਾ ਹੈ।
show.bs.tooltip ਇਹ ਇਵੈਂਟ ਉਦੋਂ ਚਲਾਇਆ ਜਾਂਦਾ ਹੈ ਜਦੋਂ ਟੂਲਟਿਪ ਨੂੰ ਉਪਭੋਗਤਾ ਲਈ ਦ੍ਰਿਸ਼ਮਾਨ ਬਣਾਇਆ ਜਾਂਦਾ ਹੈ (CSS ਪਰਿਵਰਤਨ ਪੂਰਾ ਹੋਣ ਦੀ ਉਡੀਕ ਕਰੇਗਾ)।
hide.bs.tooltip ਇਸ ਇਵੈਂਟ ਨੂੰ ਤੁਰੰਤ ਫਾਇਰ ਕੀਤਾ ਜਾਂਦਾ ਹੈ ਜਦੋਂ hideਉਦਾਹਰਨ ਵਿਧੀ ਨੂੰ ਬੁਲਾਇਆ ਜਾਂਦਾ ਹੈ।
hidden.bs.tooltip ਇਹ ਇਵੈਂਟ ਉਦੋਂ ਚਲਾਇਆ ਜਾਂਦਾ ਹੈ ਜਦੋਂ ਟੂਲਟਿਪ ਨੂੰ ਉਪਭੋਗਤਾ ਤੋਂ ਲੁਕਾਇਆ ਜਾਣਾ ਖਤਮ ਹੋ ਜਾਂਦਾ ਹੈ (CSS ਪਰਿਵਰਤਨ ਪੂਰਾ ਹੋਣ ਦੀ ਉਡੀਕ ਕਰੇਗਾ)।
inserted.bs.tooltip ਇਹ ਇਵੈਂਟ ਇਵੈਂਟ ਤੋਂ ਬਾਅਦ ਫਾਇਰ ਕੀਤਾ ਜਾਂਦਾ ਹੈ show.bs.tooltipਜਦੋਂ ਟੂਲਟਿਪ ਟੈਂਪਲੇਟ ਨੂੰ DOM ਵਿੱਚ ਜੋੜਿਆ ਜਾਂਦਾ ਹੈ।
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})

Popovers popover.js

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

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

ਪਲੱਗਇਨ ਨਿਰਭਰਤਾ

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

ਔਪਟ-ਇਨ ਕਾਰਜਕੁਸ਼ਲਤਾ

ਪ੍ਰਦਰਸ਼ਨ ਦੇ ਕਾਰਨਾਂ ਕਰਕੇ, ਟੂਲਟਿਪ ਅਤੇ ਪੌਪਓਵਰ ਡੇਟਾ-ਏਪੀਸ ਆਪਟ-ਇਨ ਹਨ, ਮਤਲਬ ਕਿ ਤੁਹਾਨੂੰ ਉਹਨਾਂ ਨੂੰ ਆਪਣੇ ਆਪ ਸ਼ੁਰੂ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ

ਇੱਕ ਪੰਨੇ 'ਤੇ ਸਾਰੇ ਪੌਪਓਵਰਾਂ ਨੂੰ ਸ਼ੁਰੂ ਕਰਨ ਦਾ ਇੱਕ ਤਰੀਕਾ ਉਹਨਾਂ ਦੀ data-toggleਵਿਸ਼ੇਸ਼ਤਾ ਦੁਆਰਾ ਉਹਨਾਂ ਨੂੰ ਚੁਣਨਾ ਹੋਵੇਗਾ:

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

ਬਟਨ ਸਮੂਹਾਂ, ਇਨਪੁਟ ਸਮੂਹਾਂ ਅਤੇ ਟੇਬਲਾਂ ਵਿੱਚ ਪੌਪਓਵਰਾਂ ਲਈ ਵਿਸ਼ੇਸ਼ ਸੈਟਿੰਗ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ

.btn-groupa ਜਾਂ an .input-group, ਜਾਂ ਟੇਬਲ-ਸਬੰਧਤ ਤੱਤਾਂ ( <td>, <th>, <tr>, , <thead>, <tbody>, ) ਦੇ ਅੰਦਰ ਤੱਤਾਂ 'ਤੇ ਪੌਪਓਵਰ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਸਮੇਂ <tfoot>, ਤੁਹਾਨੂੰ container: 'body'ਅਣਚਾਹੇ ਮਾੜੇ ਪ੍ਰਭਾਵਾਂ (ਜਿਵੇਂ ਕਿ ਤੱਤ ਦਾ ਵੱਧਣਾ ਅਤੇ/ ਜਾਂ ਜਦੋਂ ਪੌਪਓਵਰ ਚਾਲੂ ਹੁੰਦਾ ਹੈ ਤਾਂ ਇਸਦੇ ਗੋਲ ਕੋਨਿਆਂ ਨੂੰ ਗੁਆਉਣਾ)।

ਲੁਕਵੇਂ ਤੱਤਾਂ 'ਤੇ ਪੌਪਓਵਰ ਦਿਖਾਉਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਨਾ ਕਰੋ

$(...).popover('show')ਜਦੋਂ ਟਾਰਗੇਟ ਐਲੀਮੈਂਟ ਹੋਵੇ ਤਾਂ ਇਨਵੋਕਿੰਗ display: none;ਕਰਨ ਨਾਲ ਪੌਪਓਵਰ ਨੂੰ ਗਲਤ ਸਥਿਤੀ ਵਿੱਚ ਰੱਖਿਆ ਜਾਵੇਗਾ।

ਅਯੋਗ ਤੱਤਾਂ 'ਤੇ ਪੋਪੋਵਰ ਨੂੰ ਰੈਪਰ ਐਲੀਮੈਂਟਸ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ

disabledਇੱਕ ਜਾਂ .disabledਐਲੀਮੈਂਟ ਵਿੱਚ ਇੱਕ ਪੌਪਓਵਰ ਜੋੜਨ ਲਈ , ਐਲੀਮੈਂਟ ਨੂੰ a ਦੇ ਅੰਦਰ ਰੱਖੋ ਅਤੇ ਇਸਦੀ ਬਜਾਏ <div>ਪੌਪਓਵਰ ਨੂੰ ਲਾਗੂ ਕਰੋ ।<div>

ਮਲਟੀਪਲ-ਲਾਈਨ ਲਿੰਕ

ਕਈ ਵਾਰ ਤੁਸੀਂ ਇੱਕ ਹਾਈਪਰਲਿੰਕ ਵਿੱਚ ਇੱਕ ਪੌਪਓਵਰ ਜੋੜਨਾ ਚਾਹੁੰਦੇ ਹੋ ਜੋ ਕਈ ਲਾਈਨਾਂ ਨੂੰ ਲਪੇਟਦਾ ਹੈ। ਪੌਪਓਵਰ ਪਲੱਗਇਨ ਦਾ ਡਿਫੌਲਟ ਵਿਵਹਾਰ ਇਸ ਨੂੰ ਖਿਤਿਜੀ ਅਤੇ ਲੰਬਕਾਰੀ ਤੌਰ 'ਤੇ ਕੇਂਦਰਿਤ ਕਰਨਾ ਹੈ। white-space: nowrap;ਇਸ ਤੋਂ ਬਚਣ ਲਈ ਆਪਣੇ ਐਂਕਰਾਂ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰੋ ।

ਉਦਾਹਰਨਾਂ

ਸਥਿਰ ਪੌਪਓਵਰ

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

ਪੌਪਓਵਰ ਸਿਖਰ

Sed posuere consectetur est at lobortis. ਏਨੇਨ ਇਉ ਲੀਓ ਕਉਮ। Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover ਸੱਜੇ

Sed posuere consectetur est at lobortis. ਏਨੇਨ ਇਉ ਲੀਓ ਕਉਮ। Pellentesque ornare sem lacinia quam venenatis vestibulum.

ਪੌਪਓਵਰ ਥੱਲੇ

Sed posuere consectetur est at lobortis. ਏਨੇਨ ਇਉ ਲੀਓ ਕਉਮ। Pellentesque ornare sem lacinia quam venenatis vestibulum.

ਪੌਪਓਵਰ ਛੱਡ ਦਿੱਤਾ

Sed posuere consectetur est at lobortis. ਏਨੇਨ ਇਉ ਲੀਓ ਕਉਮ। Pellentesque ornare sem lacinia quam venenatis vestibulum.

ਲਾਈਵ ਡੈਮੋ

<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>, ਨਾ ਕਿ <button>ਟੈਗ, ਅਤੇ ਤੁਹਾਨੂੰ role="button"ਅਤੇ tabindexਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਨੂੰ ਵੀ ਸ਼ਾਮਲ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ।

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

ਵਰਤੋਂ

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

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

ਵਿਕਲਪ

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

ਨਾਮ ਟਾਈਪ ਕਰੋ ਡਿਫਾਲਟ ਵਰਣਨ
ਐਨੀਮੇਸ਼ਨ ਬੁਲੀਅਨ ਸੱਚ ਹੈ ਪੌਪਓਵਰ ਲਈ ਇੱਕ CSS ਫੇਡ ਤਬਦੀਲੀ ਲਾਗੂ ਕਰੋ
ਕੰਟੇਨਰ ਸਤਰ | ਝੂਠਾ ਝੂਠਾ

ਪੌਪਓਵਰ ਨੂੰ ਕਿਸੇ ਖਾਸ ਤੱਤ ਨਾਲ ਜੋੜਦਾ ਹੈ। ਉਦਾਹਰਨ: container: 'body'. ਇਹ ਵਿਕਲਪ ਖਾਸ ਤੌਰ 'ਤੇ ਲਾਭਦਾਇਕ ਹੈ ਕਿਉਂਕਿ ਇਹ ਤੁਹਾਨੂੰ ਡੌਕੂਮੈਂਟ ਦੇ ਪ੍ਰਵਾਹ ਵਿੱਚ ਪੋਪਓਵਰ ਨੂੰ ਟਰਿਗਰਿੰਗ ਐਲੀਮੈਂਟ ਦੇ ਨੇੜੇ ਰੱਖਣ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦਾ ਹੈ - ਜੋ ਪੌਪਓਵਰ ਨੂੰ ਵਿੰਡੋ ਰੀਸਾਈਜ਼ ਦੌਰਾਨ ਟਰਿਗਰਿੰਗ ਐਲੀਮੈਂਟ ਤੋਂ ਦੂਰ ਜਾਣ ਤੋਂ ਰੋਕਦਾ ਹੈ।

ਸਮੱਗਰੀ ਸਤਰ | ਫੰਕਸ਼ਨ ''

ਜੇਕਰ data-contentਵਿਸ਼ੇਸ਼ਤਾ ਮੌਜੂਦ ਨਹੀਂ ਹੈ ਤਾਂ ਪੂਰਵ-ਨਿਰਧਾਰਤ ਸਮੱਗਰੀ ਮੁੱਲ।

ਜੇਕਰ ਕੋਈ ਫੰਕਸ਼ਨ ਦਿੱਤਾ ਜਾਂਦਾ ਹੈ, ਤਾਂ ਇਸਨੂੰ ਉਸ thisਤੱਤ ਦੇ ਸੰਦਰਭ ਦੇ ਨਾਲ ਬੁਲਾਇਆ ਜਾਵੇਗਾ ਜਿਸ ਨਾਲ ਪੌਪਓਵਰ ਜੁੜਿਆ ਹੈ।

ਦੇਰੀ ਨੰਬਰ | ਵਸਤੂ 0

ਪੌਪਓਵਰ (ms) ਨੂੰ ਦਿਖਾਉਣ ਅਤੇ ਲੁਕਾਉਣ ਵਿੱਚ ਦੇਰੀ - ਮੈਨੂਅਲ ਟਰਿੱਗਰ ਕਿਸਮ 'ਤੇ ਲਾਗੂ ਨਹੀਂ ਹੁੰਦਾ

ਜੇਕਰ ਕੋਈ ਨੰਬਰ ਸਪਲਾਈ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, ਤਾਂ ਦੇਰੀ ਨੂੰ ਲੁਕਾਉਣ/ਸ਼ੋਅ ਦੋਵਾਂ ਲਈ ਲਾਗੂ ਕੀਤਾ ਜਾਂਦਾ ਹੈ

ਵਸਤੂ ਬਣਤਰ ਹੈ:delay: { "show": 500, "hide": 100 }

html ਬੁਲੀਅਨ ਝੂਠਾ ਪੋਪਓਵਰ ਵਿੱਚ HTML ਪਾਓ। ਜੇਕਰ ਗਲਤ ਹੈ, ਤਾਂ jQuery ਦੀ textਵਿਧੀ DOM ਵਿੱਚ ਸਮੱਗਰੀ ਨੂੰ ਸ਼ਾਮਲ ਕਰਨ ਲਈ ਵਰਤੀ ਜਾਵੇਗੀ। ਜੇਕਰ ਤੁਸੀਂ XSS ਹਮਲਿਆਂ ਬਾਰੇ ਚਿੰਤਤ ਹੋ ਤਾਂ ਟੈਕਸਟ ਦੀ ਵਰਤੋਂ ਕਰੋ।
ਪਲੇਸਮੈਂਟ ਸਤਰ | ਫੰਕਸ਼ਨ 'ਸਹੀ'

ਪੌਪਓਵਰ ਦੀ ਸਥਿਤੀ ਕਿਵੇਂ ਕਰੀਏ - ਸਿਖਰ | ਥੱਲੇ | ਖੱਬੇ | ਸਹੀ | ਆਟੋ.
ਜਦੋਂ "ਆਟੋ" ਨਿਸ਼ਚਿਤ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, ਇਹ ਗਤੀਸ਼ੀਲ ਤੌਰ 'ਤੇ ਪੌਪਓਵਰ ਨੂੰ ਮੁੜ ਦਿਸ਼ਾ ਦੇਵੇਗਾ। ਉਦਾਹਰਨ ਲਈ, ਜੇਕਰ ਪਲੇਸਮੈਂਟ "ਆਟੋ ਖੱਬੇ" ਹੈ, ਤਾਂ ਪੌਪਓਵਰ ਖੱਬੇ ਪਾਸੇ ਦਿਖਾਈ ਦੇਵੇਗਾ, ਨਹੀਂ ਤਾਂ ਇਹ ਸੱਜੇ ਪਾਸੇ ਪ੍ਰਦਰਸ਼ਿਤ ਹੋਵੇਗਾ।

ਜਦੋਂ ਇੱਕ ਫੰਕਸ਼ਨ ਪਲੇਸਮੈਂਟ ਨੂੰ ਨਿਰਧਾਰਤ ਕਰਨ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ, ਤਾਂ ਇਸਨੂੰ ਪੋਪੋਵਰ DOM ਨੋਡ ਨੂੰ ਇਸਦੇ ਪਹਿਲੇ ਆਰਗੂਮੈਂਟ ਦੇ ਰੂਪ ਵਿੱਚ ਅਤੇ ਟਰਿਗਰਿੰਗ ਐਲੀਮੈਂਟ DOM ਨੋਡ ਨੂੰ ਇਸਦੇ ਦੂਜੇ ਦੇ ਰੂਪ ਵਿੱਚ ਕਿਹਾ ਜਾਂਦਾ ਹੈ। thisਸੰਦਰਭ ਪੌਪਓਵਰ ਉਦਾਹਰਨ ਲਈ ਸੈੱਟ ਕੀਤਾ ਗਿਆ ਹੈ ।

ਚੋਣਕਾਰ ਸਤਰ ਝੂਠਾ ਜੇਕਰ ਇੱਕ ਚੋਣਕਾਰ ਪ੍ਰਦਾਨ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, ਤਾਂ ਪੌਪਓਵਰ ਵਸਤੂਆਂ ਨੂੰ ਨਿਰਧਾਰਤ ਟੀਚਿਆਂ ਨੂੰ ਸੌਂਪਿਆ ਜਾਵੇਗਾ। ਅਭਿਆਸ ਵਿੱਚ, ਇਸਦੀ ਵਰਤੋਂ ਗਤੀਸ਼ੀਲ HTML ਸਮੱਗਰੀ ਨੂੰ ਪੌਪਓਵਰ ਜੋੜਨ ਲਈ ਯੋਗ ਬਣਾਉਣ ਲਈ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਇਹ ਅਤੇ ਇੱਕ ਜਾਣਕਾਰੀ ਭਰਪੂਰ ਉਦਾਹਰਨ ਦੇਖੋ ।
ਟੈਮਪਲੇਟ ਸਤਰ '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'

ਪੌਪਓਵਰ ਬਣਾਉਣ ਵੇਲੇ ਵਰਤਣ ਲਈ ਆਧਾਰ HTML।

ਪੌਪਓਵਰ titleਨੂੰ ਵਿੱਚ ਟੀਕਾ ਲਗਾਇਆ ਜਾਵੇਗਾ .popover-title

ਪੌਪਓਵਰ contentਨੂੰ ਵਿੱਚ ਟੀਕਾ ਲਗਾਇਆ ਜਾਵੇਗਾ .popover-content

.arrowਪੌਪਓਵਰ ਦਾ ਤੀਰ ਬਣ ਜਾਵੇਗਾ।

ਸਭ ਤੋਂ ਬਾਹਰਲੇ ਰੈਪਰ ਤੱਤ ਵਿੱਚ .popoverਕਲਾਸ ਹੋਣੀ ਚਾਹੀਦੀ ਹੈ।

ਸਿਰਲੇਖ ਸਤਰ | ਫੰਕਸ਼ਨ ''

ਜੇਕਰ titleਵਿਸ਼ੇਸ਼ਤਾ ਮੌਜੂਦ ਨਹੀਂ ਹੈ ਤਾਂ ਪੂਰਵ-ਨਿਰਧਾਰਤ ਸਿਰਲੇਖ ਮੁੱਲ।

ਜੇਕਰ ਕੋਈ ਫੰਕਸ਼ਨ ਦਿੱਤਾ ਜਾਂਦਾ ਹੈ, ਤਾਂ ਇਸਨੂੰ ਉਸ thisਤੱਤ ਦੇ ਸੰਦਰਭ ਦੇ ਨਾਲ ਬੁਲਾਇਆ ਜਾਵੇਗਾ ਜਿਸ ਨਾਲ ਪੌਪਓਵਰ ਜੁੜਿਆ ਹੈ।

ਟਰਿੱਗਰ ਸਤਰ 'ਕਲਿੱਕ' ਪੌਪਓਵਰ ਕਿਵੇਂ ਸ਼ੁਰੂ ਹੁੰਦਾ ਹੈ - ਕਲਿੱਕ ਕਰੋ | ਹੋਵਰ | ਫੋਕਸ | ਮੈਨੁਅਲ ਤੁਸੀਂ ਕਈ ਟਰਿਗਰ ਪਾਸ ਕਰ ਸਕਦੇ ਹੋ; ਉਹਨਾਂ ਨੂੰ ਇੱਕ ਸਪੇਸ ਨਾਲ ਵੱਖ ਕਰੋ। manualਕਿਸੇ ਹੋਰ ਟਰਿੱਗਰ ਨਾਲ ਜੋੜਿਆ ਨਹੀਂ ਜਾ ਸਕਦਾ।
ਵਿਊਪੋਰਟ ਸਤਰ | ਵਸਤੂ | ਫੰਕਸ਼ਨ { ਚੋਣਕਾਰ: 'ਸਰੀਰ', ਪੈਡਿੰਗ: 0 }

ਪੌਪਓਵਰ ਨੂੰ ਇਸ ਤੱਤ ਦੀਆਂ ਸੀਮਾਵਾਂ ਦੇ ਅੰਦਰ ਰੱਖਦਾ ਹੈ। ਉਦਾਹਰਨ: viewport: '#viewport'ਜਾਂ{ "selector": "#viewport", "padding": 0 }

ਜੇਕਰ ਕੋਈ ਫੰਕਸ਼ਨ ਦਿੱਤਾ ਜਾਂਦਾ ਹੈ, ਤਾਂ ਇਸ ਨੂੰ ਟਰਿਗਰਿੰਗ ਐਲੀਮੈਂਟ DOM ਨੋਡ ਦੇ ਨਾਲ ਇਸਦੇ ਸਿਰਫ ਆਰਗੂਮੈਂਟ ਵਜੋਂ ਬੁਲਾਇਆ ਜਾਂਦਾ ਹੈ। thisਸੰਦਰਭ ਪੌਪਓਵਰ ਉਦਾਹਰਨ ਲਈ ਸੈੱਟ ਕੀਤਾ ਗਿਆ ਹੈ ।

ਵਿਅਕਤੀਗਤ ਪੌਪਓਵਰਾਂ ਲਈ ਡਾਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ

ਵਿਅਕਤੀਗਤ ਪੌਪਓਵਰਾਂ ਲਈ ਵਿਕਲਪਾਂ ਨੂੰ ਵਿਕਲਪਿਕ ਤੌਰ 'ਤੇ ਡੇਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਦੀ ਵਰਤੋਂ ਦੁਆਰਾ ਨਿਰਧਾਰਤ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ, ਜਿਵੇਂ ਕਿ ਉੱਪਰ ਦੱਸਿਆ ਗਿਆ ਹੈ।

ਢੰਗ

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

ਸਮਾਗਮ

ਘਟਨਾ ਦੀ ਕਿਸਮ ਵਰਣਨ
show.bs.popover ਇਹ ਘਟਨਾ ਤੁਰੰਤ ਫਾਇਰ ਹੋ ਜਾਂਦੀ ਹੈ ਜਦੋਂ showਉਦਾਹਰਨ ਵਿਧੀ ਨੂੰ ਬੁਲਾਇਆ ਜਾਂਦਾ ਹੈ।
ਦਿਖਾਇਆ ਗਿਆ.bs.popover ਇਹ ਇਵੈਂਟ ਉਦੋਂ ਚਲਾਇਆ ਜਾਂਦਾ ਹੈ ਜਦੋਂ ਪੌਪਓਵਰ ਉਪਭੋਗਤਾ ਲਈ ਦ੍ਰਿਸ਼ਮਾਨ ਬਣਾਇਆ ਜਾਂਦਾ ਹੈ (CSS ਪਰਿਵਰਤਨ ਪੂਰਾ ਹੋਣ ਦੀ ਉਡੀਕ ਕਰੇਗਾ)।
hide.bs.popover ਇਸ ਇਵੈਂਟ ਨੂੰ ਤੁਰੰਤ ਫਾਇਰ ਕੀਤਾ ਜਾਂਦਾ ਹੈ ਜਦੋਂ hideਉਦਾਹਰਨ ਵਿਧੀ ਨੂੰ ਬੁਲਾਇਆ ਜਾਂਦਾ ਹੈ।
hidden.bs.popover ਇਹ ਇਵੈਂਟ ਉਦੋਂ ਚਲਾਇਆ ਜਾਂਦਾ ਹੈ ਜਦੋਂ ਪੌਪਓਵਰ ਉਪਭੋਗਤਾ ਤੋਂ ਛੁਪਿਆ ਹੋਇਆ ਹੈ (CSS ਪਰਿਵਰਤਨ ਪੂਰਾ ਹੋਣ ਦੀ ਉਡੀਕ ਕਰੇਗਾ)।
inserted.bs.popover ਇਹ ਇਵੈਂਟ ਇਵੈਂਟ ਤੋਂ ਬਾਅਦ ਫਾਇਰ ਕੀਤਾ ਜਾਂਦਾ ਹੈ show.bs.popoverਜਦੋਂ ਪੋਪਓਵਰ ਟੈਂਪਲੇਟ ਨੂੰ DOM ਵਿੱਚ ਜੋੜਿਆ ਜਾਂਦਾ ਹੈ।
$('#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ਕਲਾਸ ਮੌਜੂਦ ਹਨ, ਤਾਂ ਇਸ ਨੂੰ ਹਟਾਉਣ ਤੋਂ ਪਹਿਲਾਂ ਅਲਰਟ ਖਤਮ ਹੋ ਜਾਵੇਗਾ।

ਸਮਾਗਮ

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

ਘਟਨਾ ਦੀ ਕਿਸਮ ਵਰਣਨ
close.bs.alert ਇਹ ਘਟਨਾ ਤੁਰੰਤ ਫਾਇਰ ਹੋ ਜਾਂਦੀ ਹੈ ਜਦੋਂ closeਉਦਾਹਰਨ ਵਿਧੀ ਨੂੰ ਬੁਲਾਇਆ ਜਾਂਦਾ ਹੈ।
ਬੰਦ. bs. ਚੇਤਾਵਨੀ ਇਹ ਇਵੈਂਟ ਉਦੋਂ ਚਲਾਇਆ ਜਾਂਦਾ ਹੈ ਜਦੋਂ ਚੇਤਾਵਨੀ ਬੰਦ ਹੋ ਜਾਂਦੀ ਹੈ (CSS ਪਰਿਵਰਤਨ ਪੂਰਾ ਹੋਣ ਦੀ ਉਡੀਕ ਕਰੇਗਾ)।
$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})

ਬਟਨ button.js

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

ਕਰਾਸ-ਬ੍ਰਾਊਜ਼ਰ ਅਨੁਕੂਲਤਾ

ਫਾਇਰਫਾਕਸ ਪੰਨਾ ਲੋਡਾਂ ਵਿੱਚ ਨਿਯੰਤਰਣ ਅਵਸਥਾਵਾਂ (ਅਯੋਗਤਾ ਅਤੇ ਜਾਂਚ) ਨੂੰ ਕਾਇਮ ਰੱਖਦਾ ਹੈ । ਇਸਦੇ ਲਈ ਇੱਕ ਉਪਾਅ ਵਰਤਣਾ ਹੈ autocomplete="off"ਮੋਜ਼ੀਲਾ ਬੱਗ #654072 ਵੇਖੋ ।

ਸਟੇਟਫੁੱਲ

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

ਇਹ ਵਿਸ਼ੇਸ਼ਤਾ v3.3.5 ਤੋਂ ਬਰਤਰਫ਼ ਹੈ ਅਤੇ v4 ਵਿੱਚ ਹਟਾ ਦਿੱਤੀ ਗਈ ਹੈ।

ਜੋ ਵੀ ਰਾਜ ਤੁਸੀਂ ਚਾਹੁੰਦੇ ਹੋ ਵਰਤੋ!

ਇਸ ਪ੍ਰਦਰਸ਼ਨ ਦੀ ਖ਼ਾਤਰ, ਅਸੀਂ data-loading-textਅਤੇ ਦੀ ਵਰਤੋਂ ਕਰ ਰਹੇ ਹਾਂ $().button('loading'), ਪਰ ਇਹ ਸਿਰਫ਼ ਉਹੀ ਸਥਿਤੀ ਨਹੀਂ ਹੈ ਜਿਸਦੀ ਵਰਤੋਂ ਤੁਸੀਂ ਕਰ ਸਕਦੇ ਹੋ। ਹੇਠਾਂ $().button(string)ਦਸਤਾਵੇਜ਼ਾਂ ਵਿੱਚ ਇਸ ਬਾਰੇ ਹੋਰ ਦੇਖੋ ।

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

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

ਸਿੰਗਲ ਟੌਗਲ

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

ਪ੍ਰੀ-ਟੌਗਲ ਕੀਤੇ ਬਟਨਾਂ ਦੀ ਲੋੜ ਹੈ.active ਅਤੇaria-pressed="true"

ਪ੍ਰੀ-ਟੌਗਲ ਕੀਤੇ ਬਟਨਾਂ ਲਈ, ਤੁਹਾਨੂੰ ਆਪਣੇ ਲਈ .activeਕਲਾਸ ਅਤੇ aria-pressed="true"ਵਿਸ਼ੇਸ਼ਤਾ ਸ਼ਾਮਲ ਕਰਨੀ ਚਾਹੀਦੀ buttonਹੈ।

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

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

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

ਪਹਿਲਾਂ ਤੋਂ ਚੁਣੀਆਂ ਗਈਆਂ ਚੋਣਾਂ ਦੀ ਲੋੜ ਹੈ.active

ਪਹਿਲਾਂ ਤੋਂ ਚੁਣੇ ਗਏ ਵਿਕਲਪਾਂ ਲਈ, ਤੁਹਾਨੂੰ .activeਕਲਾਸ ਨੂੰ labelਆਪਣੇ ਆਪ ਵਿੱਚ ਇਨਪੁਟ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ।

ਵਿਜ਼ੂਅਲ ਚੈੱਕ ਕੀਤੀ ਸਥਿਤੀ ਸਿਰਫ ਕਲਿੱਕ ਕਰਨ 'ਤੇ ਅਪਡੇਟ ਕੀਤੀ ਜਾਂਦੀ ਹੈ

clickਜੇਕਰ ਇੱਕ ਚੈਕਬਾਕਸ ਬਟਨ ਦੀ ਚੈਕ ਕੀਤੀ ਸਥਿਤੀ ਨੂੰ ਬਟਨ 'ਤੇ ਕਿਸੇ ਇਵੈਂਟ ਨੂੰ ਫਾਇਰ ਕੀਤੇ ਬਿਨਾਂ ਅੱਪਡੇਟ ਕੀਤਾ ਜਾਂਦਾ ਹੈ (ਜਿਵੇਂ ਕਿ ਇਨਪੁਟ <input type="reset">ਦੀ ਵਿਸ਼ੇਸ਼ਤਾ ਨੂੰ ਸੈੱਟ ਕਰਕੇ ਜਾਂ ਰਾਹੀਂ ), ਤੁਹਾਨੂੰ ਇਨਪੁਟ ਦੀ ਖੁਦ ਦੀ ਕਲਾਸ checkedਨੂੰ ਟੌਗਲ ਕਰਨ ਦੀ ਲੋੜ ਹੋਵੇਗੀ ।.activelabel

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

ਢੰਗ

$().button('toggle')

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

$().button('reset')

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

$().button(string)

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

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

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

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

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

ਪਲੱਗਇਨ ਨਿਰਭਰਤਾ

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

ਉਦਾਹਰਨ

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

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

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

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
<a class="btn btn-primary" role="button" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Link with href
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Button with data-target
</button>
<div class="collapse" id="collapseExample">
  <div class="well">
    ...
  </div>
</div>

Accordion ਉਦਾਹਰਨ

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

Anim pariatur cliche reprehenderit, enim eiusmod High life accusamus Terry richardson ad squid. 3 ਵੁਲਫ ਮੂਨ ਆਫਿਸੀਆ ਔਟ, ਨਾਨ ਕਪਿਡੇਟੈਟ ਸਕੇਟਬੋਰਡ ਡੌਲਰ ਬ੍ਰੰਚ। ਫੂਡ ਟਰੱਕ quinoa nesciunt laborum eiusmod. ਬ੍ਰੰਚ 3 ਵੁਲਫ ਮੂਨ ਟੈਂਪੋਰ, ਸਨਟ ਅਲੀਕਵਾ ਨੇ ਇਸ 'ਤੇ ਇੱਕ ਪੰਛੀ ਪਾਓ ਸਕੁਇਡ ਸਿੰਗਲ-ਓਰੀਜਨ ਕੌਫੀ ਨੱਲਾ ਅਸੂਮੇਂਡਾ ਸ਼ੋਰਡਿਚ ਐਟ. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat ਕ੍ਰਾਫਟ ਬੀਅਰ ਫਾਰਮ-ਟੂ-ਟੇਬਲ, ਕੱਚਾ ਡੈਨੀਮ ਸੁਹਜਾਤਮਕ ਸਿੰਥ ਨੇਸਸੀਅੰਟ ਜੋ ਤੁਸੀਂ ਸ਼ਾਇਦ ਉਹਨਾਂ ਬਾਰੇ ਨਹੀਂ ਸੁਣਿਆ ਹੋਵੇਗਾ acusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod High life accusamus Terry richardson ad squid. 3 ਵੁਲਫ ਮੂਨ ਆਫਿਸੀਆ ਔਟ, ਨਾਨ ਕਪਿਡੇਟੈਟ ਸਕੇਟਬੋਰਡ ਡੌਲਰ ਬ੍ਰੰਚ। ਫੂਡ ਟਰੱਕ quinoa nesciunt laborum eiusmod. ਬ੍ਰੰਚ 3 ਵੁਲਫ ਮੂਨ ਟੈਂਪੋਰ, ਸਨਟ ਅਲੀਕਵਾ ਨੇ ਇਸ 'ਤੇ ਇੱਕ ਪੰਛੀ ਪਾਓ ਸਕੁਇਡ ਸਿੰਗਲ-ਓਰੀਜਨ ਕੌਫੀ ਨੱਲਾ ਅਸੂਮੇਂਡਾ ਸ਼ੋਰਡਿਚ ਐਟ. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat ਕ੍ਰਾਫਟ ਬੀਅਰ ਫਾਰਮ-ਟੂ-ਟੇਬਲ, ਕੱਚਾ ਡੈਨੀਮ ਸੁਹਜਾਤਮਕ ਸਿੰਥ ਨੇਸਸੀਅੰਟ ਜੋ ਤੁਸੀਂ ਸ਼ਾਇਦ ਉਹਨਾਂ ਬਾਰੇ ਨਹੀਂ ਸੁਣਿਆ ਹੋਵੇਗਾ acusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod High life accusamus Terry richardson ad squid. 3 ਵੁਲਫ ਮੂਨ ਆਫਿਸੀਆ ਔਟ, ਨਾਨ ਕਪਿਡੇਟੈਟ ਸਕੇਟਬੋਰਡ ਡੌਲਰ ਬ੍ਰੰਚ। ਫੂਡ ਟਰੱਕ quinoa nesciunt laborum eiusmod. ਬ੍ਰੰਚ 3 ਵੁਲਫ ਮੂਨ ਟੈਂਪੋਰ, ਸਨਟ ਅਲੀਕਵਾ ਨੇ ਇਸ 'ਤੇ ਇੱਕ ਪੰਛੀ ਪਾਓ ਸਕੁਇਡ ਸਿੰਗਲ-ਓਰੀਜਨ ਕੌਫੀ ਨੱਲਾ ਅਸੂਮੇਂਡਾ ਸ਼ੋਰਡਿਚ ਐਟ. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat ਕ੍ਰਾਫਟ ਬੀਅਰ ਫਾਰਮ-ਟੂ-ਟੇਬਲ, ਕੱਚਾ ਡੈਨੀਮ ਸੁਹਜਾਤਮਕ ਸਿੰਥ ਨੇਸਸੀਅੰਟ ਜੋ ਤੁਸੀਂ ਸ਼ਾਇਦ ਉਹਨਾਂ ਬਾਰੇ ਨਹੀਂ ਸੁਣਿਆ ਹੋਵੇਗਾ acusamus labore sustainable VHS.
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
      <h4 class="panel-title">
        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingTwo">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingThree">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>

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

  • ਬੂਟਪਲਾਈ
  • ਇੱਕ ਆਈਟਮਸ ਏਸੀ ਫੈਸੀਲਿਨ
  • ਦੂਜਾ ਈਰੋਜ਼

ਵਿਸਤਾਰ/ਸਮੇਟਣ ਕੰਟਰੋਲਾਂ ਨੂੰ ਪਹੁੰਚਯੋਗ ਬਣਾਓ

aria-expandedਨਿਯੰਤਰਣ ਤੱਤ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰਨਾ ਯਕੀਨੀ ਬਣਾਓ । ਇਹ ਵਿਸ਼ੇਸ਼ਤਾ ਸਕ੍ਰੀਨ ਰੀਡਰਾਂ ਅਤੇ ਸਮਾਨ ਸਹਾਇਕ ਤਕਨਾਲੋਜੀਆਂ ਲਈ ਸਮੇਟਣਯੋਗ ਤੱਤ ਦੀ ਮੌਜੂਦਾ ਸਥਿਤੀ ਨੂੰ ਸਪਸ਼ਟ ਤੌਰ 'ਤੇ ਪਰਿਭਾਸ਼ਿਤ ਕਰਦੀ ਹੈ। ਜੇਕਰ ਸਮੇਟਣਯੋਗ ਤੱਤ ਮੂਲ ਰੂਪ ਵਿੱਚ ਬੰਦ ਹੈ, ਤਾਂ ਇਸਦਾ ਮੁੱਲ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ aria-expanded="false"। ਜੇਕਰ ਤੁਸੀਂ inਕਲਾਸ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਡਿਫੌਲਟ ਤੌਰ 'ਤੇ ਖੁੱਲ੍ਹਣ ਲਈ ਸਮੇਟਣਯੋਗ ਤੱਤ ਸੈੱਟ ਕੀਤਾ ਹੈ, ਤਾਂ ਸੈੱਟ ਕਰੋaria-expanded="true" ਕੀਤਾ ਹੈ, ਤਾਂ ਇਸ ਦੀ ਬਜਾਏ ਕੰਟਰੋਲ 'ਤੇ ਸੈੱਟ ਕਰੋ। ਪਲੱਗਇਨ ਆਪਣੇ ਆਪ ਹੀ ਇਸ ਵਿਸ਼ੇਸ਼ਤਾ ਨੂੰ ਟੌਗਲ ਕਰ ਦੇਵੇਗੀ ਕਿ ਕੀ ਸਮੇਟਣਯੋਗ ਤੱਤ ਖੋਲ੍ਹਿਆ ਗਿਆ ਹੈ ਜਾਂ ਬੰਦ ਕੀਤਾ ਗਿਆ ਹੈ ਜਾਂ ਨਹੀਂ।

ਇਸ ਤੋਂ ਇਲਾਵਾ, ਜੇਕਰ ਤੁਹਾਡਾ ਨਿਯੰਤਰਣ ਤੱਤ ਇੱਕ ਸਿੰਗਲ ਸਮੇਟਣਯੋਗ ਤੱਤ ਨੂੰ ਨਿਸ਼ਾਨਾ ਬਣਾ ਰਿਹਾ ਹੈ - ਭਾਵ data-targetਗੁਣ ਇੱਕ idਚੋਣਕਾਰ ਵੱਲ ਇਸ਼ਾਰਾ ਕਰ ਰਿਹਾ ਹੈ - ਤਾਂ ਤੁਸੀਂ ਕੰਟਰੋਲ ਐਲੀਮੈਂਟ ਵਿੱਚ ਇੱਕ ਵਾਧੂ aria-controlsਵਿਸ਼ੇਸ਼ਤਾ ਸ਼ਾਮਲ ਕਰ ਸਕਦੇ ਹੋ, ਜਿਸ ਵਿੱਚ idਸਮੇਟਣਯੋਗ ਤੱਤ ਸ਼ਾਮਲ ਹੈ। ਆਧੁਨਿਕ ਸਕ੍ਰੀਨ ਰੀਡਰ ਅਤੇ ਸਮਾਨ ਸਹਾਇਕ ਤਕਨੀਕਾਂ ਇਸ ਵਿਸ਼ੇਸ਼ਤਾ ਦੀ ਵਰਤੋਂ ਉਪਭੋਗਤਾਵਾਂ ਨੂੰ ਸਿੱਧੇ ਤੌਰ 'ਤੇ ਸਮੇਟਣਯੋਗ ਤੱਤ 'ਤੇ ਨੈਵੀਗੇਟ ਕਰਨ ਲਈ ਵਾਧੂ ਸ਼ਾਰਟਕੱਟ ਪ੍ਰਦਾਨ ਕਰਨ ਲਈ ਕਰਦੀਆਂ ਹਨ।

ਵਰਤੋਂ

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

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

ਨਾਮ ਕਿਸਮ ਡਿਫਾਲਟ ਵਰਣਨ
ਮਾਪੇ ਚੋਣਕਾਰ ਝੂਠਾ ਜੇਕਰ ਇੱਕ ਚੋਣਕਾਰ ਪ੍ਰਦਾਨ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, ਤਾਂ ਇਸ ਸਮੇਟਣਯੋਗ ਆਈਟਮ ਦੇ ਦਿਖਾਏ ਜਾਣ 'ਤੇ ਨਿਰਧਾਰਤ ਮਾਤਾ-ਪਿਤਾ ਦੇ ਅਧੀਨ ਸਾਰੇ ਸਮੇਟਣਯੋਗ ਤੱਤ ਬੰਦ ਹੋ ਜਾਣਗੇ। (ਰਵਾਇਤੀ ਐਕੌਰਡੀਅਨ ਵਿਵਹਾਰ ਦੇ ਸਮਾਨ - ਇਹ panelਕਲਾਸ 'ਤੇ ਨਿਰਭਰ ਕਰਦਾ ਹੈ)
ਟੌਗਲ ਬੁਲੀਅਨ ਸੱਚ ਹੈ ਬੇਨਤੀ 'ਤੇ ਸਮੇਟਣਯੋਗ ਤੱਤ ਨੂੰ ਟੌਗਲ ਕਰਦਾ ਹੈ

ਢੰਗ

.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ਘਟਨਾ ਵਾਪਰਨ ਤੋਂ ਪਹਿਲਾਂ)।

ਸਮਾਗਮ

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

ਘਟਨਾ ਦੀ ਕਿਸਮ ਵਰਣਨ
show.bs.collaps ਇਹ ਘਟਨਾ ਤੁਰੰਤ ਫਾਇਰ ਹੋ ਜਾਂਦੀ ਹੈ ਜਦੋਂ showਉਦਾਹਰਨ ਵਿਧੀ ਨੂੰ ਬੁਲਾਇਆ ਜਾਂਦਾ ਹੈ।
ਦਿਖਾਇਆ ਗਿਆ.bs.collaps ਇਹ ਇਵੈਂਟ ਉਦੋਂ ਚਲਾਇਆ ਜਾਂਦਾ ਹੈ ਜਦੋਂ ਇੱਕ ਸਮੇਟਣ ਦਾ ਤੱਤ ਉਪਭੋਗਤਾ ਨੂੰ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ (CSS ਪਰਿਵਰਤਨ ਪੂਰਾ ਹੋਣ ਦੀ ਉਡੀਕ ਕਰੇਗਾ)।
hide.bs.collaps hideਜਦੋਂ ਵਿਧੀ ਨੂੰ ਬੁਲਾਇਆ ਜਾਂਦਾ ਹੈ ਤਾਂ ਇਹ ਘਟਨਾ ਤੁਰੰਤ ਕੱਢ ਦਿੱਤੀ ਜਾਂਦੀ ਹੈ .
hidden.bs.collaps ਇਹ ਇਵੈਂਟ ਉਦੋਂ ਚਲਾਇਆ ਜਾਂਦਾ ਹੈ ਜਦੋਂ ਇੱਕ ਸਮੇਟਣ ਦਾ ਤੱਤ ਉਪਭੋਗਤਾ ਤੋਂ ਲੁਕਾਇਆ ਜਾਂਦਾ ਹੈ (CSS ਪਰਿਵਰਤਨ ਪੂਰਾ ਹੋਣ ਦੀ ਉਡੀਕ ਕਰੇਗਾ)।
$('#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 ਨੂੰ ਰੱਖੋ ਅਤੇ ਇਹ ਆਪਣੇ ਆਪ ਹੀ ਇਕਸਾਰ ਅਤੇ ਫਾਰਮੈਟ ਹੋ ਜਾਵੇਗਾ।

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

ਨਾਮ ਕਿਸਮ ਡਿਫਾਲਟ ਵਰਣਨ
ਅੰਤਰਾਲ ਗਿਣਤੀ 5000 ਕਿਸੇ ਆਈਟਮ ਨੂੰ ਸਵੈਚਲਿਤ ਤੌਰ 'ਤੇ ਸਾਈਕਲ ਚਲਾਉਣ ਦੇ ਵਿਚਕਾਰ ਦੇਰੀ ਲਈ ਸਮੇਂ ਦੀ ਮਾਤਰਾ। ਜੇਕਰ ਗਲਤ ਹੈ, ਤਾਂ ਕੈਰੋਸਲ ਸਵੈਚਲਿਤ ਤੌਰ 'ਤੇ ਚੱਕਰ ਨਹੀਂ ਲਵੇਗਾ।
ਵਿਰਾਮ ਸਤਰ | null "ਹੋਵਰ" ਜੇਕਰ ਇਸ 'ਤੇ ਸੈੱਟ ਕੀਤਾ ਗਿਆ ਹੈ "hover", ਤਾਂ ਕੈਰੋਜ਼ਲ ਦੀ ਸਾਈਕਲਿੰਗ ਚਾਲੂ ਨੂੰ ਰੋਕਦਾ ਹੈ ਅਤੇ ਕੈਰੋਜ਼ਲ mouseenterਦੀ ਸਾਈਕਲਿੰਗ ਨੂੰ ਚਾਲੂ ਕਰਦਾ ਹੈ mouseleave। ਜੇਕਰ 'ਤੇ ਸੈੱਟ ਕੀਤਾ ਗਿਆ ਹੈ null, ਤਾਂ ਕੈਰੋਜ਼ਲ 'ਤੇ ਹੋਵਰ ਕਰਨ ਨਾਲ ਇਸ ਨੂੰ ਰੋਕਿਆ ਨਹੀਂ ਜਾਵੇਗਾ।
ਸਮੇਟਣਾ ਬੁਲੀਅਨ ਸੱਚ ਹੈ ਕੀ ਕੈਰੋਜ਼ਲ ਨੂੰ ਲਗਾਤਾਰ ਸਾਈਕਲ ਚਲਾਉਣਾ ਚਾਹੀਦਾ ਹੈ ਜਾਂ ਸਖ਼ਤ ਸਟਾਪਾਂ ਹੋਣੀਆਂ ਚਾਹੀਦੀਆਂ ਹਨ।
ਕੀਬੋਰਡ ਬੁਲੀਅਨ ਸੱਚ ਹੈ ਕੀ ਕੈਰੋਜ਼ਲ ਨੂੰ ਕੀਬੋਰਡ ਇਵੈਂਟਾਂ 'ਤੇ ਪ੍ਰਤੀਕਿਰਿਆ ਕਰਨੀ ਚਾਹੀਦੀ ਹੈ।

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

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

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

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

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

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

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

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

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

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

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

ਘਟਨਾ ਦੀ ਕਿਸਮ ਵਰਣਨ
slide.bs.carousel ਇਹ ਇਵੈਂਟ ਤੁਰੰਤ ਫਾਇਰ ਹੋ ਜਾਂਦਾ ਹੈ ਜਦੋਂ slideਉਦਾਹਰਨ ਵਿਧੀ ਨੂੰ ਬੁਲਾਇਆ ਜਾਂਦਾ ਹੈ।
slid.bs.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"

ਨਾਮ ਕਿਸਮ ਡਿਫਾਲਟ ਵਰਣਨ
ਆਫਸੈੱਟ ਨੰਬਰ | ਫੰਕਸ਼ਨ | ਵਸਤੂ 10 ਸਕਰੋਲ ਦੀ ਸਥਿਤੀ ਦੀ ਗਣਨਾ ਕਰਦੇ ਸਮੇਂ ਸਕ੍ਰੀਨ ਤੋਂ ਔਫਸੈੱਟ ਕਰਨ ਲਈ ਪਿਕਸਲ। ਜੇਕਰ ਇੱਕ ਸਿੰਗਲ ਨੰਬਰ ਪ੍ਰਦਾਨ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, ਤਾਂ ਆਫਸੈੱਟ ਉੱਪਰੀ ਅਤੇ ਹੇਠਾਂ ਦੋਵਾਂ ਦਿਸ਼ਾਵਾਂ ਵਿੱਚ ਲਾਗੂ ਕੀਤਾ ਜਾਵੇਗਾ। ਇੱਕ ਵਿਲੱਖਣ, ਹੇਠਾਂ ਅਤੇ ਸਿਖਰ ਔਫਸੈੱਟ ਪ੍ਰਦਾਨ ਕਰਨ ਲਈ ਸਿਰਫ਼ ਇੱਕ ਵਸਤੂ ਪ੍ਰਦਾਨ ਕਰੋ offset: { top: 10 }ਜਾਂ offset: { top: 10, bottom: 5 }. ਇੱਕ ਫੰਕਸ਼ਨ ਦੀ ਵਰਤੋਂ ਕਰੋ ਜਦੋਂ ਤੁਹਾਨੂੰ ਇੱਕ ਔਫਸੈੱਟ ਦੀ ਗਤੀਸ਼ੀਲ ਗਣਨਾ ਕਰਨ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ।
ਟੀਚਾ ਚੋਣਕਾਰ | ਨੋਡ | jQuery ਤੱਤ windowਵਸਤੂ _ affix ਦਾ ਟੀਚਾ ਤੱਤ ਨਿਸ਼ਚਿਤ ਕਰਦਾ ਹੈ।

ਢੰਗ

.affix(options)

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

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

.affix('checkPosition')

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

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

ਸਮਾਗਮ

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

ਘਟਨਾ ਦੀ ਕਿਸਮ ਵਰਣਨ
affix.bs.affix ਇਹ ਘਟਨਾ ਤੱਤ ਦੇ ਚਿਪਕਾਏ ਜਾਣ ਤੋਂ ਤੁਰੰਤ ਪਹਿਲਾਂ ਫਾਇਰ ਹੋ ਜਾਂਦੀ ਹੈ।
affixed.bs.affix ਇਸ ਘਟਨਾ ਨੂੰ ਤੱਤ ਚਿਪਕਾਏ ਜਾਣ ਤੋਂ ਬਾਅਦ ਫਾਇਰ ਕੀਤਾ ਜਾਂਦਾ ਹੈ।
affix-top.bs.affix ਇਹ ਇਵੈਂਟ ਤੱਤ ਦੇ ਉੱਪਰ ਚਿਪਕਾਏ ਜਾਣ ਤੋਂ ਤੁਰੰਤ ਪਹਿਲਾਂ ਫਾਇਰ ਹੋ ਜਾਂਦਾ ਹੈ।
affixed-top.bs.affix ਇਹ ਇਵੈਂਟ ਤੱਤ ਦੇ ਚਿਪਕਾਏ ਜਾਣ ਤੋਂ ਬਾਅਦ ਚਲਾਇਆ ਜਾਂਦਾ ਹੈ।
affix-bottom.bs.affix ਇਹ ਇਵੈਂਟ ਤੱਤ ਦੇ ਹੇਠਾਂ ਚਿਪਕਾਏ ਜਾਣ ਤੋਂ ਤੁਰੰਤ ਪਹਿਲਾਂ ਫਾਇਰ ਹੋ ਜਾਂਦਾ ਹੈ।
affixed-bottom.bs.affix ਇਹ ਇਵੈਂਟ ਤੱਤ-ਥੱਲੇ ਚਿਪਕਾਏ ਜਾਣ ਤੋਂ ਬਾਅਦ ਫਾਇਰ ਕੀਤਾ ਜਾਂਦਾ ਹੈ।