组件 -- 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>

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

可使用的元素：

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

混合使用：

.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按钮

巴特西

组件 -- Button

最新文章

热门文章