2019年4月11日 星期四

Bootstrap

bootstrap Office document 1

CH1 Installall Bootstrap


Bootstrap Office :
https://getbootstrap.com/docs/4.0/getting-started/download/


解壓縮後有 CS 及 JS 資料夾
此外還需下載 jquery https://jquery.com/download/

# hello_world.html
<!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.com

CH5 GOOD API
https://dotblogs.com.tw/shihgogo/2017/05/31/085635

沒有留言:

張貼留言