您的位置：首页 > Web前端 > BootStrap

bootstrap 网格系统（Grid system） 总结与实践

2017-06-27 20:58 561 查看
概述：

小知识点

1、@media 会在网页宽度为大于768、992、1200像素，设置网页container修饰div宽度分别为 750、970、1170

2、col-xs-*、 col-sm-*、col-md-* 、col-lg-*、 分别代表极小尺寸（一般指手机）、小尺寸（平板电脑）、中等尺寸(普通PC)、大型尺寸

3、col-sm-* 小于768会堆显示不会分栏，col-md-* 小于992px 会堆显示不会分栏，col-xs-* 怎么都会分栏

对于不同的尺寸屏幕显示不同比例

<!DOCTYPE html>
<html lang="zh-hans">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0,
maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet"
href="../bootstrap-3.3.7-dist/css/bootstrap.min.css">
<link rel="stylesheet" href="../css/style.css">
<title>Insert title here</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-6 col-sm-8 col-md-9  col-lg-10">
<h1 class="page-header">主体</h1>
<p>1、@media 会在网页宽度为大于768、992、1200像素，设置网页container修饰div宽度分别为 750、970、1170
2、col-xs-*、 col-sm-*、col-md-* 、col-lg-*、 分别代表极小尺寸（一般指手机）、小尺寸（平板电脑）、中等尺寸(普通PC)、大型尺寸
3、col-sm-* 小于768会堆显示不会分栏，col-md-* 小于992px 会堆显示不会分栏，col-xs-* 怎么都会分栏</p>
</div>
<div  class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
<h1 class="page-header">边栏</h1>
<p>1、@media 会在网页宽度为大于768、992、1200像素，设置网页container修饰div宽度分别为 750、970、1170
2、col-xs-*、 col-sm-*、col-md-* 、col-lg-*、 分别代表极小尺寸（一般指手机）、小尺寸（平板电脑）、中等尺寸(普通PC)、大型尺寸
3、col-sm-* 小于768会堆显示不会分栏，col-md-* 小于992px 会堆显示不会分栏，col-xs-* 怎么都会分栏</p>
</div>
</div>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript"
src="../bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</body>
</html>
总结：

1、bootstrap总共分为12份

2、class="col-xs-6 col-sm-8 col-md-9 col-lg-10" 表示 在极小尺寸占6份，小尺寸 8份，中等 9份， 大型10份



3、<div class=" col-md-9 col-md-push-3"> col-md-push 表示往右移动3份位置

4、<div class="col-md-3 col-md-pull-9"> col-md-push 表示往左移动9份位置 3、4 的效果就是左右调换了位置

嵌套div布局，可以用clearfix修复布局问题

<!DOCTYPE html>
<html lang="zh-hans">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0,
maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet"
href="../bootstrap-3.3.7-dist/css/bootstrap.min.css">
<link rel="stylesheet" href="../css/style.css">
<title>Insert title here</title>
</head>
<body>
<div class="container">
<div class="row">
<div class=" col-md-9 ">
<h1 class="page-header">主体</h1>
<p>1、@media 会在网页宽度为大于768、992、1200像素，设置网页container修饰div宽度分别为 750、970、1170
2、col-xs-*、 col-sm-*、col-md-* 、col-lg-*、 分别代表极小尺寸（一般指手机）、小尺寸（平板电脑）、中等尺寸(普通PC)、大型尺寸
3、col-sm-* 小于768会堆显示不会分栏，col-md-* 小于992px 会堆显示不会分栏，col-xs-* 怎么都会分栏</p>

<div class="row">
<div class="col-md-4">
<h2>区块一</h2>
<p>1、@media 会在网页宽度为大于768、992、1200像素，设置网页container修饰div宽度分别为 750、970、1170
2、col-xs-*、 col-sm-*、col-md-* 、col-lg-*、 分别代表极小尺寸（一般指手机）、小尺寸（平板电脑）、中等尺寸(普通PC)、大型尺寸
3、col-sm-* 小于768会堆显示不会分栏，col-md-* 小于992px 会堆显示不会分栏，col-xs-* 怎么都会分栏
1、@media 会在网页宽度为大于768、992、1200像素，设置网页container修饰div宽度分别为 750、970、1170
2、col-xs-*、 col-sm-*、col-md-* 、col-lg-*、 分别代表极小尺寸（一般指手机）、小尺寸（平板电脑）、中等尺寸(普通PC)、大型尺寸
3、col-sm-* 小于768会堆显示不会分栏，col-md-* 小于992px 会堆显示不会分栏，col-xs-* 怎么都会分栏</p>
</div>
<div class="col-md-4">
<h2>区块二</h2>
<p>1、@media 会在网页宽度为大于768、992、1200像素，设置网页container修饰div宽度分别为 750、970、1170
2、col-xs-*、 col-sm-*、col-md-* 、col-lg-*、 分别代表极小尺寸（一般指手机）、小尺寸（平板电脑）、中等尺寸(普通PC)、大型尺寸
3、col-sm-* 小于768会堆显示不会分栏，col-md-* 小于992px 会堆显示不会分栏，col-xs-* 怎么都会分栏</p>
</div>
<div class="col-md-4">
<h2>区块三</h2>
<p>1、@media 会在网页宽度为大于768、992、1200像素，设置网页container修饰div宽度分别为 750、970、1170
2、col-xs-*、 col-sm-*、col-md-* 、col-lg-*、 分别代表极小尺寸（一般指手机）、小尺寸（平板电脑）、中等尺寸(普通PC)、大型尺寸
3、col-sm-* 小于768会堆显示不会分栏，col-md-* 小于992px 会堆显示不会分栏，col-xs-* 怎么都会分栏</p>
</div>
<div class="clearfix"></div>
<div class="col-md-6">
<h2>区块四</h2>
<p>1、@media 会在网页宽度为大于768、992、1200像素，设置网页container修饰div宽度分别为 750、970、1170
2、col-xs-*、 col-sm-*、col-md-* 、col-lg-*、 分别代表极小尺寸（一般指手机）、小尺寸（平板电脑）、中等尺寸(普通PC)、大型尺寸
3、col-sm-* 小于768会堆显示不会分栏，col-md-* 小于992px 会堆显示不会分栏，col-xs-* 怎么都会分栏</p>
</div>
<div class="col-md-6">
<h2>区块五</h2>
<p>1、@media 会在网页宽度为大于768、992、1200像素，设置网页container修饰div宽度分别为 750、970、1170
2、col-xs-*、 col-sm-*、col-md-* 、col-lg-*、 分别代表极小尺寸（一般指手机）、小尺寸（平板电脑）、中等尺寸(普通PC)、大型尺寸
3、col-sm-* 小于768会堆显示不会分栏，col-md-* 小于992px 会堆显示不会分栏，col-xs-* 怎么都会分栏</p>
</div>
</div>
</div>
<div  class="col-md-3">
<h1 class="page-header">边栏</h1>
<p>1、@media 会在网页宽度为大于768、992、1200像素，设置网页container修饰div宽度分别为 750、970、1170
2、col-xs-*、 col-sm-*、col-md-* 、col-lg-*、 分别代表极小尺寸（一般指手机）、小尺寸（平板电脑）、中等尺寸(普通PC)、大型尺寸
3、col-sm-* 小于768会堆显示不会分栏，col-md-* 小于992px 会堆显示不会分栏，col-xs-* 怎么都会分栏</p>
</div>
</div>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript"
src="../bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</body>
</html>


总结：

如果你取消<div class="clearfix"></div> 将会出现区块四挂在中间，区块五换到第六行

偏移测试：修改区块四

<div class="col-md-6 col-md-offset-6">

<h2>区块四</h2>

<p class="alert alert-info">1、@media 会在网页宽度为大于768、992、1200像素，设置网页container修饰div宽度分别为 750、970、1170

2、col-xs-*、 col-sm-*、col-md-* 、col-lg-*、 分别代表极小尺寸（一般指手机）、小尺寸（平板电脑）、中等尺寸(普通PC)、大型尺寸

3、col-sm-* 小于768会堆显示不会分栏，col-md-* 小于992px 会堆显示不会分栏，col-xs-* 怎么都会分栏</p>

</div>

总结：

1、col-md-offset-6 表示在中等尺寸偏移有效 且偏移6份网格

2、alert alert-info 为p元素增加样式，警告样式的信息

隐藏测试：hidden-*(xs、md、lg) 表示在对应尺寸隐藏， visible-* 表示在对应尺寸显示

<p class="visible-xs alert alert-info">坚持不懈直到成功</p> 表示这句话在极小尺寸显示，其他不显示



<h1 class="page-header hidden-xs">边栏</h1> 表示 在xs下隐藏，其他尺寸显示
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航