Bootstrap4在响应式网站制作中的应用研究

ISSN1009-3044ComputerKnowledgeandTechnology第17卷第13期(2021年5月)电脑知识与技术Vol.17,No.13May2021E-mail：*************.cnComputerKnowledgeandTechnology电脑知识与技术http：//：+86-551-6569Bootstrap4在响应式网站制作中的应用研究马宁宁（国家图书馆，北京100081）摘要：移动互联网时代，构建响应式跨平台的网站前端已成为大势所趋。Bootstrap基于HTML5、CSS3和JS开发，因其灵活的响应式栅格系统、丰富而强大的组件和插件成为当前最流行的前端开发框架。该文对其最流行的版本Bootstrap4进行了详细介绍，希望能为Web开发者提供借鉴和参考。关键词：网站前端制作；Bootstrap；响应式网站中图分类号：G252文献标识码：A开放科学（资源服务）标识码（OSID）：文章编号：1009-3044(2021)13-0241-031背景随着手机、PAD等移动设备的普及，我们已进入移动互联网时代。人们获取信息的方式也不再局限于从PC端访问，越来越多的依赖于移动设备。然而移动终端设备的屏幕尺寸大小迥异，浏览器也各不相同，面对多尺寸、多平台的访问需求，构建响应式跨平台的网站前端业已成为大势所趋[1]。响应式网页设计(ResponsiveWebdesign)理念由EthanMar⁃cotte于2010年提出，利用流式布局、媒体查询、弹性图片、弹性盒子布局等技术[1]，只开发一套代码，即可兼容各种终端设备，[2]不用为每个终端分别开发一套代码。响应式网页设计能根据不同的用户终端设备（如：计算机、笔记本、PAD、手机等），自动[3]切换图片尺寸、菜单布局和内容显示方式等，呈现不同的显示效果以适应不同设备，为用户带来良好的体验，也减少了管理者的后期维护工作。Bootstrap作为当前网站前端设计的主流框架，本文将对其进行深入探讨。于2018年1月发布，支持IE10-11以及MicrosoftEdge浏览器；2020年6月，Bootstrap推出了最新版本Bootstrap5.0，作为全新的版本，Bootstrap5明确不再支持IE浏览器。如需要兼容IE，请根据实际需求使用v3.0或v4.5版。综合考虑3个版本的功能特征及浏览器兼容性，目前我们在实际应用中使用最多的是Bootstrap4，Bootstrap4已经成为当前响应式网站前端制作的主流框架。本文将对该版本的Boot⁃strap进行详细介绍。3Bootstrap4工作原理3.1栅格系统2Bootstrap概述2.1简介Bootstrap是全球最受欢迎的前端框架之一，可用来构建响[4]应式、移动设备优先的网站。Bootstrap基于less开发，集合了HTML、CSS、JavaScript、Jquery等技术，是一套简洁灵活的前端开源框架。Bootstrap中包含丰富的网页制作组件，如：按钮、菜单、轮播图、分页、卡片等，前端工程师可以利用这些组件快速搭建一个功能完备、样式新颖的网站，使前端开发变得快捷高效。2.2浏览器支持Bootstrap目前主流版本为v3.0、v4.5和v5.0，三个版本对各种主流操作系统中的各类浏览器的最新版本基本都能支持。Bootstrap3是最稳定的版本，支持IE8及以上版本；Bootstrap4.0Bootstrap4拥有一套响应式、移动设备优先的流式栅格系统。该栅格系统提供了核心内容居中显示、由上至下条带状填充网页内容的布局方法，通过一系列的行（row）和列（column）的组合来创建网页布局。栅格系统将容器（container）中的每行（row）平均分为12等列（col），在布局网页时，根据实际情况指定col-size-num中num部分的值（如.col-sm-8或.col-xl-3，1<=num<=12），来设置div空间所占的列数，但是，每行最多有12列。Bootstrap4栅格系统根据终端屏幕尺寸的大小分为5个栅格等级，并为每种的栅格等级定义了不同的类：特小col、小col-sm-*、中col-md-*、大/宽col-lg-*、超大/超宽col-xl-*。如表1所示。其中，col-size-num中size部分的命名是根据其所适用的终端屏幕尺寸区分的：col-适用于屏幕宽度小于576px的超小屏幕，col-sm-适用于宽度在576px～767px之间的小屏幕，col-md-适用于宽度在768px～991px之间的中等屏幕，col-lg-适用于宽度在992px～1199px之间的大/宽屏幕，col-xl-适用于宽度在1200px及以上的超大/超宽屏幕。栅格断点的媒体查询基于屏幕尺寸宽度的最小值，也就是说适用于该等级及该等级之上的所有屏幕尺寸（如：定义col-md-6可以在中型、宽、超宽设备上呈现，但不能在超小型、小型设备上呈现）。收稿日期：2021-01-20作者简介：马宁宁（1983—），女，山东泰安人，图书馆馆员，硕士，研究方向为数字图书馆建设、网站前端制作。本栏目责任编辑：梁书计算机工程应用技术241

ComputerKnowledgeandTechnology电脑知识与技术表1Bootstrap4网格参数超小屏幕小屏幕中等屏幕大屏幕超大屏幕(新增尺寸次小屏≥窄屏≥576px)<576px768pxPC显示器≥大PC显示器≥992px1200pxcontainer宽度最大auto540像素720像素960像素1140像素Class前缀col-col-sm-col-md-col-lg-col-xl-列(col)数列间隙30像素（每列col12两侧各列15像素）可嵌套可以可排序可以3.2布局方式流式布局构建的，Bootstrap4引入弹性盒模型完全支持响应式标准。每个(flexbox)概念，完全基于Bootstrap实例都flexbox有一个总容器(col)(container)，里面包含着行页组件。具体布局方式如图，列里面再放各种网页组件，(row)，行中包含着列1所示。也可以在行里面直接放置网图1Bootstrap4布局方式图3.3组件内容网页组件类和公共样式类，Bootstrap4它包含50多个实用的网站布局类、(row)等。、Web列(col-*)其中最常用有容器页面内容类、container、行前端工程师可以根据具体的设计需求选择需要的组、卡片card、导航栏navbar、边框border、颜色color件搭建自己的网站。具体内容如表2所示。表2Bootstrap4常用类[3]类型包含内容容器container/container-fluid、行(row)、列(col-*)、垂直对齐align-items-、水网站布局平对齐justify-content-、间隙沟槽清除no-gutters、重排序order-*、列偏移off⁃set-*、margin移动布局ml-auto/mr-auto、列嵌套等页面内容标题h1-h6、文字显示大小display-*、水平对齐方式text-、响应式图片img-fluid、缩略图img-thumbnail、表格table、图文框figure等警告提示框alert、徽章badge、面包屑导航breadcrumb、按钮button、按钮组btn-group、、输入框卡片cardinput-group、轮播效果、大屏显示carousel、折叠面板jumbotroncollapse、列表组、下拉菜单list-group、dropdown图文混排、网页组件表单formmediaPOP听data-spy提示、弹出模态框popover、旋转特效、进度条modal、导航栏navbar、滑动门导航栏nav、分页pagination、spinner-borderprogress、弹出提示框等toast、提示冒泡Tooltip、滚动监边框border、清除浮动clearfix、关闭图标close、显示d-、弹性布局d-flex、浮公共样式动float-、颜色primary/secondary/success/danger/info/light/dark、顶部或底部定位position-齐align-、等阴影shadow、规格w/h-*%、间隔m-/p-、文本换行text-nowrap、垂直对242计算机工程应用技术第17卷第13期(2021年5月)4Bootstrap4的使用方法BootstrapBootstrap4后在HTML5官网或组件在网站开发中如何使用呢？我们可以在中引用下载包中的相应文件，Bootstrap中文网下载Bootstrap即可进行响应式网4.5压缩包，然站的前端开发。下面，本文通过一个具体实例来展示该框架的使用方法。具体效果图如图2所示。4.1下载源文件下载压缩包文件，解压后在css文件夹中找到文件，保存到本地项目的CSS文件夹中；在js文件夹中找到文件，保存到本地项目的js文件夹中。从jQuery官网下载的jquery压缩文件，保存到本地项目的js文件夹中。4.2导入相关文件1）响应式meta标签动设备优化代码，Bootstrap4遵循移动设备优先的原则，之后才用CSS媒体查询来扩展组件。为了保载入后会优先为移证各种设备的渲染和触摸效果，head>面一行。区添加响应式的viewport标签，必须在简要地说就是优先引入下HTML文件的头部width=device-width会将网页的整体宽度设置为终端屏幕的宽度；initial-scale=1.0会将页面初次显示时，shrink-to-fit=no展示给用户的内容窗口大小，适应会在iOS9（iPhone操作系统设置为终端屏幕的）中使网页宽度自动100%；2iPhone屏幕宽度。bootstrap.在）CSShtml和JS源文件">min.文件头部css，代码如下标签中引入：标签之前引入strap4的JS文件文件。由于Boot⁃加载对应的的某些组件依赖于文件，jQuery,所以必须在标签之前文件后的代码如下所示：文件的顺序是jQuery在前，如在后。导入而且两个html>ini⁃...class="container">src="js/">本栏目责任编辑：梁书

第17卷第13期(2021年5月)4.3整体布局并开发为了展示bootstrap4栅格系统的使用方式，我们将制作图2所示的多屏适用网页。图2Bootstrap4网页在超宽、宽、中等、小及更小屏幕上的显示图分析页面设计方式我们发现：1）“图片+文字”这个组合在中等md及以上屏幕中始终是一个整体，但是在小及更小屏幕上却分成了2个元素；2）在宽lg及以上的屏幕上，页面元素总共分为3行，每行有2个“图片+文字”组合元素。这种页面布局用bootstrap4实现的话，我们可以先设置一个总容器rowcol-lg-6，然后每行containerrow里分成两个相等宽度的列，然后在这个总容器containercol-lg-6中设置，每个列3个行2）的布局。中放一个“图片+文字”组合，这样就实现了前面描述中为了实现前面描述中1）的布局，我们需要用到栅格系统嵌套的功能：首先在上面的列col-lg-6中再嵌套一个行row，然后在这个新的行row中放置两个列col，分别放置图片和文字。根据图片和文字所占据的宽度比，我们为其分别设置了col-md-5和col-md-7两个子列。部分代码如图3所示：本栏目责任编辑：梁书ComputerKnowledgeandTechnology电脑知识与技术图3Bootstrap4栅格布局部分代码通过该实例的制作过程我们发现，用Bootstrap制作网页非常简洁和方便，只需导入相关文件，然后用栅格系统布局页面，即可制作出适用于多种终端设备的响应式网页。5结束语本文对Bootstrap4的工作原理和重要组件进行了详细介绍，并基于此制作了一个应用实例。该框架简单好用，利用其丰富的插件和组件可以大大缩短开发时间，节省开发和维护成本，还能够适应不同的终端屏幕，为移动端用户提供良好的视觉体验，希望此文能为web前端开发者提供借鉴和参考。参考文献：[1][2]资源系统的研究龙德应,唐嫦燕.曹树金[J].运用农业图书情报学刊Bootstrap优化响应式高校图书馆数字,2018,30(4):41-45.的应用—,吴育冰—以“211.响应式”高校图书馆为例Web设计及其在图书馆门户网站中[J].图书情报研究,2016,[3]9(1):30-34.陶瑜,龚花兰,[4]的开发郭自飞.基于Bootstrap的响应式高校招生网站com/.Bootstrap[J].中沙洲职业工学院学报文网[EB/OL].[2020-11-26].,2020,23(3):://s.【通联编辑：谢媛媛】计算机工程应用技术243