[EXTENSION] Bootstrap

Yii 1.1 Extensions
201

Shouldn’t bootstrap.widgets.BootNavbar highlight both the actual menu item currently viewed as page as well as any top level item it belongs to? See for instance twitter.github.com/bootstrap/components.html#navbar – in this particular case both “Navigation” as well as “Navbar” are selected / highlighted in the secondary menu. From what I can tell this is currently not (automatically) possible. Any chance you could fix that Chris83?

202

Hey,

I am just looking into your extension right now and so far I really like it.

Now I got a little issue with the BootMenu, the items i am clicking are not highlighted for some reason,

any idea what that might be?

best Regards,

-seb

203

hello, i’m confused with your new documentation for new bootModal…

in the old bootModal, this code is working


<?php

	echo CHtml::link('Tambah Stok', "",

		array(

			'style' => 'cursor: pointer; text-decoration: underline',

			'onclick' => "{TambahStok(); $('#stok-form').bootModal('open');}"));

?>


<?php $this->beginWidget('ext.bootstrap.widgets.BootModal',array(

    'id'=>'stok-form',

    'options'=>array(

        'title'=>'Tambah Stok',

        'backdropClose'=>false, // close the modal when the backdrop is clicked?

        'escapeClose'=>true, // close the modal when escape is pressed?

        'open'=>false, // should we open the modal on initialization?

      

    ),

)); ?>

but, i have no idea how to use the "options" in the widgets such as keyboard, backdrop, autosize etc…

and i don’t know how to open bootModal in “onclick” event…

can you help me please… ::)

204

Hi there,

I must be missing something about installing this extension.

I have extracted the file to extensions/bootstrap folder, made the changes in the main.php file.

I can see a bootstrap generator in CRUD. But all the theme seems to be messed up and i do not see anything new after using the Bootstrap Generator.

205

Hi Chris,

would it be possible to separate the components (jQuery+javascript+css) from the theme (grid css)?

Sadly, I haven’t had time to look into bootstrap more deeply, maybe you can evaluate this question with your experience.

Best regards,

schmunk

206

I’ve had to add these lines to a custom CSS file in order to “complete” BootGridView




.grid-view-loading

{

	background:url(loading.gif) no-repeat;

}


.filters td input, .filters td select {

    font-size: 13px;

    height: 18px;

    line-height: 0;

    margin-bottom: 0;

    padding: 1px;

    width:95%;

}


.filters td select {

	height: 22px;

}


.table .checkbox-column {

	width: 15px;

}


.table td.button-column {

	text-align: center;

	width: 60px;

}


.table tr.selected, .table-striped tbody tr.selected td {

	background: #ffffdd;

}
207

I have figured out. Thanks

Hi Avalon,

Could you please help me in opening the bootModal as i am unable to open bootModal here is my code.




<?php echo CHtml::link('Sign In', "#loginbox", array('id' => 'sign','style'=>'cursor: pointer;','onclick'=>"{addlogin(); $('#loginbox').bootModal('open');}",)); ?>


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

							    'id'=>'loginbox',

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

							    'events'=>array(

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

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

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

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

							    ),

							)); ?>

					<div class="divForForm"></div>

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


<script type="text/javascript">

					// here is the magic

					function addlogin()

					{

					    <?php echo CHtml::ajax(array(

					            'url'=>array('site/login'),

					            'data'=> "js:$(this).serialize()",

					            'type'=>'post',

					            'dataType'=>'json',

					    		/*'beforeSend' => 'function(){

							            alert("beforeSend");

							        }',

					    		'complete' => 'function(){

            					alert("complete");

            					}',*/			    

					            'success'=>"function(data)

					            {

					                if (data.status == 'failure')

					                {

					                    $('#loginbox div.divForForm').html(data.div);

					                          // Here is the trick: on submit-> once again this function!

					                    $('#loginbox div.divForForm form').submit(addlogin);

					                }

					                else

					                {

					                    $(location).attr('href','exclusivedeals');					                

					                }

					 

					            } ",

					            )); ?>;

					    return false; 					 

					}					 

</script>

Thanks in advance

208

Hello Christoffer!

I really like bootstrap as css/javascript framework and how it nicely fits into yii with your extension.

Let me request integration of your extension with bootstrap datepicker plugin (eyecon.ro/bootstrap-datepicker), which is still missing in base bootstrap package.

Datepicker plugin is made by Stefan Petre (eyecon.ro) and free to use.

It nicely fits with your extension, and one more reason not to use jquery-ui at all when bootstrap is in use.

P.S. If you want I can send you the code for modification needed to integrate it with your extension.

209

Hi Chris,

There are some widgets missing in the 0.9.9 version. When i use BootButtonGroup widget it shows the following error.


Alias "bootstrap.widgets.BootButtonGroup" is invalid. Make sure it points to an existing PHP file.

Let me know in case i was wrong.

Thanks

210

Hope this text copied from the extension page helps you.

"

What’s next?

BootButton and BootButtonGroup (0.9.10) IN TESTING

BootCarousel

BootProgress

BootTypeahead

"

211

Thanks for the suggestion. I’ll take a look at the pickers when I have time.

212

Good news.

I’ve now developed the remaining plugins, BootCarousel, BootProgress, BootTypeahead and BootHero. They will all be included in the upcoming 0.9.10 release. I still have some work left with the button widgets but I’m quite confident that I will be done by the end of the week.

I’ve uploaded a BETA version of Yii-Bootstrap 0.9.10 for those who’s eager to try the new widgets.

http://www.yiiframework.com/extension/bootstrap/files/yii-bootstrap-0.9.10-beta.r138.zip

Please report any bugs you find on Bitbucket as normally.

Now I’m off to bed, good night. :)

213

I uploaded a new BETA release with some improvements.

http://www.yiiframework.com/extension/bootstrap/files/yii-bootstrap-0.9.10-beta.r150.zip

Please note that BootCrumb is now BootBreadcrumbs and BootThumbs is now BootThumbnails (this might still change before the actual release) and BootInput::captchaRow now supports captchaOptions and this will break the backwards compatibility.

Also, please leave me some feedback regarding the new widgets and the other improvements so that I know if I’m heading in the right direction.

I’m sorry for all the changes but we’re getting close to version 1.0.0 and I want it to be perfect. :)

PS. I’ve also uploaded a new version of my LESS extension which works nicely together with this extension. If you’re interested you can get it here:

http://www.yiiframework.com/extension/less/files/yii-less-0.9.1.r17.zip

214

I Chris!

Could you add Bootstrap Label too?

Here’s my code




Yii::import('bootstrap.widgets.BootWidget');


class BootLabel extends BootWidget

{

	const TYPE_NORMAL = '';

	const TYPE_INFO = 'info';

	const TYPE_SUCCESS = 'success';

	const TYPE_WARNING = 'warning';

	const TYPE_IMPORTANT = 'important';


	public $type = self::TYPE_NORMAL;

	public $label = '';

	public $encodeLabel = true;


	/**

	 * Initializes the widget.

	 */

	public function init()

	{

		$validTypes = array(self::TYPE_INFO,self::TYPE_SUCCESS,self::TYPE_WARNING,self::TYPE_IMPORTANT);


		$class = 'label';


		if (isset($this->type) && in_array($this->type, $validTypes))

			$class .= ' label-'.$this->type;


		if (isset($this->htmlOptions['class']))

			$this->htmlOptions['class'] .= ' '.$class;

		else

			$this->htmlOptions['class'] = $class;


		if ($this->encodeLabel)

			$this->label = CHtml::encode($this->label);


	}


	/**

	 * Runs the widget.

	 */

	public function run()

	{

		echo CHtml::tag('span', $this->htmlOptions,$this->label);

	}

}
215

Hi Chris83,

the Javascript bootstrap-tab.js will not be loaded with your extension, although it is included. Will that be fixed with release 0.9.10 or can you provide a little bugfix?

Thanks!

I helped myself with


if (!$this->isPluginDisabled(self::PLUGIN_TAB))

			$this->registerTabs();

inside the registerCorePlugins() method in Bootstrap.php

216

The script is automatically loaded by the BootTabbable widget when used.

With your fix the script would always be loaded, even when there is no need to load it at all. The extension only loads the necessary scripts, instead each widget makes sure that all the required scripts are loaded when they’re used.

In other words you won’t need to worry about the scripts, it’s all automatically handled by the extension itself.

217

hey I have a question,

when I use





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

    'type'=>'pills', // 'tabs' or 'pills'

    'tabs'=>array(

        array('label'=>'Home', 'content'=>$this->renderPartial('_customer_details', array('model'=>$model))), #### HOW TO PASS THIS?

        array('label'=>'Profile', 'content'=>'Food truck fixie locavore, accusamus mcsweeney\'s marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.'),

        array('label'=>'Dropdown', 'items'=>array(

            array('label'=>'@fat', 'content'=>'Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney\'s organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven\'t heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.'),

            array('label'=>'@mdo', 'content'=>'Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.'),

        )),

    ),

)); ?>

how can I pass $this->renderPartial(’_customer_details’, array(‘model’=>$model)) for the content of each item?

Does anybody know about this?

thanks!

218

Great work as always Chris, I started using this extention the moment you first released it:p I didnt check back on it though until a couple of days ago and man what progress you’ve made!

Lovely, now I tried to use tooltip, copied your example from the demo page but they look the same as they do without bootstrap, am I missing something?:P (everything else I’ve tested works like a charm)

219

Hi Chris.

I’m new to this extension and currently using this extension now.

I want to change my Navigation bar background color.

I’ve changed the value of @navbarBackground in “extensions\bootstrap\lib\bootstrap\less\varable.less” from default value to another colour: #8EFAC4

After I changed it and run the website again, the navbar background color didn’t change.

Then I know that I must re-compile the less files to create css files and then run the website again.

How to re-compile them?

Thanks :)

220

Have a look at: http://www.yiiframework.com/extension/less/

Just specify your less input and css output files and include them in your app.