1.新建一個rails項目：
rails new bootstrap_test2.在Gemfile中添加：
gem 'bootstrap-sass', '~> 3.2.0'
gem 'twitter-bootstrap-rails'3.bundle install
4.在/app/assets/stylesheets下新建一個base.css.scss文件
@import "bootstrap-sprockets";
@import "bootstrap";
body {
padding-top: 50px;
}
.starter-template {
padding: 40px 15px;
text-align: center;
}5.將 /app/assets/stylesheets/application.css 改成application.css.sass
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
* or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the bottom of the
* compiled file so the styles you add here take precedence over styles defined in any styles
* defined in the other CSS/SCSS files in this directory. It is generally better to create a new
* file per style scope.
*
*= require_tree .
*= require_self
*= require base.css.scss #require 進來新建的base樣式文件
*/6.在/app/assets/javascript/application.js文件中加入
//= require jquery
//= require jquery_ujs
//= require bootstrap #引入bootstrap
//= require turbolinks
//= require_tree .7.新建一個home_controller
rails g controller home
---------------------------------------------
class HomeController < ApplicationController
def index
end
end
8.在/app/views/layout/application.html.erb中
<!DOCTYPE html>
<html>
<head>
<title>KvBoot</title>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-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>
</nav>
<div class="container">
<%= yield %>
</div>
</body>
</html>9.在/app/views/home/下新建一個index.html.erb文件
<div class="starter-template">
<h1>Bootstrap starter template</h1>
<p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
</div>10.在routes.rb中添加
Rails.application.routes.draw do
resources :home
end11.開啓rails server 並訪問 http://localhost:3000/home
此處的界面用的是bootstrap官網上給出的示例
