您的位置：首页 > Web前端 > BootStrap

bootstrap表格和按钮

2017-05-16 20:17 253 查看

表格和按钮(将body中的代码直接复制运行看效果)

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>表格和按钮</title>
<link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="css/main.css">
<!--[if lt IE 9]>
<script src="lib/html5shiv/html5shiv.min.js"></script>
<script src="lib/respond/respond.min.js"></script>
<![endif]-->

<style>
/*让表格中的内容全部居中*/
table th,table td{
text-align: center;
vertical-align: middle;!important;
}
</style>
</head>
<body>
<!--<body class="table-responsive">-->

<!--<table class="table table-striped table-bordered table-hover">-->
<table class="table table-striped table-hover">
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>张三</td>
<td>男</td>
<td>21</td>
</tr>
<tr class="danger">
<td>2</td>
<td>李四</td>
<td>男</td>
<td>32</td>
</tr>
<tr>
<td>3</td>
<td>王五</td>
<td>男</td>
<td>23</td>
</tr>
<tr>
<td>4</td>
<td class="active">刘六</td>
<td>男</td>
<td>22</td>
</tr>
</tbody>
</table>

<a href="#" class="btn btn-info">按钮</a>
<input type="button" value="按钮" class="btn btn-danger">
<button class="btn btn-default">按钮</button>
<button class="btn btn-default btn-lg">按钮</button>
<button class="btn btn-default btn-xs">按钮</button>
<button class="btn btn-default btn-xs active">按钮</button>
<button class="btn btn-default btn-xs btn-block">按钮</button>
<button class="btn btn-default btn-xs btn-block disabled">按钮</button>

<script src="lib/jquery/jquery.js"></script>
<script src="lib/bootstrap/js/bootstrap.js"></script>
<script src="js/main.js"></script>
</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： bootstrap 表格按钮 bootstrap表格 bootstrap按钮

相关文章推荐

新的分享

章节导航