Κλίμακα Bootstrap 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" Αtributo προστίθεται στο στοιχείο <a> ή <button>. Στη συνέχεια προσθέστε data-bs-target="#id" Αtributo για να συνδέσετε το κουμπί με το ανακλινόμενο περιεχόμενο (<div id="demo">).

Σημειώσεις:Για το στοιχείο <a>, μπορείτε να χρησιμοποιήσετε href Αtributo για την αντικατάσταση data-bs-target Αtributos:

Παράδειγμα

<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>

Προσπαθήστε το προσωπικά