首页 > 代码库 > Bootstrap Css
Bootstrap Css
一、排版
1.标题
Bootstrap 中定义了所有的 HTML 标题（h1 到 h6）的样式。请看下面的实例：
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap</title> <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script> <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet"> </head> <body class="container"> <h1 class="btn btn-success btn-large"> <i class="icon-user icon-white"></i> Hello,World </h1> <h1> 我是标题h1</h1> <h2> 我是标题h2</h2> <h3> 我是标题h3</h3> <h4> 我是标题h4</h4> <h5> 我是标题h5</h5> <h6> 我是标题h6</h6> <!--文档内容--> <script src="bootstrap/jquery-3.1.0.min.js"></script> <script src="bootstrap/js/bootstrap.min.js"></script> </body></html>
结果:
内联子标题
如果需要向任何标题添加一个内联子标题，只需要简单地在元素两旁添加 <small>，或者添加 .small class，这样子您就能得到一个字号更小的颜色更浅的文本，如下面实例所示：
<h1> 我是标题h1 <small>我是副标题1</small> </h1><h2> 我是标题h2 <small>我是副标题2</small> </h2><h3> 我是标题h3 <small>我是副标题3</small> </h3><h4> 我是标题h4 <small>我是副标题4</small> </h4><h5> 我是标题h5 <small>我是副标题5</small> </h5> <h6> 我是标题h6 <small>我是副标题6</small> </h6>
结果:
2.强调
HTML 的默认强调标签 <small>（设置文本为父文本大小的 85%）、<strong>（设置文本为更粗的文本）、<em>（设置文本为斜体）。Bootstrap 提供了一些用于强调文本的类，如下面实例所示：
这是普通文本 <br> <small>small标签内的文本</small> <br> <strong>strong标签内的文本</strong> <br> <em>em标签内的文本</em> <br> <p class="text-left">class: text-left</p> <p class="text-right">class: text-right</p> <p class="text-center">class: text-center</p> <p class="text-muted">class: text-muted</p> <p class="text-primary">class:text-primary</p> <p class="text-success">class:text-success</p> <p class="text-info">class:text-info</p> <p class="text-warning">class:text-warning</p> <p class="text-danger">class:text-danger</p>
结果:
3.更多的排版类
二、表格
Bootstrap 提供了一个清晰的创建表格的布局。下表列出了 Bootstrap 支持的一些表格元素：
表格类
下表样式可用于表格中：
<tr>, <th> 和 <td> 类
下表的类可用于表格的行或者单元格：
1.基本的表格
如果您想要一个只带有内边距（padding）和水平分割的基本表，请添加 class .table，如下面实例所示：
<table class="table"> <caption>基本的表格布局</caption> <thead> <tr> <th>姓名</th> <th>年龄</th> </tr> </thead> <tbody> <tr> <td>Tom</td> <td>22</td> </tr> <tr> <td>Jerry</td> <td>18</td> </tr> </tbody></table>
结果:
2.条纹表格
通过添加 .table-striped class，您将在 <tbody> 内的行上看到条纹，如下面的实例所示：
<table class="table table-striped"> //...</table>
结果:
3.边框表格
<table class="table table-striped table-bordered"> //...</table>
结果:
4.悬浮表格
通过添加 .table-hover class，当指针悬停在行上时会出现浅灰色背景，如下面的实例所示：
<table class="table table-bordered table-hover"></table>
结果:
5.上下文类
下表中所列出的上下文类允许您改变表格行或单个单元格的背景颜色。这些类可被应用到 <tr>、<td> 或 <th>。
<table class="table table-bordered"> <caption>上下文表格布局</caption> <thead> <tr> <th>产品</th> <th>付款日期</th> <th>状态</th> </tr> </thead> <tbody> <tr class="active"> <td>产品1</td> <td>23/11/2013</td> <td>待发货</td> </tr> <tr class="success"> <td>产品2</td> <td>10/11/2013</td> <td>发货中</td> </tr> <tr class="warning"> <td>产品3</td> <td>20/10/2013</td> <td>待确认</td> </tr> <tr class="danger"> <td>产品4</td> <td>20/10/2013</td> <td>已退货</td> </tr> </tbody> </table>
Bootstrap Css
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。