<!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-width:480px) and (min-width:640px){
body{
bacground:blue;
}
}
@media only screen and (min-width:640px) and (min-width:1024px){
body{
bacground:yellow;
}
}
@media only screen and (min-width: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>
浙公网安备 33010602011771号