第七课:构建 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,

```

top Created with Sketch.