PHP動(dòng)態(tài)網(wǎng)站開(kāi)發(fā)項(xiàng)目教程課件 任務(wù)8 在線投票系統(tǒng)首頁(yè)制作及投票功能實(shí)現(xiàn)

PHP動(dòng)態(tài)網(wǎng)站開(kāi)發(fā)項(xiàng)目教程任務(wù)8在線投票系統(tǒng)首頁(yè)制作及投票功能實(shí)現(xiàn)子任務(wù)8.1首頁(yè)靜態(tài)頁(yè)面制作（Bootstrap布局）8.1.1了解Bootstrap

Bootstrap是全球最受歡迎的前端開(kāi)源工具庫(kù)之一，它支持Sass變量和Mixin，提供響應(yīng)式柵格系統(tǒng)，并且自帶大量組件和眾多強(qiáng)大的JavaScript插件。

Bootstrap是美國(guó)設(shè)計(jì)師馬克·奧托（MarkOtto）和雅各布·桑頓（JacobThornton）基于HTML、CSS、JavaScript合作開(kāi)發(fā)的簡(jiǎn)潔、直觀、功能強(qiáng)大的前端開(kāi)發(fā)框架，使得Web開(kāi)發(fā)更加快捷。Bootstrap提供了優(yōu)雅的HTML和CSS規(guī)范，它是由動(dòng)態(tài)CSS語(yǔ)言Less寫(xiě)成的。Bootstrap一經(jīng)推出便頗受歡迎，一直是GitHub上的熱門開(kāi)源框架，NASA的MSNBC（微軟全國(guó)廣播公司）的BreakingNews也使用了該框架。國(guó)內(nèi)一些移動(dòng)開(kāi)發(fā)者較為熟悉的框架，如WeX5前端開(kāi)源框架等，也是基于Bootstrap源代碼進(jìn)行性能優(yōu)化而來(lái)的。

Bootstrap目前有多個(gè)版本并存，關(guān)于Bootstrap的詳細(xì)使用方法，可以到官網(wǎng)下載教程，網(wǎng)絡(luò)上也有很多相關(guān)的資源可以使用。

需要注意的是，Bootstrap的所有JavaScript插件都依賴于jQuery，因此，在使用時(shí)，需要先引入jQuery（必須在引入Bootstrap的核心JavaScript庫(kù)之前引入）。

8.1.2認(rèn)識(shí)Bootstrap的柵格系統(tǒng)

在Bootstrap中，頁(yè)面的布局使用柵格系統(tǒng)來(lái)完成。Bootstrap提供了一套響應(yīng)式、移動(dòng)設(shè)備優(yōu)先的流式柵格系統(tǒng)，它的基本原理是把整個(gè)頁(yè)面分成12列，然后可以隨著屏幕或視口（ViewPort）尺寸的變化，自動(dòng)設(shè)置每一行占據(jù)多少列。

柵格系統(tǒng)的工作原理很簡(jiǎn)單，就是通過(guò)一系列的行（Row）與列（Column）的組合來(lái)創(chuàng)建頁(yè)面布局。下面簡(jiǎn)單介紹Bootstrap柵格系統(tǒng)的工作原理和注意事項(xiàng)。（1）所有的“.row（行）”都必須包含在具有“.container

（固定寬度）”或“

.container-fluid（100%寬度）”樣式的容器中。（2）在每一“行”中，都會(huì)在水平方向創(chuàng)建一組“列”。（3）頁(yè)面中的具體內(nèi)容應(yīng)當(dāng)位于“列”內(nèi)，并且只有“列”可以作為“行”的直接子元素。（4）在制作柵格布局時(shí)，需要使用“

.row”“.col-xs-3”等預(yù)定義的類。（5）每一“列”都可添加間距（Padding）屬性，這樣可以創(chuàng)建列與列之間的槽（Gutter）寬。（6）柵格系統(tǒng)中的列可以通過(guò)指定1～12的值來(lái)表示其跨越的范圍。例如，3個(gè)等寬的列可以使用3個(gè)“.col-xs-4”來(lái)創(chuàng)建。（7）如果一“行”中包含的“列”數(shù)目大于12，則多余的“列”將另起一行排列。（8）柵格類適用于屏幕寬度大于或等于分界點(diǎn)大小的設(shè)備，并且針對(duì)小屏幕設(shè)備覆蓋柵格類，也就是說(shuō)，小屏幕是優(yōu)先的。

通過(guò)表8.1.1可以詳細(xì)查看Bootstrap的柵格系統(tǒng)是如何在多種屏幕設(shè)備上工作的。超小屏幕

手機(jī)

(<768px)小屏幕

平板電腦

(≥768px)中等屏幕

小型桌面顯示器

(≥992px)大屏幕

大型桌面顯示器

(≥1200px)柵格系統(tǒng)行為總是水平排列開(kāi)始是堆疊在一起的，當(dāng)大于這些閾值時(shí)將變?yōu)樗脚帕?container最大寬度None（自動(dòng)）750px970px1170px類前綴.col-xs-.col-sm-.col-md-.col-lg-列數(shù)12最大列寬自動(dòng)62px81px97px槽寬30px（每列左右均有

15px間隔）嵌套是偏移（Offset）是支持列排序是表8.1.1

Bootstrap的柵格系統(tǒng)在多種屏幕設(shè)備上的工作模式8.1.3引入Bootstrap庫(kù)文件

要使用Bootstrap來(lái)布局，首先需要引入Bootstrap庫(kù)文件。Bootstrap目前有v2、v3、v4、v5這4個(gè)版本，版本之間有一定的差異。

一般來(lái)說(shuō)，普通項(xiàng)目采用v3比較合適。在引入Bootstrap庫(kù)文件時(shí)，可以不用下載，推薦直接使用內(nèi)容分發(fā)網(wǎng)絡(luò)（ContentDeliveryNetwork，CDN）加速器，其中Bootstrap的核心CSS文件和核心JavaScript文件必須引入。8.1.4Bootstrap布局測(cè)試

（1）新建index.php文件。（2）在文檔中引入Bootstrap的核心CSS文件和核心JavaScript文件。（3）實(shí)現(xiàn)頁(yè)面布局。（4）測(cè)試效果。圖8.1.1

首頁(yè)基本布局測(cè)試8.1.5在項(xiàng)目首頁(yè)中使用Bootstrap布局

小王同學(xué)用了一些示例文字和圖片來(lái)模擬最終的投票界面。最后運(yùn)行的結(jié)果如下，其中圖8.1.2所示為在大型桌面顯示器上的布局效果；圖8.1.3所示為在小型桌面顯示器上的布局效果；圖8.1.4所示為在平板電腦上的布局效果；圖8.1.5所示為在手機(jī)上的布局效果。圖8.1.2

大型桌面顯示器布局效果圖8.1.3

小型桌面顯示器布局效果圖8.1.4

平板布局效果圖8.1.5

手機(jī)布局效果

仔細(xì)看小王同學(xué)完成的代碼，可以看到，他在“行”中又嵌套了“行”。事實(shí)上，這種嵌套可以多次進(jìn)行。只是需要注意，需要保證每一“行”中的“列”數(shù)量在不同分辨率的設(shè)備上加起來(lái)要等于12。

圖8.1.6

大型桌面顯示器中未使用clearfix類響應(yīng)式工具的布局效果圖8.1.7

小型桌面顯示器中未使用clearfix類和響應(yīng)式工具的布局效果8.1.6在PhpStorm中下載外部庫(kù)文件

小王同學(xué)已經(jīng)完成了首頁(yè)的靜態(tài)內(nèi)容制作，但他突然發(fā)現(xiàn)，在PhpStorm中，第9行和第13行就是遠(yuǎn)程引用的CSS文件和JavaScript文件，鏈接背景是黃色的，將鼠標(biāo)指針移至其上，會(huì)提示該庫(kù)文件在本地不存在，這樣會(huì)導(dǎo)致該庫(kù)文件對(duì)應(yīng)的代碼自動(dòng)提示等功能失效，如圖8.1.8所示。圖8.1.8

外部庫(kù)文件下載提示

單擊提示中的“Downloadlibrary”鏈接，就可以將對(duì)應(yīng)的庫(kù)文件下載至本地，如圖8.1.9所示?？梢钥吹?，下載庫(kù)文件后，第13行的背景已經(jīng)沒(méi)有黃色底紋了，同時(shí)，可以關(guān)注到編輯器左邊的Profect窗口下方有ExternalLibraries（外部庫(kù)文件）標(biāo)簽，單擊展開(kāi)可以看到已經(jīng)存在第13行對(duì)應(yīng)的庫(kù)文件。圖8.1.9

查看下載的外部庫(kù)文件子任務(wù)8.2首頁(yè)動(dòng)態(tài)數(shù)據(jù)讀取8.2