人机交互及原理第十次实验报告
引言
Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。国内一些移动开发者较为熟悉的框架，如前端开源框架等，也是基于Bootstrap源码进行性能优化而来。
基于bootstrap设计网页最重要的特点就是它对移动设备优先，能够在自适应不同设备。在移动互联网日益发达的今天，越来越多的人选择利用小屏幕设备进行网上冲浪，因此对移动设备的支持将越来越重要。今天我们将利用bootstrap制作一个明星网页。
实验过程
第一步：在网页中引用bootstrap
使用bootstrap是非常简单的。我们只需要应用bootstrap.min.css、jquery.js、bootstrap.min.js即可引用。
引用bootstrap
第二步：使用响应式网格系统
bootstrap最大的特点是对移动设备支持。而移动设备往往种类繁多，屏幕大小不一。为了解决这个问题，使页面能够自适应不同屏幕，响应式网格系统随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。屏幕越大，列的宽度越大。当进行缩放时，bootstrap便会进行调整。为了使用这种功能我们只需要引用.container。如果需要对排版进行定制，需要分块的地方使用.col-（超小设备）.col-sm-（平板设备）.col-md-（桌面显示器）.col-lg-（大桌面显示器）.col-xl-（超大桌面显示器）。
大屏显示效果
小屏显示效果
第三步：使用bootstrap组件
bootstrap中有许多组件可以直接使用。文字标题、针对代码进行显示、表格、表单、按钮、图片、响应式实用工具。这些常用的组件都可以直接使用。我们以表格为例，引用一个table-striped（条纹表格）类。
条纹表格代码
效果
第四步：使用bootstrap中特殊的功能。
条纹表格在css中也可制作出来，只是比较麻烦。接下来我们可以使用一些bootstrap中和特殊的组件，一般需要使用到jquery。比如做一个轮播图。先寻找几张大小类似的图片，使用carousel slider类。
轮播图片
切换按钮
轮播图效果
第五步：导航栏
导航栏能够在保持页面简洁的情况下给予用户更多的信息，是一个常见的组件。bootstrap中也有可以直接引用的实例。使用navbar-nav标签，并利用<li><ul>添加表单
导航栏代码
导航栏效果
第六步：对网页进行美化。
一个好的网页大致主体是完成了，但是还有许多细节或者个性可以添加。
添加背景图片
2.给标题添加效果。所有带有blink标签的文字都会变换颜色。
颜色闪烁
3.补充页脚。让一个网页完整也需要一些作者的信息，在页脚添加也不会影响其他人浏览。
页脚
总结
网页的最终效果是这样的：
最终效果
想想有点小激动，喜欢周杰伦很久了，除了听歌以外第一次为周杰伦做点粉丝可能做的事情。非常感谢老师给了这么一次机会。
关于网页的收获：
1.网页最主要的还是你想要展示什么样的内容，然后再去考虑慢慢优化，不一定需要很高深的技术，但是要有一颗热爱的心。就像做手工一样。简单的图片也能给人美的享受。
2.bootstrap是一个很好用的框架，值得深入学习。
网友评论