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
navbar
classes and its subclasses. - Update my
fields.html.twig
file 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#