|
|
(96 intermediate revisions by the same user not shown) |
Line 1: |
Line 1: |
| ==Image Grid==
| | {{#ask: [[Version Release Year::2024]] |
| | | |?Version Release Date =Date |
| <div class="container">
| | |?Album Number of Tracks=Tracks |
| <div class="row">
| | |?Country Of Release=Country |
| <div class="col">
| | |format=table |
| [[File:100 Hits from 100 Nows.jpg|300px]]
| | |limit=500 |
| </div>
| | |sort=Version Release Date |
| <div class="col">
| | |order=asc}} |
| Lorem ipsum dolor sit amet...
| |
| </div>
| |
| <div class="col">
| |
| <!--3 of 3-->
| |
| </div>
| |
| </div>
| |
| </div>
| |
| | |
| ==Jumbotron==
| |
| | |
| <bootstrap_jumbotron style="border:2px solid #999;" class="bootstrap-jumbotron-example"><big>
| |
| = Jumbotron title =
| |
| Jumbotrons are flexible elements used for calling extra attention to featured content or information.</big>
| |
| | |
| {{#bootstrap_button: Main Page | text=Learn more! | color=info }} | |
| </bootstrap_jumbotron>
| |
| | |
| ==Accordion==
| |
| | |
| <bootstrap_accordion>
| |
| <bootstrap_card header="Lorem ipsum 1" style="width: 300px;">
| |
| Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
| |
| </bootstrap_card>
| |
| <bootstrap_card header="Lorem ipsum 2" style="width: 300px;">
| |
| Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
| |
| </bootstrap_card>
| |
| </bootstrap_accordion>
| |
| | |
| ==Card Deck==
| |
| | |
| <div class="card-deck">
| |
| <div class="card bg-warning">
| |
| <div class="card-header">'''<big>[[Components]]</big>'''</div>
| |
| <div class="card-body bg-white">
| |
| <p class="card-text">Components are predefined elements or features you can easily add to the wiki to build responsive and visually appealing user interfaces.</p>
| |
| <p class="card-text">Text</p>
| |
| </div>
| |
| </div>
| |
| <div class="card bg-warning">
| |
| <div class="card-header">'''<big>[[Colors]]</big>'''</div>
| |
| <div class="card-body bg-white">
| |
| <p class="card-text">Several CSS classes for coloring backgrounds, borders, and text are available. You can use them for com­ponents and other elements.</p>
| |
| <p class="card-text">Text</p>
| |
| </div>
| |
| </div>
| |
| <div class="card bg-warning">
| |
| <div class="card-header">'''<big>[[Grid]]s</big>'''</div>
| |
| <div class="card-body bg-white">
| |
| <p class="card-text">You can use a series of CSS classes to build layouts of all shapes and sizes with responsible (mobile-friendly) columns and rows.</p>
| |
| <p class="card-text">Text</p>
| |
| </div>
| |
| </div>
| |
| </div>
| |
| | |
| ==Button==
| |
| | |
| {{#bootstrap_button: Chameleon | color=primary}}
| |
| {{#bootstrap_button: Medik | color=secondary | text=Medik Skin }}
| |
| {{#bootstrap_button: Tweeki | color=info | text=Tweeki Skin }}
| |
| | |
| ==Card Deck 2==
| |
| | |
| | |
| <div class="card-deck">
| |
| <div class="card">
| |
| <div class="card-header">
| |
| <big>'''Lorem ipsum'''</big>
| |
| </div>
| |
| <div class="card-body">
| |
| <h5 class="card-title">Card title</h5>
| |
| <p class="card-text">
| |
| Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
| |
| </p>
| |
| <p class="card-text">
| |
| <small class="text-muted">[[Lorem ipsum|Lorem ipsum...]]</small>
| |
| </p>
| |
| </div>
| |
| </div>
| |
| <div class="card">
| |
| <div class="card-header">
| |
| <big>'''Lorem ipsum'''</big>
| |
| </div>
| |
| <div class="card-body">
| |
| <h5 class="card-title">Card title</h5>
| |
| <p class="card-text">
| |
| Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
| |
| </p>
| |
| <p class="card-text">
| |
| <small class="text-muted">[[Lorem ipsum|Lorem ipsum...]]</small>
| |
| </p>
| |
| </div>
| |
| </div>
| |
| <div class="card">
| |
| <div class="card-header">
| |
| <big>'''Lorem ipsum and a bit more text to see what happens with this'''</big>
| |
| </div>
| |
| <div class="card-body">
| |
| <h5 class="card-title">Card title</h5>
| |
| <p class="card-text">
| |
| Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
| |
| </p>
| |
| <p class="card-text">
| |
| <small class="text-muted">[[Lorem ipsum|Lorem ipsum...]]</small>
| |
| </p>
| |
| </div>
| |
| </div>
| |
| </div>
| |