【BootStrap__容器】

1、流体容器

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <style>
        .container-fluid {
            background-color: pink;
        }
    </style>
</head>
<body>
<div class="container-fluid">
    哈哈哈
</div>
</body>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</html>

2、固定容器

 <div class="container">
    哈哈哈
</div>

阈值	width
1200<=w (lg 大屏pc)	1170
992<=w<1200 (md 中屏pc)	970
768<=w<992 (sm 平板)	750
w<768 (xs 移动手机)	auto

3、栅格系统

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <style>
        .container {
            background-color: pink;
        }
 
        div[class|=col] {
            border: 1px solid;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-lg-10">col-lg-10</div>
        <div class="col-lg-2">col-lg-2</div>
    </div>
    <div class="row">
        <div class="col-lg-6">col-lg-6</div>
        <div class="col-lg-6">col-lg-6</div>
    </div>
    <div class="row">
        <div class="col-lg-3">col-lg-3</div>
        <div class="col-lg-7">col-lg-7</div>
    </div>
</div>
</body>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</html>

4、栅格源码分析

 1.流体容器&固定容器 公共样式
  margin-right: auto;
  margin-left: auto;
  padding-left:  15px;
  padding-right: 15px;	
 
2.固定容器 特定样式
	顺序不可变
	  @media (min-width: @screen-sm-min) {
	    width: @container-sm;
	  }
	  @media (min-width: @screen-md-min) {
	    width: @container-md;
	  }
	  @media (min-width: @screen-lg-min) {
	    width: @container-lg;
	  }
 
3.行
	margin-left:  -15px;
	margin-right: -15px;
 
4.列
	.make-grid-columns()--->
		.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1,
        .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2,
        ...
        .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12{
          position: relative;
          min-height: 1px;
          padding-left: 15px;
          padding-right: 15px;
        }
    
	.make-grid(xs)--->
		  float-grid-columns(@class);
				 * .col-xs-1,.col-xs-2,.col-xs-3,.col-xs-4,...col-xs-12{
				 *     float: left;
				 * }
		  .loop-grid-columns(@grid-columns, @class, width);
		  		 * .col-xs-12{
				 *     width:12/12;
				 * }
				 * .col-xs-11{
				 *     width:11/12;
				 * }
				 * ...
				 * .col-xs-1{
				 *     width:1/12;
				 * } 
		  .loop-grid-columns(@grid-columns, @class, pull);
		  .loop-grid-columns(@grid-columns, @class, push);
		  		 *push                  pull:
				 * .col-xs-push-12{         .col-xs-pull-12{      
				 *     left:12/12;              right:12/12;
				 * }                        }
				 * .col-xs-push-11{
				 *     left:11/12;
				 * }
				 * ...                      ...
				 * .col-xs-push-1{
				 *     left:1/12;
				 * } 
				 * .col-xs-push-0{           .col-xs-pull-0{
				 *     left:auto;               right:auto;
				 * }                         }
				 
		  .loop-grid-columns(@grid-columns, @class, offset);

响应式工具

栅格盒模型设计的精妙之处

 容器两边具有15px的padding	、
行    两边具有-15px的margin	
列    两边具有15px的padding
 
为了维护槽宽的规则，
	列两边必须得要15px的padding
为了能使列嵌套行
	行两边必须要有-15px的margin
为了让容器可以包裹住行
	容器两边必须要有15px的padding

posted @ 2020-06-25 22:50 一只桔子2233 阅读(150) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

阅读排行：
· 全程不用写代码，我用AI程序员写了一个飞机大战
· DeepSeek 开源周回顾「GitHub 热点速览」
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了

历史上的今天：
2019-06-25 jquery 定位

公告

昵称：一只桔子2233
园龄： 8年2个月
粉丝： 16
关注： 18

+加关注

2025年3月

日

一

二

三

四

五

六

Kikyo

纸上得来终觉浅，绝知此事要躬行。

【BootStrap__容器】

1、流体容器

2、固定容器

3、栅格系统

4、栅格源码分析

响应式工具

栅格盒模型设计的精妙之处

公告

搜索

我的标签

随笔分类

随笔档案

阅读排行榜

最新评论

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
	<style>
	.container-fluid {
	background-color: pink;
	}
	</style>
	</head>
	<body>
	<div class="container-fluid">
	哈哈哈
	</div>
	</body>
	<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
	<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
	</html>

	1.流体容器&固定容器公共样式
	margin-right: auto;
	margin-left: auto;
	padding-left: 15px;
	padding-right: 15px;

	2.固定容器特定样式
	顺序不可变
	@media (min-width: @screen-sm-min) {
	width: @container-sm;
	}
	@media (min-width: @screen-md-min) {
	width: @container-md;
	}
	@media (min-width: @screen-lg-min) {
	width: @container-lg;
	}

	3.行
	margin-left: -15px;
	margin-right: -15px;

	4.列
	.make-grid-columns()--->
	.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1,
	.col-xs-2, .col-sm-2, .col-md-2, .col-lg-2,
	...
	.col-xs-12, .col-sm-12, .col-md-12, .col-lg-12{
	position: relative;
	min-height: 1px;
	padding-left: 15px;
	padding-right: 15px;
	}

	.make-grid(xs)--->
	float-grid-columns(@class);
	* .col-xs-1,.col-xs-2,.col-xs-3,.col-xs-4,...col-xs-12{
	* float: left;
	* }
	.loop-grid-columns(@grid-columns, @class, width);
	* .col-xs-12{
	* width:12/12;
	* }
	* .col-xs-11{
	* width:11/12;
	* }
	* ...
	* .col-xs-1{
	* width:1/12;
	* }
	.loop-grid-columns(@grid-columns, @class, pull);
	.loop-grid-columns(@grid-columns, @class, push);
	*push pull:
	* .col-xs-push-12{ .col-xs-pull-12{
	* left:12/12; right:12/12;
	* } }
	* .col-xs-push-11{
	* left:11/12;
	* }
	* ... ...
	* .col-xs-push-1{
	* left:1/12;
	* }
	* .col-xs-push-0{ .col-xs-pull-0{
	* left:auto; right:auto;
	* } }

	.loop-grid-columns(@grid-columns, @class, offset);

	容器两边具有15px的padding 、
	行两边具有-15px的margin
	列两边具有15px的padding

	为了维护槽宽的规则，
	列两边必须得要15px的padding
	为了能使列嵌套行
	行两边必须要有-15px的margin
	为了让容器可以包裹住行
	容器两边必须要有15px的padding