Bootstrap是Twitter推出的一个开源的用于前端开发的工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范,它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎,一直是GitHub上的热门开源项目,包括NASA的MSNBC(微软全国广播公司)的Breaking News都使用了该项目。(来自百度百科)
优点的话就是加速网站的开发,对于一个php程序来说,如果美工不是特别的强并要求进度的话,可以考虑使用Bootstrap这个WEB框架。
bootstrap既然有这样的优点,那么自然也有人把bootstrap封装在yii的插件当中供大家使用了,安装方法也在这个插件的官网上公布了,但是由于在官网上值工作了在配置文件中的配置,没有提到需要在使用的时候载入一个方法,我还以为在安装好了配置文件中就可以直接使用了但是当我写入如下的代码的时候却没有按钮的效果
<span style="font-family: Consolas, Monaco, monospace; font-size: 12px; line-height: 18px;"><?php $this->widget('bootstrap.widgets.TbButton', array(</span> 'label'=>'Primary', 'type'=>'primary', // null, 'primary', 'info', 'success', 'warning', 'danger' or 'inverse' 'size'=>'large', // null, 'large', 'small' or 'mini' )); ?><span style="font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif; font-size: 13px; line-height: 19px;">
查看源码是没有载入css文件,我以为会在使用widget的时候就自动载入了。这个得手动载入吗?在百度谷歌上找了很久发现,经过一番折腾还是回到下载的插件当中的例子中查看发现需要多些一个方法来进行载入:
<?php Yii::app()->bootstrap->register(); ?>
使用这个方法就可以载入所有需要的js和css文件了!~……~终于成功了! 教训:还是的先看官网给的例子啊!
========================$一步一步来$===================
第一步:首先下载扩展包解压至protected\extensions目录形成bootstrap文件夹
第二部:在配置文件中配置:
// 配置一个别名 使得可以bootstrap访问到扩展路径 Yii::setPathOfAlias('bootstrap', dirname(__FILE__).'/../extensions/bootstrap'); return array( // 'theme'=>'bootstrap', // 一个官网给的例子,这个可以暂时不配置 'modules'=>array( 'gii'=>array( 'generatorPaths'=>array( //添加一个gii检索的路径 'bootstrap.gii', ), ), ), 'components'=>array( 'bootstrap'=>array(//添加一个新的bootstrap容器 'class'=>'bootstrap.components.Bootstrap', //执行Bootstrap.php文件 ), ), );<span style="line-height: 19px; font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif; font-size: xx-small;">
第三部:载入css:这个很重要,我就是没找到这个点,所以浪费了一些时间:
可以在layouts/main.php中加载
<?php Yii::app()->bootstrap->register(); ?>
这个是加载了所有的css以及js如果不需要这么多的话,可以查看Bootstrap.php文件,可以查看到registerAllCss(),registerCoreScripts()等这样的方法,分布区加载一些需要的文件!
第四部:写个例子试试!
http://www.redianying.com/yii-bootstrap/ 这里有很多的例子,可以去写写。如果没有效果的话,查看css是否加载了!