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操作文件和目录
    ffmpeg命令简单使用
    【转载】一个简单的爬虫:爬取豆瓣的热门电影的信息
    【转载】正则表达式re.S的用法
    linux用户添加
    SQL语句update修改数据库字段
    linux命令之cp
    linux命令——tree命令
    Linux磁盘管理
    Python资源安装过程出现Retrying (Retry(total=4, connect=None, read=None, redirect=None, status=None))…………
  • 原文地址:https://www.cnblogs.com/voga/p/8820830.html
Copyright © 2011-2022 走看看