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

व्यक्तिगतं वा संकलितं वा

यदि भवान् Bootstrap इत्यस्य नवीनतमं संस्करणं डाउनलोड् कृतवान् अस्ति तर्हि bootstrap.js तथा bootstrap.min.js इत्येतयोः मध्ये अस्मिन् पृष्ठे सूचीकृतानि सर्वाणि प्लगिन्स् सन्ति ।

दत्तांशगुणाः

जावास्क्रिप्ट् इत्यस्य एकां पङ्क्तिं न लिखित्वा विशुद्धतया मार्कअप एपिआइ इत्यस्य माध्यमेन सर्वाणि Bootstrap प्लगिन्स् उपयोक्तुं शक्नुवन्ति । इदं Bootstrap इत्यस्य प्रथमवर्गस्य API अस्ति तथा च प्लगिन् इत्यस्य उपयोगं कुर्वन् भवतः प्रथमः विचारः भवितुम् अर्हति ।

तत् उक्तं, केषुचित् परिस्थितिषु एतत् कार्यं निष्क्रियं कर्तुं इष्टं भवेत् । अतः, वयं `'data-api'` इत्यनेन सह नामस्थानं कृत्वा शरीरस्य नामस्थाने सर्वाणि घटनानि अनबाइण्ड् कृत्वा data attribute API इत्यस्य अक्षमीकरणस्य क्षमताम् अपि प्रदामः । एतत् एवं दृश्यते-

$ ('शरीर').off ('. डेटा-api')

वैकल्पिकरूपेण, विशिष्टं प्लगिन् लक्ष्यं कर्तुं, केवलं प्लगिन्स् नाम नामस्थानरूपेण data-api नामस्थानेन सह एतादृशं समावेशयन्तु:

$ ('शरीर').बंद ('. चेतावनी. डेटा-api')

प्रोग्रामेटिक एपीआई

वयम् अपि मन्यामहे यत् भवान् सर्वान् Bootstrap प्लगिन्स् केवलं जावास्क्रिप्ट् एपिआइ मार्गेण उपयोक्तुं समर्थः भवेत् । सर्वे सार्वजनिक एपिआइ एकाः, श्रृङ्खलायोग्याः पद्धतयः सन्ति, तथा च कार्यं कृतं संग्रहं प्रत्यागच्छन्ति ।

$ (".btn.खतरा").बटन ("टॉगल").addClass ("वसा")

सर्वैः विधिभिः वैकल्पिकविकल्पवस्तुं, एकं स्ट्रिंग् यत् विधिविशेषं लक्ष्यते, अथवा किमपि न (यत् पूर्वनिर्धारितव्यवहारेन सह प्लगिन् आरभते) स्वीकुर्वीत:

$("#myModal").modal() // पूर्वनिर्धारितों के साथ आरंभ किया गया
$("#myModal").modal({ keyboard: false }) // कोई कीबोर्ड के साथ आरंभ किया गया
$("#myModal").modal('show') // तुरंत दिखाएँ आरंभ करता है और आह्वान करता है

प्रत्येकं प्लगिन् अपि एकस्मिन् `Constructor` गुणे स्वस्य कच्चा कन्स्ट्रक्टर् उजागरयति: $.fn.popover.Constructor. यदि भवान् कञ्चन विशेषं प्लगिन् उदाहरणं प्राप्तुम् इच्छति तर्हि प्रत्यक्षतया कस्मात् तत्त्वात् पुनः प्राप्तुम् इच्छति: $('[rel=popover]').data('popover').

घटनाः

बूटस्ट्रैप् अधिकांशस्य प्लगिन् इत्यस्य अद्वितीयक्रियाणां कृते कस्टम् इवेण्ट् प्रदाति । सामान्यतया, एते अव्ययस्य भूतकालस्य च रूपेण आगच्छन्ति - यत्र अव्ययस्य (ex. show) घटनायाः आरम्भे एव ट्रिगर भवति, तथा च तस्य भूतकालस्य रूपं (ex. shown) क्रियायाः समाप्तेः समये ट्रिगर भवति

सर्वाणि अव्ययघटनानि preventDefault कार्यक्षमतां प्रदास्यन्ति । एतेन क्रियायाः आरम्भात् पूर्वं निष्पादनं निवारयितुं क्षमता प्राप्यते ।

$ ('# myModal').on (' दिखाएँ', फंक्शन (ई) {
    if (!data) return e.preventDefault() // मोडल को दिखाने से रोकता है
}) इति ।

संक्रमणानां विषये

सरलसंक्रमणप्रभावानाम् कृते, अन्येषां JS सञ्चिकानां पार्श्वे एकवारं bootstrap-transition.js इत्येतत् समावेशयन्तु । यदि भवान् संकलितं (अथवा लघुकृतं) bootstrap.js इत्यस्य उपयोगं करोति तर्हि एतत् समावेशयितुं आवश्यकता नास्ति—इदं पूर्वमेव अस्ति ।

प्रकरणानाम् उपयोगं कुर्वन्तु

संक्रमणप्लगिन् इत्यस्य कतिचन उदाहरणानि :

मोडल में स्खलन या फीकापन
ट्याब्स् बहिः फीका भवति
फीका आउट अलर्ट
स्लाइडिंग हिंडोला फलक

उदाहरणानि

मोडल्स् सुव्यवस्थिताः, परन्तु लचीलाः, न्यूनतम-आवश्यक-कार्यक्षमतायाः स्मार्ट-पूर्वनिर्धारित-सहिताः संवाद-प्रोम्प्ट् भवन्ति ।

स्थिर उदाहरण

पादलेखे शीर्षकं, शरीरं, क्रियासमूहः च सह रेण्डर्ड् मोडल् ।

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

लाइव डेमो

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

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

<-- मोडल को ट्रिगर करने के लिए बटन -->
<a href="#myModal" role="button" class="btn" data-toggle="modal">डेमो मोडल प्रारम्भ करें</a>

<-- मोडल -->
<div class="मोडल" id="myModal" tabindex="-1" भूमिका="संवाद" aria-labelledby="myModalLabel" aria-hidden="सत्य">
  <div class="मोडल-शीर्षक">
    <button type="बटन" class="बन्द" data-dismiss="मोडल" aria-hidden="true">×</बटन>
    <h3 id="myModalLabel">मोडल शीर्षक</h3>
  </div> इति
  <दिव वर्ग="मोडल-शरीर">
    <p>एकं सूक्ष्मशरीरं...</p>
  </div> इति
  <div class="मोडल-पादकम्">
    <button class="btn" data-dismiss="मोडल" aria-hidden="true">बन्दं कुरुत</button>
    <button class="btn btn-primary">परिवर्तनानि रक्षतु</button>
  </div> इति
</div> इति

प्रयोगः

डेटा विशेषताओं के माध्यम से

जावास्क्रिप्ट् लिखित्वा विना एकं मोडल् सक्रियं कुर्वन्तु। data-toggle="modal"बटन इव नियन्त्रकतत्त्वे सेट् कुर्वन्तु, एकेन सह data-target="#foo"अथवा href="#foo"टोग्ल् कर्तुं विशिष्टं मोडल् लक्ष्यं कर्तुं ।

<button type="button" data-toggle="modal" data-target="#myModal">मोडल प्रारम्भ करें</button>

जावास्क्रिप्ट् मार्गेण

myModalजावास्क्रिप्ट् इत्यस्य एकपङ्क्तौ id इत्यनेन सह मोडल् आह्वयन्तु :

$ ('# myModal').मोडल (विकल्प)

विकल्पाः

विकल्पाः data attributes अथवा JavaScript मार्गेण पारयितुं शक्यन्ते । दत्तांशविशेषतानां कृते, विकल्पनाम , इत्यत्र data-योजयन्तु data-backdrop=""।

नामः	प्रकारः	मूलभूतम्‌	वर्णनम्‌
पृष्ठभूमिः	बूलियन इति	सत्यम्‌	एकं मोडल-पृष्ठभूमितत्त्वं समावेशयति। वैकल्पिकरूपेण, `static`एकस्य पृष्ठभूमिस्य कृते निर्दिशतु यत् क्लिक् इत्यत्र मोडल् न बन्दं करोति ।
कीबोर्ड	बूलियन इति	सत्यम्‌	escape कील दबाने पर मोडल बन्द करता है
दर्शयतु	बूलियन इति	सत्यम्‌	आरम्भे मोडल दर्शयति ।
दूरस्थ	पथं	असत्य	यदि दूरस्थं url प्रदत्तं भवति तर्हि jQuery इत्यस्य पद्धतिद्वारा सामग्री लोड् भवति `load`तथा च `.modal-body`. यदि भवान् data api इत्यस्य उपयोगं करोति तर्हि भवान् वैकल्पिकरूपेण `href`दूरस्थस्रोतं निर्दिष्टुं टैग् इत्यस्य उपयोगं कर्तुं शक्नोति । अस्य उदाहरणं अधः दर्शितम् अस्ति । `<a data-toggle="modal" href="remote.html" data-target="#modal">click me</a>`

विधियाँ

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

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

$ ('# मेरामोडल').मोडल ({
  कीबोर्डः मिथ्या
}) इति ।

.modal('टॉगल') .

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

$ ('# myModal').modal ('टॉगल')

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

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

$ ('# myModal').modal (' दिखाएँ')

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

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

$ ('# myModal').modal ('छुपाएँ')

घटनाः

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

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

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

उदाहरणानि

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

एक नवबर के अन्दर

ट्याब्स् अन्तः

प्रयोगः

डेटा विशेषताओं के माध्यम से

data-toggle="dropdown"एकं ड्रॉप् डाउन् टॉग्ल् कर्तुं लिङ्क् अथवा बटन् मध्ये योजयन्तु ।

<div class="अवरोहणम्">
  <a class="dropdown-toggle" data-toggle="ड्रॉपडाउन" href="#">अवरोहण-उद्दीपक</a>
  <ul class="ड्रॉपडाउन-मेनू" भूमिका="मेनू" aria-labelledby="dLabel">
    ...
  </ul> इति
</div> इति

URLs अक्षुण्णानि स्थापयितुं, इत्यस्य data-targetस्थाने विशेषतायाः उपयोगं कुर्वन्तु href="#"।

<div class="अवरोहणम्">
  <a class="ड्रॉपडाउन-टॉग्ल" id="dLabel" role="बटन" data-toggle="ड्रॉपडाउन" डाटा-टर्गेट="#" href="/page.html">
    ड्रॉपडाउन
    <b class="caret"></b> इति
  </a> इति
  <ul class="ड्रॉपडाउन-मेनू" भूमिका="मेनू" aria-labelledby="dLabel">
    ...
  </ul> इति
</div> इति

जावास्क्रिप्ट् मार्गेण

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

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

विकल्पाः

न कश्चित्

विधियाँ

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

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

नवबार में उदाहरण

ScrollSpy प्लगइन स्क्रॉल स्थिति के आधार पर स्वचालित रूप से nav लक्ष्य अद्यतन करने के लिए है। navbar इत्यस्य अधः क्षेत्रं स्क्रॉल कृत्वा सक्रियवर्गस्य परिवर्तनं पश्यन्तु । ड्रॉप् डाउन उप आइटम्स् अपि हाइलाइट् भविष्यन्ति।

@स्थूलः

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

@मडो

Veniam marfa मूंछ स्केटबोर्ड, adipisicing fugiat velit पिचफोर्क दाढ़ी. फ्रीगन दाढ़ी aliqua cupidat mcsweeney के vero. कामदेवताट चत्वारि लोको निसि, ईए हेल्वेटिका नुल्ला कार्लेस्। टैटू cosby स्वेटर खाद्य ट्रक, mcsweeney के quis गैर freegan vinyl. लो-फि वेस् एण्डरसन +1 सार्टोरियल। कार्लेस गैर सौंदर्य व्यायाम 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.

द्वि

incididunt इको पार्क में, officia deserunt mcsweeney के proident मास्टर शुद्ध thundercats sapiente veniam. Excepteur VHS अभिजात वर्ग, proident shoreditch + 1 बायोडीजल laborum शिल्प बियर. एकल-मूल कॉफी wayfarers irure चार लोको, cupidat टेरी richardson गुरु शुद्ध. Assumenda आप शायद उन कला पार्टी फैनी पैक, टैटू नुल्ला कार्डिगन अस्थायी विज्ञापन नहीं सुना है। Proident भेड़िया nesciunt sartorial keffiyeh ईउ बान्ह मि टिकाऊ. एलिट वुल्फ voluptate, लो-फाई ईए पोर्टलैंड से पहले वे चार लोको बेच दिया। लोकावोरे एनिम नास्रुद mlkshk brooklyn nesciunt.

त्रयः

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 उल्लमको गरज बिल्लियों।

प्रयोगः

डेटा विशेषताओं के माध्यम से

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

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

जावास्क्रिप्ट् मार्गेण

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

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

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

विधियाँ

.scrollspy('ताजा') .

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

$ ('[डेटा-जासूस = "स्क्रॉल"]').each (function () {
  var $ जासूस = $ (यह).scrollspy ('ताजा')
});

विकल्पाः

विकल्पाः data attributes अथवा JavaScript मार्गेण पारयितुं शक्यन्ते । दत्तांशविशेषतानां कृते, विकल्पनाम , इत्यत्र data-योजयन्तु data-offset=""।

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

घटनाः

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

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

स्थानीयसामग्रीणां फलकद्वारा, ड्रॉपडाउन मेनूद्वारा अपि, transiton मध्ये त्वरितं, गतिशीलं ट्याब् कार्यक्षमतां योजयन्तु ।

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

खाद्य ट्रक fixie locavore, accusamus mcsweeney के marfa nulla एकल-मूल कॉफी स्क्वीड. व्यायाम +1 labore velit, ब्लॉग sartorial PBR लेगिंग अगले स्तर wes anderson कारीगर चार लोको खेत-से-मेज शिल्प बियर ट्वी. Qui फोटो बूथ लेटरप्रेस, commodo enim शिल्प बियर mlkshk aliquip जीन शॉर्ट्स ullamco विज्ञापन vinyl cillum PBR. होमो nostrud जैविक, assumenda labore सौंदर्य मैग्ना delectus mollit. केतार helvetica VHS salvia yr, वेरो मैग्ना velit sapiente labore stumptown. शाकाहारी फैनी पैक odio cillum wes anderson 8-बिट, टिकाऊ जीन शॉर्ट्स दाढ़ी ut DIY नैतिक culpa टेरी richardson biodiesel. कला पार्टी scenester stumptown, tumblr कसाई vero sint qui sapiente accusamus टैटू प्रतिध्वनि पार्क.

Etsy mixtape wayfarers, नैतिक व स ए ड र स न ट फ स पहल व क ब क ब क म क स व न क ऑर ब न क ल म र र ट फ न प क ल-फ इ फ र म-टू-टबल र ड म ड. दूत बैग gentrify pitchfork टैटू शिल्प बियर, iphone स्केटबोर्ड locavore कार्लेस etsy salvia banksy hoodie helvetica. DIY synth PBR banksy विडंबना। लेगिंग्स gentrify स्क्वीड 8-बिट cred pitchfork. विलियम्सबर्ग banh mi जो भी लस मुक्त, कार्ल्स पिचफोर्क बायोडीजल fixie etsy रेट्रो mlkshk वाइस ब्लॉग. Scenester cred भवन्तः सम्भवतः तेषां विषये न श्रुतवन्तः, vinyl craft beer blog stumptown. पिचफोर्क टिकाऊ टोफू synth chambray yr.

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

प्रयोगः

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

$ ('# myTab a').क्लिक करें (फंक्शन (ई) {
  e.preventपूर्वनिर्धारित ();
  $ (यह).tab (' दिखाएँ');
}) इति ।

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

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

मार्कअप

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

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

विधियाँ

$ ().टैब

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

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

<div class="टैब-सामग्री">
  <div class="टैब-पैन सक्रिय" id="home">...</div>
  <div class="टैब-पैन" id="प्रोफाइल">...</div>
  <div class="tab-pane" id="सन्देशाः"...</div> इति
  <div class="टैब-पैन" id="सेटिंग्स्">...</div>
</div> इति

<लिपि> इति
  $ (कार्य () { .
    $ ('# myTab एक: अंतिम').tab (' दिखाएँ');
  }) इति ।
</script> इति

घटनाः

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

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

उदाहरणानि

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

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

चत्वारि दिशः

प्रयोगः

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

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

विकल्पाः

विकल्पाः data attributes अथवा JavaScript मार्गेण पारयितुं शक्यन्ते । दत्तांशविशेषतानां कृते, विकल्पनाम , इत्यत्र data-योजयन्तु data-animation=""।

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

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

मार्कअप

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

<a href="#" rel="tooltip" title="first tooltip">मम उपरि भ्रमतु</a>

विधियाँ

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

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

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

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

$ ('# तत्व').tooltip (' दिखाएँ')

.tooltip('गोपन') .

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

$ ('# तत्व').tooltip ('छुपाएँ')

.tooltip('टॉगल') .

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

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

.tooltip('नाश करना')

कस्यचित् तत्त्वस्य टूल्टिप् गोपयति, नष्टं च करोति ।

$ ('# तत्व').tooltip ('नष्ट')

उदाहरणानि

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

स्थिर पोपोवर

चत्वारः विकल्पाः उपलभ्यन्ते : उपरि, दक्षिणं, अधः, वामं च संरेखितम् ।

Popovers इति दर्शितं कोऽपि मार्कअपः जावास्क्रिप्ट् तः dataविशेषणस्य अन्तः सामग्री च उत्पद्यते ।

लाइव डेमो

popover toggle कर्तुं क्लिक् कुर्वन्तु

प्रयोगः

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

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

विकल्पाः

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

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

मार्कअप

विधियाँ

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

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

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

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

$ ('# तत्व').popover (' दिखाएँ')

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

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

$ ('# तत्व').popover ('छुपाएँ')

.popover('टॉगल') .

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

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

.popover('नाश') .

एकस्य तत्त्वस्य पोपोवरं गोपयति, नाशयति च।

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

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

एतेन प्लगिन् इत्यनेन सर्वेषु अलर्टसन्देशेषु dismiss कार्यक्षमतां योजयन्तु ।

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

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

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

एतत् कर्म कुरु वा एतत् कुरुत

प्रयोगः

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

$ (".सचेतक").सचेतक ()

मार्कअप

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

<a class="close" data-dismiss="सचेतक" href="#">×</a>

विधियाँ

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

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

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

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

$ (".alert").alert ('बंद करें')

घटनाः

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

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

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

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

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

राज्यपूर्णः

बटन् मध्ये लोडिंग् अवस्थायाः उपयोगाय data-loading-text="Loading..." योजयन्तु ।

<button type="button" class="btn btn-primary" data-loading-text="लोडिंग्...">लोडिंग् अवस्था</button>

एकल टॉगल

एकस्मिन् बटन् मध्ये टॉग्लिंग् सक्रियीकरणाय data-toggle="button" योजयन्तु ।

<button type="button" class="btn" data-toggle="button">एकल टॉगल</button>

चेकबॉक्स

btn-group इत्यत्र चेकबॉक्स शैली टॉगलिंग् कृते data-toggle="buttons-checkbox" योजयन्तु ।

<div class="btn-समूह" data-toggle="बटन-चेकबॉक्स">
  <button type="button" class="btn">वाम</button> इति
  <button type="button" class="btn">मध्य</button> इति
  <button type="button" class="btn">दक्षिण</button>
</div> इति

रेडियो

btn-group इत्यत्र रेडियोशैली टॉगलिंग् कृते data-toggle="buttons-radio" योजयन्तु ।

<div class="btn-समूह" data-toggle="बटन-रेडियो">
  <button type="button" class="btn">वाम</button> इति
  <button type="button" class="btn">मध्य</button> इति
  <button type="button" class="btn">दक्षिण</button>
</div> इति

प्रयोगः

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

$ ('.nav-tabs').बटन ()

मार्कअप

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

विकल्पाः

न कश्चित्

विधियाँ

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

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

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

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

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

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

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

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

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

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

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

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

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

विषये

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

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

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

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

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

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

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

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

<div class="अकॉर्डियन" id="अकॉर्डियन2">
  <div class="अकॉर्डियन-समूह">
    <div class="अकॉर्डियन-शीर्षकम्">
      <a class="अकॉर्डियन-टॉग्ल" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
        संकुचित समूह मद # 1
      </a> इति
    </div> इति
    <div id="collapseOne" class="अकॉर्डियन-शरीरस्य पतनम् in">
      <div class="अकॉर्डियन-अन्तः">
        Anim pariatur क्लिच...
      </div> इति
    </div> इति
  </div> इति
  <div class="अकॉर्डियन-समूह">
    <div class="अकॉर्डियन-शीर्षकम्">
      <a class="अकॉर्डियन-टॉग्ल" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
        संकुचित समूह मद # 2
      </a> इति
    </div> इति
    <div id="collapseTwo" class="अकॉर्डियन-शरीरस्य पतनम्">
      <div class="अकॉर्डियन-अन्तः">
        Anim pariatur क्लिच...
      </div> इति
    </div> इति
  </div> इति
</div> इति
...

अकॉर्डियन मार्कअपं विना अपि भवान् प्लगिन् इत्यस्य उपयोगं कर्तुं शक्नोति । अन्यस्य तत्त्वस्य विस्तारं संकुचनं च एकं बटनं टॉगलं कुर्वन्तु ।

<बटन प्रकार="बटन" वर्ग="btn btn-खतरा" data-toggle="collapse" data-target="#demo">
  सरल संकुचित
</बटन> इति

<div id="demo" class="collapse in"> ... </div> इति

प्रयोगः

डेटा विशेषताओं के माध्यम से

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

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

जावास्क्रिप्ट् मार्गेण

सह मैन्युअल् रूपेण सक्षमं कुर्वन्तु:

$ (".collapse").collapse () .

विकल्पाः

विकल्पाः data attributes अथवा JavaScript मार्गेण पारयितुं शक्यन्ते । दत्तांशविशेषतानां कृते, विकल्पनाम , इत्यत्र data-योजयन्तु data-parent=""।

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

विधियाँ

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

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

$ ('# myCollapsible').collapse ({
  toggle: असत्यम्
}) इति ।

.collapse('टॉगल') .

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

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

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

.collapse('गोपन') .

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

घटनाः

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

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

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

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

अधोलिखितः स्लाइड् शो हिंडोला इव तत्त्वानां माध्यमेन चक्रं कर्तुं सामान्यं प्लगिन् घटकं च दर्शयति ।

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

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

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

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

‹ › .

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

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

प्रयोगः

डेटा विशेषताओं के माध्यम से

...

जावास्क्रिप्ट् मार्गेण

हिंडोला को मैन्युअल रूप से कॉल करें:

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

विकल्पाः

विकल्पाः data attributes अथवा JavaScript मार्गेण पारयितुं शक्यन्ते । दत्तांशविशेषतानां कृते, विकल्पनाम , इत्यत्र data-योजयन्तु data-interval=""।

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

विधियाँ

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

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

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

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

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

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

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

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

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

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

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

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

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

घटनाः

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

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

उदाहरण

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

<input type="पाठः" data-provide="typeahead"> इति

प्रयोगः

डेटा विशेषताओं के माध्यम से

उपरि उदाहरणे दर्शितवत् typeahead कार्यक्षमतायाः सह एलिमेण्ट् पञ्जीकरणार्थं data attributes योजयन्तु ।

जावास्क्रिप्ट् मार्गेण

typeahead इत्येतत् मैन्युअल् रूपेण आह्वयन्तु :

$ ('.typeahead').typeahead () .

विकल्पाः

विकल्पाः data attributes अथवा JavaScript मार्गेण पारयितुं शक्यन्ते । दत्तांशविशेषतानां कृते, विकल्पनाम , इत्यत्र data-योजयन्तु data-source=""।

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

विधियाँ

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

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

उदाहरण

वामभागे उपमार्गदर्शनं affix plugin इत्यस्य live demo अस्ति ।

प्रयोगः

डेटा विशेषताओं के माध्यम से

कस्मिन् अपि तत्त्वे सहजतया affix व्यवहारं योजयितुं, केवलं तस्मिन् data-spy="affix"तत्त्वे योजयन्तु यस्य विषये भवन्तः गुप्तचरं कर्तुम् इच्छन्ति । ततः कदा कस्यचित् तत्त्वस्य पिनिंग् चालू-निष्क्रान्तं कर्तव्यम् इति परिभाषितुं offsets इत्यस्य उपयोगं कुर्वन्तु ।

<div data-spy="affix" data-offset-top="२००">...</div> इति

शिरः उपरि ! भवद्भिः पिनकृतस्य तत्त्वस्य स्थितिः तस्य तत्कालीनस्य मातापितृणां व्यवहारः च प्रबन्धितव्यः । स्थितिः affix, affix-top, इत्यनेन नियन्त्रिता भवति affix-bottom| स्मर्यतां यत् यदा प्रत्ययः किकं करोति तदा सम्भाव्यतया संकुचितस्य मातापितृस्य जाँचं कुर्वन्तु यतः एतत् पृष्ठस्य सामान्यप्रवाहात् सामग्रीं निष्कासयति।

जावास्क्रिप्ट् मार्गेण

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

$ ('# नवबार').affix ()

विधियाँ

.affix('ताजगी') .

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

$ ('[डेटा-जासूस = "प्रत्यय"]').each (function () {
  $ (यह).affix('ताजगी')
});

विकल्पाः

विकल्पाः data attributes अथवा JavaScript मार्गेण पारयितुं शक्यन्ते । दत्तांशविशेषतानां कृते, विकल्पनाम , इत्यत्र data-योजयन्तु data-offset-top="200"।

नामः	प्रकारः	मूलभूतम्‌	वर्णनम्‌
offset इति	संख्या \| कार्य \| वस्तु	१०	स्क्रॉलस्य स्थितिं गणयन्ते सति स्क्रीनतः ऑफसेट् कर्तुं पिक्सेलः। यदि एकः संख्या प्रदत्ता अस्ति तर्हि उपरि वामदिशि च offset प्रयुक्तं भविष्यति । एकां दिशां श्रोतुं, अथवा बहुविधं अद्वितीयं ऑफसेट्, केवलं एकं वस्तु प्रदत्तम् `offset: { x: 10 }`. यदा भवन्तः गतिशीलरूपेण आफ्सेट् (केषाञ्चन प्रतिक्रियाशीलानाम् डिजाइनानाम् कृते उपयोगी) प्रदातुं प्रवृत्ताः सन्ति तदा कार्यस्य उपयोगं कुर्वन्तु ।

बूटस्ट्रैप् मध्ये जावास्क्रिप्ट्

व्यक्तिगतं वा संकलितं वा

दत्तांशगुणाः

प्रोग्रामेटिक एपीआई

घटनाः

संक्रमण bootstrap-transition.js

संक्रमणानां विषये

प्रकरणानाम् उपयोगं कुर्वन्तु

मोडल bootstrap-modal.js

उदाहरणानि

स्थिर उदाहरण

मोडल हेडर

लाइव डेमो

प्रयोगः

डेटा विशेषताओं के माध्यम से

जावास्क्रिप्ट् मार्गेण

विकल्पाः

विधियाँ

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

.modal('टॉगल') .

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

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

घटनाः

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

उदाहरणानि

एक नवबर के अन्दर

ट्याब्स् अन्तः

प्रयोगः

डेटा विशेषताओं के माध्यम से

जावास्क्रिप्ट् मार्गेण

विकल्पाः

विधियाँ

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

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

नवबार में उदाहरण

@स्थूलः

@मडो

एकम्‌

द्वि

त्रयः

प्रयोगः

डेटा विशेषताओं के माध्यम से

जावास्क्रिप्ट् मार्गेण

विधियाँ

.scrollspy('ताजा') .

विकल्पाः

घटनाः

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

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

प्रयोगः

मार्कअप

विधियाँ

$ ().टैब

घटनाः

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

उदाहरणानि

चत्वारि दिशः

प्रयोगः

विकल्पाः

मार्कअप

विधियाँ

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

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

.tooltip('गोपन') .

.tooltip('टॉगल') .

.tooltip('नाश करना')

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

उदाहरणानि

स्थिर पोपोवर

पोपोवर शीर्ष

पोपोवर सही

पोपोवर तल

पोपोवरः गतः

लाइव डेमो

प्रयोगः

विकल्पाः

मार्कअप

विधियाँ

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

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