眼看着前端攻城师们都开始使用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. tomcat添加登录用户名密码

    tomcat版本 apache-tomcat-7.0.55.tar.gz 编辑 TOMCAT_HOME/conf/tomcat-users.xml在tomcat-users里面添加 <tomca ...

  2. 【P2629】好消息，坏消息（前缀和+单调队列优化DP）

    一激动一颓就会忘了总结... 前面的大黄题就不总结了. 这个题我只想说一声艹,一开始的思路就是正确的,然后计算的时候有了一个瑕疵,不过很快也就改过来了.然后却一直连样例都过不了.仔仔细细看了老半天,经 ...

  3. HBase-修改表结构

    HBase修改表结构 package com.hbase.HBaseAdmin; import java.io.IOException; import org.apache.hadoop.conf.C ...

  4. DS 和【ADDRESS】学习记录

    CPU要读写一个内存单元的时候,必须先给出这个内存单元的地址. 内存单元由2部分组成. 8086CPU中,内存地址由以下组成. 1:段地址 2:偏移地址 8086CPU中,有一个DS寄存器地址,通常用 ...

  5. ImageSwitch图像切换控件

    ImageSwitch图像切换控件 继承ViewAnimator所以可以做动画 继承ViewGroup所以可以装别的控件,所以ImageSwitch里面装的就是image,不过要找个ImageView ...

  6. 如何在阿里云上部署war包到tomcat服务器

    一. 准备工作:xshell和xftp 首先我们得确保,xshell能够远程连接阿里云ECS,xftp能够保证windows和linux之间的文件传输(当然也可以选择FileZilla,但xftp感觉 ...

  7. 解决Navicat连接mysql报错：1862 - Your password has expired. To log in you must change it using a client that supports expired passwords.

    今天尝试用Navicat连接mysql时,发现一个1862的报错问题: 后来参照这篇文章https://blog.csdn.net/u010513756/article/details/5073501 ...

  8. vue项目接口地址的定义

    对于接口地址域名我们经常会遇到,那么如何去定义呢: 只要在config/dev.env.js中定义变量NODE_ENV就行啦 在.vue文件中的引用方式如下: 嗯,就是这样简单~~~~

  9. 中文译文：Minerva-一种可扩展的高效的深度学习训练平台（Minerva - A Scalable and Highly Efficient Training Platform for Deep Learning）

    Minerva:一个可扩展的高效的深度学习训练平台 zoerywzhou@gmail.com http://www.cnblogs.com/swje/ 作者:Zhouwan  2015-12-1 声明 ...

  10. python3.x学习笔记2018-02-05更新

    前言:python3.x部分学习笔记,有意交流学习者可加wechat:YWNlODAyMzU5MTEzMTQ=.如果笔记内容有错,请指出来. 对数据类型的操作 可变数据类型:列表,集合,字典 列表: ...