Quels sont les trois états que le bootstrap peut définir pour le formulaire ?

Bootstrap peut définir trois états pour le formulaire : 1. État de focus, qui indique à l'utilisateur qu'il peut saisir ou sélectionner des éléments ; 2. État désactivé, qui indique à l'utilisateur qu'il ne peut pas saisir ou sélectionner d'éléments ; 3. État de vérification. qui indique Indiquer à l'utilisateur si l'opération qu'il a effectuée est correcte.

L'environnement d'exploitation de ce didacticiel : système Windows 7, version bootsrap 3.3.7, ordinateur DELL G3

Il existe trois états principaux des contrôles de formulaire dans Bootstrap : l'état de focus, l'état désactivé et l'état de vérification.

1. État de focus : cet état indique à l'utilisateur qu'il peut saisir ou sélectionner quelque chose

L'état de focus est implémenté via la pseudo-classe ":focus".

bootstrap.css code source correspondant :

.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);
}

Utilisation : Ajoutez le nom de classe "form-control" au contrôle.

Par exemple :

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

L'image de l'effet est la suivante : (effet de bordure bleue dans l'état de focus)

Dans l'état de focus, les effets des contrôles de fichier, de radio et de case à cocher ne sont pas exactement les mêmes que ceux d'une entrée ordinaire space. Parce que bootstrap a effectué un traitement spécial pour eux.

bootstrap.css code source correspondant :

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. État désactivé : Cet état indique à l'utilisateur qu'il ne peut pas saisir ou sélectionner des éléments

L'état désactivé est obtenu en ajoutant l'attribut "désactivé" au formulaire contrôle.
bootstrap.css code source correspondant :

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

Instructions : Ajoutez l'attribut "diabled" au contrôle de formulaire qui doit être désactivé.

Par exemple :

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

Le rendu est le suivant :

Remarque : à l'état désactivé, la couleur d'arrière-plan du contrôle est grise et la forme de la main prend une forme qui interdit la saisie si le. le contrôle de formulaire n'utilise pas de nom de classe "form-control", le contrôle désactivé n'a qu'une seule forme de main qui n'est pas autorisée à saisir.

PS : Dans Bootstrap, si l'ensemble de champs est défini sur l'attribut "disabled", tout le champ est désactivé.

eg :

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

L'effet est le suivant :

PS : Pour un domaine désactivé, s'il y a une zone de saisie dans la légende, cette zone de saisie ne peut pas être désactivée.

eg :

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

Le rendu est le suivant :

3. Statut de vérification : Ce statut indique à l'utilisateur si son opération est correcte

Fournit 3 statuts de vérification dans le style Bootstrap :

① .has-success : statut de réussite (vert)

② .has-error : statut d'erreur (rouge)

③ .has-warning : statut d'avertissement (jaune)

Utilisation : dans le groupe de formulaires Ajoutez simplement le nom de classe d’état correspondant au conteneur.

Par exemple :

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

Explication : L'effet montre que les trois styles ont le même effet à l'exception des couleurs différentes.

Dans la validation du formulaire Bootstrap, différentes icônes seront fournies pour différents états, comme une coche "√" pour le succès, une croix "×" pour l'erreur, etc.

Si vous souhaitez que le formulaire affiche l'icône correspondante dans différents états, il vous suffit d'ajouter le nom de la classe "has-feedback" dans l'état correspondant.

PS : Le nom de la classe "has-feedback" doit être utilisé en conjonction avec "has-error", "has-warning" et "has-success".

Par exemple :

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

L'effet est le suivant :

Explication : Comme le montre l'image de l'effet, les icônes sont toutes à droite.

Remarque : les icônes dans Bootstrap sont toutes créées à l'aide de @face-face, et un élément span doit être ajouté au formulaire pour y parvenir.

Par exemple :

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

[Recommandation associée : "Tutoriel bootstrap"]

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!