Test2: Difference between revisions
No edit summary |
No edit summary |
||
| Line 1: | Line 1: | ||
==Collapse== | |||
<p> | |||
<a class="btn btn-primary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a> | |||
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button> | |||
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elements</button> | |||
</p> | |||
<div class="row"> | |||
<div class="col"> | |||
<div class="collapse multi-collapse" id="multiCollapseExample1"> | |||
<div class="card card-body"> | |||
Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger. | |||
</div> | |||
</div> | |||
</div> | |||
<div class="col"> | |||
<div class="collapse multi-collapse" id="multiCollapseExample2"> | |||
<div class="card card-body"> | |||
Some placeholder content for the second collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger. | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
==Row== | |||
<div class="container"> | <div class="container"> | ||
<div class="row mb-3"> | <div class="row mb-3"> | ||
Revision as of 20:20, 1 November 2024
Collapse[edit]
<a class="btn btn-primary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a> <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button> <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elements</button>
Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
Some placeholder content for the second collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
Row[edit]
1
2
3
4
5
6
Picture one[edit]
Image Grid[edit]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vulputate, lacus at sollicitudin volutpat, lacus mauris ornare purus, sit amet iaculis mi lorem quis lorem. Suspendisse iaculis libero posuere commodo semper. Vivamus tincidunt suscipit orci, ac malesuada arcu efficitur vitae. Mauris molestie massa tortor, ac maximus erat tincidunt feugiat. Mauris nec mauris tortor. Vivamus accumsan pretium quam, ac malesuada arcu feugiat non. Pellentesque ut urna quam. Maecenas quis ipsum ac ex ultrices suscipit sit amet ut leo. In cursus porttitor ullamcorper.
Vestibulum et massa commodo, venenatis odio ut, venenatis est. Vivamus congue imperdiet leo, et lacinia magna consectetur eget. Sed et risus neque. Vestibulum scelerisque nisl id placerat congue. Maecenas lobortis dictum mi. Nam varius varius elit, in pellentesque purus finibus ut. Donec ac blandit erat. Donec vitae velit ut tellus ullamcorper tincidunt id vitae turpis. Nullam interdum consequat purus.
In et massa vel leo bibendum pulvinar. Curabitur eget metus placerat, pulvinar mi et, euismod velit. Curabitur orci urna, sodales sed nunc sollicitudin, convallis consectetur nisl. Sed lacinia est sit amet nibh ornare consequat. Curabitur ac quam sit amet nisi euismod ornare. Quisque luctus ac libero eget pretium. Donec facilisis tincidunt aliquet. In congue mi nisl, in dignissim sem euismod et. Mauris arcu ipsum, commodo ut metus eget, hendrerit sagittis urna. Phasellus in tellus dui. Vivamus eget convallis ex. Proin consectetur, enim non facilisis aliquet, nulla quam elementum mi, ultrices faucibus tellus dolor et nisi. Aliquam nec odio eget risus porta egestas.
Jumbotron[edit]
Jumbotron title[edit]
Jumbotrons are flexible elements used for calling extra attention to featured content or information.
Accordion[edit]
Lorem ipsum 1
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Lorem ipsum 2
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Card Deck[edit]
Components are predefined elements or features you can easily add to the wiki to build responsive and visually appealing user interfaces.
Text
Several CSS classes for coloring backgrounds, borders, and text are available. You can use them for components and other elements.
Text
You can use a series of CSS classes to build layouts of all shapes and sizes with responsible (mobile-friendly) columns and rows.
Text
Button[edit]
Chameleon Medik Skin Tweeki Skin
Card Deck 2[edit]
Lorem ipsum
Card title
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Lorem ipsum
Card title
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Lorem ipsum and a bit more text to see what happens with this
Card title
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
