[Junior - df9]

Sampa, on 25 July 2012 - 12:52 PM, said:

Set it up as normally, then only use the widgets etc in the module. There is nothing that forces you to use it outside of the module even if you install bootstrap normally.

I would suggest just a little thing: disable the automatic registration of js and css and register it in your main layout file

[Sampa]

Junior - df9, on 25 July 2012 - 01:04 PM, said:

I would suggest just a little thing: disable the automatic registration of js and css and register it in your main layout file

why would that help? :s that would just be doing the exact same thing as it's by default. Just that you register all the assets even if you'r never accessing the module.

[gdesmedt1]

Hi guys,

back on page 18 Baranek asked this question, and no where can I find a reply... which is also what I need to know!

Baranek, on 16 April 2012 - 02:47 AM, said:

Hi,
I have problem with display bootstrap ActiveForm with CForm anyone can help me? What should i do to integrate bootstrap with CForm?

My problem is that I'm using the awesome Wizard Behaviour extension , and need to customise the 'next', 'prev' and 'save' buttons so that they use and look as awesome as Bootstrap!

so here is what I have so far...

class Quote_Bizinfo extends CFormModel {
	public $user_id;
	public $turnover;

	public function rules() {
		...
	}
	
	public function attributeLabels() {
		...
	}

	public function getForm() {
		
		$te = Yii::app()->user->id;
		
		$reps = User::Model()->findAllByAttributes(array('is_rep'=>'1'));
		
		return new CForm(array(
			'showErrorSummary'=>true,
			'elements'=>array(
				'user_id'=>array
				(
					'type'=>'dropdownlist',
					'items'=>array
					(
						$te=>$te,
					),
					'hint'=>'This is your unique client number<br>Please use as reference when contacting us',
					'layout'=>'{label}{input}{hint}{error}'
				),
				//'sales_rep_name'=>array(),
				'turnover'=>array
				(
					'type'=>'dropdownlist',
					'items'=>array
					(
						''=>'',
						'2'=>'R0m - R1.5m',
						'3'=>'R1.5m - R2.5m',
					),
					'hint'=>'Your yearly turnover',
					'layout'=>'{label}{input}{hint}{error}'
				),
			),
			'buttons'=>array(
				'save_draft'=>array
				(
					'type'=>'submit',
					'label'=>'Save'
				),
				'submit'=>array
				(
					'type'=>'submit',
					'label'=>'Next'
				)
			)
		), $this);
	}

but now I need to use Bootstrap buttons...

Anybody know how to integrate this...

<?php $this->widget('bootstrap.widgets.BootButton', array(
    'label'=>'Primary',
    'type'=>'primary', // '', 'primary', 'info', 'success', 'warning', 'danger' or 'inverse'
    'size'=>'large', // '', 'large', 'small' or 'mini'
)); ?>

With the above CFORM?

[Don Felipe]

gdesmedt1, on 25 July 2012 - 08:51 PM, said:

My problem is that I'm using the awesome Wizard Behaviour extension , and need to customise the 'next', 'prev' and 'save' buttons so that they use and look as awesome as Bootstrap!

H about using 'htmlOptions' and setting the css classes manually?

'save_draft'=>array(
    'type'=>'submit',
    'label'=>'Save',
    'htmlOptions'=>array('class'=>'btn btn-primary btn-large'),
),

[gdesmedt1]

Don Felipe, on 25 July 2012 - 10:10 PM, said:

H about using 'htmlOptions' and setting the css classes manually?

'save_draft'=>array(
    'type'=>'submit',
    'label'=>'Save',
    'htmlOptions'=>array('class'=>'btn btn-primary btn-large'),
),

Nope, I get the following error...

PHP warning

htmlspecialchars() expects parameter 1 to be string, array given

Any other suggestions??

[gdesmedt1]

gdesmedt1, on 26 July 2012 - 04:58 AM, said:

Nope, I get the following error...

PHP warning

htmlspecialchars() expects parameter 1 to be string, array given

Any other suggestions??

[SOLVED]

For others that would like to do it.. here is the code I used that works well..

'buttons'=>array
(
	'previous'=>array
	(
		'type'=>'submit',
		'label'=>'Previous',
		'class'=>'btn btn-large btn-primary'
	),

	'save_draft'=>array
	(
		'type'=>'submit',
		'label'=>'Save',
		'class'=>'btn btn-large btn-danger'
	),
	
	'submit'=>array
	(
		'type'=>'submit',
		'label'=>'Next',
		'class'=>'btn btn-large btn-success'
	)
)

[BlitzJS]

I followed the install directions and I am just trying to test out LESS to make sure I have everything hooked up correctly. I am trying to change the navbar color from black to anything.

in views/layouts/main.php I've added

<link rel="stylesheet/less" type="text/css" href="/less/styles.less"/>
<script src="/js/less.js" type="text/javascript"></script>

to <head>. According to the documentation, I just need to save styles.less and reload the page and it will recompile.

In styles.less I have:

/*
    IMPORTS
*/
 

// Import the Bootstrap mixins, operations and functions so that you can use them in this file.
@import "../../protected/extensions/bootstrap/lib/bootstrap/less/mixins.less";
@import "../../protected/extensions/bootstrap/lib/bootstrap/less/navbar.less";
 
/*
    VARIABLES
*/
@navbarBackgroundHighlight: #232051;
@navbarBackground: #3D368B;

// Your variables goes here ...

/*
    MIXINS
*/
 
// Your mixins goes here ...
/*
    RULES
*/
 
// Your rules goes here ...

Note that I have my protected folder outside of webroot

Any idea on why I can't get the color of the navbar to change?

Thanks.

[Don Felipe]

gdesmedt1, on 26 July 2012 - 05:59 AM, said:

[SOLVED]

For others that would like to do it.. here is the code I used that works well..

'buttons'=>array
(
	'previous'=>array
	(
		'type'=>'submit',
		'label'=>'Previous',
		'class'=>'btn btn-large btn-primary'
	),

	'save_draft'=>array
	(
		'type'=>'submit',
		'label'=>'Save',
		'class'=>'btn btn-large btn-danger'
	),
	
	'submit'=>array
	(
		'type'=>'submit',
		'label'=>'Next',
		'class'=>'btn btn-large btn-success'
	)
)

Nice! That would have been my second guess as well. I was to focused on bootstrap so I recommended 'htmlOptions' first. Lol.

[gdesmedt1]

Don Felipe, on 26 July 2012 - 06:48 AM, said:

Nice! That would have been my second guess as well. I was to focused on bootstrap so I recommended 'htmlOptions' first. Lol.

Yeah, well, at least you got me thinking and using chromes wonderful inspect element tool, I was able to put 2 and 3 together... thanks

[Chris83]

@BlitzJS You're setting the variable after importing navbar.less. Try to set the variables at the top of your LESS file and it should fix your problem.

[makro]

Hi!
I'm trying 1.0.0-wip on my site.
Less is so strange and is messing up all my H1..H6 tags especially margin and font size.
Looking into boostrap.css and type.less there are some big diffs.
Is less file correct or it's only a test?

edit: I've also renamed classes back to Boot instead Tb, but this doesn't affect anything

[BlitzJS]

Chris83, on 28 July 2012 - 03:09 PM, said:

@BlitzJS You're setting the variable after importing navbar.less. Try to set the variables at the top of your LESS file and it should fix your problem.

That didn't do anything.

I've also tried the new alpha (still doesn't work) and navbar is missing TYPE_DEFAULT.

PHP Fatal error: Undefined class constant 'TYPE_DEFAULT' in <snip>/protected/extensions/bootstrap/widgets/TbNavbar.php on line 160

[Chris83]

@marko I noticed the same, I assumed that they've change the font-sizes among other things. It's also possible that something went wrong when compiling the css files. I'll look into this further tonight.

PS. I made a new alpha release that fixes the TbNavbar issue.

[Chris83]

After some further investigation on the weird font size I stumbled on this changeset:
https://github.com/t...074c54708a4b4ba

Seems like font sizes are increased in version 2.1.0.

[Solarmd]

Greetings,

I am new to Yii Framework, however I've read the documentation and have some idea about how it works.

I've tried to set up the Yii-Bootstrap 1.0.0 extension, however with partial success. I followed the Setup steps accurately, however here is what I've got (see the attachement)

As you can see, for some reason, the CSS is not being included.

Here is the code I used for that alert:

public function actionIndex() 
	{
		Yii::app()->user->setFlash('success', '<strong>Well done!</strong> You successfully read this important alert message.');
		$this->widget('ext.bootstrap.widgets.TbAlert');
	}

What can be the problem?
Please, note that I think that the bootstrap path alias was not registered properly, that is why I had to use

Quote

ext.bootstrap.widgets.TbAlert

instead of

Quote

bootstrap.widgets.TbAlert

Thank You in advance!

Attached File(s)

•  Capture.PNG (8.6K)
  Number of downloads: 16

[makro]

Chris83, on 30 July 2012 - 07:21 AM, said:

@marko I noticed the same, I assumed that they've change the font-sizes among other things. It's also possible that something went wrong when compiling the css files. I'll look into this further tonight.

PS. I made a new alpha release that fixes the TbNavbar issue.

I noticed it too.
I think less files you're using in 1.0.0-wip are not "sources" of bootstrap.min.css included in your extension that is still 2.0.3.
Am I wrong?

Edit: less files in 2.1.0 seem to be in early stage... they are a mess!!

Just curious: why did you rename Boot* to Tb*?!

[Chris83]

@Solarmd Use the release 0.9.12 instead of the alpha (it's still alpha - in development).

@marko The minified files are old, but they aren't used in the alpha release. I don't think that the LESS files in 2.1.0-wip are in an early stage, the only open issues in that branch are quite minor bugs.

Also, you can read about why the class prefix was changed here:
http://www.yiiframew.../bootstrap/#hh0

[makro]

Chris83, on 30 July 2012 - 08:54 AM, said:

@Solarmd Use the release 0.9.12 instead of the alpha (it's still alpha - in development).

@marko The minified files are old, but they aren't used in the alpha release. I don't think that the LESS files in 2.1.0-wip are in an early stage, the only open issues in that branch are quite minor bugs.

Also, you can read about why the class prefix was changed here:
http://www.yiiframew.../bootstrap/#hh0

Trying again

h1, h2, h3, h4, h5, h6 {
  margin:10px 0;  // ??? This isn't good at all!!
  ......

}

h1 {
  font-size:36px;
  line-height:40px;
}
h2 {
  font-size:30px;
  line-height:40px;
}
h3 {
  font-size:24px;
  line-height:40px;
}
h4 {
  font-size:18px;
  line-height:20px;
}
h5 {
  font-size:14px;
  line-height:20px;
}
h6 {
  font-size:12px;
  line-height:20px;
}
h1 small { font-size:24px; }
h2 small { font-size:18px; }
h3 small { font-size:14px; }
h4 small { font-size:14px; }

Very strange all font-sizes are fixed in less file too, and margin which was 0 now is 10 on top and bottom!
That is messing up layouts

[Solarmd]

Chris83, on 30 July 2012 - 08:54 AM, said:

@Solarmd Use the release 0.9.12 instead of the alpha (it's still alpha - in development).

I tried that and it didn't help.

I still have to use

Quote

$this->widget('ext.bootstrap.widgets.BootAlert');

and the CSS does not apply.

Please, help me to figure this out, I'm still learning. If some other information is required from me, please let me know.

Thank You.

[Chris83]

I understand where you're coming from, but this is what's most likely coming in 2.1.0 like it or not. As a side note I might add that I never liked the zero bottom margin on headings.

makro, on 30 July 2012 - 10:19 AM, said:

Trying again

h1, h2, h3, h4, h5, h6 {
  margin:10px 0;  // ??? This isn't good at all!!
  ......

}

h1 {
  font-size:36px;
  line-height:40px;
}
h2 {
  font-size:30px;
  line-height:40px;
}
h3 {
  font-size:24px;
  line-height:40px;
}
h4 {
  font-size:18px;
  line-height:20px;
}
h5 {
  font-size:14px;
  line-height:20px;
}
h6 {
  font-size:12px;
  line-height:20px;
}
h1 small { font-size:24px; }
h2 small { font-size:18px; }
h3 small { font-size:14px; }
h4 small { font-size:14px; }

Very strange all font-sizes are fixed in less file too, and margin which was 0 now is 10 on top and bottom!
That is messing up layouts