在Rails中最方便集成使用Bootstrap的方式
创建项目
rails new BootstrapProject
创建模型
rails g scaffold xxx --skip-stylesheets
运行迁移
rake db:migrate
--------- 如果项目和模型都已经建立好了并已经运行了迁移,那么可以省略以上步骤,直接进入下面的流程 ---------
在Gemfile中添加bootstrap,这里使用twitter-bootstrap-rails
gem 'jquery-rails'
gem 'less-rails'
gem 'therubyracer'
gem 'twitter-bootstrap-rails'
bundle
bundle install
安装bootstrap
rails g bootstrap:install
在模型上运用bootstrap
rails g bootstrap:themed xxx -f
注:xxx可以是任意的模型,例如模型名称是Article,那么这里的语句就是:
rails g bootstrap:themed Articles
还要在application.js中加上引用,否则bootstrap的一些按钮会失效:
//= require jquery
//= require twitter/bootstrap
Enjoy it~
在Rails中最方便集成使用Bootstrap的方式的更多相关文章
- 【转】Rails中Bootstrap的安装和使用
转自:http://blog.csdn.net/lissdy/article/details/9195651 眼看着前端攻城师们都开始使用Bootstrap创作网页,于是也想学着在最近正在学习的 ...
- Ruby Rails学习中:网站导航,Bootstrap和自定义的CSS,局部视图
添加一些结构 一.网站导航 1.添加一些结构后的网站布局文件 打开文件:app/views/layouts/application.html.erb 简单介绍一下,添加的代码: 我们从上往下看一下这段 ...
- windows和linux中搭建python集成开发环境IDE——如何设置多个python环境
本系列分为两篇: 1.[转]windows和linux中搭建python集成开发环境IDE 2.[转]linux和windows下安装python集成开发环境及其python包 3.windows和l ...
- Cloud Foundry中 JasperReports service集成
Cloud Foundry作为业界第一个开源的PaaS解决方案,正越来越多的被业界接受和认可.随着PaaS的发展,Cloud Foundry顺应潮流,充分发挥开源项目的特点,到目前为止,已经支持了大批 ...
- Phonegap集成angular/bootstrap/animate.css教程
1,phonegap集成angular 按照这篇文档的步骤:http://projectpoppycock.com/angularjs-phonegap-and-angular-seed-lets-g ...
- 3.2、使用Flask-Bootstrap集成Twitter Bootstrap
Bootstrap(http://getbootstrap.com/)是 Twitter 开发的一个开源框架,它提供的用户界面组件可用于创建整洁且具有吸引力的网页,而且这些网页还能兼容所有现代 Web ...
- 20170305深圳Meetup Rails中CSS,JS引用关系分析
新手上路,若有错误请及时提醒 Rails中CSS,JS引用关系分析 一.Rails静态文件存放位置 二.Rails中CSS引用方式 三.Rails中JS引用方式与CSS类似 四.上面都是默认引用app ...
- 【转】windows和linux中搭建python集成开发环境IDE
本系列分为两篇: 1.[转]windows和linux中搭建python集成开发环境IDE 2.[转]linux和windows下安装python集成开发环境及其python包 3.windows和l ...
- Rails中的MIME类型
layout title date comments categories post rails的中的MIME类型 2014-09-08 21:40 true ruby Rails开发中经常使用不同的 ...
随机推荐
- Elasticsearch 6.2.3版本 filtered 报错问题 no [query] registered for [filtered]
背景描述 近期在学习<Elasticsearch 权威指南>上的一些基本命令,在操作到 filtered 进行过滤查询的时候,报错 “no [query] registered for [ ...
- delphi中 formclose的事件 action:=cafree form:=nil分别是什么意思?
MDI子窗体关闭时用到的(以下摘自Delphi的帮助)caNone The form is not allowed to close, so nothing happens.caHide The ...
- 深入理解.NET Core的基元(二)
原文:Deep-dive into .NET Core primitives, part 2: the shared framework作者:Nate McMaster译文:深入理解.NET Core ...
- centos7使用kubeadm安装kubernetes集群
参考资料:官方文档 一.虚拟机安装 配置说明: windows下使用vbox,centos17.6 min版,kubernetes的版本是1.14.1, 安装如下三台机器: 192.168.56.15 ...
- Tensorflow 安装 和 初识
Windows中 Anaconda,Tensorflow 和 Pycharm的安装和配置 https://blog.csdn.net/zhuiqiuzhuoyue583/article/detai ...
- 【ABAP系列】SAP ABAP OOALV 动态设置单元格可否编辑
公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[ABAP系列]SAP ABAP OOALV 动 ...
- 【神经网络与深度学习】【Qt开发】【VS开发】从caffe-windows-visual studio2013到Qt5.7使用caffemodel进行分类的移植过程
[神经网络与深度学习][CUDA开发][VS开发]Caffe+VS2013+CUDA7.5+cuDNN配置成功后的第一次训练过程记录<二> 标签:[神经网络与深度学习] [CUDA开发] ...
- Win10成功安装IIS后浏览器打开localhost正确显示的页面
- Qt - 基于HTTP的网络编程
HTTP(超文本传输协议 Hyper Text Transfer Protocol) 基于TCP/IP通信协议,属于应用层协议. 使用情况: HTTP是无连接(无连接的含义是限制每次连接只处理一个请求 ...
- Maven - Maven3实战学习笔记(3)使用maven构建Web应用
1.jetty-maven-plugin自动化测试Web应用工具 <plugin> <groupId>org.mortbay.jetty</groupId> < ...