2016年5月29日下午（传智Bootstrap（笔记二））
Posted zzjeny
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了2016年5月29日下午（传智Bootstrap（笔记二））相关的知识，希望对你有一定的参考价值。
一、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、文本
以下不同的类展示了不同的文本颜色。如果文本是个链接鼠标移动到文本上会变暗：
<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>
以上是关于2016年5月29日下午（传智Bootstrap（笔记二））的主要内容，如果未能解决你的问题，请参考以下文章
2016年5月29日晚上（传智Bootstrap笔记三（表单））
2016年5月29日晚上（传智Bootstrap笔记四（栅格系统 ））
2016年5月29日晚上（传智Bootstrap笔记五（表单2））
2016年5月31日上午（传智Bootstrap笔记（Bootstrap 布局组件输入框组））