<!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- 500px) and (max- 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>