[EXTENSION] Bootstrap

find the following lines of code in your "protected/config/main.php" file.

add the following lines just before the ending bracket "),"

‘application.extensions.bootstrap.widgets.*’,

Refer this link for complete instructions- http://www.cniska.net/yii-bootstrap/setup.html

thnx mr. arunj for reply, i already put that this is my error

Alias "bootstrap.widgets.BootAlert" is invalid. Make sure it points to an existing directory or file.

when i put this code

<?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’); ?>

to my '/site/index.php

instead of-

‘import’=>array(

‘application.models.*’,

‘application.components.*’,

),

in config/main.php

use the following code-

‘import’=>array(

‘application.models.*’,

‘application.components.*’,

‘application.extensions.bootstrap.widgets.*’,

),

my mai.php is ok now thnx sir. but when i put this code to /'site/index.php

<?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’); ?>

this is the error ive got

Alias "bootstrap.widgets.BootAlert" is invalid. Make sure it points to an existing directory or file.

@arjun, dhenet5254: Remember to add ‘bootstrap’ to your components to be preloaded.

same error sir i already put extrated component folder with bootstrap to my component folder but same i got this error Alias "bootstrap.widgets.BootWidget" is invalid. Make sure it points to an existing directory or file.

when i put this code to my /protected/view/site/index.php test bootstrap i got that error.

<?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’); ?>

error using this code:

<?php $this->beginWidget(‘bootstrap.widgets.BootModal’, array(

'id'=&gt;'modal',


'htmlOptions'=&gt;array('class'=&gt;'hide'),


'events'=&gt;array(


    'show'=&gt;&quot;js:function() { console.log('modal show.'); }&quot;,


    'shown'=&gt;&quot;js:function() { console.log('modal shown.'); }&quot;,


    'hide'=&gt;&quot;js:function() { console.log('modal hide.'); }&quot;,


    'hidden'=&gt;&quot;js:function() { console.log('modal hidden.'); }&quot;,


),

)); ?>

<div class="modal-header">

&lt;a class=&quot;close&quot; data-dismiss=&quot;modal&quot;&gt;&amp;times;&lt;/a&gt;


&lt;h3&gt;Modal header&lt;/h3&gt;

</div>

<div class="modal-body">

&lt;p&gt;One fine body…&lt;/p&gt;

</div>

<div class="modal-footer">

&lt;?php echo CHtml::link('Save changes', '#', array('class'=&gt;'btn btn-primary', 'data-dismiss'=&gt;'modal')); ?&gt;


&lt;?php echo CHtml::link('Close', '#', array('class'=&gt;'btn', 'data-dismiss'=&gt;'modal')); ?&gt;

</div>

<?php $this->endWidget(); ?>

<?php echo CHtml::link(‘Click me’,’#modal’, array(‘class’=>‘btn btn-primary’, ‘data-toggle’=>‘modal’)); ?>

Alias "bootstrap.widgets.BootWidget" is invalid. Make sure it points to an existing directory or file.

Hi

did anyone experience problems with tooltips for Bootstrap using this extension ? The JS is included and the markup is allright, but no tooltip is displayed. Before investigating I’d like to know if it works for someone else.

Thanks.

8)

That will help you:


<script type='text/javascript'>

    $(function(){

    $("a[rel=tooltip]").tooltip();

});

</script>

  1. Is there a way to disable automatic labelling? I found a parameter, but it seems to be inaccessible from outside the library?

In fact I wrote my own label-field, because only a-elements are allowed to be tooltips and I hardcoded disabled labels.

  1. The extension does not support the builtin bootstrap error styles. I added them manually. How to contribute such things?

Regards,

You need to set the rel attribute for the elements that you want to display tooltips for, or specify a different selector for the tooltip than "a[rel=tooltip]".

What do you mean by automatic labelling? You can contribute by cloning the project on Bitbucket and creating a pull request for your change.

Hi Chris,

and first thanks for this great extension !! I had started one on my own when I saw yours … it is great !

Now regarding tooltips, in fact I just copy/paste the source code from your demo page, so the rel attribute is correctly set to tooltip.

Needless to says that corresponding JS files are also included …

Let me do more investigations …

ciao

8)

Good work Chris.

I have noticed with form’s that error handler is not completed with Ajax validation. This is not prior but any way good work. Some code sample that i am using that not working with errors classes




<?php

$form = $this->beginWidget('bootstrap.widgets.BootActiveForm', array(

	'id'=>'verticalForm',

	'enableAjaxValidation'=>true,

	'clientOptions'=>array(

    	'validateOnSubmit'=>true,

	),

	'htmlOptions'=>array('class'=>'well'),

));

?>

	<fieldset>

    	<legend>Login</legend>

    	<?php echo $form->errorSummary($model, ''); ?>

    	<?php echo $form->textFieldRow($model,'username'); ?>

    	<?php echo $form->passwordFieldRow($model,'password'); ?>

    	<?php echo $form->checkboxRow($model,'rememberMe'); ?>

	</fieldset>

	<div class="form-actions">

    	<?php echo CHtml::htmlButton('<i class="icon-ok icon-white"></i> Submit', array('class'=>'btn btn-primary', 'type'=>'submit')); ?>

    	<?php echo CHtml::htmlButton('<i class="icon-ban-circle"></i> Reset', array('class'=>'btn', 'type'=>'reset')); ?>

	</div>

<?php $this->endWidget(); ?>




The is probably caused by the vertical form. I know about this issue and it’s on my todo-list. Error styling should work for the horizontal form. Sorry for the inconvenience.

sir adding bootstrap on my config/main.php i cant access my gii this is my code…

<?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 first’,

// preloading ‘log’ component

‘preload’=>array(‘log’),

// autoloading model and component classes

‘import’=>array(‘bootstrap’,

‘application.models.*’,

‘application.components.*’,

‘application.widgets.bootstrap.*’,

),

‘modules’=>array(

// uncomment the following to enable the Gii tool

‘gii’=>array(

‘class’=>‘system.gii.GiiModule’,

‘password’=>‘dhen’,

// If removed, Gii defaults to localhost only. Edit carefully to taste.

‘ipFilters’=>array(‘127.0.0.1’,’::1’),

),

),

// 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’,

),

‘preload’=>array(

‘bootstrap’, // preload the bootstrap component

),

‘components’=>array(

‘bootstrap’=>array(

‘class’=>‘ext.bootstrap.components.Bootstrap’, // assuming you extracted bootstrap under extensions

‘coreCss’=>true, // whether to register the Bootstrap core CSS (bootstrap.min.css), defaults to true

‘responsiveCss’=>false, // whether to register the Bootstrap responsive CSS (bootstrap-responsive.min.css), default to false

‘plugins’=>array(

// Optionally you can configure the "global" plugins (button, popover, tooltip and transition)

// To prevent a plugin from being loaded set it to false as demonstrated below

‘transition’=>false, // disable CSS transitions

‘tooltip’=>array(

‘selector’=>‘a.tooltip’, // bind the plugin tooltip to anchor tags with the ‘tooltip’ class

‘options’=>array(

‘placement’=>‘bottom’, // place the tooltips below instead

),

),

// If you need help with configuring the plugins, please refer to Bootstrap’s own documentation:

// http://twitter.githu…javascript.html

),

),

),

);

BootGridView does not have a Text Filter in 0.9.9 anymore???

With filter enabled the Input fields all have fixed width…

Any idea?

just include your custom stylesheet after bootstrap




.filters td input {

	width: 100%;

	padding: 0;

}

Ok, i’ve got it. I just did a copy/paste of the component initialization snippet from the doc page, and in this snippet, the tooltip selector is a.tooltip, instead of a[rel=tooltip].

It works fine now … thanks

8)

Hi Chris!

What a nice job!!

I’m starting to use your extension for a test project.

Do you think to include some widgets/helpers for buttons, buttons group, labels or, in your opinion, it’s better to use default CHtml functions adding classes to htmlOptions?

I’ve tried to hg clone project but I think sources are older than uploaded extension… Am I wrong?

Thanks,

Marco

Error styling not work for Ajax validation form (in horizontal form too). Can you add it’s in your todo-list?