[demo88]

Yes I know this is not the first bootstrap extension and this will not be the last, but I found this useful so I published it;) The extension is not a module or a component, only a few widgets and some static helper classes (for buttons, labels, images with captions etc.). So it should work with other bootstrap extensions well. It does not include the bootstrap css (but the JS). Feel free to criticize, download, use and so on.

Another part of the extension is to apply the bootstrap style to the default yii widgets, like CGridView, CListView, CDetailView etc.

Here are some basic examples (a full list of screenshots and examples is available at the GitHub wiki):

<?php echo EBootstrap::ibutton("Do something", $url = '#', $type = 'primary'); ?>

<?php
echo EBootstrap::imageCaption(EBootstrap::thumbnailSrc(230, 200), '', 'Lorem Ipsum', 'Lorem ipsum dolor sit amet...', array(
    EBootstrap::ibutton('Primary', '#', 'primary'),
    EBootstrap::ibutton('Button', '#'),
));
?>

<?php $this->widget('EBootstrapFlashMessages'); ?>

• Extension
• GitHub

[jacmoe]

I am definitely going to check this out!

Chris is doing great work with his Bootstrap extension, but I prefer a much simpler and more flexible solution, which is where your extension very appealing.

[vulomon]

Very nice work.
But, for me icon is not working.

<?php $this->widget('EBootstrapNavigation',array(
			'items'=>array(
				array('label'=>'Home', 'url'=>array('/site/index', 'icon'=>'home',)),
                                array('template' => '{divider}'),
                                .....
                                .....
                            ),
                     )),

And how to use search option in navigation bar?
Thnx

[demo88]

It was not planed to integrate the icons in the navigation bar, but here you go

array('label'=>'Home', 'url'=>array('/site/index'), 'icon' => 'pencil', 'iconWhite' => true),

vulomon, on 24 February 2012 - 12:55 AM, said:

And how to use search option in navigation bar?

<?php $this->widget('EBootstrapNavigation',array(
	'items'=>array(
		array('label'=>EBootstrap::encode(Yii::app()->name), 'url'=>array('/'), 'template' => '{brand}'),
		array('label'=>'Home', 'url'=>array('/site/index'), 'icon' => 'pencil', 'iconWhite' => true),
		array('label'=>'Sidebar', 'url'=>array('/site/page', 'view'=>'sidebar')),
		array('label'=>'Contact', 'url'=>array('/site/contact')),
		array('template' => '{divider}'),
		array('label'=>'Base CSS', 'dropdown' => true, 'url'=>'#', 'items' => array(
			array('label'=>'Typography', 'url'=>array('/site/page', 'view'=>'typography')),
			array('label'=>'Buttons', 'url'=>array('/site/page', 'view'=>'buttons')),
			array('label'=>'Labels', 'url'=>array('/site/page', 'view'=>'labels')),
			array('label'=>'Images', 'url'=>array('/site/page', 'view'=>'images')),
		)),
		array('label'=>'Components', 'dropdown' => true, 'url'=>'#', 'items' => array(
			array('label'=>'Crud Controller', 'url'=>array('/crud')),
			array('label'=>'Navigation', 'url'=>array('/site/page', 'view'=>'navigation')),
			array('label'=>'Alerts', 'url'=>array('/site/alert')),
			array('label'=>'Carousel', 'url'=>array('/site/page', 'view'=>'carousel')),
			array('label'=>'Progress Bar', 'url'=>array('/site/page', 'view'=>'progressbar')),
			array('label'=>'Modal', 'url'=>array('/site/page', 'view'=>'modal')),
		)),
		array('template' => '{search}', 'itemOptions' => array(
			'action' => '#', 'method' => 'get', 'input' => array( //Form options
				'name' => 'search', //Name of the input field
				'value' => isset($_GET['search']) ? $_GET['search'] : '', //Predefined value
				'htmlOptions' => array(
					'placeholder' => 'Search',
				),
			),
		)),
		array('align' => 'right', 'items' => array(
			array('label'=>'Login', 'url'=>array('/site/login'), 'visible'=>Yii::app()->user->isGuest),
			array('label'=>'Logout ('.Yii::app()->user->name.')', 'url'=>array('/site/logout'), 'visible'=>!Yii::app()->user->isGuest),
		)),
	),
	'fixed' => true,
	'encodeLabel' => false,
)); ?>

[iota]

Hello,

I was wondering if this extension supports the optional responsive variation for the navbar, e.g. when the screen is small, it shows a small button, which when clicked expands to show navigation links. I believe this requires javascript.

If this is not currently supported, any plans to add this functionality?

Many, thanks for your hard work on this extension

Regards, Rob

[vulomon]

@demo88
Thank you so much for your reply.
Keep going with this type of good work.

[demo88]

iota, on 24 February 2012 - 11:37 PM, said:

I was wondering if this extension supports the optional responsive variation for the navbar, e.g. when the screen is small, it shows a small button, which when clicked expands to show navigation links. I believe this requires javascript.

Now it supports the responsive navigation bar;). But you have to include the responsive stylesheet or the responsive.less file by yourself.

Simply set the option "responsive" to "true". https://github.com/V...Navigation-Menu

[marcius]

Quote

Installation
Grab a copy of YiiBootstrap and copy it into your document root. Open http://127.0.0.1/Yii...strap/testapp/.

It seems that at https://github.com/V...al/YiiBootstrap a demo application should be available to easily test the extension, but I couldn't find it on GitHub. Please can you point me to the correct URL?

[demo88]

Hey sry I removed the demo application to allow people to add the extension as a submodule in their projects. But I've attached it to the post. Simply edit the path of the framework in the index.php, the data is stored in a sqlite database.

 testapp.zip (279.76K)
Number of downloads: 59

[iota]

demo88, on 25 February 2012 - 08:37 AM, said:

Now it supports the responsive navigation bar;). But you have to include the responsive stylesheet or the responsive.less file by yourself.

Simply set the option "responsive" to "true". https://github.com/V...Navigation-Menu

That was fast! Thanks so much.

[dony]

How do I create a link to the image in the Bootstrap Carousel, so when you click on the picture the user navigates to a page?

<?php $this->widget('bootstrap.widgets.BootCarousel', array(
    'items'=>array(
        array('image'=>'#', 'label'=>'First Thumbnail label', 'caption'=>'Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.'),
        array('image'=>'#', 'label'=>'Second Thumbnail label', 'caption'=>'Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.'),
        array('image'=>'#', 'label'=>'Third Thumbnail label', 'caption'=>'Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.'),
    ),
)); ?>

[demo88]

Hi

I updated the extension, you can add an optional href attribute. Please refer to the github wiki: https://github.com/V...p/wiki/Carousel

Have fun;)

[dony]

Sorry, but I do not understand. I added, 'href' => Yii :: app () -> createUrl ('/'), but it still does not work. Here is the code

<?php $this->widget('bootstrap.widgets.BootCarousel', array(
    'items'=>array(
        array('image'=>'1.jpg', 'label'=>'First Thumbnail label', 'caption'=>'Cras justo odio, dapibus...', 'href' => Yii::app()->createUrl('/')),
        array('image'=>'2.jpg', 'label'=>'Second Thumbnail label', 'caption'=>'Cras justo odio, dapibus ac f...', 'href' => Yii::app()->createUrl('/')),
        array('image'=>'3.jpg', 'label'=>'Third Thumbnail label', 'caption'=>'Cras justo odio, dapibus ac facil...', 'href' => Yii::app()->createUrl('/')),
    ),
)); ?>

Link does not appear

Attached File(s)

•  Снимок.png (8.59K)
  Number of downloads: 17

[demo88]

dony, on 28 May 2012 - 02:23 PM, said:

Sorry, but I do not understand. I added, 'href' => Yii :: app () -> createUrl ('/'), but it still does not work. Here is the code

<?php $this->widget('bootstrap.widgets.BootCarousel', array(
    'items'=>array(
        array('image'=>'1.jpg', 'label'=>'First Thumbnail label', 'caption'=>'Cras justo odio, dapibus...', 'href' => Yii::app()->createUrl('/')),
        array('image'=>'2.jpg', 'label'=>'Second Thumbnail label', 'caption'=>'Cras justo odio, dapibus ac f...', 'href' => Yii::app()->createUrl('/')),
        array('image'=>'3.jpg', 'label'=>'Third Thumbnail label', 'caption'=>'Cras justo odio, dapibus ac facil...', 'href' => Yii::app()->createUrl('/')),
    ),
)); ?>

Link does not appear

Did you update your extension? "bootstrap.widgets.BootCarousel" does not seem to be the right filename.

[dony]

What is different from the www.yiiframework.com / extension / bootstrap / and github.com / VisualAppeal / YiiBootstrap ? I thought it was the same extension

[demo88]

It is. But in both cases the file is named EBootstrapCarousel, not BootCarousel. Probably you know what you are doing but if not, please copy the whole folder "bootstrap" into your "widgets" folder;)

https://github.com/V...rapCarousel.php
http://www.yiiframew...dgets_0_4_2.zip

[PrplHaz4]

dony, on 28 May 2012 - 02:50 PM, said:

What is different from the www.yiiframework.com / extension / bootstrap / and github.com / VisualAppeal / YiiBootstrap ? I thought it was the same extension

This link is for Chris83's bootstrap extension:

http://www.yiiframew...sion/bootstrap/

Since you're posting in this thread, I'm assuming the extension you're using is:
http://www.yiiframew...otstrap-widgets

They are different so make sure you're following the right instructions for the extension you're using.

[dony]

Thank you for your reply.

[Rahmat Awaludin]

Can I change navigation bar color? (eg. theming it?)

[demo88]

Yes you can!
http://en.wikipedia.org/wiki/CSS