rails使用bootstrap
2016-01-31 19:51
495 查看
在Gemfile文件中添加'bootstrap-sass',再运行bundle install
在config/application.rb添加一行代码,让bootstrap-sass和asset pipeline兼容
要使用bootstrap还需要在app/assets/stylesheets目录下创建一个css文件:custom.css.scss
内容为:
另外在app/assets/javascripts/application.js文件中添加一行
这样才能使用bootstrap的javascript的组件。
现在就可以开始使用bootstrap了。
gem 'bootstrap-sass'
在config/application.rb添加一行代码,让bootstrap-sass和asset pipeline兼容
class Application < Rails::Application # Settings in config/environments/* take precedence over those specified here. # Application configuration should go into files in config/initializers # -- all .rb files in that directory are automatically loaded. # Set Time.zone default to the specified zone and make Active Record auto-convert to this zone. # Run "rake -D time" for a list of tasks for finding time zone names. Default is UTC. # config.time_zone = 'Central Time (US & Canada)' # The default locale is :en and all translations from config/locales/*.rb,yml are auto loaded. # config.i18n.load_path += Dir[Rails.root.join('my', 'locales', '*.{rb,yml}').to_s] # config.i18n.default_locale = :de # Do not swallow errors in after_commit/after_rollback callbacks. config.active_record.raise_in_transactional_callbacks = true #让bootstrap-sass和asset pipeline兼容 config.assets.precompile += %w(*.png *.jpg *.jpeg *.gif) end
要使用bootstrap还需要在app/assets/stylesheets目录下创建一个css文件:custom.css.scss
内容为:
@import "bootstrap-sprockets" @import "bootstrap"
另外在app/assets/javascripts/application.js文件中添加一行
//= require bootstrap
这样才能使用bootstrap的javascript的组件。
现在就可以开始使用bootstrap了。
相关文章推荐
- 系统学习bootstrap——day1
- javaEE 后台框架 SpringMVC Mybatis Shiro druid Bootstrap HTML5 hibernate
- bootstrap学习
- Bootstrap fileinput.js,最好用的文件上传组件
- bootstrap 实现 contextmenu 的最小代码(无需第三方库)
- bootstrap iCheck插件 全选和获取value值的解决方法
- Bootstrap fileinput.js,最好用的文件上传组件
- bootstrap使用记录
- 为Bootstrap模态对话框添加拖拽移动功能
- Bootstrap on ROR
- 【Bootstrap3.0建站笔记一】表单元素排版
- Bootstrap 学习
- bootstrap fileinput 文件上传工具
- andorid 控件 Bootstrap3.0风格的控件 精美UI控件库
- JS组件系列之Bootstrap Icon图标选择组件
- 很不错的两款Bootstrap Icon图标选择组件
- JS组件系列——不容错过的两款Bootstrap Icon图标选择组件
- Datatables+Bootstrap
- Bootstrap中的 Typeahead 组件
- bootstrap3 兼容IE8浏览器