人机交互及原理第十次实验报告
引言
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最大的特点是对移动设备支持。而移动设备往往种类繁多,屏幕大小不一。为了解决这个问题,使页面能够自适应不同屏幕,响应式网格系统随着屏幕或视口(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是一个很好用的框架,值得深入学习。
网友评论