Today's Question:  What's your opinion about Alibaba mooncake incident?        GIVE A SHOUT

Technical Article => Web =>  Web design

Understanding Twitter Bootstrap 3

  sonic0002      2013-08-05 07:06:22      7,899    0    1

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.

CHANGE BOOTSTRAP 3 BOOTSTRAP 2

  SAVE AS PDF   MARK AS READ   MARK AS IMPORTANT

  RELATED


  0 COMMENT


No comment for this article.


  WRITE ARTICLE

Who slapped the project manager?

By sonic0002
A young Programmer and his Project Manager board a train headed through the mountains on its way to Wichita. They can find no place to sit except for two seats right across the aisle from a young woman and her grandmother. After a while, it is obvious that the young woman and the young programmer a