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

Bootstrap च्या घटकांक जिवीत हाडचें-आतां 12 सानुकूल jQuery प्लगइनां सयत.

मोडल हांचो आस्पाव जाता

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

ड्रॉपडावन करतात

ह्या साद्या प्लगइनान बूटस्ट्रॅपांतल्या लागीं लागीं खंयच्याय वस्तूक ड्रॉपडावन मेनू जोडात. बूटस्ट्रॅप नवबार, टॅब, आनी गोळ्यांत चालू पुराय ड्रॉपडावन मेनू समर्थन वैशिश्ट्य करता.

स्क्रोलस्पाय हें नांव

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

टॉगल करपाक येवपी टॅब

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

साधनाच्यो टिपा

jQuery Tipsy प्लगइनाचेर एक नवो घेवप, Tooltips प्रतिमांचेर आदारीत नात-ते एनिमेशनां खातीर CSS3 वापरतात आनी थळाव्या शीर्षक सांठवण खातीर डेटा-गुणधर्म वापरतात.

पोपोवर्स * 1 .

दुय्यम म्हायती दवरपा खातीर खंयच्याय घटकाक, iPad चेर आशिल्ल्या प्रमाणें, सामुग्रीचे ल्हान आच्छादन जोडात.

* टूलटिप्स समाविष्ट करपाची गरज आसा

सावधान संदेश

सावधानताय प्लगइन हो इशाऱ्यांक लागींची कार्यक्षमताय जोडपाखातीर एक ल्हान वर्ग आसा.

बटणां घालतात

बटणां वरवीं चड करचें. नियंत्रण बटण राज्य करता वा साधनपट्टी सारकिल्या चड घटकांखातीर बटणांचे गट तयार करतात.

कडसरावचें

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

हिंडोळ

तुमकां सामुग्रीचो परस्पर संवादात्मक स्लाइडशो दिवपाक जाय आशिल्ल्या खंयच्याय सामुग्रीचो एक मेरि-गो-राउंड तयार करचो.

टायपअहेड हें नांव

खंयच्याय फॉर्म मजकूर इनपुटा वांगडा बेगीन सुंदर टायपहेड्स तयार करपाखातीर एक मुळावें, सहज विस्तारीत प्लगइन.

संक्रमणां * 1 .

साद्या संक्रमण प्रभावांखातीर, मोडलांत स्लाइड करपाक वा सावधानताय फीका करपाक bootstrap-transition.js एकदां समाविष्ट करात.

* प्लगइनांत एनिमेशन करपाक जाय

तकली वयर काडटा! सगळ्या जावास्क्रिप्ट प्लगइनांक jQuery ची नवीनतम आवृत्ती जाय.

मोडलां विशीं

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

फायल डावनलोड करात

स्थिर उदाहरण

सकयल स्थिरपणान रेंडर केल्लो मोडल आसा.

लायव्ह डेमो

सकयल दिल्ल्या बटणाचेर क्लिक करून जावास्क्रिप्ट वरवीं मोडल टॉगल करात. तो सकयल सरकतलो आनी पानाच्या वयल्या भागांतल्यान भितर फीको जातलो.

डेमो मोडल सुरू करचें

बूटस्ट्रॅप-मोडल वापरप

जावास्क्रिप्ट वरवीं मोडलाक कॉल करात:

  1. $ ( '#मायमोडल' ). मोडल ( पर्याय ) .

पर्याय आसात

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

मार्कअप करप

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

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

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

पद्दती

.मोडल(पर्याय) .

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

  1. $ ( '#मायमोडल' ). मोडल ({ 1).
  2. कीबोर्ड : खोटें
  3. }) हें .

.मोडल('टॉगल') .

हाताळणीन एक मोडल टॉगल करता.

  1. $ ( '#मायमोडल' ). मोडल ( 'टॉगल' ) .

.मोडल('दाखोवचें') .

हाताळणीन एक मोडल उगडटा.

  1. $ ( '#मायमोडल' ). मोडल ( 'दाखोवप' ) .

.मोडल('लिपोवप') .

हाताळणीन एक मोडल लिपयता.

  1. $ ( '#मायमोडल' ). मोडल ( 'लिपोवप' ) .

घडणुको

बूटस्ट्रॅपाचो मोडल वर्ग मोडल कार्यक्षमतायांत हुक करपाखातीर कांय घडणुको उक्ती करता.

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

ScrollSpy प्लगइन स्क्रोल स्थितीचेर आदारीत आपोआप nav लक्ष्य अद्ययावत करपा खातीर आसा.

फायल डावनलोड करात

स्क्रोलस्पाय आशिल्लें उदाहरण नवबार

सकयल दिल्लो वाठार स्क्रोल करात आनी नेव्हिगेशन अपडेट पळयात. तशेंच ड्रॉपडावन उप आयटम हायलाइट करतले. करून पळयात!

@चरबी

जाहिरात लेगिंग keytar, ब्रंच आयडी कला पार्टी dolor laboure. पिचफोर्क yr enim लो-फाय ते विकून सोंपचे पयलीं qui. टम्बलर फार्म-टू-टेबल सायकल हक्क कितेंय आसूं. अनिम केफियेह कार्लेस कार्डिगन. Velit seitan mcsweeney च्या फोटो बूथ 3 वाग चंद्र irure. Cosby स्वेटर लोमो जीन शॉर्ट्स, विल्यम्सबर्ग हुडी मिनिम qui तुमी घडये तांचे विशीं आयकूं नात एट कार्डिगन ट्रस्ट फंड culpa बायोडीझेल wes anderson सौंदर्यशास्त्र. निहिल गोंदलेले accusamus, cred विडंबना बायोडीझेल keffiyeh कारागीर ullamco consequat.

@mdo हांणी केला

वेनियम मार्फा मिश्यो स्केटबोर्ड, adipisicing fugiat velit पिचफोर्क दाढ़ी. फ्रीगन दाढी aliqua cupidatat mcsweeney च्या vero. कामदेवताट चार लोको निसी, ईए हेल्व्हेटिका नुल्ला कार्लेस. गोंदण केल्लो कॉस्बी स्वेटर फूड ट्रक, mcsweeney's quis नॉन फ्रीगन विनाइल. लो-फाय वेस अँडरसन +1 सार्टोरियल. कार्लेस बिगर सौंदर्य व्यायाम quis gentrify. ब्रुकलीन adipisicing क्राफ्ट बियर वाइस keytar deserunt.

एक

ओकेकॅट कोमोडो अॅलिक्वा डेलेक्टस. फॅप क्राफ्ट बियर deserunt स्केटबोर्ड ईए. लोमो सायकल हक्क adipisicing बान्ह मी, velit ea sunt फुडले पातळे locavore एकल-मूल कॉफी in magna veniam. उच्च जीवन आयडी विनाइल, इको पार्क consequat quis aliquip बान्ह मी पिचफोर्क. वेरो व्हीएचएस एस्ट एडिपिसिसिंग. Consectetur nisi DIY किमान संदेशवाहक बॅग. Cred ex in, टिकावू delectus consectetur फॅनी पॅक आयफोन.

दोन

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.

केतार ट्वी ब्लॉग, कुलपा संदेशवाहक बॅग मार्फा कितेंय डिलेक्टस खाद्य ट्रक. सॅपिएंटे सिंथ आयडी अॅसुमेंडा. Locavore sed helvetica cliche विडंबना, थंडरकॅट्स तुमी घडये तांचे विशीं आयकूं नात consequat hoodie ग्लुटेन-मुक्त लो-फाय fap aliquip. Labore एलिट placeat ते विकले पयलीं, टेरी रिचर्डसन proident ब्रंच nesciunt quis cosby स्वेटर pariatur keffiyeh ut helvetica कारागीर. कार्डिगन क्राफ्ट बियर seitan रेडीमेड velit. व्हीएचएस चॅम्ब्रे लाबोरिस टेम्पोर व्हेनिअम. एनिम मोलिट मिनिमा कोमोडो उल्लमको थंडरकॅट्स.


bootstrap-scrollspy.js वापरप

जावास्क्रिप्ट वरवीं स्क्रोलस्पाय कॉल करात:

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

मार्कअप करप

तुमच्या टॉपबार नेव्हिगेशनांत स्क्रोलस्पाय वर्तन सहज जोडपाक, फकत data-spy="scroll"तुमकां गुप्तचर करपाक जाय आशिल्ल्या घटकांत जोडात (चड करून हें कुडीचें आसतलें).

  1. <body data-spy = "स्क्रॉल करचें" > ... </body>
तकली वयर काडटा! नवबार दुव्यांक सोडोवपाक येवपी id लक्ष्य आसपाक जाय. देखीक, a <a href="#home">home</a>सारके डोमांतल्या कितें तरी कडेन जुळपाक जाय <div id="home"></div>.

पद्दती

.scrollspy('ताजें करचें') .

DOM वयल्यान घटक जोडपाक वा काडपा वांगडा scrollspy वापरतना, तुमकां रिफ्रेश पद्दत अशे तरेन कॉल करची पडटली:

  1. $ ( '[डेटा-गुप्तचर="स्क्रॉल"]' ). प्रत्येक ( कार्य () { .
  2. var $ गुप्तचर = $ ( हें ). scrollspy ( 'ताजें करचें' ) .
  3. });

पर्याय आसात

नांव प्रकार डिफॉल्ट वर्णन
ऑफसेट करप आंकडो १० हें नांव स्क्रोलाची सुवात मेजतना वयल्यान ऑफसेट करपाक पिक्सेल.

घडणुको

प्रसंग वर्णन
सक्रिय करप जेन्ना जेन्ना स्क्रोलस्पाय कडल्यान नवी वस्त सक्रिय जाता तेन्ना ही घडणूक फायर जाता.

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

फायल डावनलोड करात

उदाहरण टॅब

ड्रॉपडावन मेनू वरवीं लेगीत, लिपयल्ल्या फलकां मदीं टॉगल करपाक सकयल दिल्ल्या टॅबांचेर क्लिक करात.

कच्चो डेनिम तुमी घडये तांचे विशीं आयकूं नातल्ले जीन शॉर्ट्स ऑस्टिन. नेस्सिउंट टोफू स्टंपटाउन एलिक्वा, रेट्रो सिंथ मास्टर क्लींज. मिश्यो क्लिशी टेम्पोर, विल्यम्सबर्ग कार्ल्स वेगन हेल्व्हेटिका. Reprehenderit कसाई रेट्रो केफीयेह ड्रीमकैचर सिंथ. कॉस्बी स्वेटर ईयू बान्ह मी, क्यूई इरुरे टेरी रिचर्डसन पूर्व स्क्वीड. Aliquip placeat साल्विया सिलम आयफोन. 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.


bootstrap-tab.js वापरप

जावास्क्रिप्ट वरवीं टॅब करपाक येवपी टॅब सक्षम करात (दरेक टॅब वैयक्तीकपणान सक्रिय करपाची गरज आसा):

  1. $ ( '#मायटॅब एक' ). क्लिक ( फंक्शन ( ) { .
  2. . आडावपाक पूर्वनिर्धारीत ();
  3. $ ( हें ). tab ( 'दाखोवचें' );
  4. }) हें .

तुमी जायत्या तरांनी वैयक्तीक टॅब सक्रिय करूंक शकतात:

  1. $ ( '#मायटॅब एक [href="#प्रोफायल"]' ). tab ( 'दाखोवचें' ); // नांवा प्रमाणें टॅब निवडात
  2. $ ( '#मायटॅब एक:पयलें' ). tab ( 'दाखोवचें' ); // पयलो टॅब निवडात
  3. $ ( '#मायटॅब एक:निमाणें' ). tab ( 'दाखोवचें' ); // निमाणो टॅब निवडात
  4. $ ( '# मायटॅब ली: समीकरण (2) एक' ). tab ( 'दाखोवचें' ); // तिसरो टॅब निवडा (0-अनुक्रमित)

मार्कअप करप

data-toggle="tab"तुमी फकत स्पश्ट करून वा data-toggle="pill"घटकाचेर कसलीच जावास्क्रिप्ट बरयनासतना टॅब वा पिल नेव्हिगेशन सक्रिय करूंक शकतात . navटॅबांत and nav-tabsवर्ग जोडल्यार ulबूटस्ट्रॅप टॅब स्टायलिंग लागू जातली.

  1. <ul वर्ग = "nav nav-टॅब" >
  2. <li><a href = "#घर" डेटा-टॉगल = "टॅब" > मुखेल </a></li>
  3. <li><a href = "#प्रोफायल" data-toggle = "टॅब" > प्रोफायल </a></li>
  4. <li><a href = "#messages" data-toggle = "टॅब" > संदेश </a></li>
  5. <li><a href = "#सेटिंग्ज" data-toggle = "टॅब" > मांडावळी </a></li>
  6. </ul> हें नांव

पद्दती

$ ().टॅब

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

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

घडणुको

प्रसंग वर्णन
दाखोवचें ही इव्हेंट टॅब शोचेर फायर करता, पूण नवो टॅब दाखोवचे पयलीं. सक्रिय टॅब आनी आदलो सक्रिय टॅब (उपलब्ध आसल्यार) अनुक्रमान लक्ष्य करपाक event.targetआनी वापरात .event.relatedTarget
दाखयलां टॅब दाखयल्या उपरांत ही घडणूक टॅब शोचेर फायर जाता. सक्रिय टॅब आनी आदलो सक्रिय टॅब (उपलब्ध आसल्यार) अनुक्रमान लक्ष्य करपाक event.targetआनी वापरात .event.relatedTarget
  1. $ ( 'एक [डेटा-टॉगल = "टॅब"]' ). on ( 'दाखयलें' , फंक्शन ( ) { .
  2. . लक्ष्य // सक्रिय केला टॅब
  3. . relatedTarget // फाटलो टॅब
  4. }) हें .

टूलटिप्स विशीं

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

फायल डावनलोड करात

Tooltips चो उदाहरण वापर

साधनसुचोवण्यो पळोवपाक सकयल दिल्ल्या दुव्यांचेर होवर करात:

टाइट पॅंट नेक्स्ट लेव्हल केफीयेह तुमी घडये तांचे विशीं आयकूं नात. फोटो बूथ दाढ़ी कच्चे डेनिम लेटरप्रेस शाकाहारी दूत बॅग स्टंपटाउन. फार्म-टू-टेबल seitan, mcsweeney च्या fixie टिकावू क्विनोआ 8-बिट अमेरिकन परिधानांत एक टेरी रिचर्डसन vinyl chambray आसा. दाढी स्टंपटाउन, कार्डिगन बान्ह मी लोमो थंडरकॅट्स. टोफू बायोडीझेल विल्यम्सबर्ग मार्फा, चार लोको mcsweeney च्या निवळ वेगन chambray. एक खरोच विडंबनात्मक कारागीर whatever keytar , scenester शेत-ते-मेज banksy ऑस्टिन ट्विटर हाताळणी freegan cred कच्चो डेनिम एकल-मूल कॉफी व्हायरल.


bootstrap-tooltip.js वापरून

जावास्क्रिप्ट वरवीं टूलटिप ट्रिगर करात:

  1. $ ( '# उदाहरण' ). साधनटिप ( पर्याय ) .

पर्याय आसात

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

टूलटिप दाखोवपाक आनी लिपोवपाक विलंब (ms) - हाताळणी ट्रिगर प्रकाराक लागू जायना

क्रमांक पुरवण केल्यार, लिपोवप/दाखोवप ह्या दोनूय गजालींक विलंब लागू जाता

वस्तूची रचणूक अशी आसा: १.delay: { show: 500, hide: 100 }

तकली वयर काडटा! वैयक्तीक साधन टिपां खातीर पर्याय पर्यायीपणान डेटा गुणधर्मांच्या वापरा वरवीं निर्देशीत करूंक शकतात.

मार्कअप करप

कार्यक्षमताय कारणांक लागून, Tooltip आनी Popover data-apis ऑप्ट इन आसात.तुमकां त्यो वापरपाक जाय जाल्यार फकत निवडक पर्याय निर्देशीत करात.

  1. <a href = "#" rel = "साधन टिप" title = "पयली साधन टिप" > म्हजेर होवर करात </a>

पद्दती

$ ().साधन टिप (पर्याय)

घटक संग्रहाक टूलटिप हॅन्डलर जोडटा.

.tooltip('दाखोवचें') .

एका घटकाची टूलटिप उक्ती करता.

  1. $ ( '# घटक' ). tooltip ( 'दाखोवचें' ) .

.tooltip('लिपोवप') .

घटकाची टूलटिप लिपयता.

  1. $ ( '# घटक' ). tooltip ( 'लिपोवप' ) .

.tooltip('टॉगल') .

घटकाचो टूलटिप टॉगल करता.

  1. $ ( '# घटक' ). साधनटिप ( 'टॉगल' ) .

पोपोव्हरां विशीं

दुय्यम म्हायती दवरपा खातीर खंयच्याय घटकाक, iPad चेर आशिल्ल्या प्रमाणें, सामुग्रीचे ल्हान आच्छादन जोडात.

* टूलटिप समाविष्ट करपाची गरज आसा

फायल डावनलोड करात

उदाहरण होवर पोपोवर

पॉपओवर ट्रिगर करपाक बटणाचेर होवर करात.


bootstrap-popover.js वापरप

जावास्क्रिप्ट वरवीं पॉपओव्हर सक्षम करात:

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

पर्याय आसात

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

पॉपओव्हर दाखोवपाक आनी लिपोवपाक कळाव (ms) - हाताळणी ट्रिगर प्रकाराक लागू जायना

क्रमांक पुरवण केल्यार, लिपोवप/दाखोवप ह्या दोनूय गजालींक विलंब लागू जाता

वस्तूची रचणूक अशी आसा: १.delay: { show: 500, hide: 100 }

तकली वयर काडटा! वैयक्तीक पॉपओव्हरां खातीर पर्याय पर्यायीपणान डेटा गुणधर्मांच्या वापरा वरवीं निर्देशीत करूंक शकतात.

मार्कअप करप

कार्यक्षमताय कारणांक लागून, Tooltip आनी Popover data-apis ऑप्ट इन आसात.तुमकां त्यो वापरपाक जाय जाल्यार फकत निवडक पर्याय निर्देशीत करात.

पद्दती

$ ().popover (पर्याय) 1.5.

घटक संग्रहाखातीर पोपोव्हर्स आरंभ करता.

.popover('दाखोवचें') .

एक तत्व पॉपओवर उक्तो करता.

  1. $ ( '# घटक' ). popover ( 'दाखोवप' ) .

.popover('लिपोवप') .

एक तत्व पॉपओवर लिपयता.

  1. $ ( '# घटक' ). पोपोव्हर ( 'लिपोवप' ) .

.popover('टॉगल') .

एक तत्व पॉपओवर टॉगल करता.

  1. $ ( '# घटक' ). पोपोव्हर ( 'टॉगल' ) .

सावधानताये विशीं

सावधानताय प्लगइन हो इशाऱ्यांक लागींची कार्यक्षमताय जोडपाखातीर एक ल्हान वर्ग आसा.

डावनलोड करचें

देखीक सावधानताय

सावधानताय प्लगइन नेमान सावधानताय संदेशांचेर काम करता, आनी संदेश आडायता.

पवित्र ग्वाकामोल! बेस्ट चेक यो सेल्फ, तूं चड बरो दिसना.

अरे स्नॅप! तुमकां एक त्रुटी मेळ्ळी!

हें आनी तें बदलून परतून यत्न करात. डुइस मोलिस, एस्ट नॉन कोमोडो लक्टस, निसी एराट पोर्टिटोर लिगुला, एगेट लॅसिनिया ओडियो सेम नेक एलिट. क्रास मॅटीस कॉन्सेक्टेतुर पुरस सिट अमेट फर्मेन्टम.

ही कृती करात वा अशें करचें


bootstrap-alert.js वापरून

जावास्क्रिप्ट वरवीं इशारो काडून उडोवप सक्षम करात:

  1. $ ( ".सचेतक" ). सावधान करप () .

मार्कअप करप

फकत data-dismiss="alert"तुमच्या बंद बटणांत जोडात आपोआप एक इशारो बंद कार्यक्षमताय दिवपाक.

  1. <a class = "बंद करचें" data-dismiss = "अलर्ट" href = "#" > × </a> हें नांव

पद्दती

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

सगळ्यो सावधानताय लागींच्या कार्यक्षमतेन गुठलायता. बंद आसतना तुमचीं सावधानताय भायर एनिमेट करपाक, तांकां पयलींच लागू केल्लो .fadeआनी वर्ग आसा हाची खात्री करात..in

.alert('बंद करचें') .

एक इशारो बंद करता.

  1. $ ( ".सचेतक" ). alert ( 'बंद करचें' ) .

घडणुको

Bootstrap चो सावधान वर्ग सावधान कार्यक्षमतेक हुक करपा खातीर कांय घडणुको उक्ती करता.

प्रसंग वर्णन
धांपप closeदृष्टांत पद्दत कॉल करतना ही घडणूक रोखडीच फायर जाता .
बंद केलें ही घडणूक इशारो बंद जातकच फायर जाता (css संक्रमणां पुराय जावपाची वाट पळयतले).
  1. $ ( '#म्हजी-अलर्ट' ). bind ( 'बंद' , फंक्शन () {
  2. // कितें तरी करचें...
  3. }) हें .

संबंदीं

बटणां वरवीं चड करचें. नियंत्रण बटण राज्य करता वा साधनपट्टी सारकिल्या चड घटकांखातीर बटणांचे गट तयार करतात.

फायल डावनलोड करात

उदाहरण वापरता

राज्यां आनी टॉगलां खातीर बटणां प्लगइन वापरात.

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

bootstrap-button.js वापरून

जावास्क्रिप्ट वरवीं बटणां सक्षम करात:

  1. $ ( '.नाव-टॅब' ). बटण () 1.1.

मार्कअप करप

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

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

पद्दती

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

पुश स्टेट टॉगल करता. बटणाक तें सक्रिय केलां अशें दिसप दिता.

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

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

बटण स्थिती लोड करपाक सेट करता - बटण अक्षम करता आनी मजकूर लोड करपाक मजकूर स्वॅप करता. डेटा गुणधर्म वापरून बटण घटकाचेर मजकूर लोड करपाची व्याख्या करची data-loading-text.

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

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

बटण स्थिती रिसेट करता - मजकूर मूळ मजकूरांत स्वॅप करता.

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

बटण स्थिती रिसेट करता - खंयच्याय डेटा व्याख्या केल्ल्या मजकूर स्थितींत मजकूर स्वॅप करता.

  1. <बटण वर्ग = "btn" डेटा-पूर्ण-मजकूर = "समाप्त!" > ... </बटण> हें नांव
  2. <लिपी> हें नांव
  3. $ ( '.बीटीएन' ). बटण ( 'पूर्ण' ) .
  4. </script> हें नांव

संबंदीं

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

फायल डावनलोड करात

* संक्रमण प्लगइन समाविष्ट करपाची गरज आसा.

देखीक अकॉर्डियन

संकुचीत प्लगइन वापरून, आमी एक सादें अकॉर्डियन शैली विजेट तयार केलें:

Anim pariatur क्लिच reprehenderit, एनिम eiusmod उच्च जीवन accusamus टेरी रिचर्डसन एड स्क्वीड. 3 वाग चंद्र officia aute, गैर cupidat स्केटबोर्ड dolor ब्रंच. खाद्य ट्रक क्विनोआ nesciunt laborum eiusmod. ब्रंच 3 वाग चंद्र टेम्पोर, sunt aliqua ताचेर एक सुकणें घालें स्क्वीड एकल-मूल कॉफी nulla assumenda shoreditch इ. निहिल अनिम केफीयेह हेल्वेटिका, क्राफ्ट बियर लाबर वेस अँडरसन cred nesciunt sapiente ea proident. जाहिरात वेगन एक्सेप्टर कसाई उप लोमो. लेगिंग्स occaecat क्राफ्ट बियर फार्म-टू-टेबल, कच्चे डेनिम सौंदर्य सिंथ nesciunt तुमी घडये तांचे विशीं आयकूं नात accusamus labore टिकावू व्हीएचएस.
Anim pariatur क्लिच reprehenderit, एनिम eiusmod उच्च जीवन accusamus टेरी रिचर्डसन एड स्क्वीड. 3 वाग चंद्र officia aute, गैर cupidat स्केटबोर्ड dolor ब्रंच. खाद्य ट्रक क्विनोआ nesciunt laborum eiusmod. ब्रंच 3 वाग चंद्र टेम्पोर, sunt aliqua ताचेर एक सुकणें घालें स्क्वीड एकल-मूल कॉफी nulla assumenda shoreditch इ. निहिल अनिम केफीयेह हेल्वेटिका, क्राफ्ट बियर लाबर वेस अँडरसन cred nesciunt sapiente ea proident. जाहिरात वेगन एक्सेप्टर कसाई उप लोमो. लेगिंग्स occaecat क्राफ्ट बियर फार्म-टू-टेबल, कच्चे डेनिम सौंदर्य सिंथ nesciunt तुमी घडये तांचे विशीं आयकूं नात accusamus labore टिकावू व्हीएचएस.
Anim pariatur क्लिच reprehenderit, एनिम eiusmod उच्च जीवन accusamus टेरी रिचर्डसन एड स्क्वीड. 3 वाग चंद्र officia aute, गैर cupidat स्केटबोर्ड dolor ब्रंच. खाद्य ट्रक क्विनोआ nesciunt laborum eiusmod. ब्रंच 3 वाग चंद्र टेम्पोर, sunt aliqua ताचेर एक सुकणें घालें स्क्वीड एकल-मूल कॉफी nulla assumenda shoreditch इ. निहिल अनिम केफीयेह हेल्वेटिका, क्राफ्ट बियर लाबर वेस अँडरसन cred nesciunt sapiente ea proident. जाहिरात वेगन एक्सेप्टर कसाई उप लोमो. लेगिंग्स occaecat क्राफ्ट बियर फार्म-टू-टेबल, कच्चे डेनिम सौंदर्य सिंथ nesciunt तुमी घडये तांचे विशीं आयकूं नात accusamus labore टिकावू व्हीएचएस.

bootstrap-collapse.js वापरप

जावास्क्रिप्ट वरवीं सक्षम करात:

  1. $ ( ".कोळप" ). कोसळप () .

पर्याय आसात

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

मार्कअप करप

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

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

पद्दती

.collapse(पर्याय) .

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

  1. $ ( '#माझें संकुचीत करपाक येता' ). कोसळप ({
  2. toggle : खोटें आसा
  3. }) हें .

.collapse('टॉगल') .

दाखोवपाक वा लिपोवन दवरपाक संकुचीत करपाक येवपी घटक टॉगल करता.

.collapse('दाखोवचें') .

संकुचीत करपाक येवपी घटक दाखयता.

.collapse('लिपोवप') .

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

घडणुको

बूटस्ट्रॅपाचो कोसळपाचो वर्ग कोळसो कार्यक्षमतेक हुक करपाखातीर कांय घडणुको उक्ती करता.

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

संबंदीं

खंयच्याय फॉर्म मजकूर इनपुटा वांगडा बेगीन सुंदर टायपहेड्स तयार करपाखातीर एक मुळावें, सहज विस्तारीत प्लगइन.

फायल डावनलोड करात

उदारण

typeahead परिणाम दाखोवपाक सकयल दिल्ल्या क्षेत्रांत टायप करपाक सुरवात करात.


bootstrap-typeahead.js वापरून

जावास्क्रिप्ट वरवीं टायपहेड कॉल करात:

  1. $ ( '.टायपहेड' ). टायपहेड () 1.1.

पर्याय आसात

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

मार्कअप करप

typeahead कार्यक्षमताय आशिल्ल्या घटकाची नोंदणी करपाक डेटा गुणधर्म जोडात.

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

पद्दती

.typeahead(पर्याय) .

टायपहेड आशिल्ल्या इनपुटाक आरंभ करता.