Useful regular expressions to update to Bootstrap 3
I recently upgraded a project from Twitter Bootstrap 2 to Bootstrap 3.
Here is the list of regular expression replacements I applied in all my templates :
-
class="span(\d+)→class="col-md-$1 -
class="row-fluid→class="row -
class="([^"]*)offset(\d+)→class="$1col-md-offset-$2 -
class="([^"]*)span(\d+)→class="$1col-md-$2 -
class="label"→class="label label-default" -
label-important→label-danger -
class="brand"→class="navbar-brand" -
class="controls"→class="col-sm-8" -
class="btn"→class="btn btn-default" -
class="btn ([^b])"→class="btn btn-default $1 -
class="([^"]*)control-label→class="$1col-sm-4 -
class="([^"]*)add-on→class="$1input-group-addon -
class="([^"]*)input-append→class="$1input-group -
class="([^"]*)input-prepend→class="$1input-group -
class="([^"]*)add-on→class="$1input-group-addon -
class="([^"]*)modal hide→class="$1modal -
"<i class="icon icon-([^"]+)"></i>"→<span class="glyphicon glyphicon-$1"></span>
Then I did the following :
- Manually rework the
navbarclasses and its subclasses. - Update my
fields.html.twigfile in the Symfony application in order to render fields with default classes for Bootstrap. See http://symfony.com/doc/current/cookbook/form/form_customization.html . - Encapsulate modal contents in
<div class="modal-dialog"> and <div class="modal-content">tags. If you are using Twig, the creation of a macro in order to create modals in a generic way is a nice way to go.
Beware that my regular expressions may modify non-bootstrap classes. Review each change before committing the changes.
Written by Michaël Perrin
Related protips
1 Response
Thanks very much, I found this post useful.
over 1 year ago
·
Have a fresh tip? Share with Coderwall community!
Post
Post a tip
Best
#Bootstrap
Authors
Sponsored by #native_company# — Learn More
#native_title#
#native_desc#