diff --git a/pages/css/assets/images/2012-12-13-1.JPG b/pages/css/assets/images/2012-12-13-1.JPG
new file mode 100644
index 0000000..e531afd
Binary files /dev/null and b/pages/css/assets/images/2012-12-13-1.JPG differ
diff --git a/pages/css/assets/images/2012-12-13-10.JPG b/pages/css/assets/images/2012-12-13-10.JPG
new file mode 100644
index 0000000..44fbb53
Binary files /dev/null and b/pages/css/assets/images/2012-12-13-10.JPG differ
diff --git a/pages/css/assets/images/2012-12-13-11.JPG b/pages/css/assets/images/2012-12-13-11.JPG
new file mode 100644
index 0000000..8f119d7
Binary files /dev/null and b/pages/css/assets/images/2012-12-13-11.JPG differ
diff --git a/pages/css/assets/images/2012-12-13-12.JPG b/pages/css/assets/images/2012-12-13-12.JPG
new file mode 100644
index 0000000..bdd9ca8
Binary files /dev/null and b/pages/css/assets/images/2012-12-13-12.JPG differ
diff --git a/pages/css/assets/images/2012-12-13-13.JPG b/pages/css/assets/images/2012-12-13-13.JPG
new file mode 100644
index 0000000..a17c6ec
Binary files /dev/null and b/pages/css/assets/images/2012-12-13-13.JPG differ
diff --git a/pages/css/assets/images/2012-12-13-14.JPG b/pages/css/assets/images/2012-12-13-14.JPG
new file mode 100644
index 0000000..7f64884
Binary files /dev/null and b/pages/css/assets/images/2012-12-13-14.JPG differ
diff --git a/pages/css/assets/images/2012-12-13-15.JPG b/pages/css/assets/images/2012-12-13-15.JPG
new file mode 100644
index 0000000..4648c43
Binary files /dev/null and b/pages/css/assets/images/2012-12-13-15.JPG differ
diff --git a/pages/css/assets/images/2012-12-13-16.JPG b/pages/css/assets/images/2012-12-13-16.JPG
new file mode 100644
index 0000000..bdb9423
Binary files /dev/null and b/pages/css/assets/images/2012-12-13-16.JPG differ
diff --git a/pages/css/assets/images/2012-12-13-17.JPG b/pages/css/assets/images/2012-12-13-17.JPG
new file mode 100644
index 0000000..1c704ce
Binary files /dev/null and b/pages/css/assets/images/2012-12-13-17.JPG differ
diff --git a/pages/css/assets/images/2012-12-13-18.JPG b/pages/css/assets/images/2012-12-13-18.JPG
new file mode 100644
index 0000000..dff3559
Binary files /dev/null and b/pages/css/assets/images/2012-12-13-18.JPG differ
diff --git a/pages/css/assets/images/2012-12-13-19.JPG b/pages/css/assets/images/2012-12-13-19.JPG
new file mode 100644
index 0000000..0c83c0f
Binary files /dev/null and b/pages/css/assets/images/2012-12-13-19.JPG differ
diff --git a/pages/css/assets/images/2012-12-13-2.JPG b/pages/css/assets/images/2012-12-13-2.JPG
new file mode 100644
index 0000000..22d6df0
Binary files /dev/null and b/pages/css/assets/images/2012-12-13-2.JPG differ
diff --git a/pages/css/assets/images/2012-12-13-20.JPG b/pages/css/assets/images/2012-12-13-20.JPG
new file mode 100644
index 0000000..0507ee1
Binary files /dev/null and b/pages/css/assets/images/2012-12-13-20.JPG differ
diff --git a/pages/css/assets/images/2012-12-13-3.JPG b/pages/css/assets/images/2012-12-13-3.JPG
new file mode 100644
index 0000000..1a82fa3
Binary files /dev/null and b/pages/css/assets/images/2012-12-13-3.JPG differ
diff --git a/pages/css/assets/images/2012-12-13-4.JPG b/pages/css/assets/images/2012-12-13-4.JPG
new file mode 100644
index 0000000..81892a5
Binary files /dev/null and b/pages/css/assets/images/2012-12-13-4.JPG differ
diff --git a/pages/css/assets/images/2012-12-13-5.JPG b/pages/css/assets/images/2012-12-13-5.JPG
new file mode 100644
index 0000000..abf7bed
Binary files /dev/null and b/pages/css/assets/images/2012-12-13-5.JPG differ
diff --git a/pages/css/assets/images/2012-12-13-6.JPG b/pages/css/assets/images/2012-12-13-6.JPG
new file mode 100644
index 0000000..352a8fb
Binary files /dev/null and b/pages/css/assets/images/2012-12-13-6.JPG differ
diff --git a/pages/css/assets/images/2012-12-13-7.JPG b/pages/css/assets/images/2012-12-13-7.JPG
new file mode 100644
index 0000000..788d1d1
Binary files /dev/null and b/pages/css/assets/images/2012-12-13-7.JPG differ
diff --git a/pages/css/assets/images/2012-12-13-8.JPG b/pages/css/assets/images/2012-12-13-8.JPG
new file mode 100644
index 0000000..4ac6e9d
Binary files /dev/null and b/pages/css/assets/images/2012-12-13-8.JPG differ
diff --git a/pages/css/assets/images/2012-12-13-9.JPG b/pages/css/assets/images/2012-12-13-9.JPG
new file mode 100644
index 0000000..ed7082c
Binary files /dev/null and b/pages/css/assets/images/2012-12-13-9.JPG differ
diff --git a/pages/css/assets/images/2012-12-14-1.JPG b/pages/css/assets/images/2012-12-14-1.JPG
new file mode 100644
index 0000000..1f0b64b
Binary files /dev/null and b/pages/css/assets/images/2012-12-14-1.JPG differ
diff --git a/pages/css/assets/images/2012-12-14-2.JPG b/pages/css/assets/images/2012-12-14-2.JPG
new file mode 100644
index 0000000..7c250b9
Binary files /dev/null and b/pages/css/assets/images/2012-12-14-2.JPG differ
diff --git a/pages/css/assets/images/2012-12-14-3.JPG b/pages/css/assets/images/2012-12-14-3.JPG
new file mode 100644
index 0000000..aee502a
Binary files /dev/null and b/pages/css/assets/images/2012-12-14-3.JPG differ
diff --git a/pages/css/assets/images/2012-12-14-4.JPG b/pages/css/assets/images/2012-12-14-4.JPG
new file mode 100644
index 0000000..682070a
Binary files /dev/null and b/pages/css/assets/images/2012-12-14-4.JPG differ
diff --git a/pages/css/base/__func.md b/pages/css/base/__func.md
new file mode 100644
index 0000000..52285e6
--- /dev/null
+++ b/pages/css/base/__func.md
@@ -0,0 +1,40 @@
+#func详细概述  **func**
+
+##命名空间
+
+现在分三个命名空间.
+
+###mc-base
+
+	基础空间函数包括
+	.tab-focus()  //触屏焦点
+	.clearfix()   //清浮动
+	.rotate(@degrees)  //旋转
+	.border-arrow(@width, @height, @color, @border-width:1px, @rotate:0deg)  //箭头.
+	.gradientBar(@primaryColor, @secondaryColor, @textColor: #fff, @textShadow: 0 -1px 0 rgba(0,0,0,.25)) //渐变条
+	.box-shadow(@shadow)  //盒阴影
+	.opacity(@opacity)  //透明度
+	.border-radius(@radius) //圆角
+	.transition(@transition)  //过渡
+		
+###font
+	
+	分为family子空间和若干函数.
+	（1）.子空间包括
+	.serif()   //字体为“serif”
+	.sans-serif()  //字体为"sans-serif"
+	.monospace()  //字体为".monospace"
+	
+	（2）.函数
+	.shorthand(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight)  //设置排版字体.
+	
+###gradient
+
+	基础空间函数包括：
+	.horizontal(@startColor: #555, @endColor: #333)  //水平渐变.
+	.vertical(@startColor: #555, @endColor: #333)  //垂直渐变.
+	.directional(@startColor: #555, @endColor: #333, @deg: 45deg) //对角.
+	.vertical-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) //垂直三色.
+	.radial(@innerColor: #555, @outerColor: #333) //径向渐变.
+	.striped(@color: #555, @angle: 45deg)  //条纹.
+
diff --git a/pages/css/base/__variables.md b/pages/css/base/__variables.md
new file mode 100644
index 0000000..b35de9a
--- /dev/null
+++ b/pages/css/base/__variables.md
@@ -0,0 +1,146 @@
+#变量  **变量**
+
+分为以下几类：
+
+##淡色（Grays）
+
+	@black:                 #000;
+	@grayDarker:            #222;
+	@grayDark:              #333;
+	@gray:                  #555;
+	@grayLight:             #999;
+	@grayLighter:           #eee;
+	@white:                 #fff;
+	
+##重色(Accent colors)
+
+	@blue:                  #049cdb;
+	@blueDark:              #0064cd;
+	@green:                 #46a546;
+	@red:                   #9d261d;
+	@yellow:                #ffc40d;
+	@orange:                #f89406;
+	@pink:                  #c3325f;
+	@purple:                #7a43b6;
+	
+##全局文本、背景（Scaffolding）
+	
+	@bodyBackground:        @white;
+	@textColor:             @grayDark;
+	
+##链接（Links）
+
+	@linkColor:             #08c;
+	@linkColorHover:        darken(@linkColor, 15%);
+
+##排版（Typography）
+
+	@sansFontFamily:        "Helvetica Neue", Helvetica, Arial, sans-serif;
+	@serifFontFamily:       Georgia, "Times New Roman", Times, serif;
+	@monoFontFamily:        Monaco, Menlo, Consolas, "Courier New", monospace;
+
+	@baseFontSize:          14px;
+	@baseFontFamily:        @sansFontFamily;
+	@baseLineHeight:        20px;
+	@altFontFamily:         @serifFontFamily;
+
+	@headingsFontFamily:    inherit; // empty to use BS default, @baseFontFamily
+	@headingsFontWeight:    bold;    // instead of browser default, bold
+	@headingsColor:         inherit; // empty to use BS default, @textColor
+	
+##组件尺寸（基于14px字体大小和20px行高）
+
+	@fontSizeLarge:         @baseFontSize * 1.25; // ~18px
+	@fontSizeSmall:         @baseFontSize * 0.85; // ~12px
+	@fontSizeMini:          @baseFontSize * 0.75; // ~11px
+
+	@paddingLarge:          11px 19px; // 44px
+	@paddingSmall:          2px 10px;  // 26px
+	@paddingMini:           1px 6px;   // 24px
+
+	@baseBorderRadius:      4px;
+	@borderRadiusLarge:     6px;
+	@borderRadiusSmall:     3px;
+	
+##Buttons
+
+	@btnBackground:                     @white;
+	@btnBackgroundHighlight:            darken(@white, 10%);
+	@btnBorder:                         #bbb;
+
+	@btnPrimaryBackground:              @linkColor;
+	@btnPrimaryBackgroundHighlight:     spin(@btnPrimaryBackground, 20%);
+
+	@btnInfoBackground:                 #5bc0de;
+	@btnInfoBackgroundHighlight:        #2f96b4;
+
+	@btnSuccessBackground:              #62c462;
+	@btnSuccessBackgroundHighlight:     #51a351;
+
+	@btnWarningBackground:              lighten(@orange, 15%);
+	@btnWarningBackgroundHighlight:     @orange;
+
+	@btnDangerBackground:               #ee5f5b;
+	@btnDangerBackgroundHighlight:      #bd362f;
+
+	@btnInverseBackground:              #444;
+	@btnInverseBackgroundHighlight:     @grayDarker;
+	
+##Forms
+
+	@inputBackground:               @white;
+	@inputBorder:                   #ccc;
+	@inputBorderRadius:             @baseBorderRadius;
+	@inputDisabledBackground:       @grayLighter;
+	@formActionsBackground:         #f5f5f5;
+	@inputHeight:                   @baseLineHeight + 10px; // base line-height + 8px vertical padding + 2px top/bottom border
+
+##Z-index（规定以下几种，避免用户自己定义）
+
+	@zindexDropdown:          1000;
+	@zindexPopover:           1010;
+	@zindexTooltip:           1030;
+	@zindexFixedNavbar:       1030;
+	@zindexModalBackdrop:     1040;
+	@zindexModal:             1050;
+	
+##Sprite
+
+	@iconSpritePath:          "../img/glyphicons-halflings.png";
+	@iconWhiteSpritePath:     "../img/glyphicons-halflings-white.png";
+	
+##Input placeholder text color
+
+	@placeholderText:         @grayLight;
+	
+##Hr border color
+
+	@hrBorder:                @grayLighter;
+	
+##Horizontal forms & lists
+
+	@horizontalComponentOffset:       180px;
+	
+##Pagination
+
+	@paginationBackground:                #fff;
+	@paginationBorder:                    #ddd;
+	@paginationActiveBackground:          #f5f5f5;
+
+##Form states and alerts
+
+	@warningText:             #c09853;
+	@warningBackground:       #fcf8e3;
+	@warningBorder:           darken(spin(@warningBackground, -10), 3%);
+
+	@errorText:               #b94a48;
+	@errorBackground:         #f2dede;
+	@errorBorder:             darken(spin(@errorBackground, -10), 3%);
+
+	@successText:             #468847;
+	@successBackground:       #dff0d8;
+	@successBorder:           darken(spin(@successBackground, -10), 5%);
+
+	@infoText:                #3a87ad;
+	@infoBackground:          #d9edf7;
+	@infoBorder:              darken(spin(@infoBackground, -10), 7%);
diff --git a/pages/css/category.md b/pages/css/category.md
index d0d2c73..c6f8ff0 100644
--- a/pages/css/category.md
+++ b/pages/css/category.md
@@ -1,6 +1,19 @@
 * [Mix CSS入门手册](tutorial/quick-guide.md)
 * [开发文档](#)
+	* [基础文档&开发规范](tutorial/quick-guide.md)
 	* [Less生成CSS冗余测试](tutorial/redundancy_of_css_generated_by_less.md)
 	* [bootStrap分析文档](tutorial/analysis_of_bootStrap.md)
+	* [适合移动端的组件？(与PC的差别)](tutorial/whats_mobile_component.md)
+* [组件基础依赖/规范](#)
+    * [__variables](base/__variables.md)
+    * [__func](base/__func.md)
 * [组件入门](#)
 	* [button](component/button.md)
+	* [text](component/text.md)
+	* [select](component/select.md)
+	* [checkbox](component/checkbox.md)
+	* [radio](component/radio.md)
+	* [textarea](component/textarea.md)
+	* [navs](component/navs.md)
+	* [pagination](component/pagination.md)
+	* [breadcrumbs](component/breadcrumbs.md)
\ No newline at end of file
diff --git a/pages/css/component/breadcrumbs.md b/pages/css/component/breadcrumbs.md
new file mode 100644
index 0000000..904e79a
--- /dev/null
+++ b/pages/css/component/breadcrumbs.md
@@ -0,0 +1,10 @@
+#breadcrumbs组件 **breadcrumbs**
+
+
+##集中控制的样式属性
+	
+	padding
+	margin
+	list-style
+	background-color
+	border-radius
\ No newline at end of file
diff --git a/pages/css/component/button.md b/pages/css/component/button.md
new file mode 100644
index 0000000..87b8ca7
--- /dev/null
+++ b/pages/css/component/button.md
@@ -0,0 +1,14 @@
+#button组件 **button**
+
+
+##集中控制的样式属性
+	
+	display
+	padding
+	font-size
+	line-height
+	text-align
+	vertical-align
+	border
+	background
+	
diff --git a/pages/css/component/checkbox.md b/pages/css/component/checkbox.md
new file mode 100644
index 0000000..564613b
--- /dev/null
+++ b/pages/css/component/checkbox.md
@@ -0,0 +1,11 @@
+#checkbox组件 **checkbox**
+
+
+##集中控制的样式属性
+	
+	width
+	height
+	border
+	border-top
+	background
+	
diff --git a/pages/css/component/navs.md b/pages/css/component/navs.md
new file mode 100644
index 0000000..8c0e44e
--- /dev/null
+++ b/pages/css/component/navs.md
@@ -0,0 +1,12 @@
+#navs组件 **navs**
+
+
+##集中控制的样式属性
+
+	
+	margin-left
+	margin-bottom
+	list-style
+
+	//for webkit default margin.
+	padding-left
\ No newline at end of file
diff --git a/pages/css/component/pagination.md b/pages/css/component/pagination.md
new file mode 100644
index 0000000..871569c
--- /dev/null
+++ b/pages/css/component/pagination.md
@@ -0,0 +1,6 @@
+#pagination组件 **pagination**
+
+
+##集中控制的样式属性
+
+	
\ No newline at end of file
diff --git a/pages/css/component/radio.md b/pages/css/component/radio.md
new file mode 100644
index 0000000..75ba8f6
--- /dev/null
+++ b/pages/css/component/radio.md
@@ -0,0 +1,10 @@
+#radio组件 **radio**
+
+
+##集中控制的样式属性
+
+	width
+	height
+	background
+	background-image
+	
diff --git a/pages/css/component/select.md b/pages/css/component/select.md
new file mode 100644
index 0000000..2c606d1
--- /dev/null
+++ b/pages/css/component/select.md
@@ -0,0 +1,12 @@
+#select组件 **select**
+
+
+##集中控制的样式属性
+
+	width
+	height
+	border
+	border-top
+	padding
+	background
+	
diff --git a/pages/css/component/text.md b/pages/css/component/text.md
new file mode 100644
index 0000000..5de6d11
--- /dev/null
+++ b/pages/css/component/text.md
@@ -0,0 +1,14 @@
+#text组件 **text**
+
+
+##集中控制的样式属性
+
+	width
+	height
+	border
+	border-top
+	background
+	border-radius
+	
+
+	
\ No newline at end of file
diff --git a/pages/css/component/textarea.md b/pages/css/component/textarea.md
new file mode 100644
index 0000000..df9a842
--- /dev/null
+++ b/pages/css/component/textarea.md
@@ -0,0 +1,9 @@
+#textarea组件 **textarea**
+
+
+##集中控制的样式属性
+
+	padding
+	border
+	background
+	
diff --git a/pages/css/component/thumbnails.md b/pages/css/component/thumbnails.md
new file mode 100644
index 0000000..67e3f8e
--- /dev/null
+++ b/pages/css/component/thumbnails.md
@@ -0,0 +1,6 @@
+#thumbnails组件 **thumbnails**
+
+
+##集中控制的样式属性
+
+	
\ No newline at end of file
diff --git a/pages/css/tutorial/analysis_of_bootStrap.md b/pages/css/tutorial/analysis_of_bootStrap.md
index dbca348..f8cd109 100644
--- a/pages/css/tutorial/analysis_of_bootStrap.md
+++ b/pages/css/tutorial/analysis_of_bootStrap.md
@@ -2,33 +2,17 @@
 
 ##序（持续更新）
 
-##文件组织
-less文件包含两部分：（从文件组织角度考虑）
-
-+ 函数
-+ class
-
-函数分为：
-
-+ 基本。基于组件，组件内部特有的函数。
-+ 通用。组件间提取出来，在组件之间可以使用。
-
-class分为：
-
-+ 基本。这部分class提供最基本的组件样式完整展示。
-+ 扩展。这部分class属于定制，在业务中可能有许多定制的部分，如给Button加上箭头。突破基本样式的以扩展class形式展现。
-
 ##和现有框架的比较
 
-最重要的几个衡量指标：灵活性，可扩展性，可维护性。
+几个衡量指标：灵活性，可扩展性，可维护性。
 
 
 ###h5
 
 	1.多用class标签；
 	2.级联和DOM结构关联度较高；
-	3.总的域名空间#tbh5v0；
-	4.实现方式容易理解；
+	3.总的域名空间(#tbh5v0)；
+	4.实现方式容易理解(阅读、书写)；
 	5.业务关联度高:比如说页尾，Less结构：
 	.footer{
 		a{
@@ -111,7 +95,7 @@ class分为：
 		.c-p-select{}
 	}
 	
-	盘根错节的结构，扩展性，灵活性很差。
+	盘根错节的结构，扩展性，灵活性较差。
 	
 	
 ###TaobaoPad
diff --git a/pages/css/tutorial/quick-guide.md b/pages/css/tutorial/quick-guide.md
index e69de29..6166c77 100644
--- a/pages/css/tutorial/quick-guide.md
+++ b/pages/css/tutorial/quick-guide.md
@@ -0,0 +1,72 @@
+#基础文档&开发规范 **基础文档**
+
+
+##文件组织
+
+less文件包含两部分：
+
++ 函数
++ class
+
+以button.less 为例：
+
+
+	//button的命名空间.
+	#mc-btn{	
+
+		//函数.
+		.btn-base(
+			@padding: 4px 10px,
+			@border: 1px solid #bbb
+		){
+			display: inline-block;
+			padding: @padding;
+			font-size: @baseFontSize;
+			line-height: @baseLineHeight;
+			text-align: center;
+			vertical-align: middle;
+			border: @border;
+			
+			....
+		}
+	}
+	
+	//class
+	.btn-base{
+
+		#mc-btn > .btn-base();
+
+		//属定制，抽出来作为函数.
+		border-bottom-color: darken(@btnBorder, 10%);
+		#mc-base > .border-radius(@baseBorderRadius);
+		#mc-base > .box-shadow(~"inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)");
+		
+		
+		....
+	}
+
+函数分为：
+
++ 基本。基于组件，组件内部特有的函数。如button.less 文件下的.btn-base()
+	
++ 通用。组件间提取出来，在组件之间可以使用。
+
+如__func.less 下的
+
+	//__func.less下的函数为通用func.
+	#mc-base{
+		//tab-focus
+		.tab-focus() { // Default
+			outline: thin dotted #333; // Webkit
+			outline: 5px auto -webkit-focus-ring-color;
+			outline-offset: -2px;
+		}
+	}
+
+class分为：
+
++ 基本。这部分class提供最基本的组件样式完整展示。如button.less中的.btn-base,如果有其他版本要求会在基础库内扩展（？？？需不需要在基础库扩展的？？）
+
++ 扩展。这部分class属于定制，在业务中可能有许多定制的部分，如给Button加上箭头。突破基本样式的以扩展class形式展现。（待定）
+
+##适合移动端的组件库
diff --git a/pages/css/tutorial/whats_mobile_component.md b/pages/css/tutorial/whats_mobile_component.md
new file mode 100644
index 0000000..d114bad
--- /dev/null
+++ b/pages/css/tutorial/whats_mobile_component.md
@@ -0,0 +1,215 @@
+#适合移动端的组件 **移动端组件**
+
+写此篇的目的，完全是因为在读bootStrap后将其部分搬到Mixcss发现诸多“水土不服”的地方，移动端的组件还是与PC上的组件有诸多不同点的。
+
++ PC代表：bootStrap
+
++ Mobile代表： H5 、 taobaoPad 、Jquery Mobile(Native)
+
+##操作方式区别
+
+**一些伪类**
+
+这在一些标签的使用上就有所不同，如PC上使用hover：
+
+![hover后的样式](../assets/images/2012-12-13-1.JPG)
+
+但是在Mobile端就不需要考虑这种情况，要考虑的情况可能是focus，disable，readonly等这些情况。
+
+
+**滚动VS滑动**
+
+这块在样式上的区别还算比较小。但是在一些JS动作上区别比较大。
+
+
+##组件展现
+
+###button
+
+1.下面是bootStrap的button呈现方式：
+
+![button呈现样式](../assets/images/2012-12-13-2.JPG)
+
+再看一下H5 和 Jquery Mobile（类似Native）的按钮样式
+
+2.H5：
+
+![H5的button的呈现样式](../assets/images/2012-12-13-3.JPG)
+
+3.Jquery Mobile（Native）：
+
+![button的呈现样式](../assets/images/2012-12-13-4.JPG)
+
+
+比较起来，H5 和 Jquery Mobile 重视手指点击区域、在有限区域的分辨度的设计，而bootStrap基于PC，这点并不突出。
+
+**因此，MixCss在提供的样式依据为点击区域、辨识度等CSS属性。**
+
+##Tables
+
+bootStrap的Tables:
+![Tables](../assets/images/2012-12-13-5.JPG)
+
+**这类组件在Mobile上应用场景很少。**
+
+##Form:Legend
+
+bootStrap的Legend:
+
+![Legend的呈现样式](../assets/images/2012-12-13-6.JPG)
+
+**目前H5和TaobaoPad都没有应用。此类控件场景相对较少（或者用控件拼合，如label，hr）。**
+
+
+##Form:Inputs
+
+输入框：
+
+bootStrap的Inputs:
+
+![Inputs的呈现样式](../assets/images/2012-12-13-7.JPG)
+
+**和移动端的区别还是在于一些伪类，如hover，mousein，mouseout，除去这些其他和移动端基本一致。 **
+
+##Form:TextArea
+
+文本区：
+
+bootStrap的TextArea:
+
+![TextArea的呈现样式](../assets/images/2012-12-13-8.JPG)
+
+
+**在某些属性上：如大小可拖动。在Mobile上并不太适用。**
+
+
+##Form: Checkboxes and radios
+
+单选、复选框：
+
+bootStrap:
+![Checkboxes的呈现样式](../assets/images/2012-12-13-9.JPG)
+
+Mobile的样式：
+
+![Checkboxes的呈现样式](../assets/images/2012-12-13-10.JPG)
+
+**和Button类似，Mobile端更突出点击区域、辨识度。这部分的CSS属性可能是宽、高、定制的背景等等**
+
+##Form: select
+
+选择框：
+
+bootStrap:
+![select的呈现样式](../assets/images/2012-12-13-11.JPG)
+
+Mobile的样式：
+![select的呈现样式](../assets/images/2012-12-13-12.JPG)
+
+**同上，点击区域、辨识度。**
+
+##Form: 混合
+
+Form混合类：
+
+bootStrap:
+![Form混合的呈现样式](../assets/images/2012-12-13-13.JPG)
+
+Mobile的混合样式：
+
+##Images&icons
+
+图片、图标类：
+
+暂时没发现太大区别
+
+##nav&nav bar
+
+导航、导航条：
+
+bootstrap：
+![nav&nav bar的呈现样式](../assets/images/2012-12-13-14.JPG)
+
+Mobile：
+![nav&nav bar的呈现样式](../assets/images/2012-12-13-15.JPG)
+
+**和PC相比，Mobile的设计->占用空间灵活（隐藏）、简约**
+
+##Breadcrumbs
+
+面包屑：
+
+bootStrap:
+![Breadcrumbs的呈现样式](../assets/images/2012-12-13-16.JPG)
+
+Mobile：
+
+**受限于点击区域，此类控件基本被导航条代替**
+
+
+##Pagination
+
+分页：
+
+
+bootStrap:
+
+![Pagination的呈现样式](../assets/images/2012-12-13-17.JPG)
+
+Mobile：
+
+![Pagination的呈现样式](../assets/images/2012-12-13-18.JPG)
+
+**相比较而言，Mobile的强调点击区域、辨识度。**
+
+
+##Labels and badges
+
+标签、徽章类：
+
+bootStrap:
+
+![Labels and badges的呈现样式](../assets/images/2012-12-13-19.JPG)
+
+Mobile:
+
+![Labels and badges的呈现样式](../assets/images/2012-12-13-20.JPG)
+
+**没有特别的区别**
+
+##Typograghy
+
+字体，排版类：
+
+bootStrap:
+
+![Typograghy的呈现样式](../assets/images/2012-12-14-1.JPG)
+
+Mobile：
+![Typograghy的呈现样式](../assets/images/2012-12-14-2.JPG)
+
+**在字体和排版上主要还是根据设计约定，如果有针对字体的响应式设计的话，可能会有诸如em单位的使用**
+
+##Thumbnails
+
+缩略图类：
+
+bootStrap:
+
+![Thumbnails的呈现样式](../assets/images/2012-12-14-3.JPG)
+
+Mobile：
+![Thumbnails的呈现样式](../assets/images/2012-12-14-4.JPG)
+
+**Mobile在对空间利用要求更加高，紧凑，简明，突出；另外一个就是响应式，现在的H5还是固定列宽，而Bootstrap已经做了响应式的Grid布局，MixCss也尽力将响应式引入到Mobile端，特别是针对这种Thumbnails（因为它占据整个页面的主体）**
+
+##Alerts
+
+弹框类
+
+bootStrap:
+
+![Alerts的呈现样式](../assets/images/2012-12-14-3.JPG)
+
+
+