一個過程:css
template/html ----> css ----> less ----> bootstrap/flex ----> Semantic-uihtml
flex是css3新增內容, less是css3的預編譯器,bootstrap是一系列css3 class合集css3
Semantic-ui做爲一款開發框架,幫助開發者使用對人類友好的HTML語言構建優雅的響應式佈局。ajax
響應式佈局 based on Semantic-ui as following: bootstrap
Goto: [Node.js] 07 - Html and Http瀏覽器
Goto: [UI] 01 - CSS框架
選擇器 | class 選擇器 |
id 選擇器 | |
分組方式簡寫法less 也能夠嵌套寫法ide 也能夠組合寫法佈局 |
優先級 | |
1 | (內聯樣式)Inline style |
2 | (內部樣式)Internal style sheet |
3 | (外部樣式)External style sheet |
4 | 瀏覽器默認樣式 |
背景、文本、列表、表格、可見、內聯。
首先、要了解盒子模型。
其次、position定位屬性的五個值。
以後、圖片浮動效果。
最後、對齊。
冒號後面緊跟着的一些特性。
Goto: [UI] 02 - Layout & CSS3
這裏展現了 經過基本的CSS建立的頁面風格;與以後的bootstrap作對比。
Ref: [UI] 06 - jQuery
<script> $(document).ready( function(){ $("button").click( function(){ # <button>...</button> $("#test").hide(); # <p id="test">...</p> }); }); </script>
淡入淡出、下拉菜單、動畫
Callback 方法、鏈(Chaining)
HTML | 設置內容,設置屬性,插入內容,刪除元素。 |
CSS | 設置一個或多個屬性,返回屬性。 |
高寬,內高寬,外高寬。
得到parents, childern, siblings
Ref: Difference between $.ajax() and $.get() and $.load()
get() 和post() 就是ajax() 的get方法和post方法,
load() 也同樣,可是load()能夠加載到一個選定的元素中。
一些高級控件的使用。
bootstrap是一個響應式框架,基於Jquery。
[UI] 03 - Bootstrap: component
[UI] 04 - Bootstrap: layout & navigation
[UI] 05 - Bootstrap: built-in components
排版 | 主標題、副標題 |
內容強調 | |
對齊風格 | |
代碼 | |
表格 | |
表單 | 水平表單 |
下拉選擇框 | |
文本框(包括驗證) | |
複選框、單選按鈕 | |
按鈕 | |
圖片 | 圖像 |
圖標 | |
網格系統 | 詳見原連接 |
導航條
- 按鈕下拉菜單
- 一組按鈕構成導航
- 導航與按鈕下拉菜單結合
分頁導航
翻頁導航
標籤
縮略圖配文字和連接(按鈕)
警示框 - 逐漸消失
進度條 - 五光十色版本
媒體對象 - 圖片與文字的佈局
列表組 - 含標籤
面板 - 圓角且內部分塊
彈出窗口 - dialog box
Ref: [Laravel] 04 - Blade templates
section, yield, extends, parent 四個關鍵字。
continue...