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

bootstrap複選框怎麼實現

(*-*)浩
發布: 2019-07-18 13:45:25
原創
6607 人瀏覽過

複選框(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中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板