基于Bootstrap的web开发设计研究

马立丰　刘文辉

摘 要：Web 平台前端开发设计是现下计算机领域的重要组成部分，有效进行 Web 平台前端开发设计，不但能够充分发挥互联网的优势，在借助互联网的基础上搭建一个良好的平台，而且也能够服务多方领域，从而促进多个方面得到良好的进步与发展。需要注意的是，在 Web 平台前端开发设计过程中，涉及的领域、知识点是涵盖多个方面，因此，为了实现 Web 平台前端开展良好的开发设计活动，本论文从不同方面阐述基于Bootstrap的web开发设计研究，希望为研究web开发设计的专家和学者提供理论参考依据。

关键词：Bootstrap；web开发设计；分析

Web 前端开发技术广泛应用于网页制作中，是网页制作的重要技术手段。随着网页制作水平的不断提高及技术的演变，网页开始开始由静态内容显示，逐渐转变为动态内容显示，Web 前端开发技术类型越来越丰富。如：Ajax带来了无刷新数据交互，缩减了网页跳转次数，提高了 Web前端应用性能，使单个页面能完成更多功能。而且 HTML5越来越成熟，JavaScript 应用度越来越高。但 Web 前端开发对代码质量要求越来越高，所以具体开发中应做好优化工作，科学调整相关参数，以缩短页面响应时间，提高运行效率。

1 Bootstrap的基本内涵

Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking News都使用了该项目。 国内一些移动开发者较为熟悉的框架，如WeX5前端开源框架等，也是基于Bootstrap源码进行性能优化而来。

2 Web 平台的相关论点探讨

2.1合理控制文件大小

文件大小不仅会影响加载速度，更重要的是会影响网页响应速度及互动性能。若控件文件过大或样式过多，必然导致响应速度变慢，造成网页延迟过长，甚至导致网页崩溃，出现无响应现象。因此，要合理控制文件大小，不仅要压缩 JavaScript，且要去除一些多余 html 标签，通过对 CSS 文件和代码的优化提升运行速度，避免内联式样式，使 CSS 文件能快速加载，使部分页面内容能立即呈现给用户，解决以往传统技术条件下，页面长时间空白的问题，从而增强用户体验，使页面加载合情合理。

2.2代码优化用来保障传输

优化主要包括二个方面：第一是减少数据的传输量，第二是减少数据的传输频率，做好这二个方面，就可以达到提高网页加载速度，降低服务器占用资源，提高网络带宽使用率等目的。实现优化传输，我们需要减少空白区域，精简CSS和JS。空格、制表符、换行符、注释都可以安全删除。使用最短格式的颜色表示，比如表示红色，我们是使用#FF0000、red还是#F00呢？我想读者自然会知道。除去“垃级”标签，并对CSS代码进行有效合并、减少或删除重复，比如：p{font-size：16px；font-family：Arial；line-height：22px；font-weight：bold；}，可以改写为p{font：bold 16/22px；Arial；}。网站不少的导航、表格确认和其它各式各样的特效都用JS来实现，而JS往往都非常笨重，除了注释，其它所有的//or/**/注释都可以安全删除，除去JS空白区域并优化代码，如二行的x=x+1和y=y+1，加上分号后可以写在一行，而x=x+1，又可以写成x++。重命名用户自定交的变量和函数也可以给代码带来显著改善。

3 Web 平台前端开发设计与实现

3.1立足 Java EE 的框架，开展一系列设计工作

Web 平台前端开发设计的实现，需要采用静态页面技术、动态页面技术中的 JSP 技术、Ajax 技术等，并且建立在 Java EE 的框架基础之上，促使网页前端主要由客服人员和系统管理人员统一管理，并作为信息服务平台的前端界面，以此来促进 Web平台前端开发设计得到良好实现。具体来讲，主要体现在以下几个方面：第一，安装和配置 Java 虚拟环境。由于 Java 是一种高级语言，因此，在 Java 虚拟环境的基础上为上层的应用提供丰富的库，以此来做好接口进行运行。第二，在安装和配置 Java 虚拟环境之后，开始安装 Tomcat。Tomcat 的配置需要建立在系统环境之下，完成配置之后，启动 Tomcat，看到欢迎界面之后，就说明安装成功，之后建立 JSP app 的目录。需要注意的是在 Tomcat 的安装目录之下有 WEBAPPS 目录，在 WEBAPPS 目录下新建一个目录，起名叫 MYAPP，并在该目录下再新建一个目录 WEB-INF，在下新建 JSP 文件的基础上写上代码，就可以开始页面编程工作。第三，在 Web 平台前端开发设计过程中，由于 MYSQL 是一款经典的数据库，具有免费、功能齐全等方面的特点，在这一数据库之中新建一个 MySQL-data 目录，完成后再新建一个 my.ini的文件，以此来充分发挥这一数据库的功能。第四，还需要建立JSP 页面与 MYSQL 数据库的联系。

3.2提高工作人员工作能力，合理使用 Ajax 技术

为了实现 Web 平台前端开发设计工作，还可以采取以下几个方面的措施：第一，任何一项工作的开展都需要相对应的工作人员参与其中。由此可见，工作人员工作能力的高低，在很大程度上影响一项工作的开展质量。相对应的 Web 平台前端开发设计工作在开展过程中，无论是设计还是开发，都需要充分调动工作人员的作用，才能在此基础上实现 Web 平台前端进行有效的开发设计。但是在实际发展中，在 Web 平台前端开发设计工作中，有关于工作人员方面还存在着工作能力不高、素质不强等方面的问题，这些问题的存在，在很大程度上影响 Web 平台前端开发设计工作得到有效落实，因此，充分发挥工作人员的工作能力是具有重要的作用。而提高工作人员的工作能力，可以采取两个方面的措施，一方面是在对外的招聘环节中，要尽量避免因为人情、关系等原因，在公平的基础上合理的筛选前来应聘的计算机人员；另一方面是在对内的人员管理中，多组织一些培训活动，如业务培训班，不仅进行有针对性的计算机操作方面培训，而且也要进行计算机知识方面的培训，以此来提高计算机人员的实际能力，从而促进整体的进步与发展。第二，合理应用 Ajax技术。

参考文献

[1]以工作过程为导向的《大前端开发》课程规划与设计[J].刘磊.现代计算机（专业版）.2015（33）

[2]统一前端抵御威胁[J].每周电脑报.2004（41）

[3]高校校园网前端技术的研究与探索[J].易昌华.价值工程.2010（02）

[4]浅析Web前端开发技术[J].闫志英.无線互联科技.2016（02）