Welche drei Zustände kann Bootstrap für das Formular festlegen?

Bootstrap kann drei Status für das Formular festlegen: 1. Fokusstatus, der dem Benutzer mitteilt, dass er Dinge eingeben oder auswählen kann; 2. Deaktivierter Status, der dem Benutzer mitteilt, dass er keine Dinge eingeben oder auswählen kann; Darin heißt es: Teilen Sie dem Benutzer mit, ob die von ihm durchgeführte Operation korrekt ist.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, Bootsrap-Version 3.3.7, DELL G3-Computer

Es gibt drei Hauptzustände von Formularsteuerelementen in Bootstrap: Fokusstatus, deaktivierter Status und Überprüfungsstatus.

1. Fokuszustand: Dieser Zustand sagt dem Benutzer, dass er etwas eingeben oder auswählen kann

Der Fokuszustand wird durch die Pseudoklasse „:focus“ implementiert.

bootstrap.css entsprechender Quellcode:

.form-control:focus {
    border-color: #66afe9;
    outline: 0;   //删除了outline的默认样式
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);  //添加了阴影效果
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
}

Verwendung: Fügen Sie dem Steuerelement den Klassennamen „form-control“ hinzu.

zB:

<input class="form-control" type="text" placeholder="不是焦点状态下效果">
<input class="form-control" type="text" placeholder="焦点状态下效果">

Das Effektbild sieht wie folgt aus: (blauer Randeffekt im Fokuszustand)

Im Fokuszustand sind die Auswirkungen von Datei-, Radio- und Kontrollkästchen-Steuerelementen nicht genau die gleichen wie bei normalen Eingaben Weil Bootstrap eine spezielle Verarbeitung für sie durchgeführt hat.

bootstrap.css entsprechender Quellcode:

input[type="file"]:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus {outline: thin dotted;outline: 5px auto -webkit-focus-ring-color;outline-offset: -2px;
}

2. Deaktivierter Zustand: Dieser Zustand teilt dem Benutzer mit, dass er keine Dinge eingeben oder auswählen kann

Der deaktivierte Zustand wird durch Hinzufügen des Attributs „disabled“ zum Formular erreicht Kontrolle.
bootstrap.css entsprechender Quellcode:

.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
    cursor: not-allowed;
    background-color: #eee;
    opacity: 1;
}

Anweisungen: Fügen Sie das Attribut „diabled“ zum Formularsteuerelement hinzu, das deaktiviert werden muss.

zB:

<input class="form-control" type="text" placeholder="不是焦点状态下效果">
<input class="form-control" type="text" placeholder="表单已禁用，不能输入"  disabled>

Die Darstellung ist wie folgt:

Hinweis: Im deaktivierten Zustand ist die Hintergrundfarbe des Steuerelements grau und die Handform ändert sich in eine Form, die eine Eingabe verhindert Formularsteuerung verwendet keinen Klassennamen „form-control“, das deaktivierte Steuerelement verfügt nur über eine Handform, die nicht eingegeben werden darf.

PS: Wenn in Bootstrap das Feldset auf das Attribut „disabled“ gesetzt ist, ist das gesamte Feld deaktiviert.

zB:

<form role="form">
    <fieldset disabled>
        <div class="form-group">
            <label for="disabledTextInput">禁用的输入框</label>
            <input type="text" id="disabledTextInput" class="form-control" placeholder="禁止输入">
        </div>
        <div class="form-group">
            <label for="disabledSelect">禁用的下拉框</label>
            <select id="disabledSelect" class="form-control">
                <option>不可选择</option>
            </select>
        </div>
        <div class="checkbox">
            <label>
                <input type="checkbox">无法选择
            </label>
        </div>
        <button type="submit" class="btnbtn-primary">提交</button>
    </fieldset>
</form>

Der Effekt ist wie folgt:

PS: Wenn in der Legende ein Eingabefeld für eine deaktivierte Domäne vorhanden ist, kann dieses Eingabefeld nicht deaktiviert werden.

zB:

<form role="form">
    <fieldset disabled>
        <legend><input type="text" class="form-control" placeholder="我没被禁用" /></legend>
        <div class="form-group">
            <label for="disabledTextInput">禁用的输入框</label>
            <input type="text" id="disabledTextInput" class="form-control" placeholder="禁止输入">
        </div>
        <div class="form-group">
            <label for="disabledSelect">禁用的下拉框</label>
            <select id="disabledSelect" class="form-control">
                <option>不可选择</option>
            </select>
        </div>
        <div class="checkbox">
            <label>
                <input type="checkbox">无法选择
            </label>
        </div>
        <button type="submit" class="btnbtn-primary">提交</button>
　　</fieldset>
</form>

Die Darstellung ist wie folgt:

3. Dieser Status teilt dem Benutzer mit, ob seine Operation korrekt ist

Bietet 3 Überprüfungsstatus im Bootstrap-Stil:

① .has-success: Erfolgsstatus (grün)

② .has-error: Fehlerstatus (rot)

③ .has-warning: Warnstatus (gelb)

Verwendung: in form-group Fügen Sie einfach die hinzu entsprechenden Zustandsklassennamen für den Container.

zB:

<form role="form">
    <div class="form-group has-success">
        <label class="control-label" for="inputSuccess1">成功状态</label>
        <input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态" >
    </div>
    <div class="form-group has-warning">
        <label class="control-label" for="inputWarning1">警告状态</label>
        <input type="text" class="form-control" id="inputWarning1" placeholder="警告状态">
    </div>
    <div class="form-group has-error">
        <label class="control-label" for="inputError1">错误状态</label>
        <input type="text" class="form-control" id="inputError1" placeholder="错误状态">
    </div>
</form>

Erläuterung: Aus dem Effekt ist ersichtlich, dass die drei Stile bis auf die unterschiedlichen Farben den gleichen Effekt haben.

Bei der Formularvalidierung von Bootstrap werden unterschiedliche Symbole für unterschiedliche Zustände bereitgestellt, z. B. ein Häkchen „√“ für Erfolg, ein Kreuz „ד für Fehler usw.

Wenn Sie möchten, dass das Formular das entsprechende Symbol in verschiedenen Zuständen anzeigt, müssen Sie nur den Klassennamen „has-feedback“ im entsprechenden Zustand hinzufügen.

PS: Der Klassenname „has-feedback“ sollte in Verbindung mit „has-error“, „has-warning“ und „has-success“ verwendet werden.

zB:

<form role="form">
    <div class="form-group has-success has-feedback">
        <label class="control-label" for="inputSuccess">成功状态</label>
        <input type="text" class="form-control" id="inputSuccess" placeholder="成功状态" >
        <span class="glyphicon glyphicon-ok form-control-feedback"></span>
    </div>
    <div class="form-group has-warning has-feedback">
        <label class="control-label" for="inputWarning">警告状态</label>
        <input type="text" class="form-control" id="inputWarning" placeholder="警告状态" >
        <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
　　</div>
　　<div class="form-group has-error has-feedback">
        <label class="control-label" for="inputError">错误状态</label>
        <input type="text" class="form-control" id="inputError" placeholder="错误状态" >
        <span class="glyphicon glyphicon-remove form-control-feedback"></span>
　　</div>
</form>

Der Effekt ist wie folgt:

Erklärung: Wie auf dem Effektbild zu sehen ist, befinden sich die Symbole alle auf der rechten Seite.

Hinweis: Die Symbole in Bootstrap werden alle mit @face-face erstellt, und um dies zu erreichen, muss dem Formular ein span-Element hinzugefügt werden.

eg:

<span class="glyphicon glyphicon-remove form-control-feedback"></span>

[Verwandte Empfehlung: „Bootstrap-Tutorial“]

Das obige ist der detaillierte Inhalt vonWelche drei Zustände kann Bootstrap für das Formular festlegen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!