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按钮
  • 相关阅读:
    052-240(新增70题2018)
    052-239(新增70题2018)
    052-238(新增70题2018)
    052-237(新增70题2018)
    052-236(新增70题2018)
    052-235(新增70题2018)
    Elasticsearch和Solr的区别
    单点登录流程图
    创建购物车需要考虑哪些因素?以及解决方案
    消息队列在项目中的应用
  • 原文地址:https://www.cnblogs.com/voga/p/8820830.html
Copyright © 2011-2022 走看看