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









張貼者：



於






































沒有留言:















張貼留言


















        

      









訂閱：
張貼留言 (Atom)