So erstellen Sie ein Formularlayout mit Bootstrap

Bootstrap bietet drei Arten von Formularlayouts: vertikale Formulare, horizontale Formulare und Inline-Formulare. Sie werden durch externes Einführen von JavaScript- und CSS-Dateien in Bootstrap und Hinzufügen von Klassennamen zu Element-Formularsteuerelementen

festgelegt

HTML-Formulare sind ein integraler Bestandteil von Webseiten und Anwendungen, aber das manuelle Einrichten von Formularsteuerelementen einzeln und nur mit CSS ist oft umständlich und mühsam. Heutzutage, mit dem Aufkommen von Bootstrap, wurde der Stil- und Ausrichtungsprozess von Formularsteuerelementen wie Beschriftungen, Eingabefeldern, Auswahlfeldern und Sendefeldern im Formular erheblich vereinfacht. Als nächstes werden wir in diesem Artikel den Formularlayoutstil in Bootstrap im Detail vorstellen

[Empfohlener Kurs: Bootstrap-Kurs]

In Bootstrap stehen drei verschiedene Arten von Formularlayouts zur Verfügung:

• Vertikales Formular (Standardtabellenlayout)

• Horizontales Formular

• Inline-Formular

Im folgenden Artikel werde ich diese Formularlayouts und -details einzeln vorstellen . Verschiedene formularbezogene Bootstrap-Komponenten

Bootstrap extern einführen

<link rel="stylesheet" type="text/css" href=".\bootstrap-3.3.7-dist\css\bootstrap.css">
<script type="text/javascript" src=".\bootstrap-3.3.7-dist\js\bootstrap.min.js"></script>

Vertikales Formularlayout erstellen

Dies ist der Standard-Bootstrap Formularlayout, bei dem Stile auf Formularsteuerelemente angewendet werden, ohne dass dem

-Element Basisklassen hinzugefügt werden oder größere Änderungen am Markup vorgenommen werden.

Die Formularsteuerelemente in diesem Layout haben linksbündig ausgerichtete Beschriftungen, die oben gestapelt sind

Beispiel:

<div style="margin:20px;">
    <form action="#" method="post">
        <div class="form-group">
            <label for="inputName">用户名</label>
            <input type="username" class="form-control" id="inputName" placeholder="username" required>
        </div>
        <div class="form-group">
            <label for="inputPassword">密码</label>
            <input type="password" class="form-control" id="inputPassword" placeholder="Password" required>
        </div>
        <div class="checkbox">
            <label><input type="checkbox">记住密码</label>
        </div>
        <button type="submit" class="btn btn-primary">登录</button>
    </form>
</div>

Rendering:

Erstellen Sie ein Tabellenlayout im Querformat

Im Querformat werden Layoutbeschriftungen rechtsbündig ausgerichtet und nach links verschoben, sodass sie in derselben Zeile wie die Formularsteuerelemente angezeigt werden. Das Querformat-Formularlayout erfordert verschiedene Markup-Änderungen im Standard-Formularlayout. Im Folgenden sind die spezifischen Schritte zum Implementieren des horizontalen Formularlayouts aufgeführt:

(1) Fügen Sie die Klasse .form-horizontal zum Formularelement hinzu

(2) Implementieren Sie Verpackungs-Tags und Formularsteuerelemente im div Element und fügen Sie die .form-group-Klasse hinzu

(3) Verwenden Sie die vordefinierte Rasterklasse von Bootstrap, um Beschriftungen und Formularsteuerelemente auszurichten

(4) Fügen Sie .control-label zum Label-Element im < hinzu. label> ;Klasse

<div>
    <form class="form-horizontal" action="#" method="post">
        <div class="form-group">
            <label for="inputName" class="control-label col-xs-2">用户名</label>
            <div class="col-xs-10">
                <input type="username" class="form-control" id="inputName" placeholder="username" required>
            </div>
        </div>
        <div class="form-group">
            <label for="inputPassword" class="control-label col-xs-2">密码</label>
            <div class="col-xs-10">
                <input type="password" class="form-control" id="inputPassword" placeholder="Password" required>
            </div>
        </div>
        <div class="form-group">
            <div class="col-xs-offset-2 col-xs-10">
                <div class="checkbox">
                    <label><input type="checkbox">记住密码</label>
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="col-xs-offset-2 col-xs-10">
                <button type="submit" class="btn btn-primary">登录</button>
            </div>
        </div>
    </form>
</div>

Rendering:

Inline-Formularlayout erstellen

Manchmal in Beim Erstellen Platzieren Sie in einem Formular Formularsteuerelemente nebeneinander, um das Layout zu komprimieren. Wenn Sie diesen Effekt erzielen möchten, können Sie dem Formularelement die Klasse „form-inline“ hinzufügen.

<div   style="max-width:90%">
    <form class="form-inline" action="#" method="post">
        <div class="form-group">
            <label class="sr-only" for="inputName">用户名</label>
            <input type="username" class="form-control" id="inputName" placeholder="username" required>
        </div>
        <div class="form-group">
            <label class="sr-only" for="inputPassword">密码</label>
            <input type="password" class="form-control" id="inputPassword" placeholder="Password" required>
        </div>
        <div class="checkbox">
            <label><input type="checkbox">记住密码</label>
        </div>
        <button type="submit" class="btn btn-primary">登录</button>
    </form>
</div>

Rendering:

Zusammenfassung: Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, Sie können den Formularlayoutstil in Bootstrap lernen . Hilft.

Das obige ist der detaillierte Inhalt vonSo erstellen Sie ein Formularlayout mit Bootstrap. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!