mui框架grid栅格布局

责编:menVScode 2018-04-11 13:58 阅读(1389)

该文章将mui框架中grid栅格布局的css代码单独拿出来。

演示的html代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>MVC前端网(menVScode)_前端博客_前端技术_前端资源下载_学习,成为更好的自己</title>
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<link rel="stylesheet" href="./grid_small.css" />
	<style>
		.bg{height: 100px;padding: 5px 5px;}
		.item{background: #abcede;height: 100%;}
	</style>
</head>
<body>
	<div class="mui-content">
	    <div class="mui-row">
	        <div class="mui-col-sm-6 mui-col-xs-6 bg">
	            <p class="item">Item 1</p>
	        </div>
	        <div class="mui-col-sm-6 mui-col-xs-6 bg">
	            <p class="item">Item 1</p>
	        </div>
	        <div class="mui-col-sm-6 mui-col-xs-6 bg">
	            <p class="item">Item 1</p>
	        </div>
	        <div class="mui-col-sm-6 mui-col-xs-6 bg">
	            <p class="item">Item 1</p>
	        </div>
	        <div class="mui-col-sm-6 mui-col-xs-6 bg">
	            <p class="item">Item 1</p>
	        </div>
	        <div class="mui-col-sm-6 mui-col-xs-6 bg">
	            <p class="item">Item 1</p>
	        </div>
	        <div class="mui-col-sm-6 mui-col-xs-6 bg">
	            <p class="item">Item 1</p>
	        </div>
	        <div class="mui-col-sm-6 mui-col-xs-6 bg">
	            <p class="item">Item 1</p>
	        </div>
	    </div>
	</div>
</body>
</html>

单独抽离的grid栅格布局的css样式


* {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-user-select: none;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-tap-highlight-color: transparent;
    padding: 0;margin: 0;
}
.mui-content
{
    background-color: #efeff4;

    -webkit-overflow-scrolling: touch;
}
.mui-col-xs-1, .mui-col-sm-1, .mui-col-xs-2, .mui-col-sm-2, .mui-col-xs-3, .mui-col-sm-3, .mui-col-xs-4, .mui-col-sm-4, .mui-col-xs-5, .mui-col-sm-5, .mui-col-xs-6, .mui-col-sm-6, .mui-col-xs-7, .mui-col-sm-7, .mui-col-xs-8, .mui-col-sm-8, .mui-col-xs-9, .mui-col-sm-9, .mui-col-xs-10, .mui-col-sm-10, .mui-col-xs-11, .mui-col-sm-11, .mui-col-xs-12, .mui-col-sm-12
{
    position: relative;

    min-height: 1px;
}
.mui-row:before, .mui-row:after
{
    display: table;

    content: ' ';
}
.mui-row:after
{
    clear: both;
}
.mui-row > [class*='mui-col-']
{
    float: left;
}

.mui-col-xs-12
{
    width: 100%;
}

.mui-col-xs-11
{
    width: 91.66666667%;
}

.mui-col-xs-10
{
    width: 83.33333333%;
}

.mui-col-xs-9
{
    width: 75%;
}

.mui-col-xs-8
{
    width: 66.66666667%;
}

.mui-col-xs-7
{
    width: 58.33333333%;
}

.mui-col-xs-6
{
    width: 50%;
}

.mui-col-xs-5
{
    width: 41.66666667%;
}

.mui-col-xs-4
{
    width: 33.33333333%;
}

.mui-col-xs-3
{
    width: 25%;
}

.mui-col-xs-2
{
    width: 16.66666667%;
}

.mui-col-xs-1
{
    width: 8.33333333%;
}

@media (min-width: 400px)
{
    .mui-col-sm-12
    {
        width: 100%;
    }

    .mui-col-sm-11
    {
        width: 91.66666667%;
    }

    .mui-col-sm-10
    {
        width: 83.33333333%;
    }

    .mui-col-sm-9
    {
        width: 75%;
    }

    .mui-col-sm-8
    {
        width: 66.66666667%;
    }

    .mui-col-sm-7
    {
        width: 58.33333333%;
    }

    .mui-col-sm-6
    {
        width: 50%;
    }

    .mui-col-sm-5
    {
        width: 41.66666667%;
    }

    .mui-col-sm-4
    {
        width: 33.33333333%;
    }

    .mui-col-sm-3
    {
        width: 25%;
    }

    .mui-col-sm-2
    {
        width: 16.66666667%;
    }

    .mui-col-sm-1
    {
        width: 8.33333333%;
    }
}
标签: mui grid 栅格
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码