|
|
| (5 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt) |
| Zeile 5: |
Zeile 5: |
| ---- | | ---- |
| --> | | --> |
| '''{{BASEPAGENAME}}''' | | '''MediaWiki/Bootstrap''' |
| </noinclude> | | </noinclude> |
|
| |
|
| Zeile 72: |
Zeile 72: |
| === Siehe auch === | | === Siehe auch === |
| <div style="column-count:2"> | | <div style="column-count:2"> |
| <categorytree hideroot=on mode="pages">{{BASEPAGENAME}}</categorytree> | | <categorytree hideroot=on mode="pages">MediaWiki/Bootstrap</categorytree> |
| </div> | | </div> |
| ---- | | ---- |
| Zeile 88: |
Zeile 88: |
| ==== Projekt ==== | | ==== Projekt ==== |
| ==== Weblinks ==== | | ==== Weblinks ==== |
| | # https://bootstrap.pro.wiki/ |
| | # https://getbootstrap.com/docs/5.3/getting-started/introduction/ |
|
| |
|
| <!-- | | <!-- |
| Zeile 94: |
Zeile 96: |
| --> | | --> |
|
| |
|
| [[Kategorie:new]] | | [[Kategorie:MediaWiki/Bootstrap]] |
|
| |
|
| </noinclude> | | </noinclude> |
|
| |
| = Beispiele =
| |
| == 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>
| |
|
| |
| ; Code
| |
| <syntaxhighlight lang="html" highlight="" line copy>
| |
| <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>
| |
| </syntaxhighlight>
| |
|
| |
| == list-group ==
| |
| <ul class="list-group">
| |
| <li class="list-group-item">A simple default list group item</li>
| |
| <li class="list-group-item list-group-item-primary">A simple primary list group item</li>
| |
| <li class="list-group-item list-group-item-secondary">A simple secondary list group item</li>
| |
| <li class="list-group-item list-group-item-success">A simple success list group item</li>
| |
| <li class="list-group-item list-group-item-danger">A simple danger list group item</li>
| |
| </ul>
| |
|
| |
| ; Code
| |
| <syntaxhighlight lang="html" highlight="" line copy>
| |
| <ul class="list-group">
| |
| <li class="list-group-item">A simple default list group item</li>
| |
| <li class="list-group-item list-group-item-primary">A simple primary list group item</li>
| |
| <li class="list-group-item list-group-item-secondary">A simple secondary list group item</li>
| |
| <li class="list-group-item list-group-item-success">A simple success list group item</li>
| |
| <li class="list-group-item list-group-item-danger">A simple danger list group item</li>
| |
| </ul>
| |
| </syntaxhighlight>
| |
|
| |
| == Tabelle ==
| |
| {| class="table table-striped table-hover sortable"
| |
| ! scope="col" | # !! First !! Last !! Handle
| |
| |-
| |
| | scope="row" | 1 || Mark || Otto || @mdo
| |
| |-
| |
| | scope="row" | 2 || Jacob || Thornton || @fat
| |
| |-
| |
| | scope="row" | 3 || Larry || the Bird || @twitter
| |
| |}
| |
|
| |
| ; Code
| |
| <syntaxhighlight lang="html" highlight="" line copy>
| |
| {| class="table table-striped table-hover sortable"
| |
| ! scope="col" | # !! First !! Last !! Handle
| |
| |-
| |
| | scope="row" | 1 || Mark || Otto || @mdo
| |
| |-
| |
| | scope="row" | 2 || Jacob || Thornton || @fat
| |
| |-
| |
| | scope="row" | 3 || Larry || the Bird || @twitter
| |
| |}
| |
| </syntaxhighlight>
| |
|
| |
| == Grid ==
| |
| <div class="container">
| |
| <div class="row">
| |
| <div class="col">
| |
| 1 of 2
| |
| </div>
| |
| <div class="col">
| |
| 2 of 2
| |
| </div>
| |
| </div>
| |
| <div class="row">
| |
| <div class="col">
| |
| 1 of 3
| |
| </div>
| |
| <div class="col">
| |
| 2 of 3
| |
| </div>
| |
| <div class="col">
| |
| 3 of 3
| |
| </div>
| |
| </div>
| |
| </div>
| |
|
| |
| ; Code
| |
| <syntaxhighlight lang="html" highlight="" line copy>
| |
| <div class="container">
| |
| <div class="row">
| |
| <div class="col">
| |
| 1 of 2
| |
| </div>
| |
| <div class="col">
| |
| 2 of 2
| |
| </div>
| |
| </div>
| |
| <div class="row">
| |
| <div class="col">
| |
| 1 of 3
| |
| </div>
| |
| <div class="col">
| |
| 2 of 3
| |
| </div>
| |
| <div class="col">
| |
| 3 of 3
| |
| </div>
| |
| </div>
| |
| </div>
| |
| </syntaxhighlight>
| |
|
| |
| == Button ==
| |
| <button type="button" class="btn btn-primary">Primary</button>
| |
| <button type="button" class="btn btn-secondary">Secondary</button>
| |
| <button type="button" class="btn btn-success">Success</button>
| |
| <button type="button" class="btn btn-danger">Danger</button>
| |
| <button type="button" class="btn btn-warning">Warning</button>
| |
| <button type="button" class="btn btn-info">Info</button>
| |
| <button type="button" class="btn btn-light">Light</button>
| |
| <button type="button" class="btn btn-dark">Dark</button>
| |
|
| |
| <button type="button" class="btn btn-link">Link</button>
| |
|
| |
| <syntaxhighlight lang="html" highlight="" line copy>
| |
| <button type="button" class="btn btn-primary">Primary</button>
| |
| <button type="button" class="btn btn-secondary">Secondary</button>
| |
| <button type="button" class="btn btn-success">Success</button>
| |
| <button type="button" class="btn btn-danger">Danger</button>
| |
| <button type="button" class="btn btn-warning">Warning</button>
| |
| <button type="button" class="btn btn-info">Info</button>
| |
| <button type="button" class="btn btn-light">Light</button>
| |
| <button type="button" class="btn btn-dark">Dark</button>
| |
|
| |
| <button type="button" class="btn btn-link">Link</button>
| |
| </syntaxhighlight>
| |
