बूटस्ट्रैप 4 संक्षिप्त करें

मूल बंधनेवाला

जब आप बड़ी मात्रा में सामग्री को छिपाना और दिखाना चाहते हैं तो Collapsibles उपयोगी होते हैं:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

उदाहरण

<button data-toggle="collapse" data-target="#demo">Collapsible</button>

<div id="demo" class="collapse">
Lorem ipsum dolor text....
</div>

उदाहरण समझाया गया

वर्ग एक बंधनेवाला तत्व इंगित करता है ( .collapseहमारे उदाहरण में एक <div>); यह वह सामग्री है जो एक बटन के एक क्लिक के साथ दिखाई या छिपी होगी।

संक्षिप्त करने योग्य सामग्री को नियंत्रित करने (दिखाने/छिपाने) के लिए, data-toggle="collapse"विशेषता को <a> या <button> तत्व में जोड़ें। फिर data-target="#id"बटन को संक्षिप्त करने योग्य सामग्री (<div id="demo">) से जोड़ने के लिए विशेषता जोड़ें।

नोट: <a> तत्वों के लिए, आप hrefविशेषता के बजाय विशेषता का उपयोग कर सकते हैं data-target :

उदाहरण

<a href="#demo" data-toggle="collapse">Collapsible</a>

<div id="demo" class="collapse">
Lorem ipsum dolor text....
</div>

डिफ़ॉल्ट रूप से, संक्षिप्त करने योग्य सामग्री छिपी हुई है। हालांकि, आप .showसामग्री को डिफ़ॉल्ट रूप से दिखाने के लिए कक्षा जोड़ सकते हैं:

उदाहरण

<div id="demo" class="collapse show">
Lorem ipsum dolor text....
</div>

अकॉर्डियन

बंधनेवाला समूह आइटम #1

दर्द अपने आप में महत्वपूर्ण है, लेकिन वजन बढ़ने की प्रक्रिया से दर्द बढ़ जाता है, लेकिन मैं इसे काटने का समय देता हूं ताकि मैं कुछ महान काम और दर्द कर सकूं। ताकि अधिकांश भाग के लिए, हम में से कोई भी इससे उद्देश्यों का लाभ उठाने के अलावा किसी भी प्रकार के रोजगार के अभ्यास में आ जाएगा।

बंधनेवाला समूह आइटम #2

बंधनेवाला समूह आइटम #3

निम्न उदाहरण कार्ड घटक का विस्तार करके एक साधारण अकॉर्डियन दिखाता है।

नोट: विशेषता का उपयोग data-parentयह सुनिश्चित करने के लिए करें कि निर्दिष्ट पैरेंट के अंतर्गत सभी संक्षिप्त होने योग्य तत्व बंद हो जाएंगे जब एक छोटा होने योग्य आइटम दिखाया जाएगा।

उदाहरण

<div id="accordion">

<div class="card">
    <div class="card-header">
      <a class="card-link" data-toggle="collapse" href="#collapseOne">
        Collapsible Group Item #1
      </a>
    </div>
    <div id="collapseOne" class="collapse show" data-parent="#accordion">
      <div class="card-body">
        Lorem ipsum..
      </div>
    </div>
</div>

<div class="card">
    <div class="card-header">
      <a class="collapsed card-link" data-toggle="collapse" href="#collapseTwo">
        Collapsible Group Item #2
      </a>
    </div>
    <div id="collapseTwo" class="collapse" data-parent="#accordion">
      <div class="card-body">
        Lorem ipsum..
      </div>
    </div>
</div>

<div class="card">
    <div class="card-header">
      <a class="collapsed card-link" data-toggle="collapse" href="#collapseThree">
        Collapsible Group Item #3
      </a>
    </div>
    <div id="collapseThree" class="collapse" data-parent="#accordion">
      <div class="card-body">
        Lorem ipsum..
      </div>
    </div>
</div>

</div>

पूर्ण बूटस्ट्रैप 4 संदर्भ संक्षिप्त करें

सभी पतन विकल्पों, विधियों और घटनाओं के पूर्ण संदर्भ के लिए, हमारे बूटस्ट्रैप 4 जेएस संक्षिप्त संदर्भ पर जाएं ।

❮ पहले का अगला ❯

बूटस्ट्रैप 4 ट्यूटोरियल

बूटस्ट्रैप 4 ग्रिड

बूटस्ट्रैप 4 अन्य

बूटस्ट्रैप 4 रेफरी

बूटस्ट्रैप 4 संक्षिप्त करें

मूल बंधनेवाला

उदाहरण

उदाहरण समझाया गया

उदाहरण

उदाहरण

अकॉर्डियन

उदाहरण

पूर्ण बूटस्ट्रैप 4 संदर्भ संक्षिप्त करें