অভাৰভিউ

ব্যক্তিগত বা সংকলিত

প্লাগিনসমূহক পৃথকে পৃথকে অন্তৰ্ভুক্ত কৰিব পাৰি (বুটষ্ট্ৰেপৰ ব্যক্তিগত *.jsনথিপত্ৰসমূহ ব্যৱহাৰ কৰি), বা সকলো একেলগে (ব্যৱহাৰ কৰি bootstrap.jsবা সৰু কৰা bootstrap.min.js) ।

তথ্য বৈশিষ্ট্যসমূহ

আপুনি সকলো Bootstrap প্লাগ-ইনসমূহ কেৱল মাৰ্কআপ API ৰ যোগেদি ব্যৱহাৰ কৰিব পাৰিব জাভাস্ক্রিপ্টৰ এটা শাৰী লিখা নোহোৱাকৈ । এইটো Bootstrap ৰ প্ৰথম শ্ৰেণীৰ API আৰু এটা প্লাগইন ব্যৱহাৰ কৰাৰ সময়ত আপোনাৰ প্ৰথম বিবেচনা হ'ব লাগে ।

এইখিনিতে ক’ব পাৰি যে কিছুমান পৰিস্থিতিত এই কাৰ্য্যকৰীতা বন্ধ কৰাটো বাঞ্ছনীয় হ’ব পাৰে। গতিকে, আমি ডাটা বৈশিষ্ট্য API নিষ্ক্ৰিয় কৰাৰ ক্ষমতাও প্ৰদান কৰোঁ, ৰ সৈতে নামস্থান দিয়া দস্তাবেজৰ সকলো ইভেন্ট আনবাইণ্ড কৰি data-api। এইটো এনেকুৱা দেখা যায়:

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

বৈকল্পিকভাৱে, এটা নিৰ্দিষ্ট প্লাগইনক লক্ষ্য কৰিবলে, মাত্ৰ প্লাগইনৰ নাম এটা নামস্থান হিচাপে ডাটা-এপিই নামস্থানৰ সৈতে এনেদৰে অন্তৰ্ভুক্ত কৰক:

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

প্ৰগ্ৰেমেটিক এপিআই

আমি এইটোও বিশ্বাস কৰোঁ যে আপুনি সকলো বুটষ্ট্ৰেপ প্লাগ-ইনসমূহ কেৱল জাভাস্ক্রিপ্ট 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 ফ্ৰেমৱৰ্কসমূহৰ সৈতে Bootstrap প্লাগইনসমূহ ব্যৱহাৰ কৰাটো প্ৰয়োজনীয়। এই পৰিস্থিতিত নামস্থানৰ সংঘৰ্ষ মাজে মাজে হ’ব পাৰে। যদি এনেকুৱা হয়, আপুনি .noConflictমান ঘূৰাই দিব বিচৰা প্লাগ-ইনক কল কৰিব পাৰে ।

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

ইভেন্টসমূহ

বুটষ্ট্ৰেপে বেছিভাগ প্লাগইনৰ অনন্য কাৰ্য্যসমূহৰ বাবে স্বনিৰ্বাচিত ইভেন্টসমূহ প্ৰদান কৰে। সাধাৰণতে, এইবোৰ এটা অব্যৱহৃত আৰু অতীত বিভক্তি ৰূপত আহে - য'ত অব্যয় (ex. show) এটা পৰিঘটনাৰ আৰম্ভণিতে ট্ৰিগাৰ হয়, আৰু ইয়াৰ অতীত বিভক্তি ৰূপ (ex. shown) এটা কাৰ্য্য সম্পূৰ্ণ হোৱাৰ লগে লগে ট্ৰিগাৰ হয়।

3.0.0 ৰ পৰা, সকলো বুটষ্ট্ৰেপ ইভেন্টসমূহ নামস্থান দিয়া হৈছে ।

সকলো অসীম পৰিঘটনাই preventDefaultকাৰ্য্যক্ষমতা প্ৰদান কৰে। ই এটা কাৰ্য্য আৰম্ভ হোৱাৰ আগতে নিষ্পাদন বন্ধ কৰাৰ ক্ষমতা প্ৰদান কৰে।

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

সংস্কৰণ নম্বৰ

Bootstrap ৰ প্ৰতিটো jQuery প্লাগইনৰ সংস্কৰণ প্লাগইনৰ VERSIONনিৰ্মাতাৰ বৈশিষ্ট্যৰ যোগেদি অভিগম কৰিব পাৰি । উদাহৰণস্বৰূপ, সঁজুলিটিপ প্লাগইনৰ বাবে:

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

জাভাস্ক্রিপ্ট নিষ্ক্ৰিয় কৰাৰ সময়ত কোনো বিশেষ ফ'লবেক নহয়

বুটষ্ট্ৰেপৰ প্লাগইনসমূহ বিশেষভাৱে সুন্দৰভাৱে পিছুৱাই নাযায় যেতিয়া জাভাস্ক্রিপ্ট নিষ্ক্ৰিয় কৰা হয় । যদি আপুনি এই ক্ষেত্ৰত ব্যৱহাৰকাৰী অভিজ্ঞতাৰ প্ৰতি গুৰুত্ব দিয়ে, আপোনাৰ ব্যৱহাৰকাৰীসকলক <noscript>পৰিস্থিতি (আৰু জাভাস্ক্রিপ্ট কেনেকৈ পুনৰায় সামৰ্থবান কৰিব লাগে) ব্যাখ্যা কৰিবলে ব্যৱহাৰ কৰক, আৰু/বা আপোনাৰ নিজৰ স্বনিৰ্বাচিত ফ'লবেকসমূহ যোগ কৰক।

পৰিৱৰ্তনসমূহ transition.js

পৰিৱৰ্তনৰ বিষয়ে

সৰল পৰিৱৰ্তন প্ৰভাৱৰ বাবে, transition.jsঅন্য JS নথিপত্ৰসমূহৰ সৈতে এবাৰ অন্তৰ্ভুক্ত কৰক। যদি আপুনি কম্পাইল কৰা (বা সৰু কৰা) ব্যৱহাৰ কৰিছে bootstrap.js, ইয়াক অন্তৰ্ভুক্ত কৰাৰ প্ৰয়োজন নাই—ই ইতিমধ্যে আছে।

ভিতৰত কি আছে

Transition.js এটা ইভেন্টসমূহৰ বাবে এটা মৌলিক সহায়ক আৰু transitionEndলগতে এটা CSS পৰিৱৰ্তন ইমুলেটৰ। ইয়াক অন্য প্লাগইনসমূহে CSS পৰিৱৰ্তন সমৰ্থনৰ বাবে পৰীক্ষা কৰিবলে আৰু হেংগিং পৰিবৰ্তনসমূহ ধৰিবলে ব্যৱহাৰ কৰে।

পৰিৱৰ্তনসমূহ নিষ্ক্ৰিয় কৰা

নিম্নলিখিত জাভাস্ক্রিপ্ট স্নিপেট ব্যৱহাৰ কৰি পৰিবৰ্তনসমূহক গোলকীয়ভাৱে নিষ্ক্ৰিয় কৰিব পাৰি, যি ল'ড কৰাৰ পিছত transition.js(বা bootstrap.jsবা bootstrap.min.js, যিদৰে হ'ব পাৰে) আহিব লাগিব:

$.support.transition = false

মডালসমূহ modal.js

মডালসমূহ ষ্ট্ৰীমলাইন কৰা হৈছে, কিন্তু নমনীয়, নূন্যতম প্ৰয়োজনীয় কাৰ্য্যকৰীতা আৰু স্মাৰ্ট অবিকল্পিতসমূহৰ সৈতে সংলাপ প্ৰমপ্টসমূহ।

HTML5 এ ইয়াৰ অৰ্থবোধ কেনেকৈ সংজ্ঞায়িত কৰে তাৰ বাবে, autofocusHTML বৈশিষ্ট্যৰ বুটষ্ট্ৰেপ মডালত কোনো প্ৰভাৱ নাই। একে প্ৰভাৱ লাভ কৰিবলৈ, কিছুমান স্বনিৰ্বাচিত জাভাস্ক্রিপ্ট ব্যৱহাৰ কৰক:

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

লাইভ ডেমো

তলৰ বুটামটো ক্লিক কৰি জাভাস্ক্রিপ্টৰ যোগেদি এটা মডাল টগল কৰক। ই তললৈ স্লাইড হৈ পৃষ্ঠাৰ ওপৰৰ পৰা ফিকে হৈ যাব।

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

গ্ৰীড ব্যৱস্থা ব্যৱহাৰ কৰি

এটা মডালৰ ভিতৰত Bootstrap গ্ৰীড ব্যৱস্থাপ্ৰণালীৰ সুবিধা ল'বলৈ, মাত্ৰ .rows ৰ ভিতৰত nest কৰক .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 -->

ট্ৰিগাৰ বুটামৰ ওপৰত ভিত্তি কৰি মডাল বিষয়বস্তুৰ পৰিৱৰ্তন কৰা

বুটামৰ এটা গোট আছে যি সকলোৱে একেটা মডাল ট্ৰিগাৰ কৰে, মাত্ৰ অলপ বেলেগ বিষয়বস্তুৰ সৈতে? ব্যৱহাৰ কৰক event.relatedTargetআৰু HTML data-*বৈশিষ্ট্যসমূহ (সম্ভৱতঃ jQuery ৰ যোগেদি ) কোনটো বুটাম ক্লিক কৰা হৈছিল তাৰ ওপৰত নিৰ্ভৰ কৰি মডালৰ বিষয়বস্তু সলনি কৰিবলে। 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)
})

ব্যৱহাৰ

মডাল প্লাগ-ইনে চাহিদা অনুসৰি আপোনাৰ লুকাই থকা বিষয়বস্তু টগল কৰে, ডাটা বৈশিষ্ট্যসমূহ বা জাভাস্ক্রিপ্টৰ যোগেদি। ই অবিকল্পিত স্ক্ৰলিং আচৰণ অভাৰৰাইড কৰিবলৈও যোগ কৰে .modal-openআৰু মডালৰ বাহিৰত ক্লিক কৰাৰ সময়ত দেখুওৱা মডালসমূহ বাতিল কৰাৰ বাবে এটা ক্লিক অঞ্চল প্ৰদান কৰিবলৈ এটা সৃষ্টি কৰে।<body>.modal-backdrop

ডাটা এট্ৰিবিউটৰ জৰিয়তে

জাভাস্ক্রিপ্ট লিখা নোহোৱাকৈ এটা মডাল সক্ৰিয় কৰক। data-toggle="modal"এটা নিয়ন্ত্ৰক উপাদানত সংহতি কৰক , যেনে এটা বুটাম, এটা data-target="#foo"বা href="#foo"টগল কৰিবলে এটা নিৰ্দিষ্ট মডাল লক্ষ্য কৰিবলৈ।

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

জাভাস্ক্রিপ্টৰ জৰিয়তে

myModalজাভাস্ক্রিপ্টৰ এটা শাৰীৰ সৈতে id ৰ সৈতে এটা মডাল কল কৰক :

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

বিকল্পসমূহ

বিকল্পসমূহ ডাটা এট্ৰিবিউট বা জাভাস্ক্রিপ্টৰ যোগেদি পাছ কৰিব পাৰি। তথ্য বৈশিষ্ট্যসমূহৰ বাবে, বিকল্পৰ নাম ত সংযুক্ত কৰক 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.modalhidden.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...
})

ড্ৰপডাউনসমূহ dropdown.js

উদাহৰণ

এই সৰল প্লাগইনৰ সৈতে প্ৰায় যিকোনো বস্তুত ড্ৰপডাউন মেনুসমূহ যোগ কৰক, navbar, tabs, আৰু pills অন্তৰ্ভুক্ত কৰি।

এটা নৱবাৰৰ ভিতৰত

বড়িৰ ভিতৰত

ব্যৱহাৰ

ডাটা বৈশিষ্ট্যসমূহ বা জাভাস্ক্রিপ্টৰ যোগেদি, ড্ৰপডাউন প্লাগ-ইনে .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>

জাভাস্ক্রিপ্টৰ জৰিয়তে

জাভাস্ক্রিপ্টৰ জৰিয়তে ড্ৰপডাউনসমূহ কল কৰক:

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

বিকল্পসমূহ

একো নাই

পদ্ধতিসমূহ

$().dropdown('toggle')

এটা প্ৰদত্ত নেভবাৰ বা টেব কৰা নেভিগেচনৰ ড্ৰপডাউন মেনু টগল কৰে।

ইভেন্টসমূহ

.dropdown-menuসকলো ড্ৰপডাউন ইভেন্ট 'ৰ মূল উপাদানত গুলী কৰা হয় ।

সকলো ড্ৰপডাউন ইভেন্টৰ এটা relatedTargetবৈশিষ্ট্য থাকে, যাৰ মান হৈছে টগলিং এংকৰ উপাদান।

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

স্ক্ৰলস্পাই scrollspy.js

navbar ত উদাহৰণ

ScrollSpy প্লাগইন স্ক্ৰল অৱস্থানৰ ওপৰত ভিত্তি কৰি স্বয়ংক্ৰিয়ভাৱে nav লক্ষ্যসমূহ আপডেইট কৰাৰ বাবে। navbar ৰ তলৰ অঞ্চলটো স্ক্ৰল কৰক আৰু সক্ৰিয় শ্ৰেণী সলনি হোৱাটো চাওক। ড্ৰপডাউন উপ বস্তুবোৰো হাইলাইট কৰা হ’ব।

ব্যৱহাৰ

আপেক্ষিক অৱস্থানৰ প্ৰয়োজন

প্ৰণয়ন পদ্ধতি যিয়েই নহওক কিয়, scrollspy ৰ ব্যৱহাৰৰ প্ৰয়োজন position: relative;আপুনি চোৰাংচোৱাগিৰি কৰা উপাদানটোৰ ওপৰত। বেছিভাগ ক্ষেত্ৰতে এইটোৱেই হৈছে <body>. ৰ বাহিৰে অন্য উপাদানসমূহত স্ক্ৰলস্পাই কৰাৰ সময়ত , এটা ছেট <body>থকাটো নিশ্চিত কৰক আৰু প্ৰয়োগ কৰা।heightoverflow-y: scroll;

ডাটা এট্ৰিবিউটৰ জৰিয়তে

আপোনাৰ শীৰ্ষবাৰ নেভিগেচনত সহজে scrollspy আচৰণ যোগ কৰিবলে, data-spy="scroll"আপুনি চোৰাংচোৱাগিৰি কৰিব বিচৰা উপাদানত যোগ কৰক (বেছিভাগ সাধাৰণতে এইটো হ'ব <body>)। data-targetতাৰ পিছত যিকোনো Bootstrap উপাদানৰ মূল উপাদানৰ 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>

জাভাস্ক্রিপ্টৰ জৰিয়তে

আপোনাৰ CSS ত যোগ কৰাৰ পিছত position: relative;, জাভাস্ক্রিপ্টৰ যোগেদি scrollspy কল কৰক:

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

পদ্ধতিসমূহ

.scrollspy('refresh')

DOM ৰ পৰা উপাদানসমূহ যোগ বা আঁতৰোৱাৰ সৈতে scrollspy ব্যৱহাৰ কৰাৰ সময়ত, আপুনি সতেজ পদ্ধতিক এনেদৰে কল কৰিব লাগিব:

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

বিকল্পসমূহ

বিকল্পসমূহ ডাটা এট্ৰিবিউট বা জাভাস্ক্রিপ্টৰ যোগেদি পাছ কৰিব পাৰি। তথ্য বৈশিষ্ট্যসমূহৰ বাবে, বিকল্পৰ নাম , data-ত সংযুক্ত কৰকdata-offset="".

ইভেন্টসমূহ

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

টগলযোগ্য টেবসমূহ tab.js

উদাহৰণ টেবসমূহ

স্থানীয় বিষয়বস্তুৰ পেনসমূহৰ মাজেৰে পৰিৱৰ্তন কৰিবলৈ দ্ৰুত, গতিশীল টেব কাৰ্য্যকৰীতা যোগ কৰক, আনকি ড্ৰপডাউন মেনুসমূহৰ যোগেদিও। নেষ্টেড টেবসমূহ সমৰ্থিত নহয়।

ব্যৱহাৰ

জাভাস্ক্রিপ্টৰ যোগেদি টেবেবল টেবসমূহ সামৰ্থবান কৰক (প্ৰতিটো টেব পৃথকে পৃথকে সক্ৰিয় কৰিব লাগিব):

$('#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"যোগ কৰিলে বুটষ্ট্ৰেপ টেব ষ্টাইলিং প্ৰয়োগ কৰিব, আৰু শ্ৰেণীসমূহ যোগ কৰিলে পিল ষ্টাইলিং প্ৰয়োগ হ'ব ।navnav-tabsulnavnav-pills

<div>

  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home">...</div>
    <div role="tabpanel" class="tab-pane" id="profile">...</div>
    <div role="tabpanel" class="tab-pane" id="messages">...</div>
    <div role="tabpanel" class="tab-pane" id="settings">...</div>
  </div>

</div>

ফেড ইফেক্ট

টেবসমূহ ফেইড ইন .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()
})

ব্যৱহাৰ

সঁজুলিটিপ প্লাগ-ইনে চাহিদাৰ ওপৰত বিষয়বস্তু আৰু মাৰ্কআপ সৃষ্টি কৰে, আৰু অবিকল্পিতভাৱে সঁজুলিটিপসমূহ সিহতৰ ট্ৰিগাৰ উপাদানৰ পিছত ৰাখে।

জাভাস্ক্রিপ্টৰ যোগেদি সঁজুলিটিপ ট্ৰিগাৰ কৰক:

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

বিকল্পসমূহ

বিকল্পসমূহ ডাটা এট্ৰিবিউট বা জাভাস্ক্রিপ্টৰ যোগেদি পাছ কৰিব পাৰি। তথ্য বৈশিষ্ট্যসমূহৰ বাবে, বিকল্পৰ নাম ত সংযুক্ত কৰক 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…
})

পোপভাৰ্ছ 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>

ব্যৱহাৰ

জাভাস্ক্রিপ্টৰ যোগেদি popovers সামৰ্থবান কৰক:

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

বিকল্পসমূহ

বিকল্পসমূহ ডাটা এট্ৰিবিউট বা জাভাস্ক্রিপ্টৰ যোগেদি পাছ কৰিব পাৰি। তথ্য বৈশিষ্ট্যসমূহৰ বাবে, বিকল্পৰ নাম ত সংযুক্ত কৰক data-, যেনে data-animation="".

পদ্ধতিসমূহ

$().popover(options)

এটা উপাদান সংগ্ৰহৰ বাবে popovers আৰম্ভ কৰে।

.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শ্ৰেণীসমূহ উপস্থিত থাকে, সতৰ্কবাণী আঁতৰোৱাৰ আগতে ম্লান হৈ যাব।

ইভেন্টসমূহ

Bootstrap ৰ সতৰ্কবাণী প্লাগ-ইন সতৰ্কতা কাৰ্য্যকৰীতাত হুক কৰাৰ বাবে কেইটামান ইভেন্ট উন্মোচন কৰে।

$('#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" autocomplete="off">
  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" autocomplete="off">
  Single toggle
</button>

চেকবক্স / ৰেডিঅ'

data-toggle="buttons"এটা ধাৰণকাৰী চেকবাক্স বা ৰেডিঅ' ইনপুটসমূহত যোগ .btn-groupকৰক সিহতৰ নিজ নিজ শৈলীসমূহত টগলিং সামৰ্থবান কৰিবলে।

<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"ৰ প্ৰয়োজন।

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

একৰ্ডিয়নৰ উদাহৰণ

পেনেল উপাদানৰ সৈতে এটা একৰ্ডিয়ন সৃষ্টি কৰিবলে অবিকল্পিত সংকোচন আচৰণ সম্প্ৰসাৰিত কৰক।

<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"আৰু এটা যোগ কৰক । data-targetবৈশিষ্ট্যই এটা CSS নিৰ্বাচক গ্ৰহণ কৰে য'ত data-targetসংকোচন প্ৰয়োগ কৰিবলে। collapseসংকোচনযোগ্য উপাদানটোত শ্ৰেণীটো নিশ্চিতভাৱে যোগ কৰক । যদি আপুনি ইয়াক অবিকল্পিতভাৱে খোলাটো বিচাৰে, অতিৰিক্ত শ্ৰেণী যোগ কৰক in।

এটা সংকোচনযোগ্য নিয়ন্ত্ৰণত একৰ্ডিয়ন-ৰ দৰে গোট ব্যৱস্থাপনা যোগ কৰিবলে, তথ্য বৈশিষ্ট্য যোগ কৰক data-parent="#selector"। ইয়াক কাৰ্য্যত চাবলৈ ডেমো চাওক।

জাভাস্ক্রিপ্টৰ জৰিয়তে

হস্তচালিতভাৱে সামৰ্থবান কৰক:

$('.collapse').collapse()

বিকল্পসমূহ

বিকল্পসমূহ ডাটা এট্ৰিবিউট বা জাভাস্ক্রিপ্টৰ যোগেদি পাছ কৰিব পাৰি। তথ্য বৈশিষ্ট্যসমূহৰ বাবে, বিকল্পৰ নাম ত সংযুক্ত কৰক 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 ৰাখক আৰু ই স্বয়ংক্ৰিয়ভাৱে প্ৰান্তিককৰণ আৰু ফৰ্মেট কৰা হ'ব।

প্ৰথম স্লাইড লেবেল

Nulla vitae elit libero, এটা ফেৰেট্ৰা অগু মলিছ ইন্টাৰডাম।

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"বৈশিষ্ট্যটোক পৃষ্ঠা লোডৰ পৰা আৰম্ভ কৰি এটা কেৰউজেলক এনিমেচন হিচাপে চিহ্নিত কৰিবলৈ ব্যৱহাৰ কৰা হয় । ইয়াক একেটা কেৰউজেলৰ (অতিৰিক্ত আৰু অপ্ৰয়োজনীয়) স্পষ্ট জাভাস্ক্রিপ্ট আৰম্ভণিৰ সৈতে সংযুক্তভাৱে ব্যৱহাৰ কৰিব নোৱাৰি।

জাভাস্ক্রিপ্টৰ জৰিয়তে

কেৰউজেলক হস্তচালিতভাৱে কল কৰক:

$('.carousel').carousel()

বিকল্পসমূহ

বিকল্পসমূহ ডাটা এট্ৰিবিউট বা জাভাস্ক্রিপ্টৰ যোগেদি পাছ কৰিব পাৰি। তথ্য বৈশিষ্ট্যসমূহৰ বাবে, বিকল্পৰ নাম ত সংযুক্ত কৰক 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 প্লাগইন ব্যৱহাৰ কৰক। দুয়োটা পৰিস্থিতিতে, আপুনি আপোনাৰ সংলগ্ন বিষয়বস্তুৰ অৱস্থান আৰু প্ৰস্থৰ বাবে CSS প্ৰদান কৰিব লাগিব।

টোকা: এটা Safari ৰেণ্ডাৰ বাগৰ বাবে এটা তুলনামূলকভাৱে অৱস্থান কৰা উপাদানত থকা এটা উপাদানত, যেনে এটা টানি বা ঠেলি দিয়া স্তম্ভ, এফিক্স প্লাগইন ব্যৱহাৰ নকৰিব ।

CSS ৰ জৰিয়তে পজিচনিং কৰা

প্ৰত্যয় প্লাগ-ইন তিনিটা শ্ৰেণীৰ মাজত টগল কৰে, প্ৰত্যেকেই এটা নিৰ্দিষ্ট অৱস্থাক প্ৰতিনিধিত্ব কৰে: .affix, .affix-top, আৰু .affix-bottom। position: fixed;আপুনি শৈলীসমূহ প্ৰদান কৰিব লাগিব, on ৰ বাহিৰে .affix, এই শ্ৰেণীসমূহৰ বাবে নিজেই (এই প্লাগইনৰ পৰা স্বাধীন) প্ৰকৃত অৱস্থানসমূহ নিয়ন্ত্ৰণ কৰিবলে।

ইয়াত affix প্লাগ-ইন কেনেকৈ কাম কৰে:

1. আৰম্ভ কৰিবলৈ, প্লাগ-ইন যোগ কৰে.affix-top উপাদানটো ইয়াৰ শীৰ্ষ-সৰ্বাধিক অৱস্থানত আছে বুলি সূচাবলৈ যোগ কৰে। এই পইন্টত কোনো CSS অৱস্থানৰ প্ৰয়োজন নাই।
2. আপুনি সংলগ্ন কৰিব বিচৰা উপাদানটোৰ কাষেৰে স্ক্ৰল কৰিলে প্ৰকৃত সংলগ্নকৰণ ট্ৰিগাৰ কৰিব লাগে। এই ঠাইত .affixপ্ৰতিস্থাপন .affix-topআৰু সংহতি position: fixed;(Botstrap ৰ CSS দ্বাৰা প্ৰদান কৰা) ।
3. যদি এটা তলৰ অফছেট সংজ্ঞায়িত কৰা হৈছে, ইয়াৰ কাষেৰে স্ক্ৰল কৰিলে ইয়াৰ ঠাইত সলনি কৰিব .affixলাগে .affix-bottom। যিহেতু অফছেটসমূহ বৈকল্পিক, এটা সংহতি কৰাৰ বাবে আপুনি উপযুক্ত CSS সংহতি কৰিব লাগিব। এনে ক্ষেত্ৰত position: absolute;প্ৰয়োজনত যোগ কৰিব লাগে। প্লাগ-ইনে ডাটা এট্ৰিবিউট বা জাভাস্ক্রিপ্ট বিকল্প ব্যৱহাৰ কৰে যাতে তাৰ পৰা উপাদানটো ক'ত স্থাপন কৰিব লাগে সেইটো নিৰ্ধাৰণ কৰিব পাৰি।

তলৰ ব্যৱহাৰ বিকল্পসমূহৰ যিকোনো এটাৰ বাবে আপোনাৰ CSS সংহতি কৰিবলে ওপৰৰ পদক্ষেপসমূহ অনুসৰণ কৰক।

ডাটা এট্ৰিবিউটৰ জৰিয়তে

যিকোনো উপাদানত সহজে affix আচৰণ যোগ data-spy="affix"কৰিবলৈ, মাত্ৰ আপুনি চোৰাংচোৱাগিৰি কৰিব বিচৰা উপাদানটোত যোগ কৰক। এটা উপাদানৰ পিনিং কেতিয়া টগল কৰিব লাগে সংজ্ঞায়িত কৰিবলে অফছেটসমূহ ব্যৱহাৰ কৰক।

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

জাভাস্ক্রিপ্টৰ জৰিয়তে

জাভাস্ক্রিপ্টৰ যোগেদি affix প্লাগইন কল কৰক:

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

বিকল্পসমূহ

বিকল্পসমূহ ডাটা এট্ৰিবিউট বা জাভাস্ক্রিপ্টৰ যোগেদি পাছ কৰিব পাৰি। তথ্য বৈশিষ্ট্যসমূহৰ বাবে, বিকল্পৰ নাম ত সংযুক্ত কৰক data-, যেনে data-offset-top="200".

পদ্ধতিসমূহ

.affix(options)

আপোনাৰ বিষয়বস্তু সংলগ্ন বিষয়বস্তু হিচাপে সক্ৰিয় কৰে। এটা বৈকল্পিক বিকল্পসমূহ গ্ৰহণ কৰে object।

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

.affix('checkPosition')

প্ৰাসংগিক উপাদানসমূহৰ মাত্ৰা, অৱস্থান, আৰু স্ক্ৰল অৱস্থানৰ ওপৰত ভিত্তি কৰি প্ৰত্যয়ৰ অৱস্থা পুনৰ গণনা কৰে। , .affix, .affix-topআৰু .affix-bottomশ্ৰেণীসমূহ নতুন অৱস্থা অনুসৰি সংলগ্ন বিষয়বস্তুত যোগ কৰা হয় বা আঁতৰোৱা হয়। এই পদ্ধতিটো কল কৰিব লাগিব যেতিয়াই সংলগ্ন বিষয়বস্তু বা লক্ষ্য উপাদানৰ মাত্ৰা সলনি কৰা হয়, সংলগ্ন বিষয়বস্তুৰ সঠিক অৱস্থান নিশ্চিত কৰিবলৈ।

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

ইভেন্টসমূহ

Bootstrap ৰ affix প্লাগ-ইন এফিক্স কাৰ্য্যকৰীতাত হুক কৰাৰ বাবে কেইটামান ইভেন্ট উন্মোচন কৰে।