怎么實(shí)現(xiàn)bootstrap復(fù)選框

這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)?lái)有關(guān)怎么實(shí)現(xiàn)bootstrap復(fù)選框，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

                                                           復(fù)選框（Checkbox）

當(dāng)創(chuàng)建表單時(shí)，如果您想讓用戶從列表中選擇若干個(gè)選項(xiàng)時(shí)，請(qǐng)使用checkbox。

對(duì)一系列復(fù)選框使用 .checkbox-inline ，控制它們顯示在同一行上。

復(fù)選框，可以設(shè)置 <div> 為父元素，類為 .custom-control 和 .custom-checkbox，復(fù)選框作為子元素放在該 <div> 里頭，然后復(fù)選框設(shè)置為 type="checkbox"，類為 .custom-control-input。

復(fù)選框的文本使用 label 標(biāo)簽，標(biāo)簽使用 .custom-control-label 類，label 的 for 屬性值需要匹配復(fù)選框的 id。

實(shí)例

<div class="checkbox">
    <label><input type="checkbox" value="">選項(xiàng) 1</label>
</div>
<div class="checkbox">
    <label><input type="checkbox" value="">選項(xiàng) 2</label>
</div>    
#內(nèi)聯(lián)
<div>
    <label class="checkbox-inline">
        <input type="checkbox" id="inlineCheckbox1" value="option1"> 選項(xiàng) 1    </label>
    <label class="checkbox-inline">
        <input type="checkbox" id="inlineCheckbox2" value="option2"> 選項(xiàng) 2    </label>
    <label class="checkbox-inline">
        <input type="checkbox" id="inlineCheckbox3" value="option3"> 選項(xiàng) 3    </label>
</div>

上述就是小編為大家分享的怎么實(shí)現(xiàn)bootstrap復(fù)選框了，如果剛好有類似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道。