[EXTENSION] Bootstrap Bringing together Yii and Twitter Bootstrap
#621
Posted 09 August 2012 - 01:38 AM
#622
Posted 09 August 2012 - 03:04 PM
#623
Posted 10 August 2012 - 01:17 AM
Chris83, on 09 August 2012 - 03:04 PM, said:
I'm talking about here is the thing: https://github.com/t...trap/issues/424
It says that in 2.1.0-wip is realized, you probably have an earlier build bottstrap, do not include this functionality.
#624
Posted 12 August 2012 - 07:14 AM
So far I've implemented the navbar style changes but I haven't added the multi-level support yet, it's on my todo nevertheless.
adminnu, on 10 August 2012 - 01:17 AM, said:
It says that in 2.1.0-wip is realized, you probably have an earlier build bottstrap, do not include this functionality.
#625
Posted 13 August 2012 - 10:29 AM
Firstly, I'd like to thank you for developing this useful extension.
I really appreciate your effort!
I'm using the alpha 1.0.0 and for what I've seen it works well.
I just have two questions regarding some modifications made on bootstrap css:
1. Why most of the line-heigth are 20px instead of 18px ?
example:
li{line-height:20px;}This is causing aligning issues when using icons.
2. The general theme is 'gray/white' instead of the original 'dark'. Why ?
Thank you.
#626
Posted 14 August 2012 - 08:37 AM
qlimax, on 13 August 2012 - 10:29 AM, said:
Firstly, I'd like to thank you for developing this useful extension.
I really appreciate your effort!
I'm using the alpha 1.0.0 and for what I've seen it works well.
I just have two questions regarding some modifications made on bootstrap css:
1. Why most of the line-heigth are 20px instead of 18px ?
example:
li{line-height:20px;}This is causing aligning issues when using icons.
2. The general theme is 'gray/white' instead of the original 'dark'. Why ?
Thank you.
Both of these changes have been made to Twitter Bootstrap itself, something that I have zero control over.
EDIT: My extension is only a wrapper around the toolkit and doesn't provide any style (except some Yii-specific style) itself. As Don Felipe replied below you can feel free to override the styles provided by Bootstrap or use an older version of Bootstrap on the project in question.
This post has been edited by Chris83: 15 August 2012 - 01:39 AM
#627
Posted 14 August 2012 - 11:06 AM
qlimax, on 13 August 2012 - 10:29 AM, said:
Firstly, I'd like to thank you for developing this useful extension.
I really appreciate your effort!
I'm using the alpha 1.0.0 and for what I've seen it works well.
I just have two questions regarding some modifications made on bootstrap css:
1. Why most of the line-heigth are 20px instead of 18px ?
example:
li{line-height:20px;}This is causing aligning issues when using icons.
2. The general theme is 'gray/white' instead of the original 'dark'. Why ?
Thank you.
Of course there's always the options to either render your own css in combination with less - another extension by chris83; see the link in his signature -, or just overwrite these styles in your webapp's stylesheet, or - the least flexible! - generate a customized bootstrap.css here and replace it. Ironically, they still use the grayDarker theme and 18px for "@baseLineHeight" as default values.
#628
Posted 15 August 2012 - 05:36 AM
I'm using another version of jquery/ui and stylesheets. My plan is to use bootstrap extension ONLY for specific controller. I make a new Controller named SomeController that extends Controller component, and import the extension within its init function()
public function init()
{
Yii::import('ext.bootstrap.widgets.*');
}
How do I load the extension (or only some part of it) within my controller without using preload on configuration file? Thanks.
#629
Posted 15 August 2012 - 09:31 AM
sangprabo, on 15 August 2012 - 05:36 AM, said:
I'm using another version of jquery/ui and stylesheets. My plan is to use bootstrap extension ONLY for specific controller. I make a new Controller named SomeController that extends Controller component, and import the extension within its init function()
public function init()
{
Yii::import('ext.bootstrap.widgets.*');
}
How do I load the extension (or only some part of it) within my controller without using preload on configuration file? Thanks.
You could call Yii::app()->getComponent('bootstrap') to run the init function manually.
#630
Posted 15 August 2012 - 10:39 PM
Chris83, on 15 August 2012 - 09:31 AM, said:
Thank you very much! It works.
<?php
/**
* SomeController is base controller for all Some Pages controller
*/
class SomeController extends Controller
{
/**
* @var string the default layout for the controller view. Defaults to '//layouts/column1',
* meaning using a single column layout. See 'protected/views/layouts/column1.php'.
*/
public $layout='//layouts/bootstrap/main';
public function filters()
{
return array(
'accessControl', // perform access control for CRUD operations
);
}
public function accessRules()
{
//some access rules
}
public function init()
{
Yii::app()->getComponent('bootstrap');
}
}
#631
Posted 16 August 2012 - 02:06 AM
first of all, thank you for the extension, it's very useful.
but I just have ONE PROBLEM.
I have an action which include a CJSON logic,before install bootstrap it was working well... but now it works only once, why? I don't know..
here's my code
in the view I use the renderpartial function with BootTabbable...
<?php
$this->widget('bootstrap.widgets.BootTabbable', array(
'type'=>'tabs',
'placement'=>'above',
'tabs'=>array(
array('label'=>'Peticion ET','content' => $this->renderPartial('//peticionet/ver_peticiones', array('model_pc' => $model,),$this),'id' => 0,'active'=>true),
array('label'=>'Ingreso ET','content' => $this->renderPartial('//et/ver_et', array('model' => $model,),$this),'id' => 1,),
array('label'=>'Base Licitacion' ,'content' => $this->renderPartial("//procesocompra/_formBL", array('model' => $model), $this),'id' => 2 ),
array('label'=>'Solicitud Compra','content' => $this->renderPartial("//solicitudcompra/ver_solicitudes", array('model_pc' => $model,), $this),'id' => 3),
array('label'=>'Envio Base' ,'content' => $this->renderPartial("//enviobase/ver_enviobases", array('model_pc' => $model), $this), 'id' => 4),
array('label'=>'Adquisicion' ,'content' => $this->renderPartial("//adquisicion/ver_adquisiciones", array('model_pc' => $model), $this), 'id' => 5,),
),
)); ?>
here's the code from one of the views ('ver_et') which creates a model using ajax
<?php echo CHtml::ajax(array(
'url'=>Yii::app()->createUrl("et/editar", array("id"=>$model->et->id)),
'data'=> "js:$(this).serialize()",
'type'=>'post',
'dataType'=>'json',
'success'=>"function(data)
{
if (data.status == 'failure')
{
$('#div_et').html(data.div);
$('#div_et').show();
$('#div_et form').submit(editET);
}
else
{
$('#div_et').html(data.div);
$('#div_et').hide('slow');
location.reload();
}
} ",
))?>;
there are 3 request :
it seems be ok jquery-ui.min.js /dep1.4/assets/9df29552/jui/js it seems be ok too because I'm using bootstrap bootstrap.min.js /dep1.4/assets/a61484b7/js another js? ok, but How many js i should expect? jquery.js /dep1.4/assets/9df29552 finally my ajax call... the last will be the first 2.html /dep1.4/et/editar
EDIT: when I was writing this reply I added this piece of code to the controller( and now it's working again... now I can pass my code to production)
Yii::app()->clientScript->scriptMap['jquery.js'] = false;
#632
Posted 16 August 2012 - 06:01 AM
I have started using this extension, but i got stuck in the initial stage. I want to open modal on click of an item in navigation bar. I was using the below piece of code.
<?php $this->widget('bootstrap.widgets.TbNavbar', array(
'type'=>'inverse',
'brand'=>Yii::app()->name,
'brandUrl'=>array('/site/index'),
'collapse'=>true,
'items'=>array(
array(
'class'=>'bootstrap.widgets.TbMenu',
'htmlOptions'=>array('class'=>'pull-right'),
'items'=>array(
array(
'label'=>'Login',
'url'=>'#',
'id'=>'login_link',
'htmlOptions'=>array('data-toggle'=>'modal','data-target'=>'#myModal')
),
array('label'=>'SignUp As', 'url'=>'#', 'items'=>array(array('label'=>'New User', 'url'=>'#'),'---',array('label'=>'Corporate', 'url'=>'#'))),
),
),
),
));
?>
Here when i click on the 'Login' item i want to open model, i tried to pass htmlOptions, when i saw the generated html using firebug noticed that apart from label and url its not accepting any of the attributes that i have passed. Is there a way to address this.
#633
Posted 16 August 2012 - 06:24 AM
Alias "bootstrap.widgets.BootAlert" is invalid. Make sure it points to an existing directory or file.
when i call
<?php
Yii::app()->user->setFlash('success', '<strong>Well done!</strong> You successfully read this important alert message.');
Yii::app()->user->setFlash('info', '<strong>Heads up!</strong> This alert needs your attention, but it\'s not super important.');
Yii::app()->user->setFlash('warning', '<strong>Warning!</strong> Best check yo self, you\'re not looking too good.');
Yii::app()->user->setFlash('error', '<strong>Oh snap!</strong> Change a few things up and try submitting again.');
?>
<?php $this->widget('bootstrap.widgets.BootAlert'); ?>
in site/index.php file
Below is config/main.php
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.
return array(
'basePath'=>dirname(__FILE__).DIRECTORY_SEPARATOR.'..',
'name'=>'My Web Application',
'theme'=>'bootstrap',
// preloading 'log' component
'preload'=>array(
'log',
'bootstrap', // preload the bootstrap component
),
// autoloading model and component classes
'import'=>array(
'application.models.*',
'application.components.*',
'ext.bootstrap-theme.widgets.*',
'ext.bootstrap-theme.helpers.*',
'ext.bootstrap-theme.behaviors.*',
),
'modules'=>array(
// uncomment the following to enable the Gii tool
'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'),
'generatorPaths'=>array(
'ext.bootstrap-theme.gii',
),
),
),
// application components
'components'=>array(
'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',
),
);
#634
Posted 16 August 2012 - 07:02 AM
shah123, on 16 August 2012 - 06:24 AM, said:
Alias "bootstrap.widgets.BootAlert" is invalid. Make sure it points to an existing directory or file.
when i call
<?php
Yii::app()->user->setFlash('success', '<strong>Well done!</strong> You successfully read this important alert message.');
Yii::app()->user->setFlash('info', '<strong>Heads up!</strong> This alert needs your attention, but it\'s not super important.');
Yii::app()->user->setFlash('warning', '<strong>Warning!</strong> Best check yo self, you\'re not looking too good.');
Yii::app()->user->setFlash('error', '<strong>Oh snap!</strong> Change a few things up and try submitting again.');
?>
<?php $this->widget('bootstrap.widgets.BootAlert'); ?>
in site/index.php file
Below is config/main.php
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.
return array(
'basePath'=>dirname(__FILE__).DIRECTORY_SEPARATOR.'..',
'name'=>'My Web Application',
'theme'=>'bootstrap',
// preloading 'log' component
'preload'=>array(
'log',
'bootstrap', // preload the bootstrap component
),
// autoloading model and component classes
'import'=>array(
'application.models.*',
'application.components.*',
'ext.bootstrap-theme.widgets.*',
'ext.bootstrap-theme.helpers.*',
'ext.bootstrap-theme.behaviors.*',
),
'modules'=>array(
// uncomment the following to enable the Gii tool
'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'),
'generatorPaths'=>array(
'ext.bootstrap-theme.gii',
),
),
...
You confuse 2 available extensions: yii-bootstrap vs bootstrap. They both have a different approach on how to implement bootstrap and how to use it in view files. You're implementing "yii-bootstrap" but use the "bootstrap" way (BootAlert) in your view file. This is the forum of "bootstrap" btw.
#635
Posted 16 August 2012 - 07:20 AM
Pavan Kumar, on 16 August 2012 - 06:01 AM, said:
I have started using this extension, but i got stuck in the initial stage. I want to open modal on click of an item in navigation bar. I was using the below piece of code.
<?php $this->widget('bootstrap.widgets.TbNavbar', array(
'type'=>'inverse',
'brand'=>Yii::app()->name,
'brandUrl'=>array('/site/index'),
'collapse'=>true,
'items'=>array(
array(
'class'=>'bootstrap.widgets.TbMenu',
'htmlOptions'=>array('class'=>'pull-right'),
'items'=>array(
array(
'label'=>'Login',
'url'=>'#',
'id'=>'login_link',
'htmlOptions'=>array('data-toggle'=>'modal','data-target'=>'#myModal')
),
array('label'=>'SignUp As', 'url'=>'#', 'items'=>array(array('label'=>'New User', 'url'=>'#'),'---',array('label'=>'Corporate', 'url'=>'#'))),
),
),
),
));
?>
Here when i click on the 'Login' item i want to open model, i tried to pass htmlOptions, when i saw the generated html using firebug noticed that apart from label and url its not accepting any of the attributes that i have passed. Is there a way to address this.
Try linkOptions instead of htmlOptions in items list and it'll do the trick. In general...
- htmlOptions can be used to add options for a single element - e.g. CMenu.
- linkOptions can be used to add options for an element in an array of elements - e.g. items in CMenu.
Cheers.
#636
Posted 16 August 2012 - 08:46 AM
Thanks a ton your solution has worked, after replacing htmlOptions to linkOptions even when i navigate to other page EX:to home page or to aboutus still my navigation item selection is with login item.
Don Felipe, on 16 August 2012 - 07:20 AM, said:
- htmlOptions can be used to add options for a single element - e.g. CMenu.
- linkOptions can be used to add options for an element in an array of elements - e.g. items in CMenu.
Cheers.
#638
Posted 16 August 2012 - 07:11 PM
I'm using the BLOG demo, and they have the CAutoComplete widget in the _form view, I'd like to implement the compatible "bootstrap" view for this, so that it can fit in with the rest of the text fields (which have been set to horizontal, and therefore looking nice and neat, with this 1 exception completely out-of-line.)
<div class="row">
<?php echo $form->labelEx($model,'tags'); ?>
<?php $this->widget('CAutoComplete', array(
'model'=>$model,
'attribute'=>'tags',
'url'=>array('suggestTags'),
'multiple'=>true,
'htmlOptions'=>array('size'=>50),
)); ?>
<p class="hint">Please separate different tags with commas.</p>
<?php echo $form->error($model,'tags'); ?>
</div>
Does someone know a work-around for this? or have a solution in order to make this input have the same look and feel and alignment as all the other "bootstrap" fields.
Regards,
#639
Posted 16 August 2012 - 07:29 PM
laapsaap, on 16 August 2012 - 07:08 PM, said:
Hi Laapsaap,
If you implement this extension and change all your view files so that stuff like:
<?php $form=$this->beginWidget('CActiveForm'); ?>
is changed to the bootstraps compatible widget:
<?php $form = $this->beginWidget('bootstrap.widgets.BootActiveForm', array(
'id'=>'horizontalForm',
'type'=>'horizontal',
)); ?>
and this:
<?php echo $form->labelEx($model,'title'); ?>
<?php echo $form->textField($model,'title',array('size'=>80,'maxlength'=>128)); ?>
<p class="hint">this is a hint...</p>
is changed to the bootstrap compatible:
<?php echo $form->textFieldRow($model,'title',array('width'=>180,'maxlength'=>128,'hint'=>'this is a hint...')); ?>
(notice how 3 lines are changed to 1 line above)
then you will see that your entire app will look like the bootstrap. If you would then like to customise the colours, then implement LESS and follow the details on this post... http://www.yiichina....post__p__166421
But yeah, I too wish there was an easier way to change colours and maybe a few different themes... If you do create any, make it available for all, and let me know
Hope this helps, and I hope I'm kinda right with my assumptions
Regards,
#640
Posted 19 August 2012 - 04:16 AM
http://bootswatch.com/
or to create your own:
http://bootswatchr.com/
gdesmedt1, on 16 August 2012 - 07:29 PM, said:
If you implement this extension and change all your view files so that stuff like:
<?php $form=$this->beginWidget('CActiveForm'); ?>
is changed to the bootstraps compatible widget:
<?php $form = $this->beginWidget('bootstrap.widgets.BootActiveForm', array(
'id'=>'horizontalForm',
'type'=>'horizontal',
)); ?>
and this:
<?php echo $form->labelEx($model,'title'); ?>
<?php echo $form->textField($model,'title',array('size'=>80,'maxlength'=>128)); ?>
<p class="hint">this is a hint...</p>
is changed to the bootstrap compatible:
<?php echo $form->textFieldRow($model,'title',array('width'=>180,'maxlength'=>128,'hint'=>'this is a hint...')); ?>
(notice how 3 lines are changed to 1 line above)
then you will see that your entire app will look like the bootstrap. If you would then like to customise the colours, then implement LESS and follow the details on this post... http://www.yiichina....post__p__166421
But yeah, I too wish there was an easier way to change colours and maybe a few different themes... If you do create any, make it available for all, and let me know
Hope this helps, and I hope I'm kinda right with my assumptions
Regards,

Help














