Rails应用开辟点滴

时间:2019-09-21 00:57来源: 操作系统
Bootstrap安装 Gemfile加入: gem 'bootstrap-sass', '~ 3.1.1' 命令行运营 bundle install appassetsstylesheets追Gavin件bootstrap_and_overrides.css.scss,内容为 @import "bootstrap"; appassetsjavascriptsapplication.js //= require boot
  1. Bootstrap安装
  • Gemfile加入:
gem 'bootstrap-sass', '~> 3.1.1'
  • 命令行运营 bundle install
  • appassetsstylesheets追Gavin件 bootstrap_and_overrides.css.scss,内容为
@import "bootstrap";
  • appassetsjavascriptsapplication.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生成的页面里都会被投入

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

如此那般能够把页面里的这行冗余代码删除了.

  1. 注意redirect_to二种调用方式对notice的影响

经实际测验, 情势为:

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

的调用, notice消息能够呈现; 而花样为:

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

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

  1. CK艾德itor安装配备

    gem 'ckeditor'

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

//= require ckeditor/init

对定义为text类型的田野如: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" %>

在appassetsstylesheets追Gavin件 bootstrap_and_overrides.css.scss中参预以下代码消除

a.btn-primary{ /*缺省a的字体颜色为黑色,不适合*/    color: #fff !important;}
  1. 树控件dtree的装置与安装

解压缩 dtree.zip, 四个部分拷贝到分裂岗位:

img文件夹 -> public

dtree.css -> appassetsstylesheets

dtree.js -> appassetsjavascripts

在 dtree.css 中的

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

内部参照他事他说加以考察消息加如下代码,消除bootstrap使<a>成分在hover时变黑的难点.

background-color: #dff0d8 !important;

编辑: 操作系统 本文来源:Rails应用开辟点滴

关键词:

  • 上一篇:没有了
  • 下一篇:没有了