Bootstrap on ROR

最新推荐文章于 2020-06-12 09:24:10 发布

炮姐的呱太

最新推荐文章于 2020-06-12 09:24:10 发布

阅读量596

点赞数

分类专栏： Ruby On Rails 文章标签： bootstrap rails

本文链接：https://blog.csdn.net/Richar1/article/details/50607189

版权

Ruby On Rails 专栏收录该内容

39 篇文章 1 订阅

订阅专栏

1.新建一个rails项目：

rails new bootstrap_test

2.在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
  end

11.开启rails server 并访问 http://localhost:3000/home
此处的界面用的是bootstrap官网上给出的示例
这里写图片描述

炮姐的呱太

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Bootstrap on ROR

1.新建一个rails项目：rails new bootstrap_test2.在Gemfile中添加：gem 'bootstrap-sass', '~> 3.2.0'gem 'twitter-bootstrap-rails'3.bundle install4.在/app/assets/stylesheets下新建一个base.css.scss文件@import "bootstrap-sprock
复制链接

扫一扫