Joomla 3：從零開始學(xué)設(shè)計(jì)模板

Joomla3-從零開始學(xué)設(shè)計(jì)模板目錄1. 什么是模板 11.1. 不同之處 21.1.1. 機(jī)器vs.人類 21.1.2. 作者會(huì)被替代嗎？ 21.1.3. 未來如何？ 21.2. 內(nèi)容的呈現(xiàn) 21.3. J 31.4. Joomla模板和風(fēng)格 41.5. 額……到底什么是Joomla模板？ 51.6. 我們將從零開始構(gòu)建一個(gè)與之相似的模板？ 52. 文件和目錄 62.1. 模板名稱 62.2. 文件和目錄 62.2.1. 目錄 62.2.2. 文件 62.3. 文件的內(nèi)容 62.3.1. index.php 72.3.2. templateDetails.xml 92.3.3. template.css 102.4. 檢測和安裝你的模板 103. 布局 123.1. 框架 123.2. Joomla3里的Bootstrap 123.3. 用Bootstrap設(shè)計(jì)布局很容易！ 133.3.1. 柵格系統(tǒng) 133.3.2. index.php里的兩列布局 143.4. 小結(jié) 15什么是模板此文參考：/zh-hans/book/1-shi-yao-shi-mo-ban當(dāng)你第一次在紙上用鉛筆涂鴉似地寫字的時(shí)候，你同時(shí)就開始了你的書法之旅。你的書法是你所寫的內(nèi)容和呈現(xiàn)該內(nèi)容的效果的綜合體。通過你所使用的筆的類型、紙張的類型、字跡的顏色、字體的類型、書寫的速度以及其它種種因素，你的書法才是吸引人（或者……是不吸引人）的。當(dāng)我們聰明絕頂?shù)南茸姘l(fā)明印刷術(shù)之后，經(jīng)過過去幾個(gè)世紀(jì)不斷的探索，我們現(xiàn)在已經(jīng)有了一套完美的印刷理論和方法。而盡管互聯(lián)網(wǎng)里的網(wǎng)站總數(shù)已超過了6億個(gè)，實(shí)際上互聯(lián)網(wǎng)還是很年輕的。對(duì)于“完美網(wǎng)站”設(shè)計(jì)的有關(guān)理論和方法的探索還剛剛開始。在開始我們的Joomla模板探索之旅前，請(qǐng)讓我們一起來看看現(xiàn)狀。不同之處手寫文稿、印刷書籍和網(wǎng)頁之間最大的差別在于可復(fù)制的數(shù)量和拷貝所花費(fèi)的時(shí)間：手寫文稿都是獨(dú)一無二的。如果想得到一個(gè)副本，你必須重寫一遍（除非之前寫的時(shí)候用了復(fù)寫紙）。可復(fù)制的數(shù)量取決于作者的書寫能力，或者老師的嚴(yán)厲程度（重抄作業(yè)的時(shí)候）。也就是說作者和抄寫者決定了一切。印刷書籍只需寫一次，然后交給印刷廠使用機(jī)器來復(fù)制。復(fù)制的數(shù)量取決于機(jī)器的能力和紙張的采購量。作者和印刷廠老板決定了一切。網(wǎng)站是儲(chǔ)存在服務(wù)器里的。當(dāng)你要瀏覽一個(gè)網(wǎng)站的時(shí)候，服務(wù)器就為你創(chuàng)建一個(gè)副本并將它發(fā)送到你的瀏覽器里。副本的數(shù)量是無限的。僅有的限制是服務(wù)器的能力和電力。作者和服務(wù)器的提供方?jīng)Q定了一切。已經(jīng)沒印刷廠什么事了。機(jī)器vs.人類網(wǎng)站和書籍相比的另一個(gè)不同點(diǎn)在于它被機(jī)器讀取的能力。手寫文稿和書籍可以掃描識(shí)別但對(duì)于掃描儀來說識(shí)別內(nèi)容是件復(fù)雜的工作。而一個(gè)像Joomla!一樣規(guī)范的網(wǎng)頁是很容易被機(jī)器讀取的。一篇手寫文稿或一本書常常是送達(dá)給一個(gè)人。一個(gè)網(wǎng)站則是送達(dá)給一個(gè)人和一臺(tái)機(jī)器（web服務(wù)），人常常是被網(wǎng)站的某種設(shè)計(jì)吸引過去的，而機(jī)器則更鐘意良好的結(jié)構(gòu)和純粹的內(nèi)容。作者會(huì)被替代嗎？送達(dá)給機(jī)器和（或）人的內(nèi)容必須先準(zhǔn)備好。以前作者就是人，但今天，我們越來越多地使用程序創(chuàng)建內(nèi)容。最常見的例子是自動(dòng)回復(fù)的emails，但實(shí)際上還有很多的例子以及越來越多的可能性（IntheUS,algorithmsarealreadyreportingthenews

-Guardian,2010）。

因此我們?nèi)匀恍枰髡?，但也可以由程序來替代作者。就?chuàng)建內(nèi)容而言，程序已經(jīng)成為一種營銷工具！未來如何？網(wǎng)站與其它網(wǎng)絡(luò)服務(wù)如社會(huì)化網(wǎng)絡(luò)的關(guān)系越來越密切。為了照顧不同的上網(wǎng)設(shè)備，用于展示網(wǎng)站的模板也需要越來越強(qiáng)的適應(yīng)性，例如屏幕尺寸、設(shè)備速度或者帶寬。內(nèi)容的呈現(xiàn)無論怎樣產(chǎn)生的，內(nèi)容最終都必須呈現(xiàn)給它的目標(biāo)群體。過去十年里，內(nèi)容管理系統(tǒng)前三甲們（Joomla,WordPress,Drupal）發(fā)展出了幾乎如出一轍的內(nèi)容呈現(xiàn)的技術(shù)系統(tǒng)：整個(gè)網(wǎng)站的內(nèi)容儲(chǔ)存在一個(gè)數(shù)據(jù)庫以及多媒體文件里。通過使用模板文件和不同的web框架，它的內(nèi)容可以以無限的方式送達(dá)到無限的目標(biāo)群體。我們剛才談到了“機(jī)器vs.人類”。這兩個(gè)群體又由很多的子群體所組成。例如，機(jī)器可以分為網(wǎng)絡(luò)爬蟲、新聞閱讀器、xml閱讀器、“代理”，等等。網(wǎng)站需要為每個(gè)群體提供一個(gè)特定的呈現(xiàn)，才能使之“理解”網(wǎng)站內(nèi)容。我之所以能夠?qū)C(jī)器分類，是因?yàn)檫@很容易。但說到人，分類就困難很多了。人可以被分成很多群組，但并不容易預(yù)期他們到底是哪些群組。因此設(shè)計(jì)模板就是一件充滿挑戰(zhàn)、樂趣和回報(bào)的工作。J我們通常所說的Joomla模板是為了吸引人而設(shè)計(jì)出來的。例如（圖1）。需要呈現(xiàn)給機(jī)器的部分相對(duì)比較簡單。例如“Joomla!功能擴(kuò)展庫”之新擴(kuò)展

/JoomlaExtensions...（圖2）。\o"ViewonFlickr.Toenlargeclickimage."EN001-joomla

1年前

前作者：

\o"ViewuseronFlickr."ChristineundHagenGraf.圖1：\o"ViewonFlickr.Toenlargeclickimage."EN002-rss

1年前

前作者：

\o"ViewuseronFlickr."ChristineundHagenGraf.圖2：新擴(kuò)展的RSS種子Joomla模板和風(fēng)格Joomla本身是包含有幾個(gè)前臺(tái)模板和后臺(tái)模板的。在你的本地電腦下載并安裝Joomla3.x后，登錄后臺(tái)，然后點(diǎn)擊擴(kuò)展-->模板管理。在這你就可管理網(wǎng)站模板了。（圖3）。\o"ViewonFlickr.Toenlargeclickimage."EN003-templates

1年前

前作者：

\o"ViewuseronFlickr."ChristineundHagenGraf.圖3：Joomla3網(wǎng)站模板你可以在“模板”和“風(fēng)格”之間切換。“風(fēng)格”的作用是提供定制和使用一個(gè)模板的某種風(fēng)格類型。一個(gè)模板至少有一種風(fēng)格。這個(gè)風(fēng)格里通常會(huì)有配置功能，比如改換顏色或者上傳網(wǎng)站的logo。你可以通過擴(kuò)展-->模板管理-->風(fēng)格為你的網(wǎng)站設(shè)置一個(gè)默認(rèn)的風(fēng)格（圖4）。你甚至可以通過復(fù)制來創(chuàng)建新的風(fēng)格。你還可以將每種風(fēng)格分配到指定的菜單項(xiàng)上。例如，當(dāng)你想讓來訪者訪問菜單A時(shí)網(wǎng)站的背景色為綠色，訪問菜單B時(shí)網(wǎng)站的背景色為藍(lán)色。你可以將相關(guān)的風(fēng)格分配到這兩個(gè)菜單項(xiàng)上。\o"ViewonFlickr.Toenlargeclickimage."EN004-styles

1年前

前作者：

\o"ViewuseronFlickr."ChristineundHagenGraf.圖4：Joomla3網(wǎng)站模板風(fēng)格Joomla自身默認(rèn)的模板是Protostar（和游戲“星空戰(zhàn)機(jī)”同名是巧合）。它是基于大名鼎鼎的Twitter的Bootstrap前端框架和Joomla用戶界面庫（JUI）。額……到底什么是Joomla模板？根據(jù)剛才的介紹，這事還蠻復(fù)雜的。:)與Joomla自身默認(rèn)的模板“Protostar”（“星空戰(zhàn)機(jī)”）相關(guān)的所有文件都在文件夾[joomlaroot]/templates/protostar里。它的基礎(chǔ)Twitter的Bootstrap前端框架和Joomla用戶界面庫都在文件夾[joomlaroot]/media/jui/。該模板的設(shè)置開關(guān)都在其風(fēng)格之中，而設(shè)置結(jié)果都保存在數(shù)據(jù)庫。我們將從零開始構(gòu)建一個(gè)與之相似的模板？額……是的。:)在過去幾年里，我不斷地收到email來信問我“如何從零開始創(chuàng)建一個(gè)Joomla模板”，這是我為什么寫作本書的原因。這項(xiàng)工作對(duì)我而言也很困難，因?yàn)槲乙膊皇且粋€(gè)模板設(shè)計(jì)師！我最大的目標(biāo)是讓你理解Joomla模板的基本結(jié)構(gòu)，從而使你能夠依靠你自己的技能和需求，從零開始完成你需要的Joomla模板。本書將不涉及AdobePhotoshop的使用，也不涉及Joomla內(nèi)容的創(chuàng)建，更不涉及讓人頭疼的PHP或JS腳本。我們僅僅是通過效果圖來創(chuàng)建一個(gè)模板！我們下一章就動(dòng)手！文件和目錄本章開始，我們即開始了解與一個(gè)Joomla3前臺(tái)模板相關(guān)的技術(shù)基礎(chǔ)：我們會(huì)創(chuàng)建它規(guī)定好的文件和目錄結(jié)構(gòu)。通常我們有三種方式來創(chuàng)建一個(gè)新模板。我們可以通過效果圖來創(chuàng)建我們自己的模板的目錄和所有必需的文件；我們可以通過安裝一個(gè)簡單的基礎(chǔ)模板然后來豐富它；或者我們可以拷貝一個(gè)已存在的模板然后修改它。本書的選擇是第一種方式，并且盡可能讓事情變得簡單。

本章的目標(biāo)是讓你理解Joomla的模板結(jié)構(gòu)。模板名稱首先所有的Joomla網(wǎng)站模板都需要個(gè)名稱。它由一個(gè)技術(shù)名稱以及一個(gè)對(duì)應(yīng)的說明組成。這個(gè)技術(shù)名稱將會(huì)應(yīng)用到XML文件、目錄名稱、數(shù)據(jù)庫、服務(wù)器文件系統(tǒng)和幾個(gè)緩存文件里。盡管理論上可以，但實(shí)際上我們還是建議技術(shù)名稱里避免使用特殊字符和空格。我將把我的模板命名為j3cocoate。說明里的名稱可以一點(diǎn)，譬如："Joomla!3-cocoateTemplate".文件和目錄每個(gè)模板都有它自己的目錄來儲(chǔ)存所有必需的文件。所以我們首先要做的就是創(chuàng)建目錄[root]/templates/j3cocoate（別眨眼就忘了它必須和模板的名稱一致）。如果你看一下Joomla里的目錄[root]/templates/protostar，你會(huì)發(fā)現(xiàn)里面還有一些目錄，如css、js、html，等等。先別急，我們下一章會(huì)詳細(xì)介紹目錄的作用和內(nèi)容。為了簡單起見，我們現(xiàn)在只在我們的模板j3cocoate里創(chuàng)建一個(gè)必不可少的目錄：[root]/templates/j3cocoate/css在模板根目錄下我們需要三個(gè)文件。其中文件index.php包含的是模板的HTML結(jié)構(gòu)以及其它一些我們以后的章節(jié)會(huì)詳細(xì)介紹的舉足輕重的東西。文件template.css則包含了CSS命令。這個(gè)文件可以根據(jù)你的需要命名，比如你可以命名為style.css。第三個(gè)文件是templateDetails.xml，它是模板的主文件，包含了模板的元數(shù)據(jù)（metadata）和整個(gè)結(jié)構(gòu)。刪繁就簡，我們只需要以下結(jié)構(gòu)：目錄[root]/templates/j3cocoate[root]/template/j3cocoate/css文件[root]/templates/j3cocoate/index.php[root]/templates/j3cocoate/templateDetails.xml[root]/templates/j3cocoate/css/template.css文件的內(nèi)容文件index.php和templateDetails.xml是必須有一些內(nèi)容的。至于文件template.css，我們先讓它空著。index.php這個(gè)文件由一些HTML標(biāo)記組成。建議使用HTML5，因?yàn)樗鼘⑹荋TML的新標(biāo)準(zhǔn)。這之前的HTML版本是HTML4.01是1999制訂。但自那之后互聯(lián)網(wǎng)已經(jīng)發(fā)生了翻天覆地的變化。HTML5還在完善和發(fā)展中，但主流的瀏覽器已經(jīng)能支持許多HTML5的元素和API。如果你對(duì)HTML5還不熟悉，花90秒鐘看看這個(gè)視頻。倘若你突然覺得HTML5不錯(cuò)想了解更多，請(qǐng)?jiān)L問：W3CHTML5指南.在本身的示例中，我們需要混合使用HTML和Joomla指定的命令。這也就是說我要完成一點(diǎn)代碼。<?phpdefined('_JEXEC')ordie;?>這一行的作用是為Joomla提供安全保護(hù)。它實(shí)際上是防止有人直接訪問本文件的一個(gè)PHP命令。它會(huì)檢查是否設(shè)置了變量_JEXEC。如果沒有，文件的執(zhí)行就會(huì)馬上停止（die）。保證僅僅只有Joomla系統(tǒng)本身能夠訪問該文件。<!DOCTYPEHTML><html><head></head><body></body></html>這是一個(gè)HTML5網(wǎng)頁的基本結(jié)構(gòu)，也是Joomla模板里必不可少的部分。接下來我們會(huì)額外加一點(diǎn)信息，像“這個(gè)網(wǎng)站是什么語言？”、“這個(gè)網(wǎng)站的內(nèi)容是由左往右讀，還是由右往左讀？”。Joomla將替你回答這些問題。而這些信息是瀏覽器感興趣的。<!DOCTYPEhtml><htmlxmlns="/1999/xhtml"xml:lang="<?phpecho$this->language;?>"lang="<?phpecho$this->language;?>"dir="<?phpecho$this->direction;?>">這個(gè)HTML標(biāo)簽的屬性其實(shí)是PHP命令。當(dāng)web服務(wù)器將這一行代碼送達(dá)到一個(gè)瀏覽器后，這一行輸出的結(jié)果是：<htmlxmlns="/1999/xhtml"xml:lang="en-gb"lang="en-gb"dir="ltr">Joomla會(huì)自動(dòng)為你創(chuàng)建header區(qū)域。你所要寫的代碼是：<head><jdoc:includetype="head"/></head>瀏覽器輸出的頁面的源代碼將是：<head><basehref="http://localhost/j3/"/><metahttp-equiv="content-type"content="text/html;charset=utf-8"/><metaname="author"content="SuperUser"/><metaname="generator"content="Joomla!-OpenSourceContentManagement"/><title>Home</title><linkhref="http://localhost/j3/"rel="canonical"/><scriptsrc="/j3/media/system/js/mootools-core.js"type="text/javascript"></script><scriptsrc="/j3/media/system/js/core.js"type="text/javascript"></script><scriptsrc="/j3/media/system/js/caption.js"type="text/javascript"></script><scriptsrc="/j3/media/jui/js/jquery.min.js"type="text/javascript"></script><scriptsrc="/j3/media/jui/js/jquery-noconflict.js"type="text/javascript"></script><scriptsrc="/j3/media/jui/js/bootstrap.min.js"type="text/javascript"></script>...</head>“body”是網(wǎng)站輸出內(nèi)容的部分，它需要一些位置（position）設(shè)置方面的信息，以便Joomla能在那些位置輸出指定的內(nèi)容。在Joomla的核心模板Protostar里，大多數(shù)位置（position）采用了連續(xù)的數(shù)字標(biāo)記。它是從position-1到position-14來命名位置。只有一個(gè)例外的位置叫footer。如你在安裝Joomla時(shí)安裝了示范數(shù)據(jù)，那么主菜單是位于position-1，面包屑（即導(dǎo)航）是位于position-2。一些模塊位于position-7。我們采用jdoc命令，在我們的模板里也使用同樣的位置命名規(guī)則：<jdoc:includetype="modules"name="position-1"style="none"/><jdoc:includetype="modules"name="position-2"style="none"/><jdoc:includetype="modules"name="position-7"style="none"/><jdoc:includetype="component"/><jdoc:includetype="modules"name="footer"style="none"/>位置的名稱完全由你自己決定。只要將它們在文件

templateDetails.xml里定義好就行了?，F(xiàn)在我們所需要的index.php文件的全部內(nèi)容如下：（表1）。<?phpdefined('_JEXEC')ordie;?><!DOCTYPEhtml><htmlxmlns="/1999/xhtml"xml:lang="<?phpecho$this->language;?>"lang="<?phpecho$this->language;?>"dir="<?phpecho$this->direction;?>"><jdoc:includetype="head"/></head><body><jdoc:includetype="modules"name="position-1"style="none"/><jdoc:includetype="modules"name="position-2"style="none"/><jdoc:includetype="modules"name="position-7"style="none"/><jdoc:includetype="component"/><jdoc:includetype="modules"name="footer"style="none"/></body></html>表1：index.phptemplateDetails.xml這是模板里最重要的文件。它是一個(gè)清單或者壓縮包里的文件的列表，詳細(xì)記錄了這個(gè)模板所包含的所有文件和目錄。它同時(shí)也包含了作者和版權(quán)信息。如果缺乏這個(gè)文件，Joomla就無法找到你的模板和我們剛才在所談到的index.php文件里使用的那些位置。順便提一下：你想使用多少位置都行，位置的名稱也是隨心所欲。Joomla對(duì)此沒有特別的規(guī)定。<?xmlversion="1.0"encoding="utf-8"?><!DOCTYPEinstallPUBLIC"-//Joomla!2.5//DTDtemplate1.0//EN"

"/xml/dtd/2.5/template-install.dtd"><extensionversion="3.1"type="template"client="site">

<name>j3cocoate</name>

<version>1.0</version>

<creationDate>08/18/2013</creationDate>

<author>HagenGraf</author>

<authorEmail>hagen@</authorEmail>

<copyright>Copyright(C)2006-2013.Allrightsreserved.</copyright>

<description><![CDATA[

<p>Joomla!3cocoateisatemplateexercisefromscratch.<p>

]]></description>

<files>

<filename>index.php</filename>

<filename>templateDetails.xml</filename>

<folder>css</folder>

</files>

<positions>

<position>position-1</position>

<position>position-2</position>

<position>position-3</position>

<position>position-4</position>

<position>position-5</position>

<position>position-6</position>

<position>position-7</position>

<position>footer</position>

</positions></extension>Listing2:templateDetails.xmltemplate.css這個(gè)文件現(xiàn)在還不急用，但我們很快就需要它。所以先創(chuàng)建一個(gè)空白文件，并把它放到目錄[root]/templates/j3cocoate/css里。檢測和安裝你的模板創(chuàng)建好兩個(gè)目錄和三個(gè)文件之后，我們還得檢測和安裝我們的模板。從Joomla1.6開始，模板就必須“注冊”到數(shù)據(jù)庫的數(shù)據(jù)表_extensions里。請(qǐng)登錄后臺(tái)，然后點(diǎn)擊擴(kuò)展->擴(kuò)展管理->檢測。再點(diǎn)擊頂部的“檢測”按鈕。你馬上就會(huì)看到你的剛新鮮出爐的模板（圖1）。勾選該模板，并點(diǎn)擊頂部的“安裝”按鈕（圖2）。\o"ViewonFlickr.Toenlargeclickimage."001-discover

1年前

前作者：

\o"ViewuseronFlickr."ChristineundHagenGraf.圖1：檢測出你的模板\o"ViewonFlickr.Toenlargeclickimage."002-install

1年前

前作者：

\o"ViewuseronFlickr."ChristineundHagenGraf.圖2安裝你的模板在安裝過程中，Joomla會(huì)自動(dòng)給你的模板創(chuàng)建一個(gè)風(fēng)格。找到這個(gè)風(fēng)格（擴(kuò)展->模板管理），將這個(gè)風(fēng)格選為默認(rèn)的模板風(fēng)格。（圖3）。\o"ViewonFlickr.Toenlargeclickimage."003-default-template-style

1年前

前作者：

\o"ViewuseronFlickr."ChristineundHagenGraf.圖3：默認(rèn)的模板風(fēng)格現(xiàn)在訪問你的網(wǎng)站，效果雖然實(shí)在不怎么的，但從技術(shù)上說，你已經(jīng)白手起家在構(gòu)建你的模板了！\o"ViewonFlickr.Toenlargeclickimage."004-our-template

1年前

前作者：

\o"ViewuseronFlickr."ChristineundHagenGraf.圖4：我們的處女作:)下一章將是有關(guān)模板界面的介紹，值得期待！布局當(dāng)我們說到網(wǎng)站設(shè)計(jì)的布局的時(shí)候，我們通常指的是網(wǎng)頁的布局。網(wǎng)頁布局的基礎(chǔ)是平面設(shè)計(jì)，是一個(gè)頁面的內(nèi)容和風(fēng)格的總體安排。Joomla這樣的內(nèi)容管理系統(tǒng)構(gòu)建的網(wǎng)站可以有成千上萬個(gè)頁面，為了保證所以頁面在任何類型的屏幕上都可讀，妥善安排好內(nèi)容元素就非常重要了。使用鉛筆或者繪圖軟件很容易就能繪制一個(gè)頁面的布局。困難的是將準(zhǔn)備好的頁面轉(zhuǎn)換成為HTML及CSS，并與Joomla結(jié)合到一起。Joomla出道后，很長一段時(shí)間都在使用基于HTML表格（table）的布局。這種布局容易掌握，在80%的情況下也能達(dá)到要求，但從語義上來說頁面布局使用HTML表格是不對(duì)的。HTML表格僅僅只適用于給一個(gè)柵格（比如一個(gè)電子表格）提交數(shù)據(jù)的情況。一個(gè)使用HTML表格的很好的例子是元素周期表。

幾年前曾經(jīng)發(fā)生過一次有關(guān)“Tablevs.CSS布局"的大討論（Tables:TheNextEvolutioninCSSLayout）?？偟膩碚f界面的處理比較難，因?yàn)樗枰O(shè)計(jì)功底。與HTML表格相比，層疊樣式表（CSS，簡稱樣式表）較難掌握，因?yàn)樵诎才拍愕膬?nèi)容時(shí)，樣式表提供了太多的可能。要想全面了解樣式表，請(qǐng)仔細(xì)閱讀學(xué)習(xí)CSS布局?？蚣苋绻豁?xiàng)工作太難，常常就會(huì)有人設(shè)計(jì)一個(gè)框架來簡化你的工作。同樣地，為不同的內(nèi)容管理系統(tǒng)設(shè)計(jì)模板的公司需要框架使他們的設(shè)計(jì)工作輕松點(diǎn)。Joomla領(lǐng)域內(nèi)常用的模板框架有（Gantry、T3、Warp、Phoca），等等，但這些框架常常都綁定在這些公司的產(chǎn)品里。這里是兩個(gè)與公司無關(guān)、與Joomla綁定的框架（Construct,

Morph）。撇開內(nèi)容管理系統(tǒng)不說，框架的需求還是非常地大。因此也出現(xiàn)了幾個(gè)杰出的框架。簡單舉幾個(gè)例子：Foundation、Bootstrap以及Skeleton。Joomla3里的BootstrapJoomla!3已經(jīng)將Bootstrap框架集成到Joomla核心里（Bootstrap版本2.3.2）。Bootstrap是Twitter研發(fā)的前端框架——現(xiàn)在它不僅是框架，它還包含基于HTML和CSS的文字排版、表單、按鈕、圖表、導(dǎo)航和其它界面元素等等的模板，以及可選的JavaScript插件。Bootstrap框架集成到Joomla核心之后，上面所提到的那些Joomla模板框架也紛紛將Bootstrap應(yīng)用到他們自己的框架中，并增加了一些特色功能。有時(shí)候在Joomla3里使用另外的框架是有幫助的。但我們要做的第一步還是使用已集成的Bootstrap框架。用Bootstrap設(shè)計(jì)布局很容易！通常網(wǎng)站的結(jié)構(gòu)是頂部一個(gè)主菜單，中間分成2～3底部是一個(gè)版權(quán)說明頁腳。大家都在用這種布局，所以我們現(xiàn)在也將設(shè)計(jì)這樣的布局。柵格系統(tǒng)Bootstrap框架的一個(gè)核心是將一個(gè)柵格均分為12列（詳細(xì)文檔）。一個(gè)頁面兩列的布局：<divclass="row"><divclass="span12">navigation</div></div><divclass="row"><divclass="span4">firstcolumn</div><divclass="span8">secondcolumn</div></div><divclass="row"><divclass="span12">footer</div></div>這是三列的布局：<divclass="row"><divclass="span12">navigation</div></div><divclass="row"><divclass="span3">firstcolumn</div><divclass="span6">secondcolumn</div><divclass="span3">thirdcolumn</div></div><divclass="row"><divclass="span12">footer</div></div>每列都通過一個(gè)叫“span”的類來控制?！皊pan4”表示該元素占用12列里的4列，“span6”則占用12列里的6列。依次類推。每一列都必須包含于一“排”。index.php里的兩列布局趁這個(gè)機(jī)會(huì)，我想介紹下JFactory/getDocument。整個(gè)Joomla頁面是一個(gè)所謂的對(duì)象或者實(shí)例。這個(gè)對(duì)象由方法和屬性組成。比如我們之前已經(jīng)使用過的jdoc:include就是一個(gè)方法。一個(gè)屬性則是一個(gè)變量的值。如language（語言）的屬性是“en-GB”，如果該頁面是中文版本，那么其language屬性就是“zh-CN”。為確保你的模板里使用的變量的值均準(zhǔn)確無誤，必須在你的index.php文件里寫入這三行：$doc=JFactory::getDocument();

$this->language=$doc->language;

$this->direction=$doc->direction;當(dāng)我們將上一章的index.php文件和剛剛討論的bootstrap布局結(jié)合的時(shí)候，我們得到這樣的代碼（列表1）。<?phpdefined('_JEXEC')ordie;

$doc=JFactory::getDocument();

$this->language=$doc->language;

$this->direction=$doc->direction;

?>

<!DOCTYPEhtml>

<htmlxmlns="/1999/xhtml"

xml:lang="<?phpecho$this->language;?>"

lang="<?phpecho$this->language;?>"

dir="<?phpecho$this->direction;?>"><head>

<jdoc:includetype="head"/>

<!--Stylesheets-->

<linkrel="stylesheet"href="<?phpecho$this->baseurl?>/media/jui/css/bootstrap.css"type="text/css"/>

</head>

<body><divclass="row">

<!--navigation-->

<divclass="span12">

<jdoc:includetype="modules"name="position-1"style="none"/>

</div>

</div><divclass="row">

<!--firstcolumn-->

<divclass="span4">

<jdoc:includetype="modules"name="position-2"style="none"/>

<jdoc:includetype="modules"name="position-7"style="none"/>

</div>

<!--secondcolumn-->

<divclass="span8">

<jdoc:includetype="component"/>

</div>

</div><!--secondcolumn-->

<divclass="row">

<divclass="span12">

<jdoc:includetype="modules"name="footer"style="none"/>

</div>

</div>

</body>

</html>表1：兩列布局的index.php文件我們只要在HTML的head標(biāo)簽里調(diào)用bootstrap.css文件，即可完全整合bootstrap。<linkrel="stylesheet"href="<?phpecho$this->baseurl?>/media/jui/css/bootstrap.css"type="text/css"/>PHP變量$this->baseurl代表的是你所安裝的Joomla的路徑。保存后，我們的網(wǎng)站就開始起變化了。借助于bootstrap框架我們已經(jīng)創(chuàng)建了一個(gè)布局。（圖1）\o"ViewonFlickr.Toenlargeclickimage."ENchapter3001-two-column

1年前

前作者：

\o"ViewuseronFlickr."ChristineundHagenGraf.圖1：使用bootstrap的兩列布局小結(jié)正如你所見，使用bootstrap是很容易創(chuàng)建一個(gè)布局的！你可通過列和排來熟悉這個(gè)框架，你也可以把模塊設(shè)置到不同的位置來看看會(huì)發(fā)生什么。下一章我們將一起來設(shè)計(jì)一個(gè)下拉菜單。AdropdownmenuSubmittedby

\o"Viewuserprofile."HagenGraf

on3.September2013-19:55Accordingtomyexperiencepeoplewanttoachievefivethingswhentheystarttocreateatemplate.Theywanttohaveakindoflayout,theirlogoandtheircolours.AsNavigationtheyusuallywantadropdownandsincethreeyearsitshouldbe"responsive".Inthischapterwecoverthedropdownmenu.Thegoodnewsis:It's(easily)possible

Thebadnewsis:TherearesomanywaystoachieveyouraimsIwanttogiveanexample.Sofarwehaveoursimplelayoutfromthethirdchapter

layout.Wecalledthe

bootstrap.css

filewiththecommand<linkrel="stylesheet"href="<?phpecho$this->baseurl?>/media/jui/css/bootstrap.css"type="text/css"/>Itisoktodoitlikethisbuttherearemorepossibilitiestocallthefile.Onepossibilitycouldbetousethe

addStyleSheet

methodofthe

JDocument

class.$doc->addStyleSheet('media/jui/css/bootstrap.css');Anotherpossibilitycouldbetousethestaticclass

JHTMLBootstrapJHtmlBootstrap::loadCss();Don'tworry,therearemorepossibilities!Withourdrop-downmenuit'snearlythesame.WhenIresearchedforthischapterIfoundmoreandmorewaytocreateadropdownmenu.Byusingtheclass

JHtmlDropdown

classByusingCSSlikeinProtostar([joomlaroot]/templates/protostar/css/template.css

fromline6788)Byusingadditonalclassesinthemenumoduleadvancedsettings(Administration->Extensions->ModuleManager->MainMenu)Byusingadditionalclassesinthemenulinkmanageradvancedsettings(Administration->Menus->MainMenu->[linktitle])ByusingoverridesandlayoutsinanadditionalhtmlfolderinthetemplatetochangethemarkupAndlastbutnotleastbyusingJavaScriptI'msuretherearemanymorewaysandIcanconfirmthereisno"correct"way.Alldependsonyourknowledgeandyouraims.Adrop-downmenuwithBootstrapandJQueryBootstrapalreadyincludeseverythingtobuilddropdownmenus(dropdowncomponents).TheonlyproblemisthatJoomlausesdifferentclassnamesinthemarkup(child,parent,etc).Iamstillimpressedabouttheway

JQuery

altersandaddsmarkup,soI'lluseitformyexample.

...sofarnodescriptionofthecode...youneedafewlinks(andonechildlink)theresultlookslikethis^\o"ViewonFlickr.Toenlargeclickimage."EN001-Dropdown-menu

1yearago

agoby

\o"ViewuseronFlickr."ChristineundHagenGraf.thetemplateisresponsiveandthemenuchangeswhenthereisasmallscreenWillgoonasap:)<?phpdefined('_JEXEC')ordie;$doc=JFactory::getDocument();$this->language=$doc->language;$this->direction=$doc->direction;$doc->addStyleSheet('media/jui