Bootstrap3与Bootstrap4的对比

最新推荐文章于 2025-05-13 11:49:25 发布

原创最新推荐文章于 2025-05-13 11:49:25 发布 · 1.6k 阅读

0 ·

CC 4.0 BY-SA版权

本文对比了Bootstrap3和Bootstrap4的主要区别，包括栅格系统、编写语言、单位使用、布局方式及新增特性等，深入解析了两个版本在响应式设计上的不同策略。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、Bootstrap3

			<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
			1.	Bootstrap3有4种栅格；
					特小（col-xs-） 适配手机(<768px)
					小（col-sm-） 适配平板(≥768px)
					中（col-md-） 适配电脑(≥992px)
					大（col-lg-） 适配宽屏电脑(≥1200px)
			2.使用Less编写；
			3.使用px为单位；
			4.使用push和pull向左右移动；
			5.使用float的布局方式。

二、Bootstrap4

		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		1.Bootstrap4有5种栅格
					特小（col-）(<576px)
					小（col-sm-）(≥576px)
					中（col-md-）(≥768px)
					大（col-lg-） (≥992px)
					特大（col-xl-）（≥1200px）
		2.使用Sass编写；
		3.使用rem和em为单位（除部分margin和padding使用px)；
		4.偏移列通过offset-类设置;
		5.选择弹性盒模型（flexbox）；
		6.响应式容器是Bootstrap v4.4中的新增功能；
		7.新增的网格层适配移动端；
		8.全面引入ES6新特性;
		9.放弃对IE8的支持