一、Bootstrap 排版
1、行内文本样式
<b>、<strong>、<i>、<em>、<del>、
Bootstrap 提供了一些用于强调文本的类,如下面实例所示:
<small>本行内容是在标签内</small><br> <strong>本行内容是在标签内</strong><br> <em>本行内容是在标签内,字体为斜体</em><br> <b>本行内容是在标签内</b><br> <i>本行内容是在标签内,字体为斜体</i><br> <del>本行内容是在标签内,有删除线</del><br> <s>本行内容是在标签内,有删除线</s>
<s>注释:请使用 <del> 替代它!
注释:根据 HTML5 规范,在没有其他合适标签更合适时,才应该把 <b> 标签作为最后的选项。HTML5 规范声明:使用 <em> 标签来表示强调的文本,应该使用 <strong> 标签来表示重要文本,应该使用 <mark> 标签来表示标注的/突出显示的文本。
<i> 标签和基于内容的样式标签 <em> 类似。它告诉浏览器将包含其中的文本以斜体字(italic)或者倾斜(oblique)字体显示。如果这种斜体字对该浏览器不可用的话,可以使用高亮、反白或加下划线等样式。
HTML 的默认强调标签 <small>(设置文本为父文本大小的 85%)、<strong>(设置文本为更粗的文本)、<em>(设置文本为斜体)。
2、文本对齐样式:.text-left、.text-center、.text-right、.text-justify(只有IE浏览器支持)
<p class="text-left">向左对齐文本</p> <p class="text-center">居中对齐文本</p> <p class="text-right">向右对齐文本</p>
3、列表样式:list-unstyled(无符号)、list-inline(行内块)
(1)、list-unstyled(无符号):移除默认的列表样式,列表项中左对齐 ( <ul> 和 <ol> 中)。 这个类仅适用于直接子列表项 (如果需要移除嵌套的列表项,你需要在嵌套的列表中使用该样式)
(2)、list-inline(行内块):将所有列表项放置同一行
<body style="margin:200px;"> <div class="container"> <p>这个是list-unstyled的列表样式标签</p> <ul class="list-unstyled"> <li>11111111111111</li> <li>11111111111111</li> <li>11111111111111 <ul > <li>2222222222222222222</li> <li>2222222222222222222</li> <li>2222222222222222222</li> </ul> </li> <li>11111111111111</li> </ul> ---------------------------------------我是分割线---------------------------------------------- <p>这个是list-inline的列表样式标签</p> <ul class="list-inline"> <li>11111111111111</li> <li>11111111111111</li> <li>22222222222222</li> <li>22222222222222</li> <li>23333333333333</li> <li>33333333333333</li> </ul> </div> </body>
效果图如下:
4、表格样式:
下表样式可用于表格中:
类 | 描述 | |
---|---|---|
.table | 为任意 <table> 添加基本样式 (只有横向分隔线) | |
.table-striped | 在 <tbody> 内添加斑马线形式的条纹 ( IE8 不支持) | |
.table-bordered | 为所有表格的单元格添加边框 | |
.table-hover | 在 <tbody> 内的任一行启用鼠标悬停状态 | |
.table-condensed | 让表格更加紧凑 | |
联合使用所有表格类 |
(1).table:为 <table>
标签增加基本样式--很少的内补(padding)并只增加水平分隔线--只要为其增加 .table
类即可。
<body style="padding:50px;background-color:#ccc"> <div class="container" style="background-color:#fff;padding:50px;"> <table class="table"> <caption>基本的表格布局</caption> <thead> <tr> <th>名称</th> <th>城市</th> </tr> </thead> <tbody> <tr> <td>Tanmay</td> <td>Bangalore</td> </tr> <tr> <td>Sachin</td> <td>Mumbai</td> </tr> </tbody> </table> </div> </body>
(2).table-striped:通过添加 .table-striped class,有条纹的背景色行(隔行变色),如下面的实例所示:
<body style="padding:50px;background-color:#ccc"> <div class="container" style="background-color:#fff;padding:50px;"> <table class="table table-striped"> <caption>条纹表格布局</caption> <thead> <tr> <th>名称</th> <th>城市</th> <th>密码</th> </tr> </thead> <tbody> <tr> <td>Tanmay</td> <td>Bangalore</td> <td>560001</td> </tr> <tr> <td>Sachin</td> <td>Mumbai</td> <td>400003</td> </tr> <tr> <td>Uma</td> <td>Pune</td> <td>411027</td> </tr> </tbody> </table> </div> </body>
(3).table-bordered:带边框的表格,您将看到每个元素周围都有边框,且占整个表格是圆角的,如下面的实例所示:
<body style="padding:50px;background-color:#ccc"> <div class="container" style="background-color:#fff;padding:50px;"> <table class="table table-striped table-bordered"> <caption>条纹表格布局</caption> <thead> <tr> <th>名称</th> <th>城市</th> <th>密码</th> </tr> </thead> <tbody> <tr> <td>Tanmay</td> <td>Bangalore</td> <td>560001</td> </tr> <tr> <td>Sachin</td> <td>Mumbai</td> <td>400003</td> </tr> <tr> <td>Uma</td> <td>Pune</td> <td>411027</td> </tr> </tbody> </table> </div> </body>
(4).table-hover:当指针悬停在行上时会出现浅灰色背景,(放上变色,离开恢复)如下面的实例所示:
<body style="padding:50px;background-color:#ccc"> <div class="container" style="background-color:#fff;padding:50px;"> <table class="table table-bordered table-hover"> <caption>条纹表格布局</caption> <thead> <tr> <th>名称</th> <th>城市</th> <th>密码</th> </tr> </thead> <tbody> <tr> <td>Tanmay</td> <td>Bangalore</td> <td>560001</td> </tr> <tr> <td>Sachin</td> <td>Mumbai</td> <td>400003</td> </tr> <tr> <td>Uma</td> <td>Pune</td> <td>411027</td> </tr> </tbody> </table> </div> </body>
(4).table-condensed:行内边距(padding)被切为两半,以便让表看起来更紧凑,如下面的实例所示。这在想让信息看起来更紧凑时非常有用。
<body style="padding:50px;background-color:#ccc"> <div class="container" style="background-color:#fff;padding:50px;"> <table class="table table-bordered table-hover table-condensed"> <caption>条纹表格布局</caption> <thead> <tr> <th>名称</th> <th>城市</th> <th>密码</th> </tr> </thead> <tbody> <tr> <td>Tanmay</td> <td>Bangalore</td> <td>560001</td> </tr> <tr> <td>Sachin</td> <td>Mumbai</td> <td>400003</td> </tr> <tr> <td>Uma</td> <td>Pune</td> <td>411027</td> </tr> </tbody> </table> </div> </body>
5、行或单元格背景色(<tr>, <th> 和 <td> 类)
下表的类可用于表格的行或者单元格:
类 | 描述 | |
---|---|---|
.active | 将悬停的颜色应用在行或者单元格上 | |
.success | 表示成功的操作 | |
.info | 表示信息变化的操作 | |
.warning | 表示一个警告的操作 | |
.danger | 表示一个危险的操作 |
(1)只能给<tr>或<td>来添加类样式;
<body style="padding:50px;background-color:#ccc"> <div class="container" style="background-color:#fff;padding:20px;"> <table class="table table-bordered table-hover table-condensed"> <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="info"> <td>产品3</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> </div> </body>
6、响应式表格(根据屏幕大小来变化)
通过把任意的 .table 包在 .table-responsive内,您可以让表格水平滚动以适应小型设备(小于 768px)。当在大于 768px 宽的大型设备上查看时,您将看不到任何的差别。
<body style="padding:50px;background-color:#ccc"> <div class="table-responsive"> <table class="table" style="background-color:#fff"> <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="info"> <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> </div> </body>
当屏幕宽度小于768px时,表格会出现滚动条;
当屏幕宽度大于768px时,表格的滚动条自然消失。
<body style="padding:50px;background-color:#ccc"> <div class="table-responsive"> <table class="table" style="background-color:#fff"> <tr class="danger"> <td>编号</td> <td>发布时间</td> <td>发布时间</td> <td>发布时间</td> <td>发布时间</td> <td>发布时间</td> <td>发布时间</td> </tr> <tr class="warning"> <td>编号</td> <td>发布时间</td> <td>发布时间</td> <td>发布时间</td> <td>发布时间</td> <td>发布时间</td> <td>发布时间</td> </tr> </table> </div> </body>
二、Bootstrap 辅助类
1、文本
以下不同的类展示了不同的文本颜色。如果文本是个链接鼠标移动到文本上会变暗:
类 | 描述 | |
---|---|---|
.text-muted | "text-muted" 类的文本样式 | |
.text-primary | "text-primary" 类的文本样式 | |
.text-success | "text-success" 类的文本样式 | |
.text-info | "text-info" 类的文本样式 | |
.text-warning | "text-warning" 类的文本样式 | |
.text-danger | "text-danger" 类的文本样式 |
<p class="text-muted">本行内容是减弱的</p> <p class="text-primary">本行内容带有一个 primary class</p> <p class="text-success">本行内容带有一个 success class</p> <p class="text-info">本行内容带有一个 info class</p> <p class="text-warning">本行内容带有一个 warning class</p> <p class="text-danger">本行内容带有一个 danger class</p>