zoukankan      html  css  js  c++  java
  • 组件 -- 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按钮
  • 相关阅读:
    Python—使用列表构造队列数据结构
    js数组及对象去重
    当z-index遇上transform
    echarts y轴百分比显示
    在vue-cli项目中使用echarts
    IE中在a标签里的图片会显示边框
    css 三种清除浮动(float)的方法
    js技巧
    深入理解 函数、匿名函数、自执行函数
    即时反应的input和propertychange方法
  • 原文地址:https://www.cnblogs.com/voga/p/8820830.html
Copyright © 2011-2022 走看看