首頁 >web前端 >Bootstrap教程 >bootstrap複選框怎麼實現

bootstrap複選框怎麼實現

(*-*)浩原創: 2019-07-18 13:45:256623瀏覽

複選框（Checkbox）

bootstrap複選框怎麼實現

當建立表單時，如果您想要讓使用者從清單中選擇若干個選項時，請使用checkbox。（建議學習：Bootstrap影片教學）

對一系列複選框使用 .checkbox-inline ，控制它們顯示在同一行上。

複選框，可以設定

為父元素，類別為.custom-control 和.custom-checkbox，複選框作為子元素放在該

裡頭，然後複選框設定為type="checkbox"，類別為.custom-control-input。

複選框的文字使用 label 標籤，標籤使用 .custom-control-label 類，label 的 for 屬性值需要符合複選框的 id。

實例

<div class="checkbox">
    <label><input type="checkbox" value="">选项 1</label>
</div>
<div class="checkbox">
    <label><input type="checkbox" value="">选项 2</label>
</div>    
#内联
<div>
    <label class="checkbox-inline">
        <input type="checkbox" id="inlineCheckbox1" value="option1"> 选项 1    </label>
    <label class="checkbox-inline">
        <input type="checkbox" id="inlineCheckbox2" value="option2"> 选项 2    </label>
    <label class="checkbox-inline">
        <input type="checkbox" id="inlineCheckbox3" value="option3"> 选项 3    </label>
</div>

更多Bootstrap相關技術文章，請造訪Bootstrap教學欄位進行學習！

以上是bootstrap複選框怎麼實現的詳細內容。更多資訊請關注PHP中文網其他相關文章！

bootstrap for checkbox input

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：bootstrap如何讀下一篇：bootstrap如何讀

看更多