Test Bootstrap
No edit summary |
|||
| (7 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
Inhaltsverzeichnis ist nicht Bootstrap, gehört aber zum Design: | Inhaltsverzeichnis ist nicht Bootstrap, gehört aber zum Design: | ||
<div class="card"><div class="mw-collapsible"><div class="card-header"><h3 class="card-title">Header</h3>Header2</div> | |||
<div class="card-body mw-collapsible-content"><h5 class="card-title">Title</h5><p class="card-text">With supporting text below as a natural lead-in to additional content.</p> | |||
Here is the additional content | |||
</div><div class="card-footer">Footer</div> | |||
</div></div> | |||
__TOC__ | __TOC__ | ||
| Line 99: | Line 107: | ||
<div class="btn btn-warning">Warning [[Glossary]] [[Test1]]</div> | <div class="btn btn-warning">Warning [[Glossary]] [[Test1]]</div> | ||
<div class="btn btn-info">Info [[Glossary]] [[Test1]]</div> | <div class="btn btn-info">Info [[Glossary]] [[Test1]]</div> | ||
<div class="btn btn- | <div class="btn btn-info">Light [[Glossary]] [[Test1]]</div> | ||
<div class="btn btn-dark">Dark [[Glossary]] [[Test1]]</div> | <div class="btn btn-dark">Dark [[Glossary]] [[Test1]]</div> | ||
<div class="btn btn-link">[[Glossary]]</div> | <div class="btn btn-link">[[Glossary]]</div> | ||
<div class="btn btn-link">[[Glossary]]</div> | <div class="btn btn-link">[[Glossary]]</div> | ||
<div class="btn-group" role="group"> | <div class="btn-group" role="group"> | ||
<div class="btn btn- | <div class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown | ||
</div> | </div> | ||
<div class="dropdown-menu" aria-labelledby="btnGroupDrop1"> | <div class="dropdown-menu" aria-labelledby="btnGroupDrop1"> | ||
| Line 119: | Line 121: | ||
<span class="dropdown-item" href="#">[[Glossary]]</span> | <span class="dropdown-item" href="#">[[Glossary]]</span> | ||
</div> | </div> | ||
</div> | |||
<div class="btn-group" role="group"> | |||
<div class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown | |||
</div> | |||
<div class="dropdown-menu" aria-labelledby="btnGroupDrop1"> | |||
<span class="dropdown-item" href="#">[[Dropdown link]]</span> | |||
<span class="dropdown-item" href="#">[[Glossary]]</span> | |||
</div> | </div> | ||
</div> | </div> | ||
<div class="btn-group" role="group"> | <div class="btn-group" role="group"> | ||
| Line 128: | Line 140: | ||
<span class="dropdown-item" href="#">[[Dropdown link]]</span> | <span class="dropdown-item" href="#">[[Dropdown link]]</span> | ||
<span class="dropdown-item" href="#">[[Glossary]]</span> | <span class="dropdown-item" href="#">[[Glossary]]</span> | ||
</div> | </div> | ||
</div> | </div> | ||
== Cards == | == Cards == | ||
<div class="card"><div class="card-header"><h3 class="card-title">Header</h3>Header2</div> | <div class="card"><div class="mw-collapsible"><div class="card-header"><h3 class="card-title">Header</h3>Header2</div> | ||
<div class="card-body"><h5 class="card-title">Title</h5><p class="card-text">With supporting text below as a natural lead-in to additional content.</p> | <div class="card-body mw-collapsible-content"><h5 class="card-title">Title</h5><p class="card-text">With supporting text below as a natural lead-in to additional content.</p> | ||
Here is the additional content | Here is the additional content | ||
</div><div class="card-footer">Footer</div> | </div><div class="card-footer">Footer</div> | ||
</div> | </div></div> | ||
<div class="card"><div class="card-header bg-primary"><h3 class="card-title">Primary</h3></div> | <div class="card"><div class="mw-collapsible"><div class="card-header bg-primary"><h3 class="card-title">Primary</h3></div> | ||
<div class="card-body">Here is the additional content | <div class="card-body mw-collapsible-content">Here is the additional content | ||
</div><div class="card-footer">Footer</div> | </div><div class="card-footer">Footer</div> | ||
</div> | </div></div> | ||
<div class="card"><div class="card-header bg-secondary"><h3 class="card-title">Secondary</h3></div> | <div class="card"><div class="mw-collapsible"><div class="card-header bg-secondary"><h3 class="card-title">Secondary</h3></div> | ||
<div class="card-body">Here is the additional content | <div class="card-body mw-collapsible-content">Here is the additional content | ||
</div><div class="card-footer">Footer</div> | </div><div class="card-footer">Footer</div> | ||
</div> | </div></div> | ||
<div class="card"><div class="card-header bg-light"><h3 class="card-title">Light</h3></div> | <div class="card"><div class="mw-collapsible"><div class="card-header bg-light"><h3 class="card-title">Light</h3></div> | ||
<div class="card-body">Here is the additional content | <div class="card-body mw-collapsible-content">Here is the additional content | ||
</div><div class="card-footer">Footer</div> | </div><div class="card-footer">Footer</div> | ||
</div> | </div></div> | ||
<div class="card"><div class="card-header bg-dark"><h3 class="card-title">Dark</h3></div> | <div class="card"><div class="mw-collapsible"><div class="card-header bg-dark"><h3 class="card-title">Dark</h3></div> | ||
<div class="card-body">Here is the additional content | <div class="card-body mw-collapsible-content">Here is the additional content | ||
</div><div class="card-footer">Footer</div> | </div><div class="card-footer">Footer</div> | ||
</div> | </div></div> | ||
<div class="card"><div class="card-header bg-danger"><h3 class="card-title">Danger</h3></div> | <div class="card"><div class="mw-collapsible"><div class="card-header bg-danger"><h3 class="card-title">Danger</h3></div> | ||
<div class="card-body">Here is the additional content | <div class="card-body mw-collapsible-content">Here is the additional content | ||
</div><div class="card-footer">Footer</div> | </div><div class="card-footer">Footer</div> | ||
</div> | </div></div> | ||
<div class="card"><div class="card-header bg-warning"><h3 class="card-title">Warning</h3></div> | <div class="card"><div class="mw-collapsible"><div class="card-header bg-warning"><h3 class="card-title">Warning</h3></div> | ||
<div class="card-body">Here is the additional content | <div class="card-body mw-collapsible-content">Here is the additional content | ||
</div><div class="card-footer">Footer</div> | </div><div class="card-footer">Footer</div> | ||
</div> | </div></div> | ||
<div class="card"><div class="card-header bg-info"><h3 class="card-title">Info</h3></div> | <div class="card"><div class="mw-collapsible"><div class="card-header bg-info"><h3 class="card-title">Info</h3></div> | ||
<div class="card-body">Here is the additional content | <div class="card-body mw-collapsible-content">Here is the additional content | ||
</div><div class="card-footer">Footer</div> | </div><div class="card-footer">Footer</div> | ||
</div> | </div></div> | ||
== Jumbotron == | == Jumbotron == | ||
Latest revision as of 08:02, 31 August 2023
Inhaltsverzeichnis ist nicht Bootstrap, gehört aber zum Design:
Header
Header2Title
With supporting text below as a natural lead-in to additional content.
Here is the additional content
OOUI
MediaWiki verwendet für das User-Interface OOUI Buttons und Icons (z. B. Seite speichern)
- https://www.mediawiki.org/wiki/OOUI
- https://doc.wikimedia.org/oojs-ui/master/demos/
- https://commons.wikimedia.org/wiki/OOUI_icons
Info-Button
Das ist nicht Bottstrap, gehört aber auch zum Design!
Headings
h1. Bootstrap heading
h2. Bootstrap heading
h3. Bootstrap heading
h4. Bootstrap heading
h5. Bootstrap heading
h6. Bootstrap heading
Text
This is a lead paragraph. It stands out from regular paragraphs.
This is a regular paragraph in comparison.
You can use the mark tag to highlight text.
This line of text is meant to be treated as deleted text.
This line of text is meant to be treated as no longer accurate.
This line of text is meant to be treated as an addition to the document.
This line of text will render as underlined
This line of text is meant to be treated as fine print.
This line rendered as bold text.
This line rendered as italicized text.
Blockquote
A well-known quote, contained in a blockquote element.
Text Colors
.text-primary
.text-secondary
.text-success
.text-danger
.text-warning
.text-info
.text-light
.text-dark
.text-body
.text-muted
.text-white
.text-black-50
.text-white-50
Classes
Backgrounds
Buttons
Cards
Header
Header2Title
With supporting text below as a natural lead-in to additional content.
Here is the additional content
Primary
Secondary
Light
Dark
Danger
Warning
Info
Jumbotron
Hello, world!
This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.
It uses utility classes for typography and spacing to space content out within the larger container.