响应式布局网站的设计与实现

Design and Implementation of Responsive Layout Website

在传统网页设计与开发中,存在不同的设备终端需设计制作不同版本的局限以及PC端设计的网页在移动设备屏幕上无法完整显示的问题,为此文章对目前流行的前端Bootstrap框架技术进行分析研究,基于学校已有网站群管理系统,设计承德医学院教育技术中心网站,实现了一个能够兼容各个终端需求的响应式网站。文章详细介绍了Bootstrap框架的栅格系统及导航条、缩略图、面板组件和响应式图片插件在网站制作中的应用,并引入制作网站的部分代码以分析响应式布局网站实现的过程。

In the traditional webpage design and development,there are problems that different versions need to be designed and produced for different device terminals and the webpages designed for PC terminal cannot be fully displayed on the screen of mobile devices.Therefore,this paper analyzes and studies the currently popular front-end Bootstrap framework technology.Based on the existing website group Content Management System of the college,the website of the education technology center of Chengde Medical University is designed,and a responsive website that can be compatible with each terminal demand is realized.This paper introduces in detail the grid system of Bootstrap framework as well as the application of navigation bars,thumbnails,panel components,and responsive image plug-ins in the application of website production.And it introduces part of the code of website production to analyze the process of implementing responsive layout website.