Rails應用開發點滴

1. Bootstrap安裝javascript

  • Gemfile加入: 
gem 'bootstrap-sass', '~> 3.1.1'
  • 命令行運行 bundle install
  • app\assets\stylesheets\增長文件 bootstrap_and_overrides.css.scss,內容爲
@import "bootstrap";
  • app\assets\javascripts\application.js
//= require bootstrap

 

2. simple_form安裝配置css

  • Gemfile加入:
gem 'simple_form'

運行集成bootstrap的生成器html

rails generate simple_form:install --bootstrap

 

3. /config/application.rb中進行配置更改java

在註釋出現的相應位置,加入行node

config.time_zone = 'Beijing'

config.i18n.default_locale = :cn

 

4. locale關於中文的處理bootstrap

在/config目錄中: 複製en.yml,命名爲cn.yml; 複製simple_form.en.yml, 命名爲simple_form.cn.yml;緩存

並打開這兩個文件進行相應翻譯調整.sass

 

5. /app/assets/stylesheets/application.css中, 定製action中設置的notice的顯示樣式,加入app

.alert-notice{
    background-color: #dff0d8;
    border-color: #b2dba1;
    color: #3c763d;
}

這樣能夠在/app/views/layouts/application.html.erb中的<%= yield %>之間, 一次性插入ide

      <% flash.each do |key, value| %>
      <p class="alert alert-<%= key %>"><%= value %></p>
      <% end %>

從而規範了全部使用該layout的頁面的顯示方式,而缺省狀況下alert-notice的樣式未被定義,Rails生成的頁面裏都會(不太符合DRY)被加入

<p id="notice"><%= notice %></p>

這樣能夠把頁面裏的這行冗餘代碼刪除了.

 

6. 注意redirect_to兩種調用方式對notice的影響

經實際測試, 形式爲:

redirect_to ***_path, notice: "****" 

的調用, notice消息可以顯示; 而形式爲:

redirect_to action :actionname, notice: "****" 

的調用, notice消息不可以顯示;

 

7. CKEditor安裝配置

gem 'ckeditor'

app/assets/javascripts/application.js中加入

//= require ckeditor/init

對定義爲text類型的field如:content, 對simple_form生成的代碼進行以下修改:

<%= form.input :content, :as => :ckeditor, :input_html => { :ckeditor => {:toolbar => 'Full'} } %>

其中{:toolbar => 'Full'} 也能夠設爲{:toolbar => 'mini'}, 這樣toolbar更加緊湊

此外, CKEditor是在加載時動態替換textarea, 這與Rails的Turbolinks緩存頁面機制衝突,會致使再次訪問頁面時CKEditor顯示爲textarea, 須要在使用它的頁面進行更改:

<body data-no-turbolink="true">

 

8. Link_to的bootstrap效果調整, 相似下面的設置, 黑色字體在深藍底色下顯示不夠明顯

<%= link_to '新建字典類型', new_manage_dict_type_path, class: "btn btn-primary btn-sm" %>

在app\assets\stylesheets\增長文件 bootstrap_and_overrides.css.scss中加入如下代碼解決

a.btn-primary{ /*缺省a的字體顏色爲黑色,不適合*/
    color: #fff !important;
}

 

9. 樹控件dtree的安裝與設置

解壓縮 dtree.zip, 三個部分拷貝到不一樣位置:

img文件夾 -> public

dtree.css -> app\assets\stylesheets

dtree.js   -> app\assets\javascripts

 在 dtree.css 中的

.dtree a.node:hover, .dtree a.nodeSel:hover {

內加入以下代碼,解決bootstrap使<a>元素在hover時變黑的問題.

background-color: #dff0d8 !important;
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在,都有一个你没有努力的曾经。