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

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

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

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

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

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

8.1.2認識Bootstrap的柵格系統(tǒng)

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

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

（固定寬度）”或“

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

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

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

手機

(<768px)小屏幕

平板電腦

(≥768px)中等屏幕

小型桌面顯示器

(≥992px)大屏幕

大型桌面顯示器

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

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

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

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

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

（1）新建index.php文件。（2）在文檔中引入Bootstrap的核心CSS文件和核心JavaScript文件。（3）實現(xiàn)頁面布局。（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

手機布局效果

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

圖8.1.6

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

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

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

外部庫文件下載提示

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

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