- 按钮样式
- .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 效果：
