Kein solcher Event gefunden
Dieses Template nutzt das Bootstrap 5 Formular Elemente. Weitere Infos gibt es hier Dokumentation → Email Adresse Passwort Textarea <div class="mb-3"> <label for="exampleFormControlInput1" class="form-label">Email Adresse</label> <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="
<input class="form-control form-control-lg" type="text" placeholder=".form-control-lg" aria-label=".form-control-lg example"> <input class="form-control" type="text" placeholder="Default input" aria-label="default input example"> <input class="form-control form-control-sm" type="text" placeholder=".form-control-sm" aria-label=".form-control-sm example"> Dateiupload
Eine Datei auswählen Mehrere Dateien auswählen <div class="mb-3"> <label for="formFile" class="form-label">Eine Datei auswählen</label> <input class="form-control" type="file" id="formFile"> </div> <div class="mb-3"> <label for="formFileMultiple" class="form-label">Mehrere Dateien auswählen</label> <input class="form-control" type="file" id="formFileMultiple" multiple> </div> Auswahllisten
Open this select menu One Two Three <select class="form-select" aria-label="Default select example"> <option selected>Open this select menu</option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </select> Open this select menu One Two Three <select class="form-select" multiple aria-label="Multiple select example"> <option selected>Open this select menu</option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </select> Input Gruppen
@ @example.com Your vanity URL https://example.com/users/ Example help text goes outside the input group. $ .00 @ With textarea <div class="input-group mb-3"> <span class="input-group-text" id="basic-addon1">@</span> <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1"> </div> <div class="input-group mb-3"> <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2"> <span class="input-group-text" id="basic-addon2">@example.com</span> </div> <div class="mb-3"> <label for="basic-url" class="form-label">Your vanity URL</label> <div class="input-group"> <span class="input-group-text" id="basic-addon3">https://example.com/users/</span> <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3 basic-addon4"> </div> <div class="form-text" id="basic-addon4">Example help text goes outside the input group.</div> </div> <div class="input-group mb-3"> <span class="input-group-text">$</span> <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)"> <span class="input-group-text">.00</span> </div> <div class="input-group mb-3"> <input type="text" class="form-control" placeholder="Username" aria-label="Username"> <span class="input-group-text">@</span> <input type="text" class="form-control" placeholder="Server" aria-label="Server"> </div> <div class="input-group"> <span class="input-group-text">With textarea</span> <textarea class="form-control" aria-label="With textarea"></textarea> </div>
Accordion summary...Accordion body...
<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6><h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>
<h1 class="display-5">Display 5</h1>
<h1 class="display-6">Display 6</h1>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.
<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><u>This line of text will render as underlined.</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>.fs--1
.fs-0
.fs-1
.fs-2
.fs-3
.fs-4
.fs-5
.fs-6
.fs-7
.fs-8
<p class="fs--1">.fs--1</p>
<p class="fs-0">.fs-0</p>
<p class="fs-1">.fs-1</p>
<p class="fs-2">.fs-2</p>
<p class="fs-3">.fs-3</p>
<p class="fs-4">.fs-4</p>
<p class="fs-5">.fs-5</p>
<p class="fs-6">.fs-6</p>
<p class="fs-7">.fs-7</p>
<p class="fs-8">.fs-8</p>Links:
Pellentesque cursus placerat hendrerit. Donec sed erat nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce vitae consequat erat. Quisque faucibus felis et fringilla imperdiet. Etiam at porttitor elit, quis convallis massa. Ut id risus sapien. Praesent sit amet arcu a eros laoreet facilisis id eget risus.
<p class="text-start">
Your paragraph goes here.
</p>Center:
Pellentesque cursus placerat hendrerit. Donec sed erat nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce vitae consequat erat. Quisque faucibus felis et fringilla imperdiet. Etiam at porttitor elit, quis convallis massa. Ut id risus sapien. Praesent sit amet arcu a eros laoreet facilisis id eget risus.
<p class="text-center">
Your paragraph goes here.
</p>Rechts:
Pellentesque cursus placerat hendrerit. Donec sed erat nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce vitae consequat erat. Quisque faucibus felis et fringilla imperdiet. Etiam at porttitor elit, quis convallis massa. Ut id risus sapien. Praesent sit amet arcu a eros laoreet facilisis id eget risus.
<p class="text-end">
Your paragraph goes here.
</p>Lowercased text.
Uppercased text.
CapiTaliZed text.
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">CapiTaliZed text.</p>Unordered:
Eine Liste von Elementen, bei denen die Reihenfolge keine Rolle spielt.
Ordered:
Eine Liste von Elementen, welche durchnummeriert ist.
Dieses Template nutzt das Bootstrap 5 Sizing. Weitere Infos gibt es hier Dokumentation →
<div class="w-25 ">Width 25%</div>
<div class="w-50 ">Width 50%</div>
<div class="w-75 ">Width 75%</div>
<div class="w-100">Width 100%</div>
<div class="w-auto">Width auto</div><div class="h-25">Height 25%</div>
<div class="h-50">Height 50%</div>
<div class="h-75">Height 75%</div>
<div class="h-100">Height 100%</div>
<div class="h-auto">Height auto</div>
Dieses Template nutzt das Bootstrap 5 Grid System. Weitere Infos gibt es hier Dokumentation →
Das Bootstrap 5 Grid-System hat sechs Klassen:
Vergewissern Sie sich, dass die Summe 12 oder weniger beträgt (es ist nicht erforderlich, dass Sie alle 12 verfügbaren Spalten verwenden).
| XSmall | Small | Medium | Large | Extra Large | XXL | |
|---|---|---|---|---|---|---|
| Class prefix | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
.col-xxl- |
| Screen width | <576px | >=576px | >=768px | >=992px | >=1200px | >=1400px |
Jede Klasse skaliert nach oben. Wenn Sie also für sm und md die gleichen Breiten einstellen wollen, müssen Sie nur sm angeben.
.text-primary.text-secondary.text-success.text-info.text-warning.text-danger.border-primary.border-secondary.border-success.border-info.border-warning.border-danger