安装Bootstrap
我们可以到Bootstrap的官方网站下载Bootstrap的压缩版本，然后引入到我们的项目中，更多细节请参见Bootstrap安装教程，例如下面的代码：
|
1
2
3
|
<
link
href
=
"bootstrap/css/bootstrap.min.css"
rel
=
"stylesheet"
>
<
script
src
=
"jquery.min.js"
></
script
>
<
script
src
=
"bootstrap/js/bootstrap.min.js"
></
script
>
|
Table布局
Bootstrap给table提供多个样式的类，你可按照自己的需要添加，例如我编写的表格：
|
1
2
3
|
<
table
class
=
"table table-striped table-bordered"
id
=
"example"
>
<
tr
><
td
></
td
></
tr
>
</
table
>
|
当然完整的表格肯定不止上面展示内容那么少，但是我们可以添加更多的内容。
接下来是显示网格：定义为数据表控制元素的网格布局，此前我们曾用“span8”元素来表示半宽度的元素，但随着变化的12列在引导我们只需要改变使用“span6”。所以我们的数据表初始化看起来像：
|
1
2
3
4
5
|
$(document).ready(
function
() {
$(
'#example'
).dataTable( {
"sDom"
:
"<'row'<'span6'l><'span6'f>r>t<'row'<'span6'i><'span6'p>>"
} );
} );
|
我们还需要设置一个新的类，以数据表的形式包装元素使元素内联而不是作为一个块（表过滤输入长度选择器是通过这。为此我们只是扩展为DataTable“swrapper”类的选项：
|
1
2
3
|
$.extend( $.fn.dataTableExt.oStdClasses, {
"sWrapper"
:
"dataTables_wrapper form-inline"
} );
|
http://www.jq22.com/jquery-info11321
http://www.jq22.com/yanshi11321