< 返回 6.4 使用前端框架-v0.0.5版本 - C计划

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

1,本节目标


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

2,前端框架


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

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

3,使用前端框架


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

3.1 下载框架

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

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

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

joomla引入boostartp.png

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类是否被成功的使用。截图如下:joomla使用bootstarp成功.png

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>

栅格系统.png 

栅格系统并不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>

 

C计划

第3章:Joomla模板机制
第13章:让模板支持多语言
  • 内容提要
  • 留言讨论 (0)
  • 视频教程
在模板开发中,为了加快开发效率,都会使用前端框架。在v0.0.4版中,我们几乎都是手写代码,效率低下且容易出错,最关键的是,如果我们需要网站支持响应式,则还需要另外修改。如果我们一开始就使用一个支持响应式的框架来开发模板,那么就会轻松许多

评论 (0)

  • 最新在前
  • 最佳在前

内容待完善

该课程提供视频版,可以观看完整的视频教程