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:
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
– a set of templates created using Twitter Bootstrap, including spectacular templates for admin panels
– Builder tool
– 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.
Posted in 
Tags: 
