Yii-Bootstrap. Установка и настройка расширения Twitter Bootstrap на Yii Framework

 Twitter Bootstrap - один из самых известных наборов HTML/CSS/JS заготовок, используемых в веб-разработке, который позволяет легко разработать front-end каркас (прототип) любого проекта. Twitter Bootstrap  включает в себя множество элементов веб интерфейса. Он существенно облегчает и ускоряет процесс разработки. Для интеграции в Yii Framework  разработано расширение Yii-Bootstrap. Его внедрение в свой проект можно разделить на 2 шага.
 
1 шаг.
Скачать расширение Yii-Bootstrap с репозитория расширений. Скачанный архив разархивировать в директорию проекта  домен / ваш_проект / protected / extensions / bootstrap. После чего необходимо скопировать папку theme из директории самого расширения и вставить в домен / ваш_проект / themes / bootstrap. Не забудьте переименовать папку theme в bootstrap.
 
2 шаг
Настройка файла конфигурации. Добавить в файл домен / ваш_проект / protected / config / main.php
 после строчек :
<?php

// uncomment the following to define a path alias
// Yii::setPathOfAlias('local','path/to/local-folder');

// This is the main Web application configuration. Any writable
// CWebApplication properties can be configured here.
 добавить строку
Yii::setPathOfAlias('bootstrap', dirname(__FILE__).'/../extensions/bootstrap');
 Подключить тему. Добавить строку перед описанием списка модулей:
'theme'=>'bootstrap', //подключение темы

Добавить в описание компонентов следующую строку:

'bootstrap'=>array(
            'class'=>'bootstrap.components.Bootstrap',
        ),

Добавить в описание модулей следующие строки:

'gii'=>array(
            'generatorPaths'=>array(
                'bootstrap.gii',
            ),
        ),

листинг файла после изменений 

<?php

// uncomment the following to define a path alias
// Yii::setPathOfAlias('local','path/to/local-folder');

// This is the main Web application configuration. Any writable
// CWebApplication properties can be configured here.

Yii::setPathOfAlias('bootstrap', dirname(__FILE__).'/../extensions/bootstrap');

return array(
	'basePath'=>dirname(__FILE__).DIRECTORY_SEPARATOR.'..',
	'name'=>'My Web Application',
    'language'=> 'ru',

	// preloading 'log' component
	'preload'=>array('log'),

	// autoloading model and component classes
	'import'=>array(
		'application.models.*',
		'application.components.*',
	),
    'theme'=>'bootstrap', //подключение темы
	'modules'=>array(
		// uncomment the following to enable the Gii tool
		/**/
		'gii'=>array(
            'generatorPaths'=>array(
                'bootstrap.gii',
            ),
        ),
            /*
		'gii'=>array(
			'class'=>'system.gii.GiiModule',
			'password'=>'Enter Your Password Here',
			// If removed, Gii defaults to localhost only. Edit carefully to taste.
			'ipFilters'=>array('127.0.0.1','::1'),
		),
		*/
	),

	// application components
	'components'=>array(
        'bootstrap'=>array(
            'class'=>'bootstrap.components.Bootstrap',
        ),
		'user'=>array(
			// enable cookie-based authentication
			'allowAutoLogin'=>true,
		),
		// uncomment the following to enable URLs in path-format
		/*
		'urlManager'=>array(
			'urlFormat'=>'path',
			'rules'=>array(
				'<controller:\w+>/<id:\d+>'=>'<controller>/view',
				'<controller:\w+>/<action:\w+>/<id:\d+>'=>'<controller>/<action>',
				'<controller:\w+>/<action:\w+>'=>'<controller>/<action>',
			),
		),
		*/
		'db'=>array(
			'connectionString' => 'sqlite:'.dirname(__FILE__).'/../data/testdrive.db',
		),
		// uncomment the following to use a MySQL database
		/*
		'db'=>array(
			'connectionString' => 'mysql:host=localhost;dbname=testdrive',
			'emulatePrepare' => true,
			'username' => 'root',
			'password' => '',
			'charset' => 'utf8',
		),
		*/
		'errorHandler'=>array(
			// use 'site/error' action to display errors
			'errorAction'=>'site/error',
		),
		'log'=>array(
			'class'=>'CLogRouter',
			'routes'=>array(
				array(
					'class'=>'CFileLogRoute',
					'levels'=>'error, warning',
				),
				// uncomment the following to show log messages on web pages
				/*
				array(
					'class'=>'CWebLogRoute',
				),
				*/
			),
		),
	),

	// application-level parameters that can be accessed
	// using Yii::app()->params['paramName']
	'params'=>array(
		// this is used in contact page
		'adminEmail'=>'webmaster@example.com',
	),
);

     

Сайт после обновления страницы будет в стиле Twitter Bootstrap. Более подробно ознакомиться с документацией  Yii-Bootstrap можно на сайте расширения. Документация достаточно подробна и имеет множество примеров кода.

Гость 22 июня, 2015

Добавить в \protected\components\Controller.php

public function beforeAction($action)
{
Yii::app()->bootstrap->register();
return parent::beforeAction($action);
}

Гость 14 октября, 2015

Где скачивать Twitter Bootstrap для Yii?, по ссылке не происходит скачивание

Гость 14 октября, 2015

поменяйте фон ссылок ))

Оставить комментарий

Этот вопрос задается для того, чтобы выяснить, являетесь ли Вы человеком или представляете из себя автоматическую спам-рассылку.

Похожие материалы