ওভারভিউ

স্বতন্ত্র বা সংকলিত

প্লাগইনগুলি পৃথকভাবে অন্তর্ভুক্ত করা যেতে পারে (বুটস্ট্র্যাপের স্বতন্ত্র *.jsফাইলগুলি ব্যবহার করে), বা একবারে (ব্যবহার করে bootstrap.jsবা ছোট করা bootstrap.min.js)।

ডেটা বৈশিষ্ট্য

আপনি জাভাস্ক্রিপ্টের একটি লাইন না লিখে মার্কআপ API এর মাধ্যমে বিশুদ্ধভাবে সমস্ত বুটস্ট্র্যাপ প্লাগইন ব্যবহার করতে পারেন। এটি বুটস্ট্র্যাপের প্রথম-শ্রেণীর API এবং প্লাগইন ব্যবহার করার সময় এটি আপনার প্রথম বিবেচনা করা উচিত।

এটি বলেছে, কিছু পরিস্থিতিতে এই কার্যকারিতা বন্ধ করা বাঞ্ছনীয় হতে পারে। তাই, আমরা ডকুমেন্ট নেমস্পেসের সাথে থাকা সমস্ত ইভেন্টকে আনবাইন্ড করে ডেটা অ্যাট্রিবিউট API নিষ্ক্রিয় করার ক্ষমতাও প্রদান করি data-api। এটি এই মত দেখায়:

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

বিকল্পভাবে, একটি নির্দিষ্ট প্লাগইনকে টার্গেট করতে, শুধু প্লাগইনের নামটি একটি নামস্থান হিসাবে অন্তর্ভুক্ত করুন এবং ডেটা-এপিআই নামস্থানের সাথে এইভাবে:

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

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

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

ঘটনা

বুটস্ট্র্যাপ বেশিরভাগ প্লাগইনের অনন্য কর্মের জন্য কাস্টম ইভেন্ট প্রদান করে। সাধারণত, এগুলি একটি অসীম এবং অতীত কণা আকারে আসে - যেখানে showএকটি ইভেন্টের শুরুতে ইনফিনিটিভ (উদাহরণস্বরূপ ) shownট্রিগার করা হয় এবং একটি ক্রিয়া সম্পূর্ণ হওয়ার সময় এর অতীত কণা রূপ (উদাহরণস্বরূপ) ট্রিগার হয়।

3.0.0 হিসাবে, সমস্ত বুটস্ট্র্যাপ ইভেন্ট নামস্থানে রয়েছে।

সমস্ত অসীম ইভেন্ট preventDefaultকার্যকারিতা প্রদান করে। এটি শুরু হওয়ার আগে একটি ক্রিয়া সম্পাদন বন্ধ করার ক্ষমতা প্রদান করে।

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

স্যানিটাইজার

টুলটিপস এবং পপোভারস আমাদের অন্তর্নির্মিত স্যানিটাইজার ব্যবহার করে বিকল্পগুলিকে স্যানিটাইজ করতে যা HTML গ্রহণ করে।

ডিফল্ট whiteListমান নিম্নরূপ:

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

আপনি যদি এই ডিফল্টে নতুন মান যোগ করতে চান তবে আপনি whiteListনিম্নলিখিতগুলি করতে পারেন:

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

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

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

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

আপনি যদি আমাদের স্যানিটাইজার বাইপাস করতে চান কারণ আপনি একটি ডেডিকেটেড লাইব্রেরি ব্যবহার করতে পছন্দ করেন, উদাহরণস্বরূপ DOMPurify , তাহলে আপনাকে নিম্নলিখিতগুলি করতে হবে:

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

সংস্করণ সংখ্যা

বুটস্ট্র্যাপের jQuery প্লাগইনগুলির প্রতিটির সংস্করণ VERSIONপ্লাগইনের কনস্ট্রাক্টরের সম্পত্তির মাধ্যমে অ্যাক্সেস করা যেতে পারে। উদাহরণস্বরূপ, টুলটিপ প্লাগইনের জন্য:

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

জাভাস্ক্রিপ্ট নিষ্ক্রিয় থাকলে কোন বিশেষ ফলব্যাক নেই

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

ট্রানজিশন transition.js

রূপান্তর সম্পর্কে

সাধারণ ট্রানজিশন ইফেক্টের জন্য, transition.jsঅন্য JS ফাইলগুলির সাথে একবার অন্তর্ভুক্ত করুন। আপনি যদি কম্পাইল করা (বা মিনিফাইড) ব্যবহার করেন bootstrap.js, তাহলে এটিকে অন্তর্ভুক্ত করার দরকার নেই—এটি ইতিমধ্যেই আছে।

ভিতরে কি

Transition.js ইভেন্টের জন্য একটি মৌলিক সাহায্যকারীর transitionEndপাশাপাশি একটি CSS ট্রানজিশন এমুলেটর। এটি অন্যান্য প্লাগইন দ্বারা CSS ট্রানজিশন সমর্থন পরীক্ষা করতে এবং ঝুলন্ত ট্রানজিশন ধরার জন্য ব্যবহার করা হয়।

ট্রানজিশন অক্ষম করা হচ্ছে

নিম্নলিখিত জাভাস্ক্রিপ্ট স্নিপেট ব্যবহার করে ট্রানজিশনগুলি বিশ্বব্যাপী অক্ষম করা যেতে পারে, যা লোড হওয়ার পরে transition.js(বা bootstrap.jsবা bootstrap.min.js, যেমন হতে পারে) আসতে হবে:

$.support.transition = false

Modals modal.js

মডেলগুলি স্ট্রীমলাইনড, কিন্তু নমনীয়, ন্যূনতম প্রয়োজনীয় কার্যকারিতা এবং স্মার্ট ডিফল্ট সহ ডায়ালগ প্রম্পট।

HTML5 কীভাবে এর শব্দার্থবিদ্যাকে সংজ্ঞায়িত করে তার কারণে, autofocusবুটস্ট্র্যাপ মডেলগুলিতে এইচটিএমএল অ্যাট্রিবিউটের কোনো প্রভাব নেই। একই প্রভাব অর্জন করতে, কিছু কাস্টম জাভাস্ক্রিপ্ট ব্যবহার করুন:

$('#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" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

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

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

অ্যানিমেশন সরান

দেখার জন্য বিবর্ণ হওয়ার পরিবর্তে সহজভাবে প্রদর্শিত মডেলগুলির জন্য, .fadeআপনার মোডাল মার্কআপ থেকে ক্লাসটি সরিয়ে দিন।

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

গ্রিড সিস্টেম ব্যবহার করে

একটি মডেলের মধ্যে বুটস্ট্র্যাপ গ্রিড সিস্টেমের সুবিধা নিতে, শুধুমাত্র নেস্ট .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 -->

ট্রিগার বোতামের উপর ভিত্তি করে বিভিন্ন মডেল সামগ্রী

একগুচ্ছ বোতাম আছে যা একই মোডাল ট্রিগার করে, সামান্য ভিন্ন বিষয়বস্তু সহ? কোন বোতামে ক্লিক করা হয়েছে তার উপর নির্ভর করে মডেলের বিষয়বস্তু পরিবর্তিত করতে event.relatedTargetHTML গুণাবলী 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জাভাস্ক্রিপ্টের একটি লাইন সহ আইডি সহ একটি মডেল কল করুন :

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

উদাহরণ

নেভিবার, ট্যাব এবং বড়ি সহ এই সাধারণ প্লাগইনের সাহায্যে প্রায় যেকোনো কিছুতে ড্রপডাউন মেনু যোগ করুন।

একটি নববারের মধ্যে

বড়ির মধ্যে

ব্যবহার

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

নভবারে উদাহরণ

ScrollSpy প্লাগইন স্ক্রোল অবস্থানের উপর ভিত্তি করে স্বয়ংক্রিয়ভাবে নেভি লক্ষ্যগুলি আপডেট করার জন্য। navbar এর নীচের এলাকাটি স্ক্রোল করুন এবং সক্রিয় শ্রেণী পরিবর্তন দেখুন। ড্রপডাউন সাব আইটেমগুলিও হাইলাইট করা হবে।

ব্যবহার

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

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

ডেটা অ্যাট্রিবিউটের মাধ্যমে

আপনার টপবার নেভিগেশনে সহজেই স্ক্রোলস্পি আচরণ যোগ data-spy="scroll"করতে, আপনি যে উপাদানটি গুপ্তচর করতে চান তাতে যোগ করুন (সাধারণত এটি হবে <body>)। তারপর কোনো বুটস্ট্র্যাপ কম্পোনেন্টের data-targetপ্যারেন্ট এলিমেন্টের আইডি বা ক্লাসের সাথে অ্যাট্রিবিউট যোগ করুন।.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;, JavaScript এর মাধ্যমে scrollspy কল করুন:

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

পদ্ধতি

.scrollspy('refresh')

DOM থেকে উপাদান যোগ বা অপসারণের সাথে স্ক্রোলস্পাই ব্যবহার করার সময়, আপনাকে রিফ্রেশ পদ্ধতিতে কল করতে হবে:

$('[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"কোনো উপাদানে। 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

একটি ট্যাব উপাদান এবং বিষয়বস্তু ধারক সক্রিয় করে। ট্যাবে একটি 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…
})

Popovers popover.js

হাউজিং সেকেন্ডারি তথ্যের জন্য যেকোনো উপাদানে আইপ্যাডের মতো বিষয়বস্তুর ছোট ওভারলে যোগ করুন।

Popovers যাদের শিরোনাম এবং বিষয়বস্তু উভয়ই শূন্য-দৈর্ঘ্যের হয় তা কখনই প্রদর্শিত হয় না।

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

উদাহরণ

স্ট্যাটিক পপওভার

চারটি বিকল্প উপলব্ধ: উপরে, ডান, নীচে এবং বাম প্রান্তিককৃত।

সরাসরি নমুনা

<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

চার দিক

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on left
</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on top
</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on bottom
</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on right
</button>

পরবর্তী ক্লিকে খারিজ করুন

focusব্যবহারকারীর পরবর্তী ক্লিকে পপওভার খারিজ করতে ট্রিগারটি ব্যবহার করুন ।

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

ব্যবহার

জাভাস্ক্রিপ্টের মাধ্যমে পপওভার সক্ষম করুন:

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

অপশন

বিকল্পগুলি ডেটা অ্যাট্রিবিউট বা জাভাস্ক্রিপ্টের মাধ্যমে পাস করা যেতে পারে। ডেটা অ্যাট্রিবিউটের জন্য, বিকল্পের নাম যোগ করুন data-, যেমনটি data-animation=""।

পদ্ধতি

$().popover(options)

একটি উপাদান সংগ্রহের জন্য পপওভার শুরু করে।

.popover('show')

একটি উপাদানের পপওভার প্রকাশ করে। পপওভার আসলে দেখানোর আগে (অর্থাৎ shown.bs.popoverঘটনা ঘটার আগে) কলারের কাছে ফিরে আসে। এটি পপওভারের একটি "ম্যানুয়াল" ট্রিগারিং হিসাবে বিবেচিত হয়। Popovers যাদের শিরোনাম এবং বিষয়বস্তু উভয়ই শূন্য-দৈর্ঘ্যের হয় তা কখনই প্রদর্শিত হয় না।

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

.popover('hide')

একটি উপাদানের পপওভার লুকিয়ে রাখে। পপওভারটি আসলে লুকানো হওয়ার আগে (অর্থাৎ hidden.bs.popoverঘটনা ঘটার আগে) কলারের কাছে ফিরে আসে। এটি পপওভারের একটি "ম্যানুয়াল" ট্রিগারিং হিসাবে বিবেচিত হয়।

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

.popover('toggle')

একটি উপাদানের পপওভার টগল করে। পপওভারটি আসলে দেখানো বা লুকানোর আগে (অর্থাৎ ঘটনা ঘটার আগে) কলারের কাছেshown.bs.popover ফিরে আসে hidden.bs.popover। এটি পপওভারের একটি "ম্যানুয়াল" ট্রিগারিং হিসাবে বিবেচিত হয়।

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

.popover('destroy')

একটি উপাদানের পপওভার লুকায় এবং ধ্বংস করে। ডেলিগেশন ব্যবহার করে পপোভার (যা বিকল্প ব্যবহার করেselector তৈরি করা হয় ) বংশধর ট্রিগার উপাদানগুলিতে পৃথকভাবে ধ্বংস করা যাবে না।

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

ঘটনা

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

সতর্কতা বার্তা alert.js

উদাহরণ সতর্কতা

এই প্লাগইন সহ সমস্ত সতর্কতা বার্তাগুলিতে খারিজ কার্যকারিতা যুক্ত করুন৷

একটি .closeবোতাম ব্যবহার করার সময়, এটি অবশ্যই এর প্রথম সন্তান হতে .alert-dismissibleহবে এবং মার্কআপে এর আগে কোনও পাঠ্য সামগ্রী আসতে পারে না।

ব্যবহার

data-dismiss="alert"স্বয়ংক্রিয়ভাবে একটি সতর্কতা বন্ধ কার্যকারিতা দিতে শুধু আপনার বন্ধ বোতাম যোগ করুন . একটি সতর্কতা বন্ধ করা এটি DOM থেকে সরিয়ে দেয়।

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

আপনার সতর্কতাগুলি বন্ধ করার সময় অ্যানিমেশন ব্যবহার করার জন্য, নিশ্চিত করুন যে সেগুলিতে ইতিমধ্যেই প্রয়োগ করা হয়েছে .fadeএবং ক্লাস রয়েছে৷.in

পদ্ধতি

$().alert()

data-dismiss="alert"অ্যাট্রিবিউট আছে এমন বংশধর উপাদানগুলিতে ক্লিক ইভেন্টগুলির জন্য একটি সতর্কতা শোনায় ৷ (ডেটা-এপিআই-এর স্বয়ংক্রিয়-সূচনা ব্যবহার করার সময় প্রয়োজনীয় নয়।)

$().alert('close')

DOM থেকে এটিকে সরিয়ে একটি সতর্কতা বন্ধ করে। যদি .fadeএবং .inক্লাসগুলি উপাদানটিতে উপস্থিত থাকে তবে সতর্কতাটি সরানোর আগে বিবর্ণ হয়ে যাবে।

ঘটনা

বুটস্ট্র্যাপের সতর্কতা প্লাগইন সতর্কতার কার্যকারিতার সাথে হুক করার জন্য কয়েকটি ইভেন্ট প্রকাশ করে।

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

বোতাম button.js

বোতাম দিয়ে আরও কিছু করুন। কন্ট্রোল বোতাম স্টেট বা টুলবারের মত আরো উপাদানের জন্য বোতামের গ্রুপ তৈরি করুন।

রাষ্ট্রীয়

data-loading-text="Loading..."একটি বোতামে একটি লোডিং অবস্থা ব্যবহার করতে যোগ করুন ।

এই বৈশিষ্ট্যটি v3.3.5 থেকে অবহেলিত হয়েছে এবং v4 এ সরানো হয়েছে।

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

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

একক টগল

data-toggle="button"একটি একক বোতামে টগলিং সক্রিয় করতে যোগ করুন ।

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

চেকবক্স / রেডিও

তাদের নিজ নিজ শৈলীতে টগলিং সক্ষম data-toggle="buttons"করতে একটি সমন্বিত চেকবক্স বা রেডিও ইনপুট যোগ করুন।.btn-group

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

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

পদ্ধতি

$().button('toggle')

পুশ স্টেট টগল করে। বোতামটিকে এমন চেহারা দেয় যে এটি সক্রিয় করা হয়েছে।

$().button('reset')

বোতামের অবস্থা রিসেট করে - পাঠ্যকে মূল পাঠ্যে অদলবদল করে। এই পদ্ধতিটি অ্যাসিঙ্ক্রোনাস এবং রিসেটিংটি আসলে শেষ হওয়ার আগে ফিরে আসে।

$().button(string)

যেকোনো ডেটা সংজ্ঞায়িত পাঠ্য অবস্থায় পাঠ্য অদলবদল করে।

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

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

Collapse.js সঙ্কুচিত করুন

নমনীয় প্লাগইন যা সহজ টগল আচরণের জন্য মুষ্টিমেয় ক্লাস ব্যবহার করে।

উদাহরণ

ক্লাস পরিবর্তনের মাধ্যমে অন্য একটি উপাদান দেখাতে এবং লুকানোর জন্য নীচের বোতামগুলিতে ক্লিক করুন:

• .collapseবিষয়বস্তু লুকিয়ে রাখে
• .collapsingপরিবর্তনের সময় প্রয়োগ করা হয়
• .collapse.inবিষয়বস্তু দেখায়

আপনি বৈশিষ্ট্য সহ একটি লিঙ্ক hrefবা বৈশিষ্ট্য সহ একটি বোতাম ব্যবহার করতে পারেন data-target। উভয় ক্ষেত্রে, এটি data-toggle="collapse"প্রয়োজনীয়।

<a class="btn btn-primary" role="button" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Link with href
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Button with data-target
</button>
<div class="collapse" id="collapseExample">
  <div class="well">
    ...
  </div>
</div>

অ্যাকর্ডিয়নের উদাহরণ

প্যানেল উপাদানের সাথে একটি অ্যাকর্ডিয়ন তৈরি করতে ডিফল্ট পতন আচরণ প্রসারিত করুন।

<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-bodyএটি s এর সাথে s অদলবদল করাও সম্ভব .list-group।

ব্যবহার

পতন প্লাগইন ভারী উত্তোলন পরিচালনা করতে কয়েকটি ক্লাস ব্যবহার করে:

• .collapseবিষয়বস্তু লুকিয়ে রাখে
• .collapse.inবিষয়বস্তু দেখায়
• .collapsingট্রানজিশন শুরু হলে যোগ করা হয় এবং শেষ হলে সরিয়ে দেওয়া হয়

এই ক্লাস পাওয়া যাবে component-animations.less.

ডেটা অ্যাট্রিবিউটের মাধ্যমে

একটি সংকোচনযোগ্য উপাদানের নিয়ন্ত্রণ স্বয়ংক্রিয়ভাবে বরাদ্দ করতে উপাদানটিতে শুধু যোগ করুন data-toggle="collapse"এবং a । data-targetঅ্যাট্রিবিউটটি 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 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, a pharetra augue mollis interdum.

দ্বিতীয় স্লাইড লেবেল

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

তৃতীয় স্লাইড লেবেল

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 _

উদাহরণ

অ্যাফিক্স প্লাগইনটি position: fixed;চালু এবং বন্ধ টগল করে, এর সাথে পাওয়া প্রভাবটি অনুকরণ করে position: sticky;। ডানদিকের সাবনেভিগেশনটি অ্যাফিক্স প্লাগইনের একটি লাইভ ডেমো।

ব্যবহার

ডেটা অ্যাট্রিবিউটের মাধ্যমে বা ম্যানুয়ালি আপনার নিজের জাভাস্ক্রিপ্টের মাধ্যমে অ্যাফিক্স প্লাগইন ব্যবহার করুন। উভয় পরিস্থিতিতেই, আপনাকে অবশ্যই আপনার সংযুক্ত সামগ্রীর অবস্থান এবং প্রস্থের জন্য CSS প্রদান করতে হবে।

দ্রষ্টব্য: Safari রেন্ডারিং বাগের কারণে একটি টানা বা ধাক্কা দেওয়া কলামের মতো তুলনামূলকভাবে অবস্থানকারী উপাদানে থাকা একটি উপাদানে অ্যাফিক্স প্লাগইন ব্যবহার করবেন না ।

CSS এর মাধ্যমে পজিশনিং

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

অ্যাফিক্স প্লাগইন কীভাবে কাজ করে তা এখানে:

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

নিচের যেকোনো একটি ব্যবহারের বিকল্পের জন্য আপনার CSS সেট করতে উপরের ধাপগুলি অনুসরণ করুন।

ডেটা অ্যাট্রিবিউটের মাধ্যমে

যেকোন এলিমেন্টে সহজে অ্যাফিক্স আচরণ যোগ data-spy="affix"করতে, আপনি যে উপাদানটি গুপ্তচর করতে চান তাতে যোগ করুন। কখন একটি উপাদানের পিনিং টগল করতে হবে তা নির্ধারণ করতে অফসেটগুলি ব্যবহার করুন৷

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

জাভাস্ক্রিপ্টের মাধ্যমে

জাভাস্ক্রিপ্টের মাধ্যমে অ্যাফিক্স প্লাগইনটি কল করুন:

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

ঘটনা

বুটস্ট্র্যাপের অ্যাফিক্স প্লাগইন অ্যাফিক্স কার্যকারিতার সাথে হুক করার জন্য কয়েকটি ঘটনা প্রকাশ করে।