使用bootstrap进行表格和按钮的基本测试

最新推荐文章于 2022-07-04 16:07:40 发布

mischen520

最新推荐文章于 2022-07-04 16:07:40 发布

阅读量1.1k

点赞数

分类专栏： HTML5

本文链接：https://blog.csdn.net/miachen520/article/details/52126026

版权

HTML5 专栏收录该内容

13 篇文章 1 订阅

订阅专栏

1.导入相关jquery的夹包，导入bootstrap的夹包，具体什么夹包请看后面测试代码

2.测试代码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>表格和按钮</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body style="margin:50px" class="table-responsive">
  <!--<table class="table table-striped">-->
  <!--<table class="table table-striped table-bordered">-->
  <!--<tr class="sr-only">-->
  <table class="table table-hover">
    <thead>
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
        </tr>
    </thead>
    <tbody>
         <tr>
             <td>1</td>
             <td>张三</td>
             <td>男</td>
             <td>50</td>
         </tr>
         <tr class="info">
             <td>2</td>
             <td>李四</td>
             <td>女</td>
             <td>30</td>
         </tr>
         <tr class="success">
             <td>3</td>
             <td>王五</td>
             <td>男</td>
             <td>20</td>
         </tr>
         <tr class="active">
             <td>4</td>
             <td>马六</td>
             <td>男</td>
             <td>27</td>
         </tr>
         <tr class="danger">
             <td>5</td>
             <td>马2</td>
             <td>男</td>
             <td>29</td>
         </tr>

    </tbody>
</table>
   <a href="###" class="btn btn-default">link</a>
  <input type="button" class="btn btn-default" value="input"/>
  <!-- 按钮的预定义样式，default默认样式，success成功样式，info一般信息样式，
  warning警告样式,danger危险样式,primary首选项样式,link链接样式-->
  <button class="btn btn-default">button1</button>
  <button class="btn btn-success">button2</button>
  <button class="btn btn-info">button3</button>
  <button class="btn btn-warning">button9</button>
  <button class="btn btn-danger">button10</button>
  <button class="btn btn-primary">button11</button>
  <button class="btn btn-link">button12</button>
  <!-- 尺寸大小，下面是从大到小的尺寸-->
  <button class="btn btn-info btn-lg">button4</button>
    <button class="btn btn-info btn-sm">button5</button>
    <button class="btn btn-info btn-xs">button6</button>
     <!--激活状态-->
    <button class="btn btn-info btn-block active">button7</button>
  <!-- 按钮禁用状态-->
  <button class="btn btn-info btn-block disabled">button8</button>

<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>