Bootstrap 全局CSS样式：总体注意事项

最新推荐文章于 2022-05-28 12:10:39 发布

汪末末

最新推荐文章于 2022-05-28 12:10:39 发布

阅读量266

点赞数

分类专栏： # Bootstrap 框架文章标签： css css3 html html5 web app

本文链接：https://blog.csdn.net/WangMinGirl/article/details/108286084

版权

Bootstrap 框架专栏收录该内容

44 篇文章 7 订阅

订阅专栏

作者: WangMin
格言: 努力做好自己喜欢的每一件事
CSDN原创文章
博客地址 👉 WangMin

1.HTML5 文档类型

Bootstrap 使用到的某些 HTML 元素和 CSS 属性需要将页面设置为 HTML5 文档类型。如图:
在这里插入图片描述

2.Bootstrap 是移动设备优先的,为了确保适当的绘制和触屏缩放，需要在<head>之中添加 meta标签，其中的name属性值必须是viewport。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>bootstrap</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,
maximum-scale=1, user-scalable=no">
	</head>
	<body>
	</body>
</html>

width=device-width ：表示宽度是设备屏幕的宽度
initial-scale=1.0：表示初始的缩放比例
minimum-scale=0.5：表示最小的缩放比例
maximum-scale=2.0：表示最大的缩放比例
user-scalable=yes/no：表示用户是否可以双指或双击放大
这里的属性值设置根据你的项目情况来定

3.布局容器
Bootstrap 需要为页面内容和栅格系统包裹一个.container容器。bootstrap提供了两个相同作用的类，注意由于padding的原因，这两种容器类不能相互嵌套。
.container类用于固定宽度并支持响应式布局的容器，也就是用媒体查询获得的动态尺寸。
.container-fluid类用于 100% 宽度，占据全部视口（viewport）的容器。

利用简单的例子来说明.container与.container-fluid之间的区别

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>container与container-fluid区别</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=yes">
		<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css"/>
		<script type="text/javascript" src="js/jquery.js"></script>
		<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
	</head>
	<body>
		<div class="container" style="background:red;"><div>container</div></div>
		<div class="container-fluid" style="background:blue"><div>container-fluid</div></div>
	</body>
</html>

1、.container类和container-fluid类的div左右两边有一个15px的padding（内边距）
在这里插入图片描述

2..container类在屏幕宽度小于等于767px的时候，宽度等于屏幕宽度的，也就是100%，.container-fluid类不管屏幕宽度大小，一直是100%屏幕宽767px：
在这里插入图片描述

3、.container类在屏幕宽度小于等于768px的时候div左右出现了外边距margin=9px（左右padding依然是15px），.container-fluid类宽度不管屏幕宽度大小，一直是100%。
在这里插入图片描述

4、.container类在屏幕宽度小于1000px的时候div左右外边距margin一直增大，padding值和子div的宽度不变，屏幕拉大的部分都作用于margin上了。.container-fluid类宽度不管屏幕宽度大小，一直是100%。
在这里插入图片描述

5、.container类在屏幕拉大到1000px的时候，.container类的div左右外边距margin=15px，左右padding=15px。.container-fluid类宽度不管屏幕宽度大小，一直是100%。
在这里插入图片描述

6、屏幕又继续拉大的时候，.container类的div左右外边距margin会随着拉大。.container-fluid类宽度不管屏幕宽度大小，一直是100%。
在这里插入图片描述

根据以上的六个点进行的总结：
（1）.container类出现内边距和外边距，.container-fluid类出现内边距。
（2）.container类左右内边距一直是15px，屏幕小于等于767px的时候没有margin值，屏幕大于767px开始有左右margin值，屏幕宽度为768px和1000px的时候，margin值相对最小，分别是9px和15px，其他时候margin值随着屏幕的增大而增大。.container-fluid类宽度不管屏幕宽度大小，一直是100%。

就先分享到这里!! 😄 后续继续更新!!

汪末末

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap 全局CSS样式：总体注意事项

作者:WangMin格言:努力做好每一件事情CSDN原创文章博客地址 ???? WangMin总体注意事项1.HTML5 文档类型Bootstrap 使用到的某些 HTML 元素和 CSS 属性需要将页面设置为 HTML5 文档类型。如图:2.Bootstrap 是移动设备优先的,为了确保适当的绘制和触屏缩放，需要在<head>之中添加 meta标签，其中的name属性值必须是viewport。<!DOCTYPE html><html> <h
复制链接

扫一扫