uikit 网格（重点）

网格

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 类的实际效果都是一样的。

    
    
    
    
    
    
    
    




    

        

            .uk-width-1-3
        
    
    

        

            .uk-width-1-3
        
    
    

        

            .uk-width-1-3
        
    


    

        

            .uk-width-1-2
        
    
    

        

            .uk-width-1-2
        
    

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后，独占一行。
运行以下代码，缩小窗口，观察网格变化。

    
    
    
    
    
    
    
    




    

        

            .uk-width-large-1-3
        
    
    

        

            .uk-width-large-1-3
        
    
    

        

            .uk-width-large-1-3
        
    


    

        

            .uk-width-medium-1-3
        
    
    

        

            .uk-width-medium-1-3
        
    
    

        

            .uk-width-medium-1-3
        
    


    

        

            .uk-width-small-1-3
        
    
    

        

            .uk-width-small-1-3
        
    
    

        

            .uk-width-small-1-3
        
    

再看以下示例

    
    
    
    
    
    
    
    




    

        

            .uk-width-medium-1-4 uk-width-small-1-2
        
    
    

        

            .uk-width-medium-1-4 uk-width-small-1-2
        
    
    

        

            .uk-width-medium-1-4 uk-width-small-1-2
        
    
    

        

            .uk-width-medium-1-4 uk-width-small-1-2
        
    

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

应用实例

    
    
    
    
    
    
    
    




    

        

            

                
文章标题-洛神赋

                
由 曹植 撰写于 2012年12月12日 | 发表在 博客

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

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

            
            

                
文章标题-洛神赋

                
由 曹植 撰写于 2012年12月12日 | 发表在 博客

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

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

            
            

                
文章标题-洛神赋

                
由 曹植 撰写于 2012年12月12日 | 发表在 博客

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

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

            
            

                
文章标题-洛神赋

                
由 曹植 撰写于 2012年12月12日 | 发表在 博客

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

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

            
        
    
    

       

           
网站开发
           

               
 二次开发
               
 JAVA
               
 PHP
               
 .NET
               
 网络营销
           
       
        

            
网站开发
            

                
 二次开发
                
 JAVA
                
 PHP
                
 .NET
                
 网络营销
            
        
        

            
网站开发
            

                
 二次开发
                
 JAVA
                
 PHP
                
 .NET
                
 网络营销