4.代码、表格

代码

<div class="container">

     <!--代码标签 <code>-->

     <p><code>&lt;section&gt;</code>是h5的一个新的标签</p>

 

     <!--用户输入 <kbd>-->

     <p>想现在输入<kbd>cmd</kbd>命令</p>

 

     <!--代码块 <pre>-->

<pre>

    &lt;p&gt;hello world&lt;p&gt;

</pre>

     

     <!--标记变量 <var>-->

    <var>y</var> = <var>mx</var> + <var>b</var><br/>

 

<!--程序输出 <samp>-->

<samp>HelloWorld!</samp>   

</div>

 

表格

 

基本表格

<div class="container">

     <table class="table">

          <thead>

               <tr>

                    <th>表格标题1</th>

                    <th>表格标题2</th>

                    <th>表格标题3</th>               

               </tr>

          </thead>

          <tbody>

               <tr>

                    <td>表格单元格</td>

                    <td>表格单元格</td>

                    <td>表格单元格</td>  

               </tr>

               <tr>

                    <td>表格单元格</td>

                    <td>表格单元格</td>

                    <td>表格单元格</td>

               </tr>    

          </tbody>

     </table>

</div>

 

条纹状表格（斑马线表格）

（ie8浏览器不支持，因为该效果是基于css3的：nth-child选择器实现的）

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

 

带有边框的表格

class="table table-bordered"

 

有鼠标悬停的表格

class="table table-hover"

 

紧凑型表格

class="table table-condensed"

 

状态类表格（主要是给单元格添加一些颜色）

active   success  info   warning   danger  

 

响应式表格

将任何 .table元素包裹在 .table-responsive 元素内，即可创建响应式表格，

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

<div class="table-responsive">

     <table class="table table-bordered">

          

     </table>

</div>