అవలోకనం

వ్యక్తిగత లేదా సంకలనం

ప్లగిన్‌లను ఒక్కొక్కటిగా చేర్చవచ్చు (బూట్‌స్ట్రాప్ యొక్క వ్యక్తిగత *.jsఫైల్‌లను ఉపయోగించడం), లేదా అన్నింటినీ ఒకేసారి (ఉపయోగించడం bootstrap.jsలేదా minified bootstrap.min.js).

డేటా లక్షణాలు

మీరు JavaScript యొక్క ఒక్క పంక్తిని వ్రాయకుండానే పూర్తిగా మార్కప్ API ద్వారా అన్ని బూట్‌స్ట్రాప్ ప్లగిన్‌లను ఉపయోగించవచ్చు. ఇది బూట్‌స్ట్రాప్ యొక్క ఫస్ట్-క్లాస్ API మరియు ప్లగిన్‌ని ఉపయోగిస్తున్నప్పుడు మీ మొదటి పరిశీలనగా ఉండాలి.

కొన్ని సందర్భాల్లో ఈ కార్యాచరణను నిలిపివేయడం మంచిది అని పేర్కొంది. కాబట్టి, డాక్యుమెంట్ నేమ్‌స్పేస్‌లో ఉన్న అన్ని ఈవెంట్‌లను అన్‌బైండ్ చేయడం ద్వారా డేటా అట్రిబ్యూట్ APIని నిలిపివేయగల సామర్థ్యాన్ని కూడా మేము అందిస్తాము data-api. ఇది ఇలా కనిపిస్తుంది:

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

ప్రత్యామ్నాయంగా, నిర్దిష్ట ప్లగ్‌ఇన్‌ను లక్ష్యంగా చేసుకోవడానికి, డేటా-api నేమ్‌స్పేస్‌తో పాటు ప్లగిన్ పేరును నేమ్‌స్పేస్‌గా చేర్చండి:

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

ప్రోగ్రామాటిక్ API

మీరు అన్ని బూట్‌స్ట్రాప్ ప్లగిన్‌లను పూర్తిగా JavaScript API ద్వారా ఉపయోగించగలరని కూడా మేము విశ్వసిస్తున్నాము. అన్ని పబ్లిక్ APIలు ఒకే, చైన్ చేయదగిన పద్ధతులు మరియు పని చేసిన సేకరణను తిరిగి పొందుతాయి.

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

అన్ని పద్ధతులు ఐచ్ఛిక ఎంపికల ఆబ్జెక్ట్‌ను అంగీకరించాలి, నిర్దిష్ట పద్ధతిని లక్ష్యంగా చేసుకునే స్ట్రింగ్ లేదా ఏదీ (డిఫాల్ట్ ప్రవర్తనతో ప్లగ్‌ఇన్‌ను ప్రారంభిస్తుంది):

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

Constructorప్రతి ప్లగ్ఇన్ దాని ముడి కన్స్ట్రక్టర్‌ను ఆస్తిపై కూడా బహిర్గతం చేస్తుంది : $.fn.popover.Constructor. మీరు నిర్దిష్ట ప్లగ్ఇన్ ఉదాహరణను పొందాలనుకుంటే, దానిని నేరుగా మూలకం నుండి తిరిగి పొందండి: $('[rel="popover"]').data('popover').

డిఫాల్ట్ సెట్టింగ్‌లు

Constructor.DEFAULTSమీరు ప్లగిన్ యొక్క వస్తువును సవరించడం ద్వారా ప్లగిన్ కోసం డిఫాల్ట్ సెట్టింగ్‌లను మార్చవచ్చు :

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

సంఘర్షణ లేదు

కొన్నిసార్లు ఇతర UI ఫ్రేమ్‌వర్క్‌లతో బూట్‌స్ట్రాప్ ప్లగిన్‌లను ఉపయోగించడం అవసరం. ఈ పరిస్థితులలో, నేమ్‌స్పేస్ ఘర్షణలు అప్పుడప్పుడు సంభవించవచ్చు. ఇది జరిగితే, మీరు .noConflictవిలువను తిరిగి పొందాలనుకుంటున్న ప్లగిన్‌కు కాల్ చేయవచ్చు.

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

ఈవెంట్స్

బూట్‌స్ట్రాప్ చాలా ప్లగిన్‌ల ప్రత్యేక చర్యల కోసం అనుకూల ఈవెంట్‌లను అందిస్తుంది. సాధారణంగా, ఇవి ఇన్ఫినిటివ్ మరియు పాస్ట్ పార్టిసిపుల్ రూపంలో వస్తాయి - ఇక్కడ ఇన్ఫినిటివ్ (ఉదా. show) ఈవెంట్ ప్రారంభంలో ప్రేరేపించబడుతుంది మరియు దాని భూత భాగస్వామ్య రూపం (ఉదా. shown) చర్య పూర్తయిన తర్వాత ప్రేరేపించబడుతుంది.

3.0.0 నాటికి, అన్ని బూట్‌స్ట్రాప్ ఈవెంట్‌లు నేమ్‌స్పేస్ చేయబడ్డాయి.

అన్ని ఇన్ఫినిటివ్ ఈవెంట్‌లు preventDefaultకార్యాచరణను అందిస్తాయి. ఇది ఒక చర్య ప్రారంభమయ్యే ముందు దాని అమలును ఆపే సామర్థ్యాన్ని అందిస్తుంది.

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

సంస్కరణ సంఖ్యలు

బూట్‌స్ట్రాప్ యొక్క ప్రతి j క్వెరీ ప్లగిన్‌ల వెర్షన్‌ను VERSIONప్లగిన్ కన్స్ట్రక్టర్ యొక్క ప్రాపర్టీ ద్వారా యాక్సెస్ చేయవచ్చు. ఉదాహరణకు, టూల్‌టిప్ ప్లగ్ఇన్ కోసం:

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

JavaScript నిలిపివేయబడినప్పుడు ప్రత్యేక ఫాల్‌బ్యాక్‌లు లేవు

జావాస్క్రిప్ట్ నిలిపివేయబడినప్పుడు బూట్‌స్ట్రాప్ ప్లగిన్‌లు ప్రత్యేకించి మనోహరంగా వెనక్కి తగ్గవు. మీరు ఈ సందర్భంలో వినియోగదారు అనుభవం గురించి శ్రద్ధ వహిస్తే, <noscript>మీ వినియోగదారులకు పరిస్థితిని (మరియు JavaScriptని తిరిగి ప్రారంభించడం ఎలా) మరియు/లేదా మీ స్వంత అనుకూల ఫాల్‌బ్యాక్‌లను జోడించడానికి ఉపయోగించండి.

పరివర్తనాలు transition.js

పరివర్తనాల గురించి

సాధారణ పరివర్తన ప్రభావాల కోసం, transition.jsఇతర JS ఫైల్‌లతో పాటు ఒకసారి చేర్చండి. మీరు కంపైల్ చేసిన (లేదా కనిష్టీకరించిన) ఉపయోగిస్తుంటే bootstrap.js, దీన్ని చేర్చాల్సిన అవసరం లేదు-ఇది ఇప్పటికే ఉంది.

లోపల ఏముంది

Transition.js అనేది transitionEndఈవెంట్‌లకు ప్రాథమిక సహాయకం అలాగే CSS పరివర్తన ఎమ్యులేటర్. ఇది CSS పరివర్తన మద్దతు కోసం తనిఖీ చేయడానికి మరియు హ్యాంగింగ్ ట్రాన్సిషన్‌లను పట్టుకోవడానికి ఇతర ప్లగిన్‌లచే ఉపయోగించబడుతుంది.

పరివర్తనలను నిలిపివేస్తోంది

కింది జావాస్క్రిప్ట్ స్నిప్పెట్‌ని ఉపయోగించి పరివర్తనాలు ప్రపంచవ్యాప్తంగా నిలిపివేయబడతాయి, ఇది తప్పనిసరిగా లోడ్ చేయబడిన తర్వాత transition.js(లేదా bootstrap.js, bootstrap.min.jsసందర్భానుసారంగా) రావాలి:

$.support.transition = false

మోడల్స్ modal.js

మోడల్‌లు క్రమబద్ధీకరించబడ్డాయి, కానీ అనువైనవి, కనీస అవసరమైన కార్యాచరణ మరియు స్మార్ట్ డిఫాల్ట్‌లతో డైలాగ్ అడుగుతుంది.

HTML5 దాని సెమాంటిక్స్‌ను ఎలా నిర్వచిస్తుంది అనే కారణంగా, autofocusHTML లక్షణం బూట్‌స్ట్రాప్ మోడల్‌లలో ఎటువంటి ప్రభావాన్ని చూపదు. అదే ప్రభావాన్ని సాధించడానికి, కొన్ని అనుకూల జావాస్క్రిప్ట్‌ని ఉపయోగించండి:

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

ఉదాహరణలు

స్టాటిక్ ఉదాహరణ

ఫుటర్‌లో హెడర్, బాడీ మరియు చర్యల సెట్‌తో రెండర్ చేయబడిన మోడల్.

<div class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

ప్రత్యక్ష ప్రదర్శన

దిగువ బటన్‌ను క్లిక్ చేయడం ద్వారా JavaScript ద్వారా మోడల్‌ను టోగుల్ చేయండి. ఇది క్రిందికి జారిపోతుంది మరియు పేజీ ఎగువ నుండి ఫేడ్ అవుతుంది.

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

ఐచ్ఛిక పరిమాణాలు

మోడల్‌లు రెండు ఐచ్ఛిక పరిమాణాలను కలిగి ఉంటాయి, వీటిని ఒకపై ఉంచడానికి మాడిఫైయర్ తరగతుల ద్వారా అందుబాటులో ఉంటాయి .modal-dialog.

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

<div class="modal fade 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>

గ్రిడ్ వ్యవస్థను ఉపయోగించడం

మోడల్‌లోని బూట్‌స్ట్రాప్ గ్రిడ్ సిస్టమ్‌ను సద్వినియోగం చేసుకోవడానికి, దానిలో గూడు కట్టుకుని, .rowఆపై .modal-bodyసాధారణ గ్రిడ్ సిస్టమ్ తరగతులను ఉపయోగించండి.

<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="gridSystemModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-md-4">.col-md-4</div>
          <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
        </div>
        <div class="row">
          <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
          <div class="col-md-2 col-md-offset-4">.col-md-2 .col-md-offset-4</div>
        </div>
        <div class="row">
          <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
        </div>
        <div class="row">
          <div class="col-sm-9">
            Level 1: .col-sm-9
            <div class="row">
              <div class="col-xs-8 col-sm-6">
                Level 2: .col-xs-8 .col-sm-6
              </div>
              <div class="col-xs-4 col-sm-6">
                Level 2: .col-xs-4 .col-sm-6
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

ట్రిగ్గర్ బటన్ ఆధారంగా మోడల్ కంటెంట్ మారుతోంది

కొద్దిగా భిన్నమైన కంటెంట్‌లతో ఒకే మోడల్‌ను ప్రేరేపించే బటన్‌ల సమూహాన్ని కలిగి ఉన్నారా? event.relatedTargetఏ బటన్‌ను క్లిక్ చేశారనే దానిపై ఆధారపడి మోడల్‌లోని కంటెంట్‌లను మార్చడానికి HTML లక్షణాలను data-*( బహుశా j క్వెరీ ద్వారా ) ఉపయోగించండి. వివరాల కోసం మోడల్ ఈవెంట్స్ డాక్స్ చూడండి 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>

జావాస్క్రిప్ట్ ద్వారా

myModalJavaScript యొక్క ఒకే లైన్‌తో idతో మోడల్‌కి కాల్ చేయండి :

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

ఎంపికలు

ఎంపికలు డేటా లక్షణాలు లేదా జావాస్క్రిప్ట్ ద్వారా పంపబడతాయి. డేటా అట్రిబ్యూట్‌ల కోసం, ఎంపిక పేరును data-, లో వలె జత చేయండి data-backdrop="".

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

పద్ధతులు

.modal(options)

మీ కంటెంట్‌ని మోడల్‌గా యాక్టివేట్ చేస్తుంది. ఐచ్ఛిక ఎంపికలను అంగీకరిస్తుంది object.

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

.modal('toggle')

మోడల్‌ను మాన్యువల్‌గా టోగుల్ చేస్తుంది. మోడల్ వాస్తవంగా చూపబడటానికి లేదా దాచబడటానికి ముందు కాలర్‌కి తిరిగి వస్తుంది (అంటే shown.bs.modalలేదా hidden.bs.modalసంఘటన జరగడానికి ముందు).

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

.modal('show')

మాన్యువల్‌గా మోడల్‌ను తెరుస్తుంది. మోడల్ వాస్తవంగా చూపబడక ముందే కాలర్‌కి తిరిగి వస్తుంది (అంటే shown.bs.modalఈవెంట్ జరగడానికి ముందు).

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

.modal('hide')

మోడల్‌ను మాన్యువల్‌గా దాచిపెడుతుంది. మోడల్ వాస్తవంగా దాచబడకముందే (అంటే hidden.bs.modalఈవెంట్ జరగడానికి ముందు) కాలర్‌కి తిరిగి వస్తుంది.

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

.modal('handleUpdate')

స్క్రోల్‌బార్‌లో ఒకటి కనిపించినట్లయితే దానిని ఎదుర్కోవడానికి మోడల్ యొక్క పొజిషనింగ్‌ను మళ్లీ సర్దుబాటు చేస్తుంది, ఇది మోడల్‌ను ఎడమవైపుకు దూకేలా చేస్తుంది.

మోడల్ తెరిచి ఉన్నప్పుడు ఎత్తు మారినప్పుడు మాత్రమే అవసరం.

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

ఈవెంట్స్

బూట్‌స్ట్రాప్ యొక్క మోడల్ క్లాస్ మోడల్ ఫంక్షనాలిటీకి హుకింగ్ చేయడానికి కొన్ని ఈవెంట్‌లను బహిర్గతం చేస్తుంది.

అన్ని మోడల్ ఈవెంట్‌లు మోడల్‌లోనే (అంటే వద్ద <div class="modal">) కాల్చబడతాయి.

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

డ్రాప్‌డౌన్‌లు 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

navbarలో ఉదాహరణ

ScrollSpy ప్లగ్ఇన్ అనేది స్క్రోల్ స్థానం ఆధారంగా nav లక్ష్యాలను స్వయంచాలకంగా నవీకరించడం కోసం. నావ్‌బార్ దిగువన ఉన్న ప్రాంతాన్ని స్క్రోల్ చేయండి మరియు సక్రియ తరగతి మార్పును చూడండి. డ్రాప్‌డౌన్ ఉప అంశాలు కూడా హైలైట్ చేయబడతాయి.

వాడుక

సంబంధిత స్థానాలు అవసరం

అమలు విధానంతో సంబంధం లేకుండా, scrollspy position: relative;మీరు గూఢచర్యం చేస్తున్న మూలకంపై ఉపయోగించడం అవసరం. చాలా సందర్భాలలో ఇది <body>. కాకుండా ఇతర మూలకాలపై స్క్రోల్‌స్పైయింగ్ చేస్తున్నప్పుడు , సెట్‌ను <body>కలిగి ఉండేలా చూసుకోండి మరియు వర్తింపజేయండి.heightoverflow-y: scroll;

డేటా లక్షణాల ద్వారా

మీ టాప్‌బార్ నావిగేషన్‌కు స్క్రోల్‌స్పై ప్రవర్తనను సులభంగా జోడించడానికి, data-spy="scroll"మీరు గూఢచర్యం చేయాలనుకుంటున్న మూలకానికి జోడించండి (సాధారణంగా ఇది <body>). ఆపై ఏదైనా బూట్‌స్ట్రాప్ కాంపోనెంట్ data-targetయొక్క పేరెంట్ ఎలిమెంట్ యొక్క ID లేదా క్లాస్‌తో లక్షణాన్ని జోడించండి..nav

body {
  position: relative;
}

<body data-spy="scroll" data-target="#navbar-example">
  ...
  <div id="navbar-example">
    <ul class="nav nav-tabs" role="tablist">
      ...
    </ul>
  </div>
  ...
</body>

జావాస్క్రిప్ట్ ద్వారా

మీ CSSలో జోడించిన తర్వాత position: relative;, JavaScript ద్వారా scrollspyకి కాల్ చేయండి:

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

పద్ధతులు

.scrollspy('refresh')

DOM నుండి మూలకాలను జోడించడం లేదా తీసివేయడంతో పాటు scrollspyని ఉపయోగిస్తున్నప్పుడు, మీరు రిఫ్రెష్ పద్ధతిని ఇలా పిలవాలి:

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

ఎంపికలు

ఎంపికలు డేటా లక్షణాలు లేదా జావాస్క్రిప్ట్ ద్వారా పంపబడతాయి. డేటా అట్రిబ్యూట్‌ల కోసం, ఎంపిక పేరును data-, లో వలె జత చేయండి data-offset="".

ఈవెంట్స్

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

టోగుల్ చేయగల ట్యాబ్‌లు tab.js

ఉదాహరణ ట్యాబ్‌లు

డ్రాప్‌డౌన్ మెనుల ద్వారా కూడా స్థానిక కంటెంట్ పేన్‌ల ద్వారా బదిలీ చేయడానికి శీఘ్ర, డైనమిక్ ట్యాబ్ కార్యాచరణను జోడించండి. నెస్టెడ్ ట్యాబ్‌లకు మద్దతు లేదు.

వాడుక

జావాస్క్రిప్ట్ ద్వారా ట్యాబ్ చేయదగిన ట్యాబ్‌లను ప్రారంభించండి (ప్రతి ట్యాబ్ ఒక్కొక్కటిగా యాక్టివేట్ చేయబడాలి):

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

మీరు వ్యక్తిగత ట్యాబ్‌లను అనేక విధాలుగా సక్రియం చేయవచ్చు:

$('#myTabs a[href="#profile"]').tab('show') // Select tab by name
$('#myTabs a:first').tab('show') // Select first tab
$('#myTabs a:last').tab('show') // Select last tab
$('#myTabs li:eq(2) a').tab('show') // Select third tab (0-indexed)

మార్కప్

data-toggle="tab"మీరు కేవలం పేర్కొనడం ద్వారా లేదా data-toggle="pill"మూలకంపై ఎలాంటి జావాస్క్రిప్ట్ రాయకుండానే ట్యాబ్ లేదా పిల్ నావిగేషన్‌ను యాక్టివేట్ చేయవచ్చు . navమరియు nav-tabsతరగతులను ట్యాబ్‌కు జోడించడం ulవలన బూట్‌స్ట్రాప్ ట్యాబ్ స్టైలింగ్nav వర్తించబడుతుంది మరియు క్లాస్‌లను జోడించడం ద్వారా పిల్ స్టైలింగ్nav-pills వర్తిస్తుంది .

<div>

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

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

</div>

ఫేడ్ ప్రభావం

ట్యాబ్‌లు ఫేడ్ ఇన్ చేయడానికి, .fadeప్రతి దానికి జోడించండి .tab-pane. మొదటి ట్యాబ్ పేన్ తప్పనిసరిగా .inప్రారంభ కంటెంట్ కనిపించేలా చేయాలి.

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

పద్ధతులు

$().tab

ట్యాబ్ మూలకం మరియు కంటెంట్ కంటైనర్‌ను సక్రియం చేస్తుంది. ట్యాబ్ తప్పనిసరిగా DOMలో data-targetఒక hrefకంటైనర్ నోడ్‌ను లక్ష్యంగా చేసుకుని ఉండాలి. పై ఉదాహరణలలో, ట్యాబ్‌లు లక్షణాలతో <a>కూడిన s .data-toggle="tab"

.tab('show')

ఇచ్చిన ట్యాబ్‌ను ఎంచుకుని, దాని అనుబంధిత కంటెంట్‌ను చూపుతుంది. మునుపు ఎంచుకున్న ఏదైనా ఇతర ట్యాబ్ ఎంపిక చేయబడదు మరియు దాని అనుబంధిత కంటెంట్ దాచబడుతుంది. ట్యాబ్ పేన్ వాస్తవంగా చూపబడక ముందే (అంటే shown.bs.tabఈవెంట్ జరగడానికి ముందు) కాలర్‌కి తిరిగి వస్తుంది.

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

ఈవెంట్స్

కొత్త ట్యాబ్‌ను చూపుతున్నప్పుడు, ఈవెంట్‌లు కింది క్రమంలో కాల్పులు జరుపుతాయి:

1. hide.bs.tab(ప్రస్తుత క్రియాశీల ట్యాబ్‌లో)
2. show.bs.tab(చూపవలసిన ట్యాబ్‌లో)
3. hidden.bs.tab(మునుపటి యాక్టివ్ ట్యాబ్‌లో, hide.bs.tabఈవెంట్‌కు సంబంధించినదే)
4. shown.bs.tab(కొత్తగా యాక్టివ్‌గా ఉన్న ఇప్పుడే చూపబడిన ట్యాబ్‌లో, show.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లక్షణం మాత్రమే మరియు titleమీరు టూల్‌టిప్‌ను కలిగి ఉండాలనుకుంటున్న HTML మూలకం. టూల్‌టిప్ యొక్క జనరేట్ మార్కప్ చాలా సులభం, అయితే దీనికి స్థానం అవసరం (డిఫాల్ట్‌గా, 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

హౌసింగ్ సెకండరీ సమాచారం కోసం ఏదైనా ఎలిమెంట్‌కి iPadలో ఉన్నటువంటి కంటెంట్ యొక్క చిన్న అతివ్యాప్తులను జోడించండి.

టైటిల్ మరియు కంటెంట్ రెండూ సున్నా-పొడవు ఉన్న పాపోవర్‌లు ఎప్పుడూ ప్రదర్శించబడవు.

$(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ఈవెంట్ జరగడానికి ముందు) కాలర్‌కి తిరిగి వస్తుంది. ఇది పాప్‌ఓవర్ యొక్క "మాన్యువల్" ట్రిగ్గర్‌గా పరిగణించబడుతుంది. టైటిల్ మరియు కంటెంట్ రెండూ సున్నా-పొడవు ఉన్న పాపోవర్‌లు ఎప్పుడూ ప్రదర్శించబడవు.

$('#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"లక్షణాన్ని కలిగి ఉన్న డిసెండెంట్ ఎలిమెంట్‌లపై క్లిక్ ఈవెంట్‌ల కోసం హెచ్చరికను వినేలా చేస్తుంది . (డేటా-api యొక్క ఆటో-ఇనిషియలైజేషన్‌ని ఉపయోగిస్తున్నప్పుడు అవసరం లేదు.)

$().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" autocomplete="off">
  Loading state
</button>

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

సింగిల్ టోగుల్

data-toggle="button"ఒకే బటన్‌పై టోగుల్ చేయడాన్ని సక్రియం చేయడానికి జోడించండి .

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

చెక్‌బాక్స్ / రేడియో

వాటి సంబంధిత స్టైల్స్‌లో టోగుల్ చేయడాన్ని ప్రారంభించడానికి చెక్‌బాక్స్ లేదా రేడియో ఇన్‌పుట్‌లను కలిగి ఉన్న data-toggle="buttons"వాటికి జోడించండి ..btn-group

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

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

పద్ధతులు

$().button('toggle')

పుష్ స్థితిని టోగుల్ చేస్తుంది. బటన్ సక్రియం చేయబడిన రూపాన్ని ఇస్తుంది.

$().button('reset')

బటన్ స్థితిని రీసెట్ చేస్తుంది - వచనాన్ని అసలైన టెక్స్ట్‌కి మార్చుకుంటుంది. ఈ పద్ధతి అసమకాలికమైనది మరియు రీసెట్ చేయడం పూర్తికాకముందే తిరిగి వస్తుంది.

$().button(string)

ఏదైనా డేటా నిర్వచించిన టెక్స్ట్ స్థితికి వచనాన్ని మారుస్తుంది.

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

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

కుదించు పతనం .js

సులభమైన టోగుల్ ప్రవర్తన కోసం కొన్ని తరగతులను ఉపయోగించుకునే సౌకర్యవంతమైన ప్లగ్ఇన్.

ఉదాహరణ

తరగతి మార్పుల ద్వారా మరొక మూలకాన్ని చూపించడానికి మరియు దాచడానికి దిగువ బటన్‌లను క్లిక్ చేయండి:

• .collapseకంటెంట్‌ను దాచిపెడుతుంది
• .collapsingపరివర్తన సమయంలో వర్తించబడుతుంది
• .collapse.inకంటెంట్ చూపిస్తుంది

మీరు hrefఅట్రిబ్యూట్‌తో లింక్‌ని లేదా లక్షణంతో బటన్‌ను ఉపయోగించవచ్చు data-target. రెండు సందర్భాల్లో, data-toggle="collapse"ఇది అవసరం.

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

అకార్డియన్ ఉదాహరణ

ప్యానెల్ కాంపోనెంట్‌తో అకార్డియన్‌ని సృష్టించడానికి డిఫాల్ట్ పతనం ప్రవర్తనను విస్తరించండి.

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
      <h4 class="panel-title">
        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingTwo">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingThree">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>

.panel-bodys తో s మార్చుకోవడం కూడా సాధ్యమే .list-group.

వాడుక

కుప్పకూలిన ప్లగ్ఇన్ భారీ ట్రైనింగ్‌ను నిర్వహించడానికి కొన్ని తరగతులను ఉపయోగిస్తుంది:

• .collapseకంటెంట్‌ను దాచిపెడుతుంది
• .collapse.inకంటెంట్‌ని చూపుతుంది
• .collapsingపరివర్తన ప్రారంభమైనప్పుడు జోడించబడుతుంది మరియు అది ముగిసినప్పుడు తీసివేయబడుతుంది

ఈ తరగతులను లో చూడవచ్చు component-animations.less.

డేటా లక్షణాల ద్వారా

ధ్వంసమయ్యే మూలకం యొక్క నియంత్రణను స్వయంచాలకంగా కేటాయించడానికి ఎలిమెంట్‌కు జోడించి data-toggle="collapse"a జోడించండి . కుప్పకూలింపును వర్తింపజేయడానికి లక్షణం CSS ఎంపికను అంగీకరిస్తుంది 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.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ని ఉంచండి మరియు అది స్వయంచాలకంగా సమలేఖనం చేయబడుతుంది మరియు ఫార్మాట్ చేయబడుతుంది.

మొదటి స్లయిడ్ లేబుల్

నుల్లా విటే ఎలిట్ లిబెరో, ఎ ఫారెట్రా ఆగ్ మోలిస్ ఇంటర్‌డమ్.

రెండవ స్లయిడ్ లేబుల్

లోరెమ్ ఇప్సమ్ డోలర్ సిట్ అమెట్, కాన్సెక్టెచర్ అడిపిసింగ్ ఎలిట్.

మూడవ స్లయిడ్ లేబుల్

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బయటి కంటైనర్ (ది ) ని ఉపయోగించడం అవసరం . .carouselబహుళ క్యారౌసెల్‌లను జోడించేటప్పుడు లేదా రంగులరాట్నం మార్చేటప్పుడు idసంబంధిత నియంత్రణలను అప్‌డేట్ చేయాలని నిర్ధారించుకోండి.

డేటా లక్షణాల ద్వారా

రంగులరాట్నం యొక్క స్థానాన్ని సులభంగా నియంత్రించడానికి డేటా లక్షణాలను ఉపయోగించండి. data-slideకీలకపదాలను అంగీకరిస్తుంది prevలేదా next, స్లయిడ్ స్థానాన్ని దాని ప్రస్తుత స్థానానికి సంబంధించి మారుస్తుంది. ప్రత్యామ్నాయంగా, data-slide-toరంగులరాట్నంకు ముడి స్లయిడ్ సూచికను పాస్ చేయడానికి ఉపయోగించండి data-slide-to="2", ఇది స్లయిడ్ స్థానాన్ని నిర్దిష్ట సూచికతో ప్రారంభమయ్యే నిర్దిష్ట సూచికకు మారుస్తుంది 0.

data-ride="carousel"పేజీ లోడ్ నుండి ప్రారంభమయ్యే రంగులరాట్నం యానిమేటింగ్‌గా గుర్తించడానికి లక్షణం ఉపయోగించబడుతుంది . ఇది అదే రంగులరాట్నం యొక్క స్పష్టమైన జావాస్క్రిప్ట్ ప్రారంభీకరణతో (నిరుపయోగమైన మరియు అనవసరమైన) కలయికతో ఉపయోగించబడదు.

జావాస్క్రిప్ట్ ద్వారా

దీనితో మాన్యువల్‌గా రంగులరాట్నం కాల్ చేయండి:

$('.carousel').carousel()

ఎంపికలు

ఎంపికలు డేటా లక్షణాలు లేదా జావాస్క్రిప్ట్ ద్వారా పంపబడతాయి. డేటా అట్రిబ్యూట్‌ల కోసం, ఎంపిక పేరును data-, లో వలె జత చేయండి data-interval="".

పద్ధతులు

.carousel(options)

ఐచ్ఛిక ఎంపికలతో రంగులరాట్నం ప్రారంభిస్తుంది objectమరియు అంశాల ద్వారా సైక్లింగ్‌ను ప్రారంభిస్తుంది.

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

.carousel('cycle')

రంగులరాట్నం ఐటెమ్‌ల ద్వారా ఎడమ నుండి కుడికి సైకిల్ చేస్తుంది.

.carousel('pause')

వస్తువుల ద్వారా సైక్లింగ్ నుండి రంగులరాట్నం ఆపివేస్తుంది.

.carousel(number)

రంగులరాట్నం ఒక నిర్దిష్ట ఫ్రేమ్‌కి సైకిల్ చేస్తుంది (0 ఆధారిత, శ్రేణిని పోలి ఉంటుంది).

.carousel('prev')

మునుపటి అంశానికి చక్రాలు.

.carousel('next')

తదుపరి అంశానికి చక్రాలు.

ఈవెంట్స్

బూట్‌స్ట్రాప్ యొక్క రంగులరాట్నం క్లాస్ రంగులరాట్నం కార్యాచరణలోకి హుక్ చేయడానికి రెండు ఈవెంట్‌లను బహిర్గతం చేస్తుంది.

రెండు ఈవెంట్‌లు క్రింది అదనపు లక్షణాలను కలిగి ఉన్నాయి:

• direction: రంగులరాట్నం స్లైడింగ్ అయ్యే దిశ (ఏదో "left"లేదా "right").
• relatedTarget: DOM మూలకం సక్రియ అంశంగా స్లయిడ్ చేయబడుతోంది.

అన్ని రంగులరాట్నం ఈవెంట్‌లు రంగులరాట్నంలోనే (అంటే వద్ద <div class="carousel">) కాల్చబడతాయి.

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

affix.js _

ఉదాహరణ

తో కనుగొనబడిన ప్రభావాన్ని అనుకరిస్తూ, affix ప్లగ్ఇన్ position: fixed;ఆన్ మరియు ఆఫ్ టోగుల్ చేస్తుంది position: sticky;. కుడి వైపున ఉన్న సబ్‌నేవిగేషన్ అఫిక్స్ ప్లగ్ఇన్ యొక్క లైవ్ డెమో.

వాడుక

డేటా అట్రిబ్యూట్‌ల ద్వారా లేదా మీ స్వంత జావాస్క్రిప్ట్‌తో మాన్యువల్‌గా అఫిక్స్ ప్లగ్ఇన్‌ని ఉపయోగించండి. రెండు సందర్భాల్లో, మీరు మీ అతికించిన కంటెంట్ యొక్క స్థానం మరియు వెడల్పు కోసం తప్పనిసరిగా CSSని అందించాలి.

గమనిక: Safari రెండరింగ్ బగ్ కారణంగా లాగబడిన లేదా నెట్టబడిన నిలువు వరుస వంటి సాపేక్షంగా ఉంచబడిన మూలకంలో ఉన్న మూలకంపై అనుబంధ ప్లగ్ఇన్‌ను ఉపయోగించవద్దు .

CSS ద్వారా స్థానీకరణ

అఫిక్స్ ప్లగ్ఇన్ మూడు తరగతుల మధ్య టోగుల్ చేస్తుంది, ప్రతి ఒక్కటి నిర్దిష్ట స్థితిని సూచిస్తుంది: .affix, .affix-top, మరియు .affix-bottom. వాస్తవ స్థానాలను నిర్వహించడానికి ఈ తరగతులకు మీరే (ఈ ప్లగ్ఇన్ నుండి స్వతంత్రంగా) position: fixed;న మినహా మీరు శైలులను తప్పక అందించాలి ..affix

అఫిక్స్ ప్లగ్ఇన్ ఎలా పనిచేస్తుందో ఇక్కడ ఉంది:

1. ప్రారంభించడానికి, .affix-topమూలకం దాని అగ్రస్థానంలో ఉందని సూచించడానికి ప్లగ్ఇన్ జోడిస్తుంది. ఈ సమయంలో CSS స్థానాలు అవసరం లేదు.
2. మీరు అతికించదలిచిన మూలకాన్ని దాటి స్క్రోల్ చేయడం వలన అసలు అనుబంధాన్ని ట్రిగ్గర్ చేయాలి. ఇక్కడే .affixరీప్లేస్ చేస్తుంది .affix-topమరియు సెట్ చేస్తుంది position: fixed;(బూట్‌స్ట్రాప్ యొక్క CSS ద్వారా అందించబడింది).
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')

ఈవెంట్స్

బూట్‌స్ట్రాప్ యొక్క అఫిక్స్ ప్లగ్ఇన్ అఫిక్స్ ఫంక్షనాలిటీకి హుకింగ్ చేయడానికి కొన్ని ఈవెంట్‌లను బహిర్గతం చేస్తుంది.