Bootstrap网格系统
什么是Bootstrap网格系统
Bootstrap包含了一个响应式的，移动设备优先的，不固定的网格系统，可以随着设备或视口大小的增加而适当的扩展到12列。它优先设计更小的宽度，随着屏幕大小的增加而添加元素。
Bootstrap网格系统工作原理
网格系统通过一系列包含内容的行和列来创建页面布局
行必须放置在 .container class 内，以便获得适当的对齐（alignment）和内边距（padding）。
使用行来创建列的水平组。
内容应该放置在列内，且唯有列可以是行的直接子元素。
预定义的网格类，比如 .row 和 .col-xs-4，可用于快速创建网格布局。LESS 混合类可用于更多语义布局。
列通过内边距（padding）来创建列内容之间的间隙。该内边距是通过 .rows 上的外边距（margin）取负，表示第一列和最后一列的行偏移。
网格系统是通过指定您想要横跨的十二个可用的列来创建的。例如，要创建三个相等的列，则使用三个 .col-xs-4。
基本的网格结构
|
<div class="container"> <div class="row"> <div class="col-*-*"></div> <div class="col-*-*"></div> </div> <div class="row">...</div> </div> <div class="container">.... |
使用Bootstrap进行响应式布局
先将head标签内引入meta标签，具体代码：
| <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <link rel="stylesheet" type="text/css" href="/stylesheets/bootstrap.min.css"> |
然后利用栅格将区域大致划，然后在区域内插入你需要添加的元素。
下面给出一个以图片为例子的完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-7 col-sm-6 col-xs-12 clearfix">
<img src="imgs/oleg.png " class="img-responsive center-block " />
</div>
<div class="col-md-5 col-sm-6 col-xs-12 clearfix" >
<img src="imgs/oksana.png" class="img-responsive center-block "/>
</div>
</div>
<div class="row">
<div class="col-md-4 col-sm-4 col-xs-12 clearfix">
<img src="imgs/ewelina.png" class="img-responsive center-block" alt="">
</div>
<div class="col-md-4 col-sm-4 col-xs-12 clearfix">
<img src="imgs/juraj.png" class="img-responsive center-block" alt="">
</div>
<div class="col-md-4 col-sm-4 col-xs-12 clearfix" >
<img src="imgs/juraj.png" class="img-responsive center-block" alt="">
</div>
</div>
</div>
</body>
</html> |
2253
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
