ওভারভিউ

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

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

কম্পাইল করা জাভাস্ক্রিপ্ট ব্যবহার করে

উভয়ই bootstrap.jsএবং bootstrap.min.jsএকটি একক ফাইলে সমস্ত প্লাগইন রয়েছে৷ শুধুমাত্র একটি অন্তর্ভুক্ত.

প্লাগইন নির্ভরতা

কিছু প্লাগইন এবং CSS উপাদান অন্যান্য প্লাগইনের উপর নির্ভর করে। আপনি যদি পৃথকভাবে প্লাগইনগুলি অন্তর্ভুক্ত করেন, তাহলে ডক্সে এই নির্ভরতাগুলি পরীক্ষা করা নিশ্চিত করুন৷ এছাড়াও মনে রাখবেন যে সমস্ত প্লাগইন jQuery এর উপর নির্ভর করে ( এর মানে প্লাগইন ফাইলের আগে jQuery অন্তর্ভুক্ত করা আবশ্যক )। jQuery এর কোন সংস্করণগুলি সমর্থিত তা দেখতে আমাদের সাথে যোগাযোগ করুন৷bower.json

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

আপনি জাভাস্ক্রিপ্টের একটি লাইন না লিখে মার্কআপ 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
})

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

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

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

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

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

তৃতীয় পক্ষের লাইব্রেরি

বুটস্ট্র্যাপ আনুষ্ঠানিকভাবে প্রোটোটাইপ বা jQuery UI এর মতো তৃতীয় পক্ষের জাভাস্ক্রিপ্ট লাইব্রেরি সমর্থন করে না । ইভেন্ট এবং নেমস্পেস থাকা সত্ত্বেও .noConflict, সামঞ্জস্যপূর্ণ সমস্যা থাকতে পারে যা আপনাকে নিজেরাই ঠিক করতে হবে।

ট্রানজিশন 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

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

একাধিক খোলা মডেল সমর্থিত নয়

অন্যটি দৃশ্যমান থাকাকালীন একটি মোডাল না খুলতে ভুলবেন না। একবারে একাধিক মডেল দেখানোর জন্য কাস্টম কোডের প্রয়োজন।

মডেল মার্কআপ বসানো

মোডালের চেহারা এবং/অথবা কার্যকারিতাকে প্রভাবিত করে এমন অন্যান্য উপাদানগুলি এড়াতে সর্বদা আপনার নথিতে একটি শীর্ষ-স্তরের অবস্থানে একটি মডেলের HTML কোড রাখার চেষ্টা করুন৷

মোবাইল ডিভাইস সতর্কতা

মোবাইল ডিভাইসে মডেল ব্যবহার সংক্রান্ত কিছু সতর্কতা আছে। বিস্তারিত জানার জন্য আমাদের ব্রাউজার সমর্থন ডক্স দেখুন.

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>

মডেল অ্যাক্সেসযোগ্য করুন

মডেল শিরোনাম, থেকে এবং নিজেই যোগ করতে এবং , উল্লেখ করতে ভুলবেন না role="dialog"aria-labelledby="...".modalrole="document".modal-dialog

অতিরিক্তভাবে, আপনি aria-describedbyon এর সাথে আপনার মডেল ডায়ালগের একটি বিবরণ দিতে পারেন .modal

ইউটিউব ভিডিও এম্বেড করা

মডেলগুলিতে YouTube ভিডিওগুলি এম্বেড করার জন্য স্বয়ংক্রিয়ভাবে প্লেব্যাক এবং আরও অনেক কিছু বন্ধ করতে বুটস্ট্র্যাপে নয় অতিরিক্ত জাভাস্ক্রিপ্টের প্রয়োজন৷ আরও তথ্যের জন্য এই সহায়ক স্ট্যাক ওভারফ্লো পোস্টটি দেখুন।

ঐচ্ছিক মাপ

মোডেলগুলির দুটি ঐচ্ছিক মাপ আছে, যা মডিফায়ার ক্লাসের মাধ্যমে উপলব্ধ একটি .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>

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

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

নাম প্রকার ডিফল্ট বর্ণনা
ব্যাকড্রপ বুলিয়ান বা স্ট্রিং'static' সত্য একটি মডেল-ব্যাকড্রপ উপাদান অন্তর্ভুক্ত। বিকল্পভাবে, staticএকটি পটভূমির জন্য নির্দিষ্ট করুন যা ক্লিকে মোডাল বন্ধ করে না।
কীবোর্ড বুলিয়ান সত্য এস্কেপ কী চাপলে মোডাল বন্ধ করে
প্রদর্শন বুলিয়ান সত্য আরম্ভ করার সময় মডেল দেখায়।
দূরবর্তী পথ মিথ্যা

এই বিকল্পটি v3.3.0 থেকে অবহেলিত হয়েছে এবং v4 এ সরানো হয়েছে। আমরা এর পরিবর্তে ক্লায়েন্ট-সাইড টেমপ্লেটিং বা ডেটা বাইন্ডিং ফ্রেমওয়ার্ক ব্যবহার করার বা jQuery.load নিজে কল করার পরামর্শ দিই।

যদি একটি দূরবর্তী URL প্রদান করা হয়, তাহলে বিষয়বস্তু jQuery এর পদ্ধতির মাধ্যমে একবার লোড করা হবেload এবং ডিভিতে ইনজেকশন করা হবে .modal-content। আপনি যদি ডেটা-এপিআই ব্যবহার করেন তবে আপনি বিকল্পভাবে hrefদূরবর্তী উত্স নির্দিষ্ট করতে বৈশিষ্ট্যটি ব্যবহার করতে পারেন। এর একটি উদাহরণ নীচে দেখানো হয়েছে:

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

পদ্ধতি

একটি মডেল হিসাবে আপনার বিষয়বস্তু সক্রিয়. একটি ঐচ্ছিক বিকল্প গ্রহণ করে object

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

ম্যানুয়ালি একটি মডেল টগল করে। মডেলটি আসলে দেখানো বা লুকানোর আগে (অর্থাৎ ঘটনা ঘটার আগে) কলারের কাছে ফিরে আসে।shown.bs.modalhidden.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 এই ইভেন্টটি বরখাস্ত করা হয় যখন মডেলটি ব্যবহারকারীর কাছে দৃশ্যমান করা হয় (সিএসএস রূপান্তর সম্পূর্ণ হওয়ার জন্য অপেক্ষা করবে)। যদি একটি ক্লিকের কারণে হয়, ক্লিক করা উপাদানটি relatedTargetইভেন্টের সম্পত্তি হিসাবে উপলব্ধ।
hide.bs.modal এই ইভেন্টটি অবিলম্বে বহিস্কার করা হয় যখন hideউদাহরণ পদ্ধতিটি কল করা হয়।
hidden.bs.modal এই ইভেন্টটি বরখাস্ত করা হয় যখন মডেলটি ব্যবহারকারীর কাছ থেকে লুকানো শেষ হয় (সিএসএস রূপান্তর সম্পূর্ণ হওয়ার জন্য অপেক্ষা করবে)।
loaded.bs.modal এই ইভেন্টটি বরখাস্ত করা হয় যখন মডেল remoteবিকল্পটি ব্যবহার করে সামগ্রী লোড করে।
$('#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()

data-toggle="dropdown"এখনও প্রয়োজন

আপনি JavaScript এর মাধ্যমে আপনার ড্রপডাউন কল করুন বা ডাটা-এপিআই ব্যবহার করুন না কেন data-toggle="dropdown", ড্রপডাউনের ট্রিগার উপাদানে সবসময় উপস্থিত থাকা প্রয়োজন।

কোনোটিই নয়

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

সমস্ত ড্রপডাউন ইভেন্ট .dropdown-menuএর মূল উপাদানে গুলি করা হয়৷

সমস্ত ড্রপডাউন ইভেন্টের একটি relatedTargetবৈশিষ্ট্য আছে, যার মান হল টগল করা অ্যাঙ্কর উপাদান৷

ইভেন্টের ধরণ বর্ণনা
show.bs.ড্রপডাউন শো ইনস্ট্যান্স পদ্ধতি কল করা হলে এই ইভেন্টটি অবিলম্বে চালু হয়।
দেখানো হয়েছে.বিএস.ড্রপডাউন ড্রপডাউনটি ব্যবহারকারীর কাছে দৃশ্যমান হয়ে গেলে এই ইভেন্টটি বরখাস্ত করা হয় (সিএসএস ট্রানজিশন সম্পূর্ণ হওয়ার জন্য অপেক্ষা করবে)।
hide.bs.ড্রপডাউন হাইড ইনস্ট্যান্স পদ্ধতি কল করা হলে এই ইভেন্টটি অবিলম্বে বহিস্কার করা হয়।
hidden.bs.ড্রপডাউন ড্রপডাউনটি ব্যবহারকারীর কাছ থেকে লুকানো শেষ হলে এই ইভেন্টটি বরখাস্ত করা হয় (সিএসএস ট্রানজিশন সম্পূর্ণ হওয়ার জন্য অপেক্ষা করবে)।
$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})

ScrollSpy scrollspy.js

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

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

@ফ্যাট

অ্যাড লেগিংস কিটার, ব্রাঞ্চ আইডি আর্ট পার্টি ডলার লেবারে। Pitchfork yr enim lo-fi আগে তারা বিক্রি আউট qui. টাম্বলার খামার থেকে টেবিল সাইকেল অধিকার যাই হোক না কেন. আনিম কেফিয়েহ কার্লেস কার্ডিগান। Velit seitan mcsweeney এর ফটো বুথ 3 উলফ মুন ইরিরে। কসবি সোয়েটার লোমো জিন শর্টস, উইলিয়ামসবার্গ হুডি মিনিম কুই আপনি সম্ভবত এগুলি শুনেননি এবং কার্ডিগান ট্রাস্ট ফান্ড culpa বায়োডিজেল ওয়েস অ্যান্ডারসন নান্দনিক। নিহিল ট্যাটু আকুসামাস, ক্রেড বিড়ম্বনা বায়োডিজেল কেফিয়েহ কারিগর উল্লামকো ফলাফল।

@এমডিও

ভেনিয়াম মারফা গোঁফ স্কেটবোর্ড, এডিপিসিসিং ফুগিয়াট ভেলিট পিচফর্ক দাড়ি। ফ্রিগান দাড়ি aliqua cupidatat mcsweeney's vero. কিউপিডাত চার লোকো নিসি, ইএ হেলভেটিকা ​​নুল্লা কার্লেস। ট্যাটু করা cosby সোয়েটার ফুড ট্রাক, mcsweeney's quis non freegan vinyl. লো-ফাই ওয়েস অ্যান্ডারসন +1 সর্টোরিয়াল। কার্লেস অ নান্দনিক ব্যায়াম quis gentrify. ব্রুকলিন এডিপিসিসিং ক্রাফ্ট বিয়ার ভাইস কিটার ডিজারেন্ট।

এক

Occaecat কমোডো aliqua delectus. ফ্যাপ ক্রাফ্ট বিয়ার ডেজারন্ট স্কেটবোর্ড ইএ। Lomo বাইসাইকেল অধিকার adipisising banh mi, velit ea sunt next level locavore single-origin coffee in Magna Veniam. হাই লাইফ আইডি ভিনাইল, ইকো পার্ক কনসকুয়েট কুইস অ্যালিকুইপ ব্যান মি পিচফর্ক। ভেরো ভিএইচএস এডিপিসিসিং। 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 অনুমান. Locavore sed helvetica cliche irony, thundercats আপনি সম্ভবত তাদের কথা শোনেন নি ফলে হুডি গ্লুটেন-মুক্ত লো-ফাই ফ্যাপ অ্যালিকুইপ। তারা বিক্রি হওয়ার আগেই শ্রম অভিজাত স্থান, টেরি রিচার্ডসন প্রিডেন্ট ব্রাঞ্চ নেসিয়েন্ট কুইস কসবি সোয়েটার প্যারিয়াতুর কেফিয়েহ ইউটি হেলভেটিকা ​​আর্টিসান। কার্ডিগান ক্রাফ্ট বিয়ার সিটান রেডিমেড ভেলিট। ভিএইচএস চেম্ব্রে টেম্পোর ভেনিয়াম। আনিম মল্লিট মিনিম কমোডো উল্লামকো বজ্রপাত।

ব্যবহার

বুটস্ট্র্যাপ nav প্রয়োজন

সক্রিয় লিঙ্কগুলির যথাযথ হাইলাইট করার জন্য Scrollspy-এর বর্তমানে একটি Bootstrap nav উপাদান ব্যবহার করা প্রয়োজন।

সমাধানযোগ্য আইডি লক্ষ্য প্রয়োজন

Navbar লিঙ্কে অবশ্যই সমাধানযোগ্য আইডি টার্গেট থাকতে হবে। উদাহরণস্বরূপ, একটি <a href="#home">home</a>অবশ্যই DOM-এর মতো কিছুর সাথে সঙ্গতিপূর্ণ হবে <div id="home"></div>

অ- :visibleলক্ষ্য উপাদান উপেক্ষা করা হয়েছে

:visiblejQuery অনুযায়ী নয় এমন লক্ষ্য উপাদানগুলিকে উপেক্ষা করা হবে এবং তাদের সংশ্লিষ্ট নেভি আইটেমগুলি কখনই হাইলাইট করা হবে না।

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

বাস্তবায়ন পদ্ধতি যাই হোক না কেন, স্ক্রোলস্পাই-এর জন্য 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=""

নাম প্রকার ডিফল্ট বর্ণনা
অফসেট সংখ্যা 10 স্ক্রলের অবস্থান গণনা করার সময় উপরে থেকে অফসেট করা পিক্সেল।

ঘটনা

ইভেন্টের ধরণ বর্ণনা
activate.bs.scrollspy যখনই স্ক্রোলস্পাই দ্বারা একটি নতুন আইটেম সক্রিয় হয় তখনই এই ইভেন্টটি চালু হয়।
$('#myScrollspy').on('activate.bs.scrollspy', function () {
  // do something…
})

টগলযোগ্য ট্যাব tab.js

উদাহরণ ট্যাব

এমনকি ড্রপডাউন মেনুর মাধ্যমেও স্থানীয় বিষয়বস্তুর প্যানে স্থানান্তরের জন্য দ্রুত, গতিশীল ট্যাব কার্যকারিতা যোগ করুন। নেস্টেড ট্যাব সমর্থিত নয়।

কাঁচা ডেনিম আপনি সম্ভবত তাদের জিন শর্টস অস্টিন শুনেনি। Nesciunt tofu stumptown aliqua, retro synth master cleanse. গোঁফ ক্লিচ টেম্পোর, উইলিয়ামসবার্গ কার্লস ভেগান হেলভেটিকা। Reprehenderit কসাই বিপরীতমুখী keffiyeh dreamcatcher synth. Cosby সোয়েটার eu banh mi, qui irure টেরি রিচার্ডসন প্রাক্তন স্কুইড। অ্যালিকুইপ প্লেসেট সালভিয়া সিলাম আইফোন। Seitan aliquip quis cardigan আমেরিকান পোশাক, কসাই 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.

ট্যাবড নেভিগেশন প্রসারিত করে

এই প্লাগইন ট্যাবড নেভিগেশন কম্পোনেন্টকে ট্যাবযোগ্য এলাকা যোগ করার জন্য প্রসারিত করে।

ব্যবহার

জাভাস্ক্রিপ্টের মাধ্যমে ট্যাবযোগ্য ট্যাবগুলি সক্ষম করুন (প্রতিটি ট্যাব পৃথকভাবে সক্রিয় করা প্রয়োজন):

$('#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ইভেন্টগুলি ফায়ার করা হবে না।

ইভেন্টের ধরণ বর্ণনা
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 ব্যবহার করে এবং স্থানীয় শিরোনাম সঞ্চয়ের জন্য ডেটা-অ্যাট্রিবিউট ব্যবহার করে।

শূন্য-দৈর্ঘ্যের শিরোনাম সহ টুলটিপগুলি কখনই প্রদর্শিত হয় না।

উদাহরণ

টুলটিপগুলি দেখতে নীচের লিঙ্কগুলিতে হোভার করুন:

টাইট প্যান্ট পরের স্তর keffiyeh আপনি সম্ভবত তাদের শুনেনি. ফটো বুথ দাড়ি কাঁচা ডেনিম লেটারপ্রেস ভেগান মেসেঞ্জার ব্যাগ স্টাম্পটাউন। ফার্ম-টু-টেবিল সিটান, mcsweeney's fixie sustainable quinoa 8-bit আমেরিকান পোশাকে একটি টেরি রিচার্ডসন ভিনাইল চেম্ব্রে রয়েছে। দাড়ি স্টাম্পটাউন, কার্ডিগান বান মি লোমো থান্ডারক্যাটস। টোফু বায়োডিজেল উইলিয়ামসবার্গ মারফা, চার লোকো ম্যাকসুইনির ক্লিনজ ভেগান চেম্ব্রে। একজন সত্যিকারের বিদ্রূপাত্মক কারিগর যাই হোক না কেন কীটার , সিনস্টার ফার্ম-টু-টেবিল ব্যাঙ্কসি অস্টিন টুইটার হ্যান্ডেল ফ্রিগান ক্রেড কাঁচা ডেনিম একক-অরিজিন কফি ভাইরাল।

স্ট্যাটিক টুলটিপ

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

চার দিক

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

ব্যবহার

টুলটিপ প্লাগইন চাহিদা অনুযায়ী সামগ্রী এবং মার্কআপ তৈরি করে এবং ডিফল্টভাবে তাদের ট্রিগার উপাদানের পরে টুলটিপগুলি রাখে।

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

$('#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, একটি উপাদানটির ভিতরে রাখুন <div>এবং এর পরিবর্তে টুলটিপ প্রয়োগ করুন <div>

অপশন

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

নাম টাইপ ডিফল্ট বর্ণনা
অ্যানিমেশন বুলিয়ান সত্য টুলটিপে একটি CSS ফেইড ট্রানজিশন প্রয়োগ করুন
ধারক স্ট্রিং | মিথ্যা মিথ্যা

একটি নির্দিষ্ট উপাদানে টুলটিপ যুক্ত করে। উদাহরণ: container: 'body'. এই বিকল্পটি বিশেষভাবে উপযোগী যে এটি আপনাকে নথির প্রবাহে টুলটিপকে ট্রিগারিং এলিমেন্টের কাছাকাছি অবস্থান করতে দেয় - যা একটি উইন্ডোর আকার পরিবর্তনের সময় টুলটিপটিকে ট্রিগারিং উপাদান থেকে দূরে ভাসতে বাধা দেবে।

বিলম্ব সংখ্যা | বস্তু 0

টুলটিপ (ms) দেখানো এবং লুকানো বিলম্ব - ম্যানুয়াল ট্রিগার প্রকারে প্রযোজ্য নয়

যদি একটি নম্বর সরবরাহ করা হয়, বিলম্ব লুকান/দেখানো উভয় ক্ষেত্রেই প্রয়োগ করা হয়

বস্তুর গঠন হল:delay: { "show": 500, "hide": 100 }

html বুলিয়ান মিথ্যা টুলটিপে HTML ঢোকান। মিথ্যা হলে, textDOM-এ বিষয়বস্তু সন্নিবেশ করতে jQuery-এর পদ্ধতি ব্যবহার করা হবে। আপনি যদি 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ইনস্ট্যান্স পদ্ধতিটি কল করা হয়।
দেখানো.bs.tooltip টুলটিপটি ব্যবহারকারীর কাছে দৃশ্যমান হয়ে গেলে এই ইভেন্টটি বরখাস্ত করা হয় (সিএসএস রূপান্তর সম্পূর্ণ হওয়ার জন্য অপেক্ষা করবে)।
hide.bs.tooltip এই ইভেন্টটি অবিলম্বে বহিস্কার করা হয় যখন hideউদাহরণ পদ্ধতিটি কল করা হয়।
hidden.bs.tooltip টুলটিপটি ব্যবহারকারীর কাছ থেকে লুকানো শেষ হলে এই ইভেন্টটি বরখাস্ত করা হয় (সিএসএস রূপান্তর সম্পূর্ণ হওয়ার জন্য অপেক্ষা করবে)।
inserted.bs.tooltip show.bs.tooltipযখন টুলটিপ টেমপ্লেটটি DOM-এ যোগ করা হয় তখন ইভেন্টের পরে এই ইভেন্টটি বরখাস্ত করা হয় ।
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})

Popovers popover.js

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

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

প্লাগইন নির্ভরতা

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, একটি উপাদানটির ভিতরে <div>রাখুন এবং এর পরিবর্তে পপওভারটি প্রয়োগ করুন <div>

একাধিক লাইন লিঙ্ক

কখনও কখনও আপনি একটি হাইপারলিঙ্কে একটি পপওভার যোগ করতে চান যা একাধিক লাইন মোড়ানো হয়। পপওভার প্লাগইনের ডিফল্ট আচরণ হল এটিকে অনুভূমিকভাবে এবং উল্লম্বভাবে কেন্দ্রে রাখা। white-space: nowrap;এটি এড়াতে আপনার নোঙ্গর যোগ করুন .

উদাহরণ

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

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

Popover শীর্ষ

সেড পোস্যুয়ার কনসেক্টেটুর লোবোর্টিসে রয়েছে। Aenean eu leo ​​quam. Pellentesque ornare Sem lacinia quam venenatis vestibulum.

Popover ডান

সেড পোস্যুয়ার কনসেক্টেটুর লোবোর্টিসে রয়েছে। Aenean eu leo ​​quam. Pellentesque ornare Sem lacinia quam venenatis vestibulum.

পপওভার নীচে

সেড পোস্যুয়ার কনসেক্টেটুর লোবোর্টিসে রয়েছে। Aenean eu leo ​​quam. Pellentesque ornare Sem lacinia quam venenatis vestibulum.

পপওভার বাম

সেড পোস্যুয়ার কনসেক্টেটুর লোবোর্টিসে রয়েছে। Aenean eu leo ​​quam. 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>

ব্যবহার

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

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

অপশন

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

নাম টাইপ ডিফল্ট বর্ণনা
অ্যানিমেশন বুলিয়ান সত্য পপওভারে একটি CSS ফেইড ট্রানজিশন প্রয়োগ করুন
ধারক স্ট্রিং | মিথ্যা মিথ্যা

একটি নির্দিষ্ট উপাদানের সাথে পপওভার যুক্ত করে। উদাহরণ: container: 'body'. এই বিকল্পটি বিশেষভাবে উপযোগী যে এটি আপনাকে নথির প্রবাহে পপওভারকে ট্রিগারিং উপাদানের কাছাকাছি অবস্থান করতে দেয় - যা একটি উইন্ডোর আকার পরিবর্তন করার সময় পপওভারটিকে ট্রিগারিং উপাদান থেকে দূরে ভাসতে বাধা দেবে।

বিষয়বস্তু স্ট্রিং | ফাংশন '

data-contentবৈশিষ্ট্য উপস্থিত না থাকলে ডিফল্ট সামগ্রী মান ।

যদি একটি ফাংশন দেওয়া হয়, এটিকে thisপপওভারটি যে উপাদানটির সাথে সংযুক্ত করা হয়েছে তার রেফারেন্স সেট সহ কল ​​করা হবে।

বিলম্ব সংখ্যা | বস্তু 0

পপওভার (ms) দেখানো এবং লুকানো বিলম্ব - ম্যানুয়াল ট্রিগার প্রকারে প্রযোজ্য নয়

যদি একটি নম্বর সরবরাহ করা হয়, বিলম্ব লুকান/দেখানো উভয় ক্ষেত্রেই প্রয়োগ করা হয়

বস্তুর গঠন হল:delay: { "show": 500, "hide": 100 }

html বুলিয়ান মিথ্যা পপওভারে HTML ঢোকান। মিথ্যা হলে, textDOM-এ বিষয়বস্তু সন্নিবেশ করতে jQuery-এর পদ্ধতি ব্যবহার করা হবে। আপনি যদি XSS আক্রমণ সম্পর্কে চিন্তিত হন তবে পাঠ্য ব্যবহার করুন৷
বসানো স্ট্রিং | ফাংশন 'ঠিক'

কিভাবে পপওভারের অবস্থান - শীর্ষ | নীচে | বাম | ডান | স্বয়ংক্রিয়
যখন "স্বয়ংক্রিয়" নির্দিষ্ট করা হয়, এটি গতিশীলভাবে পপওভারকে পুনর্বিন্যাস করবে। উদাহরণস্বরূপ, যদি প্লেসমেন্ট "স্বয়ংক্রিয় বাম" হয়, তখন সম্ভব হলে পপওভারটি বাম দিকে প্রদর্শিত হবে, অন্যথায় এটি ডানদিকে প্রদর্শিত হবে।

প্লেসমেন্ট নির্ধারণ করতে যখন একটি ফাংশন ব্যবহার করা হয়, তখন এটিকে প্রথম আর্গুমেন্ট হিসাবে পপওভার DOM নোড এবং দ্বিতীয় হিসাবে ট্রিগারিং উপাদান DOM নোডকে বলা হয়। thisপ্রসঙ্গটি পপওভার উদাহরণে সেট করা হয়েছে ।

নির্বাচক স্ট্রিং মিথ্যা একটি নির্বাচক প্রদান করা হলে, পপওভার অবজেক্টগুলি নির্দিষ্ট লক্ষ্যগুলিতে অর্পণ করা হবে৷ অনুশীলনে, এটি ডাইনামিক এইচটিএমএল কন্টেন্টকে পপওভার যোগ করতে সক্ষম করতে ব্যবহৃত হয়। এটি এবং একটি তথ্যপূর্ণ উদাহরণ দেখুন ।
টেমপ্লেট স্ট্রিং '<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ইনস্ট্যান্স পদ্ধতিটি কল করা হয়।
দেখানো.বিএস.পপওভার পপওভারটি ব্যবহারকারীর কাছে দৃশ্যমান হয়ে গেলে এই ইভেন্টটি বরখাস্ত করা হয় (সিএসএস রূপান্তর সম্পূর্ণ হওয়ার জন্য অপেক্ষা করবে)।
hide.bs.popover এই ইভেন্টটি অবিলম্বে বহিস্কার করা হয় যখন hideউদাহরণ পদ্ধতিটি কল করা হয়।
hidden.bs.popover পপওভার ব্যবহারকারীর কাছ থেকে লুকানো শেষ হলে এই ইভেন্টটি বরখাস্ত করা হয় (সিএসএস রূপান্তর সম্পূর্ণ হওয়ার জন্য অপেক্ষা করবে)।
inserted.bs.popover show.bs.popoverDOM-এ পপওভার টেমপ্লেট যোগ করা হলে ইভেন্টের পরে এই ইভেন্টটি বরখাস্ত করা হয় ।
$('#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ইনস্ট্যান্স পদ্ধতিটি কল করা হয়।
বন্ধ.বিএস.সতর্ক সতর্কতা বন্ধ হয়ে গেলে এই ইভেন্টটি বরখাস্ত করা হয় (সিএসএস রূপান্তর সম্পূর্ণ হওয়ার জন্য অপেক্ষা করবে)।
$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})

বোতাম button.js

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

ক্রস ব্রাউজার সামঞ্জস্য

ফায়ারফক্স পৃষ্ঠা লোড জুড়ে নিয়ন্ত্রণ অবস্থা (অক্ষমতা এবং চেকডনেস) গঠন করে । এই জন্য একটি workaround ব্যবহার করা হয় 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>

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

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

Anim pariatur cliche reprehenderit, enim eiusmod High life accusamus টেরি রিচার্ডসন অ্যাড স্কুইড। 3 উলফ মুন অফিসিয়া আউট, নন কাপিডাটাট স্কেটবোর্ড ডলোর ব্রাঞ্চ। খাদ্য ট্রাক quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee Nulla assumenda shoreditch et. নিহিল অ্যানিম কেফিয়েহ হেলভেটিকা, ক্রাফ্ট বিয়ার লেবার ওয়েস অ্যান্ডারসন ক্রেড নেসিয়েন্ট সেপিয়েন্ট ইএ প্রিডেন্ট। অ্যাড ভেগান ছাড়া কসাই ভাইস লোমো। লেগিংস ওক্যাকেট ক্রাফ্ট বিয়ার ফার্ম-টু-টেবিল, কাঁচা ডেনিম নান্দনিক সিন্থ নেসসিউন্ট যা আপনি সম্ভবত টেকসই ভিএইচএসের জন্য শ্রমের অভিযোগ শুনেননি।
Anim pariatur cliche reprehenderit, enim eiusmod High life accusamus টেরি রিচার্ডসন অ্যাড স্কুইড। 3 উলফ মুন অফিসিয়া আউট, নন কাপিডাটাট স্কেটবোর্ড ডলোর ব্রাঞ্চ। খাদ্য ট্রাক quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee Nulla assumenda shoreditch et. নিহিল অ্যানিম কেফিয়েহ হেলভেটিকা, ক্রাফ্ট বিয়ার লেবার ওয়েস অ্যান্ডারসন ক্রেড নেসিয়েন্ট সেপিয়েন্ট ইএ প্রিডেন্ট। অ্যাড ভেগান ছাড়া কসাই ভাইস লোমো। লেগিংস ওক্যাকেট ক্রাফ্ট বিয়ার ফার্ম-টু-টেবিল, কাঁচা ডেনিম নান্দনিক সিন্থ নেসসিউন্ট যা আপনি সম্ভবত টেকসই ভিএইচএসের জন্য শ্রমের অভিযোগ শুনেননি।
Anim pariatur cliche reprehenderit, enim eiusmod High life accusamus টেরি রিচার্ডসন অ্যাড স্কুইড। 3 উলফ মুন অফিসিয়া আউট, নন কাপিডাটাট স্কেটবোর্ড ডলোর ব্রাঞ্চ। খাদ্য ট্রাক quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee Nulla assumenda shoreditch et. নিহিল অ্যানিম কেফিয়েহ হেলভেটিকা, ক্রাফ্ট বিয়ার লেবার ওয়েস অ্যান্ডারসন ক্রেড নেসিয়েন্ট সেপিয়েন্ট ইএ প্রিডেন্ট। অ্যাড ভেগান ছাড়া কসাই ভাইস লোমো। লেগিংস ওক্যাকেট ক্রাফ্ট বিয়ার ফার্ম-টু-টেবিল, কাঁচা ডেনিম নান্দনিক সিন্থ নেসসিউন্ট যা আপনি সম্ভবত টেকসই ভিএইচএসের জন্য শ্রমের অভিযোগ শুনেননি।
<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

  • বুটপ্লাই
  • ওয়ান ইটমাস এসি ফ্যাসিলিন
  • দ্বিতীয় ইরোস

প্রসারিত/সংকোচন নিয়ন্ত্রণ অ্যাক্সেসযোগ্য করুন

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 । data-targetঅ্যাট্রিবিউটটি data-targetএকটি সিএসএস নির্বাচককে গ্রহন করে যাতে এটি সঙ্কুচিত হয়। collapseকলাপসিবল এলিমেন্টে ক্লাস যোগ করতে ভুলবেন না । আপনি যদি এটি ডিফল্ট খুলতে চান তবে অতিরিক্ত ক্লাস যোগ করুন in

একটি কোলাপসিবল কন্ট্রোলে অ্যাকর্ডিয়নের মতো গ্রুপ ম্যানেজমেন্ট যোগ করতে, ডেটা অ্যাট্রিবিউট যোগ করুন data-parent="#selector"। এটি কর্মে দেখতে ডেমো পড়ুন।

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

এর সাথে ম্যানুয়ালি সক্ষম করুন:

$('.collapse').collapse()

অপশন

বিকল্পগুলি ডেটা অ্যাট্রিবিউট বা জাভাস্ক্রিপ্টের মাধ্যমে পাস করা যেতে পারে। ডেটা অ্যাট্রিবিউটের জন্য, বিকল্পের নাম যোগ করুন 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ইনস্ট্যান্স পদ্ধতিটি কল করা হয়।
দেখানো হয়েছে এই ইভেন্টটি বরখাস্ত করা হয় যখন একটি পতনের উপাদান ব্যবহারকারীর কাছে দৃশ্যমান করা হয় (সিএসএস রূপান্তর সম্পূর্ণ হওয়ার জন্য অপেক্ষা করবে)।
hide.bs.collaps এই ইভেন্ট অবিলম্বে বহিস্কার করা হয় যখন 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 রাখুন এবং এটি স্বয়ংক্রিয়ভাবে সারিবদ্ধ এবং বিন্যাসিত হবে।

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

নাম প্রকার ডিফল্ট বর্ণনা
অন্তর সংখ্যা 5000 একটি আইটেমকে স্বয়ংক্রিয়ভাবে সাইকেল চালানোর মধ্যে বিলম্বের পরিমাণ। মিথ্যা হলে, ক্যারোজেল স্বয়ংক্রিয়ভাবে চক্রাকারে যাবে না।
বিরতি স্ট্রিং | শূন্য "হোভার" যদি সেট করা থাকে "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 _

উদাহরণ

অ্যাফিক্স প্লাগইনটি 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"

নাম প্রকার ডিফল্ট বর্ণনা
অফসেট সংখ্যা | ফাংশন | বস্তু 10 স্ক্রলের অবস্থান গণনা করার সময় স্ক্রীন থেকে অফসেট করা পিক্সেল। যদি একটি একক সংখ্যা প্রদান করা হয়, অফসেটটি উপরের এবং নীচে উভয় দিকেই প্রয়োগ করা হবে। একটি অনন্য, নীচে এবং শীর্ষ অফসেট প্রদান করতে শুধুমাত্র একটি বস্তু প্রদান করুন offset: { top: 10 }বা offset: { top: 10, bottom: 5 }। যখন আপনি গতিশীলভাবে একটি অফসেট গণনা করতে চান তখন একটি ফাংশন ব্যবহার করুন।
লক্ষ্য নির্বাচক | নোড | jQuery উপাদান windowবস্তু _ অ্যাফিক্সের লক্ষ্য উপাদান নির্দিষ্ট করে।

পদ্ধতি

.affix(options)

সংযুক্ত বিষয়বস্তু হিসাবে আপনার বিষয়বস্তু সক্রিয়. একটি ঐচ্ছিক বিকল্প গ্রহণ করে object

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

.affix('checkPosition')

প্রাসঙ্গিক উপাদানগুলির মাত্রা, অবস্থান এবং স্ক্রোল অবস্থানের উপর ভিত্তি করে প্রত্যয়ের অবস্থা পুনঃগণনা করে। , .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 এই ইভেন্টটি অ্যাফিক্সড-বটম করার পরে বরখাস্ত করা হয়।