<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <title>表格和按钮组件</title> <link href="css/bootstrap.min.css" rel="stylesheet"> </head> <body style="margin:50px;"> <!--基本格式--> <table class="table"> <thead> <th>编号</th> <th>姓名</th> <th>性别</th> <th>年龄</th> </thead> <tbody> <tr> <td>1</td> <td>小一</td> <td>男</td> <td>18</td> </tr> <tr> <td>2</td> <td>小二</td> <td>女</td> <td>18</td> </tr> <tr> <td>3</td> <td>小三</td> <td>男</td> <td>36</td> </tr> </tbody> </table> <!--斑马线效果 table-striped--> <!--边框效果 table-bordered--> <!--鼠标悬停效果 table-hover--> <!--状态类 写在tr里面 有 active info danger warning success--> <!--测试时 用sr-only用来隐藏表格或行--> <!--响应式表格 当表格小于760px时加上表框 table-responsive--> /*问题 响应式和流体式表单的区别 1.元素宽度按照分辨率宽度进行长度，宽度的调整，但布局不变 缺点：屏幕尺度跨度过大，不能正常显示 2.创造多个不同屏幕分辨率定义布局，页面元素宽度随窗口调整而自动适配 用respond.js解决ie6-ie8不支持CSS3的问题<script src="respond.min.js"></script> 书写基本样式test.css html,body{ height:100%; } @media only screen and (min-480px) and (min-640px){ body{ bacground:blue; } } @media only screen and (min-640px) and (min-1024px){ body{ bacground:yellow; } } @media only screen and (min-1024px){ body{ bacground:yellow; } } */ <table class="table table-hover table-responsive"> <thead> <th>编号</th> <th>姓名</th> <th>性别</th> <th>年龄</th> </thead> <tbody> <tr class="active" > <td>1</td> <td>小一</td> <td>男</td> <td>18</td> </tr> <tr class="info"> <td>2</td> <td>小二</td> <td>女</td> <td>18</td> </tr> <tr class="danger"> <td>3</td> <td>小三</td> <td>男</td> <td>36</td> </tr> </tbody> </table> /* * 按钮 */ <!--按钮 btn--> <!--按钮样式 btn-default：默认样式 btn-success ：成功样式 btn-info ：一般信息样式 btn-warning :警告样式 btn-danger ：危险样式 btn-primary：首选项样式 btn-link ：链接样式 --> <!--按钮大小 btn-lg 大号 btn-sm 小号 btn-xs 超小号 --> <a href="#" class="btn"></a> <input type="button" class="btnbtn-danger" value="input" /> <button class="btn btn-danger">button</button> <button class="btn btn-danger btn-lg">button</button> <button class="btn btn-danger btn-sm">button</button> <button class="btn btn-danger btn-xs">button</button> <!--按钮大小 btn-block 块级按钮 active 激活 disabled 禁用 --> <button class="btn btn-danger btn-block active">button</button> <button class="btn btn-danger btn-block disabled">button</button> <!-- 自己边做边想，突然就想到了把li标签由列变行的问题了 --> <ul > <li style="list-style: none;float: left;">1</li> <li style="list-style: none;float: left;">2</li> <li style="list-style: none;float: left;">3</li> <li style="list-style: none;float: left;">4</li> </ul> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="js/bootstrap.min.js"></script> </body> </html>