Bootstrap（一）

最新推荐文章于 2022-06-03 23:12:10 发布

anran_1211

最新推荐文章于 2022-06-03 23:12:10 发布

阅读量237

点赞数

分类专栏： Bootstrap 文章标签： bootstrap 响应式

本文链接：https://blog.csdn.net/anran_1211/article/details/75096123

版权

Bootstrap 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

Bootstrap：移动优先，响应式布局开发

Bootstrap资源：http://getbootstrap.com/ 官方网站

https://github.com/twbs github的主页

http://www.bootcss.com/ 中文网

.container-fluid(流体)：容器的宽度不是固定的，但是左右有padding值，分别为15px；

.container（固定）：是有固定宽的，同时也有左右的padding值，分别为15px；

当屏幕的宽度 ≥ 1200px 固定宽为1170px； col-lg-*：超大屏幕

当屏幕的宽度≥ 992px 固定宽为970px； col-md-*：中等屏幕

当屏幕的宽度≥ 768px 固定宽为750px； col-sm-*：iPad屏幕

当屏幕的宽度 < 768px 自适应最大宽度，效果和.container-fluid一样； col-xs-*：手机屏幕

一个页面中，可以有多个容器，但是不可以出现嵌套关系

如果想要容器，不管在任何浏览器窗口下，都是固定宽度，可以写成：.container-fluid，.container{width：固定宽px !important；}

栅格化：col：列 row：行

col-*-13：视为col-*-12；

<div class="row">
	<div class="col-lg-6">col-lg-6</div>             当屏幕的窗口小于1200px的时候，这两个div垂直排列
	<div class="col-lg-6">col-lg-6</div>
</div>

<div class="row">
	<div class="col-md-6">col-lg-6</div>            当屏幕的窗口小于992px的时候，这两个div垂直排列
	<div class="col-md-6">col-lg-6</div>
</div>

<div class="row">
	<div class="col-sm-6">col-lg-6</div>            当屏幕的窗口下雨768px的时候，这两个div垂直排列
	<div class="col-sm-6">col-lg-6</div>
</div>

<div class="row">
	<div class="col-xs-6">col-lg-6</div>            无论屏幕的大小为多少，这两个div永远是在同一行，水平排列
	<div class="col-xs-6">col-lg-6</div>
</div>

栅格的组合模式

当屏幕大于1200px时，水平方向显示四个div；

当屏幕小于1200px但大于992px时，水平方向会显示三个div，第四个div会排列到第二行；

当屏幕小于992但大于768px时，水平方向会显示两个div，第三、四个div会排列到第二行；

当屏幕小于768px时，水平方向只显示一个div，剩下的div每行也只显示一个；

<div class="row">
	<div class="col-lg-3 col-md-4 col-sm-6">col-lg-3 col-md-4 col-sm-6</div>
	<div class="col-lg-3 col-md-4 col-sm-6">col-lg-3 col-md-4 col-sm-6</div>
	<div class="col-lg-3 col-md-4 col-sm-6">col-lg-3 col-md-4 col-sm-6</div>
	<div class="col-lg-3 col-md-4 col-sm-6">col-lg-3 col-md-4 col-sm-6</div>
</div>

<div class="container">
	<div class="row">
	      <div class="col-lg-3 col-md-4 col-sm-6">
			<div class="thumbnail">                    //thumbnail是缩略图的意思，要配合caption使用
				<img src="img/codeguide.png">
				<div class="caption">             //caption
					<h3>Bootstrap 编码规范</h3>
					<p>by @mdo</p>
					<p>Bootstrap 编码规范：编写灵活、稳定、高质量的 HTML 和 CSS 代码的规范。</p>
				</div>
			</div>
		</div>
				<div class="col-lg-3 col-md-4 col-sm-6">
					<div class="thumbnail">
						<img src="img/codeguide.png">
						<div class="caption">
							<h3>Bootstrap 编码规范</h3>
							<p>by @mdo</p>
							<p>Bootstrap 编码规范：编写灵活、稳定、高质量的 HTML 和 CSS 代码的规范。</p>
						</div>
					</div>
				</div>
				<div class="col-lg-3 col-md-4 col-sm-6">
					<div class="thumbnail">
						<img src="img/codeguide.png">
						<div class="caption">
							<h3>Bootstrap 编码规范</h3>
							<p>by @mdo</p>
							<p>Bootstrap 编码规范：编写灵活、稳定、高质量的 HTML 和 CSS 代码的规范。</p>
						</div>
					</div>
				</div>
				<div class="col-lg-3 col-md-4 col-sm-6">
					<div class="thumbnail">
						<img src="img/codeguide.png">
						<div class="caption">
							<h3>Bootstrap 编码规范</h3>
							<p>by @mdo</p>
							<p>Bootstrap 编码规范：编写灵活、稳定、高质量的 HTML 和 CSS 代码的规范。</p>
						</div>
					</div>
				</div>
			</div>
		</div>

col-*-offset：列偏移，列偏移的范围也是1-12个网格，当col-*-offset-12时，会完全偏离正常的12个网格；

如果col-*-offset-13，则不起任何作用，视为没有偏移。

col-*-push-：向后面添加

col-*-pull-：向前面添加

第一行：col-lg-2（占两个网格）col-lg-10（占十个网格）

第二行：col-lg-10（因为向前添加两个网格）col-lg-2（因为向后天剑10个网格）

<div class="row">
	<div class="col-lg-2">col-lg-2</div>
	<div class="col-lg-10">col-lg-10</div>
</div>
<div class="row">
	<div class="col-lg-2 col-lg-push-10">col-lg-2</div>
	<div class="col-lg-10 col-lg-pull-2">col-lg-10</div>
</div>

col-*-push-* / col-*-pull-* 和col-*-offset-*区别：

前两个一个是向后偏移，一个是向前偏移，当排序与一行内的元素和加起来大于12网格时，排序元素仍会在同一行，例如：

<div class="row">
	<div class="col-lg-4">col-lg-4</div>
	<div class="col-lg-5 col-lg-push-6">col-lg-5</div>
</div>

而第三个只能向右偏移，而且当偏移值与一行内的元素和加起来大于12网格时，偏移元素会从第二行开始偏移，偏移值为col-lg-offset-6，例如：

<div class="row">
	<div class="col-lg-4">col-lg-4</div>
	<div class="col-lg-5 col-lg-offset-6">col-lg-5</div>
</div>

嵌套关系：

子元素会按照父级的网格数，重新划分12份，来分配各自所占的网格数

<div class="row">
	<div class="col-lg-8">
		col-lg-8
		<div class="row">
			<div class="col-lg-4">col-lg-4</div>
			<div class="col-lg-4">col-lg-4</div>
			<div class="col-lg-4">col-lg-4</div>
		</div>
	</div>
</div>

正常情况下，每个div是按照float的方式来排列的（清除浮动以后，最后一个div会从第二行的开始）

<div class="row">
	<div class="col-lg-6">
		col-lg-6col-lg-6col-lg-6col-lg-6col-lg-6col-lg-6col-lg-6col-lg-6col-lg-6col-lg-6col-lg-6col-lg-6col-lg-6col-lg-6col-lg-6col-lg-6col-lg-6col-lg-6col-lg-6col-lg-6col-lg-6col-lg-6col-lg-6col-lg-6col-lg-6col-lg-6col-lg-6col-lg-6col-lg-6col-lg-6col-lg-6col-lg-6col-lg-6
	</div>
	<div class="col-lg-3">col-lg-3</div>
	<div class="col-lg-3">col-lg-3</div>
      （<div class="clearfix"></div>  //清除浮动）<div class="col-lg-3">col-lg-3</div>
</div>