over 4 years ago

http://getbootstrap.com/

Bootstrap 是目前網站開發裡最好用的前端 CSS 套件
在 Rails 可以使用 ruby 函式庫 (gem) 來把 Bootstrap 裝進我們的專案裡面


安裝 gem 'bootstrap-sass'

gemfile
source 'https://rubygems.org'

+ gem 'bootstrap-sass'
...
...

bundle install
安裝 gem


將 Bootstrap 的 CSS 套件裝進專案裡面

app/assets/stylesheets/application.css
/*
 * ...(一堆註解)
 *= require_tree .
 *= require_self
 */

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

把 application.css 改成 application.scss

記得重開 rails s


使用前

使用後

似乎改變不大?
那是因為我們還沒套入 Bootstrap 到 html 裡面去


幫你的專案裝上 Navbar 跟 Footbar

到 app/views 增加一個資料夾 : common

增加二個檔案

app/views/common/_navbar.html.erb
<nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <a class="navbar-brand" href="/">Rails 101</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav navbar-right">
        <li> <%= link_to("登入", '#') %> </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
app/views/common/_footer.html.erb
<footer class="container" style="margin-top: 100px;">
  <p class="text-center">Copyright ©2014 Rails101s
    <br>Design by <a href="http://sdlong.logdown.com" target=_new>sdlong</a>
  </p>
</footer>

放入 Bootstrap 的 js 套件

app/assets/javascripts/application.js
... (一堆註解)
//= require jquery
//= require jquery_ujs
//= require turbolinks
+//= require bootstrap/dropdown
+//= require bootstrap/alert
//= require_tree .

修改你的 app/views/layout/application.html.erb

app/views/layouts/application.html.erb
...
...
<body>

<div class="container-fluid">
+ <%= render "common/navbar" %>
  <%= yield %>
</div>
+ <%= render "common/footer" %>
  
</body>
</html>

before

after


代入 bootstrap 的 table 套件

app/views/topics/index.html.erb
<h1 >Listing topics</h1>

-<table>
+<table class="table">
  <thead>
...
...

before

after


更多套件請參考 http://getbootstrap.com/

← 1 - 0. Hello World!! --快速體驗 Rails 1 - 2. 進入真正的主題前的須知 →
 
comments powered by Disqus