How To Generate Twitter Bootstrap Markup With Yii 2

How To Generate Twitter Bootstrap Markup With Yii 2

Another great feature of the Yii 2 Framework is that it supports Twitter Bootstrap right out of the box. You can use the familiar Yii syntax to generate this markup in your views using Widgets. Widgets in Yii are like little reusable chunks of code that output data in a nice formatted way. Like most things in Yii, they work by loading in a configuration in the form of an array. If you’re not using the short array syntax yet in PHP, you certainly will be once you start using Yii 2 since it makes liberal use of the short array syntax, as in everything is in this form [] instead of this $hi = array();. In any event, let’s look at some of the ways to use the built in Widgets for generating Twitter Bootstrap Markup in Yii2.

Carousel yiibootstrapCarousel


Tabs yiibootstrapTabs

The Yii 2 Framework is a Fast, Secure and Awesome PHP Framework you need to check out.

jQuery is the worlds most popular JavaScript Framework that lets you easily work with the DOM.

Twitter Bootstrap is a super HTML, CSS, and JavaScript Framework to make building your front end a snap.

You can add as many tabs as you like. Just populate the array as needed to add more tabs to the UI.

Time to Rock Out With Your Socks Out with Yii 2 and Twitter Bootstrap. All baked into one nice package.

One is the lonliest number, but two is company. Two is one plus one which equals two.

Three has been known to be a Crowd. Three is odd, not even. If you like three, the trifecta is yours.


Alert yiibootstrapAlert

Hey Buddy, Check out this cool information.

You Win! Great work with your success.

Hold Up Friend, Read this important information before proceeding.

Stop! Something is about to break.


Buttons yiibootstrapButton


ButtonDropdown yiibootstrapButtonDropdown


Collapse yiibootstrapCollapse

This is the content area. Think of something cool to say.
Peek a boo, I see you. I was hiding in the content area.
I bet you didn’t know that was coming 🙂


Modal yiibootstrapModal


Nav yiibootstrapNav

Navbar yiibootstrapNavbar


Progress yiibootstrapProgress

Awesome60% Complete
65% Complete
70% Complete
70% Complete
30% Complete
Super Awesome30% Complete
35% Complete


ActiveForm yiibootstrapActiveForm




Yii 2 Bootstrap Tips

Now that we’ve looked at many of the live examples that Yii 2 offers for Twitter Bootstrap right out of the box, let’s talk about a few tips that may help you.

1. Don’t Forget Your Use Statements

In your excitement to get rolling with creating awesome widgets in your views, don’t forget to add the proper use statements to the top of the file. To use everything covered in this episode, simply put this code at the top of the view file in question:

Once this is in place, you’ll be able to make calls to the various widget methods successfully.

2. Use A Code Editor That Has Built In Code Formatting

There are plenty of different code editors that will auto format your code for you. Why is this helpful? This is helpful because you will go batty trying to keep track of what arrays go where. As you work more with Yii, you’ll begin to realize that most things are created with config files by way of an array. That array may contain other arrays which contain other arrays and so on. It can get a little tricky if you don’t have syntax formatting to help visualize how everything is contained within the main configuration array.

3. How To Enable The Bootstrap Theme

In Bootstrap 3, the base style is flat. It looks nice, but if you’d like to turn on the theme to have more gradients and shadow effects, you can update the AppAsset file like so.

assets/AppAsset.php source

Conclusion

In this episode, we learned all about creating Twitter Bootstrap UI Elements by programming them in Yii 2. It’s a neat way to generate your front end UI by way of creating the back end code in Yii to complete this for you.