2014年09月26日

Bootstrap2.3からBootstrap3へのバージョンアップに伴ってフォームを修正

Bootstrap2.3からBootstrap3.2へバージョンアップしたら変更、廃止されたクラスがありレイアウトが崩れてしまいました。今回修整した点を備忘として残しました。
●オンラインサイト上の説明

下記ページに変更内容が記載されています。
http://getbootstrap.com/migration/

●管理人が変更した項目

大きな変更点としては、グリッドのspanクラスとフォームに関するクラスです。

1)span

(変更内容)
<div class="span6 offset3">
  ↓
<div class="col-md-6 col-md-offset-3">

2)control-group、controls、input-small、input-mini

(変更内容)

<div class="control-group">
<label class="control-label" ・・・
<div class="controls">
<input class="input-small" id="XXX" name="XXX" type="text" />
</div>
</div>
 ↓
<div class="form-group">
<label class="col-sm-2 control-label" ・・・・
<div class="col-sm-10">
<input id="xxx" name=#xxx" type="text" />
</div>
</div>

(変更方法)
量が多かったのでsedコマンドでまとめて置換しました。

sed -i -e "s/control-group/form-group/g" input.html
sed -i -e "s/input-small//g" input.html
sed -i -e "s/input-mini//g" input.html
sed -i -e "s/class=\"controls\"/class=\"col-sm-2\"/g" input.html
sed -i -e "s/control-label/col-sm-2 control-label/g" input.html
posted by ホノデザイン at 07:00| Comment(0) | ブートストラップ | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント: