J I A N G S U U N I V E R S I T Y 本科毕业论文 基于bootstrap的网页设计 Bootstrap-based web design 学院名称：计算机科学与通信工程学院 专业班级：软件（嵌入式）1102班 学生姓名：缪江超 指导教师姓名：马汉达 指导教师职称：高级工程师 2015年6月
基于bootstrap的网页设计 计算机科学与通信工程学院软件工程（嵌入式）缪江超 摘要：：当今社会，网络是人们生活中不可或缺的一部分，网页则是传递信息的重要媒介。随着时代的进步，网页设计也随着网络技术的发展而不断发展。计算机学院实验中心信息管理系统，是2004年开发的，因设计开发时间较早，其界面已不适应当前的技术发展，不能满足师生对于网站美观要求。 Bootstrap是当下最受人们欢迎的前端框架，是基于HTML、CSS、JAVASCRIPT 的，它简洁灵活的特性使得 Web 开发更加快捷，Bootstrap提供了优雅的HTML和CSS规范，它由动态CSS语言Less写成。本文针对实验中心网站得主要问题，介绍了网页设计的相关理论，使用Bootstrap框架，对实验中心网站进行了重新布局设计，使得网站界面更为美观，用户体验更好。 关键字：前端开发 Bootstrap 布局架构实验室网站
Bootstrap-based web design Miao Jiangchao, Computer Science and Communication Engineering, Software Engineering (embedded) Professional Abstract: Nowadays, networks are an indispensable part of people's lives, the page is an important medium to transmit information. With the progress of the times,with the development of network technology,web design continue to develop. School of Computer Science Experiment Center Information Management System, developed in 2004, due to the design and development time earlier, the interface has not adapted to current technological developments, and can not meet the aesthetic requirements for teachers or students. Now Bootstrap is the most popular front frame,which is based on HTML, CSS, JAVASCRIPT, which is a clean and flexible features that make Web development faster. Bootstrap offers elegantly HTML and CSS specification, which is written by the dynamic CSS language Less. In this paper, the main problem is the Experimental Center site, introduces the theory of web design, use Bootstrap framework, the experimental center site re-layout design, making the site more attractive interface, better user experience. Key Words：Front-end development Bootstrap Layout Architecture Laboratory site
<meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！--> <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="//https://www.doczj.com/doc/04675439.html,/html5shiv/3.7.2/html5shiv.min.js"& gt;</script> <script src="//https://www.doczj.com/doc/04675439.html,/respond.js/1.4.2/respond.min.js"& gt;</script> <![endif]--> </head>
一、单选题（针对以下题目，请选择最符合题目要求的答案。针对每一道题目，所有答案都选对，则该题得分，所选答案错误或不能选出所有答案，则该题不得分。每题2.5分，共80分。） 1. Bootstrap 插件全部依赖是（） A.JavaScript B.JQuery C.Angular JS D.Node JS 2. 栅格系统小屏幕使用的类前缀是（） A. .col-xs- B. .col-sm- C. .col-md- D. .col-lg- 3. 如下代码中，想要在超小屏幕和小屏幕显示两列，在中屏幕和大屏幕显示三列,三个div的class正确的写法是（）
item1
item2
item3
A. col-sm-6 col-md-4，col-sm-6 col-md-4，col-sm-6 col-md-4 B. col-sm-6 col-lg-4，col-sm-6 col-lg-4，col-sm-6 col-lg-4 C. col-xs-6 col-lg-4，col-xs-6 col-lg-4，col-xs-6 col-lg-4
D. col-xs-6 col-md-4，col-xs-6 col-md-4，col-xs-6 col-md-4 4. 下面可以实现列偏移的类是（） A..col-md-offset-* B. .col-md-push-* C. .col-md-pull-* D. .col-md-move-* 5.表单元素要加上什么类，才能给表单添加圆角属性，和阴影效果（） A.form-group B.form-horizontal C.form-inline D. form-control 6.img-responsive类可以让图片支持响应式布局,它的实现原理是（） A.设置了max-width: 100%;和height: auto; B. 设置了max-width: 100%; 和height: 100%; C. 设置了width: auto; 和max-height: 100%; D. 设置了width: auto; 和height: auto; 7.输入框组想加上图标，可以实现对表单控件的扩展的类是（） A. .input-group-btn B. .input-group-addon C. form-control D. input-group-extra 8. 标签页垂直方向堆叠排列,需要添加的类（） A.nav-vertical B.nav-tabs C.nav-pills D.nav-stacked 9. 可以把导航固定在顶部的类是（） A.navbar-fixed-top
