Upgrading from Bootstrap 1.4.0 to 2.0

Twitter Bootstrap 2.0 was recently released. They’ve provided an upgrade guide, but it doesn’t list every detail you may have to change. Here’s a list of the things I had to update to get a similar look:

CSS

I added a reference to bootstrap-responsive.css. I’m not sure this really mattered for me, but you never know!

Nav bar

The navbar markup had changed a bit, from:

 <div id="navbar" class="topbar">
  <div class="fill">
	<div class="container">
	  <a class="brand" href="#">App name</a>
	  <ul class="nav">
          ...
          </ul>
	</div>
  </div>
</div>

to:

<div id="navbar" class="navbar navbar-fixed-top">
  <div class="navbar-inner">
	<div class="container">
	  <a class="brand" href="">App name</a>
	  <div class="nav-collapse">
		<ul class="nav">
                ...
		</ul>
	  </div><!--/.nav-collapse -->
	</div>
  </div>
</div>

Grid

The grid layout has changed, from 16 columns to 12.

Tables

.condensed-table is no more, you need .table & .table-condensed

Buttons

The button styles are now prepended with btn e.g. for a dangerous button:

<button class="btn btn-danger">Watch Out!</button>

Alerts

The script has been renamed to bootstrap-alert.js (from bootstrap-alerts.js). The css has changed a bit as well, from:

<div id="alert" class="alert-message error"></div>

to:

<div id="alert" class="alert alert-error"></div>

And the close button has changed from:

<a class="close" href="#">x</a>

to:

<a class="close" data-dismiss="alert">x</a>

(thanks to this article for the tip!).

And finally…

Forms

The default form styling has changed to a “stacked” look, and the required markup has changed as well. To get back to the old look, I had to go from this:

<form>
  <div class="clearfix">
    <label>This:</label>
    <div class="input">
      <input readonly="readonly" value="<%= model.this %>" />
    </div>
  </div>
  ...
  <div class="clearfix">
    <label>That:</label>
    <div class="input">
      <input readonly="readonly" value="<%= model.that %>" />
    </div>
  </div>
</form>

to:

<form class="form-horizontal">
  <fieldset class="control-group">
    <label class="control-label" for="this">This:</label>
    <div class="controls">
      <input readonly="readonly" value="<%= model.this %>" name="this" />
    </div>
  </fieldset>
  ...
  <fieldset class="control-group">
    <label class="control-label" for="that">That:</label>
    <div class="controls">
      <input readonly="readonly" value="<%= model.that %>" name="that" />
    </div>
  </fieldset>
</form>

I’m sure there are other changes, but that was enough for the subset I’m using.

2 thoughts on “Upgrading from Bootstrap 1.4.0 to 2.0

  1. Pingback: 核桃博客

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s