Layout
Geben Sie Ihren Formularen mit unseren Formularlayoutoptionen eine gewisse Struktur – von Inline- über horizontale bis hin zu benutzerdefinierten Rasterimplementierungen.
Formen
Jede Gruppe von Formularfeldern sollte sich in einem <form>
Element befinden. Bootstrap bietet kein Standarddesign für das <form>
Element, aber es gibt einige leistungsstarke Browserfunktionen, die standardmäßig bereitgestellt werden.
- Neu bei Browserformularen? Erwägen Sie , die MDN-Formulardokumentation zu lesen , um einen Überblick und eine vollständige Liste der verfügbaren Attribute zu erhalten.
<button>
s innerhalb einer<form>
Vorgabe zutype="submit"
, also bemühen Sie sich, spezifisch zu sein und fügen Sie immer eine eintype
.- Sie können jedes Formularelement innerhalb eines Formulars mit dem
disabled
Attribut auf der<form>
.
Da Bootstrap für fast alle unsere Formularsteuerelemente gilt, werden Formulare standardmäßig vertikal gestapelt display: block
. width: 100%
Zusätzliche Klassen können verwendet werden, um dieses Layout auf einer Per-Form-Basis zu variieren.
Dienstprogramme
Margin-Utilities sind der einfachste Weg, Formularen etwas Struktur zu verleihen. Sie bieten eine grundlegende Gruppierung von Beschriftungen, Steuerelementen, optionalem Formulartext und Formularvalidierungsnachrichten. Wir empfehlen, sich an margin-bottom
Dienstprogramme zu halten und aus Gründen der Konsistenz im gesamten Formular eine einzige Richtung zu verwenden.
Fühlen Sie sich frei, Ihre Formulare zu erstellen, wie Sie möchten, mit <fieldset>
s, <div>
s oder fast jedem anderen Element.
<div class="mb-3">
<label for="formGroupExampleInput" class="form-label">Example label</label>
<input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input placeholder">
</div>
<div class="mb-3">
<label for="formGroupExampleInput2" class="form-label">Another label</label>
<input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input placeholder">
</div>
Raster bilden
Komplexere Formulare können mit unseren Rasterklassen erstellt werden. Verwenden Sie diese für Formularlayouts, die mehrere Spalten, unterschiedliche Breiten und zusätzliche Ausrichtungsoptionen erfordern. Erfordert die Aktivierung der $enable-grid-classes
Sass-Variablen (standardmäßig aktiviert).
<div class="row">
<div class="col">
<input type="text" class="form-control" placeholder="First name" aria-label="First name">
</div>
<div class="col">
<input type="text" class="form-control" placeholder="Last name" aria-label="Last name">
</div>
</div>
Dachrinnen
Durch das Hinzufügen von Bundsteg-Modifikatorklassen können Sie die Bundstegbreite sowohl in Inline- als auch in Blockrichtung steuern . Außerdem muss die $enable-grid-classes
Sass-Variable aktiviert sein (standardmäßig aktiviert).
<div class="row g-3">
<div class="col">
<input type="text" class="form-control" placeholder="First name" aria-label="First name">
</div>
<div class="col">
<input type="text" class="form-control" placeholder="Last name" aria-label="Last name">
</div>
</div>
Mit dem Rastersystem können auch komplexere Layouts erstellt werden.
<form class="row g-3">
<div class="col-md-6">
<label for="inputEmail4" class="form-label">Email</label>
<input type="email" class="form-control" id="inputEmail4">
</div>
<div class="col-md-6">
<label for="inputPassword4" class="form-label">Password</label>
<input type="password" class="form-control" id="inputPassword4">
</div>
<div class="col-12">
<label for="inputAddress" class="form-label">Address</label>
<input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
</div>
<div class="col-12">
<label for="inputAddress2" class="form-label">Address 2</label>
<input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
</div>
<div class="col-md-6">
<label for="inputCity" class="form-label">City</label>
<input type="text" class="form-control" id="inputCity">
</div>
<div class="col-md-4">
<label for="inputState" class="form-label">State</label>
<select id="inputState" class="form-select">
<option selected>Choose...</option>
<option>...</option>
</select>
</div>
<div class="col-md-2">
<label for="inputZip" class="form-label">Zip</label>
<input type="text" class="form-control" id="inputZip">
</div>
<div class="col-12">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="gridCheck">
<label class="form-check-label" for="gridCheck">
Check me out
</label>
</div>
</div>
<div class="col-12">
<button type="submit" class="btn btn-primary">Sign in</button>
</div>
</form>
Horizontale Form
Erstellen Sie horizontale Formulare mit dem Raster, indem Sie die .row
Klasse zu Formgruppen hinzufügen und die .col-*-*
Klassen verwenden, um die Breite Ihrer Beschriftungen und Steuerelemente anzugeben. Stellen Sie sicher, dass Sie .col-form-label
Ihre <label>
s auch so hinzufügen, dass sie mit ihren zugehörigen Formularsteuerelementen vertikal zentriert sind.
Manchmal müssen Sie vielleicht Hilfsprogramme für Ränder oder Auffüllungen verwenden, um die perfekte Ausrichtung zu erzielen, die Sie benötigen. Beispielsweise haben wir das padding-top
Etikett unserer gestapelten Radioeingänge entfernt, um die Textgrundlinie besser auszurichten.
<form>
<div class="row mb-3">
<label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3">
</div>
</div>
<div class="row mb-3">
<label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3">
</div>
</div>
<fieldset class="row mb-3">
<legend class="col-form-label col-sm-2 pt-0">Radios</legend>
<div class="col-sm-10">
<div class="form-check">
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
<label class="form-check-label" for="gridRadios1">
First radio
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
<label class="form-check-label" for="gridRadios2">
Second radio
</label>
</div>
<div class="form-check disabled">
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled>
<label class="form-check-label" for="gridRadios3">
Third disabled radio
</label>
</div>
</div>
</fieldset>
<div class="row mb-3">
<div class="col-sm-10 offset-sm-2">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="gridCheck1">
<label class="form-check-label" for="gridCheck1">
Example checkbox
</label>
</div>
</div>
</div>
<button type="submit" class="btn btn-primary">Sign in</button>
</form>
Größe des horizontalen Formularetiketts
Stellen Sie sicher, dass Sie .col-form-label-sm
oder .col-form-label-lg
zu Ihrem <label>
s oder <legend>
s verwenden, um die Größe von .form-control-lg
und korrekt einzuhalten .form-control-sm
.
<div class="row mb-3">
<label for="colFormLabelSm" class="col-sm-2 col-form-label col-form-label-sm">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control form-control-sm" id="colFormLabelSm" placeholder="col-form-label-sm">
</div>
</div>
<div class="row mb-3">
<label for="colFormLabel" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="colFormLabel" placeholder="col-form-label">
</div>
</div>
<div class="row">
<label for="colFormLabelLg" class="col-sm-2 col-form-label col-form-label-lg">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control form-control-lg" id="colFormLabelLg" placeholder="col-form-label-lg">
</div>
</div>
Spaltengröße
Wie in den vorherigen Beispielen gezeigt, können Sie mit unserem Rastersystem eine beliebige Anzahl von .col
s innerhalb einer .row
. Sie werden die verfügbare Breite gleichmäßig zwischen ihnen aufteilen. Sie können auch eine Teilmenge Ihrer Spalten auswählen, um mehr oder weniger Platz einzunehmen, während die verbleibenden .col
s den Rest gleichmäßig aufteilen, mit bestimmten Spaltenklassen wie .col-sm-7
.
<div class="row g-3">
<div class="col-sm-7">
<input type="text" class="form-control" placeholder="City" aria-label="City">
</div>
<div class="col-sm">
<input type="text" class="form-control" placeholder="State" aria-label="State">
</div>
<div class="col-sm">
<input type="text" class="form-control" placeholder="Zip" aria-label="Zip">
</div>
</div>
Automatische Größenanpassung
Das folgende Beispiel verwendet ein Flexbox-Dienstprogramm, um den Inhalt vertikal zu zentrieren, und ändert .col
sich zu, .col-auto
sodass Ihre Spalten nur so viel Platz wie nötig beanspruchen. Anders ausgedrückt: Die Spaltengröße richtet sich nach dem Inhalt.
<form class="row gy-2 gx-3 align-items-center">
<div class="col-auto">
<label class="visually-hidden" for="autoSizingInput">Name</label>
<input type="text" class="form-control" id="autoSizingInput" placeholder="Jane Doe">
</div>
<div class="col-auto">
<label class="visually-hidden" for="autoSizingInputGroup">Username</label>
<div class="input-group">
<div class="input-group-text">@</div>
<input type="text" class="form-control" id="autoSizingInputGroup" placeholder="Username">
</div>
</div>
<div class="col-auto">
<label class="visually-hidden" for="autoSizingSelect">Preference</label>
<select class="form-select" id="autoSizingSelect">
<option selected>Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<div class="col-auto">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="autoSizingCheck">
<label class="form-check-label" for="autoSizingCheck">
Remember me
</label>
</div>
</div>
<div class="col-auto">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
Sie können das dann noch einmal mit größenspezifischen Spaltenklassen remixen.
<form class="row gx-3 gy-2 align-items-center">
<div class="col-sm-3">
<label class="visually-hidden" for="specificSizeInputName">Name</label>
<input type="text" class="form-control" id="specificSizeInputName" placeholder="Jane Doe">
</div>
<div class="col-sm-3">
<label class="visually-hidden" for="specificSizeInputGroupUsername">Username</label>
<div class="input-group">
<div class="input-group-text">@</div>
<input type="text" class="form-control" id="specificSizeInputGroupUsername" placeholder="Username">
</div>
</div>
<div class="col-sm-3">
<label class="visually-hidden" for="specificSizeSelect">Preference</label>
<select class="form-select" id="specificSizeSelect">
<option selected>Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<div class="col-auto">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="autoSizingCheck2">
<label class="form-check-label" for="autoSizingCheck2">
Remember me
</label>
</div>
</div>
<div class="col-auto">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
Inline-Formulare
Use the .row-cols-*
classes to create responsive horizontal layouts. By adding gutter modifier classes, we’ll have gutters in horizontal and vertical directions. On narrow mobile viewports, the .col-12
helps stack the form controls and more. The .align-items-center
aligns the form elements to the middle, making the .form-checkbox
align properly.
<form class="row row-cols-lg-auto g-3 align-items-center">
<div class="col-12">
<label class="visually-hidden" for="inlineFormInputGroupUsername">Username</label>
<div class="input-group">
<div class="input-group-text">@</div>
<input type="text" class="form-control" id="inlineFormInputGroupUsername" placeholder="Username">
</div>
</div>
<div class="col-12">
<label class="visually-hidden" for="inlineFormSelectPref">Preference</label>
<select class="form-select" id="inlineFormSelectPref">
<option selected>Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<div class="col-12">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="inlineFormCheck">
<label class="form-check-label" for="inlineFormCheck">
Remember me
</label>
</div>
</div>
<div class="col-12">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>