组件 -- Button

.btn

---------------------------------

button的背景色：

.btn-primary

.btn-success

.btn-secondary

.btn-danger

.btn-info

.btn-light

.btn-dark

.btn-link

--------------------------

button的边框颜色：

.btn-outline-primary

.btn-outline-secondary

.btn-outline-success

--------------------------------

大小：

.btn-lg

.btn-sm

-------------------------------

状态：

.active

.disabled

disabled作为类只适用于<a>标签，不适用于<button>标签，<button>标签中disabled作为一种属性使用，例如：

<button type="button" class="btn btn-lg btn-primary" disabled>Primary button</button>

<a href="#" class="btn btn-secondary btn-lg disabled" role="button" aria-disabled="true">Link</a>

-----------------------------------

可使用的元素：

<a> <input> <button>

-----------------------------------

混合使用：

.button可与checkbox、radio等混合使用，会产生特殊的效果，如：

实例代码：

<div class="btn-group btn-group-toggle" data-toggle="buttons">

 <label class="btn btn-secondary active"> <input type="radio" name="options" id="option1" autocomplete="off" checked> Active </label> <label class="btn btn-secondary"> <input type="radio" name="options" id="option2" autocomplete="off"> Radio </label> <label class="btn btn-secondary"> <input type="radio" name="options" id="option3" autocomplete="off"> Radio </label> </div>

<div class="btn-group-toggle" data-toggle="buttons"> <label class="btn btn-secondary active"> <input type="checkbox" checked autocomplete="off"> Checked </label> </div>

方法：
$().button('toggle') 点击button按钮，会进行状态切换
$().button('dispose') 摧毁button按钮

 

转载于:https://www.cnblogs.com/voga/p/8820830.html