CH1 Installall Bootstrap
Bootstrap Office :
https://getbootstrap.com/docs/4.0/getting-started/download/
解壓縮後有 CS 及 JS 資料夾
此外還需下載 jquery https://jquery.com/download/
<!DOCTYPE html> <html> <head> <title>Good</title> <link rel="stylesheet" href="css/bootstrap.css"> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1"> </head> <body> <div class="jumbotron"> <h1> Hello word </h1> <a class="btn btn-primary btn-lg" href="E" role="button"> 從開始第一章 </a> </div> <script src="js/jquery.js"> <script src="js/bootstrap.js"> </body> </html>
CH2 table
https://mdbootstrap.com/docs/jquery/tables/sort/https://v4-alpha.getbootstrap.com/content/tables/
Table width:
https://mdbootstrap.com/docs/jquery/tables/responsive/
bootstrap example:
https://github.com/wenzhixin/bootstrap-table-examples/blob/master/jsfiddle_examples.md
bootstrap sourcecode:
https://github.com/wenzhixin/bootstrap-table-examples
https://github.com/wenzhixin/bootstrap-table/blob/develop/src/bootstrap-table.js
Table getall data :
$('#target').bootstrapTable('getData'); ref 1 2
CH3 bootstrap table for toolbar
--------------------------------------------
office
toolbar
- Attribute:
data-toolbar - Type:
String/Node - Detail:A jQuery selector that indicates the toolbar, for example:
#toolbar,.toolbar, or a DOM node. - Default:
undefined - Example: Custom Toolbar
--------------------------------------
example code
<div id="toolbar">
<select class="form-control">
<option value="">Export Basic</option>
<option value="all">Export All</option>
<option value="selected">Export Selected</option>
</select>
</div>
<table id="table"
data-toggle="table"
data-toolbar="#toolbar"
data-show-export="true"
data-pagination="true"
data-maintain-selected="true"
data-page-size="5"
data-page-list="[5, 25, 50, 100, ALL]"
data-url="/gh/get/response.json/wenzhixin/bootstrap-table/tree/master/docs/data/data2/"
data-export-options='{
"fileName": "test",
"ignoreColumn": ["state"]
}'
>
<thead>
<tr>
<th data-field="state" data-checkbox="true"></th>
<th data-field="id">ID</th>
<th data-field="name">Name</th>
<th data-field="price">Price</th>
</tr>
</thead>
</table>
----------------------------------------
reference
1 2 3 4 5 mutlipe icon
CH4 Good bootstrap design
https://bootsnipp.comCH5 GOOD API
https://dotblogs.com.tw/shihgogo/2017/05/31/085635
