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

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

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

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

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

$ ( 'శరీరం' ). ఆఫ్ ( '.data-api' )

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

$ ( 'శరీరం' ). ఆఫ్ ( '.alert.data-api' )

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

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

$ ( ".btn.danger" ). బటన్ ( "టోగుల్" ). addClass ( "కొవ్వు" )

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

$ ( "#myModal" ). మోడల్ () // డిఫాల్ట్‌లతో ప్రారంభించబడింది                       
$ ( "#myModal" ). మోడల్ ({ కీబోర్డ్ : తప్పు }) // కీబోర్డ్ లేకుండా ప్రారంభించబడింది     
$ ( "#myModal" ). మోడల్ ( 'షో' ) // వెంటనే ప్రదర్శనను ప్రారంభిస్తుంది మరియు ప్రేరేపిస్తుంది                

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

సంఘర్షణ లేదు

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

var bootstrapButton = $ . fn _ బటన్ . noConflict () // $.fn.బటన్‌ని గతంలో కేటాయించిన విలువకు తిరిగి ఇవ్వండి 
$ _ fn _ bootstrapBtn = bootstrapButton             // $().bootstrapBtn బూట్‌స్ట్రాప్ కార్యాచరణను ఇవ్వండి

ఈవెంట్స్

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

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

$ ( '#myModal' ). ఆన్ ( 'షో' , ఫంక్షన్ ( ఇ ) {   
    ఒకవేళ (! డేటా ) తిరిగి ఇ . నిరోధించు డిఫాల్ట్ () // మోడల్ చూపబడకుండా ఆపివేస్తుంది   
})

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

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

కేసులు వాడండి

పరివర్తన ప్లగిన్ యొక్క కొన్ని ఉదాహరణలు:

• మోడల్స్‌లో స్లైడింగ్ లేదా ఫేడింగ్
• ఫేడింగ్ అవుట్ ట్యాబ్‌లు
• ఫేడింగ్ అవుట్ హెచ్చరికలు
• స్లైడింగ్ రంగులరాట్నం పేన్లు

ఉదాహరణలు

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

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

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

<div class = "మోడల్ హైడ్ ఫేడ్" > 
  <div class = "modal-header" > 
    <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true" > × </button>    
    <h3> మోడల్ హెడర్ </h3>
  </div>
  <div class = "modal-body" > 
    <p> ఒక చక్కటి శరీరం... </p>
  </div>
  <div class = "modal-footer" > 
    <a href = "#" class = "btn" > మూసివేయి </a>  
    <a href = "#" class = "btn btn-primary" > మార్పులను సేవ్ చేయి </a>  
  </div>
</div>

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

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

<!-- మోడల్‌ని ట్రిగ్గర్ చేయడానికి బటన్ -->
<a href = "#myModal" role = "button" class = "btn" data-toggle = "modal" > డెమో మోడల్‌ని ప్రారంభించండి </a>    
 
<!-- మోడల్ -->
<div id = "myModal" class = "modal hide fade" tabindex = "-1" role = "dialog" aria-labelledby = "myModalLabel" aria-hidden = "true" >      
  <div class = "modal-header" > 
    <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true" > × </button>    
    <h3 id = "myModalLabel" > మోడల్ హెడర్ </h3> 
  </div>
  <div class = "modal-body" > 
    <p> ఒక చక్కటి శరీరం... </p>
  </div>
  <div class = "modal-footer" > 
    <button class = "btn" data-dismiss = "modal" aria-hidden = "true" > Close </button>   
    <button class = "btn btn-primary" > మార్పులను సేవ్ చేయి </button> 
  </div>
</div>

వాడుక

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

జావాస్క్రిప్ట్ రాయకుండా మోడల్‌ని యాక్టివేట్ చేయండి. టోగుల్ చేయడానికి ఒక నిర్దిష్ట మోడల్‌తో పాటుగా లేదా data-toggle="modal"ఒక బటన్ వంటి నియంత్రిక మూలకంపై సెట్ చేయండి .data-target="#foo"href="#foo"

<button type = "button" data-toggle = "modal" data-target = "#myModal" > లాంచ్ మోడల్ </button>   

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

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

$ ( '#myModal' ). మోడల్ ( ఐచ్ఛికాలు )

ఎంపికలు

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

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

పద్ధతులు

.modal(ఎంపికలు)

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

$ ( '#myModal' ). మోడల్ ({
  కీబోర్డ్ : తప్పు 
})

.modal('టోగుల్')

మోడల్‌ను మాన్యువల్‌గా టోగుల్ చేస్తుంది.

$ ( '#myModal' ). మోడల్ ( 'టోగుల్' )

.modal('షో')

మాన్యువల్‌గా మోడల్‌ను తెరుస్తుంది.

$ ( '#myModal' ). మోడల్ ( 'షో' )

.modal('దాచు')

మోడల్‌ను మాన్యువల్‌గా దాచిపెడుతుంది.

$ ( '#myModal' ). మోడల్ ( 'దాచు' )

ఈవెంట్స్

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

$ ( '#myModal' ). ఆన్ ( 'దాచిన' , ఫంక్షన్ () {   
  // ఏదో ఒకటి చేయి…
})

ఉదాహరణలు

నావ్‌బార్, ట్యాబ్‌లు మరియు మాత్రలతో సహా ఈ సాధారణ ప్లగ్‌ఇన్‌తో దాదాపు దేనికైనా డ్రాప్‌డౌన్ మెనులను జోడించండి.

నావ్‌బార్‌లో

ట్యాబ్‌ల లోపల

వాడుక

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

data-toggle="dropdown"డ్రాప్‌డౌన్‌ను టోగుల్ చేయడానికి లింక్ లేదా బటన్‌కు జోడించండి .

<div class = "dropdown" > 
  <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#" > డ్రాప్‌డౌన్ ట్రిగ్గర్ </a>   
  <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >   
    ...
  </ul>
</div>

URLలను చెక్కుచెదరకుండా ఉంచడానికి, data-targetబదులుగా లక్షణాన్ని ఉపయోగించండి href="#".

<div class = "dropdown" > 
  <a class = "dropdown-toggle" id = "dLabel" role = "button" data-toggle = "dropdown" data-target = "#" href = "/page.html" >      
    కింద పడేయి
    <b class = "caret" ></b> 
  </a>
  <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >   
    ...
  </ul>
</div>

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

జావాస్క్రిప్ట్ ద్వారా డ్రాప్‌డౌన్‌లను కాల్ చేయండి:

$ ( '.dropdown-toggle' ). డ్రాప్‌డౌన్ ()

ఎంపికలు

ఏదీ లేదు

పద్ధతులు

$().dropdown('toggle')

ఇచ్చిన నావ్‌బార్ లేదా ట్యాబ్ చేయబడిన నావిగేషన్ కోసం మెనులను టోగుల్ చేయడానికి ప్రోగ్రామాటిక్ API.

navbarలో ఉదాహరణ

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

వాడుక

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

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

<body data-spy = "స్క్రోల్" data-target = ".navbar" > ... </body>  

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

జావాస్క్రిప్ట్ ద్వారా scrollspyకి కాల్ చేయండి:

$ ( '#navbar' ). scrollspy ()

పద్ధతులు

.scrollspy('refresh')

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

$ ( '[data-spy="scroll"]' ). ప్రతి ( ఫంక్షన్ () {  
  var $ గూఢచారి = $ ( ఇది ). scrollspy ( 'రిఫ్రెష్' )
});

ఎంపికలు

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

ఈవెంట్స్

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

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

వాడుక

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

$ ( '#myTab a' ). క్లిక్ చేయండి ( ఫంక్షన్ ( ఇ ) {  
  ఇ . డిఫాల్ట్ ();
  $ ( ఇది ). టాబ్ ( 'షో' );
})

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

$ ( '#myTab a[href="#profile"]' ). టాబ్ ( 'షో' ); // పేరు ద్వారా ట్యాబ్‌ని ఎంచుకోండి 
$ ( '#myTab a:first' ). టాబ్ ( 'షో' ); // మొదటి ట్యాబ్‌ని ఎంచుకోండి 
$ ( '#myTab a:last' ). టాబ్ ( 'షో' ); // చివరి ట్యాబ్‌ని ఎంచుకోండి 
$ ( '#myTab li:eq(2) a' ). టాబ్ ( 'షో' ); // మూడవ ట్యాబ్‌ను ఎంచుకోండి (0-ఇండెక్స్ చేయబడింది) 

మార్కప్

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

<ul class = "nav nav-tabs" > 
  <li><a href = "#home" data-toggle = "tab" > హోమ్ </a></li>  
  <li><a href = "#profile" data-toggle = "tab" > ప్రొఫైల్ </a></li>  
  <li><a href = "#messages" data-toggle = "tab" > సందేశాలు </a></li>  
  <li><a href = "#settings" data-toggle = "tab" > సెట్టింగ్‌లు </a></li>  
</ul>

పద్ధతులు

$().టాబ్

ట్యాబ్ మూలకం మరియు కంటెంట్ కంటైనర్‌ను సక్రియం చేస్తుంది. ట్యాబ్ తప్పనిసరిగా DOMలో data-targetఒక hrefకంటైనర్ నోడ్‌ను లక్ష్యంగా చేసుకుని ఉండాలి.

<ul class = "nav nav-tabs" id = "myTab" >  
  <li class = "యాక్టివ్" ><a href = "#home" > హోమ్ </a></li>  
  <li><a href = "#profile" > ప్రొఫైల్ </a></li> 
  <li><a href = "#messages" > సందేశాలు </a></li> 
  <li><a href = "#settings" > సెట్టింగ్‌లు </a></li> 
</ul>
 
<div class = "tab-content" > 
  <div class = "tab-pane active" id = "home" > ... </div>  
  <div class = "tab-pane" id = "profile" > ... </div>  
  <div class = "tab-pane" id = "messages" > ... </div>  
  <div class = "tab-pane" id = "settings" > ... </div>  
</div>
 
<స్క్రిప్ట్>
  $ ( ఫంక్షన్ () {  
    $ ( '#myTab a:last' ). టాబ్ ( 'షో' );
  })
</script>

ఈవెంట్స్

$ ( 'a[data-toggle="tab"]' ). ఆన్ ( 'చూపబడింది' , ఫంక్షన్ ( ఇ   ) { 
  ఇ . లక్ష్యం // యాక్టివేట్ చేసిన ట్యాబ్
  ఇ . సంబంధిత లక్ష్యం // మునుపటి ట్యాబ్
})

ఉదాహరణలు

జాసన్ ఫ్రేమ్ రాసిన అద్భుతమైన jQuery.tipsy ప్లగ్ఇన్ ప్రేరణ; టూల్‌టిప్‌లు నవీకరించబడిన సంస్కరణ, ఇది చిత్రాలపై ఆధారపడదు, యానిమేషన్‌ల కోసం CSS3ని మరియు స్థానిక శీర్షిక నిల్వ కోసం డేటా-లక్షణాలను ఉపయోగిస్తుంది.

పనితీరు కారణాల దృష్ట్యా, టూల్‌టిప్ మరియు పాప్‌ఓవర్ డేటా-ఎపిస్ ఎంచుకోబడతాయి, అంటే మీరు వాటిని మీరే ప్రారంభించాలి .

టూల్‌టిప్‌లను చూడటానికి క్రింది లింక్‌లపై హోవర్ చేయండి:

నాలుగు దిక్కులు

ఇన్‌పుట్ సమూహాలలో టూల్‌టిప్‌లు

బూట్‌స్ట్రాప్ ఇన్‌పుట్ సమూహాలతో టూల్‌టిప్‌లు మరియు పాప్‌ఓవర్‌లను ఉపయోగిస్తున్నప్పుడు, containerఅవాంఛిత దుష్ప్రభావాలను నివారించడానికి మీరు (క్రింద డాక్యుమెంట్ చేయబడిన) ఎంపికను సెట్ చేయాలి.

వాడుక

జావాస్క్రిప్ట్ ద్వారా టూల్‌టిప్‌ను ట్రిగ్గర్ చేయండి:

$ ( '#ఉదాహరణ' ). ఉపకరణ చిట్కా ( ఐచ్ఛికాలు )

ఎంపికలు

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

మార్కప్

<a href = "#" data-toggle = "tooltip" title = "మొదటి ఉపకరణ చిట్కా" > నాపై హోవర్ చేయి </a>   

పద్ధతులు

$().ఉపకరణ చిట్కా(ఎంపికలు)

ఎలిమెంట్ సేకరణకు టూల్‌టిప్ హ్యాండ్లర్‌ను జోడిస్తుంది.

.టూల్‌టిప్('షో')

మూలకం యొక్క టూల్‌టిప్‌ను వెల్లడిస్తుంది.

$ ( '#మూలకం' ). ఉపకరణ చిట్కా ( 'షో' )

.ఉపకరణ చిట్కా('దాచు')

మూలకం యొక్క ఉపకరణ చిట్కాను దాచిపెడుతుంది.

$ ( '#మూలకం' ). ఉపకరణ చిట్కా ( 'దాచు' )

.టూల్‌టిప్('టోగుల్')

మూలకం యొక్క టూల్‌టిప్‌ను టోగుల్ చేస్తుంది.

$ ( '#మూలకం' ). ఉపకరణ చిట్కా ( 'టోగుల్' )

.ఉపకరణ చిట్కా('నాశనం')

మూలకం యొక్క టూల్‌టిప్‌ను దాచి, నాశనం చేస్తుంది.

$ ( '#మూలకం' ). ఉపకరణ చిట్కా ( 'నాశనం' )

ఉదాహరణలు

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

స్టాటిక్ పాప్‌ఓవర్

నాలుగు ఎంపికలు అందుబాటులో ఉన్నాయి: ఎగువ, కుడి, దిగువ మరియు ఎడమకు సమలేఖనం చేయబడింది.

జావాస్క్రిప్ట్ మరియు అట్రిబ్యూట్‌లోని కంటెంట్ నుండి పాపవర్‌లుగా చూపబడిన మార్కప్ ఏదీ చూపబడలేదు data.

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

నాలుగు దిక్కులు

వాడుక

జావాస్క్రిప్ట్ ద్వారా పాపవర్‌లను ప్రారంభించండి:

$ ( '#ఉదాహరణ' ). popover ( ఐచ్ఛికాలు )

ఎంపికలు

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

మార్కప్

పనితీరు కారణాల దృష్ట్యా, టూల్‌టిప్ మరియు పాప్‌ఓవర్ డేటా-ఎపిస్ ఎంపిక చేయబడ్డాయి. మీరు వాటిని ఉపయోగించాలనుకుంటే సెలెక్టర్ ఎంపికను పేర్కొనండి.

పద్ధతులు

$().popover(ఎంపికలు)

మూలకాల సేకరణ కోసం పాప్‌ఓవర్‌లను ప్రారంభిస్తుంది.

.popover('షో')

పాప్‌ఓవర్ మూలకాలను వెల్లడిస్తుంది.

$ ( '#మూలకం' ). popover ( 'షో' )

.popover('దాచు')

పాప్‌ఓవర్ మూలకాలను దాచిపెడుతుంది.

$ ( '#మూలకం' ). popover ( 'దాచు' )

.popover('టోగుల్')

ఎలిమెంట్స్ పాప్‌ఓవర్‌ని టోగుల్ చేస్తుంది.

$ ( '#మూలకం' ). popover ( 'టో���ుల్' )

.popover('నాశనం')

మూలకం యొక్క పాప్‌ఓవర్‌ను దాచి, నాశనం చేస్తుంది.

$ ( '#మూలకం' ). popover ( 'నాశనం' )

ఉదాహరణ హెచ్చరికలు

ఈ ప్లగ్ఇన్‌తో అన్ని హెచ్చరిక సందేశాలకు డిస్మిస్ కార్యాచరణను జోడించండి.

వాడుక

జావాస్క్రిప్ట్ ద్వారా హెచ్చరికను తొలగించడాన్ని ప్రారంభించండి:

$ ( ".అలర్ట్" ). హెచ్చరిక ()

మార్కప్

data-dismiss="alert"స్వయంచాలకంగా హెచ్చరిక క్లోజ్ ఫంక్షనాలిటీని అందించడానికి మీ క్లోజ్ బటన్‌కు జోడించండి .

<a class = "close" data-dismiss = "alert" href = "#" > × </a>   

పద్ధతులు

$().అలర్ట్()

క్లోజ్ ఫంక్షనాలిటీతో అన్ని హెచ్చరికలను వ్రాప్ చేస్తుంది. మీ హెచ్చరికలు మూసివేయబడినప్పుడు యానిమేట్ అయ్యేలా చేయడానికి, అవి ఇప్పటికే .fadeవాటికి .inవర్తింపజేసినట్లు నిర్ధారించుకోండి.

హెచ్చరిక ('మూసివేయి')

హెచ్చరికను మూసివేస్తుంది.

$ ( ".అలర్ట్" ). హెచ్చరిక ( 'మూసివేయి' )

ఈవెంట్స్

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

$ ( '#నా-అలర్ట్' ). బైండ్ ( 'మూసివేయబడింది' , ఫంక్షన్ () {   
  // ఏదో ఒకటి చేయి…
})

ఉదాహరణ ఉపయోగాలు

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

రాష్ట్రీయమైన

data-loading-text="Loading..."బటన్‌లో లోడింగ్ స్థితిని ఉపయోగించడానికి జోడించండి .

<button type = "button" class = "btn btn-primary" data-loading-text = "లోడ్ అవుతోంది..." > లోడ్ అవుతోంది స్థితి </button>   

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

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

<button type = "button" class = "btn btn-primary" data-toggle = "button" > సింగిల్ టోగుల్ </button>   

చెక్‌బాక్స్

data-toggle="buttons-checkbox"btn-groupలో చెక్‌బాక్స్ స్టైల్ టోగుల్ కోసం జోడించండి .

<div class = "btn-group" data-toggle = "buttons-checkbox" >  
  <button type = "button" class = "btn btn-primary" > ఎడమ </button>  
  <button type = "button" class = "btn btn-primary" > మిడిల్ </button>  
  <button type = "button" class = "btn btn-primary" > కుడివైపు </button>  
</div>

రేడియో

data-toggle="buttons-radio"btn-సమూహంలో రేడియో శైలి టోగుల్ కోసం జోడించండి .

<div class = "btn-group" data-toggle = "buttons-radio" >  
  <button type = "button" class = "btn btn-primary" > ఎడమ </button>  
  <button type = "button" class = "btn btn-primary" > మిడిల్ </button>  
  <button type = "button" class = "btn btn-primary" > కుడివైపు </button>  
</div>

వాడుక

జావాస్క్రిప్ట్ ద్వారా బటన్లను ప్రారంభించండి:

$ ( '.nav-tabs' ). బటన్ ()

మార్కప్

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

ఎంపికలు

ఏదీ లేదు

పద్ధతులు

$().బటన్('టోగుల్')

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

<button type = "button" class = "btn" data-toggle = "button" > … </button>    

$().బటన్('లోడ్ అవుతోంది')

బటన్ స్థితిని లోడ్ చేయడానికి సెట్ చేస్తుంది - బటన్‌ను నిలిపివేస్తుంది మరియు టెక్స్ట్‌ను లోడ్ చేయడానికి టెక్స్ట్‌ను మార్చుకుంటుంది. డేటా లక్షణాన్ని ఉపయోగించి బటన్ మూలకంపై వచనాన్ని లోడ్ చేయడం నిర్వచించబడాలి data-loading-text.

<button type = "button" class = "btn" data-loading-text = "stuff లోడ్ అవుతోంది..." > ... </button>    

$().బటన్('రీసెట్')

బటన్ స్థితిని రీసెట్ చేస్తుంది - వచనాన్ని అసలు వచనానికి మారుస్తుంది.

$().బటన్(స్ట్రింగ్)

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

<button type = "button" class = "btn" data-complete-text = "పూర్తయింది!" > ... </button>    
<స్క్రిప్ట్>
  $ ( '.btn' ). బటన్ ( 'పూర్తి' )
</script>

గురించి

అకార్డియన్‌లు మరియు నావిగేషన్ వంటి ధ్వంసమయ్యే భాగాల కోసం బేస్ స్టైల్స్ మరియు సౌకర్యవంతమైన మద్దతును పొందండి.

* పరివర్తనాల ప్లగ్ఇన్‌ని చేర్చడం అవసరం.

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

పతనం ప్లగ్ఇన్ ఉపయోగించి, మేము ఒక సాధారణ అకార్డియన్ శైలి విడ్జెట్‌ను రూపొందించాము:

<div class = "accordion" id = "accordion2" >  
  <div class = "accordion-group" > 
    <div class = "accordion-heading" > 
      <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseOne" >    
        ధ్వంసమయ్యే సమూహ అంశం #1
      </a>
    </div>
    <div id = "collapseOne" class = "accordion-body collaps in" >  
      <div class = "accordion-inner" > 
        అనిమ్ పరియతుర్ క్లిచ్...
      </div>
    </div>
  </div>
  <div class = "accordion-group" > 
    <div class = "accordion-heading" > 
      <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseTwo" >    
        ధ్వంసమయ్యే సమూహ అంశం #2
      </a>
    </div>
    <div id = "collapseTwo" class = "accordion-body collops" >  
      <div class = "accordion-inner" > 
        అనిమ్ పరియతుర్ క్లిచ్...
      </div>
    </div>
  </div>
</div>
...

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

<button type = "button" class = "btn btn-danger" data-toggle = "collapse" data-target = "#demo" >    
  సాధారణ ధ్వంసమయ్యే
</button>
 
<div id = "demo" class = "collapse in" > … </div>  

వాడుక

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

ధ్వంసమయ్యే మూలకం యొక్క నియంత్రణను స్వయంచాలకంగా కేటాయించడానికి మూలకాన్ని జోడించి data-toggle="collapse"a data-targetto ఎలిమెంట్ చేయండి. data-targetపతనాన్ని వర్తింపజేయడానికి లక్షణం css ఎంపికను అంగీకరిస్తుంది . collapseధ్వంసమయ్యే మూలకానికి తరగతిని జోడించాలని నిర్ధారించుకోండి . మీరు దీన్ని డిఫాల్ట్‌గా తెరవాలనుకుంటే, అదనపు తరగతిని జోడించండి in.

ధ్వంసమయ్యే నియంత్రణకు అకార్డియన్ లాంటి సమూహ నిర్వహణను జోడించడానికి, డేటా లక్షణాన్ని జోడించండి data-parent="#selector". దీన్ని చర్యలో చూడటానికి డెమోని చూడండి.

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

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

$ ( ".కూలిపోవు" ). పతనం ()

ఎంపికలు

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

పద్ధతులు

.collapse(ఎంపికలు)

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

$ ( '#myCollapsible' ). కుదించు ({
  టోగుల్ : తప్పు 
})

.collapse('టోగుల్')

ధ్వంసమయ్యే మూలకాన్ని చూపడానికి లేదా దాచడానికి టోగుల్ చేస్తుంది.

.collapse('షో')

ధ్వంసమయ్యే మూలకాన్ని చూపుతుంది.

.collapse('దాచు')

ధ్వంసమయ్యే మూలకాన్ని దాచిపెడుతుంది.

ఈవెంట్స్

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

$ ( '#myCollapsible' ). ఆన్ ( 'దాచిన' , ఫంక్షన్ () {   
  // ఏదో ఒకటి చేయి…
})

ఉదాహరణ రంగులరాట్నం

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

మొదటి థంబ్‌నెయిల్ లేబుల్

క్రాస్ జస్టో ఒడియో, డాపిబస్ ఎసి ఫెసిలిసిస్ ఇన్, ఎగెస్టాస్ ఎగెట్ క్వామ్. డోనెక్ ఐడి ఎలిట్ నాన్ మై పోర్టా గ్రావిడా ఎట్ ఎగెట్ మెటస్. Nullam id dolor id nibh ultricies వాహనాలు ut id elit.

రెండవ థంబ్‌నెయిల్ లేబుల్

క్రాస్ జస్టో ఒడియో, డాపిబస్ ఎసి ఫెసిలిసిస్ ఇన్, ఎగెస్టాస్ ఎగెట్ క్వామ్. డోనెక్ ఐడి ఎలిట్ నాన్ మై పోర్టా గ్రావిడా ఎట్ ఎగెట్ మెటస్. Nullam id dolor id nibh ultricies వాహనాలు ut id elit.

Third Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

‹ ›

<div id = "myCarousel" class = "రంగులరాట్నం స్లయిడ్" >  
  <ol class = "carousel-indicators" > 
    <li data-target = "#myCarousel" data-slide-to = "0" class = "active" ></li>   
    <li data-target = "#myCarousel" data-slide-to = "1" ></li>  
    <li data-target = "#myCarousel" data-slide-to = "2" ></li>  
  </ol>
  <!-- రంగులరాట్నం అంశాలు -->
  <div class = "carousel-inner" > 
    <div class = "సక్రియ అంశం" > … </div> 
    <div class = "item" > … </div> 
    <div class = "item" > … </div> 
  </div>
  <!-- రంగులరాట్నం nav -->
  <a class = "carousel-control left" href = "#myCarousel" data-slide = "prev" > ‹ </a>   
  <a class = "carousel-control right" href = "#myCarousel" data-slide = "next" > › </a>   
</div>

వాడుక

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

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

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

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

$ ( '.రంగులరాట్నం' ). రంగులరాట్నం ()

ఎంపికలు

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

పద్ధతులు

రంగులరాట్నం(ఎంపికలు)

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

$ ( '.రంగులరాట్నం' ). రంగులరాట్నం ({
  విరామం : 2000 
})

.రంగులరాట్నం('సైకిల్')

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

.రంగులరాట్నం('పాజ్')

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

.రంగులరాట్నం(సంఖ్య)

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

.రంగులరాట్నం('మునుపటి')

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

.రంగులరాట్నం('తదుపరి')

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

ఈవెంట్స్

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

ఉదాహరణ

ఏదైనా ఫారమ్ టెక్స్ట్ ఇన్‌పుట్‌తో సొగసైన టైప్‌హెడ్‌లను త్వరగా సృష్టించడానికి ప్రాథమిక, సులభంగా పొడిగించబడిన ప్లగ్ఇన్.

<input type = "text" data- provide = "typeahead" >  

autocomplete="off"బూట్‌స్ట్రాప్ టైప్‌హెడ్ డ్రాప్‌డౌన్‌లో డిఫాల్ట్ బ్రౌజర్ మెనులు కనిపించకుండా నిరోధించడానికి మీరు సెట్ చేయాలనుకుంటున్నారు .

వాడుక

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

పై ఉదాహరణలో చూపిన విధంగా టైప్‌హెడ్ కార్యాచరణతో మూలకాన్ని నమోదు చేయడానికి డేటా లక్షణాలను జోడించండి.

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

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

$ ( '.typeahead' ). టైప్‌హెడ్ ()

ఎంపికలు

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

పద్ధతులు

.typeahead(ఎంపికలు)

టైప్‌హెడ్‌తో ఇన్‌పుట్‌ను ప్రారంభిస్తుంది.

ఉదాహరణ

ఎడమ వైపున ఉన్న సబ్‌నావిగేషన్ అఫిక్స్ ప్లగ్ఇన్ యొక్క లైవ్ డెమో.

వాడుక

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

ఏదైనా మూలకానికి అఫిక్స్ ప్రవర్తనను సులభంగా జోడించడానికి, data-spy="affix"మీరు గూఢచర్యం చేయాలనుకుంటున్న మూలకానికి జోడించండి. ఒక మూలకం యొక్క పిన్నింగ్‌ను ఎప్పుడు ఆన్ మరియు ఆఫ్ చేయాలో నిర్వచించడానికి ఆఫ్‌సెట్‌లను ఉపయోగించండి.

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

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

జావాస్క్రిప్ట్ ద్వారా అఫిక్స్ ప్లగిన్‌కు కాల్ చేయండి:

$ ( '#navbar' ). అతికించు ()

ఎంపికలు

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