构建 Bootstrap-sass 页面设计

在前面的课程里面，我们其实已经构建了一个文章功能，下面我们基于文章的功能完成一些页面的设计，从而起到一些页面美化的效果，在使用这个Bootstrap-sass 的系统的时候，本质上来说是将网页分割为12个栏位，通过栏位的限定完成页面的布局，所以在这章节里面，大家需要完成前端的知识结构的梳理，从而让自己快速的完成页面的设计。

如何更好的完成页面的美化，其实也是一件非常不容易的事情；

我们首先需要在 Gemfile 里面安装 bootstrap-sass 3.3.7系统；

安装gem： https://rubygems.org/

安装：bootstrap-sass 3.3.7 https://rubygems.org/gems/bootstrap-sass

我们进入这个页面之后，可以在我们的页面的首页完成代码使用的方法安装，从而更好的理解其中的框架，所以大家在完成自我学习的时候，也需要向这样思考，只有回归到本源的思考，才可以快速的帮助自己理解所有的知识体系，不然难以帮助自己理解知识的结构；

首先需要将 app/assets/stylesheets/application.css: 修改为 app/assets/stylesheets/application.scss: 然后在 Import Bootstrap styles in app/assets/stylesheets/application.scss: 添加 @import "bootstrap-sprockets"; @import "bootstrap";

然后安装这个gem

bundle install

将//= require bootstrap-sprockets 添加到 Require Bootstrap Javascripts in app/assets/javascripts/application.js:

//= require turbolinks
//= require bootstrap-sprockets
//= require_tree .

这个时候，我们的页面基本上就完成了页面的基本的美化，我们可以添加一段美化的代码在app/assets/stylesheets/application.scss，

body {
  background: #a71b3e;
  color: white;
  font: 14px/1.5 Helvetica, Arial, sans-serif;
  margin: 20px auto;
  width: 500px;
}
a {
  color: #efaaca;
  text-decoration: none;
}
`

重新打开页面，就会发生不一样的变化；

代码文章参考： https://medium.com/@riklomas/how-to-create-a-simple-jobs-board-in-ruby-on-rails-even-if-youve-never-coded-before-9b296c4df483

rails s

查看预览器的界面

http://localhost:3000/

推荐一篇文章： 如何使用Ruby on Rails开发社交网络 https://medium.com/rails-ember-beyond/how-to-build-a-social-network-using-rails-eb31da569233

使用Ruby on Rails开发社交网络平台的教程。 http://socifyapp.herokuapp.com/ https://github.com/shenzhoudance/socify

恭喜你，又完成一步进阶；

肖威 2018.02.13