【魔改经验分享一】去bootsnipp挑双水晶鞋，让你的网站瞬间

2017-01-19 本文已影响153人竹三七

前言

上周的线下聚会，毛尧吉同学分享了使用bootsnipp上模板的心得。回家打开bootsnip，瞬间就被吸引。
比起自己手动设置的界面，这些模板真心美。特别是看到"Bootstrap Slide Carousel Touch Slider with Text Animation" ，三个页面动态滑动，文字动画飞入的角度堪称完美。Wow, 太酷太拉风，如MCQUEEN羊绒大衣一样有型。
动态的网页要使用javascript，我之前自学了javascript（请看《元学习课心得和实践（一） —— 八小时搞定《JavaScript DOM》》），这次正好，用！

模板怎么用？

"Bootstrap Slide Carousel Touch Slider with Text Animation" 由三部分组成：HTML、CSS、JS。

爱莉莎的雪月花1.png

点击这三个Button，可以依次看到代码。

复制代码

HTML：把HTML 的内容copy到 app/views/welcome/index.html.erb，替换掉下面的代码

爱莉莎的雪月花1_1.png

CSS: 把CSS 里的内容 copy 到 app/assets/stylesheets/welcome.scss。

Javascript: 新建app/assets/welcome.js, 然后复制js 里面的代码。

刷新网页，排版和示例一模一样。但是，无法滑动切换页面。

怎么让页面动起来？

方法二选一：
方法一:在app/assets/javascripts下面添加 bootstrap.min.js 和 jquery.js, 然后在app/views/welcome/index.html.erb 里面加入javascript语句：

<script>
$('#bootstrap-touch-slider').bsTouchSlider();
</script>

方法二: 在app/assets/javascripts/application.js里，添加：

//= require bootstrap-sprockets

因为，我们之前已经用gem下载了bootstrap-sass, 它的
bootstrap-sprockets，包含了琳琅满目的Javascript文件，如下：

//= require ./bootstrap/transition
//= require ./bootstrap/alert
//= require ./bootstrap/button
//= require ./bootstrap/carousel
//= require ./bootstrap/collapse
//= require ./bootstrap/dropdown
//= require ./bootstrap/modal
//= require ./bootstrap/tab
//= require ./bootstrap/affix
//= require ./bootstrap/scrollspy
//= require ./bootstrap/tooltip
//= require ./bootstrap/popover

现在app/assets/javascripts/application.js代码如下：

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap/alert
//= require bootstrap-sprockets
//= require bootstrap/dropdown
//= require_tree .

后来发现，如果启用bootstrap-sprockets，连welcome.js也不用加了，真方便。如果有误，请大家指正**。