Bootstrap 按钮样式

卡尔特斯
191 阅读1分钟
  • 按钮样式
    • .btn：表示按钮它是所有按钮的父类名。
    • .btn-default：默认样式的按钮。
    • .btn-primary：重要的按钮。
    • .btn-success：成功的按钮。
    • .btn-danger：危险的按钮。
    • .btn-warning：警告的按钮。
    • .btn-info：一般信息的按钮。
    • .btn-link：链接状态的按钮。
    • .btn-bg：超大状态。
    • .btn-sm：小按钮。
    • .btn-xs：超小按钮。
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <!-- 支持移动设备优先 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 导入CSS文件 -->
  <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
  <!-- 引入js -->
  <!-- bootstrap.js 引入必须依赖 jQuery, jQuery需要自行去下载导入进来 -->
  <script src="bootstrap/js/jquery-3.4.1.js"></script>
  <!-- 不引入 jQuery 则会报错 Uncaught Error: Bootstrap's JavaScript requires jQuery -->
  <script src="bootstrap/js/bootstrap.js"></script>
</head>
<body>
  <div class="container">
    <table class="table table-bordered">
      <tr>
        <td>序号</td>
        <td>商品名称</td>
        <td>价格</td>
        <td>状态</td>
        <td>操作</td>
      </tr>
      <tr class="success">
        <td>1001</td>
        <td>小米手机</td>
        <td>1999.0</td>
        <td>success</td>
        <td>
          <button type="button">删除</button>
          <button type="button" class="btn">btn</button>
          <button type="button" class="btn btn-default">btn-default</button>
          <button type="button" class="btn btn-primary">btn-primary</button>
          <button type="button" class="btn btn-success">btn-success</button>
          <button type="button" class="btn btn-danger">btn-danger</button>
          <button type="button" class="btn btn-warning">btn-warning</button>
        </td>
      </tr>
      <tr class="danger">
        <td>1001</td>
        <td>小米手机</td>
        <td>1999.0</td>
        <td>danger</td>
        <td>
          <button type="button">修改</button>
          <button type="button" class="btn btn-info">btn-info</button>
          <button type="button" class="btn btn-link">btn-link</button>
          <button type="button" class="btn btn-bg">btn-bg</button>
          <button type="button" class="btn btn-bg">btn-bg</button>
          <button type="button" class="btn btn-sm">btn-sm</button>
          <button type="button" class="btn btn-xs">btn-xs</button>
          <button type="button" class="btn btn-warning" disabled="disabled">btn-warning disabled</button>
        </td>
      </tr>
      <tr class="warning">
        <td>1001</td>
        <td>小米手机</td>
        <td>1999.0</td>
        <td>warning</td>
        <td>
          <button type="button">编辑</button>
          <a href="https://www.baidu.com">a标签</a>
          <a href="https://www.baidu.com" class="btn">a btn</a>
          <a href="https://www.baidu.com" class="btn btn-default">a btn-default</a>
        </td>
      </tr>
      <tr class="info">
        <td>1001</td>
        <td>小米手机</td>
        <td>1999.0</td>
        <td>info</td>
        <td><button type="button">保存</button></td>
      </tr>
      <tr class="active">
        <td>1001</td>
        <td>小米手机</td>
        <td>1999.0</td>
        <td>active</td>
        <td><button type="button">上传</button></td>
      </tr>
      <tr>
        <td class="success">success</td>
        <td class="danger">danger</td>
        <td class="warning">warning</td>
        <td class="info">info</td>
        <td class="active"><button type="button">清空</button></td>
      </tr>
    </table>
  </div>
</body>
</html>
  • demo 效果：

avatar
文章
阅读
粉丝