Switch from bootstrap 2 to bootstrap 3

This small review is intended for those who want to quickly transfer their site to a new bootstrap.

Recently, the third version of this wonderful framework was released, and, of course, I immediately wanted to see how the projects made on the second version would look like if you simply change the 2nd to the 3rd. It turned out that nothing. Everything sprawled, parted and something stopped working.
')
Then I wanted to quickly fix everything. And that's what came out of it, read on.

So, the first innovation - the new bootstrap does not override the styles of elements by default, as it was before. On the one hand, this is, in principle, correct, because he had a lot of !important styles in it and he hung on almost all tags, so if some input seemed too high, you had to redefine it and it was not always convenient.

But, most likely, many people fell in love with this feature of bootstrap: without extra gestures, I plugged in the library and the page was transformed.

Now everything is exactly the opposite: no initiative, I want a nice input with blue backlighting, you need to register in it the corresponding class.

 <input class="form-control" type="text"/> 

We need a stylish page title, wrapping it like this:

 <div class="page-header"> <h1>  <small>  </small></h1> </div> 

Buttons

Removed .btn-inverse class. Now you have to choose his replacement or write something different.

The .btn class now also does not have its own design, and wherever there was a regular button, it is now necessary to add btn-default so that it will look like a button.

Classes that are responsible for the size of buttons, input fields and well s have gained more concise names. For example, instead of btn-small it became btn-sm :

 <input class="btn btn-default btn-sm" type="submit"/> <span class="well well-lg"></span> 

It is worth noting that the size can be assigned at once to a group of elements and it is much more convenient and logical than, for example, to each button separately.

Topics

Now in the bootstrap appeared such a thing as a topic. Immediately bundled file bootstrap-theme.css , which slightly overrides the appearance. It can be used as a basis for creating your own themes, although it must be admitted that it still far from fully covers all visual styles. Creating your own theme can also be done using the web interface on the framework site, where all styles are conveniently grouped.

At first glance, the proposed “default theme” didn’t like the fact that the buttons almost didn’t react when hovering, at the same time, without the .btn-default theme, we can say that there is no color at all. Fortunately, this is easily redefined in bootstrap-theme.css

 /*    */ .btn-default { text-shadow: 0 1px 0 #fff; background-image: -webkit-gradient(linear, left 0%, left 100%, from(#ffffff), to(#e6e6e6)); background-image: -webkit-linear-gradient(top, #ffffff, 0%, #e6e6e6, 100%); background-image: -moz-linear-gradient(top, #ffffff 0%, #e6e6e6 100%); background-image: linear-gradient(to bottom, #ffffff 0%, #e6e6e6 100%); background-repeat: repeat-x; border-color: #e0e0e0; border-color: #ccc; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0); } /*      */ .btn-default:hover { background-color: gray !important; background-image: -webkit-gradient(linear, left 0%, left 100%, from(#ffffff), to(gray)); background-image: -webkit-linear-gradient(top, #ffffff, 0%, gray, 100%); background-image: -moz-linear-gradient(top, #ffffff 0%, gray 100%); background-image: linear-gradient(to bottom, #ffffff 0%, gray 100%); border-radius:3px; } 

Toolbars

Here, too, everything is a little complicated. Instead of working old version:

 <div class="navbar navbar-fixed-top navbar-inverse"> <div class="navbar-inner"> <div class="container"> <a href="/" class="pull-left navbar-brand"></a> <ul class="nav pull-left"> </ul> </div> </div> </div> 

so new

 <div class="navbar navbar-fixed-top navbar-inverse"> <div class="navbar-inner"> <div class="container"> <a href="/" class="pull-left navbar-brand"></a> <ul class="nav navbar-nav pull-left"> </ul> </div> </div> </div> 

Notice the .navbar-nav class, which must now accompany the .nav class.

Dialogues

Dialogues are now also complicated. It was:

 <div class="modal hide fade " style="width:400px; margin-left:-200px; z-index:1000000;"> <div class="modal-header"> <button class="close" data-dismiss="modal">×</button><h3></h3> </div> <div class="modal-body" style="width:380px; height:250px;"></div> <div class="modal-footer"><div class="btn-group"> <span class="btn yes btn-primary" data-dismiss="modal"></span> <span class="btn cancel btn-danger" data-dismiss="modal"></span> </div> </div> </div> 

It became:

 <div class="modal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button class="close" data-dismiss="modal">×</button> <h3 class="modal-title"> </h3> </div> <div class="modal-body"></div> <div class="modal-footer"> <div class="btn-group"> <span class="btn yes btn-primary" data-dismiss="modal"></span> <span class="btn cancel btn-danger" data-dismiss="modal"></span> </div> </div> </div> </div> </div> 

Here the developers really tried and the dialogues became a little less buggy and more logical, especially in terms of managing the size of the dialog box.

Grid

Grid thoroughly altered. Probably, this is the most significant change in the framework, having found that, in some projects, you can only wring one's arms out in wonder - there are no longer fixed sizes, only the dynamic width of the columns is recognized. Markup classes responsible for column widths, .span2 , .span3 , etc. replaced by the corresponding .col-md-2 , .col-md-3 ...

Pictures

There is no more img-polaroid class. Instead, you can use img-thumbnail

Icons

The bootstrap icons themselves are now implemented with a font, not sprites. Along with this, the names of the classes have been changed, which now have to be replaced.

 <i class="icon-pencil"></i> 

need to write

 <i class="glyphicon glyphicon-pencil"></i> 

If you use Font-Awesome, then, in principle, you don’t need to change anything and, fortunately, everything will continue to work as before. Perhaps this is a good reason to connect this wonderful font, the blessing, the supply of icons from him is definitely richer.

Badge

If someone used multicolored, now they are not from the word at all. Instead, badges adapt to the color of the elements and by default in most cases they are just gray. For the sake of flowers, you will have to replace badges with .label tags

Pagination

Previously, the pagination class could be assigned to any element, say a div . Now only on ul

 <div> <ul class="pagination"> <li><a href="#">1</a></li> <li><a href="#">1</a></li> <li><a href="#">1</a></li> </ul> </div> 

Perhaps this is all that caught my eye in the first approximation.

useful links

- Help differences during migration (English)
- Web interface style settings bootstrap
- Automatic markup converter from the 2nd to the 3rd version of bootstrap (thanks to muhas for the link)