Installation Bootstrap
We can go to the official website to download the compressed version of Bootstrap Bootstrap, and then introduced into our project, for more details see Bootstrap installation tutorial, for example, the following code:
|
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 layout
Bootstrap table to provide multiple style classes, you can add according to their needs, for example, I've written form:
|
1
2
3
|
<
table
class
=
"table table-striped table-bordered"
id
=
"example"
>
<
tr
><
td
></
td
></
tr
>
</
table
>
|
Of course, certainly more than a full table above shows so little content, but we can add more content.
Next is a grid: defined as a data table control grid layout elements, we have had a half width of the element represented by "span8" elements, but with the change in the guide 12 we only need to change the use of "span6" . So we initialize the data table looks like:
|
1
2
3
4
5
|
$(document).ready(
function
() {
$(
'#example'
).dataTable( {
"sDom"
:
"<'row'<'span6'l><'span6'f>r>t<'row'<'span6'i><'span6'p>>"
} );
} );
|
We also need to set a new class, in the form of a data table so that the packaging elements inline elements rather than as one block data (Table filtered through a length of the input selector is extended to just this end we DataTable "swrapper" category:
|
1
2
3
|
$.extend( $.fn.dataTableExt.oStdClasses, {
"sWrapper"
:
"dataTables_wrapper form-inline"
} );
|
http://www.jq22.com/jquery-info11321
http://www.jq22.com/yanshi11321