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 }到此,我们的基本页面就算有个样子了。