栅格系统
2.1 工作原理
2.2 使用方法
2.3 响应式栅格
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>响应式栅格系统</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<style>
.row {
margin-bottom: 15px;
}
[class*="col-"] {
padding-top: 15px;
padding-bottom: 15px;
background-color: rgba(86, 61, 124, 0.15);
border: 1px solid rgba(86, 61, 124, .2);
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
<div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">
.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0
</div>
</div>
<div class="row">
<div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
<div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">
.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0
</div>
</div>
</div>
</body>
</html>
2.4 招商银行首页
鲁公网安备 37110202000410号