Bootstrap on ROR

来源：互联网发布：mac excel好用吗编辑：程序博客网时间：2024/05/17 08:32

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    endend

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