बूटस्ट्रैप् कृते जावास्क्रिप्ट्

Bootstrap इत्यस्य घटकान् जीवने आनयन्तु-अधुना 12 कस्टम् jQuery प्लगिन्स् इत्यनेन सह।

मोडल्स्

एकः सुव्यवस्थितः, परन्तु लचीलः, केवलं न्यूनतम-आवश्यक-कार्यक्षमतायाः स्मार्ट-पूर्वनिर्धारितस्य च सह पारम्परिक-जावास्क्रिप्ट्-मोडल-प्लगिन्-इत्यस्य उपरि गृह्णाति ।

ड्रॉपडाउन्स्

एतेन सरलेन प्लगिन् इत्यनेन Bootstrap इत्यस्मिन् प्रायः किमपि मध्ये ड्रॉप् डाउन मेनू योजयन्तु । Bootstrap इत्यनेन navbar, tabs, pills इत्यत्र च पूर्णं ड्रॉप्डाउन मेनू समर्थनं चालू अस्ति ।

स्क्रॉलस्पी

स्क्रॉल-स्थानस्य आधारेण वर्तमान-सक्रिय-लिङ्कं दर्शयितुं स्वस्य navbar मध्ये लिङ्कानि स्वयमेव अद्यतनीकर्तुं scrollspy इत्यस्य उपयोगं कुर्वन्तु ।

टॉगल करने योग्य ट्याब्स

स्थानीयसामग्रीणां टैब-योग्य-फलकानां माध्यमेन टॉगल-करणस्य अनुमतिं दत्त्वा ट्याब्स्-गोल्यः च अधिक-उपयोगि-करणाय एतस्य प्लगिन्-इत्यस्य उपयोगं कुर्वन्तु ।

टूलटिप्स

jQuery Tipsy प्लगइन इत्यस्य नूतनं ग्रहणं, Tooltips चित्रेषु न अवलम्बन्ते-ते एनिमेशनस्य कृते CSS3 इत्यस्य उपयोगं कुर्वन्ति तथा च स्थानीयशीर्षकभण्डारणार्थं data-attributes इत्यस्य उपयोगं कुर्वन्ति।

पोपोवर्स * .

गौणसूचनायाः आवासार्थं कस्मिन् अपि तत्त्वे iPad इत्यत्र इव सामग्रीयाः लघु-आच्छादनानि योजयन्तु ।

* Tooltips को शामिल करने की आवश्यकता है

चेतावनी सन्देशाः

अलर्ट् प्लगिन् अलर्ट्स् मध्ये निकटकार्यक्षमतां योजयितुं एकः लघुवर्गः अस्ति ।

बटन्स्

बटन्स् इत्यनेन अधिकं कुर्वन्तु। नियन्त्रणबटनं वदति अथवा उपकरणपट्टिका इत्यादीनां अधिकघटकानाम् कृते बटनसमूहान् रचयति ।

संश्यान

अकॉर्डियन तथा नेविगेशन इत्यादीनां संकुचनीयघटकानाम् आधारशैल्याः लचीलसमर्थनं च प्राप्नुवन्तु ।

हिंडोला

यत्किमपि सामग्रीं भवन्तः सामग्रीयाः अन्तरक्रियाशीलं स्लाइड्-प्रदर्शनं दातुम् इच्छन्ति तस्य एकं मस्त-गो-राउण्ड् रचयन्तु ।

टाइपअहेड इति

कस्यापि रूपस्य पाठनिवेशेन सह शीघ्रं सुरुचिपूर्णं typeaheads निर्मातुं मूलभूतं, सुलभतया विस्तारितं प्लगिन् ।

संक्रमणानि * .

सरलसंक्रमणप्रभावानाम् कृते, मोडल्स् मध्ये स्लाइड् कर्तुं वा अलर्ट् आउट् कर्तुं वा एकवारं bootstrap-transition.js इत्येतत् समावेशयन्तु ।

* प्लगिन्स् मध्ये एनिमेशनस्य कृते आवश्यकम्

शिरः उपरि ! सर्वेषु जावास्क्रिप्ट् प्लगिन्स् मध्ये jQuery इत्यस्य नवीनतमसंस्करणस्य आवश्यकता वर्तते ।

मोडल के बारे में

सञ्चिकां डाउनलोड् कुर्वन्तु

स्थिर उदाहरण

अधः स्थिररूपेण प्रतिपादितं मोडलम् अस्ति ।

लाइव डेमो

अधोलिखितं बटन् नुत्वा जावास्क्रिप्ट् मार्गेण एकं मोडल् टॉग् कुर्वन्तु । पृष्ठस्य उपरितः अधः स्लाइड् कृत्वा क्षीणं भविष्यति ।

डेमो मोडल प्रारम्भ करें

bootstrap-modal इत्यस्य उपयोगेन

जावास्क्रिप्ट् मार्गेण मोडल् आह्वयन्तु:

$ ( '# मेरामोडल' ). मोडल ( विकल्प ) .

विकल्पाः

नामः	प्रकारः	मूलभूतम्‌	वर्णनम्‌
पृष्ठभूमिः	बूलियन इति	सत्यम्‌	एकं मोडल-पृष्ठभूमितत्त्वं समावेशयति। वैकल्पिकरूपेण, `static`एकस्य पृष्ठभूमिस्य कृते निर्दिशतु यत् क्लिक् इत्यत्र मोडल् न बन्दं करोति ।
कीबोर्ड	बूलियन इति	सत्यम्‌	escape कील दबाने पर मोडल बन्द करता है
दर्शयतु	बूलियन इति	सत्यम्‌	आरम्भे मोडल दर्शयति ।

मार्कअप

जावास्क्रिप्ट् इत्यस्य एकां पङ्क्तिं न लिखित्वा भवान् स्वपृष्ठे मोडाल्स् इत्येतत् सुलभतया सक्रियं कर्तुं शक्नोति । केवलं a or which corresponds to a modal element id data-toggle="modal"इत्यनेन सह controller element इत्यत्र सेट् कुर्वन्तु , ततः क्लिक् कृत्वा, तत् भवतः modal प्रारम्भं करिष्यति ।data-target="#foo"href="#foo"

अपि च, स्वस्य मोडल-दृष्टान्ते विकल्पान् योजयितुं, केवलं तान् नियन्त्रण-तत्त्वे अथवा मोडल्-मार्कअप-इत्यत्रैव अतिरिक्त-दत्तांश-विशेषतारूपेण समावेशयन्तु ।

<a class = "btn" data-toggle = "modal" href = "#myModal" > मोडल प्रारम्भ करें </a>

<div वर्ग = "मोडल" id = "myModal" >  
  <div वर्ग = "मोडल-शीर्षक" > 
    <a class = "बन्द" data-dismiss = "मोडल" > × </a>  
    <h3> मोडल शीर्षक </h3>
  </div> इति
  <div class = "मोडल-शरीर" > 
    <p> एकं सूक्ष्मशरीरं... </p>
  </div> इति
  <div class = "मोडल-पाद लेख" > 
    <a href = "#" वर्ग = "btn" > बन्द करें </a>  
    <a href = "#" class = "btn btn-primary" > परिवर्तनं रक्षतु </a>  
  </div> इति
</div> इति

शिरः उपरि ! यदि भवान् इच्छति यत् भवतां मोडालः अन्तः बहिः च एनिमेट् कर्तुं शक्नोति तर्हि केवलं एलिमेण्ट् मध्ये एकं .fadeवर्गं योजयन्तु .modal(एतत् क्रियायां द्रष्टुं डेमो पश्यन्तु) तथा च bootstrap-transition.js इत्येतत् समावेशयन्तु ।

विधियाँ

.मोडल(विकल्पाः) .

भवतः सामग्रीं मोडलरूपेण सक्रियं करोति। एकं वैकल्पिकं विकल्पं स्वीकुर्वति object.

$ ( '# मेरामोडल' ). मोडल ({
  कीलफलकम् : false 
}) इति ।

.modal('टॉगल') .

एकं मोडलं मैन्युअल् रूपेण टॉगल करोति।

$ ( '# मेरामोडल' ). मोडल ( 'टॉगल' ) .

.modal('दर्शितुम्') .

मैन्युअल् रूपेण एकं मोडल् उद्घाटयति।

$ ( '# मेरामोडल' ). मोडल ( 'दर्शन' ) .

.मोडल('गोपन') .

एकं मोडलं मैन्युअल् रूपेण गोपयति।

$ ( '# मेरामोडल' ). मोडल ( 'गोपनीय' ) .

घटनाः

बूटस्ट्रैप् इत्यस्य मोडलवर्गः मोडलकार्यक्षमतायां हुक् करणाय कतिपयानि घटनानि उजागरयति ।

घटना	वर्णनम्‌
दर्शयतु	एषा घटना तत्क्षणमेव प्रज्वलति यदा `show`दृष्टान्तविधिः आह्वयते ।
दर्शितम्	इदं घटना तदा प्रज्वलितं भवति यदा मोडल् उपयोक्त्रे दृश्यमानं कृतम् अस्ति (css संक्रमणानां पूर्णतां प्रतीक्षते) ।
गोपयतु	इदं घटना तत्क्षणमेव प्रज्वलितं भवति यदा उदाहरणविधिः `hide`आहूता अस्ति ।
अदृष्ट	इदं घटना तदा प्रज्वलितं भवति यदा मोडल् उपयोक्त्रेण गोपनीयं समाप्तं भवति (css संक्रमणानां पूर्णतां प्रतीक्षते) ।

$ ( '# मेरामोडल' ). on ( 'गुप्त' , फंक्शन () { .   
  // किमपि कुरुत...
}) इति ।

ड्रॉपडाउन्स के बारे में

��तेन सरलेन प्लगिन् इत्यनेन Bootstrap इत्यस्मिन् प्रायः किमपि मध्ये ड्रॉप् डाउन मेनू योजयन्तु । Bootstrap इत्यनेन navbar, tabs, pills इत्यत्र च पूर्णं ड्रॉप्डाउन मेनू समर्थनं चालू अस्ति ।

सञ्चिकां डाउनलोड् कुर्वन्तु

उदाहरणानि

ड्रॉपडाउन्स् परीक्षितुं अधः navbar मध्ये dropdown nav links इत्यत्र क्लिक् कुर्वन्तु तथा च pills इत्यत्र क्लिक् कुर्वन्तु।

bootstrap-dropdown.js इत्यस्य उपयोगेन

जावास्क्रिप्ट् मार्गेण ड्रॉप्डाउन्स् आह्वयन्तु:

$ ( '.ड्रॉपडाउन-टॉगल' ). ड्रॉपडाउन () .

मार्कअप

शीघ्रं कस्मिन् अपि तत्त्वे ड्रॉपडाउन कार्यक्षमतां योजयितुं केवलं योजयन्तु data-toggle="dropdown"तथा च कोऽपि वैधः बूटस्ट्रैप् ड्रॉपडाउन स्वयमेव सक्रियः भविष्यति ।

शिरः उपरि ! data-target="#fat"भवान् वैकल्पिकरूपेण अथवा इत्यस्य उपयोगेन विशिष्टं पतनं लक्ष्यं कर्तुं शक्नोति href="#fat"।

<ul class = "नव नव-गोलियाँ" > 
  <li class = "सक्रिय" ><a href = "#" > नियमितलिङ्क </a></li>  
  <li वर्ग = "ड्रॉपडाउन" id = "मेनू1" >  
    <a class = "ड्रॉपडाउन-टॉगल" data-toggle = "ड्रॉपडाउन" href = "# मेनू1" >   
      ड्रॉपडाउन
      <b class = "कैरेट्" </b> 
    </a> इति
    <ul class = "ड्रॉपडाउन-मेनू" > 
      <li><a href = "#" > क्रिया </a></li> 
      <li><a href = "#" > अन्यत् कर्म </a></li> 
      <li><a href = "#" > अत्र अन्यत् किमपि </a></li> 
      <li class = "विभाजक" </li> 
      <li><a href = "#" > पृथक् लिङ्क् </a></li> 
    </ul> इति
  </li> इति
  ...
</ul> इति

विधियाँ

$ (). ड्रॉपडाउन () .

दत्तस्य नवबारस्य अथवा ट्याब्ड् नेविगेशनस्य कृते मेनू सक्रियीकरणाय एकः प्रोग्रामेटिकः api ।

ScrollSpy प्लगइन स्क्रॉल स्थिति के आधार पर स्वचालित रूप से nav लक्ष्य अद्यतन करने के लिए है।

सञ्चिकां डाउनलोड् कुर्वन्तु

उदाहरणं scrollspy सह navbar

अधोलिखितं क्षेत्रं स्क्रॉल कृत्वा नेविगेशन अपडेट् पश्यन्तु। ड्रॉप् डाउन उप आइटम्स् अपि हाइलाइट् भविष्यन्ति। प्रयतस्व !

@स्थूलः

विज्ञापन लेगिंग keytar, ब्रंच आईडी कला पार्टी dolor labore. Pitchfork yr enim lo-fi पहले वे बिक चुके qui. Tumblr फार्म-टू-टेबल साइकिल अधिकार जो भी। अनिं केफियेह कार्लेस् कार्डिगन। Velit seitan mcsweeney का फोटो बूथ 3 भेड़िया चन्द्रमा irure. Cosby स्वेटर lomo जीन शॉर्ट्स, विलियम्सबर्ग हुडी न्यूनतम qui आप शायद उन्हें एट कार्डिगन ट्रस्ट फंड culpa बायोडीजल wes anderson सौंदर्यशास्त्र के बारे में नहीं सुनया है। निहिल गोदना accusamus, cred विडंबना बायोडीजल keffiyeh कारीगर ullamco consequat.

@मडो

Veniam marfa मूंछ स्केटबोर्ड, adipisicing fugiat velit पिचफोर्क दाढ़ी. Freegan दाढ़ी aliqua cupidat mcsweeney के vero. कामदेवताट चत्वारि लोको निसि, ईए हेल्वेटिका नुल्ला कार्लेस्। टैटू cosby स्वेटर खाद्य ट्रक, mcsweeney के quis गैर freegan vinyl. लो-फि वेस् एण्डरसन +१ सरटोरियल। कार्लेस गैर सौंदर्य व्यायाम quis gentrify. ब्रुकलिन adipisicing शिल्प बियर वाइस keytar deserunt.

एकम्‌

Occaecat commodo एलिक्वा डेलेक्टस। Fap शिल्प बियर deserunt स्केटबोर्ड ईए. लोमो साईकिल अधिकार adipisicing banh mi, velit ea sunt अगले स्तर locavore एकल-मूल कॉफी में magna veniam. उच्च जीवन आईडी vinyl, प्रतिध्वनि पार्क consequat quis aliquip banh mi pitchfork. वेरो VHS est adipisicing. Consectetur nisi DIY न्यूनतम दूत बैग। Cred पूर्व में, टिकाऊ delectus consectetur फैनी पैक iphone.

द्वि

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.

Keytar twee blog, culpa दूत बैग marfa जो भी delectus खाद्य ट्रक। Sapiente सिन्थ इड असुमेण्डा। Locavore sed helvetica cliche विडंबना, thundercats आप शायद उनके बारे में नहीं सुना है consequat hoodie लस-मुक्त लो-फाई fap aliquip. Labore अभिजात वर्ग placeat पहले वे बेच दिया, टेरी रिचर्डसन proident ब्रंच nesciunt quis cosby स्वेटर pariatur keffiyeh उत helvetica कारीगर. कार्डिगन शिल्प बियर seitan रेडीमेड velit. VHS chambray laboris अस्थायी veniam. Anim mollit न्यूनतम commodo उल्लमको गरज बिल्लियों।

bootstrap-scrollspy.js इत्यस्य उपयोगेन

जावास्क्रिप्ट् मार्गेण scrollspy आह्वयन्तु:

$ ( '# नवबार' ). स्क्रॉलस्पी () .

मार्कअप

स्वस्य topbar नेविगेशनं प्रति scrollspy व्यवहारं सुलभतया योजयितुं, केवलं तस्मिन् data-spy="scroll"तत्त्वे योजयन्तु यस्य उपरि भवन्तः गुप्तचरं कर्तुम् इच्छन्ति (अधिकांशतः एतत् शरीरं स्यात्) ।

<body data-spy = "स्क्रॉल" > ... </body> इति

शिरः उपरि ! नवबार लिङ्केषु समाधानयोग्याः id लक्ष्याणि भवितुमर्हन्ति । यथा - a <a href="#home">home</a>इत्यस्य डोम् इव किमपि अनुरूपं भवितुमर्हति <div id="home"></div>।

विकल्पाः

नामः	प्रकारः	मूलभूतम्‌	वर्णनम्‌
offset इति	संख्या	१०	स्क्रॉलस्य स्थितिं गणयन्ते सति उपरितः ऑफसेट् कर्तुं पिक्सेल्।

एतत् प्लगिन् स्थानीयसामग्रीद्वारा संक्रमणार्थं द्रुतं, गतिशीलं ट्याब् तथा गोलीकार्यक्षमतां योजयति ।

सञ्चिकां डाउनलोड् कुर्वन्तु

उदाहरण ट्याब्स्

गुप्तफलकानां मध्ये टोग्ल् कर्तुं अधोलिखितानि ट्याब्स् नुदन्तु, ड्रॉप्डाउन मेन्यू मार्गेण अपि ।

कच्चा डेनिम भवन्तः सम्भवतः तेषां विषये न श्रुतवन्तः jean shorts Austin. Nesciunt टोफू stumptown aliqua, रेट्रो सिंथ मास्टर सफाई. मूंछ क्लिच अस्थायी, विलियम्सबर्ग कार्ल्स शाकाहारी helvetica. Reprehenderit कसाई रेट्रो keffiyeh सपना पकड़ने वाला synth. Cosby स्वेटर eu banh mi, qui irure टेरी रिचर्डसन पूर्व स्क्वीड. Aliquip placeat साल्विया सिलम iphone. Seitan aliquip quis कार्डिगन अमेरिकी परिधान, कसाई 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.

Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.

ट्रस्ट फण्ड seitan लेटरप्रेस, keytar कच्चे डेनिम keffiyeh etsy कला पार्टी से पहले वे बेच दिया मास्टर साफ लस मुक्त स्क्वीड scenester freegan cosby स्वेटर. फैनी पैक portland seitan DIY, कला पार्टी locavore भेड़िया क्लिच उच्च जीवन प्रतिध्वनि पार्क ऑस्टिन. Cred vinyl keffiyeh DIY salvia PBR, banh mi स पहल व ब क ब क फ र म-टू-टबल VHS व यरल locavore cosby स व टर. Lomo भेड़िया वायरल, मूंछ readymade thundercats keffiyeh शिल्प बियर marfa नैतिक. भेड़िया salvia freegan, sartorial keffiyeh प्रतिध्वनि पार्क शाकाहारी.

bootstrap-tab.js इत्यस्य उपयोगेन

जावास्क्रिप्ट् मार्गेण टैबबल् ट्याब्स् सक्षमं कुर्वन्तु:

$ ( '# मेरा टैब' ). tab ( 'दर्शयतु' ) .

मार्कअप

data-toggle="tab"केवलं निर्दिष्टं कृत्वा अथवा data-toggle="pill"कस्यचित् तत्वस्य उपरि किमपि जावास्क्रिप्ट् लिखित्वा विना ट्याब् अथवा पिल् नेविगेशनं सक्रियं कर्तुं शक्नुवन्ति ।

<ul class = "नव नव-टैब्स" > 
  <li><a href = "#home" data-toggle = "टैब" > गृहम् </a></li>  
  <li><a href = "#प्रोफाइल" data-toggle = "टैब" > प्रोफाइल </a></li>  
  <li><a href = "#messages" data-toggle = "टैब" > सन्देशाः </a></li>  
  <li><a href = "#सेटिंग्स्" data-toggle = "टैब" > सेटिंग्स् </a></li>  
</ul> इति

विधियाँ

$ ().टैब

एकं ट्याब् एलिमेण्ट् तथा सामग्रीपात्रं सक्रिययति । Tab इत्यत्र dom मध्ये एकं container node लक्ष्यं कृत्वा `data-target` अथवा `href` भवितव्यम् ।

<ul class = "नव नव-टैब्स" > 
  <li class = "सक्रिय" ><a href = "#home" > गृहम् </a></li>  
  <li><a href = "#प्रोफाइल" > प्रोफाइल </a></li> 
  <li><a href = "#messages" > सन्देशाः </a></li> 
  <li><a href = "#सेटिंग्स्" > सेटिंग्स् </a></li> 
</ul> इति
 
<div class = "टैब-सामग्री" > 
  <div class = "टैब-पैन सक्रिय" id = "गृह" > ... </div>  
  <div class = "टैब-पैन" id = "प्रोफाइल" > ... </div>  
  <div class = "टैब-पैन" id = "सन्देशाः" > ... </div>  
  <div class = "टैब-पैन" id = "सेटिंग्स्" > ... </div>  
</div> इति
 
<लिपि> इति
  $ ( फंक्शन () { .  
    $ ( '.tabs a:अन्तिम' ). tab ( 'दर्शयतु' ) .
  }) इति ।
</script> इति

घटनाः

घटना	वर्णनम्‌
दर्शयतु	इदं इवेण्ट् ट्याब् शो इत्यत्र अग्निम् अङ्गीकुर्वति, परन्तु नूतनं ट्याब् दर्शितस्य पूर्वं । सक्रिय ट्याब् तथा पूर्व सक्रिय ट्याब् (यदि उपलब्ध है) को क्रमशः लक्षित करने के लिए `event.target`और का प्रयोग करें ।`event.relatedTarget`
दर्शितम्	एतत् इवेण्ट् ट्याब् दर्शितस्य अनन्तरं tab show इत्यत्र प्रज्वलितं भवति । सक्रिय ट्याब् तथा पूर्व सक्रिय ट्याब् (यदि उपलब्ध है) को क्रमशः लक्षित करने के लिए `event.target`और का प्रयोग करें ।`event.relatedTarget`

$ ( 'एक [डेटा-टॉगल = "टैब"]' ). on ( 'दर्शित' , फंक्शन ( ई ) { .   
  ङ . लक्ष्य // सक्रिय टैब
  ङ . relatedTarget // पूर्व टैब
}) इति ।

Tooltips के बारे में

जेसन फ्रेम द्वारा लिखित उत्कृष्ट jQuery.tipsy प्लगइन द्वारा प्रेरित; Tooltips एकं अद्यतनं संस्करणम् अस्ति, यत् चित्रेषु न अवलम्बते, एनिमेशनस्य कृते css3 इत्यस्य उपयोगं करोति, स्थानीयशीर्षकभण्डारणार्थं च data-attributes इत्यस्य उपयोगं करोति ।

सञ्चिकां डाउनलोड् कुर्वन्तु

Tooltips इत्यस्य उदाहरणप्रयोगः

उपकरणसूचनानि द्रष्टुं अधोलिङ्कानि उपरि माउसं कुर्वन्तु:

bootstrap-tooltip.js इत्यस्य उपयोगेन

जावास्क्रिप्ट् मार्गेण टूल्टिप् ट्रिगर कुर्वन्तु:

$ ( '#उदाहरणम्' ). tooltip ( विकल्पाः ) .

विकल्पाः

नामः	प्रकारः	मूलभूतम्‌	वर्णनम्‌
एनिमेशन	बूलियन इति	सत्यम्‌	टूलटिप् मध्ये css fade संक्रमणं प्रयोजयन्तु
स्थापनम्	तार\|कार्यम्	'उपरितन'	how to position the tooltip - शीर्ष \| तले \| वाम \| दक्षिणः
चयनकर्ता	सूत्र	असत्य	यदि चयनकर्ता प्रदत्तः अस्ति तर्हि निर्दिष्टलक्ष्याणां कृते टूल्टिप् ऑब्जेक्ट्स् प्रत्यायिताः भविष्यन्ति ।
शीर्षक	तार \| नियोग	'' इति ।	पूर्वनिर्धारित शीर्षक मान यदि `title` टैग मौजूद नहीं है
प्रवर्त्यम्	सूत्र	'मण्डपः' इति ।	tooltip कथं प्रवर्तते - hover \| फोकस \| शास्त्र
विलम्बः	संख्या \| वस्तु	०	टूल्टिप् (ms) दर्शयितुं गोपयितुं च विलम्बः । यदि सङ्ख्या प्रदत्ता भवति तर्हि hide/show इति द्वयोः कृते विलम्बः प्रयुक्तः भवति वस्तुसंरचना अस्ति : १.`delay: { show: 500, hide: 100 }`

शिरः उपरि ! व्यक्तिगतसाधनसूचनानां विकल्पाः वैकल्पिकरूपेण दत्तांशगुणानां उपयोगेन निर्दिष्टुं शक्यन्ते ।

मार्कअप

कार्यप्रदर्शनकारणात्, Tooltip तथा Popover data-apis इत्येतयोः विकल्पः अस्ति यदि भवान् तान् उपयोक्तुं इच्छति तर्हि केवलं चयनकर्ता विकल्पं निर्दिशतु ।

<a href = "#" rel = "उपकरणटिप्पणी" title = "प्रथमं साधनटिप्पणी" > मम उपरि मण्डूकं कुरुत </a>

विधियाँ

$ ().उपकरणटिप (विकल्प) .

एलिमेण्ट्-सङ्ग्रहे टूल्टिप्-हन्डलर् संलग्नं करोति ।

.tooltip('दर्शितुम्') .

एकस्य तत्त्वस्य टूल्टिप् प्रकाशयति ।

$ ( '# तत्व' ). tooltip ( 'दर्शितुम्' ) .

.tooltip('गोपन') .

कस्यचित् एलिमेण्ट् इत्यस्य टूल्टिप् गोपयति ।

$ ( '# तत्व' ). tooltip ( 'गोपनीयम्' ) .

.tooltip('टॉगल') .

कस्यचित् एलिमेण्ट् इत्यस्य टूल्टिप् टॉग्ल् करोति ।

$ ( '# तत्व' ). tooltip ( 'टॉगल' ) .

popovers के बारे में

* Tooltip को शामिल करने की आवश्यकता है

सञ्चिकां डाउनलोड् कुर्वन्तु

उदाहरणम् hover popover इति

पोपोवरं प्रेरयितुं बटनस्य उपरि माउसं कुर्वन्तु।

hover for popover इति

bootstrap-popover.js इत्यस्य उपयोगेन

जावास्क्रिप्ट् मार्गेण popovers सक्षमं कुर्वन्तु:

$ ( '#उदाहरणम्' ). popover ( विकल्पाः ) .

विकल्पाः

नामः	प्रकारः	मूलभूतम्‌	वर्णनम्‌
एनिमेशन	बूलियन इति	सत्यम्‌	टूलटिप् मध्ये css fade संक्रमणं प्रयोजयन्तु
स्थापनम्	तार\|कार्यम्	'दक्षिणः'	how to position the popover - शीर्ष \| तले \| वाम \| दक्षिणः
चयनकर्ता	सूत्र	असत्य	यदि चयनकर्ता प्रदत्तः अस्ति तर्हि tooltip objects निर्दिष्टलक्ष्यं प्रति प्रत्यायिताः भविष्यन्ति
प्रवर्त्यम्	सूत्र	'मण्डपः' इति ।	tooltip कथं प्रवर्तते - hover \| फोकस \| शास्त्र
शीर्षक	तार \| नियोग	'' इति ।	पूर्वनिर्धारित शीर्षक मान यदि `title` विशेषता मौजूद नहीं है
विषयः	तार \| नियोग	'' इति ।	पूर्वनिर्धारित सामग्री मूल्य यदि `data-content` विशेषता उपस्थित नहीं है
विलम्बः	संख्या \| वस्तु	०	पोपोवरं दर्शयन् गोपयन् च विलम्बः (ms) . यदि सङ्ख्या प्रदत्ता भवति तर्हि hide/show इति द्वयोः कृते विलम्बः प्रयुक्तः भवति वस्तुसंरचना अस्ति : १.`delay: { show: 500, hide: 100 }`

शिरः उपरि ! व्यक्तिगत पोपोवर्स् कृते विकल्पाः वैकल्पिकरूपेण दत्तांशगुणानां उपयोगेन निर्दिष्टुं शक्यन्ते ।

मार्कअप

कार्यप्रदर्शनकारणात्, Tooltip तथा Popover data-apis इत्येतयोः विकल्पः अस्ति यदि भवान् तान् उपयोक्तुं इच्छति तर्हि केवलं the selector विकल्पं निर्दिशतु ।

विधियाँ

$ ().popover (विकल्प) .

एकस्य तत्वसङ्ग्रहस्य कृते popovers आरभते ।

.popover('दर्शन') .

एक तत्वों popover प्रकट करता है।

$ ( '# तत्व' ). popover ( 'दर्शन' ) .

.पोपोवर('गोपन') .

एकं तत्त्वानि पोपोवरं गोपयति।

$ ( '# तत्व' ). पोपोवर ( 'गोपनीय' ) .

.popover('टॉगल') .

एकं एलिमेण्ट्स् पोपोवरं टॉगल करोति।

$ ( '# तत्व' ). popover ( 'टॉगल' ) .

अलर्ट्स् विषये

अवाहरन

उदाहरण सचेतना

अलर्ट्स् प्लगिन् नियमितसचेतनासन्देशेषु कार्यं करोति, अवरुद्धसन्देशेषु च ।

× पवित्र गुआकामोल ! Best check yo self, त्वं बहु उत्तमं न दृश्यते।

अहो स्नैप ! भवतः त्रुटिः प्राप्ता!

एतत् तत् च परिवर्त्य पुनः प्रयासं कुर्वन्तु। Duis mollis, est गैर commodo luctus, nisi erat porttitor ligula, eget lacinia odio सेम nec अभिजात वर्ग. Cras mattis consectetur पुरुष बैठा amet fermentum.

एतत् कर्म गृहाण एतत् वा कुरुत

bootstrap-alert.js इत्यस्य उपयोगेन

जावास्क्रिप्ट् मार्गेण अलर्टस्य निराकरणं सक्षमं कुर्वन्तु:

$ ( ".सचेतना" ). अलर्ट () .

मार्कअप

केवलं स्वस्य close बटन् मध्ये योजयन्तु data-dismiss="alert"यत् स्वयमेव alert close कार्यक्षमतां दातुं शक्नुवन्ति।

<a class = "बंद करें" data-dismiss = "सचेतना" href = "#" > × </a> इति

विधियाँ

$ ().अलर्ट () .

सर्वाणि अलर्ट्स् निकटकार्यक्षमतायाः सह लपेटति। भवतः अलर्ट्स् बन्दं कृत्वा बहिः एनिमेट् कर्तुं, सुनिश्चितं कुर्वन्तु यत् तेषां कृते पूर्वमेव .fadeand .inवर्गः प्रयुक्तः अस्ति ।

.alert('बन्द करें') .

एकं अलर्ट् बन्दं करोति।

$ ( ".सचेतना" ). alert ( 'बन्द' ) .

घटनाः

Bootstrap इत्यस्य alert वर्गः alert कार्यक्षमतायाः हुक् करणाय कतिपयानि घटनानि प्रकाशयति ।

घटना	वर्णनम्‌
पिधानं करोतु	एषा घटना तत्क्षणमेव प्रज्वलति यदा `close`दृष्टान्तविधिः आह्वयते ।
निमीलितम्	यदा अलर्ट् बन्दं जातं तदा एषा घटना प्रज्वलिता भवति (css संक्रमणानां पूर्णतां प्रतीक्षते) ।

$ ( '#मम-सचेतना' ). bind ( 'बन्द' , फंक्शन () {   
  // किमपि कुरुत...
}) इति ।

विषये

सञ्चिकां डाउनलोड् कुर्वन्तु

उदाहरणप्रयोगः

राज्यानां टॉगल्स् च कृते बटन्स् प्लगिन् इत्यस्य उपयोगं कुर्वन्तु ।

राज्यपूर्णः
एकल टॉगल
चेकबॉक्स
रेडियो

bootstrap-button.js इत्यस्य उपयोगेन

जावास्क्रिप्ट् मार्गेण बटन् सक्षमं कुर्वन्तु:

$ ( '.टैब्स्' ). बटन () .

मार्कअप

दत्तांशविशेषताः बटनप्लगिन् इत्यस्य अभिन्नं भवन्ति । विभिन्नानां मार्कअपप्रकारानाम् कृते अधोलिखितं उदाहरणसङ्केतं पश्यन्तु ।

<!-- एकस्मिन् बटने टॉगलिंग् सक्रियीकरणाय data-toggle="button" योजयन्तु -->
<button class = "btn" data-toggle = "बटन" > एकल टॉगल </button>  
 
<!-- btn-group --> इत्यत्र चेकबॉक्स शैली टॉगलिंग् कृते data-toggle="buttons-checkbox" योजयन्तु
<div वर्ग = "btn-समूह" डेटा-टॉगल = "बटन-चेकबॉक्स" >  
  <button class = "btn" > वाम </button> 
  <button class = "btn" > मध्य </button> 
  <बटन वर्ग = "btn" > सही  </button>
</div> इति
 
<!-- btn-group --> इत्यत्र रेडियोशैली टॉगलिंग् कृते data-toggle="buttons-radio" योजयन्तु
<div वर्ग = "btn-समूह" डेटा-टॉगल = "बटन-रेडियो" >  
  <button class = "btn" > वाम </button> 
  <button class = "btn" > मध्य </button> 
  <बटन वर्ग = "btn" > सही  </button>
</div> इति

विधियाँ

$ (). बटन ('टॉगल')

पुश अवस्था को टॉगल करता है। बटनं सक्रियम् इति रूपं ददाति ।

शिरः उपरि ! data-toggleएट्रिब्यूट् इत्यस्य उपयोगेन भवान् बटन् इत्यस्य auto toggling इत्येतत् सक्षमं कर्तुं शक्नोति ।

<button class = "btn" data-toggle = "बटन" > ... </बटन>

$ (). बटन ('लोडिंग')

बटन स्थितिं लोडिंग् इत्यत्र सेट् करोति - बटनं निष्क्रियं करोति तथा च पाठं लोड् करणाय स्वैप् करोति । data attribute इत्यस्य उपयोगेन बटन एलिमेण्ट् इत्यत्र लोड् करणं पाठं परिभाषितव्यम् data-loading-text|

<button class = "btn" data-loading-text = "सामग्री लोड कर रहा है..." > ... </button>

शिरः उपरि ! Firefox पृष्ठभारेषु अक्षमस्थितिं निरन्तरं करोति . अस्य कृते एकः कार्यपरिहारः अस्ति यत् autocomplete="off".

$ (). बटन ('रीसेट')

बटन स्थितिं पुनः सेट् करोति - पाठं मूलपाठं प्रति स्वैप करोति।

$ (). बटन (स्ट्रिंग) .

बटन स्थितिं पुनः सेट् करोति - पाठं कस्यापि आँकडा परिभाषितपाठस्थितौ स्वैप् करोति ।

<button class = "btn" डेटा-पूर्ण-पाठ = "समाप्त!" > ... </बटन> इति   
<लिपि> इति
  $ ( '.btn' ). बटन ( 'पूर्ण' ) .
</script> इति

विषये

सञ्चिकां डाउनलोड् कुर्वन्तु

उदाहरणम् अकॉर्डियन

collapse plugin इत्यस्य उपयोगेन वयं सरलं accordion शैली विजेट् निर्मितवन्तः:

संकुचित समूह मद # 1

Anim pariatur क्लिच reprehenderit, एनिम eiusmod उच्च जीवन accusamus टेरी रिचर्डसन विज्ञापन स्क्वीड. ३ भेड़िया चन्द्रमा officia aute, गैर cupidat स्केटबोर्ड dolor ब्रंच. खाद्य ट्रक quinoa nesciunt laborum eiusmod. ब्रंच 3 भेड़िया चंद्रमा अस्थायी, sunt aliqua डाल एक पक्षी पर यह स्क्वीड एकल-मूल कॉफी nulla assumenda shoreditch एट. निहिल अनिम keffiyeh helvetica, शिल्प बियर labore वेस एंडरसन cred nesciunt sapiente ईए proident. विज्ञापन शाकाहारी excepteur कसाई उप lomo. लेगिंग occaecat शिल्प बियर खेत-से-मेज, कच्चे डेनिम सौन्दर्य synth nesciunt आप शायद उन्हें accusamus श्रम टिकाऊ VHS के बारे में नहीं सुना है।

संकुचित समूह मद # 2

संकुचित समूह मद # 3

bootstrap-collapse.js इत्यस्य उपयोगेन

जावास्क्रिप्ट् मार्गेण सक्षमं कुर्वन्तु:

$ ( ".संकुचनम्" ). संकुचनम् () ९.

विकल्पाः

नामः	प्रकारः	मूलभूतम्‌	वर्णनम्‌
माता पिता	चयनकर्ता	असत्य	यदि चयनकर्ता तर्हि निर्दिष्टस्य मातापितृणां अधः सर्वे संकुचनीयाः तत्त्वानि बन्दं भविष्यन्ति यदा एतत् संकुचनीयं द्रव्यं दर्शितं भवति । (पारम्परिक अकॉर्डियन व्यवहार के समान)
toggle इति	बूलियन इति	सत्यम्‌	आह्वानसमये संकुचनीयं तत्त्वं टॉगलं करोति

मार्कअप

केवलं संकुचनीयस्य तत्त्वस्य नियन्त्रणं स्वयमेव नियुक्तुं केवलं एलिमेण्ट् अपि data-toggle="collapse"च एकं योजयन्तु । data-targetएट्रिब्यूट् एकं css चयनकर्तारं स्वीकुर्वति यस्मिन् data-targetसंकुचनं प्रयोक्तुं शक्नोति । collapseसंकुचनीयतत्त्वे वर्गं अवश्यं योजयन्तु । यदि भवान् इदं पूर्वनिर्धारितरूपेण उद्घाटितुम् इच्छति तर्हि अतिरिक्तवर्गं योजयन्तु in.

<बटन वर्ग = "btn btn-खतरा" डेटा-टॉगल = "पतन" डेटा-लक्ष्य = "# डेमो" >   
  सरल संकुचित
</बटन> इति
 
<div id = "demo" class = "अन्तर्गतम्" > ... </div>

शिरः उपरि ! संकुचनीयनियन्त्रणे accordion-सदृशं समूहप्रबन्धनं योजयितुं, data attribute योजयन्तु data-parent="#selector"। एतत् कार्ये द्रष्टुं डेमो पश्यन्तु।

विधियाँ

.collapse(विकल्पाः) .

भवतः सामग्रीं संकुचनीयतत्त्वरूपेण सक्रियं करोति । एकं वैकल्पिकं विकल्पं स्वीकुर्वति object.

$ ( '# मेरासंकुचित' ). संकुचति ({ ) .
  toggle : असत्यम् 
}) इति ।

.collapse('टॉगल') .

एकं संकुचनीयं तत्त्वं दर्शितं वा गुप्तं वा प्रति टॉगलं करोति ।

.collapse('दर्शयतु') .

संकुचनीयं तत्त्वं दर्शयति ।

.collapse('गोपन') .

संकुचनीयं तत्त्वं गोपयति ।

घटनाः

Bootstrap इत्यस्य collapse वर्गः collapse कार्यक्षमतायाः हुक् करणाय कतिपयानि घटनानि उजागरयति ।

घटना	वर्णनम्‌
दर्शयतु	एषा घटना तत्क्षणमेव प्रज्वलति यदा `show`दृष्टान्तविधिः आह्वयते ।
दर्शितम्	इदं घटना तदा प्रज्वलितं भवति यदा उपयोक्त्रे कृते एकः collapse एलिमेण्ट् दृश्यमानः कृतः अस्ति (css संक्रमणानां पूर्णतां प्रतीक्षते) ।
गोपयतु	`hide`विधि आहूते सद्यः एषा घटना प्रज्वलिता भवति ।
अदृष्ट	इदं घटना तदा प्रज्वलितं भवति यदा उपयोक्त्रेण एकः collapse एलिमेण्ट् निगूढः अस्ति (css संक्रमणानां पूर्णतां प्रतीक्षते) ।

$ ( '# मेरासंकुचित' ). on ( 'गुप्त' , फंक्शन () { .   
  // किमपि कुरुत...
}) इति ।

विषये

तत्त्वानां माध्यमेन चक्रं कर्तुं सामान्यं प्लगिन् । A मेरि-गो-रन् ।

सञ्चिकां डाउनलोड् कुर्वन्तु

उदाहरण हिंडोला

अधः स्लाइड् शो पश्यन्तु।

प्रथमं लघुचित्र लेबलम्

Cras justo odio, dapibus ac facilisis में, egestas eget quam. Donec id elit नॉन मी पोर्टा ग्रेविडा एट एगेट मेटस. Nullam id dolor id nibh ultrices vehicula उत id elit.

द्वितीय लघुचित्र लेबल

तृतीय लघुचित्र लेबल

‹ . › .

शिरः उपरि ! एतत् हिंडोला कार्यान्वितं कुर्वन् अस्माभिः प्रदत्तानि चित्राणि निष्कास्य स्वकीयानि चित्राणि प्रतिस्थापयन्तु ।

bootstrap-carousel.js इत्यस्य उपयोगेन

जावास्क्रिप्ट् मार्गेण आह्वानं कुर्वन्तु:

$ ( '.हिंडोला' ). हिंडोला () .

विकल्पाः

नामः	प्रकारः	मूलभूतम्‌	वर्णनम्‌
अन्तरालम्	संख्या	५०००	स्वयमेव कस्यचित् वस्तुनः सायकलीकरणस्य मध्ये विलम्बस्य समयस्य परिमाणम् ।
विराम	सूत्र	"मण्डप" इति ।	मूषकप्रविष्टे हिंडोलाया: चक्रचालनं विरामयति, मूषकपत्रे हिंडोलाया: चक्रचालनं पुनः आरभते ।

मार्कअप

पूर्वस्य अग्रिमस्य च conrols कृते Data attributes इत्यस्य उपयोगः भवति । अधः उदाहरणं मार्कअपं पश्यन्तु।

<div id = "myCarousel" वर्ग = "हिंडोला" >  
  <!-- हिंडोला द्रव्य -->
  <div class = "हिंडोला-अन्तर्गत" > 
    <div class = "सक्रिय वस्तु" > ... </div> 
    <div वर्ग = "वस्तु" > ... </div> 
    <div वर्ग = "वस्तु" > ... </div> 
  </div> इति
  <!-- हिंडोला नव -->
  <a class = "हिंडोला-नियंत्रण छोड़ा" href = "# myCarousel" data-slide = "पूर्व" > ‹ </a> इति   
  <a class = "हिंडोला-नियंत्रण अधिकार" href = "# myCarousel" डेटा-स्लाइड = "अगला" > › </a> इति   
</div> इति

विधियाँ

.हिंडोला(विकल्प) .

वैकल्पिकविकल्पैः सह हिंडोलाम् objectआरभते तथा च वस्तूनाम् माध्यमेन सायकलयानं आरभते।

$ ( '.हिंडोला' ). हिंडोला ({
  अन्तराल : 2000 
}) इति ।

.हिंडोला('चक्र') .

वामतः दक्षिणत: हिंडोलावस्तूनाम् माध्यमेन चक्रं करोति।

.हिंडोला('विराम') २.

हिंडोला वस्तुओं के माध्यम से साइकिल चलाने से रोकता है।

.हिंडोला(संख्या) .

हिंडोलाम् एकं विशेषं फ्रेम (0 आधारितं, सरणीसदृशम्) प्रति चक्रं करोति ।

.हिंडोला('पूर्व') .

पूर्ववस्तुं प्रति चक्रं करोति।

.हिंडोला('अगला') .

अग्रिम मदं प्रति चक्रं करोति।

घटनाः

बूटस्ट्रैप् इत्यस्य हिंडोलावर्गः हिंडोलाकार्यक्षमतायां हुकिंग् कर्तुं द्वौ घटनाद्वयं प्रकाशयति ।

घटना	वर्णनम्‌
च्यु	एषा घटना तत्क्षणमेव प्रज्वलति यदा `slide`दृष्टान्तविधिः आह्वयते ।
स्खलितम्	इदं घटना तदा प्रज्वलितं भवति यदा हिंडोला स्वस्य स्लाइड् संक्रमणं सम्पन्नं करोति ।

विषये

सञ्चिकां डाउनलोड् कुर्वन्तु

उदाहरण

typeahead परिणामान् दर्शयितुं अधोलिखिते क्षेत्रे टङ्कनं आरभत ।

bootstrap-typeahead.js इत्यस्य उपयोगेन

जावास्क्रिप्ट् मार्गेण typeahead आह्वयन्तु:

$ ( '.टाइपअहेड' ). typeahead () 1 .

विकल्पाः

नामः	प्रकारः	मूलभूतम्‌	वर्णनम्‌
स्रोतः	सरणी	[ ] .	विरुद्धं प्रश्नं कर्तुं दत्तांशस्रोतः।
मदा :	संख्या	८	ड्रॉप् डाउन मध्ये प्रदर्शयितुं अधिकतमं द्रव्यसङ्ख्या ।
मेलकर्ता	नियोग	केस असंवेदनशील	प्रश्नः कस्यचित् द्रव्यस्य सङ्गतिं करोति वा इति निर्धारयितुं प्रयुक्ता पद्धतिः । एकं तर्कं स्वीकुर्वति, यस्य `item`विरुद्धं प्रश्नस्य परीक्षणं कर्तव्यम्। इत्यनेन सह वर्तमानप्रश्नं अभिगच्छन्तु `this.query`। `true`यदि प्रश्नः मेलः अस्ति तर्हि एकं बूलियनं प्रत्यागच्छतु ।
sorter इति	नियोग	सटीक मिलान, केस संवेदनशील, . केस असंवेदनशील	स्वतःपूर्णपरिणामानां क्रमणं कर्तुं प्रयुक्ता पद्धतिः । एकं तर्कं `items`स्वीकुर्वति तथा च typeahead उदाहरणस्य व्याप्तिः अस्ति । वर्तमान प्रश्न को `this.query`.
हाइलाइटर	नियोग	सर्वाणि पूर्वनिर्धारितमेलनानि प्रकाशयति	स्वतःपूर्णपरिणामानां प्रकाशनार्थं प्रयुक्ता पद्धतिः। एकं तर्कं `item`स्वीकुर्वति तथा च typeahead उदाहरणस्य व्याप्तिः अस्ति । html प्रेषितव्यम् ।

मार्कअप

typeahead कार्यक्षमतायाः सह तत्त्वस्य पञ्जीकरणार्थं data attributes योजयन्तु ।

<इनपुट प्रकार = "पाठ" डेटा-प्रदान = "typeahead" >

विधियाँ

.typeahead(विकल्पाः) .

typeahead इत्यनेन सह इनपुट् आरभते ।

jQuery प्लगिन्स् भवन्तं आरभ्यतुं एकदर्जनं Bootstrap प्लगिन्स्

पोपोवर्स * .

संक्रमणानि * .

मोडल bootstrap-modal.js

मोडल के बारे में

स्थिर उदाहरण

मोडल हेडर

लाइव डेमो

मोडल शीर्षक

मोडल में पाठ

एक मोडल में पोपोवर

एक मोडल में टूलटिप्स

वैकल्पिकं स्क्रॉलबारं दर्शयितुं पाठः अतिप्रवाहितः

bootstrap-modal इत्यस्य उपयोगेन

विकल्पाः

मार्कअप

विधियाँ

.मोडल(विकल्पाः) .

.modal('टॉगल') .

.modal('दर्शितुम्') .

.मोडल('गोपन') .

घटनाः

ड्रॉपडाउन्स bootstrap-dropdown.js

ड्रॉपडाउन्स के बारे में

उदाहरणानि

bootstrap-dropdown.js इत्यस्य उपयोगेन

मार्कअप

विधियाँ

$ (). ड्रॉपडाउन () .

स्क्रॉलस्पाय bootstrap-scrollspy.js

उदाहरणं scrollspy सह navbar

@स्थूलः

@मडो

एकम्‌

द्वि

three

bootstrap-scrollspy.js इत्यस्य उपयोगेन

मार्कअप

विकल्पाः

टॉगल करने योग्य ट्याब्स bootstrap-tab.js

उदाहरण ट्याब्स्

bootstrap-tab.js इत्यस्य उपयोगेन

मार्कअप

विधियाँ

$ ().टैब

घटनाः

टूलटिप्स bootstrap-tooltip.js

Tooltips के बारे में

Tooltips इत्यस्य उदाहरणप्रयोगः

bootstrap-tooltip.js इत्यस्य उपयोगेन

विकल्पाः

मार्कअप

विधियाँ

$ ().उपकरणटिप (विकल्प) .

.tooltip('दर्शितुम्') .

.tooltip('गोपन') .

.tooltip('टॉगल') .

पोपोवर्स bootstrap-popover.js

popovers के बारे में

उदाहरणम् hover popover इति

bootstrap-popover.js इत्यस्य उपयोगेन

विकल्पाः

मार्कअप

विधियाँ

$ ().popover (विकल्प) .

.popover('दर्शन') .

.पोपोवर('गोपन') .

.popover('टॉगल') .

चेतावनी सन्देश bootstrap-alert.js

अलर्ट्स् विषये

उदाहरण सचेतना

अहो स्नैप ! भवतः त्रुटिः प्राप्ता!

bootstrap-alert.js इत्यस्य उपयोगेन

मार्कअप

विधियाँ

$ ().अलर्ट () .

.alert('बन्द करें') .

घटनाः

बटन bootstrap-button.js

विषये