管理画面で使ってたTwitterBootstrapを2系から3系にアップデートした話

クラス名やコンポーネントのタグ構成など根本的に変わってる箇所があり修正が大変でした。
今回は管理画面でTwitterBootStrapを使っていたので、どの管理画面もおそらく使っているようなコンポーネントは似たようなもんだと思うので、参考になればこれ幸い。
先人様がBootstrap3移行ガイドを書いてくれているので、コード量が多い場合はURLを記載しておくのでそちらを参考にしてください。

before

TwitterBootstrap.version2{
    value:2系のソースコード;
}

after

TwitterBootstrap.version3{
    value:3系のソースコード;
}

グローバルバビゲーション(ヘッダーメニュー)

まず最初に目についたのがグロナビが落っこちてた。
http://cccabinet.jpn.org/bootstrap3/components1.php#navbar-default

要素の構成はそれほど変わってないが、クラス名が9割変わってた。死にたい。

パンくずリスト

リストに表示されるスラッシュがなんか多い…仕切りに使ってたタグがいらなくなった。

before

<ul class="breadcrumb">
  <li><a href="#">ホーム</a> <span class="divider">/</span></li>
  <li><a href="#">ライブラリ</a> <span class="divider">/</span></li>
  <li class="active">データ</li>
</ul>

after

<ul class="breadcrumb">
  <li><a href="#">ホーム</a></li>
  <li><a href="#">ライブラリ</a></li>
  <li class="active">データ</li>
</ul>

リストグループ(サブメニュー)

以前はul liタグで作っていたけどもうタグの種類も変わってる。
何もかも変わってる。

before

<ul class="nav nav-tabs nav-stacked">
  <li class="active"><a href="#">ホーム</a></li>
  <li><a href="#">プロフィール</a></li>
  <li><a href="#">メッセージ</a></li>
</ul>

after

<div class="list-group">
  <a href="#" class="list-group-item active">ホーム</a>
  <a href="#" class="list-group-item">プロフィール</a>
  <a href="#" class="list-group-item">メッセージ</a>
</div>

入力フォーム

水平フォームなどに利用するcontrol-groupクラス名が変更された。
http://cccabinet.jpn.org/bootstrap3/css.php#basic-form

before

<form class="form-horizontal">
    <div class="control-group">
        <label class="control-label" for="text">名前</label>
        <div class="controls">
            <input type="text" id="Name" placeholder="名前">
        </div>
    </div>

    <div class="control-group">
        <div class="controls">
            <button type="submit" class="btn">送信</button>
        </div>
    </div>
</form>

after

<form class="form-horizontal">
    <div class="form-group">
        <label class="col-sm-2 control-label" for="text">名前</label>
        <div class="col-sm-10">
            <input type="text" id="Name" placeholder="名前">
        </div>
    </div>

    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <button type="submit" class="btn">送信</button>
        </div>
    </div>
</form>

アイコン(グリフアイコン)の設定の仕方

before

<button type="button" class="btn">
  <i class="icon-star"></i> Star
</button>

after

<button type="button" class="btn btn-default">
  <span class="glyphicon glyphicon-star"></span> Star
</button>

アイコン一覧はこちら
http://cccabinet.jpn.org/bootstrap3/components1.php#icon2

グリッドシステム

クラス名に指定していたspan2やspan10が変更されてる。
http://cccabinet.jpn.org/bootstrap3/css.php#grid

before

<div class="span2"></div>
<div class="span10"></div>

after

<div class="col-md-2"></div>
<div class="col-md-10"></div>

まだたくさん対応しなければならない所はあるんでしょうが、目立ったのはこんなもんでした。
フォームの数が多いのでお刺身タンポポ的な作業でもめちゃしんどい…。