Bootstrap前端开发实例｜根据宽度变化响应式排列图像 Bootstrap是Twitter开发的一套Web前

文章图片
Bootstrap是Twitter开发的一套Web前端框架， Bootstrap可以简单地理解为：对CSS的再次封装，因此在大多数情况下，对Bootstrap的应用就是对该框架的相关调用。
本系列所有Bootstrap代码基于Bootstrap4.3.1实现，在IntelliJIDEA2019.2.3环境中编写完成，在最新版的“搜狗高速浏览器”和“GoogleChrome浏览器”上测试成功，因此建议读者在上述环境或条件下使用源代码。所有源代码不需要下载Bootstrap的其他文件，在使用时保持网络畅通即可。此外，本系列实例推文需要读者有一定的HTML、CSS和Java的基础知识。
下面这个实例演示了根据宽度变化响应式排列图像。
01
【Bootstrap前端开发实例｜根据宽度变化响应式排列图像】实例功能
此实例主要通过使用float-sm-right类，实现根据不同的屏幕宽度以响应式规则排列图像的效果。当在浏览器中显示页面时，如果当前是小屏幕，则魔兽图像放置在屏幕左侧，如图1所示。

文章图片
■图1
如果当前不是小屏幕(大于小屏幕，即屏幕宽度大于576px) ，则魔兽图像放置在屏幕左右两侧，如图2所示。

文章图片
■图2
02
实现代码
在上面这段代码中， float-sm-right类表示在大于小屏幕尺寸(屏幕宽度576px)时元素(图像)靠右浮动，其他相关类分别是：float-md-right表示在大于中等屏幕尺寸(屏幕宽度768px)时元素靠右浮动， float-lg-right表示在大于大屏幕尺寸(屏幕宽度992px)时元素靠右浮动， float-xl-right表示在大于超大屏幕尺寸(屏幕宽度1200px)时元素靠右浮动。
此实例的源文件是MyCode＼ChapB＼ChapB121.html 。
03
源代码下载
关注微信公众号，后台回复关键词“Bootstrap代码031”即可获得完整源代码。
*在测试代码时，必须保持网络畅通。
04
参考图书
《Bootstrap+Vue.js前端开发超实用代码集锦》
ISBN：978-7-302-56815-5
罗帅罗斌编著
定价：99.8元
扫码优惠购书返回搜狐，查看更多
责任编辑：