信I■与电IB
China Computer&Communication针算机工程龛用就木2021年第4期
Bootstrap框架技术在WEB开发中的应用优势
jquery框架搭建王有铭邵祎啥
(金华职业学院，浙江金华321000)
摘要：随着移动设备技术的不断进步，对WEB开发提出了更高的要求，不仅需要更人性化的设计理念，还需要为用户带来更好的体验.而Bootstrap框架技术是当前最受欢迎、响应最好的Web前端框架之一，可以帮助用户更快、更好地实现一些现代化的界面。基于此，笔者重点WT Bootstrap框架技术在WEB开发中的应用优势。
关键词：移动设备；WEB页面；Bootstrap；前端框架
中图分类号：TP393.09文献标识码：A文章编号：1003-9767(2021)04-031-03
Application Advantages of Bootstrap Framework Technology in Web
Development
WANG Youming,SHAO Yihan
(Jinhua Polytechnic,Jinhua Zhejiang321000,China)
Abstract：With the continuous advancement of mobile device technology,higher requirements are put forward for WEB development,which not only requires a more humane design concept,but also needs to bring a better experience to users.The Bootstrap framework technology is currently one of the most popular,stable and responsive web front-end frameworks,which can help users realize some modern interfaces faster and better.Based on this,the author focused on the application advantages of Bootstrap framework technology in WEB development.
Keywords:mobile device;WEB page;Bootstrap;front end framework
0引言
自2011年以来，Bootstrap经过多次技术优化，深受开发者的青睐，通过使用Bootstrap能够在几分钟内设计一个功能齐全、有吸引力的前端页面，即使是一个只具备HTML和一些css基础知识的初学者也能够轻易上手。
1Bootstrap框架技术概述
Bootstrap拥有详尽的说明文档，已经更新到4.0版本，文件更小，从less切换到sass，重新调整了卡片式UI布局模式，在一定程度上提高了框架的性能。Bootstrap是css、html、javascript等相关知识的融合，借助栅格系统能够省去调试浏览器兼容性的时间，同时开发的网页也可在PC、手机移动设备上正常显示。
2div+css框架技术介绍及缺陷
2.1div+css框架技术
div就像一个容器能够将网页分割成不同的部分，是一项十分复杂且耗时的工作，构建完网页框架后需要用CSS技术对每一模块进行美化。div承载的是内容，而CSS承载的是样式。
2.2div+css框架技术的缺陷
首先，基于div+css框架制作的页面十分复杂，css文件错误将影响整个网站的正常浏览，甚至会造成整个网站崩溃，如果css文件调用出现异常，则需要耗费大量精力修改相应的代码。其次，利用div+css框架技术调试浏览器的兼容性对开发人员要求较高，而利用Bootstrap就能很好地解决该问题。
3Bootstrap在WEB页面开发中的突出优势Bootstrap发布的4.0版本[1]，紧跟最新的WEB技术发展趋势，更新了box-flex布局，能够满足不同用户的需求。随着手机、平板设备的快速发展，为了适应不同设备的显示效果，防止网页在不同浏览器上不能正常显示，响应式的网页开发布局必不可少。利用Bootstrap的栅格系统和响应式布
作者简介：王有铭(1995-)，男，山东烟台人，硕士研究生，助教。研究方向：隐私保护。邵祎皓(1994—)，男，河北秦皇岛人，硕士研究生，助教。研究方向：中国哲学。
信恵与电脑
China Computer&Communication2021年第4期针尊机工程矯用技术
局能很好地解决网页兼容性问题[2'3]，大大减少了开发者的工作量，让开发者有更多的精力着力于美化网页，提升用户的体验。Bootstrap有大量的组件样式，接受定制，规范了名称定义，便于维护。此外，弓IM Bootstrap也是十分方便的，可以事先将文件下载到本地文件夹中，也可以直接引用网络数据库中的bootstrap文件。
3.1响应式的栅格系统
响应式开发的核心是媒体查询，基于Bootstrap可以快速整合一个网站的基本布局。Bootstrap搭好了响
应式的基础框架，并且非常容易修改。对于初学者，利用Bootstrap框架可以在非常短的时间内熟悉响应式设计。对页面进行布局时，往往需要一个合适的网格，可以根据需要改变行数与间隔大小。Bootstrap拥有一个响应快速的Grid系统，并且在手机端通用，具有使用简单、灵活的优势，可以根据当前屏幕大小自动调整图像大小[4'8]o栅格系统能够使得网页布局更加合理，当前主要有3种布局方式。
3.1.1创建等宽显示列
在利用Bootstrap框架技术创建等宽显示列时，bootstrap 会自动调整布局，当拖动浏览器页面时，bootstrap会自动适应窗口，使得每一栅格等比例扩大或缩小，等宽显示列显示结果如图1所示。相应代码及运行结果如下：
<div class=”container-fluid^^>
<div class=”row”>
<div class="col”col”>栅格2</div>
<div class=”col”style=H background-color:blue;n>栅格3</div>
</div>
</div>
栅格1■栅格2
图1等宽显示列显示结果
3.1.2创建等宽响应式列
Bootstrap也可以创建等宽度的响应式列，当使用移动设备时（即宽度v576px），预先创建的横排四列会变成上下对叠排列形式。等宽响应式列显示结果如图2所示。在利用Bootstrap框架技术时不必再针对不同设备修改代码，只需要运行如下代码：
<div class=”container-fluid”>
<div class=”row”>
<div class=”col-sm-3w style=n background-color:pink;n>内容lv/div>
<div class=n col-sm-3">内容2</div>
<div class=n col-sm-3"style=n background­color:lavender;">内容3</div>
<div class=^^col-sm-3style=”background­color:lavenderblush;">内容4</div>
</div>
</div>
内容1内容2内容3内容4
内容1
内容2
内容3
内容4
图2等宽响应式列显示结果
3.1.3不等宽响应式列
上述均为等宽度设置页面，bootstrap框架技术也提供了不同宽度显示的技术，只需要利用栅格系统按照需求更改数值即可调整显示比例，例如下列代码总共12等分，只需要更改col-sm-8中的数值即可：
<div class=”container-fluid n>
<div class=^^row”>
<div class="col-sm-4">左</div>
<div class="col-sm-8n style=n background-color:red;n>右</div>
</div>
</div>
3.2丰富的组件及第三方插件
JavaScript插件为Bootstrap中的组件注入了“血液”。Bootstrap提供了丰富的HTML组件和Javascript组件，根据这些组件可以快速搭建一个漂亮、功能完备的网站。比如：下拉菜单、按钮组、按钮下拉菜单、导航、导航条、路径导航、分页、排版、缩略图、警告对话框、进度条和媒体对象等。链接、按
钮、提醒都有统一的视觉效果，为不同级别的提醒，并且代码简洁，易于修改，有利于提升工作效率。以轮播功能为例，Bootstrap框架技术可以用更简便的代码实现轮播图功能，对于初学者来说创建轮播图绝对是一项复杂的工作，而在Bootstrap中可以直接复制使用，只需要将代码中的图片部分修改为所需图片即可，且只需要理解一些轮播的基本功能代码即可，运行结果如图3所示。
图3轮播效果图
Font Awesome是围绕Bootstrap开发的插件，拥有丰富
値■与电厢
China Computer&Communication针算机工程龛用就木2021年第4期
的icon可供选择。icon font完全不必担心分辨率的问题，因为它并不是图标而是字体。Bootstrap包含大量的第三方插件、主题、功能特性、代码等，包含十几个自定义的jQuery插件。JavaScript拥有丰富的插件，既可以用现成的也可以自己扩充W
3.3可定制化
Bootstrap可以覆盖所有默认的CSS和JavaScript行为，从而能够让开发者流畅地制作新的Bootstrap模板。Bootstrap 采用了大量流行的CSS3功能，要素排版利落大方，可以为所有的网站提供统一的浏览体验。
3.4提升开发效率
网页开发者利用Bootstrap框架技术只需要将一些HTML插入Bootstrap的模板，无须花费大量的时间编写复杂的CSS和JavaScripto此外，Bootstrap能够兼容所有的浏览器，所有组件都是响应式的。
4结语
Bootstrap的代码封装在一个文件夹中，使初学者也可快速搭建WEB网页框架，并且丰富的组件也可以
让用户获得更好的体验，使网页布局更加美观。Bootstrap拥有强大的栅格系统，不仅可以有效提高开发速率，还可以跨平台、跨设备进行操作，无须考虑网页兼容性问题。随着平板电脑、手机等移动设备的快速发展，响应式的网页布局将成为未来主流的方案，Bootstrap框架技术在Web中的应用将更加广泛。
参考文献
[1]陶瑜,GuXiangPing.基于Bootstrap4的网站前端响应式设
计[J]，中国新通信,2020,22(17):53-54.
[2]张晶晶，曹双双，杨怡洁，等.基于Bootstrap框架的响应
式网站设计[J].电脑知识与技术,2020,16(34):247-24& [3]傅翠玉，王少茹，洪秀金.Bootstrap框架在响应式WEB开
发中的应用[J].电脑知识与技术,2018,14(21):85-86. [4]钟叶.Bootstrap框架在响应式Web开发中的应用与研究[J].
科技广场,2017(2):62.
[5]潘惠苹.Bootstrap技术在Web移动开发中的应用研究[J],
计算机时代,2019(5):27-29.
[6]王莉.Bootstrap在Web开发中的应用与研究[J]，数码世
界,2019,169(11):40.
[7]丁莲，张玲，杜巍.基于Bootstrap的WEB前端开发应用
研究[J].电子制作,2016(20):43.
[8]彭芳.从时代技术演化角度看1+xWeb前端证书与Web框
架技术的深度联系[J].信息记录材料,2020⑺:1&
[9]张永福.Web前端开发中性能优化方案设计探讨[J].信息
系统工程,2020(11):31-32.
[10]孙萍.基于Bootstrap的响应式设计在WEB图书馆中的
应用[J].内蒙古科技与经济,2017(20):62-64.

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。