[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:

 

进化史

---

一、HTML 基础

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

 

 

二、CSS 基础

Goto: [UI] 01 - CSS

• 选择器

选择器	class 选择器
	id 选择器
分组方式简写法 也可以嵌套写法 也可以组合写法

• 样式表

优先级
1	（内联样式）Inline style
2	（内部样式）Internal style sheet
3	（外部样式）External style sheet
4	浏览器默认样式

• 属性控制

背景、文本、列表、表格、可见、内联。

• 空间位置

首先、要了解盒子模型。

其次、position定位属性的五个值。

之后、图片浮动效果。

最后、对齐。

• 伪类、伪元素

冒号后面紧跟着的一些特性。

三、CSS 布局

Goto: [UI] 02 - Layout & CSS3

这里展示了 通过基本的CSS创建的页面风格；与之后的bootstrap做对比。

四、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

一、基础操作

排版	主标题、副标题
	内容强调
	对齐风格
	代码
	表格
表单	水平表单
	下拉选择框
	文本框(包括验证)
	复选框、单选按钮
	按钮
图片	图像
	图标
网格系统	详见原链接

二、菜单栏

导航条

　　- 按钮下拉菜单

　　- 一组按钮构成导航

　　- 导航与按钮下拉菜单结合

分页导航

翻页导航

标签

三、内置组件

缩略图配文字和链接（按钮）

警示框 - 逐渐消失

进度条 - 五颜六色版本

媒体对象 - 图片与文字的布局

列表组 - 含标签

面板 - 圆角且内部分块

弹出窗口 - dialog box

PHP 模板

---

一、PHP 视图

Ref: [Laravel] 04 - Blade templates

section, yield, extends, parent 四个关键字。

continue...