[EXTENSION] Bootstrap

Yii 1.1 Extensions
562

Hello All,

I’ve been working hard on version 1.0.0 for a while and now it’s not far from finish. If you wish to help me test the upcoming release download the latest alpha version on the extension download page:

http://www.yiiframework.com/ext/files/?id=642

If you wish to see it live you can check out the demo I just set up:

http://www.cniska.net/yii-bootstrap-dev/

What’s new?

  • Upgraded Bootstrap to 2.1.0-wip

  • Changed class prefix to Tb

  • Added collapse and scrollspy widgets

  • Rewrote menus to extend CMenu

  • Renamed tabbable to tabs

  • Improved the active form widget

  • Added for the sub navigation navbar

  • Added support for dropups

  • Numerous other minor improvements

  • Fixed a huge bunch of issues

  • Completely reworked the demo

Keep in mind that this is an alpha release so it’s definitely not production-ready yet.

I’m releasing new versions almost daily now so be sure to check back later. The plan is to have the extension release ready when Bootstrap 2.1.0 comes out.

I hope you like it.

563

Can someone provide an example of using TbGridView to show/edit a record with TbModal?

564

Hello Chris,

The extension is better every day!

I was testing the new version of the extension and I used the example of the widget Sub Navigation (yii-bootstrap-dev) but got the following error:

The property "TbNavbar.subnav" is not defined.

To set the code replaces:

‘subnav’ => TRUE,

by:

‘type’ => ‘subnav’

Now is OK.

I hope this helps.

Daniel

565

@Daniel Thats one of the latest changes I did so Ill double check this and bundle a new release if the wrong version of TbNavbar slipped into alpha release 4. Im glad to hear that you like the extension, its been fun to develop it. :)

Edit: I double checked TbNavbar in the newest release and it was fine (just one unnecessary constant). Please download the newest release and try again.

566

hi, i have problem with checkboxlist ajax validation errors with horizontal form. I got only a hint message with colour red. Anyone can help me?

567

Hi,

Try adding the following to your stylesheet…

styles.css




.help-block,

.help-inline {

  color: #CCC;

}

Just remember that when there is an error, all the text changes to red! and that’s controlled by these settings…




.control-group.error > label,

.control-group.error .help-block,

.control-group.error .help-inline {

  color: #b94a48;

}


.control-group.error .checkbox,

.control-group.error .radio,

.control-group.error input,

.control-group.error select,

.control-group.error textarea {

  color: #b94a48;

  border-color: #b94a48;

}

@chris… I go through …\lib\bootstrap\docs\assets\css\bootstrap.css to find what code I can add to my style sheet to control colors, but I found that "label{}" was not in that stylesheet and only in …\assets\1d4422eb\css\bootstrap.min.css which is minified and extremely hard to read. Is this a bug? or am I looking at the wrong files?

Regards,

G

568

Its doesnt work for me becouse i dont have error class in control-group div ;/

569

It not working only with ajax validation ;/

570

Here is a example of some code that I use for my first project. It is with a DetailView, but a Modal won’t be any different I think

View with GridView:


	...,

	'columns' => array(

		'email',

		'firstName',

		'lastName',

		array(

			'name' => 'isStudent',

			'filter' => array(

				'1' => 'Yes',

				'0' => 'No'

			),

			'value' => array(

				$this,

				'studentInfo' //controller function for the HTML output

			),

			'type' => 'raw', //needed for the HTML output

			'htmlOptions' => array('style' => 'text-align: center;', ),

		),

Controller:


public function studentInfo($data, $row)

{

	$student = Student::model() -> findByPk($data -> userId);


	return $this -> renderPartial('../student/popup', array(

		'user' => $data,

		'student' => $student

	), TRUE);

	//set $return = true, don't display direct

}

View with DetailView or in your case a Modal:




if ($user -> isStudent == 1 && $student === NULL)

{

	echo CHTML::link('<i class="icon-eye-open"></i>', array('user/update/' . $user -> userId . '#User_isActive'), array(

		'rel' => 'tooltip',

		'title' => Yii::t('app', 'Error: inconsistent data, please fix.')

	));

}

elseif ($student !== NULL)

{

	echo CHTML::link('<i class="icon-eye-open"></i>', array('student/view/' . $student -> studentId), array(

		'data-title' => 'Info',

		'data-content' => $this -> widget('bootstrap.widgets.BootDetailView', array(

			'data' => $student,

			'attributes' => array(

				'studentCode',

				'dateOfBirth',

				'isAccessible',

				'groupId',

				'tempGroupId',

			),

		), true),

		'rel' => 'popover'

	));

}
571

That’s OK!

I’m using alpha4 now but I’m also downloaded last bootstrap 2.1.0 CSS from github

I noticed a new .navbar-inverted (black navbar) class that should be implemented in TbNavbar as boolean property I think because default nav-bar color in 2.1.0 is gray.

Also less files and css files are changed, since button font-size is now bigger (it follows font size global variable)

little bug: Try to resize your demo so that navbar collapses, then refresh page. Navbar explodes itself automatically

This extension is growing very very well!!

572

@gdesmedt1 You are looking at the correct files, however I parsed them myself (using Yii-LESS) because I couldn’t find the .min files makro mentioned.

@makro Could you give me a link to the 2.1.0-wip .min files so that I can update them? Also I also noticed the issues with collapsing navbars but I haven’t figured out a way to fix this yet. As for the navbar color that’s on my todo list. I should be able to look at the navbar issues tonight, so if you have any suggestions on how to fix these issues please share.

573

issue is in TbCollapse.php row #28




public $toggle = true; // should be false... or in TbNavbar you must pass option to set toggle=false

I attach css/js files

574

Hello!

I’m having problems using the BootButton ButtonType ajaxSubmit

My BootButton:




    <?php

	$this->widget('bootstrap.widgets.BootButton', array('buttonType' => 'ajaxSubmit', 'label' => Yii::t('buttons', 'Send'),

	    'ajaxOptions' => array(

		'complete' => "alert('worked!')"

	    )));

    ?>

The above code is working great!

But the problem is the following … The validation on the client is not being done!

Maintain the required fields blank and the form does not accuse error, the AJAX request is made anyway.

My ActiveForm




<?php

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

	'id' => 'contactForm',

	'action' => array('/site/contact'),

	'method'=>'POST',

	'enableAjaxValidation' => true,

	'enableClientValidation' => true,

	'clientOptions' => array(

	    'validateOnSubmit' => true,

	    'validateOnType' => false,

	    'validateOnChange' => false,

	),

	'htmlOptions' => array(

	    'class'=>'well'

	),

    ));

?>

Please help me!

#Edit

If I put the ButtonType to "submit" validation on the client is done, but the ajax options do not work, despite the request being sent and received.

#Edit ²

From my observations, validation, even if not done on the client is done on the server, there is no problem, but the errors returned are not displayed on the form.

575

Hello ALL, I try to make login form via bootstrap but I have an error,

And this is my code





<?php /** @var BootActiveForm $form */

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

    'id'=>'login-form',

	'type'=>'horizontal',

	'enableClientValidation'=>true,

	'enableAjaxValidation'=>true,

	'clientOptions' => array('validateOnSubmit' => true),

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

)); ?>

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

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

<?php if(extension_loaded('gd')): ?>

 <div class="row">

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

   <?php $this->widget('CCaptcha'); ?><br/>

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

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

	<?php endif ?>

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


<?php $this->widget('bootstrap.widgets.BootButton', array('buttonType'=>'submit', 'icon'=>'ok', 'label'=>'Login')); ?>

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

What I’m missing?

576

Hello my friends, I solved my problem:

BootActiveForm




<?php

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

	'id' => 'contactForm',

	'action' => array('/site/contact'),

	'method'=>'POST',

	//'enableAjaxValidation' => true,

	'enableClientValidation' => true,

	'clientOptions' => array(

	    'validateOnSubmit' => true,

	    'validateOnType' => false,

	    'validateOnChange' => false,

	    'afterValidate'=>'js:submitAjaxForm',

	),

	'htmlOptions' => array(

	    'class'=>'well'

	),

    ));

?>

BootButton




<?php $this->widget('bootstrap.widgets.BootButton', array('buttonType' => 'submit', 'label' => Yii::t('buttons', 'Enviar'))); ?>

submitAjaxForm




Yii::app()->clientScript->registerScript('contactForm', "

function submitAjaxForm(form, data, hasError) {

    if(!hasError) {

	$.ajax(

	{

	    url:'".Yii::app()->createAbsoluteUrl('site/contact')."',

	    type:'POST',

	    cache:false,

	    dataType:'json',

	    data:$(form).serialize(),

	    async:false,

	    beforeSend:function() {},

	    success:function(response) {

		// my code

	    },

	    error:function(jqXHR, textStatus, errorThrown) {

		// my code

	    }

	});

    }

}");

Thank’s!

577

Thanks for your great extension !

why add ‘Tb’ prefix to class this version? thks!

578

I add the theme support on this extension.

config\main.php




'bootstrap'=>array(

			'class'=>'ext.bootstrap.components.Bootstrap',

            'responsiveCss'=>true, // top menu when width change to min display the list icon

			'theme'=>'blue.', // the css file blue.bootstrap.min.css locate protected\extensions\bootstrap\assets\css

		),

add the $theme property to component Bootstrap.php(protected\extensions\bootstrap\components\)




/**

	 * bootstrap theme

	 * add by dennis for change theme

	 * @var string

	 */

	public $theme;

change function registerCss




/**

	 * Registers the Bootstrap CSS.

	 */

	public function registerCss()

	{

		Yii::app()->clientScript->registerCssFile($this->getAssetsUrl().'/css/'.$this->theme.'bootstrap.min.css');

	}
579

Hi Guys,

I’ve implemented bootstrap.widgets.BootCarousel … but my images do not slide in… they just change instantly.

How do I get the slide, or a fade to work?

Below is my code in the view file…





<hr class="soften">

<section id="Carousel">

	<?php $this->widget('bootstrap.widgets.BootCarousel', array(

		'items'=>array(

			array('image'=>Yii::app()->request->getBaseUrl(true).'/images/sa_flag.gif', 'label'=>'South African Flag', 'caption'=>'Childs representation of our South African flag.'),

			array('image'=>Yii::app()->request->getBaseUrl(true).'/images/lisakhani_car.gif', 'label'=>'Lisakhani (5)', 'caption'=>'The tracktor plows through the field.'),

			array('image'=>Yii::app()->request->getBaseUrl(true).'/images/sine_boat.gif', 'label'=>'Sine (6)', 'caption'=>'What you often sea berthing at the Buffalo River harbour.'),

		),

		'events'=>array(

			'slide'=>"js:function() { console.log('Carousel slide.'); }",

			'slid'=>"js:function() { console.log('Carousel slid.'); }",

		),

	)); ?>

</section>

Regards,

580

Hi Chris!

Just downloaded latest version from bitbucket!

Now I’m starting to do some tests…

I see some less files are not in the latest version. I attach latest from bootstrap git.

Have a nice day!

581

Hi Chris,

could I suggest to add a bool property to TbAlert class that controls the rendering of close button [x] of an alert box?