Rails 建立 navbar(导航栏) 与 footer(页脚)

安装 Bootstrap

Step 1. 挂上 bootstrap-sass 这个 gem

Gemfile

gem 'bootstrap-sass'

执行 bundle install
(注意：修改完 Gemfile 都要执行 bundle install）

Step 2. 将 Bootstrap 的 CSS 套件装进专案里面

在终端输入 mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss

然后修改 app/assets/stylesheets/application.scss 档案，在最后加入以下两行

/*
 * ...(一堆注解)
 *= require_tree .
 *= require_self
 */

+ @import "bootstrap-sprockets";
+ @import "bootstrap";

Step 3. 将变更 commit 进 git 里面

git add .
git commit -m "add bootstrap to project"

Step 4.建立 navbar(导航栏) 与 footer(页脚) 文件

$ mkdir app/views/common   #建立公共文件夹 common
$ touch app/views/common/_navbar.html.erb    #建立 nabber 文件
$ touch app/views/common/_footer.html.erb    #建立 footer 文件

Step 5.布局文件 app/views/layouts/application.html.erb

  
    
    <%= csrf_meta_tags %>

    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
  

  
    

+     <%= render "common/navbar" %>    #插入 nabber 文件
      <%= yield %>
    
+     <%= render "common/footer" %>    #插入 footer 文件
  

参考资料:

• Rails 使用局部视图
• Rails 中 render 的使用方法

Step 6.设置 nabber

app/views/common/_navbar.html.erb

  

    

      图书
      
    
    

      

        
账号
     
        
登录
      
    
  

参考资料:

• Bootstrap导航栏
• Bootstrap 教程