Apakah tiga keadaan yang boleh ditetapkan bootstrap untuk borang?

Bootstrap boleh menetapkan tiga keadaan untuk borang: 1. Keadaan fokus, yang memberitahu pengguna bahawa mereka boleh memasukkan atau memilih perkara; . Status Pengesahan, yang memberitahu pengguna sama ada operasi yang dilakukannya adalah betul.

Persekitaran pengendalian tutorial ini: sistem Windows 7, bootsrap versi 3.3.7, komputer DELL G3

Terdapat tiga keadaan utama kawalan borang dalam Bootstrap: Keadaan fokus, keadaan dilumpuhkan, keadaan pengesahan.

1 Keadaan fokus: Keadaan ini memberitahu pengguna bahawa mereka boleh memasukkan atau memilih sesuatu

Keadaan fokus melepasi pseudo. -kelas ":fokus" untuk dicapai.

bootstrap.css kod sumber yang sepadan:

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

Penggunaan: Tambahkan nama kelas "kawalan borang" pada kawalan.

cth:

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

Rendering adalah seperti berikut: (kesan sempadan biru dalam keadaan fokus)

Dalam keadaan fokus, kesan fail, radio dan kawalan kotak semak tidak betul-betul sama dengan ruang input biasa, kerana bootstrap telah melakukan pemprosesan khas untuknya.

bootstrap.css kod sumber yang sepadan:

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. Keadaan dilumpuhkan: Keadaan ini memberitahu pengguna bahawa mereka tidak boleh memasukkan atau memilih perkara

Keadaan kurang upaya dicapai dengan menambahkan atribut "dilumpuhkan" pada kawalan borang.
bootstrap.css kod sumber yang sepadan:

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

Penggunaan: Tambahkan atribut "didayakan" pada kawalan borang yang perlu dilumpuhkan.

cth:

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

Perenderan adalah seperti berikut:

Nota: Kawalan dalam keadaan kurang upaya Warna latar belakang berwarna kelabu, dan bentuk tangan berubah kepada bentuk yang melarang input Jika kawalan borang tidak menggunakan nama kelas "kawalan borang", kawalan yang dilumpuhkan hanya mempunyai bentuk tangan yang melarang input.

PS: Dalam Bootstrap, jika set medan menetapkan atribut "dilumpuhkan", keseluruhan medan akan dilumpuhkan.

cth:

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

Kesannya adalah seperti yang ditunjukkan di bawah:

PS: Untuk domain yang dilumpuhkan, jika Jika terdapat kotak input dalam legenda, kotak input ini tidak boleh dilumpuhkan.

cth:

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

Rendering adalah seperti berikut:

3. Status pengesahan: Status ini memberitahu pengguna sama ada operasi mereka betul

Menyediakan 3 gaya status pengesahan dalam Bootstrap:

① .has- success: success status (hijau)

② .has-error: status ralat (merah)

③ .has-warning: status amaran (kuning)

Penggunaan: Hanya tambahkan yang sepadan nyatakan nama kelas kepada bekas kumpulan borang.

cth:

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

Penjelasan: Seperti yang dapat dilihat daripada kesannya, ketiga-tiga gaya mempunyai kesan yang sama kecuali warna yang berbeza.

Dalam pengesahan borang Bootstrap, ikon berbeza akan disediakan untuk keadaan berbeza, seperti tanda semak "√" untuk kejayaan, pangkah "×" untuk ralat, dsb.

Jika anda mahu borang memaparkan ikon yang sepadan dalam keadaan yang berbeza, anda hanya perlu menambah nama kelas "mempunyai maklum balas" dalam keadaan yang sepadan.

PS: Nama kelas "has-feedback" harus digunakan bersama dengan "has-error", "has-warning" dan "has-success".

cth:

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

Kesannya adalah seperti berikut:

Penjelasan: Seperti yang dapat dilihat daripada rendering , Semua ikon berada di sebelah kanan.

Nota: Ikon dalam Bootstrap semuanya dibuat menggunakan @face-face dan elemen span mesti ditambahkan pada borang untuk mencapainya.

cth:

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

[Cadangan berkaitan: "tutorial bootstrap"]

Atas ialah kandungan terperinci Apakah tiga keadaan yang boleh ditetapkan bootstrap untuk borang?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!