On 27, July, Twitter Bootstrap 3 RC 1 was released, if there are no major bugs found in this release, then it will be the final released Twitter Bootstrap 3 with some minor changes. What changes does Bootstrap 3 have compared to Bootstrap 2? After checking the documents, we can find that there are mainly 3 changes.
Embrace flat design
In Bootstrap 3, it begins to embrace flat design. First from the official webpage of Bootstrap 3, we can find elements are flat designed. Also, all buttons have no box shadows now, they are flat and simple. But the flat design is not complete, in some components, we still can see box shadows such as in drop down menus. Not sure whether they will adopt complete flat design in the final release of Bootstrap 3, but it should be the trend.
Mobile first
In Bootstrap 3, mobile device support is built into the library:
With Bootstrap 2, we added optional mobile friendly styles for key aspects of the framework. With Bootstrap 3, we've rewritten the project to be mobile friendly from the start. Instead of adding on optional mobile styles, they're baked right into the core. In fact, Bootstrap is mobile first. Mobile first styles can be found throughout the entire library instead of in separate files.
With the responsive design, your pages can be displayed on different devices properly.
Some changes with components
There are some small changes with some of the components, some of the class names are changed to new names and some styles are removed or redesigned. The details are:
- No more hero-unit, it's replaced with jumbotron
- No more row-fluid class, it is now
- No more span(number) class, you need to use something like this <div class="col col-lg-4"></div> which means that box is a column and the next class is how width you want your column to be which is similar to "span4". I notice Zurb Foundation has similar approach.
- Since icons are now fonts, you can for example get a calender like this <i class="glyphicon glyphicon-calendar"></i>. The glyphicon is the default class for calling icons and the next class is the icon you want to use, note the "glyphicon-" needs to be added to every icon name.
- No more brand class for logo, use <div class="navbar-brand"></div>, same as creating buttons like sign up or login - use <a href="#" class="btn btn-default navbar-btn"></a>
In addition, you still can customize the framework as you want to.
