创建项目

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. PP相关号码范围IMG设定

    一.定义订单号码范围——CO82 IMG> 生產> 現埸控制 > 主檔資料 > 訂單 > 定義訂單號碼範圍 可看到目前工單所訂義的區間(注意, 工單的號碼區間和CO的內部 ...

  2. 如何实现在Eclipse导入Apache Commons

    Apache Commons https://en.wikipedia.org/wiki/Apache_Commons 右键项目->Properties->Java Build Path- ...

  3. 依赖注入——angular

    在Angular中创建一个对象时,需要依赖另一个对象,这是代码层的一种依赖关系,当这种依赖被声明后,Angular通过injector注入器将所依赖的对象进行注入操作. 一.依赖注入的原理 看下面的示 ...

  4. Win32 编程 基础

    Win32    程序开发的流程 message based, event driven Win32程序是message based, event driven.也就是说Win32程序的运行是依靠外部 ...

  5. QA Issue: PN: startUp is upper case, this can result in unexpected behavior. [uppercase-pn]

    (借用一下) 该错误直接导致生成开机启动程序无法启动,既无法生成S99***快捷链接. 解决方法:仅仅将recpie lib-Test改成lib-test就可以了,即不要有大写字母. 附启动方法: S ...

  6. [转帖][Linux]systemd和sysV

    [Linux]systemd和sysV   转自:https://www.cnblogs.com/EasonJim/p/7168216.html 在Debian8中systemd和sysVinit同时 ...

  7. Spring Security框架进阶、自定义登录

      1.Spring Security框架进阶 1.1 Spring Security简介 Spring Security是一个能够为基于Spring的企业应用系统提供声明式的安全访问控制解决方案的安 ...

  8. Anaconda配置环境变量+创建虚拟环境+pycharm使用虚拟环境

    Anaconda配置环境变量+创建虚拟环境 配置环境变量 没有添加系统变量,所有系统根本识别不了conda命令,找不到位置,所以添加以下系统变量: 添加对应Anaconda环境变量:(以自己的安装路径 ...

  9. 初步学习jquery学习笔记(一)

    什么是jquery? Jquery是javascript的一个函数库包含以下功能: html元素选取 html元素的操作 css操作 html事件的函数 javacript的特效 html的遍历和修改 ...

  10. dhcp协议简介

    协议分析 - DHCP协议解码详解 DHCP协议简介 DHCP,全称是 Dynamic Host Configuration Protocol﹐中文名为动态主机配置协议,它的前身是 BOOTP,它工作 ...