Heim > Web-Frontend > js-Tutorial > Hauptteil

Umfassende Analyse der Verwendung von Bootstrap-Formularen (Formularstilen)_Javascript-Kenntnissen

WBOY
Freigeben: 2016-05-16 15:30:26
Original
1455 Leute haben es durchsucht

1. Grundform

 <form >
 <div class="form-group">
 <label>邮箱:</label>
 <input type="email" class="form-control" placeholder="请输入您的邮箱地址">
 </div>
 <div class="form-group">
 <label >密码</label>
 <input type="password" class="form-control" placeholder="请输入您的邮箱密码">
 </div>
 <div class="checkbox">
 <label>
 <input type="checkbox"> 记住密码
 </label>
 </div>
 <button type="submit" class="btn btn-default">进入邮箱</button>
 </form>
Nach dem Login kopieren

Zusätzlich zu diesen Elementen verfügt das Formular auch über Eingabe-, Auswahl- und Textbereichselemente. Im Bootstrap-Framework wird ein Klassenname „form-control“ verwendet. Das heißt, wenn diese Elemente den Klassennamen verwenden „form-control“ erzielt einige Designanpassungseffekte.

1. Die Breite wird 100 %

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

3. Abgerundete Ecken mit 4px

4. Stellen Sie den Schatteneffekt ein. Wenn das Element den Fokus erhält, ändern sich die Schatten- und Randeffekte

5. Setzen Sie die Platzhalterfarbe auf #999

2. Horizontale Form
Das Standardformular des Bootstrap-Frameworks ist ein vertikaler Anzeigestil, aber oft benötigen wir einen horizontalen Formularstil (Beschriftungen links, Formularsteuerelemente 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-4">
 <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-4">
 <input type="password" class="form-control" id="inputPassword3" placeholder="请输入您的邮箱密码">
 </div>
 </div>
 </form>
Nach dem Login kopieren

Um horizontale Formeffekte im Bootstrap-Framework zu erzielen, müssen die folgenden zwei Bedingungen erfüllt sein:
1. Verwenden Sie im Element

den Klassennamen ".form-horizontal".
2. Grid-System, das mit dem Bootstrap-Framework zusammenarbeitet.

Die Verwendung des Klassennamens .form-horizontal“ im -Element hat hauptsächlich die folgenden Funktionen:
1. Legen Sie die Füll- und Randwerte des Formularsteuerelements fest.
2. Ändern Sie den Ausdruck von „form-group“ so, dass er dem „row“ des Rastersystems ähnelt.

3. Inline-Formular
Manchmal müssen wir alle Formularsteuerelemente in einer Zeile anzeigen

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

Es ist einfach, einen solchen Formulareffekt im Bootstrap-Framework zu implementieren. Sie müssen lediglich den Klassennamen „.form-inline“ zum hinzufügen.

Wenn Sie vor der Eingabe eine Beschriftung hinzufügen, wird die Eingabe in eine andere Zeile umgebrochen. Wenn Sie eine solche Beschriftung hinzufügen müssen und nicht möchten, dass die Eingabe umbrochen wird, müssen Sie die Beschriftung auch im Container „form-group“ platzieren.

Der obige Artikel ist der erste Artikel einer umfassenden Analyse zur Verwendung von Bootstrap-Formularen. Ich hoffe, dass Sie weiterhin darauf achten.

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage