浅谈Bootstrap自适应功能在Web开发中的应用
2020-03-05 00:47
495 查看
随着移动端市场的强势崛起,web的开发也变得愈发复杂,对于个体开发者来说,自己开发的网站,在电脑、手机、Pad等上面都要有正常的显示以及良好的用户体验。如果每次都要自己去调整网页去匹配各个不同的客户端设备,这个工作量可想而知。如果网站可以自适应浏览器大小,对于开发者来说,无疑是天大的福音。今天,我通过自己的实践,简单的探探boostrap的自适应功能,这也是众多平台中,我认为比较好的一个。
Boostrap是什么 Bootstrap是基于HTML5和CSS3开发的,它在jQuery的基础上进行了更为个性化和人性化的完善,形成一套自己独有的网站风格,并兼容大部分jQuery插件。通俗一点讲,他就是一个集合样式与js的开源包,我们加载Boostrap包,通过class调用里面提供的类名,产生自己想要的样式或者效果。如果大家想要系统的学一学Boostrap的话,可以百度一下,说实话,用熟了之后,开发速度真的事半功倍,咻咻咻的。 Boostrap的“栅栏”模式 Boostrap自适应功能的基础就是“栅栏"模式,它是将浏览器以行列形式去划分:一共12列,行数自定义,根据你所要显示的元素,确定每个元素显示的大小即需要的列数,如果超过范围,就会自动转行。每列的大小是Boostrap根据当前浏览器的大小自动平均分配。举个例子,看下图: 第一张图是浏览器显示效果,第二张图是设计图,这个意思就是在一行中显示三个标签元素,上面提到,不管浏览器大小如何,都将其分成12列,所以一共3个column,那每个column占4列,当浏览器大小发生变化时,每列的宽度发生变化,但元素所占的列数是不变的,说的比较啰嗦笼统,想研究的朋友可以去官网学习下,我自己前段时间开发的一个网站:神巴巴星座网,前端的架构全部采用了Boostrap栅栏模式,大家也可以通过开发工具看看前端源码。 Boostrap的自适应功能 其实理解栅栏模式之后,自适应功能就简单很多了,根据浏览器的大小,Boostrap有四种栅栏类名提供使用,用法与Css样式表类名选择器样式调用是一样的: xs:col-xs-1 ~ col-xs-12,多列始终在一行内。 sm:col-sm-1 ~ col-sm-12,多列在浏览器像素宽度大于等于768px时才在一行内。 md:col-md-1 ~ col-md-12,多列在浏览器像素宽度大于等于992px时才在一行内。 lg:col-lg-1 ~ col-lg-12,多列在浏览器像素宽度大于等于1200px时才在一行内。 我贴一段伪代码: <div class="row"><div class="col-sm-4 col-md-1"></div>
<div class="col-sm-4 col-md-1"></div> <div class="col-sm-4 col-md-10"></div>
</div> 这段的意思是当浏览器的宽度在768——992之间时,采取4:4:4的模式呈现,当浏览器宽度大于992时,就按1:1:10的模式呈现。当然你也可以四种都是用,细分的在仔细点,不管怎么样,Boostrap会根据浏览器的宽度自动分配列宽度,从而匹配你所想要的呈现模式。至于它怎么做到的,你不用关心,你只需要考虑你在手机上的网页呈现样式,或者PC上的呈现样式的设计就行了,接下来,就交给Boostrap吧。 总结:Boostrap的使用能够极大的增加网站开发的效率,自适应的功能,又极大的减轻了后期代码的维护,想象一下,PC端的网站维护,移动端还有另一个版本的维护,实际项目就参考我前段时间开发的网站吧(百度:神巴巴星座网),就不打链接了,省的被K,我是侧重移动端的网页,所以PC端显示不咋地,就到这了,希望大家互相学习。
转载于:https://www.cnblogs.com/shen88/p/5776220.html
- 点赞
- 收藏
- 分享
- 文章举报
相关文章推荐
- 关于web开发中的开关功能------layui和bootstrap两种开关
- HDFS 在Web程序的相册功能开发中的应用
- 在web开发应用中实现带有分页,导出及打印功能的实例(jasper报表开发)
- 基于SSM框架的web应用登录功能开发笔记
- 开发整理-Javaweb应用的系统升级功能
- 浅谈移动开发中Web应用和Native应用优劣(PhoneGap——Web工程师开发移动Native应用的福音)
- 闭关纪要3.C#的结构化存储功能以及在Web开发之中的应用
- 学习使用J2EE Web应用的事件功能-Java基础-Java-编程开发
- 基于SSM框架的web应用分页功能实现的开发笔记
- 基于SSM框架的web应用权限管理功能开发笔记
- Java Web开发应用架构浅谈
- Yeoman:Web 应用开发流程与工具—AngularJS—Bootstrap—js
- Vaadin - 来自北欧的 Web 应用开发利器,第 2 部分: Vaadin 的体系结构和功能扩展
- C#开发微信门户及应用(46)-基于Bootstrap的微信门户应用管理系统功能介绍
- #Servlet(1)扩展web服务器功能,安装Tomcat,使用Eclipse来开发一个servlet,Servlet是如何运行的,常见的错误
- 浅谈 Sencha 2.0 中image和carousel的图片自适应大小的应用
- 微信开发之移动手机WEB页面(HTML5)Javascript实现一键拨号及短信发送功能
- 转:web应用开发的发展方向
- Web应用软件功能测试
- 多线程 —— 多线程在WEB开发中的应用相关问题