马宁宁

摘要：移动互联网时代，构建响应式跨平台的网站前端已成为大势所趋。Bootstrap基于HTML5、CSS3和JS开发，因其灵活的响应式栅格系统、丰富而强大的组件和插件成为当前最流行的前端开发框架。该文对其最流行的版本Bootstrap4进行了详细介绍，希望能为Web开发者提供借鉴和参考。

关键词：网站前端制作;Bootstrap;响应式网站

中图分类号：G252      文献标识码：A

文章编号：1009-3044（2021）13-0241-03

1 背景

随着手机、PAD等移动设备的普及，我们已进入移动互联网时代。人们获取信息的方式也不再局限于从PC端访问，越来越多的依赖于移动设备。然而移动终端设备的屏幕尺寸大小迥异，浏览器也各不相同，面对多尺寸、多平台的访问需求，构建响应式跨平台的网站前端业已成为大势所趋[1]。

响应式网页设计（Responsive Web design）理念由Ethan Marcotte于2010年提出，利用流式布局、媒体查询、弹性图片、弹性盒子布局等技术[1]，只开发一套代码，即可兼容各种终端设备，不用为每个终端分别开发一套代码[2]。响应式网页设计能根据不同的用户终端设备（如：计算机、笔记本、PAD、手机等），自动切换图片尺寸、菜单布局和内容显示方式等[3]，呈现不同的显示效果以适应不同设备，为用户带来良好的体验，也减少了管理者的后期维护工作。Bootstrap作为当前网站前端设计的主流框架，本文将对其进行深入探讨。

2 Bootstrap概述

2.1 简介

Bootstrap是全球最受欢迎的前端框架之一，可用来构建响应式、移动设备优先的网站[4]。Bootstrap基于less开发，集合了HTML、CSS、JavaScript、Jquery等技术，是一套简洁灵活的前端开源框架。Bootstrap中包含丰富的网页制作组件，如：按钮、菜单、轮播图、分页、卡片等，前端工程师可以利用这些组件快速搭建一个功能完备、樣式新颖的网站，使前端开发变得快捷高效。……