Bootstrap（二）

三、代码

• 使用<code>元素显示单行内联代码
• 使用<kbd>元素显示用户输入代码
• 使用<pre>元素新生多行代码块

1、内联代码：设置code元素包含的背景颜色和其内部的文字颜色。

<code><……></code>

内联代码

2、用户输入代码：

<kbd>……</kbd>

用户输入代码

3、多行代码块：

多行代码块

四、表格

  一种基础.table样式
  四种附加样式.table-striped、.table-borded、.table-hover、.table-condensed
  支持响应式布局：.table-responsive容器样式

①基础样式：

<table class="table">
……
</table>

普通表格

②有背景条纹的表格：.table-striped样式，添加了隔行加背景色的设置

<table class="table table-striped">
...
</table>

背景条纹

③带边框的表格：为表格和其中的每个单元格增加边框。

<table class="table table-bordered">
...
</table>

带边框的表格

④鼠标悬停高亮的表格：

<table class="table table-hover">
...
</table>

⑤紧凑型表格:让表格更加紧凑

<table class="table table-condensed">
...
</table>

⑥级行元素样式

Class	描述
.active	鼠标悬停在行或单元格上时所设置的颜色
.success	标识成功或积极的动作
.info	标识普通的提示信息或动作
.warning	表示警告
.danger	表示危险

⑦响应式表格：其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于 768px 宽度时，水平滚动条消失。

<div class="table-responsive">
<table class="table">
...
</table>
</div>

道理都一样！不截屏占地了！