From 69ec79eaadf93474c5fcf658e42b06dc5a6feb00 Mon Sep 17 00:00:00 2001 From: Catouse Date: Tue, 16 Aug 2016 16:00:26 +0800 Subject: [PATCH] * update document. --- docs/part/basic-global.html | 22 ++++---- docs/part/basic-layout.md | 46 ++++++++++++++++ docs/part/basic-responsive.html | 97 +++++++++++++++++---------------- 3 files changed, 106 insertions(+), 59 deletions(-) create mode 100644 docs/part/basic-layout.md diff --git a/docs/part/basic-global.html b/docs/part/basic-global.html index bcca0fbae..ed7cb8202 100755 --- a/docs/part/basic-global.html +++ b/docs/part/basic-global.html @@ -1,20 +1,20 @@ -
-

ZUI使用 normalize 来重置样式,这样尽可能保证在所有浏览器中有一致的体验。

-
-

为何使用 Normalize.css

+

Normalize.css

-

如果一份没有任何样式设置的html文档在浏览器打开时,浏览器会使用默认的样式来呈现文档,确保更易于阅读文本和区分文档中不同的内容。

+

ZUI使用 normalize 来重置样式,这样尽可能保证在所有浏览器中有一致的体验。

+

如果一份没有任何样式设置的 HTML 文档在浏览器打开时,浏览器会使用默认的样式来呈现文档,确保更易于阅读文本和区分文档中不同的内容。

但是当我们需要应用自己的样式时,浏览器默认的样式会造成干扰,更重要的是不同的浏览器的默认样式并不相同,这使得我们希望的样式最终呈现效果变得不可控。Normalize.css 正是为了解决此问题而生,而且做的更好。

-
-
-
-

相关资源

-
+
+

基础排版和链接

+
+

基础排版样式和链接样式能在 src/less/basic/scraffolding.less 文件中找到对应源码。

+
+
diff --git a/docs/part/basic-layout.md b/docs/part/basic-layout.md new file mode 100644 index 000000000..cfc410779 --- /dev/null +++ b/docs/part/basic-layout.md @@ -0,0 +1,46 @@ +# 布局容器 + +布局容器用来包裹栅格系统和页面内容。布局容器能够在水平方向上自动居中,并且设置了左内边距和右内边距,与栅格系统 `.row` 配合使用时能够抵消 `.row` 左右两侧的负数外边距。 + +
由于布局容器已设置内边距,不要在一个布局容器内紧邻包裹另一个布局容器,这样产生额外的内边距。
+ +ZUI 中提供了三种布局容器来适应不同的布局方式:响应式布局、液态化布局、固定宽度布局。 + +## 响应式布局容器 + +响应式布局容器会根据页面宽度自动调整容器宽度已方便内容阅读。 + +```html +
+ ... +
+``` + +## 液态化布局容器 + +液态化布局容器宽度设置为 100%,会占据全部父级容器宽度。 + +```html +
+ ... +
+``` + +## 固定宽度布局容器 + +固定宽度布局的宽度为固定值。提供以下 4 种尺寸的固定宽度布局容器: + +