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

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 इत्यस्य उपयोगेन

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

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

विकल्पाः

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

मार्कअप

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

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

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

विधियाँ

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

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

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

.modal('टॉगल') .

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

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

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

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

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

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

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

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

घटनाः

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

घटना वर्णनम्‌
दर्शयतु एषा घटना तत्क्षणमेव प्रज्वलति यदा showदृष्टान्तविधिः आह्वयते ।
दर्शितम् इदं घटना तदा प्रज्वलितं भवति यदा मोडल् उपयोक्त्रे दृश्यमानं कृतम् अस्ति (css संक्रमणानां पूर्णतां प्रतीक्षते) ।
गोपयतु इदं घटना तत्क्षणमेव प्रज्वलितं भवति यदा उदाहरणविधिः hideआहूता अस्ति ।
अदृष्ट इदं घटना तदा प्रज्वलितं भवति यदा मोडल् उपयोक्त्रेण गोपनीयं समाप्तं भवति (css संक्रमणानां पूर्णतां प्रतीक्षते) ।
  1. $ ( '# मेरामोडल' ). on ( 'गुप्त' , फंक्शन () { .
  2. // किमपि कुरुत...
  3. }) इति ।

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

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

उदाहरणं scrollspy सह navbar

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

@स्थूलः

विज्ञापन लेगिंग keytar, ब्रंच आईडी कला पार्टी dolor labore. Pitchfork yr enim lo-fi पहले वे बिक चुके qui. Tumblr फार्म-टू-टेबल साइकिल अधिकार जो भी। अनिं केफियेह कार्लेस् कार्डिगन। Velit seitan mcsweeney का फोटो बूथ 3 भेड़िया चन्द्रमा irure. Cosby स्वेटर lomo जीन शॉर्ट्स, williamsburg hoodie minim 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 आह्वयन्तु:

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

मार्कअप

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

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

विधियाँ

.scrollspy('ताजा') .

DOM तः एलिमेण्ट्स् योजयितुं वा निष्कासयितुं वा सह scrollspy इत्यस्य उपयोगं कुर्वन् भवद्भिः refresh मेथड् इत्येतत् एवं आह्वयितुं आवश्यकं भविष्यति:

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

विकल्पाः

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

घटनाः

घटना वर्णनम्‌
सक्रिय करें यदा कदापि नूतनं वस्तु scrollspy द्वारा सक्रियं भवति तदा एषा घटना अग्निम् अङ्गीकुर्वति ।

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

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

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

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

कच्चा डेनिम भवन्तः सम्भवतः तेषां विषये न श्रुतवन्तः 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.


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

जावास्क्रिप्ट् मार्गेण टै��-योग्य-ट्याब्स् सक्षमीकरणं कुर्वन्तु (प्रत्येकं ट्याब् व्यक्तिगतरूपेण सक्रियीकरणस्य आवश्यकता अस्ति):

  1. $ ( '# माईटैब क' ). क्लिक करें ( फंक्शन ( ) { .
  2. . preventपूर्वनिर्धारित ();
  3. $ ( इदम् ). tab ( 'दर्शितुम्' );
  4. }) इति ।

भवान् अनेकधा व्यक्तिगत-ट्याब्स् सक्रियीकरणं कर्तुं शक्नोति:

  1. $ ( '#myTab a[href="#प्रोफाइल"]' ). tab ( 'दर्शितुम्' ); // नाम से टैब चुनें
  2. $ ( '# myTab एक: प्रथम' ). tab ( 'दर्शितुम्' ); // प्रथम टैब का चयन करें
  3. $ ( '# myTab एक: अन्तिम' ). tab ( 'दर्शितुम्' ); // अन्तिम टैब का चयन करें
  4. $ ( '# myTab li: eq (2) क' ). tab ( 'दर्शितुम्' ); // तृतीय टैब का चयन करें (0-indexed)

मार्कअप

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

  1. <ul class = "नव नव-टैब्स" >
  2. <li><a href = "#home" data-toggle = "टैब" > गृहम् </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> इति

विधियाँ

$ ().टैब

एकं ट्याब् एलिमेण्ट् तथा सामग्रीपात्रं सक्रिययति । ट्याब् मध्ये DOM मध्ये एकं पात्रं नोड् लक्ष्यं कृत्वा एकं data-targetवा एकं वा भवितव्यम् ।href

  1. <ul वर्ग = "नव नव-टैब" id = "myTab" >
  2. <li class = "सक्रिय" ><a href = "#home" > गृहम् </a></li>
  3. <li><a href = "#प्रोफाइल" > प्रोफाइल </a></li>
  4. <li><a href = "#messages" > सन्देशाः </a></li>
  5. <li><a href = "#सेटिंग्स्" > सेटिंग्स् </a></li>
  6. </ul> इति
  7.  
  8. <div class = "टैब-सामग्री" >
  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. $ ( फंक्शन () { .
  17. $ ( '# myTab एक: अन्तिम' ). tab ( 'दर्शितुम्' );
  18. }) इति ।
  19. </script> इति

घटनाः

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

Tooltips के बारे में

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

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

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

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

टाइट पैंट अग्रिम स्तर keffiyeh भवन्तः सम्भवतः तेषां विषये न श्रुतवन्तः। फोटो बूथ दाढ़ी कच्चे डेनिम लेटरप्रेस शाकाहारी दूत बैग stumptown. खेत-से-मेज seitan, mcsweeney के fixie टिकाऊ quinoa 8-बिट अमेरिकी परिधान एक टेरी richardson vinyl chambray है। दाढ़ी स्टम्पटाउन, कार्डिगन बान्ह मि लोमो थंडरकैट्स। टोफू बायोडीजल विलियम्सबर्ग मार्फा, चार लोको mcsweeney के साफ शाकाहारी chambray. एक वास्तव में विडंबना कारीगर जो भी keytar , scenester खेत-से-मेज banksy ऑस्टिन twitter संभाल freegan cred कच्चे डेनिम एकल-मूल कॉफी वायरल.


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

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

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

विकल्पाः

नामः प्रकारः मूलभूतम्‌ वर्णनम्‌
एनिमेशन बूलियन इति सत्यम्‌ टूलटिप् मध्ये css fade संक्रमणं प्रयोजयन्तु
स्थापनम् तार|कार्यम् 'उपरितन' how to position the tooltip - शीर्ष | तले | वाम | दक्षिणः
चयनकर्ता सूत्र असत्य यदि चयनकर्ता प्रदत्तः अस्ति तर्हि निर्दिष्टलक्ष्याणां कृते टूल्टिप् ऑब्जेक्ट्स् प्रत्यायिताः भविष्यन्ति ।
शीर्षक तार | नियोग '' इति । पूर्वनिर्धारित शीर्षक मान यदि `title` टैग मौजूद नहीं है
प्रवर्त्यम् सूत्र 'मण्डपः' इति । tooltip कथं प्रवर्तते - hover | फोकस | शास्त्र
विलम्बः संख्या | वस्तु

tooltip (ms) दर्शयन् गोपयन् च विलम्बः - मैनुअल् ट्रिगर प्रकारे न प्रवर्तते

यदि सङ्ख्या प्रदत्ता भवति तर्हि hide/show इति द्वयोः अपि विलम्बः प्रयुक्तः भवति

वस्तुसंरचना अस्ति : १.delay: { show: 500, hide: 100 }

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

मार्कअप

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

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

विधियाँ

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

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

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

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

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

.tooltip('गोपन') .

कस्यचित् तत्त्वस्य टूल्टिप् गोपयति ।

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

.tooltip('टॉगल') .

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

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

popovers के बारे में

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

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

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

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

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


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

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

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

विकल्पाः

नामः प्रकारः मूलभूतम्‌ वर्णनम्‌
एनिमेशन बूलियन इति सत्यम्‌ टूलटिप् मध्ये css fade संक्रमणं प्रयोजयन्तु
स्थापनम् तार|कार्यम् 'दक्षिणः' how to position the popover - शीर्ष | तले | वाम | दक्षिणः
चयनकर्ता सूत्र असत्य यदि चयनकर्ता प्रदत्तः अस्ति तर्हि tooltip objects निर्दिष्टलक्ष्यं प्रति प्रत्यायिताः भविष्यन्ति
प्रवर्त्यम् सूत्र 'मण्डपः' इति । tooltip कथं प्रवर्तते - hover | फोकस | शास्त्र
शीर्षक तार | नियोग '' इति । पूर्वनिर्धारित शीर्षक मान यदि `title` विशेषता मौजूद नहीं है
विषयः तार | नियोग '' इति । पूर्वनिर्धारित सामग्री मूल्य यदि `data-content` विशेषता उपस्थित नहीं है
विलम्बः संख्या | वस्तु

popover (ms) दर्शयन् गोपयन् च विलम्बः - मैनुअल् ट्रिगर प्रकारस्य कृते न प्रवर्तते

यदि सङ्ख्या प्रदत्ता भवति तर्हि hide/show इति द्वयोः अपि विलम्बः प्रयुक्तः भवति

वस्तुसंरचना अस्ति : १.delay: { show: 500, hide: 100 }

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

मार्कअप

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

विधियाँ

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

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

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

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

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

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

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

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

.popover('टॉगल') .

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

  1. $ ( '# तत्व' ). 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 इत्यस्य उपयोगेन

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

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

मार्कअप

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

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

विधियाँ

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

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

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

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

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

घटनाः

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

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

विषये

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

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

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

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

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

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

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

  1. $ ( '.नव-टैब्स्' ). बटन () .

मार्कअप

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

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

विधियाँ

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

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

शिरः उपरि ! data-toggleएट्रिब्यूट् इत्यस्य उपयोगेन भवान् बटन् इत्यस्य auto toggling इत्येतत् सक्षमं कर्तुं शक्नोति ।
  1. <button class = "btn" data-toggle = "बटन" > ... </बटन>

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

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

  1. <button class = "btn" data-loading-text = "सामग्री लोड कर रहा है..." > ... </button>
शिरः उपरि ! Firefox पृष्ठभारेषु अक्षमस्थितिं स्थापयति . अस्य कृते एकः कार्यपरिहारः अस्ति यत् उपयोगः करणीयः autocomplete="off".

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

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

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

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

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

विषये

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

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

* Transitions प्लगइन को शामिल करने की आवश्यकता है।

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

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

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 के बारे में नहीं सुना है।
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 के बारे में नहीं सुना है।
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 के बारे में नहीं सुना है।

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

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

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

विकल्पाः

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

मार्कअप

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

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

विधियाँ

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

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

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

.collapse('टॉगल') .

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

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

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

.collapse('गोपन') .

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

घटनाः

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

घटना वर्णनम्‌
दर्शयतु एषा घटना तत्क्षणमेव प्रज्वलति यदा showदृष्टान्तविधिः आह्वयते ।
दर्शितम् इदं घटना तदा प्रज्वलितं भवति यदा उपयोक्त्रे कृते एकः collapse एलिमेण्ट् दृश्यमानः कृतः अस्ति (css संक्रमणानां पूर्णतां प्रतीक्षते) ।
गोपयतु hideविधि आहूते सद्यः एषा घटना प्रज्वलिता भवति ।
अदृष्ट इदं घटना तदा प्रज्वलितं भवति यदा उपयोक्त्रेण एकः collapse एलिमेण्ट् निगूढः अस्ति (css संक्रमणानां पूर्णतां प्रतीक्षते) ।
  1. $ ( '# मेरासंकुचित' ). on ( 'गुप्त' , फंक्शन () { .
  2. // किमपि कुरुत...
  3. }) इति ।

विषये

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

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

उदाहरण

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


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

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

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

विकल्पाः

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

मार्कअप

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

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

विधियाँ

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

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