BootstrapRails应用开发点滴

  1. Bootstrap安装
  • 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

 

  1. simple_form安装配备
  • Gemfile加入:

    gem ‘simple_form’

运行集成bootstrap的生成器

rails generate simple_form:install --bootstrap

 

  1. /config/application.rb中举行布署更改

在诠释出现的照应地方,插足行

config.time_zone = 'Beijing'

config.i18n.default_locale = :cn

 

  1. locale关于汉语的拍卖

在/config目录中: 复制en.yml,命名为cn.yml; 复制simple_form.en.yml,
命名为simple_form.cn.yml;

并打开那七个文件进行相应翻译调整.

 

  1. /app/assets/stylesheets/application.css中,
    定制action中安装的notice的来得样式,插手

    .alert-notice{

     background-color: #dff0d8;
     border-color: #b2dba1;
     color: #3c763d;
    

    }

这么可以在/app/views/layouts/application.html.erb中的<%= yield
%>之间, 三次性插入

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

于是规范了富有应用该layout的页面的显示格局,而缺省气象下alert-notice的样式未被定义,Rails生成的页面里都会(不太相符DRY)被插手

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

诸如此类可以把页面里的那行冗余代码删除了.

 

  1. 注意redirect_to三种调用格局对notice的熏陶

经实际测试, 格局为:

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

的调用, notice音讯可以突显; 而花样为:

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

的调用, notice消息不能够显示;

 

  1. 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">

 

  1. 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;
}

 

  1. 树控件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;

 

 

 

相关文章