安裝 Bootstrap
Step 1. 掛上 bootstrap-sass 這個(gè) gem
Gemfile
gem 'bootstrap-sass'
執(zhí)行 bundle install
(注意：修改完 Gemfile 都要執(zhí)行 bundle install）
Step 2. 將 Bootstrap 的 CSS 套件裝進(jìn)專案里面
在終端輸入 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 進(jìn) git 里面
git add .
git commit -m "add bootstrap to project"
Step 4.建立 navbar(導(dǎo)航欄) 與 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
<!DOCTYPE html>
<html>
<head>
<title>Rails04</title>
<%= csrf_meta_tags %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>
<body>
<div class="container">
+ <%= render "common/navbar" %> #插入 nabber 文件
<%= yield %>
</div>
+ <%= render "common/footer" %> #插入 footer 文件
</body>
</html>
參考資料:
Step 6.設(shè)置 nabber
app/views/common/_navbar.html.erb
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/">圖書</a>
<!-- href="#"是點(diǎn)擊按鈕跳轉(zhuǎn)路徑，將符號"#"更好為相對網(wǎng)址路徑，例如"/"表示首頁路徑 -->
</div>
<div id="navbar" class="navbar-collapse collapse navbar-right">
<ul class="nav navbar-nav ">
<li><a href="#">賬號</a></li>
<li><a href="#">登錄</a></li>
</ul>
</div>
</div>
</nav>
參考資料:
