Twitter Bootstrap - Video 12 : Tabs and Pills Playground

[postlink] http://tutorialhits.blogspot.com/2012/06/bootstrap-tabs-and-pills-playground.html[/postlink] [starttext]

Links and Downloads

• Twitter Bootstrap’s main documentation page.
• Download the sample files for this exercise.

That’s it! As you work with Tabs, Pills, and other components, don’t forget to return and consult Twitter Bootstrap’s own excellent documentation. You may even want to join Twitter Bootstrap’s Google group, to hang out and learn from other developers as they use the framework.
Have fun!
[endtext] Description: Twitter Bootstrap - Video 12 : Tabs and Pills Playground Rating: 4.5 Reviewer: Admin - ItemReviewed: Twitter Bootstrap - Video 12 : Tabs and Pills Playground

Watch now »

Twitter Bootstrap - Video 11 : Tabs and Pills

[postlink] http://tutorialhits.blogspot.com/2012/06/twitter-bootstrap-video-11-tabs-and.html[/postlink] [starttext] Twitter Bootstrap 2.0 makes it easy to set up tabs, enabling your users to quickly switch between panes of content. On top of an excellent JavaScript plugin, the framework provides a number of options for style and layout which are well built and easy to implement. In the following two short videos, I’ll give you a brief introduction.

Be sure to grab the exercise files, since I’ll reference them in the videos, and you’ll find helpful resources and examples to speed you on your way.
[endtext] Description: Twitter Bootstrap - Video 11 : Tabs and Pills Rating: 4.5 Reviewer: Admin - ItemReviewed: Twitter Bootstrap - Video 11 : Tabs and Pills

Watch now »

Twitter Bootstrap - Video 10 : Navbar JavaScript

[postlink] http://tutorialhits.blogspot.com/2012/06/twitter-bootstrap-video-10-navbar.html[/postlink] [starttext]

Links and Downloads

• Twitter Bootstrap’s main documentation page
• Download the sample files for this exercise

Have fun!
[endtext] Description: Twitter Bootstrap - Video 10 : Navbar JavaScript Rating: 4.5 Reviewer: Admin - ItemReviewed: Twitter Bootstrap - Video 10 : Navbar JavaScript

Watch now »

Twitter Bootstrap - Video 9 : Navbar Markup

[postlink] http://tutorialhits.blogspot.com/2012/06/twitter-bootstrap-video-9-navbar-markup.html[/postlink] [starttext] Let’s unpack the sample files and go to work on the navbar markup, adding a dropdown nav, floating it right, and adding a search field.[endtext] Description: Twitter Bootstrap - Video 9 : Navbar Markup Rating: 4.5 Reviewer: Admin - ItemReviewed: Twitter Bootstrap - Video 9 : Navbar Markup

Watch now »

Twitter Bootstrap - Video 8 : Navbar Documentation

[postlink] http://tutorialhits.blogspot.com/2012/06/twitter-bootstrap-video-8-navbar.html[/postlink] [starttext] One of the great features of Twitter Bootstrap 2.0 is its excellent responsive navbar. In this brief tutorial, we’ll tackle a number of things including the navbar documentation, updating our sample files and looking at the necessary JavaScript.

In these screencasts we’ll cover the following:

• We’ll check out some recent updates to Twitter Bootstrap’s online documentation — I recommend following the Changelog, which is updated frequently!
• We’ll unpack the sample files and go to work on the navbar markup, adding a dropdown nav and search field.
• We’ll setup the JavaScript that’s needed for the dropdown and the collapsing responsive navbar.
• Finally, in the sample files I’ve included some notes and examples you may find helpful for customizing the navbar to fit alternative layouts, including a full-width static navbar (not fixed to the top), and a navbar that’s constrained to the width of your site contents.

[endtext] Description: Twitter Bootstrap - Video 8 : Navbar Documentation Rating: 4.5 Reviewer: Admin - ItemReviewed: Twitter Bootstrap - Video 8 : Navbar Documentation

Watch now »

Twitter Bootstrap - Video 7 : The Screencast

[postlink] http://tutorialhits.blogspot.com/2012/06/twitter-bootstrap-video-7-screencast.html[/postlink] [starttext]
Today we’ll begin with the basics:

• Downloading the files, including the new option to customize your download.
• Setting up a template markup file.
• Working with Bootstrap 2.0′s new 12-column grid.
• Leveraging the new option to make your layout fully responsive – ready for multiple screen sizes.

Links and Downloads

• Twitter Bootstrap’s main documentation page.
• Download the resulting files from this exercise.

This will get you rolling with the essential tools to make use of the rest of what Twitter Bootstrap has to offer. In future tutorials, we’ll keep rolling from there!
[endtext] Description: Twitter Bootstrap - Video 7 : The Screencast Rating: 4.5 Reviewer: Admin - ItemReviewed: Twitter Bootstrap - Video 7 : The Screencast

Watch now »

Twitter Bootstrap - Video 6: Time for Some Custom CSS

[postlink] http://tutorialhits.blogspot.com/2012/06/bootstrap-time-for-some-custom-css.html[/postlink] http://www.youtube.com/watch?v=CZLY2C1nSoc[video] [starttext][endtext] Description: Twitter Bootstrap - Video 6: Time for Some Custom CSS Rating: 4.5 Reviewer: Admin - ItemReviewed: Twitter Bootstrap - Video 6: Time for Some Custom CSS

Watch now »

Twitter Bootstrap - Video 5 : Now for a Media Grid

[postlink] http://tutorialhits.blogspot.com/2012/06/twitter-bootstrap-video-5-now-for-media.html[/postlink] http://www.youtube.com/watch?v=kuEqEO4mSao[video]
[starttext]
Let’s continue developing our portfolio page. We’ll use the class media-grid to setup two rows of thumbnail images. And I’ll introduce you to the very helpful placehold-image site: Placehold.it.
[endtext] Description: Twitter Bootstrap - Video 5 : Now for a Media Grid Rating: 4.5 Reviewer: Admin - ItemReviewed: Twitter Bootstrap - Video 5 : Now for a Media Grid

Watch now »

Twitter Bootstrap - Video 4 :Laying out a Portfolio Page

[postlink] http://tutorialhits.blogspot.com/2012/06/bootstrap-laying-out-portfolio-page.html[/postlink] http://www.youtube.com/watch?v=YIZtvWvO3hs[video] [starttext][endtext] Description: Twitter Bootstrap - Video 4 :Laying out a Portfolio Page Rating: 4.5 Reviewer: Admin - ItemReviewed: Twitter Bootstrap - Video 4 :Laying out a Portfolio Page

Watch now »

Twitter Bootstrap - Video 3 : Bootstrap's Grid System

[postlink] http://tutorialhits.blogspot.com/2012/06/video-3-bootstraps-grid-system_10.html[/postlink] http://www.youtube.com/watch?v=tMhImkz8L1s[video]

[starttext]

Topics Mentioned

• The clearfix applied to.row, .row:before, and row:after is based on Nicolas Gallagher’s micro clearfix hack.
• The selector .row > [class*="span"] is a CSS 2.1 attribute selector. Here is the W3C spec. See Chris Coyier’s helpful introduction.

[endtext] Description: Twitter Bootstrap - Video 3 : Bootstrap's Grid System Rating: 4.5 Reviewer: Admin - ItemReviewed: Twitter Bootstrap - Video 3 : Bootstrap's Grid System

Watch now »

Twitter Bootstrap - Video 2 : Unpack and Organize

[postlink] http://tutorialhits.blogspot.com/2012/06/twitter-bootstrap-video-2-unpack-and.html[/postlink] http://www.youtube.com/watch?v=VSeEokHmsT8[video]
[starttext]

Steps covered in this video:

We’ll do the following, but not precisely in this order:

1. Organize the CSS
2. Organize the JavaScript
3. Get rid of unneeded files (saving LESS for another day)
4. Keep the Apache 2.0 license file, as required by Twitter Bootstrap’s licensing terms
5. Prepare to develop our own Bootstrap-built site

[endtext] Description: Twitter Bootstrap - Video 2 : Unpack and Organize Rating: 4.5 Reviewer: Admin - ItemReviewed: Twitter Bootstrap - Video 2 : Unpack and Organize

Watch now »

Twitter Bootstrap - Video 1 : Introduction

[postlink] http://tutorialhits.blogspot.com/2012/06/twitter-bootstrap-video-1-introduction.html[/postlink] http://www.youtube.com/watch?v=Kx8aeI9ziOc[video]
[starttext]

Steps covered in this video:

1. Visit Bootstrap’s homepage of online documentation
2. View some sites built with Bootstrap
3. Download the code from Github
4. Unzip it

[endtext] Description: Twitter Bootstrap - Video 1 : Introduction Rating: 4.5 Reviewer: Admin - ItemReviewed: Twitter Bootstrap - Video 1 : Introduction

Watch now »