6.4 使用前端框架-v0.0.5版本

在模板开发中，为了加快开发效率，都会使用前端框架。在v0.0.4版中，我们几乎都是手写代码，效率低下且容易出错，最关键的是，如果我们需要网站支持响应式，则还需要另外修改。如果我们一开始就使用一个支持响应式的框架来开发模板，那么就会轻松许多

1，本节目标

知道如何在自己的模板中引入前端框架

2，前端框架

bootstarp是目前非常的流行的前台框架，支持响应式布局。在本次教程中，我们以boostarp为例来介绍如何在自己的模板中引入前端框架。关于bootstarp的更多信息可以访问 ：boostart中文网

需要说明的是，前端框架并不只有bootstarp一种，你可以按照自己的喜好来选择，并不强制。

3，使用前端框架

在模板中引入前端框架和在普通的html页面中引入框架并没有什么不同。

3.1 下载框架

前往 boostart中文网 下载最新版的bootstartp。

目前planc使用的bootstarp文件包：bootstrap-3.3.7-dist.zip

解压后，将整个文件夹复制到模板的目录下面。如图：

3.2 引入框架

修改index.php文件，引入bootstrap.min.css这个文件（如果需要使用js，则引入js）：

//得到文档对象
$doc = JFactory::getDocument();
//向文档中加入CSS
$bootstarp = "templates/planc/bootstrap-3.3.7-dist/css/bootstrap.min.css";
$doc->addStyleSheet($bootstarp);

3.3 确认框架引入成功

当引入框架后，我们可以通过审查元素，看看boostartp的css类是否被成功的使用。截图如下：

4，栅格系统简介

栅格系统，实质就是内定了一些css类。这些类描述了如何定义一行。在bootstarp中，使用row来定义一行，然后使用col-md-*来定义行内的内容。

<div class="row">
   <div class="col-md-8">我占一行的8/12</div>
   <div class="col-md-4">我占一行的4/12</div>
</div>

栅格系统并不bootstarp独有的，几乎任何成熟的框架都有栅格系统。栅格系统在两个方面对我们布局页面带来方便。

• 支持响应式。栅格系统一般都支持响应式，可以定义在移动端和pc不同的行为
• 方便的布局。栅格系统不需要我们使用很多的float就可以将不同的元素排在一行，并且能够大概控制他们所占据的空间，非常的方便。

关于栅格系统的更多说，请参考相应框架的文档。

4，v0.0.5版本

v0.0.5版是使用框架重写后的版本，代码结构更加的简洁清晰。大家可以自己下载安装包，查看详细的代码，在此不再重复

关于v0.0.5版本的代码，可以在此下载tpl_plancv0.0.5_2019-01-08_for_j3x.zip

5，说明

由于我们在模板现在引入了框架，因此，在打包的时候，你需要修改templateDetails.xml这个文件，在files节点中加上新增加的文件夹。

<?xml version="1.0" encoding="utf-8"?>
<extension version="3.0" type="template" method="upgrade" client="site">
	<name>planc</name>
    <version>0.0.5</version>
	<creationDate>2019-01-08</creationDate>
	<files>
<filename>index.php</filename>
<folder>css</folder>
<folder>js</folder>
<folder>bootstrap-3.3.7-dist</folder>
	</files>
</extension>