响应式布局与bootstrap学习（7th）

山雀~

已于 2022-09-23 17:53:57 修改

阅读量1.5k

点赞数

文章标签： bootstrap

于 2022-09-23 17:52:00 首次发布

本文链接：https://blog.csdn.net/weixin_55608297/article/details/127013866

版权

这篇笔记记录bootstrap的学习

Bootstrap是一款可以做响应式布局的框架，它可以让开发者写非常少的代码实现多终端的页面适配，不仅可以为我们解决低端浏览器的不兼容css3的问题，还可以为我们解决不同分辨率的设备上面网页布局的展示。它提供了很多样式供我们选择。

什么是响应式布局
让一个网站兼容不同分辨率的设备；
给用户更好的视觉使用体验。

优点：解决了设备之间的差异化展示（让不同的设备达到最优的体验）
**缺点：**对开发者来说，兼容性代码多，工作量大，对浏览器来说，加载速度受影响；
对原有的网站布局会产生影响，浏览器的用户判断未必精准，比如：在pc端浏览网站时，chorme浏览器缩小窗口,这个网站可能会突然变移动端的样式。

响应式开发原理

实际上是通过媒体查询，针对不同的宽度的设备进行布局和样式的设置。从而达到适配不同设备的目的。
在这里插入图片描述
需要一个父级作为布局容器，来配合子级元素来实现变化效果。
原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排布方式和大小，从而实现在不同屏幕下，看到的不同的页面布局和样式变化。
在这里插入图片描述
使用媒体查询

<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<style type="text/css">
			.container{
				height: 150px;
				background-color: pink;
				margin: 0 auto;
				
			}
			/* 一,超小屏幕下 ,768px下 */
			@media  screen and (max-width:767px){
				.container{
					width:100%;
				}
				
			}
			/* 二,小屏幕下，大于768 */
			@media  screen and (min-width:768px){
				
				.container{
					width:750px;
					}
			}
			/* s三,中屏幕下，大于992 */
			@media  screen and (min-width:992px){
				.container{
				width:970px;
				}
			}
			/* 四,大屏幕下，大于1200 */
			@media  screen and (min-width:1200px){
				.container{
				width:1170px;
				}
			}
			
		</style>
	</head>

	<body>
		<!-- 响应式开发里面，首先需要一个布局容器 -->
		<div class="container"></div>
	</body>

</html>

Bootstrap的样式主要设置在对应名字的class里面，而我们想修改它的样式，就再命名一个类名，利用层叠样式表权重大的覆盖权重低的样式就可以了，也就是说，基本样式利用bootstrap来设置，然后想修改成啥样自己定义。就免去了程序员设置基础样式的大量工作，缺点也有，就是你修改覆盖后，bootstrap里面其实会存在很多被覆盖的无效的样式代码

Bootstrap的布局容器

Bootstrap需要为页面内容和栅格系统包裹一个.container容器，Boostrap预先定义好了这个类，就叫做**.container**
在这里插入图片描述
也就是说，当我们引入Bootstrap之后，定义好.container之后，它就已经帮我们把媒体查询的多个挡位都写好了！宽度都订好了，只要直接用就行。

Bootstrap栅格系统

把容器划分为12等份，当屏幕尺寸变化时，对应的布局容器发生变化，于是划分的12等分亦随之变化。
在这里插入图片描述

编辑多个类名小技巧：alt 加滚轮中心竖着选内容

<div class="container">
        <div class="row">
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">1</div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">2</div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">3</div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">4</div>
        </div>
</div>

Bootstrap栅格系统可以进行列嵌套
也就是说，其中的一个栅格，又可以划分为12个栅格。当然，再划分之前，需要添加一次class=row。把那个padding取消掉！且高度自动和父元素一致。

<div class="container">
			<div class="row" >
				<div class="col-lg-4">
					<div class="row">
						<div class="col-lg-2" style="background: green;">2</div>
						<div class="col-lg-2" style="background: green;">2</div>
						<div class="col-lg-2" style="background: green;">2</div>
						<div class="col-lg-4" style="background: green;">3</div>
						<div class="col-lg-2" style="background: green;">2</div>
					</div>
				</div>
					
				<div class="col-lg-4 ">4</div>
				<div class="col-lg-4 ">4</div>
			</div>
		</div>

栅格系统的列偏移
在这里插入图片描述

		<div class="container">
			<div class="row" >
				<div class="col-lg-3">左侧</div>
				<div class="col-lg-3 col-md-offset-6">右侧</div>
			</div>
		</div>

栅格系统的列排序
在这里插入图片描述

<div class="container">
			<div class="row" >
				<div class="col-lg-3 col-md-push-9">左侧</div>
				<div class="col-lg-3 col-md-offset-6 col-md-pull-9">右侧</div>
			</div>
		</div>

栅格系统的响应式工具

当屏幕尺寸缩小时，有时候我们需要的不是换行，而是直接不显示某些元素。这时候就需要用到bootstrap的显示隐藏功能
在这里插入图片描述

<div class="container">
			<div class="row" >
				<div class="col-xs-3">1</div>
				<div class="col-xs-3">2</div>
				<div class="col-xs-3 hidden-md">3</div>
				<div class="col-xs-3">4</div>
			</div>
		</div>