<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>code2</title>
<link rel="stylesheet" href="css/bootstrap.min.css"/>
<script type="application/javascript" src="js/jquery-1.12.3.min.js"></script>
<script type="application/javascript" src="js/bootstrap.min.js"></script>
<style>
div{border:1px solid red}
@media only screen and (min-width: 500px) and (max-width: 640px) {
div {background: #1B6D85;}
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-6">.col-md-6</div>
<div class="col-md-6 clo-sm-6">.col-md-6</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>code3</title>
<link rel="stylesheet" href="css/bootstrap.min.css"/>
<script type="application/javascript" src="js/jquery-1.12.3.min.js"></script>
<script type="application/javascript" src="js/bootstrap.min.js"></script>
<style>
div{background: #C4E3F3;}
</style>
</head>
<body>
<div class="container">
container
</div>
<div class="container-fluid">
<!--container-fluid占满行-->
container-fluid
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>lie-zu-he</title>
<link rel="stylesheet" href="css/bootstrap.min.css"/>
<script type="application/javascript" src="js/jquery-1.12.3.min.js"></script>
<script type="application/javascript" src="js/bootstrap.min.js"></script>
<style>
div{border: 1px solid red;}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4">col-md-4</div>
<div class="col-md-4">col-md-4</div>
<div class="col-md-4">col-md-4</div>
</div>
<div class="row">
<div class="col-xs-6">col-xs-6</div>
<div class="clo-xs-6">col-xs-6</div>
</div>
<!--/列偏移-->
<div class="row">
<div class="col-md-3 col-md-offset-3">col-md-3</div>
<div class="clo-md-2 col-md-offset-2">col-md-2</div>
</div>
<!--列嵌套-->
<div class="row">
<div class="col-md-8">
<div class="col-md-6">col-md-6</div>
<div class="col-md-6">col-md-6</div>
</div>
<div class="col-md-4">col-md-4</div>
</div>
<!--列的排序-->
<div class="row">
<!--push是向后推几格子
pull是向前拉几个格子-->
<div class="col-md-3 col-md-push-5">col-md-3</div>
<div class="col-md-2 col-md-pull-3">col-md-2</div>
</div>
<!--跨分辨率-->
<div class="row">
<div class="col-md-8 col-xs-5 col-sm-4">div</div>
<div class="col-md-4 col-sm-8 col-xs-7">div</div>
</div>
</div>
</body>
</html>
