Rails Application Development
1. Bootstrap Installation
gem 'bootstrap-sass', '~> 3.1.1'
@import "bootstrap";
//= require bootstrap
2. simple_form installation Configuration
gem 'simple_form'
Run the Generator Integrated with bootstrap
rails generate simple_form:install --bootstrap
3. Change the configuration in/config/application. rb.
Add rows to the corresponding location of the comment
config.time_zone = 'Beijing'
config.i18n.default_locale = :cn
4. locale processing of Chinese Characters
In the/config Directory: Copy en. yml and name it cn. yml. Copy simple_form.en.yml and name it simple_form.cn.yml;
Open the two files and make corresponding translation adjustments.
5. In/app/assets/stylesheets/application.css, customize the notice display style set in the action and add
.alert-notice{ background-color: #dff0d8; border-color: #b2dba1; color: #3c763d;}
In this way, you can insert one-time inserts between <% = yield %> In/app/views/layouts/application.html. erb.
<% flash.each do |key, value| %> <p class="alert alert-<%= key %>"><%= value %></p> <% end %>
This standardizes the display methods of all pages that use this layout. By default, the alert-notice style is not defined, and all pages generated by Rails (not suitable for DRY) are added.
<p id="notice"><%= notice %></p>
In this way, the redundant code in the page can be deleted.
6. Note the effect of redirect_to on notice
Tested in the form:
redirect_to ***_path, notice: "****"
The notice message can be displayed, and the form is:
redirect_to action :actionname, notice: "****"
Call, notice messageNot AllowedDisplay;
7. CKEditor installation Configuration
gem 'ckeditor'
Inapp/assets/javascripts/application.jsJoin
//= require ckeditor/init
Modify the code generated by simple_form for fields defined as text, such as content:
<%= form.input :content, :as => :ckeditor, :input_html => { :ckeditor => {:toolbar => 'Full'} } %>
{: Toolbar => 'full'} can also be set to {: toolbar => 'mini '}, which makes the toolbar more compact.
In addition, CKEditor dynamically replaces textarea during loading, which is in conflict with the Turbolinks cache page mechanism of Rails. As a result, when accessing the page again, CKEditor is displayed as textarea, you need to make changes on the page that uses it:
<body data-no-turbolink="true">
8. The bootstrap Effect of Link_to is adjusted. Similar to the settings below, the black font is not obviously displayed in the dark blue background.
<% = Link_to 'new dictionary type', new_manage_dict_type_path, class: "btn-primary btn-sm" %>
Add the following code to app \ assets \ stylesheets \ Add the file bootstrap_and_overrides.css.scss to solve the problem:
A. btn-primary {/* default font color of a is black, not suitable */color: # fff! Important ;}
9. Installation of tree control dtree
Decompress dtree.zip and copy the three parts to different locations:
Img folder-> public
Dtree.css-> app \ assets \ stylesheets
Dtree. js-> app \ assets \ javascripts
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
