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

 

posted @ 2018-04-13 15:47  三个砂锅  阅读(124)  评论(0编辑  收藏  举报