创建项目

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的方式的更多相关文章

  1. 【转】Rails中Bootstrap的安装和使用

     转自:http://blog.csdn.net/lissdy/article/details/9195651   眼看着前端攻城师们都开始使用Bootstrap创作网页,于是也想学着在最近正在学习的 ...

  2. Ruby Rails学习中:网站导航,Bootstrap和自定义的CSS,局部视图

    添加一些结构 一.网站导航 1.添加一些结构后的网站布局文件 打开文件:app/views/layouts/application.html.erb 简单介绍一下,添加的代码: 我们从上往下看一下这段 ...

  3. windows和linux中搭建python集成开发环境IDE——如何设置多个python环境

    本系列分为两篇: 1.[转]windows和linux中搭建python集成开发环境IDE 2.[转]linux和windows下安装python集成开发环境及其python包 3.windows和l ...

  4. Cloud Foundry中 JasperReports service集成

    Cloud Foundry作为业界第一个开源的PaaS解决方案,正越来越多的被业界接受和认可.随着PaaS的发展,Cloud Foundry顺应潮流,充分发挥开源项目的特点,到目前为止,已经支持了大批 ...

  5. Phonegap集成angular/bootstrap/animate.css教程

    1,phonegap集成angular 按照这篇文档的步骤:http://projectpoppycock.com/angularjs-phonegap-and-angular-seed-lets-g ...

  6. 3.2、使用Flask-Bootstrap集成Twitter Bootstrap

    Bootstrap(http://getbootstrap.com/)是 Twitter 开发的一个开源框架,它提供的用户界面组件可用于创建整洁且具有吸引力的网页,而且这些网页还能兼容所有现代 Web ...

  7. 20170305深圳Meetup Rails中CSS,JS引用关系分析

    新手上路,若有错误请及时提醒 Rails中CSS,JS引用关系分析 一.Rails静态文件存放位置 二.Rails中CSS引用方式 三.Rails中JS引用方式与CSS类似 四.上面都是默认引用app ...

  8. 【转】windows和linux中搭建python集成开发环境IDE

    本系列分为两篇: 1.[转]windows和linux中搭建python集成开发环境IDE 2.[转]linux和windows下安装python集成开发环境及其python包 3.windows和l ...

  9. Rails中的MIME类型

    layout title date comments categories post rails的中的MIME类型 2014-09-08 21:40 true ruby Rails开发中经常使用不同的 ...

随机推荐

  1. Elasticsearch 6.2.3版本 filtered 报错问题 no [query] registered for [filtered]

    背景描述 近期在学习<Elasticsearch 权威指南>上的一些基本命令,在操作到 filtered 进行过滤查询的时候,报错 “no [query] registered for [ ...

  2. delphi中 formclose的事件 action:=cafree form:=nil分别是什么意思?

    MDI子窗体关闭时用到的(以下摘自Delphi的帮助)caNone  The form is not allowed to close, so nothing happens.caHide  The ...

  3. 深入理解.NET Core的基元(二)

    原文:Deep-dive into .NET Core primitives, part 2: the shared framework作者:Nate McMaster译文:深入理解.NET Core ...

  4. centos7使用kubeadm安装kubernetes集群

    参考资料:官方文档 一.虚拟机安装 配置说明: windows下使用vbox,centos17.6 min版,kubernetes的版本是1.14.1, 安装如下三台机器: 192.168.56.15 ...

  5. Tensorflow 安装 和 初识

    Windows中 Anaconda,Tensorflow 和 Pycharm的安装和配置   https://blog.csdn.net/zhuiqiuzhuoyue583/article/detai ...

  6. 【ABAP系列】SAP ABAP OOALV 动态设置单元格可否编辑

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[ABAP系列]SAP ABAP OOALV 动 ...

  7. 【神经网络与深度学习】【Qt开发】【VS开发】从caffe-windows-visual studio2013到Qt5.7使用caffemodel进行分类的移植过程

    [神经网络与深度学习][CUDA开发][VS开发]Caffe+VS2013+CUDA7.5+cuDNN配置成功后的第一次训练过程记录<二> 标签:[神经网络与深度学习] [CUDA开发] ...

  8. Win10成功安装IIS后浏览器打开localhost正确显示的页面

  9. Qt - 基于HTTP的网络编程

    HTTP(超文本传输协议 Hyper Text Transfer Protocol) 基于TCP/IP通信协议,属于应用层协议. 使用情况: HTTP是无连接(无连接的含义是限制每次连接只处理一个请求 ...

  10. Maven - Maven3实战学习笔记(3)使用maven构建Web应用

    1.jetty-maven-plugin自动化测试Web应用工具 <plugin> <groupId>org.mortbay.jetty</groupId> < ...