Bootstrap响应式布局简例

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>自适应</title>
    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="./job.css">
</head>
<body>
    <div class="main">

        <div class="inset">
            <!--<div class="social-icons">-->
                <div class="span">
                    <a href="#"><i>用户登录</i>
                </a></div>
                <!--<div class="clear"></div>-->
                <div class="span1">
                    <a href="#"><i>用户注册</i>
                </a></div>
                <!--<div class="clear"></div>-->
            <!--</div>-->
        </div>
    </div>
</body>
</html>

/*body{background-color: #fff;}*/
/*body{background-color: #2d2d2d}*/

html,body,div,span,h2,p,a,img,sub,u,i,menu,form
{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}

.span {
    float:left;
    display: block;
    background:#3B5998;
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    -ms-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
    border:1px solid #3B5998;
    outline:none;
    width: 49.99%;
}
.span1 {
    float:right;
    transition: all 0.5s ease-out;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    background: #55ACEE;
    outline:none;
    width: 49.99%;
}
.clear{clear:both;}
.inset{
    overflow: hidden;
    text-align: center;
    width: 100%;
    margin: auto;
}
/*----自适应-----*/
@media (max-width:1200px){
    .main {
        width:60%;
        margin: 7em auto 0;
    }
}
@media (max-width:992px){
    .main{
        width: 70%;
        margin: 9em auto 0;
    }
}
@media (max-width:768px){
    .main{
        width:80%;
        margin: 6em auto 0;
    }
    .span,.span1 {
        margin:0 auto;
        text-align:center;
        width: 100%;
        margin-bottom: 15px;
    }
}

换行

Bootstrap响应式布局简例

猜你喜欢