MUI-栅格系统-实现元素排版

我会带着你远行 2023-09-29 06:58 12阅读 0赞

**简介：** MUI提供了非常简单实用的12列响应式栅格系统。使用时只需在外围容器上添加.mui-row，在列上添加.mui-col-\[sm|xs\]-\[1-12\]，即可。  
![在这里插入图片描述][48acc3af7958470c87f10bc191ce3195.png]  
mui-col-sm-6类在大屏（≥400px）设备上会展现为并排的两列；  
mui-col-xs-12类在小屏（＜400px）设备上会覆盖之前定义的类展现为水平排列  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5pe25YWJLWluZw_size_13_color_FFFFFF_t_70_g_se_x_16]  
**代码实现：**  
第一步：引入相关文件

第二步：body内代码

<div class="mui-content">
    	
    	<div class="mui-row myicon">
    		<div class="mui-col-sm-3 mui-col-xs-3">
    			<a href="">
    				<span class="mui-icon icon iconfont icon-saoyisao"></span>
    				<span class="word">扫一扫</span>
    			</a>
    		</div>
    		<div class="mui-col-sm-3 mui-col-xs-3">
    			<a href="">
    				<span class="mui-icon icon iconfont icon-fukuan"></span>
    				<span class="word">付款</span>
    			</a>
    		</div>
    		<div class="mui-col-sm-3 mui-col-xs-3">
    			<a href="">
    				<span class="mui-icon icon iconfont icon-saoyisao"></span>
    				<span class="word">收钱</span>
    			</a>
    		</div>
    		<div class="mui-col-sm-3 mui-col-xs-3">
    			<a href="">
    				<span class="mui-icon icon iconfont icon-kabao"></span>
    				<span class="word">卡包</span>
    			</a>
    		</div>
    	</div>
    </div>

第三步：home.css代码，控制栅格样式

/* 调整主体部分距离标题栏的距离 */
    .mui-content{
        
    	padding-top: 49px!important;
    	background-color: #1b82d2;
    }
    /* 栅格高度 */
    .myicon{
        
    	height: 70px;
    }
    /* 栅格内超链接的高度 */
    .myicon a{
        
    	/* 需要将超链接调成block形式,不然设置的宽度对其没有作用 */
    	display:block;
    	width: 50px;
    	height: 50px;
    	/* 	background-color: red; */
    	/* 使盒子居中显示 */
    	margin:0 auto;
    	color:white;
    	/* icon可以使用文本居中属性 */
    	text-align:center; 
    }
    /* 栅格内超链接内图标的高度 */
    .myicon a .icon{
        
    	margin-top:10px;
    	font-size:30px;
    	display:block;
    }
    /* 栅格内超链接内文字的样式 */
    .myicon a .word{
        
    	/* 需要将span调成block形式,不然设置的高度对其没有作用 */
    	display:block;
    	font-size:12px;
    	margin-top:5px;
    }

**界面展示：**  
![在这里插入图片描述][ced5f51bd98042b4b2168ce6d875232d.png]  
**升级版：**  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5pe25YWJLWluZw_size_10_color_FFFFFF_t_70_g_se_x_16]

**相关链接**  
1、[MUI的简介][MUI]  
2、[MUI的字体图标][MUI 1]  
3、[MUI的事件处理][MUI 2]  
4、[HbuilderX中新建MUI下的移动端App][HbuilderX_MUI_App]  
5、[H5+ Webview窗口对象][H5_ Webview]  
6、[MUI-底栏实现-页面切换][MUI-_-]  
7、[MUI-标题栏实现-样式复写效果][MUI-_- 1]  
8、[MUI-栅格系统-实现元素排版][MUI-_- 2]  
9、[MUI-列表实现][MUI-]  
10、[MUI-列表实现2][MUI-_2]  
11、[MUI-轮播插件实现-UI组件][MUI-_-UI]  
12、[MUI-弹出菜单][MUI- 1]  
13、[MUI-页面刷新][MUI- 2]  
14、[MUI-新建子页面][MUI- 3]  
15、[MUI-页面之间传值（打开新的子页面）][MUI- 4]  
16、[HTML5+规范API-拍照功能][HTML5_API-]  
17、[HTML5+规范API-系统相册获取功能][HTML5_API- 1]  
18、[HTML5+规范API-地理位置获取][HTML5_API- 2]  
19、[MUI-上拉刷新和下拉刷新][MUI- 5]  
20、[HTML5+规范API-扫码功能][HTML5_API- 3]  
21、[HTML5+规范API-系统通讯录获取功能][HTML5_API- 4]  
22、[Hbuilder无法完成应用程序云打包，一直报错需要打包校验][Hbuilder]  
23、[Hbuilder-应用程序打包][Hbuilder-]  
24、[移动APP开发的三种常见模式][APP]  
25、[IOS系统测试APP时发现input内无法选中并输入值][IOS_APP_input]  
26、[MUI-购物车][MUI- 6]

[48acc3af7958470c87f10bc191ce3195.png]: https://img-blog.csdnimg.cn/48acc3af7958470c87f10bc191ce3195.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5pe25YWJLWluZw_size_13_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/687a85abd6214072962e24b753018698.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5pe25YWJLWluZw==,size_13,color_FFFFFF,t_70,g_se,x_16
[ced5f51bd98042b4b2168ce6d875232d.png]: https://img-blog.csdnimg.cn/ced5f51bd98042b4b2168ce6d875232d.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5pe25YWJLWluZw_size_10_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/f8be76a8a1cd4a95adb9e2f52628a3b9.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5pe25YWJLWluZw==,size_10,color_FFFFFF,t_70,g_se,x_16
[MUI]: https://blog.csdn.net/blbyu/article/details/124073884
[MUI 1]: https://blog.csdn.net/blbyu/article/details/124073728
[MUI 2]: https://blog.csdn.net/blbyu/article/details/124073670
[HbuilderX_MUI_App]: https://blog.csdn.net/blbyu/article/details/124029950
[H5_ Webview]: https://blog.csdn.net/blbyu/article/details/124087264
[MUI-_-]: https://blog.csdn.net/blbyu/article/details/124089783
[MUI-_- 1]: https://blog.csdn.net/blbyu/article/details/124100509
[MUI-_- 2]: https://blog.csdn.net/blbyu/article/details/124104471
[MUI-]: https://blog.csdn.net/blbyu/article/details/124114095
[MUI-_2]: https://blog.csdn.net/blbyu/article/details/124122849
[MUI-_-UI]: https://blog.csdn.net/blbyu/article/details/124118088
[MUI- 1]: https://blog.csdn.net/blbyu/article/details/124292196
[MUI- 2]: https://blog.csdn.net/blbyu/article/details/124358512
[MUI- 3]: https://blog.csdn.net/blbyu/article/details/124358520
[MUI- 4]: https://blog.csdn.net/blbyu/article/details/124358762
[HTML5_API-]: https://blog.csdn.net/blbyu/article/details/124395810
[HTML5_API- 1]: https://blog.csdn.net/blbyu/article/details/124395849
[HTML5_API- 2]: https://blog.csdn.net/blbyu/article/details/124395903
[MUI- 5]: https://blog.csdn.net/blbyu/article/details/124395907
[HTML5_API- 3]: https://blog.csdn.net/blbyu/article/details/124395916
[HTML5_API- 4]: https://blog.csdn.net/blbyu/article/details/124398657
[Hbuilder]: https://blog.csdn.net/blbyu/article/details/124400424
[Hbuilder-]: https://blog.csdn.net/blbyu/article/details/124400990
[APP]: https://blog.csdn.net/blbyu/article/details/124074019
[IOS_APP_input]: https://blog.csdn.net/blbyu/article/details/124369536
[MUI- 6]: https://blog.csdn.net/blbyu/article/details/124417308