刘华佼的全栈学习记录

如何从0到1套用bootstrap的html样式

| Comments

成品效果图:

这里的0是指已经有可以跑起来的网页,但html样式没有装修。
1是指经过bootstrap装修过了的。

思路如下:

先安装bootstrap-sass套件,再把套件装进项目里,然后新增公共前端文件夹,放置导航条(navbar)和页脚(footer)文件,接着刷新页面即可。

bootstrap导航条文件的参考文档在:http://getbootstrap.com/components/#navbar-default

具体步骤:

第一步

在Gemfile里的group :deveplop, :test do上面添加一行:
gem ‘bootstrap-sass‘

然后在terminal里bundle install

第二步

把app/assets/stylesheets/application.css
修改为
app/assets/stylesheets/application.scss,
就是后缀名改一下。

第三步

然后在该文件中加入两行:
@import “bootstap-sprockets“;
@import “bootstrap“;

以后假如要用到图标功能的话,还要在该文件中加入:

*= require font-awesome
@import “font-awesome”

现在并不需要这样做,只是在这里提一下。

第四步

新增前端文件夹common,然后在里面新增文件_navbar.html.erb,_footer.html.erb
参考bootstrap的文档,写html代码。

修改前端文件夹layout下的application.html.erb文件,增加引用_navbar.html.erb,_footer.html.erb两个文件的代码。如

    <div class="container-fluid">
        <%= render "common/navbar" %>
        <%= yield %>
    </div>

    <%= render "common/footer" %>

第五步

刷新页面即可。

总结

具体操作总结如下:

  • gem ‘bootstrap-sass‘
  • 在terminal里bundle install
  • application.css改后缀为scss,文件中导入bootstap-sprockets和bootstap
  • 新增导航和页脚文件,放在公共文件夹中
  • 修改全域html文件,引用导航条和页脚文件。

Comments

comments powered by Disqus