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

Bootstrap学习------Tabel

2015-11-24 15:38 651 查看

Bootstrap的表格和Html表格大同小异，只是封装了一些css供我们使用

<table>标签必须引用class="table"基类样式,我们可以根据需求赛选需要的样式其中主要的几个样式

(1) table-hover 鼠标悬停在当前行时有特效

(2) table-striped 表格呈现斑马线效果

(3) table-bordered 表格显示边框

(4) table-condensed 紧凑型表格

<!DOCTYPE html>
<html>
<head>
<title>

</title>
<script src="~/Scripts/jquery-2.1.4.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<style>
.table {
margin-bottom: 30px;
}

p {
color: blue;
}
</style>
</head>

<body>
<div class="container">
<p>普通表格</p>
<table class="table table-hover table-striped table-bordered">
<thead>
<tr>
<th>
标题1
</th>
<th>
标题2
</th>
<th>
标题3
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
内容1
</td>
<td>
内容2
</td>
<td>
内容3
</td>
</tr>
<tr>
<td>
内容1
</td>
<td>
内容2
</td>
<td>
内容3
</td>
</tr>
<tr>
<td>
内容1
</td>
<td>
内容2
</td>
<td>
内容3
</td>
</tr>
<tr>
<td>
内容1
</td>
<td>
内容2
</td>
<td>
内容3
</td>
</tr>
</tbody>

</table>

</body>
</html>

View Code

如果将 <div class="container">更改为<div class="table-responsive">当表格内容过多时会出现下拉滚动条

会呈现以下效果

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

标签：

相关文章推荐

新的分享

章节导航