Sandkasten

Aus DG HochN-Wiki
Wechseln zu:Navigation, Suche
K
K (Die Seite wurde geleert.)
Markierung: Geleert
Zeile 1: Zeile 1:
<div class="container my-4">
 
  
  <p class="font-weight-bold">Example of bootstrap accordion with animated arrows.</p>
 
 
  <p><strong>Detailed documentation and more examples you can find in our <a href="https://mdbootstrap.com/docs/standard/components/accordion/"
 
                                                                            target="_blank">Bootstrap Accordion Docs</a> </p>
 
 
  <hr class="mt-5">
 
 
  <p>Built with <a target="_blank" href="https://mdbootstrap.com/docs/standard/">Material Design for Bootstrap</a> - free and powerful Bootstrap UI KIT</p>
 
 
  <a class="btn btn-primary me-2" href="https://mdbootstrap.com/docs/standard/getting-started/installation/" target="_blank" role="button">Download MDB UI KIT <i class="fas fa-download ms-2"></i></a>
 
  <a class="btn btn-danger me-2" target="_blank" href="https://mdbootstrap.com/docs/standard/" role="button">Learn more</a>
 
  <a class="btn btn-success me-2" target="_blank" href="https://mdbootstrap.com/docs/standard/getting-started/" role="button">Tutorials</a>
 
  <a class="btn btn-dark me-2" target="_blank" href="https://github.com/mdbootstrap/mdb-ui-kit" role="button">GitHub <i class="fab fa-github ms-2"></i></a>
 
 
  <hr class="mb-5"/>
 
 
  <p class="font-weight-bold">Basic example</p>
 
 
  <!--Accordion wrapper-->
 
  <div class="accordion md-accordion" id="accordionEx" role="tablist" aria-multiselectable="true">
 
 
    <!-- Accordion card -->
 
    <div class="card">
 
 
      <!-- Card header -->
 
      <div class="card-header" role="tab" id="headingOne1">
 
        <a data-toggle="collapse" data-parent="#accordionEx" href="#collapseOne1" aria-expanded="true"
 
          aria-controls="collapseOne1">
 
          <h5 class="mb-0">
 
            Collapsible Group Item #1 <i class="fas fa-angle-down rotate-icon"></i>
 
          </h5>
 
        </a>
 
      </div>
 
 
      <!-- Card body -->
 
      <div id="collapseOne1" class="collapse show" role="tabpanel" aria-labelledby="headingOne1"
 
          data-parent="#accordionEx">
 
        <div class="card-body">
 
          Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3
 
          wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum
 
          eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla
 
          assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred
 
          nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer
 
          farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus
 
          labore sustainable VHS.
 
        </div>
 
      </div>
 
 
    </div>
 
    <!-- Accordion card -->
 
 
    <!-- Accordion card -->
 
    <div class="card">
 
 
      <!-- Card header -->
 
      <div class="card-header" role="tab" id="headingTwo2">
 
        <a class="collapsed" data-toggle="collapse" data-parent="#accordionEx" href="#collapseTwo2"
 
          aria-expanded="false" aria-controls="collapseTwo2">
 
          <h5 class="mb-0">
 
            Collapsible Group Item #2 <i class="fas fa-angle-down rotate-icon"></i>
 
          </h5>
 
        </a>
 
      </div>
 
 
      <!-- Card body -->
 
      <div id="collapseTwo2" class="collapse" role="tabpanel" aria-labelledby="headingTwo2"
 
          data-parent="#accordionEx">
 
        <div class="card-body">
 
          Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3
 
          wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum
 
          eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla
 
          assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred
 
          nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer
 
          farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus
 
          labore sustainable VHS.
 
        </div>
 
      </div>
 
 
    </div>
 
    <!-- Accordion card -->
 
 
    <!-- Accordion card -->
 
    <div class="card">
 
 
      <!-- Card header -->
 
      <div class="card-header" role="tab" id="headingThree3">
 
        <a class="collapsed" data-toggle="collapse" data-parent="#accordionEx" href="#collapseThree3"
 
          aria-expanded="false" aria-controls="collapseThree3">
 
          <h5 class="mb-0">
 
            Collapsible Group Item #3 <i class="fas fa-angle-down rotate-icon"></i>
 
          </h5>
 
        </a>
 
      </div>
 
 
      <!-- Card body -->
 
      <div id="collapseThree3" class="collapse" role="tabpanel" aria-labelledby="headingThree3"
 
          data-parent="#accordionEx">
 
        <div class="card-body">
 
          Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3
 
          wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum
 
          eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla
 
          assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred
 
          nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer
 
          farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus
 
          labore sustainable VHS.
 
        </div>
 
      </div>
 
 
    </div>
 
    <!-- Accordion card -->
 
 
  </div>
 
  <!-- Accordion wrapper -->
 
 
</div>
 

Version vom 4. Oktober 2021, 19:19 Uhr

Cookies helfen uns bei der Bereitstellung von DG HochN-Wiki. Durch die Nutzung von DG HochN-Wiki erklärst du dich damit einverstanden, dass wir Cookies speichern.