- 網格系統
- 給定容器 div.container
- 給定橫列數 div.row , 每列皆切割為12單位 / 行
- 給定<標籤>行數定義
- .col-xs-* ~=手機
- .col-sm-* ~=平板
- .col-md-* ~=中型螢幕
- .col-lg-* ~=大型螢幕
- .colxl-* ~=超大型螢幕
- 給定偏量
- col-md-offset-4 向右偏移4單位
- 最小偏量優先
- 可巢狀 div.row
- 基本元素Class
- .h1~.h6
- .btn 將任一個標籤指定成button
- 後面再加上按鈕種類 大小
- .btn-block 延伸為儲存格寬度
- .img-responsive 讓圖片自適應
- .text-left 內容可靠左....etc
- .text-capitalize 可字首大寫...etc
- .list-unstyled 可移除ul li符號
- .list-inline ul li水平顯示
- .hiddem-xs 隱藏
- .visible-xs 顯示
- NOTE :
- 表格Class
- table.table 開啟套用 ...etc
- table.thead.tr.th.success套用顏色...etc
- 開發流程
- 利用chrome為不同視圖除錯
- F12
- 載入 BootStrap CSS/JS
- <meta http-equiv="X-UA-Compatiable" content="IE=edge">
- <meta name="viewport" content="width=device-width; initial-scale=1">
- viewport 用於手機優先 , 確保呈顯在手機上並可觸控縮放
- content 加入 user-scalable=no設定關閉縮放功能
- NOTE
- 為了支援IE9以前的版本相容HTML5和CSSˇ元素
- 使用 BootStrap 元素
- 必要標籤
- div class container(固定) or container-fluid(填滿)
- NOTE
- 放棄px , 改用 rem , em
- em : 相對於父層字體大小的單位
- rem : 相對於根元素
- 放棄 IE8
- 放棄 IOS 6支援
- 提共瀏覽器等待下載 , 非同步方式 參考網址 參考網址 參考網址
- AJAX端
- 將表單資料傳送給server
- 回傳型態會json
- 接到res.content的Base64內容須再做一次轉換動作base64ToArrayBuffer()
- 建立blob物件
- 下載視窗出現
- window.atob() 方法 , IE9以下不支援***
- 範例使用chrome瀏覽器可正常運行 , 如是以下瀏覽器需做修改
- IE10+
- var canvas = document.createElement("canvas");
- if ('msToBlob' in canvas) {
- navigator.msSaveBlob(_blob, _filename);
- }
- FireFox
- document.body.appendChild(a);
- a.click();
- document.body.removeChild(a);
- Server端 ( Action )
- 已先將檔案準備好
- 開始讀取檔案
- 將檔案串流轉換為Base64編碼
- PrintWriter 回傳JSON物件給Client接收
- 在官網提共的icon設置方式如下
- <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
- @font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url(https://example.com/MaterialIcons-Regular.eot); /* For IE6-8 */
src: local('Material Icons'),
local('MaterialIcons-Regular'),
url(https://example.com/MaterialIcons-Regular.woff2) format('woff2'),
url(https://example.com/MaterialIcons-Regular.woff) format('woff'),
url(https://example.com/MaterialIcons-Regular.ttf) format('truetype');}
- .material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px; /* Preferred icon size */
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;
/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;
/* Support for IE. */
font-feature-settings: 'liga';
}
- 為了讓url改成不透過google提共的網站 , 先下載相關檔案
- 然後將檔案放至專案理 , 更改url目錄位置如下
- @font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url(../mdl2/webfont/MaterialIcons-Regular.eot); /* For IE6-8 */
src: local('Material Icons'),
local('MaterialIcons-Regular'),
url(../mdl2/webfont/MaterialIcons-Regular.woff2) format('woff2'),
url(../mdl2/webfont/MaterialIcons-Regular.woff) format('woff'),
url(../mdl2/webfont/MaterialIcons-Regular.ttf) format('truetype');
}
- 然後你的 <i class="material-icons">announcement</i> 就不會找不到icon
- 先引入validate
- 加入新rule
- $("#form").validate();
- $("input xxxx").rules("add","required");
- 刪除舊的rule
- $("#form").validate();
- $("input xxxx").rules("remove");
- 發現還滿好用的做個筆記
<meta http-equiv="X-UA-Compatible" content="IE=edge">
