The Bootstrap Framework

Guest post by Lisa Smith

Why settle with the ‘routine’ web development platform when you have Twitter Bootsrap, the all new buzzing platform for creating superb websites! Websites built using Twitter Bootstrap are fully responsive and load perfectly on devices with varying screen sizes. Moreover, your Bootstrap based web pages will be perfectly compatible with all browsers. All these features make Bootstrap the go-to choice for all contemporary web development projects. Common CSS components including print media styles, codes, grids, forms and buttons; Design and page building components like navbars, button groups, glyphicons, Javascript assets like modals and carousals apart from drop downs and tooltips, and basic plus responsive utilities – these digital assets make Bootstrap a fully loaded web design and development platform for you.

The Infographic is the courtesy of Bootstrap Templates

Bootstrap Powerful Front-end Mobile First Framework

UPDATE: Bootstrap Carousel = WordPress Dynamic Content

This is an update to my original post How to make Bootstrap Carousel display WordPress Dynamic Content, so I’ll keep it short…

The Original Source Code

From Twitter.Github.com/bootstrap
[code]

[/code]
Note: Bootstrap developers have added the .carousel-indicators feature sometime after my original post. Below, you will see my solution for generating the “data-slide-to” values dynamically…

Now with WordPress template PHP for dynamic content

[code]




[/code]
Of course you’re free to pass all sorts of arguments within the query_posts('/*your_arguments*/');. I’ve left out “posts_per_page” this time, allowing the default to be whatever you have for Dashboard Settings > Reading > Blog pages show at most = “?” posts.
Note: I’ve removed .active from the .carousel-indicators li, as well as from the .carousel-inner .item. We’ll add it back with jQuery…

Add “active” Class to first items

[code]
<script>
jQuery(document).ready(function(){
$(“.carousel-indicators li:first”).addClass(“active”);
$(“.carousel-inner .item:first”).addClass(“active”);
});
</script>
[/code]
The script must be called after the bootstrap js file, and preferably this is all happening in the footer.