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.

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

2. Horizontale Form (Beschriftung links, Eingabefeld rechts)

<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>

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;

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

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>

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

(3) Eingabefeld kleiner als Basis

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

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

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

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