Today's Question:  What weekend projects have you created?        GIVE A SHOUT

Technical Article => Web =>  Web design

Understanding Twitter Bootstrap 3

  sonic0002      2013-08-05 07:06:22      8,872    0

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.



Share on Facebook  Share on Twitter  Share on Google+  Share on Weibo  Share on Reddit  Share on Digg  Share on Tumblr    Delicious



No comment for this article.


What a wrong workaround

By sonic0002