[Full-stack] 網頁佈局藝術 - Less

故事背景

---

 

一個過程：

template/html ----> css ----> less ----> bootstrap/flex ----> Semantic-ui

 

flex是css3新增內容， less是css3的預編譯器，bootstrap是一系列css3 class合集

Semantic-ui做爲一款開發框架，幫助開發者使用對人類友好的HTML語言構建優雅的響應式佈局。

 

響應式佈局 based on Semantic-ui as following: 

 

 

 

 

進化史

---

1、HTML 基礎

Goto: [Node.js] 07 - Html and Http

 

 

2、CSS 基礎

Goto: [UI] 01 - CSS

• 選擇器

選擇器	class 選擇器
	id 選擇器
分組方式簡寫法 也能夠嵌套寫法 也能夠組合寫法

 

• 樣式表

優先級
1	（內聯樣式）Inline style
2	（內部樣式）Internal style sheet
3	（外部樣式）External style sheet
4	瀏覽器默認樣式

 

• 屬性控制

背景、文本、列表、表格、可見、內聯。

 

• 空間位置

首先、要了解盒子模型。

其次、position定位屬性的五個值。

以後、圖片浮動效果。

最後、對齊。

 

• 僞類、僞元素

冒號後面緊跟着的一些特性。

 

 

3、CSS 佈局

Goto: [UI] 02 - Layout & CSS3

這裏展現了 經過基本的CSS建立的頁面風格；與以後的bootstrap作對比。

 

 

4、jQuery

Ref: [UI] 06 - jQuery

• 組件 與 jQuery 事件

<script>
$(document).ready( function(){
  $("button").click( function(){　　 # <button>...</button>
    $("#test").hide(); 　　　　　　　　# <p id="test">...</p>
  });
});
</script>

 

• 效果

淡入淡出、下拉菜單、動畫

Callback 方法、鏈(Chaining)

 

• DOM 操做 

HTML	設置內容，設置屬性，插入內容，刪除元素。
CSS	設置一個或多個屬性，返回屬性。

 

• 對象 size 獲取

高寬，內高寬，外高寬。

 

• 獲取對象 - 遍歷

得到parents, childern, siblings 

 

• AJAX

Ref: Difference between $.ajax() and $.get() and $.load()

get() 和post() 就是ajax() 的get方法和post方法，

load() 也同樣，可是load()能夠加載到一個選定的元素中。

  

• jQuery 插件

一些高級控件的使用。

 

 

 

Bootstrap

---

bootstrap是一個響應式框架，基於Jquery。

[UI] 03 - Bootstrap: component

[UI] 04 - Bootstrap: layout & navigation

[UI] 05 - Bootstrap: built-in components

 

1、基礎操做

排版	主標題、副標題
	內容強調
	對齊風格
	代碼
	表格
表單	水平表單
	下拉選擇框
	文本框(包括驗證)
	複選框、單選按鈕
	按鈕
圖片	圖像
	圖標
網格系統	詳見原連接

 

 

2、菜單欄

導航條 

　　- 按鈕下拉菜單

　　- 一組按鈕構成導航

　　- 導航與按鈕下拉菜單結合

分頁導航

翻頁導航

標籤

 

 

3、內置組件

縮略圖配文字和連接（按鈕）

警示框 - 逐漸消失

進度條 - 五光十色版本

媒體對象 - 圖片與文字的佈局

列表組 - 含標籤

面板 - 圓角且內部分塊 

彈出窗口 - dialog box

 

 

 

PHP 模板

---

1、PHP 視圖

Ref: [Laravel] 04 - Blade templates

section, yield, extends, parent 四個關鍵字。

 

continue...