<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>
<script type="text/javascript" src="js/jquery-1.8.0.min.js" ></script>
<style>
.show-grid [class ^="col-"] {
padding-top: 10px;
padding-bottom: 10px;
background-color: #eee;
border: 1px solid #ddd;
/*background-color: rgba(86, 61, 124, .15);
border: 1px solid rgba(86, 61, 124, .2);*/
}
</style>
<script type="text/javascript">
</script>
</style>
<br/>
<body>
<b>col-md-*用法</b>
<div class="row show-grid">
<div class="col-xs-1">.col-xs-1</div>
<div class="col-xs-1">.col-xs-2</div>
<div class="col-xs-1">.col-xs-3</div>
<div class="col-md-1">.col-md-4</div>
<div class="col-md-1">.col-md-5</div>
<div class="col-md-1">.col-md-6</div>
<div class="col-md-1">.col-md-7</div>
<div class="col-md-1">.col-md-8</div>
<div class="col-md-1">.col-md-9</div>
<div class="col-md-1">.col-md-10</div>
<div class="col-md-1">.col-md-11</div>
<div class="col-md-1">.col-md-12</div>
</div>
<br/>
<b>col-lg-*用法</b>
<br/>
<div class="row show-grid">
<div class="col-lg-8">.col-lg-8</div>
<div class="col-lg-4">.col-lg-4</div>
</div>
<script>
</script>
</body>
</html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>
<script type="text/javascript" src="js/jquery-1.8.0.min.js" ></script>
<style>
.show-grid [class ^="col-"] {
padding-top: 10px;
padding-bottom: 10px;
background-color: #eee;
border: 1px solid #ddd;
/*background-color: rgba(86, 61, 124, .15);
border: 1px solid rgba(86, 61, 124, .2);*/
}
</style>
<script type="text/javascript">
</script>
</style>
<br/>
<body>
<b>col-md-*用法</b>
<div class="row show-grid">
<div class="col-xs-1">.col-xs-1</div>
<div class="col-xs-1">.col-xs-2</div>
<div class="col-xs-1">.col-xs-3</div>
<div class="col-md-1">.col-md-4</div>
<div class="col-md-1">.col-md-5</div>
<div class="col-md-1">.col-md-6</div>
<div class="col-md-1">.col-md-7</div>
<div class="col-md-1">.col-md-8</div>
<div class="col-md-1">.col-md-9</div>
<div class="col-md-1">.col-md-10</div>
<div class="col-md-1">.col-md-11</div>
<div class="col-md-1">.col-md-12</div>
</div>
<br/>
<b>col-lg-*用法</b>
<br/>
<div class="row show-grid">
<div class="col-lg-8">.col-lg-8</div>
<div class="col-lg-4">.col-lg-4</div>
</div>
<script>
</script>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
