ブートストラップがフォームに設定できる 3 つの状態は何ですか?

Bootstrap は、フォームに 3 つの状態を設定できます: 1. フォーカス状態 (ユーザーが入力または選択できることを通知します); 2. 無効状態 (ユーザーに入力または選択できないことを通知します); 3. . 検証ステータス。実行した操作が正しいかどうかをユーザーに知らせます。

このチュートリアルの動作環境: Windows 7 システム、ブートラップ バージョン 3.3.7、DELL G3 コンピューター

主要なフォーム コントロールが 3 つありますブートストラップの状態: フォーカス状態、無効状態、検証状態。

1. フォーカス状態: この状態は、ユーザーが何かを入力または選択できることを示します。

フォーカス状態は、擬似的な状態を通過します。 -class ":focus" を使用して実現します。

bootstrap.css 対応ソースコード:

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

使用方法: クラス名「form-control」をコントロールに追加します。

例:

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

レンダリングは次のとおりです: (フォーカス状態の青い境界線効果)

これにフォーカスしますファイル、ラジオ、およびチェックボックス コントロールの効果は、Bootstrap がそれらに対して特別な処理を行っているため、通常の入力スペースの効果とまったく同じではありません。

bootstrap.css 対応ソース コード:

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. 無効状態: この状態は、ユーザーに入力または選択できないことを伝えます

無効状態は、フォーム コントロールに「無効」属性を追加することによって実現されます。
bootstrap.css 対応ソース コード:

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

使用法: 無効にする必要があるフォーム コントロールに「diabled」属性を追加します。

例:

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

レンダリングは次のとおりです:

説明: コントロールの背景色無効状態のコントロールはグレーになり、手の形状は入力を禁止する形状になりますが、クラス名「form-control」を使用しないフォームコントロールの場合、無効状態のコントロールは入力を禁止する手の形状のみとなります。

PS: ブートストラップでは、フィールドセットが「無効」属性に設定されている場合、フィールド全体が無効になります。

例:

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

効果は以下のとおりです:

PS: 無効なドメインの場合、凡例入力ボックスがある場合、この入力ボックスを無効にすることはできません。

例:

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

レンダリングは次のとおりです:

3.検証ステータス: このステータスは、操作が正しいかどうかをユーザーに示します。

Bootstrap で 3 つの検証ステータス スタイルを提供します:

① .has-success: 成功ステータス(緑)

② .has-error: エラーステータス (赤)

③ .has-warning: 警告ステータス (黄)

使用法: フォーム内に追加するだけです。 -group コンテナに対応するステータス クラス名。

例:

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

説明: 効果から、3 つのスタイルは色が異なることを除いて同じ効果を持つことがわかります。

Bootstrap のフォーム検証では、成功を表すチェック マーク「√」、エラーを表すバツ印「×」など、状態ごとに異なるアイコンが表示されます。

フォームに対応するアイコンをさまざまな状態で表示したい場合は、対応する状態にクラス名「has-フィードバック」を追加するだけです。

PS: クラス名「has-feedback」は、「has-error」、「has-warning」、および「has-success」と組み合わせて使用​​する必要があります。

例:

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

効果は次のとおりです:

注: レンダリングからわかるように、アイコンは右側にあります。

注: Bootstrap のアイコンはすべて @face-face を使用して作成されており、これを実現するにはフォームにspan要素を追加する必要があります。

例:

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

[関連する推奨事項:「ブートストラップ チュートリアル」]

以上がブートストラップがフォームに設定できる 3 つの状態は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。