Bootstrap 栅格系统分析

最新推荐文章于 2023-01-22 18:45:02 发布

Night_Emperor

最新推荐文章于 2023-01-22 18:45:02 发布

阅读量455

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/Night_Emperor/article/details/78033688

版权

CSS 专栏收录该内容

25 篇文章 1 订阅

订阅专栏

.container:在不同分辨率下，宽度也不同

.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}

.container-fluid:无论在什么分辨率下，宽度始终是全屏

.container-fluid {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

.row：必须在container的内部，.row:after用来清除浮动

.row {
  margin-right: -15px;
  margin-left: -15px;
}
.row:after{//下列三项，缺一不可
  display: table;
  content: " ";
  clear: both;
}

盒子模型为IE盒子：

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

列元素：均为左浮动元素，放在.row元素中， .row元素可以清除浮动。position:relative;这样可以使用left、right。

.col-xs-1{
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
  float: left;
  width: 8.33333333%;
}

相对定位设置：

.col-xs-pull-1 {
  right: 8.33333333%;
}

.col-xs-push-1 {
  left: 8.33333333%;
}

左边距设置：

.col-xs-offset-1 {
  margin-left: 8.33333333%;
}

学习过程中的仿写例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{margin:0;padding: 0;
			-webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;}
			.div1{width: 900px;margin:0 auto;background: yellow;border: 1px solid red;padding:0 15px;margin-bottom: 10px;}
			.div2{height: 20px;background: greenyellow; }
			.div3{width: 900px;margin:0 auto;background: yellow;border: 1px solid red;padding:0 15px;margin-bottom: 10px;}
			.div4{background: greenyellow;margin-left: -15px;margin-right: -15px;}
			.div4:after{content: '';display: table;clear: both;}
			.col-1{width: 8.33333333%;float: left;position: relative;border: 1px solid yellow;padding: 0 15px;text-align: center;}
		    .col-6{width: 50%;float: left;border: 1px solid yellow;position: relative;padding: 0 15px;text-align: center;}
		</style>
	</head>
	<body>
		<div class="div1">
			<div class="div2"></div>
		</div>
		<div class="div3">
			<div class="div4">bootstrap</div>
		</div>
		<div class="div3">
			<div class="div4">
				<div class="col-1">1</div>
				<div class="col-1">2</div>
				<div class="col-1">3</div>
				<div class="col-1">4</div>
				<div class="col-1">5</div>
				<div class="col-1">6</div>
				<div class="col-1">7</div>
				<div class="col-1">8</div>
				<div class="col-1">9</div>
				<div class="col-1">10</div>
				<div class="col-1">11</div>
				<div class="col-1">12</div>
			</div>
		</div>
		<div class="div3">
			<div class="div4">
				<div class="col-6">1</div>
				<div class="col-6">1</div>
			</div>
		</div>	
	</body>
</html>