Skip to content

Z
zui

易企天创 / zui
11 个月 前同步成功

通知 6
Star 0
Fork 1
Z
zui

体验新版 GitCode，发现更多精彩内容 >>

提交 69ec79ea 编写于 作者: C Catouse
浏览文件
操作

* update document.

上级 63170797
隐藏空白更改
内联 并排
Showing with 106 addition and 59 deletion
docs/part/basic-global.html
浏览文件 @ 69ec79ea
<article>
<p>ZUI使用 <a href="http://necolas.github.io/normalize.css/" target=
"_blank">normalize</a> 来重置样式，这样尽可能保证在所有浏览器中有一致的体验。</p>
</article>
<section>
<header><h3>为何使用 Normalize.css</h3></header>
<header><h3>Normalize.css</h3></header>
<article>
<p>如果一份没有任何样式设置的html文档在浏览器打开时，浏览器会使用默认的样式来呈现文档，确保更易于阅读文本和区分文档中不同的内容。</p>
<p>ZUI使用 <a href="http://necolas.github.io/normalize.css/" target=
"_blank">normalize</a> 来重置样式，这样尽可能保证在所有浏览器中有一致的体验。</p>
<p>如果一份没有任何样式设置的 HTML 文档在浏览器打开时，浏览器会使用默认的样式来呈现文档，确保更易于阅读文本和区分文档中不同的内容。</p>
<p>但是当我们需要应用自己的样式时，浏览器默认的样式会造成干扰，更重要的是不同的浏览器的默认样式并不相同，这使得我们希望的样式最终呈现效果变得不可控。<code>Normalize.css</code> 正是为了解决此问题而生，而且做的更好。</p>
</article>
</section>
<section>
<header><h3>相关资源</h3></header>
<article>
<h4>相关资源</h4>
<ul>
<li><a href="http://necolas.github.io/normalize.css/" target="_blank">Normalize.css 项目地址</a></li>
<li><a href="https://github.com/necolas/normalize.css" target="_blank">Normalize.css Github 项目地址</a></li>
</ul>
</article>
</section>
<section>
<header><h3>基础排版和链接</h3></header>
<article>
<p>基础排版样式和链接样式能在 <code>src/less/basic/scraffolding.less</code> 文件中找到对应源码。</p>
</article>
</section>
docs/part/basic-layout.md 0 → 100644
浏览文件 @ 69ec79ea
# 布局容器
布局容器用来包裹栅格系统和页面内容。布局容器能够在水平方向上自动居中，并且设置了左内边距和右内边距，与栅格系统 `.row` 配合使用时能够抵消 `.row` 左右两侧的负数外边距。
<div class="alert alert-warning">由于布局容器已设置内边距，不要在一个布局容器内紧邻包裹另一个布局容器，这样产生额外的内边距。</div>
ZUI 中提供了三种布局容器来适应不同的布局方式：响应式布局、液态化布局、固定宽度布局。
## 响应式布局容器
响应式布局容器会根据页面宽度自动调整容器宽度已方便内容阅读。
```html
<div class="container">
...
</div>
```
## 液态化布局容器
液态化布局容器宽度设置为 100%，会占据全部父级容器宽度。
```html
<div class="container-fluid">
...
</div>
```
## 固定宽度布局容器
固定宽度布局的宽度为固定值。提供以下 4 种尺寸的固定宽度布局容器：
<template class="table-auto table-bordered"/>
| 类名 | 宽度 |
|-----------------------|--------|
| `.container-fixed` | 1160px |
| `.container-fixed-md` | 960px |
| `.container-fixed-sm` | 740px |
| `.container-fixed-xs` | 440px |
```html
<div class="container-fixed">
...
</div>
```
docs/part/basic-responsive.html
浏览文件 @ 69ec79ea
<article>
<p>现代web应用应该支持响应式布局。栅格系统已提供良好的基础构建响应式布局页面，同时也提供一些辅助工具类来控制内容在不同设备的展现方式。</p>
<p>在ZUI中提供针对4中不同尺寸的设备屏幕进行分别控制。</p>
<p>现代 Web 应用应该支持响应式设计。栅格系统已提供良好的基础构建响应式设计页面，同时也提供一些辅助工具类来控制内容在不同设备的展现方式。</p>
<p>在ZUI中提供针对 4 中不同尺寸的设备屏幕进行分别控制。</p>
<table class="table table-bordered">
<thead>
<tr>
......@@ -11,28 +11,28 @@
</thead>
<tbody>
<tr>
<td>超小屏幕（手机）</td>
<td>超小屏幕（手机）<span class="label label-primary visible-xs inline">当前</span></td>
<td>xs</td>
<td>&lt;768px</td>
</tr>
<tr>
<td>小屏幕（平板）</td>
<td>小屏幕（平板）<span class="label label-primary visible-sm inline">当前</span></td>
<td>sm</td>
<td>&gt;=768px</td>
</tr>
<tr>
<td>中等屏幕（笔记本电脑）</td>
<td>中等屏幕（笔记本电脑）<span class="label label-primary visible-md inline">当前</span></td>
<td>md</td>
<td>&gt;=992px</td>
</tr>
<tr>
<td>大屏幕（桌面电脑）</td>
<td>大屏幕（桌面电脑）<span class="label label-primary visible-lg inline">当前</span></td>
<td>lg</td>
<td>&gt;=1200px</td>
</tr>
</tbody>
</table>
<p>针对4种屏幕类型各定义两种辅助类来在不同的设备上显示或隐藏内容。</p>
<p>针对 4 种屏幕类型各定义两种辅助类来在不同的设备上显示或隐藏内容。</p>
<table class="table table-bordered">
<thead>
<tr>
......@@ -46,86 +46,87 @@
<tbody>
<tr>
<th>.visible-xs</th>
<td>可见</td>
<td>隐藏</td>
<td>隐藏</td>
<td>隐藏</td>
<td class="hl-success">可见</td>
<td class="text-muted">隐藏</td>
<td class="text-muted">隐藏</td>
<td class="text-muted">隐藏</td>
</tr>
<tr>
<th>.visible-sm</th>
<td>隐藏</td>
<td>可见</td>
<td>隐藏</td>
<td>隐藏</td>
<td class="text-muted">隐藏</td>
<td class="hl-success">可见</td>
<td class="text-muted">隐藏</td>
<td class="text-muted">隐藏</td>
</tr>
<tr>
<th>.visible-md</th>
<td>隐藏</td>
<td>隐藏</td>
<td>可见</td>
<td>隐藏</td>
<td class="text-muted">隐藏</td>
<td class="text-muted">隐藏</td>
<td class="hl-success">可见</td>
<td class="text-muted">隐藏</td>
</tr>
<tr>
<th>.visible-lg</th>
<td>隐藏</td>
<td>隐藏</td>
<td>隐藏</td>
<td>可见</td>
<td class="text-muted">隐藏</td>
<td class="text-muted">隐藏</td>
<td class="text-muted">隐藏</td>
<td class="hl-success">可见</td>
</tr>
<tr>
<th>.hidden-xs</th>
<td>隐藏</td>
<td>可见</td>
<td>可见</td>
<td>可见</td>
<td class="text-muted">隐藏</td>
<td class="hl-success">可见</td>
<td class="hl-success">可见</td>
<td class="hl-success">可见</td>
</tr>
<tr>
<th>.hidden-sm</th>
<td>可见</td>
<td>隐藏</td>
<td>可见</td>
<td>可见</td>
<td class="hl-success">可见</td>
<td class="text-muted">隐藏</td>
<td class="hl-success">可见</td>
<td class="hl-success">可见</td>
</tr>
<tr>
<th>.hidden-md</th>
<td>可见</td>
<td>可见</td>
<td>隐藏</td>
<td>可见</td>
<td class="hl-success">可见</td>
<td class="hl-success">可见</td>
<td class="text-muted">隐藏</td>
<td class="hl-success">可见</td>
</tr>
<tr>
<th>.hidden-lg</th>
<td>可见</td>
<td>可见</td>
<td>可见</td>
<td>隐藏</td>
<td class="hl-success">可见</td>
<td class="hl-success">可见</td>
<td class="hl-success">可见</td>
<td class="text-muted">隐藏</td>
</tr>
</tbody>
</table>
<p>
其中显示辅助类<code>.visible-xs</code>、<code>.visible-sm</code>、<code>.visible-md</code>、<code>.visible-lg</code>可以组合使用，同理对于隐藏辅助类也可以组合使用以达到不同的效果。但不要将显示辅助类和隐藏辅助类混合使用。</p>
<p>其中显示辅助类 <code>.visible-xs</code>、<code>.visible-sm</code>、<code>.visible-md</code>、<code>.visible-lg</code> 可以组合使用，同理对于隐藏辅助类也可以组合使用以达到不同的效果。但不要将显示辅助类和隐藏辅助类混合使用。</p>
<p>ZUI也提供用来控制打印机的显示与隐藏的辅助类。显示和隐藏不能同时使用。</p>
<ul>
<li><code>.visible-print</code>：在打印时显示，在浏览器正常浏览时隐藏。</li>
<li><code>.hidden-print</code>：在浏览器正常浏览时显示，在打印时隐藏。</li>
</ul>
</ul>
<p>默认情况下，响应式显示辅助类 <code>.visible-*</code> 会将元素的 CSS <code>display</code> 属性设置为 <code>block</code>（表格元素 <code>&lt;tr&gt;</code>、<code>&lt;td&gt;</code>、<code>&lt;th&gt;</code> 除外）。如果期望在显示时将 <code>display</code> 属性设置为 <code>inline</code> 或者 <code>inline-block</code>，应该将 <code>.visible-*</code> 与 <code>.inline</code> 或 <code>.inline-block</code> 一起使用。</p>
</article>
<section>
<header><h3>禁用响应式布局</h3></header>
<header><h3>禁用响应式设计</h3></header>
<article>
<p>有时你所开发应用仅针对一个设备或平台，并不需要响应式布局。即使这样，也建议你使用响应式布局，因为不需要额外的代码，而且为跨屏提供了可能性。</p>
<p>在ZUI中并没用一个全局的开关来控制是否启用响应式布局。如果确实要禁用该功能，请参考下面的建议：</p>
<p>有时你所开发应用仅针对一个设备或平台，并不需要响应式设计。</p>
<p>在 ZUI 中响应式设计是一个全局的思路，默认情况下大部分组件如有必要都会启用响应式设计。如果需要在你的网站中全面禁用该功能，请参考下面的建议：</p>
<ul>
<li>移除 <code>&lt;meta name=&quot;viewport&quot;
content=&quot;width=device-width, initial-scale=1&quot;&gt;</code>
标签，禁用移动设备缩放可视窗口尺寸。</li>
<li>
避免使用一些响应式工具类，例如<code>.visible-xs</code>、<code>.visible-sm</code>、<code>.visible-md</code>、<code>.visible-lg</code>等。</li>
<li>当使用栅格系统时避免使用
<code>.col-sm-*</code>、<code>.col-md-*</code>、<code>.col-lg-*</code>，统一使用
<code>.col-xs-*</code>。</li>
<li>当使用栅格系统时避免使用 <code>.col-sm-*</code>、<code>.col-md-*</code>、<code>.col-lg-*</code>，统一使用 code>.col-xs-*</code>。</li>
<li>使用固定宽度的布局容器（<code>.container-fixed</code>、<code>.container-fixed-md</code>、<code>.container-fixed-sm</code>、<code>.container-fixed-xs</code>）来代替响应式设计容器（<code>.container</code>）。</li>
<li>避免使用响应式组件，应该使用非响应式组件来代替，例如使用导航（<code>.nav</code>） 来代替响应式导航（<code>.navbar</code>）。</li>
</ul>
<div class="alert alert-info">即便 ZUI 为非响应式设计提供了方案，但还是建议使用响应式设计。实现响应式并不需要很多额外的代码和工作，实现响应式设计为跨屏提供了可能性。</div>
</article>
</section>
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或