如何用Yii整合Bootstrap V3版本【安装教程】

jerry Yii 2015年08月12日收藏

1.解压到 protected/extensions/bootstrap (如果你没更改过你的默认扩展位置)

   protected/
      └── extensions
            └── bootstrap
                ├── behaviors
                │   └── BsWidget.php
                ├── components
                │   └── BsApi.php        //核心接口文件
                ├── helpers
                │   ├── BsArray.php      //辅助类
                │   └── BsHtml.php       //改写原有的CHtml.php,增加功能
                ├── components
                │   └── Bootstrap.php
                └── widgets              //各种部件，在原有Yii的基础上，增加功能

*在此罗列出主要目录文件

2.修改 protected/config/main.php 配置文件
首先在配置文件声明一个路径别名(alias)bootstrap
再声明导入一下bootstrap下的各个组件
再在components组件中增加 'bootstrap'

 return array(
        'aliases'=> array(
            ...
            'bootstrap'=>'ext.bootstrap',      //解压路径
        ),
        'import' => array(
            ...
            'bootstrap.behaviors.*',
            'bootstrap.helpers.*',
            'bootstrap.widgets.*'
        ),
        'components' => array(
            ...
            'bootstrap' => array(
                'class' => 'bootstrap.components.BsApi',   //加载核心接口
            ),
            ...
        ),
        ...
    )

3.解压Boostrap V3到：themes/bootstrap

 themes/boostrap/
            └── assets
                ├── css
                ├── fonts
                └── js

4.修改模板文件
调整<head></head>之间对于css和js文件的加载
将原本yii自带的css内容全都去除，使用html5的开头，

 <!DOCTYPE html>
        <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <title>Yii整合Bootstrap的安装方法 | doDomoGu</title>
        </head>

5.在controller中初始化加载css和js

 protected function beforeAction($action) {
            if(parent::beforeAction($action)){
                ...
                Yii::app()->theme = 'bootstrap';
                $this->bootstrapInit();
                ...
                return true;
            }else{
                return false;
            }
        }
        ....
        public function bootstrapInit(){
            $cs = Yii::app()->clientScript;
            $themePath = Yii::app()->theme->baseUrl;
            /**
             * StyleSHeets
             */
            $cs
                ->registerCssFile($themePath.'/assets/css/bootstrap.css')
                ->registerCssFile($themePath.'/assets/css/bootstrap-theme.css');
            /**
             * JavaScripts
             */
            $cs
                ->registerCoreScript('jquery')
                ->registerCoreScript('jquery.ui')
                ->registerScriptFile($themePath.'/assets/js/bootstrap.min.js',CClientScript::POS_END)
                ->registerScript('tooltip',
                    "$('[data-toggle=\"tooltip\"]').tooltip();
                    $('[data-toggle=\"popover\"]').tooltip()"
                    ,CClientScript::POS_READY);
        }