बूटस्ट्रॅप

बूटस्ट्रॅपसाठी जावास्क्रिप्ट

बूटस्ट्रॅपचे घटक जिवंत करा—आता १२ कस्टम jQuery प्लगइनसह.

jQuery प्लगइन्स तुम्हाला सुरुवात करण्यासाठी डझनभर बूटस्ट्रॅप प्लगइन

सावधान! सर्व जावास्क्रिप्ट प्लगइनना jQuery ची नवीनतम आवृत्ती आवश्यक आहे.

मॉडेल्स bootstrap- modal.js

मॉडेल्स बद्दल

एक सुव्यवस्थित, परंतु लवचिक, केवळ किमान आवश्यक कार्यक्षमता आणि स्मार्ट डीफॉल्टसह पारंपारिक जावास्क्रिप्ट मॉडेल प्लगइन घ्या.

फाइल डाउनलोड करा

स्थिर उदाहरण

खाली स्टॅटिकली रेंडर केलेले मॉडेल आहे.

×

मॉडेल शीर्षलेख

एक उत्तम शरीर…

बदल जतन करा बंद

थेट डेमो

खालील बटणावर क्लिक करून जावास्क्रिप्टद्वारे मॉडेल टॉगल करा. ते खाली सरकले जाईल आणि पृष्ठाच्या शीर्षस्थानी फिकट होईल.

डेमो मॉडेल लाँच करा

बूटस्ट्रॅप-मॉडल वापरणे

जावास्क्रिप्टद्वारे मॉडेलला कॉल करा:

  1. $ ( '#myModal' ). मॉडेल ( पर्याय )

पर्याय

नाव प्रकार डीफॉल्ट वर्णन
पार्श्वभूमी बुलियन खरे मॉडेल-बॅकड्रॉप घटक समाविष्ट करते
कीबोर्ड बुलियन खरे एस्केप की दाबल्यावर मॉडेल बंद करते
दाखवा बुलियन खरे आरंभ केल्यावर मॉडेल दाखवते.

मार्कअप

जावास्क्रिप्टची एक ओळ न लिहिता तुम्ही तुमच्या पेजवर सहजपणे मॉडेल्स सक्रिय करू शकता. मोडल एलिमेंट आयडीशी संबंधित data-toggle="modal"असलेल्या कंट्रोलर घटकावर फक्त सेट करा आणि क्लिक केल्यावर ते तुमचे मॉडेल लाँच करेल.data-target="#foo"href="#foo"

तसेच, तुमच्या मॉडेल उदाहरणामध्ये पर्याय जोडण्यासाठी, फक्त नियंत्रण घटकावर किंवा स्वतः मॉडेल मार्कअपवर अतिरिक्त डेटा विशेषता म्हणून त्यांचा समावेश करा.

  1. <a class = "btn" data-toggle = "modal" href = "#myModal" > मॉडेल लाँच करा </a>    
  1. <div class = "modal" id = "myModal" >  
  2.   <div class = "modal-header" > 
  3.     <a class = "close" data-dismiss = "modal" > × </a>  
  4.     <h3> मॉडेल शीर्षलेख </h3>
  5.   </div>
  6.   <div वर्ग = "मॉडल-बॉडी" > 
  7.     <p> एक सुरेख शरीर… </p>
  8.   </div>
  9.   <div class = "modal-footer" > 
  10.     <a href="#" class="btn btn-primary" > बदल जतन करा </a> _  
  11.     <a href = "#" class = "btn" > बंद करा </a>  
  12.   </div>
  13. </div>
सावधान! तुम्हाला तुमचे मॉडेल आत आणि बाहेर अॅनिमेट करायचे असल्यास .fade, घटकामध्ये फक्त एक वर्ग जोडा .modal(हे कृतीत पाहण्यासाठी डेमो पहा) आणि bootstrap-transition.js समाविष्ट करा.

पद्धती

.modal(पर्याय)

तुमची सामग्री मॉडेल म्हणून सक्रिय करते. पर्यायी पर्याय स्वीकारतो object.

  1. $ ( '#myModal' ). मॉडेल ({
  2.   कीबोर्ड : असत्य 
  3. })

.modal('टॉगल')

मॅन्युअली एक मॉडेल टॉगल करते.

  1. $ ( '#myModal' ). मॉडेल ( 'टॉगल' )

.modal('शो')

मॅन्युअली एक मॉडेल उघडते.

  1. $ ( '#myModal' ). मॉडेल ( 'शो' )

.modal('लपवा')

मॅन्युअली एक मॉडेल लपवते.

  1. $ ( '#myModal' ). मॉडेल ( 'लपवा' )

कार्यक्रम

बूटस्ट्रॅपचा मॉडेल क्लास मोडल फंक्शनॅलिटीमध्ये जोडण्यासाठी काही इव्हेंट्स उघड करतो.

कार्यक्रम वर्णन
दाखवा showजेव्हा उदाहरण पद्धत कॉल केली जाते तेव्हा हा इव्हेंट लगेच फायर होतो .
दाखवले जेव्हा मॉडेल वापरकर्त्यासाठी दृश्यमान केले जाते तेव्हा हा कार्यक्रम काढला जातो (css संक्रमण पूर्ण होण्याची प्रतीक्षा करेल).
लपवा hideजेव्हा उदाहरण पद्धत कॉल केली जाते तेव्हा हा इव्हेंट लगेच काढला जातो .
लपलेले जेव्हा मॉडेल वापरकर्त्यापासून लपविले जाणे पूर्ण केले जाते तेव्हा हा कार्यक्रम काढला जातो (css संक्रमण पूर्ण होण्याची प्रतीक्षा करेल). 
  1. $ ( '#myModal' ). वर ( 'लपलेले' , कार्य () {   
  2.   // काहीतरी कर…
  3. })

ScrollSpy bootstrap-scrollspy.js

ScrollSpy प्लगइन स्क्रोल स्थितीवर आधारित एनएव्ही लक्ष्य स्वयंचलितपणे अद्यतनित करण्यासाठी आहे.

फाइल डाउनलोड करा

scrollspy सह उदाहरण navbar

खालील क्षेत्र स्क्रोल करा आणि नेव्हिगेशन अपडेट पहा. ड्रॉपडाउन उप आयटम देखील हायलाइट केले जातील. हे करून पहा!

@फॅट

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi ते विकले जाण्यापूर्वी. Tumblr फार्म-टू-टेबल सायकल अधिकार काहीही असो. Anim keffiyeh carles cardigan. Velit seitan mcsweeney चे फोटो बूथ 3 wolf moon irure. Cosby sweater lomo jean shorts, Williamsburg hoodie minim qui तुम्ही कदाचित त्यांच्याबद्दल ऐकले नसेल आणि कार्डिगन ट्रस्ट फंड कल्पा बायोडिझेल वेस एंडरसन सौंदर्यशास्त्र. निहिल टॅटू अक्यूसमस, क्रेड आयरनी बायोडिझेल केफीयेह कारागीर उल्लामको परिणाम.

@mdo

वेनिअम मारफा मिश्या स्केटबोर्ड, अॅडिपिसिसिंग फ्यूगिएट वेलीट पिचफोर्क दाढी. फ्रीगन दाढी अलिक्वा कपिडॅटॅट मॅकस्वीनीचा वेरो. क्युपिडाट चार लोको निसी, ईए हेल्वेटिका नुल्ला कार्ल्स. टॅटू कॉस्बी स्वेटर फूड ट्रक, mcsweeney's quis non freegan vinyl. लो-फाय वेस अँडरसन +1 सारटोरियल. कार्लेस नॉन एस्थेटिक एक्सरसिटेशन quis gentrify. ब्रुकलिन अॅडिपिसिसिंग क्राफ्ट बिअर व्हाइस कीटार डेझरंट.

एक

Occaecat commodo aliqua delectus. फॅप क्राफ्ट बिअर डेझरंट स्केटबोर्ड ईए. लोमो सायकल राइट्स अॅडिपिसिसिंग बॅन मी, वेलीट ईए सन नेक्स्ट लेव्हल लोकाव्होर सिंगल-ओरिजिन कॉफी इन मॅग्ना व्हेनिअम. हाय लाइफ आयडी विनाइल, इको पार्क कॉन्सेक्वॅट क्विस अलिक्विप बॅन मी पिचफोर्क. व्हेरो व्हीएचएस हे ऍडिपिसिसिंग आहे. DIY किमान मेसेंजर बॅग कनेक्ट करा. क्रेडिट एक्स इन, शाश्वत डिलेक्टस कॉन्सेक्टुर फॅनी पॅक आयफोन.

दोन

In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.

three

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

Keytar twee ब्लॉग, culpa मेसेंजर बॅग marfa जे काही delectus अन्न ट्रक. Sapiente synth id गृहीत धरा. Locavore sed helvetica cliche irony, thundercats तुम्ही कदाचित त्यांच्याबद्दल ऐकले नसेल हूडी ग्लूटेन-फ्री lo-fi fap aliquip. टेरी रिचर्डसन प्रॉडेंट ब्रंच नेसियंट क्विस कॉस्बी स्वेटर पॅरियातूर केफियेह यूट हेल्वेटिका आर्टिसन म्हणून विकल्या जाण्यापूर्वी कामगार एलिट प्लेसॅट. कार्डिगन क्राफ्ट बिअर सीटन रेडीमेड वेलीट. व्हीएचएस चेंब्रे श्रमिक टेम्पर व्हेनिअम. अनिम मॉलिट मिनिम कमोडो उल्लाम्को गडगडाट.

bootstrap-scrollspy.js वापरणे

javascript द्वारे scrollspy ला कॉल करा:

  1. $ ( '#navbar' ). scrollspy ()

मार्कअप

तुमच्या टॉपबार नेव्हिगेशनमध्ये सहजपणे स्क्रोलस्पाय वर्तन जोडण्यासाठी, data-spy="scroll"तुम्हाला ज्या घटकाची टेहळणी करायची आहे त्यात जोडा (बहुधा हे मुख्य भाग असेल).

  1. <body data-spy = "स्क्रोल" > ... </body>
सावधान! नवबार लिंक्समध्ये निराकरण करण्यायोग्य आयडी लक्ष्य असणे आवश्यक आहे. उदाहरणार्थ, <a href="#home">home</a>डोममधील एखाद्या गोष्टीशी संबंधित असणे आवश्यक आहे जसे की <div id="home"></div>.

पर्याय

नाव प्रकार डीफॉल्ट वर्णन
ऑफसेट संख्या 10 स्क्रोलच्या स्थितीची गणना करताना वरून ऑफसेट करण्यासाठी पिक्सेल.

टॉगल करण्यायोग्य टॅब bootstrap-tab.js

हे प्लगइन स्थानिक सामग्रीद्वारे संक्रमण करण्यासाठी द्रुत, डायनॅमिक टॅब आणि गोळी कार्यक्षमता जोडते.

फाइल डाउनलोड करा

उदाहरण टॅब

लपलेल्या पॅन्समध्ये टॉगल करण्यासाठी खालील टॅबवर क्लिक करा, अगदी ड्रॉपडाउन मेनूद्वारे.

रॉ डेनिम तुम्ही कदाचित त्यांच्याबद्दल ऐकले नसेल जीन शॉर्ट्स ऑस्टिन. Nesciunt tofu stumptown aliqua, retro synth master cleanse. मिश्या क्लिच टेम्पर, विलियम्सबर्ग कार्ल्स व्हेगन हेल्वेटिका. Reprehenderit butcher retro keffiyeh dreamcatcher synth. कॉस्बी स्वेटर ईयू बान्ह मी, क्वि इरुरे टेरी रिचर्डसन माजी स्क्विड. एलिक्विप प्लेसॅट सॅल्व्हिया सिलम आयफोन. Seitan aliquip quis cardigan American apparel, butcher 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.

bootstrap-tab.js वापरणे

जावास्क्रिप्टद्वारे टॅब करण्यायोग्य टॅब सक्षम करा:

  1. $ ( '#myTab' ). टॅब ( 'शो' )

मार्कअप

तुम्ही कोणतेही जावास्क्रिप्ट न लिहिता टॅब किंवा पिल नेव्हिगेशन सक्रिय करू शकता फक्त एक घटक निर्दिष्ट करून data-toggle="tab"किंवा त्यावर.data-toggle="pill"

  1. <ul class = "nav nav-tabs" > 
  2.   <li><a href = "#home" data-toggle = "tab" > Home </a></li>  
  3.   <li><a href = "#profile" data-toggle = "tab" > प्रोफाइल </a></li>  
  4.   <li><a href = "#messages" data-toggle = "tab" > संदेश </a></li>  
  5.   <li><a href = "#settings" data-toggle = "tab" > सेटिंग्ज </a></li>  
  6. </ul>

पद्धती

$().टॅब

टॅब घटक आणि सामग्री कंटेनर सक्रिय करते. टॅबमध्ये एकतर `डेटा-लक्ष्य` किंवा डोममधील कंटेनर नोडला लक्ष्य करणारा `href` असावा.

  1. <ul class = "nav nav-tabs" > 
  2.   <li class = "active" ><a href = "#home" > घर </a></li>  
  3.   <li><a href = "#profile" > प्रोफाइल </a></li> 
  4.   <li><a href = "#messages" > संदेश </a></li> 
  5.   <li><a href = "#settings" > सेटिंग्ज </a></li> 
  6. </ul>
  7.  
  8. <div वर्ग = "टॅब-सामग्री" > 
  9.   <div class = "tab-pane active" id = "home" > ... </div>  
  10.   <div class = "tab-pane" id = "profile" > ... </div>  
  11.   <div class = "tab-pane" id = "messages" > ... </div>  
  12.   <div class = "tab-pane" id = "सेटिंग्ज" > ... </div>  
  13. </div>
  14.  
  15. <script>
  16.   $ ( कार्य () {  
  17.     $ ( '.tabs a:last' ). टॅब ( 'शो' )
  18.   })
  19. </script>

कार्यक्रम

कार्यक्रम वर्णन
दाखवा हा कार्यक्रम टॅब शोवर सुरू होतो, परंतु नवीन टॅब दाखवण्यापूर्वी. सक्रिय टॅब आणि मागील सक्रिय टॅब (उपलब्ध असल्यास) अनुक्रमे वापरा event.targetआणि लक्ष्यित करा.event.relatedTarget
दाखवले टॅब दर्शविल्यानंतर हा कार्यक्रम टॅब शोवर सुरू होतो. सक्रिय टॅब आणि मागील सक्रिय टॅब (उपलब्ध असल्यास) अनुक्रमे वापरा event.targetआणि लक्ष्यित करा.event.relatedTarget 
  1. $ ( 'a[data-toggle="tab"]' ). वर ( 'दर्शविले' , कार्य ( ई ) {   
  2.   ई _ लक्ष्य // सक्रिय टॅब
  3.   ई _ संबंधित लक्ष्य // मागील टॅब
  4. })

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

टूलटिप्स बद्दल

जेसन फ्रेमने लिहिलेल्या उत्कृष्ट jQuery.tipsy प्लगइनद्वारे प्रेरित; टूलटिप्स ही अद्ययावत आवृत्ती आहे, जी प्रतिमांवर अवलंबून नाही, अॅनिमेशनसाठी css3 आणि स्थानिक शीर्षक संचयनासाठी डेटा-विशेषता वापरतात.

फाइल डाउनलोड करा

टूलटिप वापरण्याचे उदाहरण

टूलटिप पाहण्यासाठी खालील लिंकवर फिरवा:

घट्ट पँट पुढील स्तरावर केफियेह तुम्ही कदाचित त्यांच्याबद्दल ऐकले नसेल. फोटो बूथ दाढी कच्ची डेनिम लेटरप्रेस शाकाहारी मेसेंजर बॅग स्टंपटाउन. फार्म-टू-टेबल सीटन, मॅकस्वीनीच्या फिक्सी सस्टेनेबल क्विनोआ 8-बिट अमेरिकन परिधानमध्ये टेरी रिचर्डसन विनाइल चेंब्रे आहे. दाढी स्टंपटाऊन, कार्डिगन्स बन मी लोमो थंडरकॅट्स. टोफू बायोडिझेल विलियम्सबर्ग मार्फा, चार लोको मॅकस्वेनी क्लीन्स व्हेगन चेंब्रे. एक खरोखर उपरोधिक कारागीर काहीही असो कीटार, सीनस्टर फार्म-टू-टेबल बँक्सी ऑस्टिन ट्विटर हँडल फ्रीगन क्रेड रॉ डेनिम सिंगल-ओरिजिन कॉफी व्हायरल.

bootstrap-tooltip.js वापरणे

जावास्क्रिप्टद्वारे टूलटिप ट्रिगर करा:

  1. $ ( '#उदाहरण' ). टूलटिप ( पर्याय )

पर्याय

नाव प्रकार डीफॉल्ट वर्णन
अॅनिमेशन बुलियन खरे टूलटिपवर सीएसएस फेड संक्रमण लागू करा
प्लेसमेंट स्ट्रिंग|फंक्शन 'शीर्ष' टूलटिप कसे ठेवावे - शीर्ष | तळाशी | डावीकडे | बरोबर
निवडकर्ता स्ट्रिंग खोटे निवडक प्रदान केल्यास, टूलटिप ऑब्जेक्ट्स निर्दिष्ट लक्ष्यांना सुपूर्द केले जातील.
शीर्षक स्ट्रिंग | कार्य '' `शीर्षक` टॅग उपस्थित नसल्यास डीफॉल्ट शीर्षक मूल्य
ट्रिगर स्ट्रिंग 'होव्हर' टूलटिप कसे ट्रिगर केले जाते - फिरवा | फोकस | मॅन्युअल
विलंब संख्या | वस्तू 0

टूलटिप (ms) दर्शविण्यास आणि लपविण्यास विलंब

जर नंबर दिला गेला असेल तर, लपवा/शो दोन्हीसाठी विलंब लागू केला जातो

ऑब्जेक्ट रचना आहे:delay: { show: 500, hide: 100 }
सावधान! वैयक्तिक टूलटिपसाठी पर्याय वैकल्पिकरित्या डेटा विशेषतांच्या वापराद्वारे निर्दिष्ट केले जाऊ शकतात.

मार्कअप

कार्यक्षमतेच्या कारणास्तव, टूलटिप आणि पॉपओव्हर डेटा-एपीआय निवडले आहेत. जर तुम्हाला त्यांचा वापर करायचा असेल तर फक्त निवडक पर्याय निर्दिष्ट करा.

  1. <a href = "#" rel = "tooltip" title = "पहिली टूलटिप" > माझ्यावर फिरवा </a>

पद्धती

$().टूलटिप(पर्याय)

घटक संकलनासाठी टूलटिप हँडलर संलग्न करते.

.टूलटिप('शो')

घटक टूलटिप प्रकट करते.

  1. $ ( '#element' ). टूलटिप ( 'शो' )

.टूलटिप('लपवा')

घटक टूलटिप लपवते.

  1. $ ( '#element' ). टूलटिप ( 'लपवा' )

.टूलटिप('टॉगल')

घटक टूलटिप टॉगल करते.

  1. $ ( '#element' ). टूलटिप ( 'टॉगल' )

Popovers bootstrap-popover.js

popovers बद्दल

गृहनिर्माण दुय्यम माहितीसाठी कोणत्याही घटकामध्ये iPad वरील सामग्रीचे छोटे आच्छादन जोडा.

* टूलटिप समाविष्ट करणे आवश्यक आहे

फाइल डाउनलोड करा

होव्हर पॉपओव्हरचे उदाहरण

पॉपओव्हर ट्रिगर करण्यासाठी बटणावर फिरवा.

पॉपओव्हरसाठी फिरवा

bootstrap-popover.js वापरणे

जावास्क्रिप्टद्वारे पॉपओव्हर्स सक्षम करा:

  1. $ ( '#उदाहरण' ). पॉपओव्हर ( पर्याय )

पर्याय

नाव प्रकार डीफॉल्ट वर्णन
अॅनिमेशन बुलियन खरे टूलटिपवर सीएसएस फेड संक्रमण लागू करा
प्लेसमेंट स्ट्रिंग|फंक्शन 'बरोबर' पॉपओव्हर - टॉप | तळाशी | डावीकडे | बरोबर
निवडकर्ता स्ट्रिंग खोटे जर निवडकर्ता प्रदान केला असेल, तर टूलटिप ऑब्जेक्ट्स निर्दिष्ट लक्ष्यांसाठी सुपूर्द केल्या जातील
ट्रिगर स्ट्रिंग 'होव्हर' टूलटिप कसे ट्रिगर केले जाते - फिरवा | फोकस | मॅन्युअल
शीर्षक स्ट्रिंग | कार्य '' `शीर्षक` विशेषता उपस्थित नसल्यास डीफॉल्ट शीर्षक मूल्य
सामग्री स्ट्रिंग | कार्य '' `डेटा-सामग्री` विशेषता उपस्थित नसल्यास डीफॉल्ट सामग्री मूल्य
विलंब संख्या | वस्तू 0

पॉपओव्हर (ms) दर्शविण्यास आणि लपवण्यास विलंब

जर नंबर दिला गेला असेल तर, लपवा/शो दोन्हीसाठी विलंब लागू केला जातो

ऑब्जेक्ट रचना आहे:delay: { show: 500, hide: 100 }
सावधान! वैयक्तिक पॉपओव्हरसाठी पर्याय वैकल्पिकरित्या डेटा विशेषतांच्या वापराद्वारे निर्दिष्ट केले जाऊ शकतात.

मार्कअप

कार्यक्षमतेच्या कारणास्तव, टूलटिप आणि पॉपओव्हर डेटा-एपीआय निवडले आहेत. जर तुम्ही ते वापरू इच्छित असाल तर फक्त निवडक पर्याय निर्दिष्ट करा.

पद्धती

$().पॉपओव्हर(पर्याय)

घटक संकलनासाठी पॉपओव्हर्स आरंभ करते.

.popover('शो')

घटक पॉपओव्हर प्रकट करते.

  1. $ ( '#element' ). पॉपओव्हर ( 'शो' )

.popover('लपवा')

एक घटक पॉपओव्हर लपवते.

  1. $ ( '#element' ). पॉपओव्हर ( 'लपवा' )

.popover('टॉगल')

घटक पॉपओव्हर टॉगल करते.

  1. $ ( '#element' ). पॉपओव्हर ( 'टॉगल' )

सूचना संदेश bootstrap-alert.js

अलर्ट बद्दल

अलर्ट प्लगइन अलर्टमध्ये जवळची कार्यक्षमता जोडण्यासाठी एक लहान वर्ग आहे.

डाउनलोड करा

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

अॅलर्ट प्लगइन नियमित अॅलर्ट मेसेज आणि ब्लॉक मेसेजवर काम करते.

× पवित्र guacamole! स्वत:ची उत्तम तपासणी करा, तुम्ही फार चांगले दिसत नाही.
×

अरे स्नॅप! तुम्हाला एक त्रुटी आली!

हे आणि ते बदला आणि पुन्हा प्रयत्न करा. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras Mattis consectetur purus sit amet fermentum.

ही कारवाई करा किंवा हे करा

bootstrap-alert.js वापरणे

जावास्क्रिप्टद्वारे अलर्ट डिसमिस करणे सक्षम करा:

  1. $ ( ". अलर्ट" ). इशारा ()

मार्कअप

data-dismiss="alert"अलर्ट क्लोज कार्यक्षमता स्वयंचलितपणे देण्यासाठी फक्त तुमच्या क्लोज बटणावर जोडा .

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

पद्धती

$().सूचना()

जवळच्या कार्यक्षमतेसह सर्व अलर्ट गुंडाळते. तुमच्‍या सूचना बंद केल्‍यावर अॅनिमेट करण्‍यासाठी, त्‍यांना आधीपासून लागू केलेला वर्ग .fadeआणि वर्ग आहे याची खात्री करा..in

.alert('बंद')

सूचना बंद करते.

  1. $ ( ". अलर्ट" ). इशारा ( 'बंद' )

कार्यक्रम

बूटस्ट्रॅपचा अॅलर्ट क्लास अॅलर्ट फंक्शनॅलिटीमध्ये जोडण्यासाठी काही इव्हेंट्स उघड करतो.

कार्यक्रम वर्णन
बंद closeजेव्हा उदाहरण पद्धत कॉल केली जाते तेव्हा हा इव्हेंट लगेच फायर होतो .
बंद जेव्हा इशारा बंद केला जातो तेव्हा हा कार्यक्रम काढला जातो (css संक्रमण पूर्ण होण्याची प्रतीक्षा करेल). 
  1. $ ( '#my-alert' ). bind ( 'बंद' , कार्य () {   
  2.   // काहीतरी कर…
  3. })

बटणे bootstrap-button.js

बद्दल

बटणांसह अधिक करा. कंट्रोल बटण स्टेटस किंवा टूलबार सारख्या अधिक घटकांसाठी बटणांचे गट तयार करा.

फाइल डाउनलोड करा

उदाहरण वापर

राज्ये आणि टॉगलसाठी बटणे प्लगइन वापरा.

स्टेटफुल
सिंगल टॉगल
चेकबॉक्स
रेडिओ

bootstrap-button.js वापरणे

जावास्क्रिप्टद्वारे बटणे सक्षम करा:

  1. $ ( '.tabs' ). बटण ()

मार्कअप

बटण प्लगइनसाठी डेटा विशेषता अविभाज्य आहेत. विविध मार्कअप प्रकारांसाठी खालील उदाहरण कोड पहा.

  1. <!-- एकाच बटणावर टॉगलिंग सक्रिय करण्यासाठी data-toggle="button" जोडा -->
  2. <button class = "btn" data-toggle = "button" > सिंगल टॉगल </button>  
  3.  
  4. <!-- btn-ग्रुपवर चेकबॉक्स शैली टॉगल करण्यासाठी data-toggle="buttons-checkbox" जोडा -->
  5. <div class = "btn-group" data-toggle = "buttons-checkbox" >  
  6.   <button class = "btn" > डावीकडे </button> 
  7.   <button class = "btn" > मध्य </button> 
  8.   <button class = "btn" > उजवे </button> 
  9. </div>
  10.  
  11. <!-- btn-ग्रुपवर रेडिओ शैली टॉगल करण्यासाठी data-toggle="buttons-radio" जोडा -->
  12. <div class = "btn-group" data-toggle = "buttons-radio" >  
  13.   <button class = "btn" > डावीकडे </button> 
  14.   <button class = "btn" > मध्य </button> 
  15.   <button class = "btn" > उजवे </button> 
  16. </div>

पद्धती

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

टॉगल पुश स्थिती. ते सक्रिय झाले आहे असे दिसते.

सावधान! data-toggleतुम्ही विशेषता वापरून बटणाचे ऑटो टॉगलिंग सक्षम करू शकता .
  1. <button class = "btn" data-toggle = "button" > … </button>

$().बटण('लोड करत आहे')

बटण स्थिती लोड करण्यासाठी सेट करते - बटण अक्षम करते आणि मजकूर लोड करण्यासाठी मजकूर बदलते. डेटा विशेषता वापरून लोडिंग मजकूर बटण घटकावर परिभाषित केला पाहिजे data-loading-text.

  1. <button class = "btn" data-loading-text = "सामग्री लोड करत आहे..." > ... </button>
सावधान! फायरफॉक्स संपूर्ण पृष्ठ लोडमध्ये अक्षम स्थिती कायम ठेवते . यासाठी एक उपाय वापरणे आवश्यक आहे autocomplete="off".

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

बटण स्थिती रीसेट करते - मजकूर मूळ मजकुरामध्ये बदलतो.

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

बटण स्थिती रीसेट करते - कोणत्याही डेटा परिभाषित मजकूर स्थितीत मजकूर स्वॅप करते.

  1. <button class = "btn" data-complete-text = "पूर्ण!" > ... </ बटन>   
  2. <script>
  3.   $ ( '.btn' ). बटण ( 'पूर्ण' )
  4. </script>

bootstrap-collapse.js संकुचित करा

बद्दल

अ‍ॅकॉर्डियन्स आणि नेव्हिगेशन सारख्या संकुचित घटकांसाठी बेस शैली आणि लवचिक समर्थन मिळवा.

फाइल डाउनलोड करा

एकॉर्डियनचे उदाहरण

कोलॅप्स प्लगइन वापरून, आम्ही एक साधे एकॉर्डियन शैलीचे विजेट तयार केले:

संकुचित करण्यायोग्य गट आयटम #1
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus Terry richardson Ad Squid. 3 वुल्फ मून ऑफिशिया ऑट, नॉन कपिडॅटॅट स्केटबोर्ड डोलर ब्रंच. अन्न ट्रक quinoa nesciunt laborum eiusmod. ब्रंच 3 वुल्फ मून टेम्पोर, संट एलिक्वा पुट अ बर्ड ऑन इट स्क्विड सिंगल-ओरिजिन कॉफी नुल्ला असुमेन्डा शोरेडिच एट. निहिल अॅनिम केफियेह हेल्वेटिका, क्राफ्ट बिअर लेबर वेस एंडरसन क्रेड नेसियंट सेपिएन्ट ईए प्रोडेंट. ऍड व्हेगन अपवाद बुचर व्हाइस लोमो. Leggings occaecat क्राफ्ट बिअर फार्म-टू-टेबल, रॉ डेनिम एस्थेटिक सिंथ नेसियंट आपण कदाचित त्यांच्याबद्दल ऐकले नसेल.
संकुचित करण्यायोग्य गट आयटम #2
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus Terry richardson Ad Squid. 3 वुल्फ मून ऑफिशिया ऑट, नॉन कपिडॅटॅट स्केटबोर्ड डोलर ब्रंच. अन्न ट्रक quinoa nesciunt laborum eiusmod. ब्रंच 3 वुल्फ मून टेम्पोर, संट एलिक्वा पुट अ बर्ड ऑन इट स्क्विड सिंगल-ओरिजिन कॉफी नुल्ला असुमेन्डा शोरेडिच एट. निहिल अॅनिम केफियेह हेल्वेटिका, क्राफ्ट बिअर लेबर वेस एंडरसन क्रेड नेसियंट सेपिएन्ट ईए प्रोडेंट. ऍड व्हेगन अपवाद बुचर व्हाइस लोमो. Leggings occaecat क्राफ्ट बिअर फार्म-टू-टेबल, रॉ डेनिम एस्थेटिक सिंथ नेसियंट आपण कदाचित त्यांच्याबद्दल ऐकले नसेल.
संकुचित करण्यायोग्य गट आयटम #3
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus Terry richardson Ad Squid. 3 वुल्फ मून ऑफिशिया ऑट, नॉन कपिडॅटॅट स्केटबोर्ड डोलर ब्रंच. अन्न ट्रक quinoa nesciunt laborum eiusmod. ब्रंच 3 वुल्फ मून टेम्पोर, संट एलिक्वा पुट अ बर्ड ऑन इट स्क्विड सिंगल-ओरिजिन कॉफी नुल्ला असुमेन्डा शोरेडिच एट. निहिल अॅनिम केफियेह हेल्वेटिका, क्राफ्ट बिअर लेबर वेस एंडरसन क्रेड नेसियंट सेपिएन्ट ईए प्रोडेंट. ऍड व्हेगन अपवाद बुचर व्हाइस लोमो. Leggings occaecat क्राफ्ट बिअर फार्म-टू-टेबल, रॉ डेनिम एस्थेटिक सिंथ नेसियंट आपण कदाचित त्यांच्याबद्दल ऐकले नसेल.

bootstrap-collapse.js वापरणे

जावास्क्रिप्टद्वारे सक्षम करा:

  1. $ ( ". कोलॅप्स" ). कोसळणे ()

पर्याय

नाव प्रकार डीफॉल्ट वर्णन
पालक निवडकर्ता खोटे निवडक असल्यास, जेव्हा हा संकुचित करता येणारा आयटम दर्शविला जाईल तेव्हा निर्दिष्ट पॅरेंट अंतर्गत सर्व संकुचित करण्यायोग्य घटक बंद केले जातील. (पारंपारिक एकॉर्डियन वर्तनासारखे)
टॉगल बुलियन खरे आमंत्रणावर संकुचित करण्यायोग्य घटक टॉगल करते

मार्कअप

संकुचित करण्यायोग्य घटकाचे नियंत्रण स्वयंचलितपणे नियुक्त करण्यासाठी फक्त घटकामध्ये जोडा data-toggle="collapse"आणि a . विशेषता संकुचित लागू करण्यासाठी css निवडक स्वीकारते data-target. संकुचित घटकामध्ये data-targetवर्ग जोडण्याची खात्री करा . collapseतुम्हाला ते डीफॉल्ट उघडायचे असल्यास, अतिरिक्त वर्ग जोडा in.

  1. <बटण वर्ग = "btn btn-धोका" डेटा-टॉगल = "कोलॅप्स " डेटा-लक्ष्य = "#डेमो" >   
  2.   साधे संकुचित
  3. </ बटन>
  4.  
  5. <div id = "डेमो" वर्ग = "संकुचित करा" > … </div>
सावधान! संकुचित नियंत्रणामध्ये एकॉर्डियन-सारखे गट व्यवस्थापन जोडण्यासाठी, डेटा विशेषता जोडा data-parent="#selector". हे कृतीत पाहण्यासाठी डेमोचा संदर्भ घ्या.

पद्धती

.कोलॅप्स(पर्याय)

तुमची सामग्री संकुचित करण्यायोग्य घटक म्हणून सक्रिय करते. पर्यायी पर्याय स्वीकारतो object.

  1. $ ( '#myCollapsible' ). संकुचित ({
  2.   टॉगल : खोटे 
  3. })

.कोलॅप्स('टॉगल')

दर्शविण्यासाठी किंवा लपविण्यासाठी संकुचित करण्यायोग्य घटक टॉगल करते.

.कोलॅप्स('शो')

एक संकुचित घटक दर्शविते.

.कोलॅप्स ('लपवा')

संकुचित करता येणारा घटक लपवतो.

कार्यक्रम

बूटस्ट्रॅपचा कोलॅप्स क्लास कोलॅप्स फंक्शनॅलिटीमध्ये जोडण्यासाठी काही इव्हेंट्स उघड करतो.

कार्यक्रम वर्णन
दाखवा showजेव्हा उदाहरण पद्धत कॉल केली जाते तेव्हा हा इव्हेंट लगेच फायर होतो .
दाखवले जेव्हा संकुचित घटक वापरकर्त्यासाठी दृश्यमान केला जातो तेव्हा हा कार्यक्रम काढला जातो (css संक्रमण पूर्ण होण्याची प्रतीक्षा करेल).
लपवा hideपद्धत कॉल केल्यावर हा कार्यक्रम ताबडतोब उडाला आहे.
लपलेले संकुचित घटक वापरकर्त्यापासून लपविला गेल्यावर हा कार्यक्रम काढला जातो (css संक्रमण पूर्ण होण्याची प्रतीक्षा करेल). 
  1. $ ( '#myCollapsible' ). वर ( 'लपलेले' , कार्य () {   
  2.   // काहीतरी कर…
  3. })

Typeahead bootstrap-typeahead.js

बद्दल

कोणत्याही फॉर्म मजकूर इनपुटसह त्वरीत मोहक टाइपहेड तयार करण्यासाठी मूलभूत, सहज विस्तारित प्लगइन.

फाइल डाउनलोड करा

उदाहरण

टाइपहेड परिणाम दर्शविण्यासाठी खालील फील्डमध्ये टाइप करणे सुरू करा.

bootstrap-typeahead.js वापरणे

जावास्क्रिप्टद्वारे टाइपहेडला कॉल करा:

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

पर्याय

नाव प्रकार डीफॉल्ट वर्णन
स्रोत रचना [ ] विरुद्ध क्वेरी करण्यासाठी डेटा स्रोत.
आयटम संख्या 8 ड्रॉपडाउनमध्ये प्रदर्शित करण्यासाठी आयटमची कमाल संख्या.
जुळणारा कार्य केस असंवेदनशील क्वेरी एखाद्या आयटमशी जुळते किंवा नाही हे निर्धारित करण्यासाठी वापरली जाणारी पद्धत. एकच युक्तिवाद स्वीकारतो, ज्याच्या itemविरुद्ध क्वेरीची चाचणी करायची आहे. सह वर्तमान क्वेरीमध्ये प्रवेश करा this.query. trueजर क्वेरी जुळत असेल तर बुलियन परत करा .
सॉर्टर कार्य अचूक जुळणी,
केस संवेदनशील,
केस असंवेदनशील		 स्वयंपूर्ण परिणामांची क्रमवारी लावण्यासाठी वापरली जाणारी पद्धत. एकल युक्तिवाद स्वीकारतो itemsआणि टाइपहेड उदाहरणाची व्याप्ती आहे. सह वर्तमान क्वेरीचा संदर्भ द्या this.query.
हायलाइटर कार्य सर्व डीफॉल्ट सामने हायलाइट करते स्वयंपूर्ण परिणाम हायलाइट करण्यासाठी वापरलेली पद्धत. एकल युक्तिवाद स्वीकारतो itemआणि टाइपहेड उदाहरणाची व्याप्ती आहे. html परत केले पाहिजे.

मार्कअप

टाइपहेड कार्यक्षमतेसह घटकाची नोंदणी करण्यासाठी डेटा विशेषता जोडा.

  1. <इनपुट प्रकार = "मजकूर" डेटा-प्रदान = "टाइपहेड" >

पद्धती

.typeahead(पर्याय)

टाइपहेडसह इनपुट सुरू करते.