向現有專案增加bootstrap的步驟

2021-09-01 04:36:01 字數 2343 閱讀 1995

有乙個專案,前台有專門的美工。本著**後台是內部人員使用, 「將就能用就行」的原則(呵呵,不是我說的,是軟體教主joey說的),我打算在管理介面上使用bootstrap. 起碼是現成的,而且裡面有很多優秀的元素。

考察了幾個 gem,  ( rails-bootstrap啥的), 感覺對裡面的東西理解的不到位。另外哥趕時間,不如自己動手,豐衣足食啊。 就那麼幾個css/js檔案。。。所以。。。

步驟記錄如下:

2. 在你的瀏覽器中(例如firefox)開啟  docs/examples/starter-template.html, 可以通過firebug檢視裡面的結構。

4. 把該替換的替換,例如在header中:3

p.s. 記得 13行的js 宣告還是暫時放在 中比較好,如果放在最下面, 有些jquery(document).ready()會在執行時發生錯誤。

5.  實現對應的 admin_layout.js.erb: 

1 //

2 //= require jquery

3 //= require jquery_ujs

4 //= require jquery-ui-1.8.18.custom.min.js

5 //= require bootstrap/bootstrap-transition

6 //= require bootstrap/bootstrap-alert

7 //= require bootstrap/bootstrap-modal

8 //= require bootstrap/bootstrap-dropdown

9 //= require bootstrap/bootstrap-scrollspy

10 //= require bootstrap/bootstrap-tab

11 //= require bootstrap/bootstrap-tooltip

12 //= require bootstrap/bootstrap-popover

13 //= require bootstrap/bootstrap-button

14 //= require bootstrap/bootstrap-collapse

15 //= require bootstrap/bootstrap-carousel

16 //= require bootstrap/bootstrap-typeahead

17 //= require my_utilities

6. 實現對應的 admin_layout.css.erb

1 /*

2  *= require jquery-ui-1.8.18.custom

3  *= require bootstrap

4  *= require bootstrap-responsive

5  */

67 body

這裡兩個bootstrap檔案都要包含(話說我還沒弄清楚它倆的區別的用法,時間太趕了。。。) , 同時, 修改bootstrap.css.erb, 把裡面出現的兩處 ,替換成 asset_path ,同時也要把複製過去。: 

1398   background-image: url("<%= asset_path "glyphicons-halflings.png" %>");

......

1407 .icon-white {

1408   background-image: url("<%= asset_path "glyphicons-halflings-white.png" %>");

7. 最後, 修改布局檔案: 向裡面加入對應的 <%= yield %> 就歐了。

36    

37      

38        

39           

40               <%= yield %>

41            

42            

43              

4445                

51              

52            

53        

54      

8. 修改對應的action , 使用   render :layout => "admin_layout"

9. 在 config/environments/production.rb ,修改 需要在生產環境下預編譯的東東:

49   config.assets.precompile += %w( admin_layout.css, admin_layout.js.erb )

10. 最後的最後, 看一眼提交的**:

Rails專案中,快速增加bootstrap的流程

我使用的場景是 rails 3.2.6 1,增加gem bootstrap gem anjlab bootstrap rails 2.1 require bootstrap rails gem bootstrap will paginate 0.0.3 gem bootstrap helper 2....

Django現有模型增加字段

對於django已經存在的模型中需要增加乙個字段,如何實現?首先在model.py檔案中找到對應的模型名稱,加入需要增加的字段 找到新增加的字段的sql語句,記錄下來 再執行python manage.py shell 執行如下命令 from django.db import connection ...

向MYSQL資料庫中的現有表增加新的字段(列)

題記 最近因為專案需要用到mysql,mysql從來都沒使用過,雖然這屬於中小型企業,網路公司使用,主要的一點是它跨平台型,並且購買成本比較低,公升至開源的。所以佔據了大部分的市場份額。alter table 資料庫名 表名 add column procid varchar 6 default a...