首页 > 代码库 > bootstrap学习总结-04 常用标签2
bootstrap学习总结-04 常用标签2
1 表格
Bootstrap为表格设计了漂亮的样式。
1）表格基本实例
任意 <table> 标签添加 .table。
<table class="table"> <tr> <td></td> <td></td> <td></td> ... </tr></table>
表格基本实例代码如下：
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" href=http://www.mamicode.com/"css/index.css" /> <meta name="viewport" content="width=device-width,initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <link rel="stylesheet" href=http://www.mamicode.com/"http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css"> <!-- jQuery文件。务必在bootstrap.min.js 之前引入 --> <script src=http://www.mamicode.com/"http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> <script src=http://www.mamicode.com/"http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h1 class="page-header">Table<small>基本实例</small></h1> <table class="table"> <tr> <td>姓名</td> <td>年龄</td> <td>地址</td> </tr> <tr> <td>张三</td> <td>22</td> <td>北京</td> </tr> <tr> <td>李四</td> <td>21</td> <td>广州</td> </tr> </table> </div> </body></html>
显示效果如下图所示：
2）条纹状表格
通过 .table-striped 类可以给 <tbody> 之内的每一行增加斑马条纹样式。
<table class="table table-striped"> ...</table>
显示的效果如下图所示：
3）带边框的表格
添加 .table-bordered 类为表格和其中的每个单元格增加边框。
<table class="table table-bordered"> ...</table>
4）鼠标悬停
通过添加 .table-hover 类可以让 <tbody> 中的每一行对鼠标悬停状态作出响应。
<table class="table table-hover"> ...</table>
5）紧缩表格
通过添加 .table-condensed 类可以让表格更加紧凑，单元格中的内补（padding）均会减半。
<table class="table table-condensed"> ...</table>
6）状态类
通过这些状态类可以为行或单元格设置颜色。
| 描述 | |
|---|---|
.active | 鼠标悬停在行或单元格上时所设置的颜色 |
.success | 标识成功或积极的动作 |
.info | 标识普通的提示信息或动作 |
.warning | 标识警告或需要用户注意 |
.danger | 标识危险或潜在的带来负面影响的动作 |
<!-- On rows --><tr class="active">...</tr><tr class="success">...</tr><tr class="warning">...</tr><tr class="danger">...</tr><tr class="info">...</tr><!-- On cells (`td` or `th`) --><tr> <td class="active">...</td> <td class="success">...</td> <td class="warning">...</td> <td class="danger">...</td> <td class="info">...</td>
</tr>
7)响应式表格
将任何 .table 元素包裹在 .table-responsive 元素内，即可创建响应式表格，其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于 768px 宽度时，水平滚动条消失。
<div class="table-responsive"> <table class="table"> ... </table></div>
2 表单
单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control 类的 <input>、<textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%;。 将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="http://www.mamicode.com/css/index.css" />
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1 class="page-header">Form<small>组件</small></h1>
<form role="form">
<label>用户名：</label><input class="form-control" type="text" name="username" maxlength="5" />
<label>密码：</label> <input class="form-control" type="password" name="pwd" />
<label>照片: </label> <input type="file" name="profile" />
<label>简绍：</label>
<textarea class="form-control" name="desc" rows="9" cols="20"></textarea>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<input type="submit" class="btn btn-default" value="http://www.mamicode.com/提交表单内容" />
<input type="reset" class="btn btn-default" />
</form>
</div>
</body>
</html>
参考代码：
http://v3.bootcss.com/css/#code
bootstrap学习总结-04 常用标签2
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。