It’s hard to help when we don’t know what you’re seeing, are you getting any errors or is it just the CSS that is missing or maybe something else?
Have you remembered to add ‘bootstrap’ to your preloaded components (‘preload’ array) in your application configuration?
Hope this helps.
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.
Can someone provide an example of using TbGridView to show/edit a record with TbModal?
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
@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.
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?
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
Its doesnt work for me becouse i dont have error class in control-group div ;/
It not working only with ajax validation ;/
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'
));
}
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!!
@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.
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
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.
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?
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!
Thanks for your great extension !
why add ‘Tb’ prefix to class this version? thks!
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');
}
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,
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!