Understanding Twitter Bootstrap 3
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.
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.
By clicking the "Mark as important" button, this article will be put to your important article list which you can find in "Amin->Article important list". Later when you want reread this article, it's easier for you to find it by checking the "Article important list".
::Comment Zone (Total 0 comment)
:: Other versions
:: Recent articles
- HeartBleed: OpenBSD now starts to clean up OpenSSL
- HeartBleed: Should C be blamed for the HeartBleed bug?
- HeartBleed: Inside the heart, what happens to a normal WEB user?
- Learning Python as your first programming language
- PHP Apache MySQL Set-up Note
- Hey, you may be happy to know these mottos about programming languages
- Tips for a better first-time hackathon experience
- <=> operator in MySQL
- Why does LinkedIn migrate to NodeJS from Ruby?
- more ►
:: Most read
- Cross Browser HTML5 Drag and Drop
- Sony is to release PlayStation4 in 2015
- GCC is compiled with C++ compiler
- TIOBE : C overtakes Java as the No.1 programming language
- 5 Free Open Source Chat Applications For Developers
- Which programming language should I learn first?
- Disposable Email address
- Why PHP is (so much) better than Ruby?
- Is Ubuntu becoming a big name in enterprise Linux servers?
- Great code is written twice (or more)
- more ►
:: Find us