如何安装Bootstrap
Posted 驴妹ing
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何安装Bootstrap相关的知识，希望对你有一定的参考价值。
1. Create Gemfile
gem 'bootstrap-sass'
bundle install
mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss
Edit app/assets/stylesheets/application.scss
+ @import "bootstrap-sprockets";
+ @import "bootstrap";2. 添加样式
Edit app/views/layouts/application.html.erb
<body>
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a href="/" class="navbar-brand">JobListing</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li><%= link_to("登入", '#')%></li>
</ul>
</div>
</div>
</nav>
<%= yield %>
<footer class="container" style="margin-top: 100px;">
<p class="text-center">LBJ
<br>Design by XD
</p>
</footer>
</body>3. Create common
mkdir app/views/common
touch app/views/common/_navbar.html.erb
Edit app/views/common/_navbar.html.erb
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="/">JobListing</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><%= link_to("登入", '#') %></li>
</ul>
</div>
</div>
</nav>touch app/views/common/_footer.html.erb
Edit footer
<footer class="container" style="margin-top: 100px;">
<p class="text-center">XXX
<br>Design by XXX
</p>
</footer>Edit app/views/layouts/application.html.erb
<body>
<div class="container-fluid">
<%= render "common/navbar" %>
<%= yield %>
</div>
<%= render "common/footer" %>
</body>4. 保存（Save）
git add .
git commit -m "add bootstrap html"
转载声明：本文转载自「驴妹ing」，搜索「驴妹ing」即可关注。
以上是关于如何安装Bootstrap的主要内容，如果未能解决你的问题，请参考以下文章