Previous Lecture Complete and continue  

  套用 Bootstrap 的 html 样式

目标

  • 上一节只是“挂上”Bootstrap 使用的 CSS
  • 这一节则是让全站的 HTML 架构,套用 Bootstrap 的制服

步骤

Step 1. 新增 app/views/common 资料夹

mkdir app/views/common

Step 2. 新增 navbar

touch app/views/common/_navbar.html.erb

填入

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>
	

Step 3. 新增 footer

touch app/views/common/_footer.html.erb

填入

app/views/common/_footer.html.erb
<footer class="container" style="margin-top: 100px;">
    <p class="text-center">Copyright ©2016 Rails101
        <br>Design by
        <a href="http://courses.growthschool.com/courses/rails-101/" target=_new>xdite</a>
    </p>
</footer>
	

Step 4. 修改全域 HTML 样式 application.html.erb

app/views/layouts/application.html.erb
<!DOCTYPE html>
<html>
    <head>
        <title>Rails101</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-fluid">
            <%= render "common/navbar" %>
            <%= yield %>
        </div>
        <%= render "common/footer" %>
    </body>
</html>
	

Step 5. 产生一个新的空 Hello World 页面 (放在 weclome#index)

  • 新增一个 welcome controller

rails g controller welcome

  • 新增一个空的 HelloWorld 页面

touch app/views/welcome/index.html.erb

填入

app/views/welcome/index.html.erb
<h1> Hello World! </h1>
	

Step 6. 将首页指到 welcome 下的 index.html.erb 页面

修改 config/routes.rb,改成以下内容

config/routes.rb
Rails.application.routes.draw do
  root 'welcome#index'
end
	

Step 7. git 进度存档

git add .
git commit -m "add bootstrap html"

Step 8. 重开 Rails Server

rails s

最后完成画面:

解说

Bootstrap 的 template 要去哪里下载?

为什么我们要修改 app/views/layouts/application.html.erb

application.html.erb 是全站的“衣服”,你可以这样理解。

<%= yield %> 是什么?

是你的程式码输出印出来的地方。比如说当你在 app/views/welcome/index.html.erb 里面写 Hello World,就会显示出来。

config/routes.rb 是干嘛的?

你可以想像成它是全站的“交通警察”,它负责决定使用者的请求“导”到哪边。所有的网址生成都归它指挥。