uikit 网格（重点）

作者: 蛋炒饭_By | 来源:发表于2018-03-07 16:53 被阅读16次

uikit 网格（重点）
hello uikit
swift 网格请求数据
swift 网络数据(controllerview)
Swift AfNetWorking
使用SwifUI实现可动态增减列数的网格视图
UIKit 大纲
【成安动态】成安县“多管齐下”夯实食品药品安全基石
移动小詹
iOS 随笔

网格

UIKit中的网格系统遵循移动优先的方式并且最多可容纳10个网格列。它使用网格内预定义的类对每个单元格的列宽进行了定义。

向一个父元素添加 .uk-grid 类来创建网格容器。对子元素添加一个 .uk-width-* 类来限定单元格的宽度。网格支持1、2、3、4、5、6和10个单元划分。下面的列表为你提供了可以应用到单元的 uk-width-* 类的概述。

.uk-width-1-1 填满可见宽度的100％。
.uk-width-1-2 把网格等分为两半。
.uk-width-1-3 to .uk-width-2-3 将网格划分成三分之一。
.uk-width-1-4 to .uk-width-3-4 将网格划分成四分之一。
.uk-width-1-5 to .uk-width-4-5 将网格划分成五分之一。
.uk-width-1-6 to .uk-width-5-6 将网格划分成六分之一。
.uk-width-1-10 to .uk-width-9-10 将网格划分成十分之一。
每组单元建立了一种冗余，所以在实际应用时，.uk-width-5-10 类与 .uk-width-1-2 类的实际效果都是一样的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width,user-scalable=no,initial-scale=1, minimum-scale=1, maximum-scale=1">
    <title>Title</title>
    <link href="uikit-2.25.0/css/uikit.almost-flat.min.css" rel="stylesheet">
    <script src="jquery/jquery.js"></script>
    <script src="uikit-2.25.0/js/uikit.min.js"></script>
</head>
<body>

<div class="uk-grid uk-text-center uk-margin-top">
    <div class="uk-width-1-3">
        <div class="uk-panel uk-panel-box">
            .uk-width-1-3
        </div>
    </div>
    <div class="uk-width-1-3">
        <div class="uk-panel uk-panel-box">
            .uk-width-1-3
        </div>
    </div>
    <div class="uk-width-1-3">
        <div class="uk-panel uk-panel-box">
            .uk-width-1-3
        </div>
    </div>
</div>
<div class="uk-grid uk-text-center">
    <div class="uk-width-1-2">
        <div class="uk-panel uk-panel-box">
            .uk-width-1-2
        </div>
    </div>
    <div class="uk-width-1-2">
        <div class="uk-panel uk-panel-box">
            .uk-width-1-2
        </div>
    </div>
</div>
</body>
</html>

uk-text-center
水平居中容器内部文本。
uk-margin-top
给当前元素加上上外边距
uk-panel uk-panel-box
使得div变身成为面板容器（背景变色，有默认padding）

image

特色响应式宽度

UIKit中提供了一些非常有用的响应式宽度的类。基本上它们的使用方法就像通常宽度的类一样，但是它们带有前缀，这样它们只在特定的断点来产生效果。这些类可以结合效果组件中的可见性类来使用。这对于调整不同尺寸设备的布局和内容是非常重要的。

.uk-width-* 对于任何宽度的设备，网格都保持列并排。
.uk-width-small-* 影响宽度在 480px 以上的设备。网格列将在较小的视口中堆叠。
.uk-width-medium-* 影响宽度在 768px 以上的设备。网格列将在较小的视口中堆叠。
.uk-width-large-* 影响宽度在 960px 以上的设备。网格列将在较小的视口中堆叠。

.uk-width-small-1-3 影响宽度在 480px 以上的设备，对宽度在 480px 以上的设备起作用，对宽度在 480px 以下的设备，自成一行，不再呈现为多列布局。即视口大于480px像素以上的时候，占屏幕三分之一；小于480px后，独占一行。
运行以下代码，缩小窗口，观察网格变化。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width,user-scalable=no,initial-scale=1, minimum-scale=1, maximum-scale=1">
    <title>Title</title>
    <link href="uikit-2.25.0/css/uikit.almost-flat.min.css" rel="stylesheet">
    <script src="jquery/jquery.js"></script>
    <script src="uikit-2.25.0/js/uikit.min.js"></script>
</head>
<body>

<div class="uk-grid uk-text-center uk-margin-top">
    <div class="uk-width-large-1-3">
        <div class="uk-panel uk-panel-box">
            .uk-width-large-1-3
        </div>
    </div>
    <div class="uk-width-large-1-3">
        <div class="uk-panel uk-panel-box">
            .uk-width-large-1-3
        </div>
    </div>
    <div class="uk-width-large-1-3">
        <div class="uk-panel uk-panel-box">
            .uk-width-large-1-3
        </div>
    </div>
</div>
<div class="uk-grid uk-text-center uk-margin-top">
    <div class="uk-width-medium-1-3">
        <div class="uk-panel uk-panel-box">
            .uk-width-medium-1-3
        </div>
    </div>
    <div class="uk-width-medium-1-3">
        <div class="uk-panel uk-panel-box">
            .uk-width-medium-1-3
        </div>
    </div>
    <div class="uk-width-medium-1-3">
        <div class="uk-panel uk-panel-box">
            .uk-width-medium-1-3
        </div>
    </div>
</div>
<div class="uk-grid uk-text-center uk-margin-top">
    <div class="uk-width-small-1-3">
        <div class="uk-panel uk-panel-box">
            .uk-width-small-1-3
        </div>
    </div>
    <div class="uk-width-small-1-3">
        <div class="uk-panel uk-panel-box">
            .uk-width-small-1-3
        </div>
    </div>
    <div class="uk-width-small-1-3">
        <div class="uk-panel uk-panel-box">
            .uk-width-small-1-3
        </div>
    </div>
</div>
</body>
</html>

再看以下示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width,user-scalable=no,initial-scale=1, minimum-scale=1, maximum-scale=1">
    <title>Title</title>
    <link href="uikit-2.25.0/css/uikit.almost-flat.min.css" rel="stylesheet">
    <script src="jquery/jquery.js"></script>
    <script src="uikit-2.25.0/js/uikit.min.js"></script>
</head>
<body>

<div class="uk-grid uk-text-center uk-margin-top">
    <div class="uk-width-medium-1-4 uk-width-small-1-2">
        <div class="uk-panel uk-panel-box">
            .uk-width-medium-1-4 uk-width-small-1-2
        </div>
    </div>
    <div class="uk-width-medium-1-4 uk-width-small-1-2">
        <div class="uk-panel uk-panel-box">
            .uk-width-medium-1-4 uk-width-small-1-2
        </div>
    </div>
    <div class="uk-width-medium-1-4 uk-width-small-1-2">
        <div class="uk-panel uk-panel-box">
            .uk-width-medium-1-4 uk-width-small-1-2
        </div>
    </div>
    <div class="uk-width-medium-1-4 uk-width-small-1-2">
        <div class="uk-panel uk-panel-box">
            .uk-width-medium-1-4 uk-width-small-1-2
        </div>
    </div>
</div>

</body>
</html>

全屏时，一行四列，当视口小于768px后，变为两行两列，继续缩小视口，当视口小于480px后，变为四行一列。

应用实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width,user-scalable=no,initial-scale=1, minimum-scale=1, maximum-scale=1">
    <title>Title</title>
    <link href="uikit-2.25.0/css/uikit.almost-flat.min.css" rel="stylesheet">
    <script src="jquery/jquery.js"></script>
    <script src="uikit-2.25.0/js/uikit.min.js"></script>
</head>
<body>

<div class="uk-grid uk-margin-top">
    <div class="uk-width-medium-2-3 uk-text-center ">
        <div class="uk-panel uk-panel-box">
            <div class="uk-article">
                <h1 class="uk-article-title">文章标题-洛神赋</h1>

                <p class="uk-article-meta">由 曹植 撰写于 2012年12月12日 | 发表在 博客</p>

                <p class="uk-article-lead">黄初三年，余朝京师，还济洛川。古人有言，斯水之神，名曰宓妃。感宋玉对楚王神女之事，遂作斯赋，其词曰：</p>

                <p>黄初三年，余朝京师，还济洛川。古人有言，斯水之神，名曰宓妃。感宋玉对楚王神女之事，遂作斯赋，其词曰：</p>

            </div>
            <div class="uk-article">
                <h1 class="uk-article-title">文章标题-洛神赋</h1>

                <p class="uk-article-meta">由 曹植 撰写于 2012年12月12日 | 发表在 博客</p>

                <p class="uk-article-lead">黄初三年，余朝京师，还济洛川。古人有言，斯水之神，名曰宓妃。感宋玉对楚王神女之事，遂作斯赋，其词曰：</p>

                <p>黄初三年，余朝京师，还济洛川。古人有言，斯水之神，名曰宓妃。感宋玉对楚王神女之事，遂作斯赋，其词曰：</p>

            </div>
            <div class="uk-article">
                <h1 class="uk-article-title">文章标题-洛神赋</h1>

                <p class="uk-article-meta">由 曹植 撰写于 2012年12月12日 | 发表在 博客</p>

                <p class="uk-article-lead">黄初三年，余朝京师，还济洛川。古人有言，斯水之神，名曰宓妃。感宋玉对楚王神女之事，遂作斯赋，其词曰：</p>

                <p>黄初三年，余朝京师，还济洛川。古人有言，斯水之神，名曰宓妃。感宋玉对楚王神女之事，遂作斯赋，其词曰：</p>

            </div>
            <div class="uk-article">
                <h1 class="uk-article-title">文章标题-洛神赋</h1>

                <p class="uk-article-meta">由 曹植 撰写于 2012年12月12日 | 发表在 博客</p>

                <p class="uk-article-lead">黄初三年，余朝京师，还济洛川。古人有言，斯水之神，名曰宓妃。感宋玉对楚王神女之事，遂作斯赋，其词曰：</p>

                <p>黄初三年，余朝京师，还济洛川。古人有言，斯水之神，名曰宓妃。感宋玉对楚王神女之事，遂作斯赋，其词曰：</p>

            </div>
        </div>
    </div>
    <div class="uk-width-medium-1-3">
       <div class="uk-panel uk-panel-box">
           <h3 class="uk-panel-title">网站开发</h3>
           <ul class="uk-list uk-list-line">
               <li><a href="#" target="_blank"> 二次开发</a></li>
               <li><a href="#" target="_blank"> JAVA</a></li>
               <li><a href="#" target="_blank"> PHP</a></li>
               <li><a href="#" target="_blank"> .NET</a></li>
               <li><a href="#" target="_blank"> 网络营销</a></li>
           </ul>
       </div>
        <div class="uk-margin-top uk-panel uk-panel-box">
            <h3 class="uk-panel-title">网站开发</h3>
            <ul class="uk-list uk-list-line">
                <li><a href="#" target="_blank"> 二次开发</a></li>
                <li><a href="#" target="_blank"> JAVA</a></li>
                <li><a href="#" target="_blank"> PHP</a></li>
                <li><a href="#" target="_blank"> .NET</a></li>
                <li><a href="#" target="_blank"> 网络营销</a></li>
            </ul>
        </div>
        <div class="uk-margin-top uk-panel uk-panel-box">
            <h3 class="uk-panel-title">网站开发</h3>
            <ul class="uk-list uk-list-line">
                <li><a href="#" target="_blank"> 二次开发</a></li>
                <li><a href="#" target="_blank"> JAVA</a></li>
                <li><a href="#" target="_blank"> PHP</a></li>
                <li><a href="#" target="_blank"> .NET</a></li>
                <li><a href="#" target="_blank"> 网络营销</a></li>
            </ul>
        </div>
    </div>
</div>

</body>
</html>

uikit 网格（重点）
网格 UIKit中的网格系统遵循移动优先的方式并且最多可容纳10个网格列。它使用网格内预定义的类对每个单元格的列宽...
hello uikit
uikit主页地址 http://www.getuikit.net/ uikit常用组件网格面板效果（常用c...
swift 网格请求数据
(1) 在viewcontroller里创建网格 import UIKit class ViewControlle...
swift 网络数据(controllerview)
首先导入AFNetworking文件 (1)ViewController里创建网格 import UIKit cl...
Swift AfNetWorking
首先导入AFNetworking文件 (1)ViewController里创建网格 import UIKit cl...
使用SwifUI实现可动态增减列数的网格视图
动态网格视图 CustomGrid 我们都知道在UIKit中可以使用CollectionView可以实现瀑布流效果...
UIKit 大纲
UIKit中所有的继承关系重点关注的几个子类 UIBarItem的子类 UIBarButtonItemUITab...
【成安动态】成安县“多管齐下”夯实食品药品安全基石
（1）强化日常监管。重点对生产、加工、流通、销售等环节，实行网格化日常监督管理，全县共划定243个网格，形...
移动小詹
A:核心渠道重点政策不熟悉 M:不开心，愤怒 B:质问网格经理是否传达 R:感觉网格经理受到委屈调整后 A:与渠...
iOS 随笔
#import UIKit 和#import 的区别 #import UIKit #...

uikit 网格（重点）

网格

特色响应式宽度

应用实例

相关文章