Rails ＋ Bootstrap个人博客搭建的完整过程（1）
- 前端
- Stella981
- 0
Part 1
－首先最基本的，创建一个新的的project：
rails new blog
－然后修改source为https://ruby.taobao.com，加入bootstrap的gem到Gemfile：
gem 'twitter-bootstrap-rails'
执行bundle install没有错误，但是有一个提示：
Important: You may need to add a javascript runtime to your Gemfile in order for bootstrap's LESS files to compile to CSS.
**********************************************
ExecJS supports these runtimes:
therubyracer - Google V8 embedded within Ruby
therubyrhino - Mozilla Rhino embedded within JRuby
Node.js
Apple JavaScriptCore - Included with Mac OS X
Microsoft Windows Script Host (JScript)
**********************************************
看提示是缺少了一个js的runtime，Ok，按照提示我安装了ExecJS
gem install execjs
然后在Gemfile里面添加了ExecJS支持的runtime：
gem 'therubyracer'
再次bundle install，没有问题，访问localhost:3000，可以正常访问！
Part 2
－创建首页
rails generate controller blogs
在controller目录下的blogs子目录里面的blogscontroller.rb添加index方法
def index
end
然后在views目录下面创建index.html.erb文件，加入一行html的代码
<h1>Hola,Rails!</h1>
最后就是更改routes.rb文件，添加
root to: 'blogs#index'
再次刷新localhost:3000即可看到新的首页了！
Part 3
接下来就是利用bootstrap开始修饰页面吧！修改view子目录下面的application.html.erb文件，首先修改整站的标题为“Blues的博客”
<head>
<title>Blues的博客</title>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
</head>
然后设置好导航条
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Blog</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">文章列表</a></li>
<li><a href="#about">关于博主</a></li>
</ul>
</div>
</div>
</nav>
最后把每个页面的内容发在bootstrap的container内部
<div class="container">
<%= yield %>
</div>
这时会发现导航条总是会盖住你的页面的内容，这表明导航条会对之后所有的页面产生影响，那么该怎么办呢？只需在全局的css文件中设置好body里面的内容与顶部的间距即可。导航条的高度默认是50px，那么我们的间距可以设为60px
body {
padding-top: 60px; 60px to make the container go all the way to the bottom of the topbar
}
到此，我们的基本页面就算有个样子了。
免责申明：本站发布的内容（图片、视频和文字）以转载和分享为主，文章观点不代表本站立场，如涉及侵权请联系站长邮箱：xbc-online@qq.com进行反馈，一经查实，将立刻删除涉嫌侵权内容。
