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

PHP动态网站开发项目教程任务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库之前引入）。

8.1.2认识Bootstrap的栅格系统

在Bootstrap中，页面的布局使用栅格系统来完成。Bootstrap提供了一套响应式、移动设备优先的流式栅格系统，它的基本原理是把整个页面分成12列，然后可以随着屏幕或视口（ViewPort）尺寸的变化，自动设置每一行占据多少列。

栅格系统的工作原理很简单，就是通过一系列的行（Row）与列（Column）的组合来创建页面布局。下面简单介绍Bootstrap栅格系统的工作原理和注意事项。（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的栅格系统是如何在多种屏幕设备上工作的。超小屏幕

手机

(<768px)小屏幕

平板电脑

(≥768px)中等屏幕

小型桌面显示器

(≥992px)大屏幕

大型桌面显示器

(≥1200px)栅格系统行为总是水平排列开始是堆叠在一起的，当大于这些阈值时将变为水平排列.container最大宽度None（自动）750px970px1170px类前缀.col-xs-.col-sm-.col-md-.col-lg-列数12最大列宽自动62px81px97px槽宽30px（每列左右均有

15px间隔）嵌套是偏移（Offset）是支持列排序是表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文件，链接背景是黄色的，将鼠标指针移至其上，会提示该库文件在本地不存在，这样会导致该库文件对应的代码自动提示等功能失效，如图8.1.8所示。图8.1.8

外部库文件下载提示

单击提示中的“Downloadlibrary”链接，就可以将对应的库文件下载至本地，如图8.1.9所示。可以看到，下载库文件后，第13行的背景已经没有黄色底纹了，同时，可以关注到编辑器左边的Profect窗口下方有ExternalLibraries（外部库文件）标签，单击展开可以看到已经存在第13行对应的库文件。图8.1.9

查看下载的外部库文件子任务8.2首页动态数据读取8.2