创建项目

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. python的一些方法

    1.如何循环获得下标,使用 enumerate ints = ['a','b','c','d','e','f'] for idx, val in enumerate(ints): print idx, ...

  2. SVM之KKT条件理解

    在SVM中,我们的超平面参数最终只与间隔边界上的向量(样本)有关,故称为支持向量机. 求解最优超平面,即求最大化间隔,或最小化间隔的倒数:||w||2/2,约束条件为yi(wTxi+b)>=1 ...

  3. 【VS开发】VC实现程序重启的做法

    转载地址:http://blog.csdn.net/clever101/article/details/9327597 很多时候系统有很多配置项,修改了配置项之后能有一个按钮实现系统重启.所谓重启就是 ...

  4. hbase部署

    Hbase: 更细的操作和原理研究笔记和视频 cloudera Hbase:https://sysit.cn/blog/post/sysit/cloudera%E5%AE%89%E8%A3%85HBA ...

  5. String,StringBuffer,StringBulider 三者的区别

    1.String 是字符串常量,StringBuffer 和StringBuilder 是字符串变量. 2.运行速度 StringBuilder > StringBuffer > Stri ...

  6. [转帖]Linux下inotify监控文件夹状态,发生变化后触发rsync同步

    Linux下inotify监控文件夹状态,发生变化后触发rsync同步 https://www.cnblogs.com/fjping0606/p/6114123.html 1.安装工具--inotif ...

  7. python-day18(正式学习)

    目录 numpy模块 numpy简介 为什么要用numpy 创建numpy数组 numpy数组的基本属性 获取numpy数组的行列数 切割numpy数组 numpy数组元素替换 numpy数组的合并 ...

  8. 在vue中使用async/await遇到的坑

    最近无聊在搞一些新的东西,今天就遇到一个async/await的坑: 因为我用的不是vue官方的脚手架,所以遇到这样的问题: await is a reserved word 这样的警告,我猜应该是缺 ...

  9. php文件上传错误信息说明对照表

    php文件上传错误信息说明对照表: UPLOAD_ERR_OK:其值为0,没有错误发生,文件上传成功UPLOAD_ERR_INI_SIZE:其值为1,上传的文件超过了php.ini中upload_ma ...

  10. React Native 底部导航栏

    首先安装:npm install react-native-tab-navigator   然后再引入文件中    import TabNavigator from 'react-native-tab ...