计算机工程应用技术
本栏目责任编辑：梁书
基于Bootstrap 框架的响应式网站设计
张晶晶，曹双双*，杨怡洁，刘玲，蔡梦媛
（湖北师范大学，湖北黄石435000）
摘要：随着移动设备的广泛应用，网页必须实现在不同设备上呈现相应的视觉效果。该文在研究响应式网页设计上，结合
了Bootstrap 框架，开发者可以让网页在不同的设备上都获得最佳的体验。它最大的优势在于响应式布局，对其核心技术媒体查询、弹性化和流式布局等进行了相关介绍，并对使用Bootstrap 框架搭建WEB 项目进行了描述。关键词：Bootstrap；响应式；WEB 网页；栅格系统中图分类号：TP311
文献标识码：A
文章编号：1009-3044(2020)34-0247-02
开放科学（资源服务）标识码（OSID ）：
Response Web Page Design based on Bootstrap Framework ZHANG Jing-jing,CAO Shuang-shuang*,YANG Yi-jie,LIU Ling,CAI Meng-yuan
（Hubei Normal University ，Huangshi 435000,China ）
Abstract:With the widespread use of mobile devices,web pages must be able to present the corresponding visual effects on differ⁃ent devices.This article combines the Bootstrap framework to study responsive web design,enabling developers to make web pages experience best on different devices.Its biggest advantage lies in responsive layout.It introduces the core technology media query,flexible and streaming layout,and describes the use of Bootstrap framework to build a WEB project.Keywords:Bootstrap;response;WEB page ；grid system
Bootstrap 是目前前端开发主流框架之一，定义了许多CSS 样式和JS 插件，开发人员可以在框架基础上进行可开发，简化编码。最大的特点就是在各种终端设备上进行响应式布局，同一套页面可以适应不同分辨率的设备。相对于以往的固定像素比设计有了很大的进步，更适应当代互联网。
1背景
21世纪，互联网技术的迅速发展，使用人的不断增多，各种智能移动终端广泛在行业中使用，所以PC 端应用必须适应移动终端的需要。移动终端种类繁多，各种都存在差异，而PC 端一成不变页面已经无法满足用户的需求。各种设备都应该呈现良好的布局，随着终端设备的改变而随之变化。为了满足用户的这一需求，就催生出了响应式网页开发的理念，兼容不同的终端设备，给用户最佳的视觉体验。
2Bootstrap
2.1简介
Bootstrap 是2011年新推出的一款前端技术，快速开发WEB 应用程序和网站的前端框架。Bootstrap 代码编写简单，开发人员在熟悉基础代码的情况下就能很好地使用Bootstrap 框架，响应式布局能够适应于台式机、平板电脑和手机，它为开发人创建接口提供了一个简洁统一的解决方案；含有强大的内置组件，易于定制；极大缩短周期，增加效率。因为直接使用框架
的原因，后期维护也很方便。2.2核心内容2.2.1媒体查询
媒体查询可以让开发者根据终端设备的特性，如屏幕大
小、视口、设备为其设定特定CSS 样式，媒体查询由媒体类型和检测媒体特性的条件表达式组成。使用媒体查询，页面可以在不改变内容的情况下，呈现出特定的视觉效果。媒体查询的表达式通常由设备和设备特征来表示，如：@media 设备类型and （设备特征），在CSS 、HTML 和XML 上都可以设置媒体查询，通过媒体查询也可以很方便实现页面效果。例如在不同页面上显示不同的背景颜就可以这样设置：
@media screen and (min-width:900px){body{
background-color:red;}}
@media screen and (min-width:600px)and (max-width:899px){
body{
background-color:blue;}}
收稿日期：2020-06-28作者简介：张晶晶（1999—），女，湖北黄冈人，本科，主要研究方向为前端开发；通讯作者：曹双双（1987—），女，湖北黄石人，讲师，硕
士，主要研究方向为计算机教育应用、软件开发。
247
本栏目责任编辑：梁书
计算机工程应用技术
Computer Knowledge and Technology 电脑知识与技术第16卷第34期(2020年12月)
2.2.2弹性化
响应式布局有很强的弹性化，不同的媒体设备下能够弹性适应，展示不同的效果。在页面中图片和文字大小可以根据媒体设备自动适应，各个版块内容也可以自动调整布局，页面不会出现排版混乱的情况。对于用户来说是一个很好的体验，也能够很好地兼容现在的主流设备。2.2.3流式布局
流体布局相对于固定布局就在于对网站尺寸测量单位不同，固定布局就是最外面的框架是固定像素，而流式布局则不用考虑设备尺寸或屏幕大小，它选择的是百分比，为网页提供了很强的可塑性和流动性。流式布局也是目前的主流布局，在容器发生变化时，会根据实际情况来调整大小和位置，流式布局与媒体查询密切相关。如图1流式布局和图2固定布局
所示。
图1流式布局图2固定布局
3实现响应式网页设计
3.1响应式导航条
传统的导航条一般是横向显示在网页顶部，无法根据页面变化做出改变。采用列表li 进行排列，利用左浮动的特性实现横向，但是当页面在小分辨率的终端设备下，容易出现遮挡或换行的情况，影响用户体验感。而Bootstrap 提供了导航组件，可以根据实际情况进行折叠内容，随着可用视口宽度的增加，导航栏也会水平展开。实现响应式导航条的关键是需要设置断点，并给导航内容添加相应组件，通过媒体查询来进行相应改变。3.2栅格系统
Bootstrap 最强大的地方就在于栅格系统，在设计过程中用固定的格子进行布局。栅格系统有三层基本结构，最外层是container 和最里层是column ，以及夹层row 。row 里面可以包含很多column ，栅格系统就是通过row 和column 的组合来创建页面布局，它使用4种栅格选项来形成栅格系统，如表1所示。
表1栅格参数
网格行为最大容器宽
度Class 列数量
超小设备手机（<768px ）
水平None （自动）.col-xs-12
小型设备平板电脑（≧768px ）
以折叠开始，断点以上是水平的
750px .col-sm-中型设备台式电脑
（≧992px ）
970px .col-md-大型设备台式电脑（≧1200px ）
1170px .col-lg-
最大宽度间隙宽度可嵌套偏移量列排序
自动
30px 是是是
60px
78px
95px
3.3搭建响应式网页基本框架
在基本的HTML 框架上需要引入自适应标签，由于Boot⁃strap 是以移动优先为主要准则，所以为了实现响应式布局的效果，我们需要在head 标签中入对应的meta 标签，才能够保证页面在所有设备上初始化的时候，会保持1.0的比例。再根据需要使用栅格布局，也就是在整个内容写在container 容器之内。其具体配置代码如下所示：
<!DOCTYPE html><html><head>
<title>Bootstrap 模板</title><meta charset="UTF-8">
<meta http-equiv="x-ua-compatible"content="IE=edge"><meta name="viewport"content="width=device-width,ini⁃tial-scale=1">
<link href="cdn.jsdelivr/npm/*************.7/dist/css/bootstrap.min.css"rel="stylesheet">
</head><body>
<script src="cdn.jsdelivr/npm/**********.1/dist/jquery.min.js"></script>
<script src="cdn.jsdelivr/npm/*************.7/dist/js/bootstrap.min.js"></script>
</body></html>
其中前3个<meta>标签分别用于设置字符集、文档兼容模式声明和确定视口宽度，meta 标签必须放在页面代码的最前面其他内容跟随后面，代码是从上向下执行的，所以在加载完页面之前应先加载完两个js 文件，避免出现错误。
4结论
响应式布局已经成为当下流行的一种概念，通过框架可以快速搭建响应式页面。Bootstrap 给前端设计人员解决了一烦，无疑是前端框架的佼佼者。既能够很好地兼容各种终端媒体设备，又能给用户很好的视觉体验。但是否引用Bootstrap 框架还要视具体情况而定，响应式网页在解决多设备问题的同时还带来了其他一些问题：如效率低和代码冗余都是值得重视的。
参考文献：
[1]汪红宇，刘熊辉，乔波.基于Bootstrap 框架适应响应式布局[J].
电脑与信息技术,2017,25(5):19-22.
[2]纪娟，林亮亮.基于Bootstrap 的自适应自主测评系统设计与实现[J].安徽点电子信息职业技术学院学报,2017,16(93):27-32.js导航栏下拉菜单
[3]刘志东，陈天伟.基于Bootstrap 的响应式网页设计与实现[J].电脑知识与技术,2007,13(7):85-87.
【通联编辑：代影】
248

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