安装 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
<!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.设置 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="#"是点击按钮跳转路径，将符号"#"更好为相对网址路径，例如"/"表示首页路径 -->
</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>
参考资料:
网友评论