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按钮
  • 相关阅读:
    Win7 64位下ProxyCap代理Java
    kafka一个诡异错误
    linux下oracle修改、新建用户并授权
    es常用查询
    linux 下启动tomcat报错 Cannot find ./catalina.sh
    linux虚拟机添加端口访问
    Linux下启动Oracle服务和监听程序
    es基础
    mysql授权远程任意人登录
    添加POI导出excel通用工具类
  • 原文地址:https://www.cnblogs.com/voga/p/8820830.html
Copyright © 2011-2022 走看看