Bootstrap-Lernformularformat und Schriftartensymbole

In diesem Artikel werden Ihnen die Listengruppenkomponente, die Panelkomponente und die responsive eingebettete Komponente in BootStrap vorgestellt. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein. Wenn Sie weitere Video-Tutorials zum Thema Bootstrap lernen und erhalten möchten, können Sie auch Folgendes besuchen: Bootstrap-Tutorial!

Formularformat

.form-group: Formulargruppe (Beschriftungen und Eingabefelder sollten so weit wie möglich von dieser Klasse umgeben sein)

.form-control: Für Eingabe-, Textbereichs- und Auswahlelemente wird das Attribut width standardmäßig auf width:100 % gesetzt. Abgerundeter Rand

.form-inline: Für das Formular-Tag ist Inline-Formular festgelegt dass das Feld darin den Wert so ändert, dass er horizontal angeordnet ist

.form-horizontal: Für ein Formular, das horizontal angeordnet ist, indem Sie dem Formular die Klasse .form-horizontal hinzufügen und die voreingestellte Rasterklasse von Bootstrap verwenden, die Beschriftung Beschriftungen und Kontrollgruppen können im horizontalen Layout nebeneinander gruppiert werden. Dadurch wird das Verhalten von .form-group so geändert, dass es sich wie eine Zeile im Rastersystem verhält, sodass keine zusätzliche .row hinzugefügt werden muss.

.sr-only: Es wird hauptsächlich für verwendet label Zum Festlegen das Label ausblenden

Ein einfaches Anmeldefeld

		<p class="container">
			<form action="#" method="post" class="form-horizontal">
				<p class="form-group">
				<label for="user" class="col-lg-2 control-label">用户名</label>
				<p class="col-lg-10"><input type="text" name="user" id="user" value="" class="form-control" /></p>
				</p>
				<p class="form-group">
				<label for="pd" class="col-lg-2 control-label">密码</label> 
				<p class="col-lg-10"><input type="password" name="pd" id="pd" value="" class="form-control" /></p>
				</p>
				<p class="form-group col-lg-5 col-lg-offset-5">
				<p class="col-lg-5 col-lg-offset-5"">
				<input type="checkbox" name="" id="cx" value="" />
				<label for="cx">是否同意</label>
				</p>
				<p class="col-lg-2 col-lg-offset-5">
				<button type="submit" class="btn btn-success">提交</button>
				</p>
			</form>
		</p>

Das Control-Label hier ist der Stil für die Label-Synchronisierungseingabe

Schriftsymbole

Aus Leistungsgründen erfordern alle Symbole eine Basisklasse und eine jedem Symbol entsprechende Klasse. Geben Sie den folgenden Code ein und es funktioniert überall einwandfrei. Beachten Sie, dass Sie zum Einstellen des korrekten Abstands unbedingt ein Leerzeichen zwischen dem Symbol und dem Text einfügen müssen. Für bestimmte Schriftartsymbole besuchen Sie bitte die chinesische Bootstrap-Website (https://v3.bootcss.com/components/).

Zusammenfassung: Das Obige ist der gesamte Inhalt dieses Artikels, ich hoffe, dass er für das Studium aller hilfreich sein wird.

Das obige ist der detaillierte Inhalt vonBootstrap-Lernformularformat und Schriftartensymbole. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!