安裝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