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