2019年5月23日 星期四
HTML and CSS
1. @important
風格表有三種來源：作者定義的，用戶指定的，與展現程式的預設值。預設的串聯規則是：作者定義的風格表會取代用戶定義的風格表，而展現程式的預設值位階最低。可以在作者的風格表與用戶的風格表中使用 !important，改變預設的串聯規則。依據 CSS2 標準，如果用戶的風格表中，有使用 !important 的規則，則其優先權會高過作者的風格表，即便作者的風格表中有加上 !important。其語法是：
ref: 1 2
2. @media ref 1
@media 是 CSS 擴充元件的寫法之一，我們可以把它當成是 CSS 的類別
Query 顧名思義就是「查詢」的意思，我們如果要非常熟練的運用 media，各種條件跟條件之間的查詢是不可或缺的。像是前面範例運用的(min-width: 400px) and (max-width: 700px)，那個「and」就是 Query 的一種。
Query 的語法只有三大項：not, and, only。我們最常用的是「and」
Media Feature
width | min-width | max-width
(寬度 | 最小寬度 | 最大寬度)
height | min-height | max-height
(高度 | 最小高度 | 最大高度)
device-width | min-device-width | max-device-width
(裝置寬度 | 裝置最小寬度 | 裝置最大寬度)
3. jquery
: time line 1 2
4. CSS add start
https://stackoverflow.com/questions/23141854/adding-asterisk-to-required-fields-in-bootstrap-3
2019年4月11日 星期四
Bootstrap
bootstrap Office document 1
Bootstrap Office :
https://getbootstrap.com/docs/4.0/getting-started/download/
# hello_world.html
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 :
--------------------------------------------
office
--------------------------------------
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
https://bootsnipp.com
CH5 GOOD API
https://dotblogs.com.tw/shihgogo/2017/05/31/085635
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
2019年3月28日 星期四
windows python simple web
1. change to D
C:\Documents and Settings\Administrator>cd /d d:\test
2. Run command
python3 -m http.server 8080
3. Open the local firewal of 80802019年3月8日 星期五
UnderScore js
1. What is uderscore?
s a JavaScript library that provides a whole mess of useful functional programming helpers without extending any built-in objects. It’s the answer to the question: “If I sit down in front of a blank HTML p
ref 1 2_good_example 3_office 4_example
2. Example
2_1<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js">
</script>
_.each([1, 2, 3], function (ele, idx) {
alert(idx + ":" + ele);
});
2019年2月26日 星期二
Bootstrap Content
1. glyphicon (圖示)
<a href="#" class="btn btn-info btn-lg">
<span class="glyphicon glyphicon-asterisk"></span> Asterisk
</a>
ref 1
訂閱：
意見 (Atom)