Twitter bootstrap in nutshell

Tutorial Twitter Bootstrap

Level: intermediate

Twitter Bootstrap (TB) is a CSS framework on the MIT license, developed by Twitter. It contains z set of tools to facilitate the creation the UI of pages and web applications. The framework is based mainly on ready solutions of HTML and CSS (LESS).

Tutorial / Twitter bootstrap in nutshell

This an excellent solution can be used for styling elements of our website / web application, among others: spectacular buttons, forms, dialogs, navigation, and others (Twitter Bootstrap also uses the JavaScript language).

Since longer time, during the creation of the web project in PHP, where the layout is not ready yet, I quickly add Twitter Bootstrap to the project, to make features not only working, but also good looking.

Working with such a solution is nice, so let’s try it in action.

First of all – get TB from the homepage:

http://getbootstrap.com/

Now let’s add files to our project – HTML5 page, e.g.:

/css/bootstrap.min.css
/js/bootstrap.min.js

We can also include additional files, for example bootstrap-theme.min.css for the basic theme, or bootstrap-responsive.min.css. It also depends on the version of TB.

Additionally, at the website there is a tool to prepare custom configuration of Twitter Bootstrap, which we want to get:

http://getbootstrap.com/customize/

How rich is the set of the offered components , we can see here:

http://getbootstrap.com/components/

TB is generally great! It’s also a very good choice to work with RWD.

Twitter bootstrap allows relatively quickly and professionally develop a layout for different devices.

For example, our page have an element, which we want to hide on mobile devices. No problem! Simple use the hidden-phone class:

<div class="sidebar span4 hidden-phone">Lorem ipsum</div>

Recommend resources

Additional resources about Twitter Bootstrap:

– a small tutorial about building the layoutu with Twitter Bootstrap

http://www.sitepoint.com/twitter-bootstrap-tutorial-handling-complex-designs/

– using TB with LESS

http://groupdocs.com/blog/using-bootstrap-with-less-css-tutorial

– a nice solution for creating dynamic grids

http://gridster.net/

– a set of templates created using Twitter Bootstrap, including spectacular templates for admin panels

http://www.bootstrapzero.com/

– Builder tool

https://jetstrap.com/

– there is also the “Twittstrap”

http://twittstrap.com/twittstrap/

RWD

As we mentioned about RWD with TB, below we present a list of recommended resources:

– MDN – flexi boxes

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes

– A set of useful tutorials about RWD

http://www.hongkiat.com/blog/responsive-web-tutorials/


– Learning RWD

http://learn.shayhowe.com/advanced-html-css/responsive-web-design

– Mobile First Responsive Web Design

http://www.html5rocks.com/en/mobile/responsivedesign/

– Creating RWD websites with TB

http://www.sitepoint.com/building-responsive-websites-using-twitter-bootstrap/

Summary

In modern projects for sure RWD and Mobile-first are welcome to. Twitter bootstrap is a very helpful solution, whereby even NON-front-end-developer may add a good layout to the project quickly.

Experienced Web Developer.
Languages: xhtml, html5, css3, JavaScript, PHP, Python, Java…
Hobby: Games Development (mobile, browser).

Share: Share on Facebook2Tweet about this on TwitterShare on Google+0Share on LinkedIn1Share on Tumblr0Digg thisEmail this to someonePin on Pinterest1
You can leave a response, or trackback from your own site.