bootstrap 5，bootstrap checkbox_[推薦]icheck-bootstrap(漂亮的ckeckbox/radiobox)

2023-11-10 阅读 20 评论 0

摘要：適用于Twitter Bootstrap框架的純CSS樣式的復選框/單選框按鈕的插件。GitHub：https://github.com/bantikyan/icheck-bootstrap如果你在自定義HTML復選框/單選框按鈕時遇到問題，選擇icheck-bootstrap是一個明智的選擇，它可以加快你對復選框/單選框樣式的設

適用于Twitter Bootstrap框架的純CSS樣式的復選框/單選框按鈕的插件。
GitHub：https://github.com/bantikyan/icheck-bootstrap
如果你在自定義HTML復選框/單選框按鈕時遇到問題，選擇icheck-bootstrap是一個明智的選擇，它可以加快你對復選框/單選框樣式的設置和選擇。

開始使用

下面幾個選項可以讓你快速使用到icheck-bootstap：

下載最新版本https://github.com//bantikyan/icheck-bootstrap/archive/3.0.1.zip
通過Bower安裝：bower install icheck-bootstrap
通過npm安裝：npm install icheck-bootstrap
通過nuget安裝：Install-Package icheck-bootstrap
使用CDN：jsDelivr

HTML語法

checkbox例子：

<div class="icheck-primary"><input type="checkbox" id="someCheckboxId"  data-tomark-pass /><label for="someCheckboxId">Click to check</label>
</div>

radio按鈕例子：

<div class="icheck-primary"><input type="radio" id="someRadioId1" name="someGroupName"  data-tomark-pass /><label for="someRadioId1">Option 1</label>
</div>
<div class="icheck-primary"><input type="radio" id="someRadioId2" name="someGroupName"  data-tomark-pass /><label for="someRadioId2">Option 2</label>
</div>

行排列樣式

要內嵌復選框/單選框按鈕，需要使用.icheck-inline樣式

<div class="icheck-primary icheck-inline"><input type="checkbox" id="chb1"  data-tomark-pass /><label for="chb1">Label 1</label>
</div>
<div class="icheck-primary icheck-inline"><input type="checkbox" id="chb2"  data-tomark-pass /><label for="chb2">Label 2</label>
</div>

禁用（disabled）

在復選框/單選框按鈕上使用禁用屬性可以禁用樣式

無標簽樣式

要使的組件沒有文字標簽，但是您仍然必須具有帶空白文本的標簽組件。

<div class="icheck-primary"><input type="checkbox" id="someCheckboxId"  data-tomark-pass /><label for="someCheckboxId"></label>
</div>

配色方案

可查看后面圖片的例子Twitter Bootstrap：如你將要看到示例樣式的一樣，icheck-primary類用于組件的樣式，你可以將一下類用于Bootstrap的配色方案：

.icheck-default
.icheck-primary
.icheck-success
.icheck-info
.icheck-warning
.icheck-danger

扁平樣式顏色：你也可以從flatuicolors.com中選擇你喜歡的非常漂亮的顏色使用。

.icheck-turquoise
.icheck-emerland
.icheck-peterriver
.icheck-amethyst
.icheck-wetasphalt
.icheck-greensea
.icheck-nephritis
.icheck-belizehole
.icheck-wisteria
.icheck-midnightblue
.icheck-sunflower
.icheck-carrot
.icheck-alizarin
.icheck-clouds
.icheck-concrete
.icheck-orange
.icheck-pumpkin
.icheck-pomegranate
.icheck-silver
.icheck-asbestos