在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开发中经常使用不同的 ...
随机推荐
- python的一些方法
1.如何循环获得下标,使用 enumerate ints = ['a','b','c','d','e','f'] for idx, val in enumerate(ints): print idx, ...
- SVM之KKT条件理解
在SVM中,我们的超平面参数最终只与间隔边界上的向量(样本)有关,故称为支持向量机. 求解最优超平面,即求最大化间隔,或最小化间隔的倒数:||w||2/2,约束条件为yi(wTxi+b)>=1 ...
- 【VS开发】VC实现程序重启的做法
转载地址:http://blog.csdn.net/clever101/article/details/9327597 很多时候系统有很多配置项,修改了配置项之后能有一个按钮实现系统重启.所谓重启就是 ...
- hbase部署
Hbase: 更细的操作和原理研究笔记和视频 cloudera Hbase:https://sysit.cn/blog/post/sysit/cloudera%E5%AE%89%E8%A3%85HBA ...
- String,StringBuffer,StringBulider 三者的区别
1.String 是字符串常量,StringBuffer 和StringBuilder 是字符串变量. 2.运行速度 StringBuilder > StringBuffer > Stri ...
- [转帖]Linux下inotify监控文件夹状态,发生变化后触发rsync同步
Linux下inotify监控文件夹状态,发生变化后触发rsync同步 https://www.cnblogs.com/fjping0606/p/6114123.html 1.安装工具--inotif ...
- python-day18(正式学习)
目录 numpy模块 numpy简介 为什么要用numpy 创建numpy数组 numpy数组的基本属性 获取numpy数组的行列数 切割numpy数组 numpy数组元素替换 numpy数组的合并 ...
- 在vue中使用async/await遇到的坑
最近无聊在搞一些新的东西,今天就遇到一个async/await的坑: 因为我用的不是vue官方的脚手架,所以遇到这样的问题: await is a reserved word 这样的警告,我猜应该是缺 ...
- php文件上传错误信息说明对照表
php文件上传错误信息说明对照表: UPLOAD_ERR_OK:其值为0,没有错误发生,文件上传成功UPLOAD_ERR_INI_SIZE:其值为1,上传的文件超过了php.ini中upload_ma ...
- React Native 底部导航栏
首先安装:npm install react-native-tab-navigator 然后再引入文件中 import TabNavigator from 'react-native-tab ...