PHP动态网站开发项目教程（微课版） 课件 任务8 在线投票系统首页制作及投票功能实现.pptx

牟奇春主编;任务8在线投票系统首页制作及投票功能实现

子任务8.1首页静态页面制作（Bootstrap布局）

8.1.1了解Bootstrap?

Bootstrap是全球最受欢迎的前端开源工具库之一，它支持Sass变量和Mixin，提供响应式栅格系统，并且自带大量组件和众多强大的JavaScript插件。

;Bootstrap是美国设计师马克·奥托（MarkOtto）和雅各布·桑顿（JacobThornton）基于HTML、CSS、JavaScript合作开发的简洁、直观、功能强大的前端开发框架，使得Web开发更加快捷。Bootstrap提供了优雅的HTML和CSS规范，它是由动态CSS语言Less写成的。Bootstrap一经推出便颇受欢迎，一直是GitHub上的热门开源框架，NASA的MSNBC（微软全国广播公司）的BreakingNews也使用了该框架。国内一些移动开发者较为熟悉的框架，如WeX5前端开源框架等，也是基于Bootstrap源代码进行性能优化而来的。

;Bootstrap目前有多个版本并存，关于Bootstrap的详细使用方法，可以到官网下载教程，网络上也有很多相关的资源可以使用。

需要注意的是，Bootstrap的所有JavaScript插件都依赖于jQuery，因此，在使用时，需要先引入jQuery（必须在引入Bootstrap的核心JavaScript库之前引入）。

;;（1）所有的“.row（行）”都必须包含在具有“.container?（固定宽度）”或“?.container-fluid（100%宽度）”样式的容器中。

（2）在每一“行”中，都会在水平方向创建一组“列”。

（3）页面中的具体内容应当位于“列”内，并且只有“列”可以作为“行”的直接子元素。

;（4）在制作栅格布局时，需要使用“?.row”“.col-xs-3”等预定义的类。

（5）每一“列”都可添加间距（Padding）属性，这样可以创建列与列之间的槽（Gutter）宽。

;（6）栅格系统中的列可以通过指定1～12的值来表示其跨越的范围。例如，3个等宽的列可以使用3个“.col-xs-4”来创建。

（7）如果一“行”中包含的“列”数目大于12，则多余的“列”将另起一行排列。

;（8）栅格类适用于屏幕宽度大于或等于分界点大小的设备，并且针对小屏幕设备覆盖栅格类，也就是说，小屏幕是优先的。

通过表8.1.1可以详细查看Bootstrap的栅格系统是如何在多种屏幕设备上工作的。

;;8.1.3引入Bootstrap库文件?

要使用Bootstrap来布局，首先需要引入Bootstrap库文件。Bootstrap目前有v2、v3、v4、v5这4个版本，版本之间有一定的差异。

一般来说，普通项目采用v3比较合适。在引入Bootstrap库文件时，可以不用下载，推荐直接使用内容分发网络（ContentDeliveryNetwork，CDN）加速器，其中Bootstrap的核心CSS文件和核心JavaScript文件必须引入。;8.1.4Bootstrap布局测试?

（1）新建index.php文件。

（2）在文档中引入Bootstrap的核心CSS文件和核心JavaScript文件。

（3）实现页面布局。

（4）测试效果。;图8.1.1?首页基本布局测试;8.1.5在项目首页中使用Bootstrap布局

小王同学用了一些示例文字和图片来模拟最终的投票界面。最后运行的结果如下，其中图8.1.2所示为在大型桌面显示器上的布局效果；图8.1.3所示为在小型桌面显示器上的布局效果；图8.1.4所示为在平板电脑上的布局效果；图8.1.5所示为在手机上的布局效果。

;图8.1.2?大型桌面显示器布局效果;图8.1.3?小型桌面显示器布局效果;图8.1.4?平板布局效果;图8.1.5?手机布局效果;仔细看小王同学完成的代码，可以看到，他在“行”中又嵌套了“行”。事实上，这种嵌套可以多次进行。只是需要注意，需要保证每一“行”中的“列”数量在不同分辨率的设备上加起来要等于12。?

;图8.1.6?大型桌面显示器中未使用clearfix类响应式工具的布局效果;图8.1.7?小型桌面显示器中未使用clearfix类和响应式工具的布局效果;8.1.6在PhpStorm中下载外部库文件

小王同学已经完成了首页的静态内容制作，但他突然发现，在PhpStorm中，第9行和第13行就是远程引用的CSS文件和JavaScript文件，链接背景是黄色的，将鼠标指针移至其上，会提示该库文件在本地不存在，这样会导致该库文件对应的代码自动提示等功能