बूस्ट्रैप 5 फॉल्डर

बुनियादी गुमटाया

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

उदाहरण

<button data-bs-toggle="collapse" data-bs-target="#demo">वसंत</button>
<div id="demo" class="collapse">
  <p>बढ़िया दिन में फूल उठाने के लिए सासून के तट पर, असीम दृश्य एक बार नया होता है।</p>
  <p>सहज ही पहचाना जाता है हावा का चेहरा, लाल-नीला हर रंग वसंत है।</p>
</div>

स्वयं प्रयोग कीजिए

उदाहरण व्याख्या

.collapse क्लास को गुमटाया एलीमेंट के लिए संकेत करें (हमारे उदाहरण में <div>); बटन पर क्लिक करके, दिखाने या छुपाने की सामग्री को दिखाया जाएगा。

यदि आप गुमटाया सामग्री (दिखाना/छुपाना) नियंत्रित करना चाहते हैं data-bs-toggle="collapse" गुण को <a> या <button> एलीमेंट में जोड़ें data-bs-target="#id" गुण को बदलने के लिए:

टिप्पणी：<a> एलीमेंट के लिए, आप इस गुण का उपयोग कर सकते हैं href गुण को बदलने के लिए: data-bs-target गुण:

उदाहरण

<a href="#demo" data-bs-toggle="collapse">वसंत</a>
<div id="demo" class="collapse">
  <p>बढ़िया दिन में फूल उठाने के लिए सासून के तट पर, असीम दृश्य एक बार नया होता है।</p>
  <p>सहज ही पहचाना जाता है हावा का चेहरा, लाल-नीला हर रंग वसंत है।</p>
</div>

स्वयं प्रयोग कीजिए

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

उदाहरण

<div id="demo" class="collapse show">
  <p>बढ़िया दिन में फूल उठाने के लिए सासून के तट पर, असीम दृश्य एक बार नया होता है।</p>
  <p>सहज ही पहचाना जाता है हावा का चेहरा, लाल-नीला हर रंग वसंत है।</p>
</div>

स्वयं प्रयोग कीजिए

Accordion (हाथी)

इसमें card एलीमेंट को विस्तार करके एक साधारण एक्स्पांडिबल (हाथी) दिखाया गया है。

टिप्पणी：उपयोग data-bs-parent गुण यह सुनिश्चित करता है कि जब दिखाने वाला एक गलती खुला होता है तो, निर्दिष्ट माता तत्व के अंदर सभी गलतियाँ बंद हो जाती हैं。

उदाहरण

<div id="accordion">
  <div class="card">
    <div class="card-header">
      <a class="btn" data-bs-toggle="collapse" href="#collapseOne">
        संघित गट #1
      </a>
    </div>
    <div id="collapseOne" class="collapse show" data-bs-parent="#accordion">
      <div class="card-body">
        <h3>वसंत</h3>
        <p>बढ़िया दिन में फूल उठाने के लिए सासून के तट पर, असीम दृश्य एक बार नया होता है।</p>
        <p>सहज ही पहचाना जाता है हावा का चेहरा, लाल-नीला हर रंग वसंत है।</p>
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header">
      <a class="collapsed btn" data-bs-toggle="collapse" href="#collapseTwo">
        संघित गट #2
      </a>
    </div>
    <div id="collapseTwo" class="collapse" data-bs-parent="#accordion">
      <div class="card-body">
        <h3>गर्मियों के शेष अंत्योत्तर</h3>
        <p>फूलों का रंग-रंग भूल गया है, मगर मगरमच्छ के शोर में गर्मियाँ नई हैं।</p>
        <p>सड़क के किनारे सांदल और मेंदिर चलते रहे, पहले से जानते हैं कि मैं शांतिपूर्ण लोग हूँ।</p>
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header">
      <a class="collapsed btn" data-bs-toggle="collapse" href="#collapseThree">
        संघित गट #3
      </a>
    </div>
    <div id="collapseThree" class="collapse" data-bs-parent="#accordion">
      <div class="card-body">
        <h3>हिमालय यात्रा</h3>
        <p>दूर जाकर ठंडे पहाड़ी के पत्थरीले मार्ग पर, धूमधूम में बीच के घर हैं।</p>
        <p>शाम के समय फीके देवदार के बगीचे में बैठ, भारी पत्तियाँ फरवरी के फूलों से लाली हैं।</p>
      </div>
    </div>
  </div>
</div>

स्वयं प्रयोग कीजिए