Du kannst nicht mehr als 25 Themen auswählen Themen müssen entweder mit einem Buchstaben oder einer Ziffer beginnen. Sie können Bindestriche („-“) enthalten und bis zu 35 Zeichen lang sein.

42 Zeilen
2.7KB

  1. {% extends 'base.html' %}
  2. {% block content %}
  3. <style>
  4. .collapse_text {
  5. padding: 0 18px;
  6. background-color: #f1f1f1;
  7. }
  8. </style>
  9. <h2>Collapsible text</h2>
  10. <b>HackMD</b>'s online writing environment supports practices of <a data-bs-toggle="collapse" href="#collapse_editing" role="button" aria-expanded="false" aria-controls="collapse_editing">collaborative editing</a>, <a data-bs-toggle="collapse" href="#collapse_writing" role="button" aria-expanded="false" aria-controls="collapse_writing">collaborative writing</a>, and <a data-bs-toggle="collapse" href="#collapse_versioning" role="button" aria-expanded="false" aria-controls="collapse_versioning">versioning</a>.
  11. <div class="collapse collapse_text" id="collapse_editing">
  12. <p>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.</p>
  13. </div>
  14. <div class="collapse collapse_text" id="collapse_writing">
  15. <p>Exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  16. </div>
  17. <div class="collapse collapse_text" id="collapse_versioning">
  18. <p>Versioning text goes here.</p>
  19. </div>
  20. <br><br>
  21. <h2>Tooltips</h2>
  22. <b>HackMD</b>'s online writing environment supports practices of <a href="#" data-bs-toggle="tooltip" data-bs-placement="bottom" title="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.">collaborative editing</a>, <a href="#" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.">collaborative writing</a>, and <a href="#" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Versioning text goes here.">versioning</a>.
  23. <br><br>
  24. <h2>Popover</h2>
  25. <b>HackMD</b>'s online writing environment supports practices of <a href="#" data-bs-toggle="popover" title="collaborative editing description" data-bs-content="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.">collaborative editing</a>, <a href="#" data-bs-toggle="popover" title="collaborative writing description" data-bs-content="Exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.">collaborative writing</a>, and <a href="#" data-bs-toggle="popover" title="versioning description" data-bs-content="Versioning text goes here.">collaborative editing</a>versioning</a>.
  26. {% endblock %}