首页 > 代码库 > bootstrap学习总结-02 网格布局
bootstrap学习总结-02 网格布局
1 网格
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" href=http://www.mamicode.com/"css/index.css" /> <meta name="viewport" content="width=device-width,initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <link rel="icon" href=http://www.mamicode.com/"./img/index.png"> <link rel="stylesheet" href=http://www.mamicode.com/"http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css"> <!-- jQuery文件。务必在bootstrap.min.js 之前引入 --> <script src=http://www.mamicode.com/"http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> <script src=http://www.mamicode.com/"http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> </head> <body> <h1 class="page-header">使用<small>Bootstrap网格系统布局网页</small></h1> <p>11111111111111111111111111111111111111111 </p> <h2 class="page-header">区块一</h2> <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</p> <h2 class="page-header">区块二</h2> <p>bbbbbbbbbbbbbbbbbbbbbbbbbbb</p> <h2 class="page-header">区块三</h2> <p>cccccccccccccccccccccccccccccc</p> </body></html>
把显示的内容居中，分成三等份显示在同一排
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" href=http://www.mamicode.com/"css/index.css" /> <meta name="viewport" content="width=device-width,initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <link rel="icon" href=http://www.mamicode.com/"./img/index.png"> <link rel="stylesheet" href=http://www.mamicode.com/"http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css"> <!-- jQuery文件。务必在bootstrap.min.js 之前引入 --> <script src=http://www.mamicode.com/"http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> <script src=http://www.mamicode.com/"http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h1 class="page-header">使用<small>Bootstrap网格系统布局网页</small></h1> <p>11111111111111111111111111111111111111111 </p> <div class="row"> <div class="col-md-4"> <h2 class="page-header">区块一</h2> <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</p> </div> <div class="col-md-4"> <h2 class="page-header">区块二</h2> <p>bbbbbbbbbbbbbbbbbbbbbbbbbbb</p> </div> <div class="col-md-4"> <h2 class="page-header">区块三</h2> <p>cccccccccccccccccccccccccccccc</p> </div> </div> </div> </body></html>
知识点：
1）让显示的内容居中，使用css的class container.
container这个类设置了内容的宽度，并且让现实的内容居中。
2）把显示的内容显示在同一行，并且平均分为三份，需要使用css的class row
显示的页面如下图：
引用资料：
http://v3.bootcss.com/css/#grid
bootstrap学习总结-02 网格布局
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。