Bootstrap Web設(shè)計(jì)與開發(fā)實(shí)戰(zhàn)（下篇）

BootstrapWeb設(shè)計(jì)與開發(fā)實(shí)戰(zhàn)（下篇）目錄\h第8章Bootstrap扁平化風(fēng)格頁面\h8.1扁平化設(shè)計(jì)概述\h8.1.1介紹\h8.1.2設(shè)計(jì)理念\h8.1.3頁面架構(gòu)\h8.2頁眉設(shè)計(jì)\h8.2.1導(dǎo)航條\h8.2.2導(dǎo)航條圖標(biāo)\h8.2.3導(dǎo)航條功能菜單\h8.2.4頁眉標(biāo)題\h8.3左側(cè)導(dǎo)航設(shè)計(jì)\h8.4頁面主體設(shè)計(jì)\h8.4.1圖片列表\h8.4.2提交表單\h8.4.3文本列表\h8.5頁腳設(shè)計(jì)\h8.6本章小結(jié)\h第9章Bootstrap圖片幻燈頁面\h9.1圖片幻燈風(fēng)格頁面設(shè)計(jì)概述\h9.2頁眉設(shè)計(jì)\h9.3頁面主體設(shè)計(jì)\h9.3.1圖片幻燈\h9.3.2圖標(biāo)列表\h9.3.3圖片特輯\h9.4本章小結(jié)\h第10章Bootstrap風(fēng)格按鈕\h10.1風(fēng)格按鈕設(shè)計(jì)概述\h10.2形狀與尺寸風(fēng)格按鈕\h10.3邊框風(fēng)格按鈕\h10.4下拉菜單風(fēng)格按鈕\h10.5按鈕組風(fēng)格\h10.6本章小結(jié)\h第11章Bootstrap響應(yīng)式表格設(shè)計(jì)\h11.1表格設(shè)計(jì)概述\h11.2Bootstrap基本表格\h11.3Bootstrap數(shù)組表格\h11.4BootstrapAjax表格\h11.5本章小結(jié)\h第12章Bootstrap響應(yīng)式圖表設(shè)計(jì)\h12.1圖表設(shè)計(jì)概述\h12.2柱狀圖圖表\h12.3折線圖圖表\h12.4餅狀圖圖表\h12.5本章小結(jié)\h第13章jQueryUIBootstrap工具\(yùn)h13.1jQueryUIBootstrap工具概述\h13.1.1jQueryUI工具\(yùn)h13.1.2jQueryUIBootstrap工具\(yùn)h13.1.3jQueryUIBootstrap應(yīng)用\h13.2按鈕（Button）\h13.2.1基本樣式按鈕\h13.2.2Set樣式按鈕\h13.2.3工具條樣式按鈕\h13.3折疊面板（Accordion）\h13.4對話框（Dialog）\h13.4.1非模態(tài)對話框\h13.4.2模態(tài)對話框\h13.5標(biāo)簽頁（Tabs）\h13.5.1基本樣式標(biāo)簽頁\h13.5.2可編輯樣式標(biāo)簽頁\h13.6Overlay與Shadow\h13.7Highlight與Error\h13.8日期選擇器（Datepicker）\h13.9滑塊（Slider）\h13.9.1水平滑塊（HorizontalSlider）\h13.9.2垂直滑塊（VerticalSlider）\h13.10自動(dòng)完成（Autocomplete）\h13.11下拉菜單（Menu）\h13.12提示信息（Tooltip）\h13.13微調(diào)按鈕（Spinner）\h13.14本章小結(jié)\h第14章jQueryMobile框架與Bootstrap主題風(fēng)格\h14.1jQueryMobile+Bootstrap概述\h14.1.1jQueryMobile框架\h14.1.2Bootstrap主題風(fēng)格\h14.1.3應(yīng)用開發(fā)基礎(chǔ)\h14.2主頁設(shè)計(jì)\h14.3按鈕設(shè)計(jì)\h14.4列表設(shè)計(jì)\h14.5導(dǎo)航設(shè)計(jì)\h14.6表單設(shè)計(jì)\h14.6.1輸入框\h14.6.2滑塊\h14.6.3切換開關(guān)\h14.6.4復(fù)選框\h14.6.5單選框\h14.6.6下拉菜單\h14.6.7提交按鈕\h14.7本章小結(jié)\h第15章實(shí)戰(zhàn)：應(yīng)用Bootstrap實(shí)現(xiàn)一個(gè)貼吧管理頁面\h15.1項(xiàng)目設(shè)計(jì)概述\h15.2頁面布局設(shè)計(jì)\h15.2.1引入Bootstrap框架\h15.2.2實(shí)現(xiàn)頁面布局代碼\h15.3頁面導(dǎo)航欄設(shè)計(jì)\h15.3.1構(gòu)建導(dǎo)航的整體架構(gòu)\h15.3.2設(shè)計(jì)標(biāo)題和導(dǎo)航鏈接\h15.3.3設(shè)計(jì)搜索框和通知系統(tǒng)\h15.3.4設(shè)計(jì)管理員登錄系統(tǒng)\h15.3.5設(shè)計(jì)響應(yīng)式導(dǎo)航\h15.4左側(cè)邊欄設(shè)計(jì)\h15.5頁面主體設(shè)計(jì)\h15.5.1頁面主體功能的頭部\h15.5.2頁面主體功能的帖子列表\h15.6本章小結(jié)\h附錄CSS選擇器速覽第8章

Bootstrap扁平化風(fēng)格頁面這一章我們介紹如何應(yīng)用Bootstrap框架設(shè)計(jì)扁平化風(fēng)格的頁面。所謂扁平化設(shè)計(jì)，簡單來說就是去掉類似漸變、陰影、3D等仿真的視覺效果，主要使用簡單的純色塊，使得頁面看上去更凸顯“平面”的風(fēng)格。目前，國內(nèi)外很多主流網(wǎng)站或移動(dòng)端App均采用了扁平式設(shè)計(jì)風(fēng)格，國外的如iOS、Facebook、Google和Twitter等，國內(nèi)的如微信、淘寶、百度等。在本章，通過實(shí)際設(shè)計(jì)一個(gè)扁平化風(fēng)格頁面，來幫助讀者學(xué)習(xí)基于Bootstrap框架設(shè)計(jì)扁平化風(fēng)格頁面的方法。本章主要內(nèi)容包括：了解扁平化風(fēng)格設(shè)計(jì)的概念Bootstrap中的頁眉設(shè)計(jì)Bootstrap中的左側(cè)導(dǎo)航設(shè)計(jì)Bootstrap中的頁面主體設(shè)計(jì)Bootstrap中的頁腳設(shè)計(jì)8.1扁平化設(shè)計(jì)概述本節(jié)我們先介紹Bootstrap扁平化風(fēng)格設(shè)計(jì)的一些基本概念及內(nèi)容，讓讀者對扁平化風(fēng)格設(shè)計(jì)有一個(gè)初步的了解。8.1.1介紹細(xì)講起來很有意思，扁平化風(fēng)格設(shè)計(jì)似乎經(jīng)歷過一個(gè)輪回。在20世紀(jì)90年代初期，桌面應(yīng)用和網(wǎng)頁應(yīng)用都是“扁扁平平”的樣式，當(dāng)然那時(shí)還沒有移動(dòng)App的概念，該階段的扁平風(fēng)格在今天看來可以用“粗糙”“丑陋”來形容了。這是因?yàn)檐浻布夹g(shù)所限，大部分操作系統(tǒng)也剛剛從“黑白藍(lán)屏”的控制臺(tái)界面進(jìn)入圖形界面，像漸變、陰影和3D這些風(fēng)格還是新鮮事物。后來隨著軟硬件技術(shù)的突飛猛進(jìn)，界面的各種風(fēng)格效果也應(yīng)運(yùn)而生，漸漸成為主流。不過，這個(gè)世界就是變化太快。這里，我們要著重提一下的就是偉大的、特立獨(dú)行的SteveJobs，是他的Apple公司在iOS系統(tǒng)中率先將全新的扁平化風(fēng)格呈現(xiàn)給用戶，并隨著iPhone、iPad和MacBook終端設(shè)備的大獲成功，將這種扁平化風(fēng)格設(shè)計(jì)再次變成了新的潮流。好的設(shè)計(jì)理念總是大家學(xué)習(xí)的風(fēng)向標(biāo)，扁平化風(fēng)格設(shè)計(jì)給用戶所帶來的簡潔明快的視覺沖擊與操作體驗(yàn)是無與倫比的，本書所介紹的Bootstrap框架自然也容納了這種全新設(shè)計(jì)理念。8.1.2設(shè)計(jì)理念Bootstrap框架扁平化風(fēng)格設(shè)計(jì)的理念是緊跟潮流的，如今從網(wǎng)頁到移動(dòng)App均在使用扁平化的設(shè)計(jì)風(fēng)格。這種設(shè)計(jì)風(fēng)格在手機(jī)上的優(yōu)勢尤其明顯，由于屏幕大小的限制、更少功能按鈕和選項(xiàng)將使得界面干凈整齊，操作簡單。下面從以下幾個(gè)方面大致概括一下扁平化風(fēng)格的設(shè)計(jì)特點(diǎn)。拋棄特效扁平化風(fēng)格設(shè)計(jì)核心的理念就是拋棄一切效果，例如陰影、透視、紋理、漸變和3D等。這一設(shè)計(jì)理念趨勢極力避免任何擬物化設(shè)計(jì)的元素，有著鮮明的視覺效果。扁平化風(fēng)格設(shè)計(jì)的元素之間有清晰的層次和布局，這使得用戶能直觀地了解每個(gè)元素的作用以及交互方式。元素外形與配色扁平化風(fēng)格設(shè)計(jì)通常采用許多簡單的用戶界面元素，例如按鈕和圖標(biāo)之類。這些按鈕和圖標(biāo)具有極其簡單的外形，邊角也以直角為主（很少采用圓角）。此外，扁平化風(fēng)格設(shè)計(jì)中配色也是最重要的一環(huán)，通常采用更明亮、簡潔的配色方案。設(shè)計(jì)中往往傾向于使用單色調(diào)，尤其是純色，并且不做任何淡化或柔化處理（最受歡迎的顏色是純色和二次色），另外注入復(fù)古色（淺橙、紫色、綠色、藍(lán)色等）也很流行。當(dāng)然，不要以為簡單的形狀和純色系的配色就很容易。據(jù)知，像iOS、Android和Window10這樣的主流操作系統(tǒng)，Google、Facebook和Twitter這樣門戶網(wǎng)站，操刀UI及美工制作的均是業(yè)界頂級的設(shè)計(jì)師。優(yōu)化排版由于扁平化設(shè)計(jì)使用特別簡單的元素，排版就成了很重要的一環(huán)，排版好壞直接影響視覺效果，甚至可能間接影響用戶體驗(yàn)。例如：字體是排版中很重要的一部分，通常扁平化風(fēng)格網(wǎng)站使用無襯線字體，會(huì)收到意想不到的效果。8.1.3頁面架構(gòu)下面介紹一個(gè)基于Bootstrap框架設(shè)計(jì)實(shí)現(xiàn)的扁平化風(fēng)格頁面。該頁面主要由頁眉導(dǎo)航條、左側(cè)導(dǎo)航菜單、頁面主體和頁面頁腳構(gòu)成，設(shè)計(jì)的思路是在實(shí)現(xiàn)扁平化樣式的基礎(chǔ)上，盡可能讓這個(gè)頁面更像一個(gè)網(wǎng)站的主頁，因此盡可能多地將各種頁面元素加入進(jìn)去。為了實(shí)現(xiàn)扁平化風(fēng)格頁面，我們引用了Bootstrap框架和jQuery框架所需要的腳本文件、樣式文件和資源文件，并自定義了幾個(gè)腳本文件、樣式文件和資源文件，且將同一類文件單獨(dú)存放在一個(gè)文件夾內(nèi)。具體源代碼目錄如圖8.1所示。圖8.1源代碼目錄如圖8.1所示，index.html文件為扁平化風(fēng)格頁面，css文件夾用于存放樣式文件，js文件夾用于存放腳本文件，資源文件存放于img文件夾內(nèi)。下面是頁面所引用的幾個(gè)重要css樣式文件的代碼（詳見源代碼ch08目錄中index.html文件）：01<!--Bootstrap-->

02<linkhref="css/bootstrap.min.css"rel="stylesheet">

03<!--FontIcons-->

04<linkhref="css/fonts.css"rel="stylesheet">

05<!--Responsive-->

06<linkhref="css/bootstrap-responsive.min.css"rel="stylesheet">

07<linkhref="css/responsive.css"rel="stylesheet">

08<!--MainStyle-->

09<linkhref="css/main.css"rel="stylesheet">

從以上代碼可以看到，樣式文件主要包括Bootstrap框架的庫文件、字體文件和自定義文件。下面是頁面所引用的幾個(gè)重要js腳本文件的代碼（詳見源代碼ch08目錄中index.html文件）：01<!--jQueryCore-->

02<scriptsrc="js/jquery-1.9.1.js"></script>

03<!--Bootstrap-->

04<scriptsrc="js/bootstrap.min.js"></script>

05<!--DefaultJS-->

06<scriptsrc="js/main.js"></script>

從以上代碼可以看到，腳本文件主要包括jQuery框架和Bootstrap框架的庫文件，以及自定義文件。8.2頁眉設(shè)計(jì)本節(jié)先介紹基于Bootstrap框架、設(shè)計(jì)扁平化風(fēng)格頁面頁眉的過程。通常一個(gè)頁面頁眉由一個(gè)頂部導(dǎo)航菜單組成，在該菜單內(nèi)部可以包含導(dǎo)航條圖標(biāo)、標(biāo)題和功能菜單等元素。8.2.1導(dǎo)航條基于Bootstrap框架實(shí)現(xiàn)一個(gè)扁平化頁面，我們先在頁面頁眉中設(shè)計(jì)一個(gè)導(dǎo)航條，下面看段代碼示例?！敬a8-1】是一段實(shí)現(xiàn)頁面頁眉導(dǎo)航條的設(shè)計(jì)（詳見源代碼ch08目錄中index.html文件）：01<header>

02<divclass="sticky-nav">

03

04</div>

05</header>

關(guān)于【代碼8-1】的分析如下：第01～05行代碼通過header標(biāo)簽實(shí)現(xiàn)了頁面頁眉。第02～04行代碼通過為div標(biāo)簽添加.sticky-nav類，實(shí)現(xiàn)了一個(gè)扁平化風(fēng)格的導(dǎo)航條，關(guān)于.sticky-nav樣式的定義可以參見css目錄下的main.css樣式文件。下面我們測試一下該頁面，頁面效果如圖8.2所示。圖8.2頁眉導(dǎo)航條8.2.2導(dǎo)航條圖標(biāo)定義好頁眉導(dǎo)航條后，繼續(xù)定義導(dǎo)航條圖標(biāo)，該圖標(biāo)通常就代表該網(wǎng)站的Logo，具有顯著的標(biāo)識性。既然是基于Bootstrap框架實(shí)現(xiàn)一個(gè)扁平化頁面，那么在頁面頭部導(dǎo)航菜單內(nèi)就設(shè)計(jì)一個(gè)與Bootstrap相關(guān)的圖標(biāo)，下面看段代碼示例?！敬a8-2】是一段實(shí)現(xiàn)頁眉導(dǎo)航條圖標(biāo)的設(shè)計(jì)（詳見源代碼ch08目錄中index.html文件）：01<divid="logo">

02<aid="goUp"href="#id-home-slider"title="Bootstrap|FlatPage"></a>

03</div>

關(guān)于【代碼8-2】的分析如下：第01行代碼通過div標(biāo)簽實(shí)現(xiàn)了頁眉Logo。第02行代碼通過為a標(biāo)簽頁眉Logo定義了超鏈接，同時(shí)通過title屬性定義了標(biāo)簽提示信息"Bootstrap|FlatPage"。下面我們測試一下該頁面，頁面效果如圖8.3所示。圖8.3頁眉導(dǎo)航條圖標(biāo)可能讀者奇怪Logo圖標(biāo)的源文件在哪里呢？其實(shí)該圖標(biāo)文件是定義在main.css樣式文件中的?！敬a8-3】是一段實(shí)現(xiàn)頁眉導(dǎo)航條圖標(biāo)的樣式代碼（詳見源代碼ch08目錄中css/main.css文件）：01header#logoa{

02background:url(../img/logo.png)no-repeat;

03

04}

關(guān)于【代碼8-3】的分析如下：第01行代碼通過“header→#logo→a”這樣的層級選擇器，指定到a標(biāo)簽元素。第02行代碼，通過background屬性為a標(biāo)簽定義背景圖標(biāo)，url地址為“url(../img/logo.png)”。經(jīng)過【代碼8-3】的定義，【代碼8-2】中的超鏈接a標(biāo)簽就會(huì)將圖標(biāo)顯示在頁面中，如圖8.3所示。8.2.3導(dǎo)航條功能菜單下面我們繼續(xù)定義導(dǎo)航條功能菜單，這樣的設(shè)計(jì)模式是絕大多數(shù)網(wǎng)站主頁比較常用的，且菜單通常都是右對齊的。下面我們看段代碼示例?！敬a8-4】是一段實(shí)現(xiàn)頁眉導(dǎo)航條功能菜單的設(shè)計(jì)（詳見源代碼ch08目錄中index.html文件）：01<navid="menu">

02<ulid="menu-nav">

03<liclass="current"><ahref="#id-home-slider">Home</a></li>

04<li><ahref="#id-projects">Projects</a></li>

05<li><ahref="#id-contacts">Contacts</a></li>

06<li><ahref="#id-about">About</a></li>

07</ul>

08</nav>

關(guān)于【代碼8-4】的分析如下：第01～08行代碼通過nav標(biāo)簽實(shí)現(xiàn)了導(dǎo)航條，id屬性定義為"menu"，代表其為菜單功能。第02～07行代碼通過為ul和li標(biāo)簽組定義了功能菜單，其中第03行代碼通過class="current"樣式定義將“Home”菜單定義為默認(rèn)的選中項(xiàng)，并且為每個(gè)菜單項(xiàng)定義了超鏈接分別指向頁面中不同的錨點(diǎn)。下面我們繼續(xù)測試一下該頁面，頁面效果如圖8.4所示。圖8.4頁眉導(dǎo)航條功能菜單都知道Bootstrap框架不單單適用于桌面應(yīng)用，針對移動(dòng)端應(yīng)用的功能也是十分強(qiáng)大的。下面看一下Bootstrap框架是如何為移動(dòng)端應(yīng)用做優(yōu)化體驗(yàn)的?！敬a8-5】將前面關(guān)于導(dǎo)航條圖標(biāo)、功能菜單的代碼整合在了一起（詳見源代碼ch08目錄中index.html文件）：01<header>

02<divclass="sticky-nav">

03<aid="mobile-nav"class="menu-nav"href="#menu-nav"></a>

04<divid="logo">

05<aid="goUp"href="#id-home-slider"title="Bootstrap|FlatPage"></a>

06</div>

07<navid="menu">

08<ulid="menu-nav">

09<liclass="current"><ahref="#id-home-slider">Home</a></li>

10<li><ahref="#id-projects">Projects</a></li>

11<li><ahref="#id-contacts">Contacts</a></li>

12<li><ahref="#id-about">About</a></li>

13</ul>

14</nav>

15</div>

16</header>

關(guān)于【代碼8-5】的分析如下：注意到第03行代碼定義了一個(gè)a超鏈接標(biāo)簽元素，其id值定義為"mobile-nav"；但似乎該元素既沒有被顯示出來，又沒有什么具體功能。其實(shí)不然，下面將頁面分辨率調(diào)整到手機(jī)屏幕大小測試一下，頁面效果如圖8.5所示。圖8.5頁眉導(dǎo)航條功能菜單圖標(biāo)從圖8.5中可以看到，頁眉導(dǎo)航條的功能菜單不見了，被一個(gè)圖標(biāo)樣式所替代了，是不是和移動(dòng)端App很像了呢？下面繼續(xù)點(diǎn)擊該圖標(biāo)測試一下，頁面效果如圖8.6所示。圖8.6頁眉導(dǎo)航條下拉菜單從圖8.6中可以看到，原來橫排放置的菜單經(jīng)過瀏覽器屏幕大小的調(diào)整后，自動(dòng)調(diào)整為下拉菜單模式了，這就是【代碼8-5】第03行代碼中a標(biāo)簽元素的作用。如果我們再次點(diǎn)擊右上角的“關(guān)閉”圖標(biāo)，下拉菜單會(huì)隱藏回去，恢復(fù)到圖8.5的狀態(tài)。那么這個(gè)功能是如何實(shí)現(xiàn)的呢？【代碼8-6】中的樣式代碼實(shí)現(xiàn)了上面的功能（詳見源代碼ch08目錄中css/responsive.js文件）：01@media(min-width:768px)and(max-width:979px){

02#menu{

03display:none;

04}

05#mobile-nav{

06display:block;

07float:right;

08}

09#menu-nav-mobile{

10margin:0;

11}

12

13}

14@media(min-width:481px)and(max-width:767px){

15#menu{

16display:none;

17}

18#mobile-nav{

19display:block;

20float:right;

21}

22#menu-nav-mobile{

23margin-left:-20px;

24margin-right:-20px;

25margin-bottom:0;

26}

27

28}

29@media(max-width:480px){

30#menu{

31display:none;

32}

33#mobile-nav{

34display:block;

35float:right;

36}

37#menu-nav-mobile{

38margin-left:-20px;

39margin-right:-20px;

40margin-bottom:0;

41}

42#id-navigation-mobilelia{

43font-size:14px;

44padding:12px0;

45}

46

47}

關(guān)于【代碼8-6】的分析如下：第01行、第14行和第29行代碼通過@media標(biāo)簽針對不同的屏幕尺寸寬度定義了導(dǎo)航功能菜單的顯示樣式。注意到第02～04行代碼、第15～17行代碼和第30～32行代碼中，均為id值為'menu'元素（在【代碼8-5】的第07行代碼中定義，具體為<nav>導(dǎo)航菜單）定義了'display:none;'屬性，其含義為顯示屬性為“none”，也就是在頁面中不顯示該元素；這就是當(dāng)我們向下調(diào)整瀏覽器尺寸寬度時(shí)，導(dǎo)航菜單消失的原理。同時(shí)，注意到第05～08行代碼、第18～21行代碼和第33～36行代碼中，均為id值為'mobile-nav'元素（在【代碼8-5】的第03行代碼中定義，具體為<a>超鏈接元素）定義了'display:block;float:right;'屬性，其含義為顯示屬性為“block”，也就是在頁面中顯示該元素，且右對齊顯示；這就是當(dāng)導(dǎo)航菜單消失時(shí)，顯示導(dǎo)航菜單鏈接圖標(biāo)的原理。那么如圖8.6所示，當(dāng)我們點(diǎn)擊導(dǎo)航菜單鏈接圖標(biāo)后，下拉菜單是如何顯示出來的呢？【代碼8-7】中的腳本代碼實(shí)現(xiàn)了上面的功能（詳見源代碼ch08目錄中js/main.js文件）：01//define#menu'scloneobj

02varcloneMobileMenu=$('#menu').clone().attr('id','id-navigation-mobile');

03//onclickfunc

04$('#mobile-nav').on('click',function(e){

05$(this).toggleClass('open');

06if($('#mobile-nav').hasClass('open')){

07$('#id-navigation-mobile').slideDown(500,'easeOutExpo');

08}else{

09$('#id-navigation-mobile').slideUp(500,'easeOutExpo');

10}

11e.preventDefault();

12});

關(guān)于【代碼8-7】的分析如下：第02行代碼定義了一個(gè)id值為'menu'元素的克隆副本對象（變量名為“cloneMobileMenu”），該元素的定義在【代碼8-5】的第07行代碼中，具體是一個(gè)<nav>導(dǎo)航標(biāo)簽；同時(shí)，第02行代碼通過attr()方法為該克隆副本對象定義了id屬性值為'id-navigation-mobile'。第04～12行代碼為id值為'mobile-nav'的元素（在【代碼8-5】的第03行代碼中定義，具體為<a>超鏈接元素）定義了“click”事件方法；第07行和第09行代碼通過slideDown()方法和slideUp()方法實(shí)現(xiàn)了克隆副本對象'id-navigation-mobile'的顯示與隱藏，其實(shí)就是下拉導(dǎo)航功能菜單顯示與隱藏的原理。8.2.4頁眉標(biāo)題目前主流的頁面頁眉設(shè)計(jì)方式，通常會(huì)在導(dǎo)航條之下設(shè)計(jì)一個(gè)標(biāo)題區(qū)域，用于描述網(wǎng)站主題等核心內(nèi)容。下面看段代碼示例?！敬a8-8】是一段實(shí)現(xiàn)頁眉標(biāo)題的設(shè)計(jì)（詳見源代碼ch08目錄中index.html文件）：01<!--Title>

02<divclass="row">

03<divclass="span12">

04<divclass="title">

05<h2class="title">BootstrapProjects</h2>

06<h3class="title-description">Normally,thisareaisdesignforheaderofpage.</h3>

07</div>

08</div>

09</div>

10<!--EndTitle>

關(guān)于【代碼8-8】的分析如下：第02～09行代碼通過div標(biāo)簽實(shí)現(xiàn)了頁眉標(biāo)題區(qū)域，其中class屬性定義為"row"代表該區(qū)域?yàn)橐徽小５?3～08行代碼通過class="span12"樣式的定義，表示該標(biāo)題區(qū)域共含有12列，這也是Bootstrap框架為頁面所預(yù)定義的列數(shù)。第04～07行代碼通過class="title"樣式的定義，表示該div標(biāo)簽元素為標(biāo)題頁樣式；第05行代碼通過class="title"樣式定義了標(biāo)題文本；第06行代碼通過class="title-description"樣式定義了副標(biāo)題描述文本；關(guān)于"title"、"title"和"title-description"樣式的定義，讀者可以參考css/main.css樣式文件。下面繼續(xù)測試一下該頁面，頁眉標(biāo)題的效果如圖8.7所示。圖8.7頁眉標(biāo)題8.3左側(cè)導(dǎo)航設(shè)計(jì)本節(jié)繼續(xù)介紹基于Bootstrap框架、設(shè)計(jì)扁平化風(fēng)格頁面左側(cè)導(dǎo)航菜單的過程。通常左側(cè)導(dǎo)航菜單是按照功能設(shè)計(jì)每一項(xiàng)菜單，其作用是方便用戶快速鏈接到頁面中指定的內(nèi)容區(qū)域上。下面具體看一下代碼。【代碼8-9】是一段實(shí)現(xiàn)頁面左側(cè)導(dǎo)航菜單的設(shè)計(jì)（詳見源代碼ch08目錄中index.html文件）：01<divclass="row">

02<divclass="span3">

03<navid="options"class="work-nav">

04<ulid="filters"class="option-set"data-option-key="filter">

05<liclass="type-work">Navbar</li>

06<li><ahref="#filter"data-option-value="*"class="selected">AllProjects</a></li>

07<li><ahref="#filter"data-option-value=".contact">Contacts</a></li>

08<li><ahref="#filter"data-option-value=".about">About</a></li>

09</ul>

10</nav>

11</div>

12……

13</div>

關(guān)于【代碼8-9】的分析如下：第02～11行代碼通過div標(biāo)簽元素定義了左側(cè)導(dǎo)航區(qū)域，其中通過class="span3"樣式的定義，表示該導(dǎo)航菜單共含有3列。第03～10行代碼通過nav標(biāo)簽元素定義了一個(gè)id值為"options"的導(dǎo)航條，并添加了class="work-nav"樣式。第04～09行代碼通過ul和li標(biāo)簽元素定義了一組導(dǎo)航菜單；其中，第05行代碼定義的菜單項(xiàng)添加了class="type-work"樣式。下面繼續(xù)測試一下該頁面，頁眉標(biāo)題的效果如圖8.8所示。圖8.8左側(cè)導(dǎo)航（一）將頁面分辨率調(diào)整到手機(jī)屏幕大小測試一下，頁面效果如圖8.9所示。圖8.9左側(cè)導(dǎo)航（二）從圖8.9中可以看到，原來垂直排列的左側(cè)導(dǎo)航條經(jīng)過瀏覽器屏幕大小的調(diào)整后，自動(dòng)調(diào)整為水平排列樣式了，同時(shí)“NAVBAR”字樣也變化為一個(gè)圖標(biāo)了。這個(gè)功能是如何實(shí)現(xiàn)的呢？【代碼8-10】中的樣式代碼實(shí)現(xiàn)了上面的功能（詳見源代碼ch08目錄中css/responsive.js文件）：01@media(min-width:481px)and(max-width:767px){

02

03.type-work{

04background:url(../img/filter-icon.png)no-repeat;

05width:16px;

06height:16px;

07display:inline-block;

08text-indent:-9999px;

09margin-bottom:0;

10position:relative;

11line-height:10px;

12}

13

14}

15@media(max-width:480px){

16

17.type-work{

18background:url(../img/filter-icon.png)no-repeat;

19width:16px;

20height:16px;

21display:inline-block;

22text-indent:-9999px;

23margin-bottom:0;

24position:relative;

25line-height:10px;

26}

27

28}

關(guān)于【代碼8-10】的分析如下：第01行和第28行代碼通過@media標(biāo)簽針對不同的屏幕尺寸寬度定義了左側(cè)導(dǎo)航條的顯示樣式。第03～12行代碼和第17～26行代碼分別針對不同的屏幕分辨率定義了.type-work樣式類的屬性（.type-work樣式的引用參見【代碼8-9】中第05行代碼）；其中，第04行和第18行代碼通過background屬性引用了一個(gè)圖標(biāo)資源文件，這就是【代碼8-9】中第05行代碼定義的“Navbar”字樣會(huì)根據(jù)屏幕尺寸變?yōu)閳D標(biāo)的原理。8.4頁面主體設(shè)計(jì)本節(jié)繼續(xù)介紹基于Bootstrap框架、設(shè)計(jì)扁平化風(fēng)格頁面主體的過程。通常一個(gè)頁面主體就是網(wǎng)站具體內(nèi)容的體現(xiàn)，內(nèi)容可以根據(jù)類別分別顯示在不同的區(qū)域內(nèi)，每個(gè)區(qū)域可以定義一個(gè)錨點(diǎn)，用于與導(dǎo)航菜單項(xiàng)進(jìn)行關(guān)聯(lián)，以便于用戶進(jìn)行瀏覽操作。8.4.1圖片列表首先，在扁平化頁面主體中設(shè)計(jì)一個(gè)圖片列表，與導(dǎo)航菜單中的“Projects”項(xiàng)進(jìn)行關(guān)聯(lián)。下面看段代碼示例?！敬a8-11】是一段實(shí)現(xiàn)頁面主體圖片列表的設(shè)計(jì)（詳見源代碼ch08目錄中index.html文件）：01<divclass="span9">

02<divclass="row">

03<sectionid="id-projects">

04<ulid="thumbs">

05<liclass="span3">

06<imgsrc="img/work/thumbs/image-01.jpg"alt="bootstrapprojects.">

07</li>

08<liclass="span3">

09<imgsrc="img/work/thumbs/image-02.jpg"alt="bootstrapprojects.">

10</li>

11<liclass="span3">

12<imgsrc="img/work/thumbs/image-03.jpg"alt="bootstrapprojects.">

13</li>

14<liclass="span3">

15<imgsrc="img/work/thumbs/image-04.jpg"alt="bootstrapprojects.">

16</li>

17<liclass="span3">

18<imgsrc="img/work/thumbs/image-05.jpg"alt="bootstrapprojects.">

19</li>

20<liclass="span3">

21<imgsrc="img/work/thumbs/image-06.jpg"alt="bootstrapprojects.">

22</li>

23</ul>

24</section>

25</div>

26

27</div>

關(guān)于【代碼8-11】的分析如下：第01～27行代碼通過div標(biāo)簽元素定義了圖片列表區(qū)域，其中通過class="span9"樣式的定義，表示該區(qū)域共含有9列（與【代碼8-9】中第02行代碼定義的class="span3"樣式相對應(yīng)，這兩個(gè)區(qū)域相加正好為Bootstrap框架預(yù)定義的12列）。第03行代碼為section標(biāo)簽元素定義的id值為"id-projects"，我們注意到【代碼8-4】中第04行代碼所引用的href屬性值就是此id值，這樣點(diǎn)擊【代碼8-4】中第04行代碼所定義得導(dǎo)航菜單項(xiàng)就會(huì)鏈接到此圖片列表區(qū)域。第04～23行代碼通過ul與li標(biāo)簽元素定義了一組圖片列表，其中每個(gè)圖片的寬度定義為3列（class="span3"）。下面測試一下該頁面，頁面效果如圖8.10所示。下面將頁面分辨率調(diào)整到手機(jī)屏幕大小測試一下，頁面效果如圖8.11所示。圖8.10圖片列表（一）圖8.11圖片列表（二）8.4.2提交表單繼續(xù)在扁平化頁面主體中設(shè)計(jì)一個(gè)提交表單，與導(dǎo)航菜單中的“Contacts”項(xiàng)進(jìn)行關(guān)聯(lián)。下面看段代碼示例?！敬a8-12】是一段實(shí)現(xiàn)頁面主體提交表單的設(shè)計(jì)（詳見源代碼ch08目錄中index.html文件）：01<divclass="row">

02<sectionid="id-contacts"class="page">

03<divclass="container">

04<!--Title>

05<divclass="row">

06<divclass="span9">

07<divclass="title">

08<h2class="title">EmailSection</h2>

09<h3class="title-description">Thisisanemailsection,pleasesendyourmessage.</h3>

10</div>

11</div>

12</div>

13<!--EndTitle>

14<!--ContactForm-->

15<divclass="row">

16<divclass="span6">

17<formid="contact-form"class="contact-form"action="#">

18<pclass="contact-name">

19<inputid="contact_name"type="text"placeholder="FullName"value=""name="name"/>

20</p>

21<pclass="contact-email">

22<inputid="contact_email"type="text"placeholder="EmailAddress"value=""name="email"/>

23</p>

24<pclass="contact-message">

25<textareaid="contact_message"placeholder="YourMessage"name="message"rows="10"cols="40"></textarea>

26</p>

27<pclass="contact-submit">

28<aid="contact-submit"class="submit"href="#">SendYourEmail</a>

29</p>

30<divid="response">

31</div>

32</form>

33</div>

34<divclass="span3">

35<divclass="contact-details">

36<h3>ContactDetails</h3>

37<ul>

38<li><ahref="#">flat@</a></li>

39<li>(086lt;/li>

40<li>

41BootstrapStudio

42<br>

43888PEKDistrict.123

44<br>

45Unknow

46</li>

47</ul>

48</div>

49</div>

50</div>

51<!--EndContactForm-->

52</div>

53</section>

54</div>

關(guān)于【代碼8-12】的分析如下：第01～54行代碼通過div標(biāo)簽元素定義了提交表單區(qū)域。第02行代碼為section標(biāo)簽元素定義的id值為"id-contacts"，我們注意到【代碼8-4】中第05行代碼所引用的href屬性值就是此id值，這樣點(diǎn)擊【代碼8-4】中第05行代碼所定義的導(dǎo)航菜單項(xiàng)就會(huì)鏈接到此提交表單區(qū)域。第05～12行代碼定義了提交表單的標(biāo)題。第16～33行代碼定義了提交表單的一組輸入框，包括兩個(gè)input標(biāo)簽、一個(gè)textarea標(biāo)簽和一個(gè)提交按鈕。第35～48行代碼定義了提交表單右側(cè)的用戶信息內(nèi)容。下面測試一下該頁面，頁面效果如圖8.12所示。圖8.12提交表單（一）下面將頁面分辨率調(diào)整到手機(jī)屏幕大小測試一下，頁面效果如圖8.13所示。圖8.13提交表單（二）8.4.3文本列表先在扁平化頁面主體中設(shè)計(jì)一個(gè)文本列表，與導(dǎo)航菜單中的“About”項(xiàng)進(jìn)行關(guān)聯(lián)。下面看段代碼示例?！敬a8-13】是一段實(shí)現(xiàn)頁面主體文本列表的設(shè)計(jì)（詳見源代碼ch08目錄中index.html文件）：01<divclass="row">

02<!--AboutSection-->

03<sectionid="id-about"class="alternate">

04<divclass="container">

05<!--Title>

06<divclass="row">

07<divclass="span9">

08<divclass="title">

09<h2class="title">AboutBootstrap</h2>

10<h3class="title-description">LearnAboutBootstrap.</h3>

11</div>

12</div>

13</div>

14<!--EndTitle>

15<!--Bootstrap-->

16<divclass="row">

17<!--StartProfile-->

18<divclass="span3about">

19<h3class="profile-name">Boostrap</h3>

20<pclass="profile-description">BootstrapisthemostpopularHTML,CSS,andJSframeworkfordevelopingresponsive,mobilefirstprojectsontheweb.</p>

21<pclass="profile-description">BootstrapisthemostpopularHTML,CSS,andJSframeworkfordevelopingresponsive,mobilefirstprojectsontheweb.</p>

22</div>

23<!--EndProfile-->

24<!--StartProfile-->

25<divclass="span3about">

26<h3class="profile-name">CSS</h3>

27<pclass="profile-description">BootstrapisthemostpopularHTML,CSS,andJSframeworkfordevelopingresponsive,mobilefirstprojectsontheweb.</p>

28<pclass="profile-description">BootstrapisthemostpopularHTML,CSS,andJSframeworkfordevelopingresponsive,mobilefirstprojectsontheweb.</p>

29</div>

30<!--EndProfile-->

31<!--StartProfile-->

32<divclass="span3about">

33<h3class="profile-name">JavaScript</h3>

34<pclass="profile-description">BootstrapisthemostpopularHTML,CSS,andJSframeworkfordevelopingresponsive,mobilefirstprojectsontheweb.</p>

35<pclass="profile-description">BootstrapisthemostpopularHTML,CSS,andJSframeworkfordevelopingresponsive,mobilefirstprojectsontheweb.</p>

36</div>

37<!--EndProfile-->

38</div>

39<!--EndBootstrap-->

40</div>

41</section>

42<!--EndAboutSection-->

43</div>

關(guān)于【代碼8-13】的分析如下：第01～43行代碼通過div標(biāo)簽元素定義了文本列表區(qū)域。第03行代碼為section標(biāo)簽元素定義的id值為"id-about"，我們注意到【代碼8-4】中第06行代碼所引用的href屬性值就是此id值，這樣點(diǎn)擊【代碼8-4】中第06行代碼所定義得導(dǎo)航菜單項(xiàng)就會(huì)鏈接到此文本列表區(qū)域。第06～13行代碼定義了文本列表的標(biāo)題。第16～38行代碼定義了文本列表的具體內(nèi)容。下面測試一下該頁面，頁面效果如圖8.14所示。圖8.14文本列表（一）下面將頁面分辨率調(diào)整到手機(jī)屏幕大小測試一下，頁面效果如圖8.15所示。圖8.15文本列表（二）8.5頁腳設(shè)計(jì)本節(jié)我們繼續(xù)介紹基于Bootstrap框架、設(shè)計(jì)扁平化風(fēng)格頁面頁腳的過程。通常在頁面頁腳中會(huì)加入一些版權(quán)注冊信息、公司信息、作者信息和版本日期等內(nèi)容。下面具體看一下代碼?！敬a8-14】是一段實(shí)現(xiàn)頁面頁腳的設(shè)計(jì)（詳見源代碼ch08目錄中index.html文件）：01<footer>

02<pclass="credits">©Copyright©2016.BootstrapAllrightsreserved.Designedbyking.</p>

03</footer>

關(guān)于【代碼8-14】的分析如下：第01～03行代碼通過footer標(biāo)簽元素定義了頁面頁腳。第02行代碼通過p標(biāo)簽元素定義了一些相關(guān)信息。下面繼續(xù)測試一下該頁面，頁面頁腳效果如圖8.16所示。圖8.16頁面頁腳8.6本章小結(jié)本章主要介紹了應(yīng)用Bootstrap框架設(shè)計(jì)實(shí)現(xiàn)扁平化風(fēng)格頁面的方法，然后對常見頁面的頁眉、主題、導(dǎo)航、頁腳的設(shè)計(jì)進(jìn)行了講解，希望對讀者有一定的幫助。第9章

Bootstrap圖片幻燈頁面本章介紹如何應(yīng)用Bootstrap框架設(shè)計(jì)圖片幻燈風(fēng)格的頁面，包括圖標(biāo)、幻燈和圖片特輯等元素。具體通過設(shè)計(jì)一個(gè)圖片幻燈頁面將以上元素包含進(jìn)去，幫助讀者學(xué)習(xí)了解設(shè)計(jì)圖片幻燈風(fēng)格頁面的基本方法。本章主要內(nèi)容包括：認(rèn)識圖片幻燈風(fēng)格頁面學(xué)習(xí)圖片幻燈頁面的頁眉設(shè)計(jì)圖片幻燈風(fēng)格頁面的主題設(shè)計(jì)9.1圖片幻燈風(fēng)格頁面設(shè)計(jì)概述本節(jié)先介紹Bootstrap圖片幻燈風(fēng)格頁面設(shè)計(jì)的一些基本內(nèi)容。該頁面主要由頁眉導(dǎo)航條、頁面主體和頁面頁腳構(gòu)成，其中頁面主體依次加入了幻燈、圖標(biāo)和圖片特輯等元素。為了實(shí)現(xiàn)圖片幻燈風(fēng)格頁面，我們引用了Bootstrap框架和jQuery框架所需要的腳本文件、樣式文件和資源文件，并自定義了相關(guān)樣式文件和資源文件。具體源代碼目錄如圖9.1所示。圖9.1源代碼目錄如圖9.1所示，index.html文件為圖片幻燈風(fēng)格頁面，dist文件夾用于存放Bootstrap框架的庫文件，js文件夾用于存放jQuery框架的庫文件，css文件夾用于存放自定義樣式文件，資源文件存放于img文件夾內(nèi)。下面是頁面所引用的部分重要css樣式文件的代碼?！敬a9-1】（詳見源代碼ch09目錄中index.html文件）01<!--BootstrapcoreCSS-->

02<linkhref="dist/css/bootstrap.min.css"rel="stylesheet">

03<!--Customstylesforthistemplate-->

04<linkhref="css/carousel.css"rel="stylesheet">

從以上代碼可以看到，樣式文件主要包括Bootstrap框架的庫文件和自定義文件。下面是頁面所引用的部分重要js腳本文件的代碼?！敬a9-2】（詳見源代碼ch09目錄中index.html文件）01<!--jQuerycoreJS-->

02<scriptsrc="js/jquery-1.9.1.js"></script>

03<!--BootstrapcoreJS-->

04<scriptsrc="dist/js/bootstrap.min.js"></script>

05<scriptsrc="dist/js/docs.min.js"></script>

從以上代碼可以看到，腳本文件主要包括jQuery框架和Bootstrap框架的庫文件。9.2頁眉設(shè)計(jì)本節(jié)先介紹設(shè)計(jì)圖片幻燈風(fēng)格頁面頁眉的過程。通常一個(gè)頁面頁眉由一個(gè)頂部導(dǎo)航菜單組成，在該菜單內(nèi)部可以包含導(dǎo)航條圖標(biāo)、標(biāo)題和功能菜單等元素。下面是關(guān)于實(shí)現(xiàn)圖片幻燈風(fēng)格頁面頁眉的代碼?！敬a9-3】（詳見源代碼ch09目錄中index.html文件）01<divclass="navbar-wrapper">

02<divclass="container">

03<navclass="navbarnavbar-inversenavbar-static-top"role="navigation">

04<divclass="container">

05<divclass="navbar-header">

06<buttontype="button"class="navbar-togglecollapsed"data-toggle="collapse"data-target="#navbar"aria-expanded="false"aria-controls="navbar">

07<spanclass="sr-only">Togglenavigation</span>

08<spanclass="icon-bar"></span>

09<spanclass="icon-bar"></span>

10<spanclass="icon-bar"></span>

11</button>

12<aclass="navbar-brand"href="#">Bootstrap</a>

13</div>

14<divid="navbar"class="navbar-collapsecollapse">

15<ulclass="navnavbar-nav">

16<liclass="active"><ahref="#">Home</a></li>

17<li><ahref="#id-carousel">Carousel</a></li>

18<li><ahref="#id-images">images</a></li>

19<li><ahref="#id-featurette">featurette</a></li>

20</ul>

21</div>

22</div>

23</nav>

24</div>

25</div>

關(guān)于【代碼9-3】的分析如下：第01～25行代碼通過為div標(biāo)簽添加class="navbar-wrapper"樣式類實(shí)現(xiàn)了一個(gè)導(dǎo)航條容器。第03～23行代碼通過nav標(biāo)簽定義了一個(gè)導(dǎo)航，并通過添加"navbarnavbar-inversenavbar-static-top"樣式類，將導(dǎo)航定義為固定在頂部的靜態(tài)樣式。第04～22行代碼定義了導(dǎo)航條內(nèi)的具體元素，包括第05～13行代碼和第14～21行代碼定義的導(dǎo)航菜單；其中，第05～13行代碼定義的導(dǎo)航菜單用于在移動(dòng)App應(yīng)用的瀏覽器中顯示，第14～21行代碼定義的導(dǎo)航菜單用于在正常桌面應(yīng)用的瀏覽器中顯示，其設(shè)計(jì)原理與前面第8章中介紹的頁眉設(shè)計(jì)原理是基本一致的，此處就不深入分析了。第14～21行代碼定義了導(dǎo)航菜單項(xiàng)，其中每一項(xiàng)均定義了id屬性，其屬性值將與頁面主體中的錨點(diǎn)相關(guān)聯(lián)。下面測試一下該頁面，桌面應(yīng)用的頁面效果如圖9.2所示。圖9.2頁眉導(dǎo)航條（一）移動(dòng)應(yīng)用的頁面效果如圖9.3所示。圖9.3頁眉導(dǎo)航條（二）9.3頁面主體設(shè)計(jì)本節(jié)繼續(xù)介紹基于Bootstrap框架、設(shè)計(jì)圖片幻燈風(fēng)格頁面主體的過程，在該頁面中依次將加入圖片幻燈、圖標(biāo)和圖片特輯三種元素，這些頁面元素均是網(wǎng)頁設(shè)計(jì)中比較常用的。9.3.1圖片幻燈首先，在頁面主體中設(shè)計(jì)一個(gè)圖片幻燈，主要還是基于Bootstrap框架的Carousel插件來設(shè)計(jì)。下面是一段關(guān)于實(shí)現(xiàn)頁面主體圖片幻燈的代碼?！敬a9-4】（詳見源代碼ch09目錄中index.html文件）01<!--CarouselStart-->

02<divid="id-carousel"class="carouselslide"data-ride="carousel">

03<olclass="carousel-indicators">

04<lidata-target="#id-carousel"data-slide-to="0"class="active"></li>

05<lidata-target="#id-carousel"data-slide-to="1"></li>

06<lidata-target="#id-carousel"data-slide-to="2"></li>

07</ol>

08<divclass="carousel-inner"role="listbox">

09<divclass="itemactive">

10<imgsrc="img/thumb/thumb-01.jpg"alt="Firstslide">

11<divclass="container">

12<divclass="carousel-caption">

13<h2>CarouselExamples</h2>

14</div>

15</div>

16</div>

17<divclass="item">

18<imgsrc="img/thumb/thumb-02.jpg"alt="Secondslide">

19<divclass="container">

20<divclass="carousel-caption">

21<h2>CarouselExamples</h2>

22</div>

23</div>

24</div>

25<divclass="item">

26<imgsrc="img/thumb/thumb-03.jpg"alt="Thirdslide">

27<divclass="container">

28<divclass="carousel-caption">

29<h2>CarouselExamples</h2>

30</div>

31</div>

32</div>

33</div>

34<aclass="leftcarousel-control"href="#id-carousel"role="button"data-slide="prev">

35<spanclass="glyphiconglyphicon-chevron-left"></span>

36<spanclass="sr-only">Previous</span>

37</a>

38<aclass="rightcarousel-control"href="#id-carousel"role="button"data-slide="next">

39<spanclass="glyphiconglyphicon-chevron-right"></span>

40<spanclass="sr-only">Next</span>

41</a>

42</div>

43<!--CarouselEnd-->

關(guān)于【代碼9-4】的分析如下：第02～42行代碼通過div標(biāo)簽元素定義了圖片幻燈區(qū)域，其中通過添加class="carouselslide"樣式類，來引用Bootstrap框架的Carousel插件。第03～07行代碼通過在<ol><li>標(biāo)簽組中使用class="carousel-indicators"類定義了幻燈插件的指示器，并通過使用“data-slide-to”屬性定義具體的幀下標(biāo)，幀下標(biāo)是從0開始計(jì)數(shù)的。第08～33行代碼通過在<div>標(biāo)簽中使用class="carousel-inner"類定義幻燈插件的主體部分；其中在第10行、第18行和第26行代碼中定義了幻燈所引用的具體圖片地址；在第11～15行代碼、第19～23行代碼和第27～31行代碼通過class="carousel-caption"類定義了幻燈插件的標(biāo)題信息。第34～37行代碼通過為<a>標(biāo)簽元素增加"leftcarousel-control"類定義了向左方向的控制按鈕，并通過使用“data-slide”屬性定義幻燈切換方向。同樣，第38～41行代碼通過為<a>標(biāo)簽元素增加"rightcarousel-control"類定義了向右方向的控制按鈕，并通過使用“data-slide”屬性定義幻燈切換方向。下面測試一下該頁面，頁面效果如圖9.4所示。圖9.4圖片幻燈（一）下面將頁面分辨率調(diào)整到手機(jī)屏幕大小測試一下，頁面效果如圖9.5所示。圖9.5圖片幻燈（二）9.3.2圖標(biāo)列表繼續(xù)在圖片幻燈頁面主體中設(shè)計(jì)一個(gè)圖標(biāo)列表。下面是一段關(guān)于實(shí)現(xiàn)圖標(biāo)列表的代碼?！敬a9-5】（詳見源代