over 4 years ago

最近將自家一個案子的 Bootstrap 升級到 3。順便就把這些瑣碎的步驟整理並分類了一下。

General

  1. row 取代 row-fluid
  2. col-sm-* 取代 span*
  3. glyphicon glyphicon-* 取代 icon-*
  4. 移除 container-fluid 的區塊
  5. 預設 button style 需另外加上 btn-default
  6. 預設 label style 需另外加上 label-default
  7. 預設 alert style 需另外加上 alert-warning
  8. 改變 button size 對應: btn-[mini|small|large] → btn-[xs|sm|lg]

Form

  1. form-group 取代 control-group 以及 form-actions
  2. 依照長度不同,替 label 加上 col-sm-* class
  3. 依照長度不同,以 col-sm-* 取代 controls
  4. input 加上 form-control class
  5. 依照偏移量以及長度不同,以 <div class="col-sm-offset-* col-sm-*"></div> 包覆 action button
  6. .radio.inline 改為 .radio-inline 同理 .checkbox.inline 改為 .checkbox-inline
  7. input-group 取代 input-append
  8. input-group-addon 取代 add-on

附上一段簡單的 Diff Code

- <div class="control-group">
-   <label for="email" class="control-label">{{_("E-mail")}}</label>
-     <div class="controls">
-       <input type="text" id="email" name="email" required>
+ <div class="form-group">
+   <label for="email" class="col-sm-2 control-label">{{_("E-mail")}}</label>
+     <div class="col-sm-3">
+       <input class="form-control" type="text" id="email" name="email" required>
      </div>
  </div>
- <div class="form-actions">
-   <button type="submit" class="btn btn-primary">{{_("Login")}}</button>
-   <button type="button" class="btn">{{_("Cancel")}}</button>
+ <div class="form-group">
+   <div class="col-sm-offset-2 col-sm-3">
+     <button type="submit" class="btn btn-primary">{{_("Login")}}</button>
+     <button type="button" class="btn btn-default">{{_("Cancel")}}</button>
+   </div>
  </div>

Modal

  1. 內容主體外,額外包覆 2 層 div,分別是 div.modal-dialog 以及 div.modal-content
  2. modal-header 裡面的 h3 改為 h4,並加上 class modal-title

Caveat

  1. 彩色 Badge 已從 Bootstrap3 移除

參考資料

  1. Upgrade Bootstrap 2 HTML to Bootstrap 3
  2. Twitter Bootstrap
← Python Logging Adapter 的使用 RequireJS 使用筆記 →
 
comments powered by Disqus