Files
ant-design/docs/spec/alignment-cn.html
T
2017-03-12 15:28:33 +08:00

109 lines
23 KiB
HTML
Raw Blame History

This file contains invisible Unicode characters
This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="An enterprise-class UI design language and React-based implementation">
<meta name="description" content="A set of high-quality React components">
<meta name="description" content="One of best React UI library for enterprise background">
<title>Ant Design - A UI Design Language</title>
<script>
(function() {
function isLocalStorageNameSupported() {
var testKey = 'test';
var storage = window.localStorage;
try {
storage.setItem(testKey, '1');
storage.removeItem(testKey);
return true;
} catch (error) {
return false;
}
}
// 优先级提高到所有静态资源的前面,语言不对,加载其他静态资源没意义
var pathname = location.pathname;
function isZhCN(pathname) {
return /-cn\/?$/.test(pathname);
}
function getLocalizedPathname(path, zhCN) {
var pathname = path.startsWith('/') ? path : '/' + path;
if (!zhCN) { // to enUS
return /\/?index-cn/.test(pathname) ? '/' : pathname.replace('-cn', '');
} else if (pathname === '/') {
return '/index-cn';
} else if (pathname.endsWith('/')) {
return pathname.replace(/\/$/, '-cn/');
}
return pathname + '-cn';
}
// 兼容旧的 URL `?locale=...`
var queryString = location.search;
if (queryString) {
var isZhCNConfig = queryString.indexOf('zh-CN') > -1;
if (isZhCNConfig && !isZhCN(pathname)) {
location.pathname = getLocalizedPathname(pathname, isZhCNConfig)
}
}
// 首页无视链接里面的语言设置 https://github.com/ant-design/ant-design/issues/4552
if (isLocalStorageNameSupported() && (pathname === '/' || pathname === '/index-cn')) {
var lang = (window.localStorage && localStorage.getItem('locale')) || (navigator.language.toLowerCase() === 'zh-cn' ? 'zh-CN' : 'en-US');
// safari is 'zh-cn', while other browser is 'zh-CN';
if ((lang === 'zh-CN') !== isZhCN(pathname)) {
location.pathname = getLocalizedPathname(pathname, lang === 'zh-CN');
}
}
document.documentElement.className += isZhCN(pathname) ? 'zh-cn' : 'en-us';
})()
</script>
<link rel="icon" href="https://t.alipayobjects.com/images/T1QUBfXo4fXXXXXXXX.png" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.cnpmjs.org/css?family=Lato:400,700|Raleway"/>
<link rel="stylesheet" type="text/css" href="/index.css"/>
<style id="nprogress-style">
#nprogress { display: none }
</style>
<!--[if lte IE 10]>
<script
src="https://as.alipayobjects.com/g/component/??console-polyfill/0.2.2/index.js,media-match/2.0.2/media.match.min.js"></script>
<![endif]-->
<script>
if (!window.Intl) {
document.writeln('<script src="https://as.alipayobjects.com/g/component/intl/1.0.1/??Intl.js,locale-data/jsonp/en.js,locale-data/jsonp/zh.js">' + '<' + '/script>');
}
if (!window.Promise) {
document.writeln('<script src="https://as.alipayobjects.com/g/component/es6-promise/3.2.2/es6-promise.min.js"' + '>' + '<' + '/' + 'script>');
}
// Enable Google Analytics
if (!location.port) {
/* eslint-disable */
(function (i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r;
i[r] = i[r] || function () {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date();
a = s.createElement(o),
m = s.getElementsByTagName(o)[0];
a.async = 1;
a.src = g;
m.parentNode.insertBefore(a, m)
})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
ga('create', 'UA-72788897-1', 'auto');
ga('send', 'pageview');
/* eslint-enable */
}
</script>
</head>
<body>
<div id="react-content">
<div class="page-wrapper" data-reactroot="" data-reactid="1" data-react-checksum="1308648667"><header id="header" class="clearfix" data-reactid="2"><div class="ant-row" data-reactid="3"><div class="ant-col-xs-24 ant-col-sm-24 ant-col-md-5 ant-col-lg-4" data-reactid="4"><a id="logo" href="/index-cn" data-reactid="5"><img alt="logo" src="https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg" data-reactid="6"/><span data-reactid="7">Ant Design</span></a></div><div class="ant-col-xs-0 ant-col-sm-0 ant-col-md-19 ant-col-lg-20" data-reactid="8"><div id="search-box" data-reactid="9"><div class="ant-select ant-select-combobox ant-select-enabled" data-reactid="10"><div class="ant-select-selection
ant-select-selection--single" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" data-reactid="11"><div class="ant-select-selection__rendered" data-reactid="12"><div style="display:block;user-select:none;-webkit-user-select:none;" unselectable="unselectable" class="ant-select-selection__placeholder" data-reactid="13">搜索组件...</div><ul data-reactid="14"><li class="ant-select-search ant-select-search--inline" data-reactid="15"><div class="ant-select-search__field__wrap" data-reactid="16"><input value="" class="ant-select-search__field" data-reactid="17"/><span class="ant-select-search__field__mirror" data-reactid="18"><!-- react-text: 19 --><!-- /react-text --><!-- react-text: 20 --> <!-- /react-text --></span></div></li></ul></div><span class="ant-select-arrow" style="user-select:none;-webkit-user-select:none;" unselectable="unselectable" data-reactid="21"><b data-reactid="22"></b></span></div></div></div><button type="button" class="ant-btn ant-btn-ghost ant-btn-sm lang" data-reactid="23"><span data-reactid="24">EN</span></button><div class="ant-select-sm version ant-select ant-select-enabled" data-reactid="25"><div class="ant-select-selection
ant-select-selection--single" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" tabindex="0" data-reactid="26"><div class="ant-select-selection__rendered" data-reactid="27"><div class="ant-select-selection-selected-value" title="2.8.1" style="display:block;opacity:1;" data-reactid="28">2.8.1</div></div><span class="ant-select-arrow" style="user-select:none;-webkit-user-select:none;" unselectable="unselectable" data-reactid="29"><b data-reactid="30"></b></span></div></div><ul class="ant-menu ant-menu-horizontal ant-menu-light ant-menu-root" role="menu" aria-activedescendant="" id="nav" tabindex="0" data-reactid="31"><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="32"><a href="/index-cn" data-reactid="33"><span data-reactid="34">首页</span></a></li><li class="ant-menu-item-selected ant-menu-item" role="menuitem" aria-selected="true" data-reactid="35"><a href="/docs/spec/introduce-cn" data-reactid="36"><span data-reactid="37">规范</span></a></li><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="38"><a href="/docs/react/introduce-cn" data-reactid="39"><span data-reactid="40">组件</span></a></li><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="41"><a href="/docs/pattern/navigation-cn" data-reactid="42"><span data-reactid="43">模式</span></a></li><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="44"><a href="/docs/resource/download-cn" data-reactid="45"><span data-reactid="46">资源</span></a></li></ul></div></div></header><div class="main-wrapper" data-reactid="47"><div class="ant-row" data-reactid="48"><div class="ant-col-xs-24 ant-col-sm-24 ant-col-md-6 ant-col-lg-4" data-reactid="49"><ul class="ant-menu ant-menu-inline aside-container ant-menu-light ant-menu-root" role="menu" aria-activedescendant="" tabindex="0" data-reactid="50"><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="51"><a href="/docs/spec/introduce-cn" data-reactid="52">Ant Design</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="53"><a href="/docs/spec/feature-cn" data-reactid="54">基本理念</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="55"><a href="/docs/spec/cases-cn" data-reactid="56">实践案例</a></li><li class="ant-menu-submenu-inline ant-menu-submenu-open ant-menu-submenu-selected ant-menu-submenu" data-reactid="57"><div style="padding-left:24px;" class="ant-menu-submenu-title" aria-expanded="true" aria-owns="设计原则$Menu" aria-haspopup="true" data-reactid="58"><h4 data-reactid="59">设计原则</h4></div><ul class="ant-menu ant-menu-inline ant-menu-sub" role="menu" aria-activedescendant="" id="设计原则$Menu" data-reactid="60"><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="61"><a href="/docs/spec/principle-cn" data-reactid="62">引言</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="63"><a href="/docs/spec/proximity-cn" data-reactid="64">亲密性</a></li><li style="padding-left:48px;" class="ant-menu-item-selected ant-menu-item" role="menuitem" aria-selected="true" data-reactid="65"><a href="/docs/spec/alignment-cn" data-reactid="66">对齐</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="67"><a href="/docs/spec/contrast-cn" data-reactid="68">对比</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="69"><a href="/docs/spec/repetition-cn" data-reactid="70">重复</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="71"><a href="/docs/spec/direct-cn" data-reactid="72">直截了当</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="73"><a href="/docs/spec/lightweight-cn" data-reactid="74">简化交互</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="75"><a href="/docs/spec/stay-cn" data-reactid="76">足不出户</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="77"><a href="/docs/spec/invitation-cn" data-reactid="78">提供邀请</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="79"><a href="/docs/spec/transition-cn" data-reactid="80">巧用过渡</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="81"><a href="/docs/spec/reaction-cn" data-reactid="82">即时反应</a></li></ul></li><li class="ant-menu-submenu-inline ant-menu-submenu-open ant-menu-submenu" data-reactid="83"><div style="padding-left:24px;" class="ant-menu-submenu-title" aria-expanded="true" aria-owns="设计基础$Menu" aria-haspopup="true" data-reactid="84"><h4 data-reactid="85">设计基础</h4></div><ul class="ant-menu ant-menu-inline ant-menu-sub" role="menu" aria-activedescendant="" id="设计基础$Menu" data-reactid="86"><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="87"><a href="/docs/spec/font-cn" data-reactid="88">字体</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="89"><a href="/docs/spec/typography-cn" data-reactid="90">排版</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="91"><a href="/docs/spec/colors-cn" data-reactid="92">色彩</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="93"><a href="/docs/spec/layout-cn" data-reactid="94">常用布局</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="95"><a href="/docs/spec/motion-cn" data-reactid="96">组件动画</a></li></ul></li></ul></div><div class="main-container ant-col-xs-24 ant-col-sm-24 ant-col-md-18 ant-col-lg-20" data-reactid="97"><article class="markdown" data-reactid="98"><h1 data-reactid="99"><!-- react-text: 100 -->对齐<!-- /react-text --><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/docs/spec/alignment.zh-CN.md" data-reactid="101"><i class="anticon anticon-edit" data-reactid="102"></i></a></h1><section class="markdown" data-reactid="103"><p data-reactid="104"><!-- react-text: 105 -->正如『格式塔学派』中的连续律(Law of Continuity)所描述的,在知觉过程中人们往往倾向于使知觉对象的直线继续成为直线,使曲线继续成为曲线。在界面设计中,将元素进行对齐,既符合用户的认知特性,也能引导视觉流向,让用户更流畅地接收信息。<!-- /react-text --></p><blockquote data-reactid="106"><p data-reactid="107"><strong data-reactid="108"><!-- react-text: 109 --> 格式塔学派(德语:Gestalttheorie<!-- /react-text --></strong><!-- react-text: 110 --> :是心理学重要流派之一,兴起于 20 世纪初的德国,又称为完形心理学;主张人脑的运作原理是整体的,『整体不同于其部件的总和』。——摘自『维基百科』<!-- /react-text --></p></blockquote></section><section class="toc" data-reactid="111"><ul data-reactid="112"><li data-reactid="113"><a class="bisheng-toc-h2" href="#文案类对齐" data-reactid="114"><!-- react-text: 115 -->文案类对齐<!-- /react-text --></a></li><li data-reactid="116"><a class="bisheng-toc-h2" href="#表单类对齐" data-reactid="117"><!-- react-text: 118 -->表单类对齐<!-- /react-text --></a></li><li data-reactid="119"><a class="bisheng-toc-h2" href="#数字类对齐" data-reactid="120"><!-- react-text: 121 -->数字类对齐<!-- /react-text --></a></li></ul></section><section class="markdown" data-reactid="122"><h2 id="文案类对齐" data-reactid="123"><span data-reactid="124"><!-- react-text: 125 -->文案类对齐<!-- /react-text --></span><a href="#文案类对齐" class="anchor" data-reactid="126">#</a></h2><div class="preview-image-boxes clearfix" data-reactid="127"><div class="preview-image-box" style="width:50%;" data-reactid="128"><div class="preview-image-wrapper good false" data-reactid="129"><img class="preview-img good" src="https://os.alipayobjects.com/rmsportal/xvmiAZAIxrEcqdP.png" alt="推荐示例" data-reactid="130"/></div><div class="preview-image-title" data-reactid="131">推荐示例</div><div class="preview-image-description" data-reactid="132">标题和正文左对齐,使用了一个视觉起点。</div><!-- react-empty: 133 --></div><div class="preview-image-box" style="width:50%;" data-reactid="134"><div class="preview-image-wrapper false bad" data-reactid="135"><img class="preview-img bad" src="https://os.alipayobjects.com/rmsportal/qvycImsTiDGVgLJ.png" alt="不推荐示例" data-reactid="136"/></div><div class="preview-image-title" data-reactid="137">不推荐示例</div><div class="preview-image-description" data-reactid="138">标题和正文使用了两个视觉起点,不推荐该种对齐方式,除非刻意强调两者区别。</div><!-- react-empty: 139 --></div></div><p data-reactid="140"><!-- react-text: 141 -->如果页面的字段或段落较短、较散时,需要确定一个统一的视觉起点。<!-- /react-text --></p><hr data-reactid="142"/><h2 id="表单类对齐" data-reactid="143"><span data-reactid="144"><!-- react-text: 145 -->表单类对齐<!-- /react-text --></span><a href="#表单类对齐" class="anchor" data-reactid="146">#</a></h2><div class="preview-image-boxes clearfix" data-reactid="147"><div class="preview-image-box" data-reactid="148"><div class="preview-image-wrapper false false" data-reactid="149"><img class="preview-img" src="https://os.alipayobjects.com/rmsportal/DmEbaUsrpJkRyUh.png" alt="冒号对齐示例" data-reactid="150"/></div><div class="preview-image-title" data-reactid="151">冒号对齐示例</div><div class="preview-image-description" data-reactid="152"></div><!-- react-empty: 153 --></div></div><p data-reactid="154"><!-- react-text: 155 -->冒号对齐(右对齐)能让内容锁定在一定范围内,让用户眼球顺着冒号的视觉流,就能找到所有填写项,从而提高填写效率。<!-- /react-text --></p><p data-reactid="156"><!-- react-text: 157 -->更多对齐方式,请查看<!-- /react-text --><a href="/docs/pattern/form-cn#对齐方式" data-reactid="158">『模式/表单/规格/对齐方式』</a><!-- react-text: 159 --><!-- /react-text --></p><hr data-reactid="160"/><h2 id="数字类对齐" data-reactid="161"><span data-reactid="162"><!-- react-text: 163 -->数字类对齐<!-- /react-text --></span><a href="#数字类对齐" class="anchor" data-reactid="164">#</a></h2><div class="preview-image-boxes clearfix" data-reactid="165"><div class="preview-image-box" style="width:50%;" data-reactid="166"><div class="preview-image-wrapper good false" data-reactid="167"><img class="preview-img good" src="https://os.alipayobjects.com/rmsportal/hCSQTEmahFyQcWk.png" alt="正确示例" data-reactid="168"/></div><div class="preview-image-title" data-reactid="169">正确示例</div><div class="preview-image-description" data-reactid="170"></div><!-- react-empty: 171 --></div><div class="preview-image-box" style="width:50%;" data-reactid="172"><div class="preview-image-wrapper false bad" data-reactid="173"><img class="preview-img bad" src="https://os.alipayobjects.com/rmsportal/FDjScmPlWFPxkxL.png" alt="错误示例" data-reactid="174"/></div><div class="preview-image-title" data-reactid="175">错误示例</div><div class="preview-image-description" data-reactid="176"></div><!-- react-empty: 177 --></div></div><p data-reactid="178"><!-- react-text: 179 -->为了快速对比数值大小,建议所有数值取相同有效位数,并且右对齐。<!-- /react-text --></p></section></article></div></div><div class="ant-row" data-reactid="180"><div class="ant-col-xs-24 ant-col-sm-24 ant-col-md-18 ant-col-md-offset-6 ant-col-lg-20 ant-col-lg-offset-4" data-reactid="181"><section class="prev-next-nav" data-reactid="182"><a class="prev-page" href="/docs/spec/proximity-cn" data-reactid="183">亲密性</a><a class="next-page" href="/docs/spec/contrast-cn" data-reactid="184">对比</a></section></div></div></div><footer id="footer" data-reactid="185"><ul data-reactid="186"><li data-reactid="187"><h2 data-reactid="188"><i class="anticon anticon-github" data-reactid="189"></i><!-- react-text: 190 --> GitHub<!-- /react-text --></h2><div data-reactid="191"><a target="_blank " href="https://github.com/ant-design/ant-design" data-reactid="192"><span data-reactid="193">仓库</span></a></div><div data-reactid="194"><a target="_blank " href="https://ant.design/docs/react/customize-theme" data-reactid="195"><span data-reactid="196">定制主题</span></a></div><div data-reactid="197"><a target="_blank " href="https://github.com/websemantics/awesome-ant-design" data-reactid="198"><span data-reactid="199">Awesome Ant Design</span></a></div></li><li data-reactid="200"><h2 data-reactid="201"><i class="anticon anticon-link" data-reactid="202"></i><!-- react-text: 203 --> <!-- /react-text --><span data-reactid="204">相关站点</span></h2><div data-reactid="205"><a href="http://mobile.ant.design" data-reactid="206">Ant Design Mobile</a><span data-reactid="207"> - </span><span data-reactid="208">移动版</span></div><div data-reactid="209"><a target="_blank" rel="noopener noreferrer" href="https://github.com/dvajs/dva" data-reactid="210">dva</a><!-- react-text: 211 --> - <!-- /react-text --><span data-reactid="212">应用框架</span></div><div data-reactid="213"><a target="_blank" rel="noopener noreferrer" href="https://github.com/dvajs/dva-cli" data-reactid="214">dva-cli</a><!-- react-text: 215 --> -<!-- /react-text --><span data-reactid="216">开发工具</span></div><div data-reactid="217"><a target="_blank" rel="noopener noreferrer" href="https://eggjs.org/" data-reactid="218">Egg</a><span data-reactid="219"> - </span><span data-reactid="220">企业级 Node 开发框架</span></div><div data-reactid="221"><a target="_blank" rel="noopener noreferrer" href="https://antv.alipay.com/" data-reactid="222">AntV</a><span data-reactid="223"> - </span><span data-reactid="224">数据可视化</span></div><div data-reactid="225"><a target="_blank" rel="noopener noreferrer" href="http://motion.ant.design" data-reactid="226">Ant Motion</a><span data-reactid="227"> - </span><span data-reactid="228">设计动效</span></div><div data-reactid="229"><a target="_blank" rel="noopener noreferrer" href="http://library.ant.design/" data-reactid="230">AntD Library</a><span data-reactid="231"> - </span><span data-reactid="232">Axure 部件库</span></div><div data-reactid="233"><a target="_blank" rel="noopener noreferrer" href="http://ux.ant.design" data-reactid="234">Ant UX</a><span data-reactid="235"> - </span><span data-reactid="236">页面逻辑素材</span></div></li><li data-reactid="237"><h2 data-reactid="238"><i class="anticon anticon-customer-service" data-reactid="239"></i><!-- react-text: 240 --> <!-- /react-text --><span data-reactid="241">社区</span></h2><div data-reactid="242"><a href="/changelog" data-reactid="243"><span data-reactid="244">更新记录</span></a></div><div data-reactid="245"><a target="_blank" rel="noopener noreferrer" href="https://github.com/ant-design/ant-design/wiki/FAQ" data-reactid="246"><span data-reactid="247">常见问题</span></a></div><div data-reactid="248"><a target="_blank" rel="noopener noreferrer" href="https://gitter.im/ant-design/ant-design" data-reactid="249"><span data-reactid="250">在线讨论</span></a></div><div data-reactid="251"><a target="_blank" rel="noopener noreferrer" href="https://github.com/ant-design/ant-design/issues/new" data-reactid="252"><span data-reactid="253">报告 Bug</span></a></div><div data-reactid="254"><a target="_blank" rel="noopener noreferrer" href="http://stackoverflow.com/questions/tagged/antd" data-reactid="255"><span data-reactid="256">StackOverflow</span></a></div><div data-reactid="257"><a target="_blank" rel="noopener noreferrer" href="https://segmentfault.com/t/antd" data-reactid="258"><span data-reactid="259">SegmentFault</span></a></div></li><li data-reactid="260"><h2 data-reactid="261"><!-- react-text: 262 -->Copyright © <!-- /react-text --><!-- react-text: 263 -->2017<!-- /react-text --></h2><div data-reactid="264"><span data-reactid="265">蚂蚁金服体验技术部出品</span></div><div data-reactid="266"><!-- react-text: 267 -->Built with <!-- /react-text --><a target="_blank" rel="noopener noreferrer" href="https://github.com/benjycui/bisheng" data-reactid="268">BiSheng</a></div></li></ul></footer></div>
</div>
<script src="/common.js"></script>
<script src="/index.js"></script>
</body>
</html>