You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

test.html 2.7KB

1234567891011121314151617181920212223242526272829303132333435363738394041
  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 %}