眼看着前端攻城师们都开始使用Bootstrap创作网页,于是也想学着在最近正在学习的Rails中使用Bootstrap。

具体安装使用过程如下:

1、创建Rails工程

rails new usedschool

 

2、生成脚手架

rails g scaffold Item title:string description:text --skip-stylesheets

3、应用迁移

rake db:migrate

4、修改Gemfile文件,加入要安装的bootstrap相关包

5、安装相关包

bundle install

在这里我遇到了一个Ruby版本限制的问题,将Ruby升级之后才顺利安装好了bootstrap相关包。

具体升级操作请查看这里:Ruby升级

6、运行rails g bootstrap:install生成bootstrap相关文件

到目前为止,bootstrap已经成功安装,下面来看下使用方法

7、修改application.html.erb布局文件

这一步修改模版,毕竟对bootstrap具体用法还不熟悉,所以直接拿来主义,找模版过来套用。

套用模版http://www.bootcss.com/examples/fluid.html

<!DOCTYPE html>
<html>
<head>
<title>一起二</title>
<%= stylesheet_link_tag "application", :media => "all" %>
<%= javascript_include_tag "application" %>
<%= csrf_meta_tags %>
</head>
<body> <div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="#">一起二</a>
<div class="nav-collapse collapse">
<p class="navbar-text pull-right">
Logged in as <a href="#" class="navbar-link">Username</a>
</p>
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div> <div class="container-fluid">
<div class="row-fluid">
<div class="span3">
<div class="well sidebar-nav">
<ul class="nav nav-list">
<li class="nav-header">Sidebar</li>
<li class="active"><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="nav-header">Sidebar</li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="nav-header">Sidebar</li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div><!--/.well -->
</div><!--/span-->
<div class="span9">
<%= yield %>
</div><!--/row-->
</div><!--/span-->
</div><!--/row--> <hr> <footer>
<p>© By lissdy 2013</p>
</footer> </div><!--/.fluid-container--> <!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="//cdnjs.bootcss.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//cdnjs.bootcss.com/ajax/libs/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script> </body>
</html>

8、修改Item整体页面风格

rails g bootstrap:themed items -f

运行结果:

肿么样?比Rails直接生成的好看多了吧

【转】Rails中Bootstrap的安装和使用的更多相关文章

  1. 在Rails中最方便集成使用Bootstrap的方式

    创建项目 rails new BootstrapProject 创建模型 rails g scaffold xxx --skip-stylesheets 运行迁移 rake db:migrate -- ...

  2. rails中使用CarrierWave实现文件上传的功能

    之前在用django写blog的时候头像上传和头像预览都是使用原生的js实现的,之前也有写了一篇blog.好了开始进入正题 rails中实现头像上传十分的方便,只要通过CarrierWave这个gem ...

  3. Linux系统中tomcat的安装及优化

    Linux系统中Tomcat 8 安装 Tomcat 8 安装 官网:http://tomcat.apache.org/ Tomcat 8 官网下载:http://tomcat.apache.org/ ...

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

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

  5. 苹果mac电脑中brew的安装使用及卸载详细教程

    brew 又叫Homebrew,是Mac OSX上的软件包管理工具,能在Mac中方便的安装软件或者卸载软件, 只需要一个命令, 非常方便 brew类似ubuntu系统下的apt-get的功能 安装br ...

  6. mac中使用brew安装软件,下载太慢怎么办?

    mac中使用brew安装软件,下载太慢怎么办? 本文所说的软件是指较大的软件,如果软件较小,例如软件只有几M,那么使用此方法后,提升会非常小. 了解brew原理: 1: 从网络下载安装包 2: 执行一 ...

  7. CentOs中mysql的安装与配置

    在linux中安装数据库首选MySQL,Mysql数据库的第一个版本就是发行在Linux系统上,其他选择还可以有postgreSQL,oracle等 在Linux上安装mysql数据库,我们可以去其官 ...

  8. 腾讯云Linux系统中启动自己安装的tomcat

    腾讯云Linux系统中启动自己安装的tomcat 首先通过工具查看一下安装的tomcat的位置 进入命令行之后输入以下指令: 此时,tomcat已经启动了.

  9. Ubuntu 中软件的安装、卸载以及查看的方法总结

    Ubuntu 中软件的安装.卸载以及查看的方法总结 博客分类: Linux UbuntuDebian配置管理CacheF#  说明:由于图形化界面方法(如Add/Remove... 和Synaptic ...

随机推荐

  1. 深入Spring:自定义注解加载和使用

    前言 在工作中经常使用Spring的相关框架,免不了去看一下Spring的实现方法,了解一下Spring内部的处理逻辑.特别是开发Web应用时,我们会频繁的定义@Controller,@Service ...

  2. java定时任务Quartz Demo(2.X)

    直接上代码 public class HelloQuartz implements Job{ @Override public void execute(JobExecutionContext Jec ...

  3. tensorFlow 神经网络2

    learnrate 太大容易跑飞,设置激活函数 可以一定程度上增加learnrate,不跑飞 self.saver = tf.train.Saver() 和 self.init_variable = ...

  4. QT 布局时使用 addStretch 可伸缩设置

    今天在使用addStretch,布局的时候,发现addStretch竟然是可以平均分配的,有意思.比如: QVBoxLayout *buttonLayout = new QVBoxLayout; bu ...

  5. JNI_Z

    1. ZC: 用到 VC6 ... http://blog.csdn.net/jiangwei0910410003/article/details/17465085 http://blog.csdn. ...

  6. JavaScrip 原生多文件上传及预览 兼容多浏览器

    JavaScrip 原生多文件上传及预览 兼容多浏览器 html代码块 <div class="container"> <label>请选择一个图像文件:& ...

  7. python基础4 - 判断(if)语句

    6. 判断(if)语句 6.1 if 判断语句基本语法 在 Python 中,if 语句 就是用来进行判断的,格式如下: if 要判断的条件: 条件成立时,要做的事情 …… 注意:代码的缩进为一个 t ...

  8. 洛谷P1027 Car的旅行路线

    洛谷P1027 Car的旅行路线 题目描述 又到暑假了,住在城市A的Car想和朋友一起去城市B旅游.她知道每个城市都有四个飞机场,分别位于一个矩形的四个顶点上,同一个城市中两个机场之间有一条笔直的高速 ...

  9. 180. Consecutive Numbers

    问题描述 解决方案 select distinct l1.Num as ConsecutiveNums from Logs l1,Logs l2,Logs l3 where l1.Id+1=l2.Id ...

  10. 分享知识-快乐自己:HashMap 与 HashTable 的区别

    特性: HashMap 与 Hashtable 的分析: 1):HashMap简介 1.底层数组+链表实现,可以存储null键和null值,线程不安全 2.HashMap 不是线程安全的 3.Hash ...