Bootstrap 网格系统
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>我是中国人</title> <!-- 新 Bootstrap 核心 CSS 文件 --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> <script src="js/bootstrap.min.js"></script> <style> .container { background-color: red; } div[class|=col] { border: 1px solid; } </style> </head> <body> <h1>Good morning</h1> <div id="" class="container"> <div id="" class="row"> <div id="" class="col-lg-10"> col-lg-10 </div> <div id="" class="col-lg-2"> col-lg-2 </div> </div> <div id="" class="row"> <div id="" class="col-lg-8"> col-lg-8 </div> <div id="" class="col-lg-4"> col-lg-4 </div> </div> <div id="" class="row"> <div id="" class="col-lg-6"> col-lg-6 </div> <div id="" class="col-lg-6"> col-lg-6 </div> </div> </div> </body> </html>
bootstrap布局容器css
<div class="container">
</div>
固定宽度1170pxhtml
<div class="container-fluid">
</div>
宽度为100%bootstrap