bootstrap 学习笔记（3）---- 代码

这节讲的是代码：

一、基本实例

<code></code>  <pre></pre> <kbd></kbd>

 应用以下

　　　一、For example, <code>section</code> should be wrapped as inline.
　　    二、To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
　　    三、<pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre>

　　结果如图：

二、表格

　　a、为任意 <table> 标签添加 .table 类能够为其赋予基本的样式 — 少许的内补（padding）和水平方向的分隔线。这种方式看起来不少余！？可是咱们以为，表格元素使用的很普遍，若是咱们为其赋予默认样式可能会影响例如日历和日期选择之类的插件，因此咱们选择将此样式独立出来。

 代码：<table class="table"> ... </table>

　　b、条纹装表格：经过 .table-striped 类能够给 <tbody> 以内的每一行增长斑马条纹样式。

　　****跨浏览器兼容性：条纹状表格是依赖 :nth-child CSS 选择器实现的，而这一功能不被 Internet Explorer 8 支持

　　代码：<table class="table table-striped"> ... </table>

如图：

　　c、带边框的表格：添加 .table-bordered 类为表格和其中的每一个单元格增长边框。

　　代码:<table class="table table-bordered"> ... </table>

　　d、鼠标悬停：经过.table-hover类，可让鼠标悬停每一列作出响应

　　代码:<table class="table table-hover"> ... </table>

　　e、紧缩表格：经过.table-condensed类可让表格更加紧凑，单元格的内补（padding）均会减半。

　　代码：<table class="table table-condensed"> ... </table>

　　f、表格颜色：能够为单元格或行设置颜色。success（绿色），active（灰色系），info（青色系），warning(黄色系)，danger(红色系)

                              颜色如图：                                                                                 

 

三、相应式表格：

将任何 .table 元素包裹在 .table-responsive 元素内，便可建立响应式表格，其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于 768px 宽度时，水平滚动条消失。

代码：<div class="table-responsive"> <table class="table"> ... </table> </div>