Eine umfassende, ausführliche Studie über Bootstrap-Formulare

Vorwort: Da das Formular viele Elemente enthält, werden wir das Bootstrap-Formular separat zusammenfassen. Als Kerninhalt von Bootstrap ist die Hauptfunktion des Formulars eine Websteuerung, die zur Kommunikation mit Benutzern verwendet werden kann Machen Sie die Webseite besser mit Benutzern kommunizieren. Zu den gängigen Elementen in Formularen gehören hauptsächlich: Texteingabefelder, Dropdown-Auswahlfelder, Optionsfelder, Kontrollkästchen, Textfelder und Schaltflächen usw.

1. Grundform

<form role="form">
 <div class="form-group">
  <label for="exampleInputEmail1">邮箱：</label>
  <input type="email" class="form-control" id="exampleInputEmail1" placeholder="请输入您的邮箱地址">
 </div>
 <div class="form-group">
  <label for="exampleInputPassword1">密码</label>
  <input type="password" class="form-control" id="exampleInputPassword1" placeholder="请输入您的邮箱密码">
 </div>
 <button type="submit" class="btn btn-default">进入邮箱</button>
</form>

Ausführliche Erklärung:

(1) Das Rollenattribut des Formular-Tags dient nur der Verbesserung der Semantik und nichts anderem Funktion;

(2) Legen Sie den .form-group-Klassennamen für das Div fest, um einen bestimmten Abstand zwischen der Ober- und Unterseite jedes Eingabefelds einzuhalten, andernfalls liegen die beiden nebeneinander.

(3) Das for-Attribut des Labels und die ID der Eingabe müssen denselben Namen haben, um zu erkennen, dass es sich um eine Gruppe handelt. Wenn die Maus auf das Label-Label klickt, wird der Cursor automatisch fixiert Wenn das for-Attribut nicht verwendet wird, können Sie auch so schreiben:Email:, die Länge der Eingabe entspricht nicht der Bildschirmbreite (4) Fügen Sie die .form-control-Klasse zum Formular hinzu:
1.

2. Legen Sie einen hellgrauen (#ccc) Rand fest.

3. Stellen Sie den Schatteneffekt ein. Wenn das Element fokussiert ist, ändern sich die Schatten- und Randeffekte.

2. Horizontale Form (Beschriftung links, Eingabefeld rechts)

Detaillierte Erklärung:

<form class="form-horizontal" role="form">
 <div class="form-group">
  <label for="inputEmail3" class="col-sm-2 control-label">邮箱</label>
  <div class="col-sm-10">
   <input type="email" class="form-control" id="inputEmail3" placeholder="请输入您的邮箱地址">
  </div>
 </div>
 <div class="form-group">
  <label for="inputPassword3" class="col-sm-2 control-label">密码</label>
  <div class="col-sm-10">
   <input type="password" class="form-control" id="inputPassword3" placeholder="请输入您的邮箱密码">
  </div>
 </div>
 <div class="form-group">
  <div class="col-sm-offset-2 col-sm-10">
   <button type="submit" class="btn btn-default">进入邮箱</button>
  </div>
 </div>
</form>

Verwendung der Klasse .form -Horizontal auf dem Formular-Tag hat hauptsächlich die folgenden Funktionen:

1. Legen Sie die Abstands- und Randwerte der Formularsteuerung fest.
2. Ändern Sie den Ausdruck von „form-group“, ähnlich wie bei der „Zeile“ des Rasters System;

Es muss in Verbindung mit dem Rastersystem verwendet werden, um den horizontalen Effekt zu erzielen. Bei der Verwendung können Sie die Größe des Browsers anpassen Ist die Browsergröße kleiner als ein bestimmter Wert, wird er vertikal angezeigt.

3. Inline-Formular (Formularsteuerelemente werden in einer Zeile angezeigt)

Detaillierte Erklärung:

Manchmal verwenden wir zur Eingabe die Navigationsleiste oben auf der Webseite Zu diesem Zeitpunkt müssen der Benutzername und das Kennwort in einer Zeile angezeigt werden. Zu diesem Zeitpunkt kann die .form-inline-Klasse problemlos zum Formular-Tag hinzugefügt werden Wenn das Gerät geändert wird, werden automatisch Zeilenumbrüche vorgenommen, die den Stil einer Normalform anzeigen.

<form class="form-inline" role="form">
 <div class="form-group">
  <label for="exampleInputEmail2">邮箱</label>
  <input type="email" class="form-control" id="exampleInputEmail2" placeholder="请输入你的邮箱地址">
 </div>
 <div class="form-group">
  <label for="exampleInputPassword2">密码</label>
  <input type="password" class="form-control" id="exampleInputPassword2" placeholder="请输入你的邮箱密码">
 </div>
 <button type="submit" class="btn btn-default">进入邮箱</button>
</form>

4. Grundelemente des Formulars

1. Durch Hinzufügen der Klasse .form-control kann der grundlegendste Eingabefeldstil realisiert werden

(1) Basis-Eingabefeld

(2) Eingabefeld größer als Basis

<input type="text" class="form-control">

(3) Eingabefeld kleiner als Basis

<input type="text" class="form-control input-lg">

2. Textarea-Element: Fügen Sie die Klasse .form-control hinzu, ohne den cols-Attributwert festzulegen. Zu diesem Zeitpunkt beträgt die Etikettenbreite 100 %

<input type="text" class="form-control input-sm">

3 , Als Dropdown-Auswahlfeld können mehrzeilige Auswahl und einzeilige Auswahl realisiert werden, und die .form-control-Klasse wird nur für denselben Stil hinzugefügt

<textarea rows="5" class="form-control">

4., Kontrollkästchen-Kontrollkästchen und Radio-Button-Radio:

<select class="form-control"><option>222</option></select>

(1) Zwei Klassen, .checkbox und .radio, wurden speziell für Checkbox und Radio geschrieben, um das Ausrichtungsproblem zu lösen. Der folgende Code wird vertikal angezeigt