Installation: Bootstrap
- Add it to Gemfile
gem 'bootstrap-sass'
-
Execute
bundle install
rails s -
Rename css file: application.css => application.scss, by executing
mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss -
Mount it to file: app/assets/stylesheets/application.scss, by adding
@import "bootstrap-sprockets";
@import "bootstrap";
Application in project
- Generate views for: navbar & footer, by executing
mkdir app/views/common
touch app/views/common/_navbar.html.erb
touch app/views/common/_footer.html.erb - Fill content for file: app/views/common/_navbar.html.erb
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a href="/" class="navbar-brand">JDStore</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><%= link_to("登入", '#') %></li>
<li><%= link_to("注册", '#') %></li>
</ul>
</div>
</nav>
- Fill content for file: app/views/common/_footer.html.erb
<footer class="container" style="margin-top:100px;">
<p class="text-center">Copyright ©2017 JDStore
<br>Design by Sarah Wu
</p>
</footer>
- Modify content in file: app/views/layouts/application.html.erb
...
<body>
+ <div class="container-fluid">
+ <%= render "common/navbar" %>
+ <%= yield %>
+ </div>
+ <%= render "common/footer" %>
</body>
网友评论