UIkit框架中uk-container的便捷用法,uk-width和uk-grid-width的区别

来源:互联网 发布:西安618所待遇 知乎 编辑:程序博客网 时间:2024/04/28 21:53
<span class="token p" style="box-sizing: border-box; color: rgb(90, 90, 90); font-family: 'microsoft yahei'; font-size: 18px; line-height: 29.7px; white-space: pre-wrap; outline: none !important;"><span class="token tag" style="box-sizing: border-box; color: rgb(52, 52, 52); font-weight: bold; font-stretch: normal; font-size: 0.9em; line-height: normal; font-family: 'Source Code Pro', monospace; outline: none !important;"><span class="token tag" style="box-sizing: border-box; font-stretch: normal; font-size: 0.9em; outline: none !important;"><span class="token punctuation" style="box-sizing: border-box; outline: none !important; font-weight: normal;"><</span>div</span> <span class="token attr-name" style="box-sizing: border-box; outline: none !important; font-weight: normal;">class</span><span class="token attr-value" style="box-sizing: border-box; outline: none !important; font-weight: normal;"><span class="token punctuation" style="box-sizing: border-box; outline: none !important;">=</span><span class="token punctuation" style="box-sizing: border-box; outline: none !important;">"</span>uk-grid<span class="token punctuation" style="box-sizing: border-box; outline: none !important;">"</span></span><span class="token punctuation" style="box-sizing: border-box; outline: none !important; font-weight: normal;">></span></span></span><span class="token lf" style="box-sizing: border-box; color: rgb(90, 90, 90); font-family: 'microsoft yahei'; font-size: 18px; line-height: 29.7px; white-space: pre-wrap; outline: none !important;"></span><span class="token p" style="box-sizing: border-box; color: rgb(90, 90, 90); font-family: 'microsoft yahei'; font-size: 18px; line-height: 29.7px; white-space: pre-wrap; outline: none !important;"></span>
<span class="token p" style="box-sizing: border-box; color: rgb(90, 90, 90); font-family: 'microsoft yahei'; font-size: 18px; line-height: 29.7px; white-space: pre-wrap; outline: none !important;"><span class="token tag" style="box-sizing: border-box; color: rgb(52, 52, 52); font-weight: bold; font-stretch: normal; font-size: 0.9em; line-height: normal; font-family: 'Source Code Pro', monospace; outline: none !important;"><span class="token tag" style="box-sizing: border-box; font-stretch: normal; font-size: 0.9em; outline: none !important;"><span class="token punctuation" style="box-sizing: border-box; outline: none !important; font-weight: normal;"><span style="white-space:pre"></span><</span>div</span> <span class="token attr-name" style="box-sizing: border-box; outline: none !important; font-weight: normal;">class</span><span class="token attr-value" style="box-sizing: border-box; outline: none !important; font-weight: normal;"><span class="token punctuation" style="box-sizing: border-box; outline: none !important;">=</span><span class="token punctuation" style="box-sizing: border-box; outline: none !important;">"</span>uk-width-1-1 uk-container-center<span class="token punctuation" style="box-sizing: border-box; outline: none !important;">"</span></span><span class="token punctuation" style="box-sizing: border-box; outline: none !important; font-weight: normal;">></span></span></span><span class="token lf" style="box-sizing: border-box; color: rgb(90, 90, 90); font-family: 'microsoft yahei'; font-size: 18px; line-height: 29.7px; white-space: pre-wrap; outline: none !important;"></span><span class="token p" style="box-sizing: border-box; color: rgb(90, 90, 90); font-family: 'microsoft yahei'; font-size: 18px; line-height: 29.7px; white-space: pre-wrap; outline: none !important;"></span>
<span class="token p" style="box-sizing: border-box; color: rgb(90, 90, 90); font-family: 'microsoft yahei'; font-size: 18px; line-height: 29.7px; white-space: pre-wrap; outline: none !important;"><span class="token tag" style="box-sizing: border-box; color: rgb(52, 52, 52); font-weight: bold; font-stretch: normal; font-size: 0.9em; line-height: normal; font-family: 'Source Code Pro', monospace; outline: none !important;"><span class="token tag" style="box-sizing: border-box; font-stretch: normal; font-size: 0.9em; outline: none !important;"><span class="token punctuation" style="box-sizing: border-box; outline: none !important; font-weight: normal;"><span style="white-space:pre"></span><</span>ul</span> <span class="token attr-name" style="box-sizing: border-box; outline: none !important; font-weight: normal;">class</span><span class="token attr-value" style="box-sizing: border-box; outline: none !important; font-weight: normal;"><span class="token punctuation" style="box-sizing: border-box; outline: none !important;">=</span><span class="token punctuation" style="box-sizing: border-box; outline: none !important;">"</span>uk-thumbnav uk-grid-width-1-3<span class="token punctuation" style="box-sizing: border-box; outline: none !important;">"</span></span><span class="token punctuation" style="box-sizing: border-box; outline: none !important; font-weight: normal;">></span></span></span><span class="token lf" style="box-sizing: border-box; color: rgb(90, 90, 90); font-family: 'microsoft yahei'; font-size: 18px; line-height: 29.7px; white-space: pre-wrap; outline: none !important;"></span><span class="token p" style="box-sizing: border-box; color: rgb(90, 90, 90); font-family: 'microsoft yahei'; font-size: 18px; line-height: 29.7px; white-space: pre-wrap; outline: none !important;"></span>
<span class="token p" style="box-sizing: border-box; color: rgb(90, 90, 90); font-family: 'microsoft yahei'; font-size: 18px; line-height: 29.7px; white-space: pre-wrap; outline: none !important;"><span class="token tag" style="box-sizing: border-box; color: rgb(52, 52, 52); font-weight: bold; font-stretch: normal; font-size: 0.9em; line-height: normal; font-family: 'Source Code Pro', monospace; outline: none !important;"><span class="token tag" style="box-sizing: border-box; font-stretch: normal; font-size: 0.9em; outline: none !important;"><span class="token punctuation" style="box-sizing: border-box; outline: none !important; font-weight: normal;"><span style="white-space:pre"></span><</span>li</span><span class="token punctuation" style="box-sizing: border-box; outline: none !important; font-weight: normal;">></span></span><span class="token tag" style="box-sizing: border-box; color: rgb(52, 52, 52); font-weight: bold; font-stretch: normal; font-size: 0.9em; line-height: normal; font-family: 'Source Code Pro', monospace; outline: none !important;"><span class="token tag" style="box-sizing: border-box; font-stretch: normal; font-size: 0.9em; outline: none !important;"><span class="token punctuation" style="box-sizing: border-box; outline: none !important; font-weight: normal;"></</span>li</span><span class="token punctuation" style="box-sizing: border-box; outline: none !important; font-weight: normal;">></span></span></span><span class="token lf" style="box-sizing: border-box; color: rgb(90, 90, 90); font-family: 'microsoft yahei'; font-size: 18px; line-height: 29.7px; white-space: pre-wrap; outline: none !important;"></span><span class="token p" style="box-sizing: border-box; color: rgb(90, 90, 90); font-family: 'microsoft yahei'; font-size: 18px; line-height: 29.7px; white-space: pre-wrap; outline: none !important;"></span>
<span class="token p" style="box-sizing: border-box; color: rgb(90, 90, 90); font-family: 'microsoft yahei'; font-size: 18px; line-height: 29.7px; white-space: pre-wrap; outline: none !important;"><span class="token tag" style="box-sizing: border-box; color: rgb(52, 52, 52); font-weight: bold; font-stretch: normal; font-size: 0.9em; line-height: normal; font-family: 'Source Code Pro', monospace; outline: none !important;"><span class="token tag" style="box-sizing: border-box; font-stretch: normal; font-size: 0.9em; outline: none !important;"><span class="token punctuation" style="box-sizing: border-box; outline: none !important; font-weight: normal;"><span style="white-space:pre"></span><</span>li</span><span class="token punctuation" style="box-sizing: border-box; outline: none !important; font-weight: normal;">></span></span><span class="token tag" style="box-sizing: border-box; color: rgb(52, 52, 52); font-weight: bold; font-stretch: normal; font-size: 0.9em; line-height: normal; font-family: 'Source Code Pro', monospace; outline: none !important;"><span class="token tag" style="box-sizing: border-box; font-stretch: normal; font-size: 0.9em; outline: none !important;"><span class="token punctuation" style="box-sizing: border-box; outline: none !important; font-weight: normal;"></</span>li</span><span class="token punctuation" style="box-sizing: border-box; outline: none !important; font-weight: normal;">></span></span></span><span class="token lf" style="box-sizing: border-box; color: rgb(90, 90, 90); font-family: 'microsoft yahei'; font-size: 18px; line-height: 29.7px; white-space: pre-wrap; outline: none !important;"></span><span class="token p" style="box-sizing: border-box; color: rgb(90, 90, 90); font-family: 'microsoft yahei'; font-size: 18px; line-height: 29.7px; white-space: pre-wrap; outline: none !important;"></span>
<span class="token p" style="box-sizing: border-box; color: rgb(90, 90, 90); font-family: 'microsoft yahei'; font-size: 18px; line-height: 29.7px; white-space: pre-wrap; outline: none !important;"><span class="token tag" style="box-sizing: border-box; color: rgb(52, 52, 52); font-weight: bold; font-stretch: normal; font-size: 0.9em; line-height: normal; font-family: 'Source Code Pro', monospace; outline: none !important;"><span class="token tag" style="box-sizing: border-box; font-stretch: normal; font-size: 0.9em; outline: none !important;"><span class="token punctuation" style="box-sizing: border-box; outline: none !important; font-weight: normal;"><span style="white-space:pre"></span><</span>li</span><span class="token punctuation" style="box-sizing: border-box; outline: none !important; font-weight: normal;">></span></span><span class="token tag" style="box-sizing: border-box; color: rgb(52, 52, 52); font-weight: bold; font-stretch: normal; font-size: 0.9em; line-height: normal; font-family: 'Source Code Pro', monospace; outline: none !important;"><span class="token tag" style="box-sizing: border-box; font-stretch: normal; font-size: 0.9em; outline: none !important;"><span class="token punctuation" style="box-sizing: border-box; outline: none !important; font-weight: normal;"></</span>li</span><span class="token punctuation" style="box-sizing: border-box; outline: none !important; font-weight: normal;">></span></span></span><span class="token lf" style="box-sizing: border-box; color: rgb(90, 90, 90); font-family: 'microsoft yahei'; font-size: 18px; line-height: 29.7px; white-space: pre-wrap; outline: none !important;"></span><span class="token p" style="box-sizing: border-box; color: rgb(90, 90, 90); font-family: 'microsoft yahei'; font-size: 18px; line-height: 29.7px; white-space: pre-wrap; outline: none !important;"></span>
<span class="token p" style="box-sizing: border-box; color: rgb(90, 90, 90); font-family: 'microsoft yahei'; font-size: 18px; line-height: 29.7px; white-space: pre-wrap; outline: none !important;"><span class="token tag" style="box-sizing: border-box; color: rgb(52, 52, 52); font-weight: bold; font-stretch: normal; font-size: 0.9em; line-height: normal; font-family: 'Source Code Pro', monospace; outline: none !important;"><span class="token tag" style="box-sizing: border-box; font-stretch: normal; font-size: 0.9em; outline: none !important;"><span class="token punctuation" style="box-sizing: border-box; outline: none !important; font-weight: normal;"><span style="white-space:pre"></span><</span>li</span><span class="token punctuation" style="box-sizing: border-box; outline: none !important; font-weight: normal;">></span></span><span class="token tag" style="box-sizing: border-box; color: rgb(52, 52, 52); font-weight: bold; font-stretch: normal; font-size: 0.9em; line-height: normal; font-family: 'Source Code Pro', monospace; outline: none !important;"><span class="token tag" style="box-sizing: border-box; font-stretch: normal; font-size: 0.9em; outline: none !important;"><span class="token punctuation" style="box-sizing: border-box; outline: none !important; font-weight: normal;"></</span>li</span><span class="token punctuation" style="box-sizing: border-box; outline: none !important; font-weight: normal;">></span></span></span><span class="token lf" style="box-sizing: border-box; color: rgb(90, 90, 90); font-family: 'microsoft yahei'; font-size: 18px; line-height: 29.7px; white-space: pre-wrap; outline: none !important;"></span><span class="token p" style="box-sizing: border-box; color: rgb(90, 90, 90); font-family: 'microsoft yahei'; font-size: 18px; line-height: 29.7px; white-space: pre-wrap; outline: none !important;"></span>
<span class="token p" style="box-sizing: border-box; color: rgb(90, 90, 90); font-family: 'microsoft yahei'; font-size: 18px; line-height: 29.7px; white-space: pre-wrap; outline: none !important;"><span class="token tag" style="box-sizing: border-box; color: rgb(52, 52, 52); font-weight: bold; font-stretch: normal; font-size: 0.9em; line-height: normal; font-family: 'Source Code Pro', monospace; outline: none !important;"><span class="token tag" style="box-sizing: border-box; font-stretch: normal; font-size: 0.9em; outline: none !important;"><span class="token punctuation" style="box-sizing: border-box; outline: none !important; font-weight: normal;"><span style="white-space:pre"></span></</span>ul</span><span class="token punctuation" style="box-sizing: border-box; outline: none !important; font-weight: normal;">></span></span></span><span class="token lf" style="box-sizing: border-box; color: rgb(90, 90, 90); font-family: 'microsoft yahei'; font-size: 18px; line-height: 29.7px; white-space: pre-wrap; outline: none !important;"></span><span class="token p" style="box-sizing: border-box; color: rgb(90, 90, 90); font-family: 'microsoft yahei'; font-size: 18px; line-height: 29.7px; white-space: pre-wrap; outline: none !important;"></span>
<span class="token p" style="box-sizing: border-box; color: rgb(90, 90, 90); font-family: 'microsoft yahei'; font-size: 18px; line-height: 29.7px; white-space: pre-wrap; outline: none !important;"><span class="token tag" style="box-sizing: border-box; color: rgb(52, 52, 52); font-weight: bold; font-stretch: normal; font-size: 0.9em; line-height: normal; font-family: 'Source Code Pro', monospace; outline: none !important;"><span class="token tag" style="box-sizing: border-box; font-stretch: normal; font-size: 0.9em; outline: none !important;"><span class="token punctuation" style="box-sizing: border-box; outline: none !important; font-weight: normal;"><span style="white-space:pre"></span></</span>div</span><span class="token punctuation" style="box-sizing: border-box; outline: none !important; font-weight: normal;">></span></span></span>
<span class="token lf" style="box-sizing: border-box; color: rgb(90, 90, 90); font-family: 'microsoft yahei'; font-size: 18px; line-height: 29.7px; white-space: pre-wrap; outline: none !important;"></span><span class="token p" style="box-sizing: border-box; color: rgb(90, 90, 90); font-family: 'microsoft yahei'; font-size: 18px; line-height: 29.7px; white-space: pre-wrap; outline: none !important;"><span class="token tag" style="box-sizing: border-box; color: rgb(52, 52, 52); font-weight: bold; font-stretch: normal; font-size: 0.9em; line-height: normal; font-family: 'Source Code Pro', monospace; outline: none !important;"><span class="token tag" style="box-sizing: border-box; font-stretch: normal; font-size: 0.9em; outline: none !important;"><span class="token punctuation" style="box-sizing: border-box; outline: none !important; font-weight: normal;"></</span>div</span><span class="token punctuation" style="box-sizing: border-box; outline: none !important; font-weight: normal;">></span></span></span>
这段代码的效果是下面每个li自动占据三分之一空间
0 0
原创粉丝点击