[EXTENSION] Bootstrap Bringing together Yii and Twitter Bootstrap
#501
Posted 03 July 2012 - 02:43 PM
#502
Posted 03 July 2012 - 10:39 PM
piSHOCK, on 03 July 2012 - 02:43 PM, said:
BootThumbnails extends BootListView that extends CListView.
How 'data' and 'pagination' is handled is based on CListView. This means, in the extra view file (_thumb) the information of the current item is available as $data. In the demo version $data only contains an 'id' => $data['id'].
<li class="span3">
<a href="#" class="thumbnail" rel="tooltip" data-title="Tooltip for Id: <?php echo $data['id']; ?>">
<img src="http://placehold.it/280x180" alt="">
</a>
</li>What is passed to CArrayDataProvider is up to you. You can create your own array ($rawData) or you can simply pass an entire model, too.
Hope it helps!
#503
Posted 03 July 2012 - 10:56 PM
renathy, on 01 July 2012 - 06:06 AM, said:
...
I do see a button, but nothing happens when I click on it. I do not see any modal window on button click. I do not know where to look at to fix it.
Bootstrap seems to work - otherwise Yii would tell you - so most likely it's jQuery/JS related.
Check if Firebug shows any error messages on page load and/or when clicking on the button.
#504
Posted 04 July 2012 - 05:31 AM
Don Felipe, on 03 July 2012 - 10:39 PM, said:
How 'data' and 'pagination' is handled is based on CListView. This means, in the extra view file (_thumb) the information of the current item is available as $data. In the demo version $data only contains an 'id' => $data['id'].
<li class="span3">
<a href="#" class="thumbnail" rel="tooltip" data-title="Tooltip for Id: <?php echo $data['id']; ?>">
<img src="" alt="">
</a>
</li>What is passed to CArrayDataProvider is up to you. You can create your own array ($rawData) or you can simply pass an entire model, too.
Hope it helps!
Thanks a lot!
#505
Posted 04 July 2012 - 06:28 AM
Raoul, on 03 July 2012 - 01:58 PM, said:
your code works fine on my sample app...Did you install 'bootstrap' into your extensions folder ? ... just in case, note that 'boostrap' folder should be lower case.
With version 0.10.1-beta.r254 You should have following folder structure :
protected\extensions\bootstrap
+-----assets
+-----components
+-----lib
+-----gii
+-----widgets
You could also try to write :
$this->widget('ext.bootstrap.widgets.BootBreadcrumbs', array(
'links'=>array('Library'=>'#', 'Data'),
));
hope this helps...
LOL
Of course I added the bootstrap, I'm Newbie only in Yii forum.
I'll try with 'ext.bootstrap'
#506
Posted 04 July 2012 - 06:50 AM
RG_3GNTW, on 04 July 2012 - 06:28 AM, said:
Of course I added the bootstrap, I'm Newbie only in Yii forum.
I'll try with 'ext.bootstrap'
What Raoul was saying is you should double-check where and how you have extracted the zip file to. Your config and code looks okay and it works everywhere else (just like that). If the main "bootstrap" folder wasn't there, the error message would be slightly different. Maybe the widgets folder cannot be found. So, check again:
/protected/extensions/bootstrap/assets
...
/protected/extensions/bootstrap/widgets
and not...
/protected/extensions/bootstrap/yii-bootstrap-0.9.11.r190/...
Good luck!
#507
Posted 06 July 2012 - 09:40 PM
The dropdown menus work fine until any AJAX call is made. After that, the dropdowns no longer drop. The on page Ajax functions still continue to work.
View:
Bootstrap Navbar test:<br/>
<?php $this->widget('bootstrap.widgets.BootNavbar', array(
'fixed'=>false,
'brand'=>'Project name',
'brandUrl'=>'#',
'collapse'=>true, // requires bootstrap-responsive.css
'items'=>array(
array(
'class'=>'bootstrap.widgets.BootMenu',
'items'=>array(
array('label'=>'Home', 'url'=>'#', 'active'=>true),
array('label'=>'Link', 'url'=>'#'),
array('label'=>'Dropdown', 'url'=>'#', 'items'=>array(
array('label'=>'Action', 'url'=>'#'),
array('label'=>'Another action', 'url'=>'#'),
array('label'=>'Something else here', 'url'=>'#'),
'---',
array('label'=>'NAV HEADER'),
array('label'=>'Separated link', 'url'=>'#'),
array('label'=>'One more separated link', 'url'=>'#'),
)),
),
),
'<form class="navbar-search pull-left" action=""><input type="text" class="search-query span2" placeholder="Search"></form>',
array(
'class'=>'bootstrap.widgets.BootMenu',
'htmlOptions'=>array('class'=>'pull-right'),
'items'=>array(
array('label'=>'Link', 'url'=>'#'),
'---',
array('label'=>'Dropdown', 'url'=>'#', 'items'=>array(
array('label'=>'Action', 'url'=>'#'),
array('label'=>'Another action', 'url'=>'#'),
array('label'=>'Something else here', 'url'=>'#'),
'---',
array('label'=>'Separated link', 'url'=>'#'),
)),
),
),
),
)); ?>
Standard nav bar above from working example.<br>
Drop downs work fine until ajax call then drop downs don't drop down. <br>
Simple Ajax call to load text from another file:
Change Text: <div id="changeMe">I will change</div>
<?php
echo CHtml::ajaxButton ("Ajax Update",
CController::createUrl('Default/TestUpdateAjax'),
array('update' => '#changeMe'));
?>Controller:
public function actionTestPage()
{
$this->layout='none';
$this->render('testPage');
}
public function actionTestUpdateAjax()
{
$data = array();
$data["myValue"] = "Content updated in AJAX";
$this->renderPartial('_updateAjax', $data, false, true);
}Anyone else run across this? Love this extension BTW.
#508
Posted 07 July 2012 - 04:57 AM
aNightOne, on 06 July 2012 - 09:40 PM, said:
The dropdown menus work fine until any AJAX call is made. After that, the dropdowns no longer drop. The on page Ajax functions still continue to work.
[...]
Controller:
public function actionTestUpdateAjax()
{
$data = array();
$data["myValue"] = "Content updated in AJAX";
$this->renderPartial('_updateAjax', $data, false, true);
}Anyone else run across this? Love this extension BTW.
Checkout the console log in firebug and you see what happens...
The way you're using renderPartial loads the _updateAjax file along with another jquery.js and bootstrap.min.js that leads to a conflict thus all additional js that uses jquery won't function properly anymore. Try:
$this->renderPartial('_updateAjax', $data, false, false);and Yii will "only" render the _updateAjax and not process any further client scripts.
#509
Posted 07 July 2012 - 05:48 AM
The bootstrap CSS 'framework' is something you have to love! It makes it so much easier to have a good starting point to develop a site that is responsive also.
I have a question about the order of which the different CSS style sheets are being 'published'. The order that is documented by Twitter is:
<!-- Le styles -->
<link href="../assets/css/bootstrap.css" rel="stylesheet">
<style type="text/css">
body {
padding-top: 60px;
padding-bottom: 40px;
}
</style>
<link href="../assets/css/bootstrap-responsive.css" rel="stylesheet">Important for the responsiveness to work well with the collapse-able NavBar, is that the 'body{padding-top:60px;} is right in between the normal sheet and the responsive sheet. Because some responsiveness has to overrule the padding of the body to be zero when the NavBar collapses.
The Bootstrap Module publishes only the two stylesheets and not the body padding. So how can this be implemented to work?
I have tried to do it like this in the header, with an extra media-query:
$cs = Yii::app()->getClientScript();
$cs->registerCss('bootstrap-extra', 'body { margin-top: 60px; }', '(min-width:980px)');
This works well in modern browsers, but it it should be also working in older browsers, like the example Twitter gives with their Bootstrap.
Greetings!
#510
Posted 07 July 2012 - 05:59 AM
Don Felipe, on 07 July 2012 - 04:57 AM, said:
The way you're using renderPartial loads the _updateAjax file along with another jquery.js and bootstrap.min.js that leads to a conflict thus all additional js that uses jquery won't function properly anymore. Try:
$this->renderPartial('_updateAjax', $data, false, false);and Yii will "only" render the _updateAjax and not process any further client scripts.
That did it. Thanks a million!
#511
Posted 07 July 2012 - 11:25 AM
Now to the issue.
I downloaded the file yii-bootstrap-0.10.1.beta.r254.zip in Yii Bootstraap extension
and I found this bug in BootActiveForm.php:
/**
* Renders a captcha row.
* @param CModel $model the data model
* @param string $attribute the attribute
* @param array $htmlOptions additional HTML attributes
* @return string the generated row
* @since 0.9.3
*/
public function captchaRow($model, $attribute, $htmlOptions = array())
{
return $this->inputRow(BootInput::TYPE_CAPTCHA, $model, $attribute, $htmlOptions);
}
should be
return $this->inputRow(BootInput::TYPE_CAPTCHA, $model, $attribute, null, $htmlOptions);
Should I use another source to download a more stable version?
#512
Posted 07 July 2012 - 11:07 PM
Anderson Müller, on 07 July 2012 - 11:25 AM, said:
Now to the issue.
I downloaded the file yii-bootstrap-0.10.1.beta.r254.zip in Yii Bootstraap extension
and I found this bug in BootActiveForm.php:
/**
* Renders a captcha row.
* @param CModel $model the data model
* @param string $attribute the attribute
* @param array $htmlOptions additional HTML attributes
* @return string the generated row
* @since 0.9.3
*/
public function captchaRow($model, $attribute, $htmlOptions = array())
{
return $this->inputRow(BootInput::TYPE_CAPTCHA, $model, $attribute, $htmlOptions);
}
should be
return $this->inputRow(BootInput::TYPE_CAPTCHA, $model, $attribute, null, $htmlOptions);
Should I use another source to download a more stable version?
Use 0.9.12 (instead of the more recent beta version) where the function still looks like
public function captchaRow($model, $attribute, $htmlOptions = array(), $captchaOptions = array())
{
return $this->inputRow(BootInput::TYPE_CAPTCHA, $model, $attribute, $captchaOptions, $htmlOptions);
}I wonder why Chris83 has removed $captchaOptions? Maybe it just happened by mistake...
@Chris83: Will you fix this for the next stable version?
#513
Posted 08 July 2012 - 10:05 PM
how can i gave an id to bootMenu . i tried used htmloption but it doesnt work .
<?php $this->widget('bootstrap.widgets.BootMenu', array(
'type'=>'tabs', // '', 'tabs', 'pills' (or 'list')
'stacked'=>false, // whether this is a stacked menu
'items'=>array(
array('label'=>'Pegawai', 'url'=>'#', array('HtmlOptions'=>array('id'=>'pegawai')),'active'=>true),
array('label'=>'Anak', 'url'=>'#',array('HtmlOptions'=>array('id'=>'anak'))),
),
)); ?>need some advise
thanks
#514
Posted 08 July 2012 - 11:31 PM
kay, on 08 July 2012 - 10:05 PM, said:
how can i gave an id to bootMenu . i tried used htmloption but it doesnt work .
<?php $this->widget('bootstrap.widgets.BootMenu', array(
'type'=>'tabs', // '', 'tabs', 'pills' (or 'list')
'stacked'=>false, // whether this is a stacked menu
'items'=>array(
array('label'=>'Pegawai', 'url'=>'#', array('HtmlOptions'=>array('id'=>'pegawai')),'active'=>true),
array('label'=>'Anak', 'url'=>'#',array('HtmlOptions'=>array('id'=>'anak'))),
),
)); ?>need some advise
thanks
BootMenu
<?php $this->widget('bootstrap.widgets.BootMenu', array(
'type'=>'tabs', // '', 'tabs', 'pills' (or 'list')
'stacked'=>false, // whether this is a stacked menu
'htmlOptions'=>array('id'=>'myIdentifier'),
'items'=>array(
array('label'=>'Pegawai', 'url'=>'#', array('HtmlOptions'=>array('id'=>'pegawai')),'active'=>true),
array('label'=>'Anak', 'url'=>'#',array('HtmlOptions'=>array('id'=>'anak'))),
),
)); ?>BootMenu inside BootNavbar:
$this->widget('bootstrap.widgets.BootNavbar', array(
'fixed'=>'top',
'collapse'=>true,
'items'=>array(
array(
'htmlOptions'=>array('id'=>'myIdentifier'),
'class'=>'bootstrap.widgets.BootMenu',
'items'=>array(
//menuItems...
),
),
),
));
#515
Posted 09 July 2012 - 12:01 AM
but its realy my bad ..
i should use linkOptions instead HtmlOptions
well its work now
thanks.
Don Felipe, on 08 July 2012 - 11:31 PM, said:
<?php $this->widget('bootstrap.widgets.BootMenu', array(
'type'=>'tabs', // '', 'tabs', 'pills' (or 'list')
'stacked'=>false, // whether this is a stacked menu
'htmlOptions'=>array('id'=>'myIdentifier'),
'items'=>array(
array('label'=>'Pegawai', 'url'=>'#', array('HtmlOptions'=>array('id'=>'pegawai')),'active'=>true),
array('label'=>'Anak', 'url'=>'#',array('HtmlOptions'=>array('id'=>'anak'))),
),
)); ?>BootMenu inside BootNavbar:
$this->widget('bootstrap.widgets.BootNavbar', array(
'fixed'=>'top',
'collapse'=>true,
'items'=>array(
array(
'htmlOptions'=>array('id'=>'myIdentifier'),
'class'=>'bootstrap.widgets.BootMenu',
'items'=>array(
//menuItems...
),
),
),
));
#517
Posted 09 July 2012 - 02:08 AM
Don Felipe, on 09 July 2012 - 12:09 AM, said:
yup, the items/links need linkOptions.
this is the first time for me using bootstap extention ..
i had more question if you dont mind
<?php $this->widget('bootstrap.widgets.BootNavbar', array(
'fixed'=>false,
'brand'=>'',
'brandUrl'=>'/index.php',
'collapse'=>true, // requires bootstrap-responsive.css
'items'=>array(
array(
'class'=>'bootstrap.widgets.BootMenu',
'items'=>array(
array('label'=>'Home', 'url'=>'/index.php/site/index', 'active'=>true),
array('label'=>'Simpeg', 'url'=>'/index.php/pegawai',),
array('label'=>'About', 'url'=>'/index.php/site/page?view=about',),
in the code above we can see active=>true are class i tried to changed the class using jquery ,its not working becouse its refreshing the script and it starting from begining.
how can i change that class based on menu that i click.
thanks .
#518
Posted 09 July 2012 - 03:36 AM
kay, on 09 July 2012 - 02:08 AM, said:
i had more question if you dont mind
<?php $this->widget('bootstrap.widgets.BootNavbar', array(
'fixed'=>false,
'brand'=>'',
'brandUrl'=>'/index.php',
'collapse'=>true, // requires bootstrap-responsive.css
'items'=>array(
array(
'class'=>'bootstrap.widgets.BootMenu',
'items'=>array(
array('label'=>'Home', 'url'=>'/index.php/site/index', 'active'=>true),
array('label'=>'Simpeg', 'url'=>'/index.php/pegawai',),
array('label'=>'About', 'url'=>'/index.php/site/page?view=about',),
in the code above we can see active=>true are class i tried to changed the class using jquery ,its not working becouse its refreshing the script and it starting from begining.
how can i change that class based on menu that i click.
thanks .
Try this:
'active' => $this->id=='site' && $this->action->id=='index' 'active' => $this->id=='pegawai' 'active' => $this->id=='site' && $this->action->id=='page'
To get the view either use $_GET or pass the value as additional parameter from the controller action to the view script. When using modules $this->module->id returns the module's name.
You can use all kinds of conditions to set the status of the link or to show/hide the link in the first place (using the option 'visible').
array('label'=>'Login', 'url'=>'/index.php/site/login', 'visible'=>user()->isGuest, 'active'=>$this->id=='site'&&$this->action->id=='login')Hope it helps.
#519
Posted 10 July 2012 - 12:58 AM
Don Felipe, on 09 July 2012 - 03:36 AM, said:
'active' => $this->id=='site' && $this->action->id=='index' 'active' => $this->id=='pegawai' 'active' => $this->id=='site' && $this->action->id=='page'
To get the view either use $_GET or pass the value as additional parameter from the controller action to the view script. When using modules $this->module->id returns the module's name.
You can use all kinds of conditions to set the status of the link or to show/hide the link in the first place (using the option 'visible').
array('label'=>'Login', 'url'=>'/index.php/site/login', 'visible'=>user()->isGuest, 'active'=>$this->id=='site'&&$this->action->id=='login')Hope it helps.
lovely . thanks you so much
#520
Posted 10 July 2012 - 04:16 AM
main.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title><?php echo CHtml::encode($this->pageTitle); ?></title>
<meta name="description" content="">
<meta name="author" content="">
</head>
<body>
<?php $this->widget('bootstrap.widgets.BootNavbar', array(
'fixed'=>false,
'brand'=>'test',
'brandUrl'=>'#',
'collapse'=>true, // requires bootstrap-responsive.css
'items'=>array(
array(
'class'=>'bootstrap.widgets.BootMenu',
'items'=>array(
array('label'=>'All', 'visible'=>!Yii::app()->user->isGuest, 'url'=>CHtml::normalizeUrl(array('post/index')), 'active'=>true),
//array('label'=>'Compose message', 'url'=>CHtml::normalizeUrl(array('message/index'))),
array('label'=>'Alerts', 'visible'=>!Yii::app()->user->isGuest, 'url'=>CHtml::normalizeUrl(array('profile/alerts'))),
array('label'=>'Dropdown', 'url'=>'#', 'items'=>array(
array('label'=>'Action', 'url'=>'#'),
array('label'=>'Another action', 'url'=>'#'),
array('label'=>'Something else here', 'url'=>'#'),
)),
),
),
'<form class="navbar-search pull-left" action=""><input type="text" class="search-query span4" placeholder="Search favourite articles, authors and interests."></form>',
array(
'class'=>'bootstrap.widgets.BootMenu',
'htmlOptions'=>array('class'=>'pull-right'),
'items'=>array(
array('label'=>'Logout ('.Yii::app()->user->name.')', 'url'=>array('site/logout'), 'visible'=>!Yii::app()->user->isGuest)
),
),
),
)); ?>
<div class="container">
<?php if(isset($this->breadcrumbs)):?>
<?php
$this->widget('bootstrap.widgets.BootBreadcrumbs', array(
'links'=>$this->breadcrumbs,
));
?><!-- breadcrumbs -->
<?php endif?>
</div>
<div class="container">
<?php echo $content; ?>
</div>
<div class="container">
<div class="well">
<div class="row">
<div class="span7 pull-left">
<p>Language: English(US) Copyright © <?php echo date('Y'); ?> by Socialpaper. Verison: 1.0.1</p>
</div>
<div class="span2 pull-right"><p>All Rights Reserved.</p></div>
</div>
</div>
<div class="well">
<div class="row">
<div class="span3">
<h4>Product</h4>
<?php $this->widget('zii.widgets.CMenu',array(
'items'=>array(
array('label'=>'Send feedback', 'url'=>array('/site/feedback')),
//
//
//
array('label'=>'Privacy', 'url'=>array('/site/privacy')),
array('label'=>'Terms', 'url'=>array('/site/terms')),
array('label'=>'Help', 'url'=>array('/site/help')),
),
'htmlOptions'=>array(
'class'=>'unstyled',
),
)); ?>
</div>
<div class="span4">
<h4>Company</h4>
<?php $this->widget('zii.widgets.CMenu',array(
'items'=>array(
array('label'=>'About', 'url'=>array('/site/about')),
array('label'=>'Contact Us', 'url'=>array('/site/contact')),
),
'htmlOptions'=>array(
'class'=>'unstyled',
),
)); ?>
</div>
</div>
</div>
</div>
</body>
</html>

Help
















