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

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

मॉडेल्स

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

ड्रॉपडाउन

या साध्या प्लगइनसह बूटस्ट्रॅपमधील जवळजवळ कोणत्याही गोष्टीमध्ये ड्रॉपडाउन मेनू जोडा. बूटस्ट्रॅपमध्ये नॅव्हबार, टॅब आणि गोळ्यांमध्ये पूर्ण ड्रॉपडाउन मेनू सपोर्ट आहे.

Scrollspy

स्क्रोल स्थितीवर आधारित वर्तमान सक्रिय दुवा दर्शविण्यासाठी आपल्या नॅव्हबारमधील दुवे स्वयंचलितपणे अद्यतनित करण्यासाठी scrollspy वापरा.

टॉगल करण्यायोग्य टॅब

टॅब आणि गोळ्यांना स्थानिक सामग्रीच्या टॅब करण्यायोग्य फलकांमधून टॉगल करण्याची परवानगी देऊन त्यांना अधिक उपयुक्त बनवण्यासाठी हे प्लगइन वापरा.

टूलटिप्स

jQuery टिप्सी प्लगइनवर एक नवीन टेक, टूलटिप्स प्रतिमांवर अवलंबून नसतात—ते स्थानिक शीर्षक स्टोरेजसाठी अॅनिमेशन आणि डेटा-विशेषता यासाठी CSS3 वापरतात.

पॉपओव्हर्स *

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

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

सूचना संदेश

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

बटणे

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

संकुचित करा

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

कॅरोसेल

आपण सामग्रीचा परस्पर स्लाईडशो प्रदान करू इच्छित असलेल्या कोणत्याही सामग्रीचा एक आनंदी-गो-राउंड तयार करा.

टाईपहेड

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

संक्रमणे *

साध्या संक्रमण प्रभावांसाठी, मॉडेल्समध्ये स्लाइड करण्यासाठी किंवा अलर्ट फेड करण्यासाठी एकदा bootstrap-transition.js समाविष्ट करा.

* प्लगइनमधील अॅनिमेशनसाठी आवश्यक

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

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

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

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

स्थिर उदाहरण

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

थेट डेमो

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

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

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

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

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

पर्याय

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

मार्कअप

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

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

  1. <a class = "btn" data-toggle = "modal" href = "#myModal" > मॉडेल लाँच करा </a>
  1. <div class = "modal hide" id = "myModal" >
  2. <div class = "modal-header" >
  3. <button type = "button" class = "close" data-dismiss = "modal" > × </button>
  4. <h3> मॉडेल शीर्षलेख </h3>
  5. </div>
  6. <div वर्ग = "मॉडल-बॉडी" >
  7. <p> एक सुरेख शरीर… </p>
  8. </div>
  9. <div class = "modal-footer" >
  10. <a href = "#" class = "btn" data-dismiss = "modal" > बंद करा </a>
  11. <a href="#" class="btn btn-primary" > बदल जतन करा </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 प्लगइन स्क्रोल स्थितीवर आधारित एनएव्ही लक्ष्य स्वयंचलितपणे अद्यतनित करण्यासाठी आहे.

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

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

पद्धती

.scrollspy('रिफ्रेश')

DOM मधील घटक जोडणे किंवा काढून टाकणे याच्या संयोगाने scrollspy वापरताना, तुम्हाला याप्रमाणे रीफ्रेश पद्धत कॉल करणे आवश्यक आहे:

  1. $ ( '[डेटा-स्पाय="स्क्रोल"]' ). प्रत्येक ( कार्य () {
  2. var $spy = $ ( हे ). scrollspy ( 'रिफ्रेश' )
  3. });

पर्याय

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

कार्यक्रम

कार्यक्रम वर्णन
सक्रिय करा जेव्हा जेव्हा स्क्रोलस्पाय द्वारे नवीन आयटम सक्रिय होतो तेव्हा हा कार्यक्रम सुरू होतो.

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

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

उदाहरण टॅब

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

रॉ डेनिम तुम्ही कदाचित त्यांच्याबद्दल ऐकले नसेल जीन शॉर्ट्स ऑस्टिन. 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 a' ). क्लिक करा ( कार्य ( e ) {
  2. _ प्रतिबंधित डीफॉल्ट ();
  3. $ ( हे ). टॅब ( 'शो' );
  4. })

तुम्ही वैयक्तिक टॅब अनेक प्रकारे सक्रिय करू शकता:

  1. $ ( '#myTab a[href="#profile"]' ). टॅब ( 'शो' ); // नावानुसार टॅब निवडा
  2. $ ( '#myTab a:first' ). टॅब ( 'शो' ); // पहिला टॅब निवडा
  3. $ ( '#myTab a:last' ). टॅब ( 'शो' ); // शेवटचा टॅब निवडा
  4. $ ( '#myTab li:eq(2) a' ). टॅब ( 'शो' ); // तिसरा टॅब निवडा (0-अनुक्रमित)

मार्कअप

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

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

पद्धती

$().टॅब

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

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

कार्यक्रम

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

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

जेसन फ्रेमने लिहिलेल्या उत्कृष्ट 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 बद्दल

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

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

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

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

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


bootstrap-popover.js वापरणे

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

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

पर्याय

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

पॉपओव्हर (ms) दर्शविण्यास आणि लपविण्यास विलंब - मॅन्युअल ट्रिगर प्रकारावर लागू होत नाही

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

ऑब्जेक्ट रचना आहे:delay: { show: 500, hide: 100 }

सावधान! वैयक्तिक पॉपओव्हरसाठी पर्याय वैकल्पिकरित्या डेटा विशेषतांच्या वापराद्वारे निर्दिष्ट केले जाऊ शकतात.

मार्कअप

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

पद्धती

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

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

.popover('शो')

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

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

.popover('लपवा')

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

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

.popover('टॉगल')

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

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

अलर्ट बद्दल

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

डाउनलोड करा

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

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

पवित्र 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 वापरणे

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

  1. $ ( '.nav-टॅब' ). बटण ()

मार्कअप

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

  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>

बद्दल

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

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

* संक्रमण प्लगइन समाविष्ट करणे आवश्यक आहे.

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

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

Anim pariatur cliche reprehenderit, enim eiusmod High Life Accusamus Terry richardson Ad Squid. 3 वुल्फ मून ऑफिशिया ऑट, नॉन कपिडॅटॅट स्केटबोर्ड डोलर ब्रंच. अन्न ट्रक quinoa nesciunt laborum eiusmod. ब्रंच 3 वुल्फ मून टेम्पोर, सनट एलिक्वा त्यावर एक पक्षी ठेवतो स्क्विड सिंगल-ओरिजिन कॉफी नुल्ला असुमेन्डा शोरेडिच एट. निहिल अॅनिम केफियेह हेल्वेटिका, क्राफ्ट बिअर लेबर वेस एंडरसन क्रेड नेसियंट सेपिएन्ट ईए प्रोडेंट. अॅड व्हेगन अपवाद बुचर व्हाइस लोमो. Leggings occaecat क्राफ्ट बिअर फार्म-टू-टेबल, रॉ डेनिम एस्थेटिक सिंथ नेसियंट आपण कदाचित त्यांच्याबद्दल ऐकले नसेल.
Anim pariatur cliche reprehenderit, enim eiusmod High Life Accusamus Terry richardson Ad Squid. 3 वुल्फ मून ऑफिशिया ऑट, नॉन कपिडॅटॅट स्केटबोर्ड डोलर ब्रंच. अन्न ट्रक quinoa nesciunt laborum eiusmod. ब्रंच 3 वुल्फ मून टेम्पोर, सनट एलिक्वा त्यावर एक पक्षी ठेवतो स्क्विड सिंगल-ओरिजिन कॉफी नुल्ला असुमेन्डा शोरेडिच एट. निहिल अॅनिम केफियेह हेल्वेटिका, क्राफ्ट बिअर लेबर वेस एंडरसन क्रेड नेसियंट सेपिएन्ट ईए प्रोडेंट. अॅड व्हेगन अपवाद बुचर व्हाइस लोमो. Leggings occaecat क्राफ्ट बिअर फार्म-टू-टेबल, रॉ डेनिम एस्थेटिक सिंथ नेसियंट आपण कदाचित त्यांच्याबद्दल ऐकले नसेल.
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. })

बद्दल

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

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

उदाहरण

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


bootstrap-typeahead.js वापरणे

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

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

पर्याय

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

मार्कअप

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

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

पद्धती

.typeahead(पर्याय)

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