基于Bootstrap的网页开发

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

目录

第一章绪论 (1)

1.1 界面设计的背景与研究意义 (1)

1.2 实验室网站界面重新设计的需求 (2)

第二章相关技术与理论 (4)

2.1 HTML相关介绍 (4)

2.1.1 HTML简介 (4)

2.1.2 HTML5优缺点 (4)

2.1.3支持HTML5的相关浏览器 (4)

2.2 CSS3相关介绍 (5)

2.2.1 CSS3简介 (5)

2.2.2 CSS3影响 (5)

2.3 Bootstrap介绍 (5)

2.3.1 Bootstrap概览 (5)

2.3.2 Bootstrap的特点 (6)

2.3.4 Bootstrap的优缺点 (6)

2.3.5 Bootstrap使用的必要性 (7)

2.4 Web storm技术介绍 (7)

2.4.1 Web storm简介 (7)

2.4.2 Web storm特色功能 (7)

2.4.3 Web storm优缺性 (8)

第三章实验室网站布局设计 (9)

3.1 设计立意 (9)

3.2 设计原则 (9)

3.3 网站结构规划 (9)

3.4 布局的步骤 (11)

3.4.1 草图 (11)

3.4.2 粗略布局 (11)

3.4.3 将布局细化 (11)