Bootstrap栅格系统理解

最新推荐文章于 2021-09-15 19:45:57 发布

小k铁柱

最新推荐文章于 2021-09-15 19:45:57 发布

阅读量518

点赞数

分类专栏： Bootstrap 文章标签： css html javascript jquery

本文链接：https://blog.csdn.net/qq_40890601/article/details/106435534

版权

Bootstrap布局容器

由于Boostrap全部依赖于jQuery, 所以在引入Bootstrap 的js文件之前一定要先引入 Jquery。
这篇文章的目的主要是记录自己对boostrap栅格的理解。
视频教程推荐HTML中文网，最全最详细的资料还是在Bootstrap官网
三个特点：

必须使用HTML5的文档类型；

<!DOCTYPE html>
<html>
...
</html>

移动设备优先；
布局容器；

container 和 container-fluid 不能嵌套。
检测container和container-fluid的区别：
container-fluid 默认占满全屏，而container则边距更大，只有在xs下才会占满全屏。一般使用container的情况更多。
在这里插入图片描述

栅格系统

行 row必须包含在布局容器（container 或 container-fluid）里，列包含在row里。
首先得明白这个lg，md，sm，xs它们是宽度界限。
在这里插入图片描述
这里有个比较重要的点就是如何确定我们应该使用lg,md,sm或者xs去布局呢，看上图的栅格系统行为，这个小格子开始是堆叠在一起的（xs的时候默认全是堆叠在一起的），当大于这些阈值时就会变为水平排列，举个例子。以下是我定义的一个水平表单（horizontal-form 只能在Bootstrap 3中定义），我使用的是md，那么大于md的lg上这个表单也是水平排列的，而小于md的sm和xs就是堆叠在一起的。如下。

<!DOCTYPE html>
<html>
	<head>
		<meta

最低0.47元/天解锁文章

小k铁柱

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap栅格系统理解

Bootstrap布局容器必须使用HTML5的文档类型；<!DOCTYPE html><html>...</html>移动设备优先；布局容器；container 和 container-fluid 不能嵌套。栅格系统行 row必须包含在布局容器（container 或 container-fluid）里，列包含在row里。...
复制链接

扫一扫