Yii Framework Forum: Yii Bootstrap Widgets - Yii Framework Forum

Jump to content

  • (2 Pages)
  • +
  • 1
  • 2
  • You cannot start a new topic
  • You cannot reply to this topic

Yii Bootstrap Widgets Some helper widgets for bootstrap Rate Topic: ***** 1 Votes

#1 User is offline   thelfensdrfer 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 36
  • Joined: 06-March 11
  • Location:Germany

Posted 18 February 2012 - 08:48 PM

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'); ?>



1

#2 User is offline   jacmoe 

  • Elite Member
  • Yii
  • Group: Moderators
  • Posts: 2,601
  • Joined: 10-October 10
  • Location:Denmark

Posted 21 February 2012 - 01:14 PM

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.
"Less noise - more signal"
0

#3 User is offline   vulomon 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 4
  • Joined: 24-February 12

Posted 24 February 2012 - 12:55 AM

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
0

#4 User is offline   thelfensdrfer 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 36
  • Joined: 06-March 11
  • Location:Germany

Posted 24 February 2012 - 02:49 PM

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),


View Postvulomon, 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,
)); ?>

1

#5 User is offline   iota 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 17
  • Joined: 07-January 11
  • Location:Auckland, New Zealand

Posted 24 February 2012 - 11:37 PM

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
0

#6 User is offline   vulomon 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 4
  • Joined: 24-February 12

Posted 25 February 2012 - 12:26 AM

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

#7 User is offline   thelfensdrfer 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 36
  • Joined: 06-March 11
  • Location:Germany

Posted 25 February 2012 - 08:37 AM

View Postiota, 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
0

#8 User is offline   marcius 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 16
  • Joined: 14-April 09

Posted 25 February 2012 - 09:44 AM

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?
0

#9 User is offline   thelfensdrfer 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 36
  • Joined: 06-March 11
  • Location:Germany

Posted 25 February 2012 - 11:31 AM

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.

Attached File  testapp.zip (279.76K)
Number of downloads: 76
0

#10 User is offline   iota 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 17
  • Joined: 07-January 11
  • Location:Auckland, New Zealand

Posted 25 February 2012 - 02:42 PM

View Postdemo88, 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.
0

#11 User is offline   dony 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 21
  • Joined: 28-May 12
  • Location:Ukraine. Kiev

Posted 28 May 2012 - 11:29 AM

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.'),
    ),
)); ?>

0

#12 User is offline   thelfensdrfer 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 36
  • Joined: 06-March 11
  • Location:Germany

Posted 28 May 2012 - 12:19 PM

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;)
0

#13 User is offline   dony 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 21
  • Joined: 28-May 12
  • Location:Ukraine. Kiev

Posted 28 May 2012 - 02:23 PM

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)


0

#14 User is offline   thelfensdrfer 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 36
  • Joined: 06-March 11
  • Location:Germany

Posted 28 May 2012 - 02:33 PM

View Postdony, 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.
0

#15 User is offline   dony 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 21
  • Joined: 28-May 12
  • Location:Ukraine. Kiev

Posted 28 May 2012 - 02:50 PM

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

#16 User is offline   thelfensdrfer 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 36
  • Joined: 06-March 11
  • Location:Germany

Posted 28 May 2012 - 02:54 PM

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
0

#17 User is offline   PrplHaz4 

  • Standard Member
  • PipPip
  • Yii
  • Group: Members
  • Posts: 107
  • Joined: 28-September 09
  • Location:Boston, MA

Posted 28 May 2012 - 04:41 PM

View Postdony, 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.
1

#18 User is offline   dony 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 21
  • Joined: 28-May 12
  • Location:Ukraine. Kiev

Posted 29 May 2012 - 02:02 PM

Thank you for your reply.
0

#19 User is offline   Rahmat Awaludin 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 4
  • Joined: 10-May 12

Posted 10 June 2012 - 12:36 PM

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

#20 User is offline   thelfensdrfer 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 36
  • Joined: 06-March 11
  • Location:Germany

Posted 11 June 2012 - 06:43 AM

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

Share this topic:


  • (2 Pages)
  • +
  • 1
  • 2
  • You cannot start a new topic
  • You cannot reply to this topic

1 User(s) are reading this topic
0 members, 1 guests, 0 anonymous users