మోడల్స్ గురించి

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

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

క్రింద స్థిరంగా రెండర్ చేయబడిన మోడల్ ఉంది.

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

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

బూట్స్ట్రాప్-మోడల్ ఉపయోగించడం

javascript ద్వారా మోడల్‌కి కాల్ చేయండి:

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

ఎంపికలు

మార్కప్

మీరు జావాస్క్రిప్ట్ యొక్క ఒక్క పంక్తిని వ్రాయకుండా సులభంగా మీ పేజీలో మోడల్‌లను సక్రియం చేయవచ్చు. మోడల్ ఎలిమెంట్ ఐడితో లేదా దానికి అనుగుణంగా ఉండే data-toggle="modal"కంట్రోలర్ ఎలిమెంట్‌పై సెట్ చేయండి మరియు క్లిక్ చేసినప్పుడు, అది మీ మోడల్‌ని ప్రారంభిస్తుంది.data-target="#foo"href="#foo"

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

<a class = "btn" data-toggle = "modal" href = "#myModal" > లాంచ్ మోడల్ </a>    

<div class = "modal" id = "myModal" >  
  <div class = "modal-header" > 
    <button class = "close" data-dismiss = "modal" > × </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>

పద్ధతులు

.modal(ఎంపికలు)

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

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

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

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

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

.modal('షో')

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

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

.modal('దాచు')

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

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

ఈవెంట్స్

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

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

డ్రాప్‌డౌన్‌ల గురించి

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

ఉదాహరణలు

డ్రాప్‌డౌన్‌లను పరీక్షించడానికి నావ్‌బార్‌లోని డ్రాప్‌డౌన్ nav లింక్‌లు మరియు దిగువ మాత్రలపై క్లిక్ చేయండి.

• రెగ్యులర్ లింక్
• కింద పడేయి
  • Action
  • Another action
  • Something else here
  • Separated link
• డ్రాప్‌డౌన్ 2
  • Action
  • Another action
  • Something else here
  • Separated link
• డ్రాప్‌డౌన్ 3
  • Action
  • Another action
  • Something else here
  • Separated link

bootstrap-dropdown.jsని ఉపయోగించడం

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

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

మార్కప్

ఏదైనా ఎలిమెంట్‌కి డ్రాప్‌డౌన్ కార్యాచరణను త్వరగా జోడించడానికి కేవలం జోడించండి data-toggle="dropdown"మరియు ఏదైనా చెల్లుబాటు అయ్యే బూట్‌స్ట్రాప్ డ్రాప్‌డౌన్ స్వయంచాలకంగా సక్రియం చేయబడుతుంది.

<ul class = "nav nav-pills" > 
  <li class = "active" ><a href = "#" > సాధారణ లింక్ </a></li>  
  <li class = "dropdown" id = "menu1" >  
    <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#menu1" >   
      కింద పడేయి
      <b class = "caret" ></b> 
    </a>
    <ul class = "dropdown-menu" > 
      <li><a href = "#" > చర్య </a></li> 
      <li><a href = "#" > మరొక చర్య </a></li> 
      <li><a href = "#" > ఇక్కడ ఇంకేదో ఉంది </a></li> 
      <li class = "divider" ></li> 
      <li><a href = "#" > వేరు చేయబడిన లింక్ </a></li> 
    </ul>
  </li>
  ...
</ul>

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

<ul class = "nav nav-pills" > 
  <li class = "dropdown" > 
    <a class = "dropdown-toggle" data-toggle = "dropdown" data-target = "#" href = "path/to/page.html" >    
      కింద పడేయి
      <b class = "caret" ></b> 
    </a>
    <ul class = "dropdown-menu" > 
      ...
    </ul>
  </li>
</ul>

పద్ధతులు

$().డ్రాప్‌డౌన్()

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

ScrollSpy ప్లగ్ఇన్ అనేది స్క్రోల్ స్థానం ఆధారంగా nav లక్ష్యాలను స్వయంచాలకంగా నవీకరించడం కోసం.

scrollspy తో ఉదాహరణ navbar

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

bootstrap-scrollspy.jsని ఉపయోగించడం

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

$ ( '#navbar' ). scrollspy ()

మార్కప్

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

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

పద్ధతులు

.scrollspy('refresh')

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

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

ఎంపికలు

ఈవెంట్స్

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

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

డ్రాప్‌డౌన్ మెనుల ద్వారా కూడా దాచిన పేన్‌ల మధ్య టోగుల్ చేయడానికి దిగువ ట్యాబ్‌లను క్లిక్ చేయండి.

• హోమ్
• ప్రొఫైల్
• కింద పడేయి
  • @fat
  • @mdo

bootstrap-tab.jsని ఉపయోగించడం

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

$ ( '#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ని మరియు స్థానిక శీర్షిక నిల్వ కోసం డేటా-అట్రిబ్యూట్‌లను ఉపయోగిస్తాయి.

టూల్‌టిప్‌ల ఉదాహరణ ఉపయోగం

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

bootstrap-tooltip.jsని ఉపయోగించడం

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

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

ఎంపికలు

మార్కప్

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

<a href = "#" rel = "tooltip" title = "మొదటి టూల్‌టిప్" > నాపై హోవర్ చేయి </a>   

పద్ధతులు

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

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

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

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

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

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

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

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

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

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

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

popovers గురించి

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

* టూల్‌టిప్‌ను చేర్చడం అవసరం

ఉదాహరణ హోవర్ పాప్‌ఓవర్

పాప్‌ఓవర్‌ని ట్రిగ్గర్ చేయడానికి బటన్‌పై హోవర్ చేయండి.

bootstrap-popover.jsని ఉపయోగించడం

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

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

ఎంపికలు

మార్కప్

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

పద్ధతులు

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

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

.popover('షో')

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

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

.popover('దాచు')

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

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

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

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

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

హెచ్చరికల గురించి

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

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

హెచ్చరికల ప్లగ్ఇన్ సాధారణ హెచ్చరిక సందేశాలపై పని చేస్తుంది మరియు సందేశాలను బ్లాక్ చేస్తుంది.

bootstrap-alert.jsని ఉపయోగించడం

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

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

మార్కప్

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

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

పద్ధతులు

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

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

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

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

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

ఈవెంట్స్

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

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

గురించి

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

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

రాష్ట్రాలు మరియు టోగుల్స్ కోసం బటన్ల ప్లగ్ఇన్‌ని ఉపయోగించండి.

bootstrap-button.jsని ఉపయోగించడం

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

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

మార్కప్

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

<!-- ఒకే బటన్‌పై టోగుల్ చేయడాన్ని సక్రియం చేయడానికి డేటా-టోగుల్="బటన్"ని జోడించండి -->
<button class = "btn" data-toggle = "button" > సింగిల్ టోగుల్ </button>  
 
<!-- btn-groupలో చెక్‌బాక్స్ స్టైల్ టోగులింగ్ కోసం డేటా-టోగుల్="buttons-checkbox"ని జోడించండి -->
<div class = "btn-group" data-toggle = "buttons-checkbox" >  
  <button class = "btn" > ఎడమ </button> 
  <button class = "btn" > మిడిల్ </button> 
  <button class = "btn" > కుడివైపు </button> 
</div>
 
<!-- btn-group -->లో రేడియో స్టైల్ టోగులింగ్ కోసం డేటా-టోగుల్="buttons-radio"ని జోడించండి
<div class = "btn-group" data-toggle = "buttons-radio" >  
  <button class = "btn" > ఎడమ </button> 
  <button class = "btn" > మిడిల్ </button> 
  <button class = "btn" > కుడివైపు </button> 
</div>

పద్ధతులు

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

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

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

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

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

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

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

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

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

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

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

గురించి

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

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

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

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

bootstrap-collapse.jsని ఉపయోగించడం

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

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

ఎంపికలు

మార్కప్

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

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

పద్ధతులు

.collapse(ఎంపికలు)

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

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

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

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

.collapse('షో')

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

.collapse('దాచు')

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

ఈవెంట్స్

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

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

గురించి

మూలకాల ద్వారా సైక్లింగ్ కోసం ఒక సాధారణ ప్లగ్ఇన్. ఒక ఉల్లాసంగా.

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

దిగువ స్లైడ్‌షో చూడండి.

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

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

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

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.

‹ ›

bootstrap-carousel.jsని ఉపయోగించడం

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

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

ఎంపికలు

మార్కప్

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

<div id = "myCarousel" class = "రంగులరాట్నం" >  
  <!-- రంగులరాట్నం అంశాలు -->
  <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>

పద్ధతులు

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

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

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

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

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

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

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

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

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

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

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

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

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

ఈవెంట్స్

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

గురించి

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

ఉదాహరణ

టైప్‌హెడ్ ఫలితాలను చూపడానికి దిగువ ఫీల్డ్‌లో టైప్ చేయడం ప్రారంభించండి.

bootstrap-typeahead.jsని ఉపయోగించడం

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

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

ఎంపికలు

మార్కప్

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

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

పద్ధతులు

.typeahead(ఎంపికలు)

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