目录 [隐藏] 
1自适应页面
2CSS实现三角形
3服务
4Modernizr
4.1什么是Modernizr？
4.2什么是特征检测？
5一键转发工具 Share.js
6Owl Carousel 2
7meanmenu:
8jQuery.mmenu
8.1去掉/修改默认的‘Menu’
9webpacker & bootstrap
10animate.css 一款强大的预设css3动画库
11Moment.js
12WOW.js css的动画
13jquery lazyload
14jQuery Nivo Slide
15jQuery FlexSlider更新比较及时
16javascript 3D
17slick-carousel
18倒计时插件jquery.countdown
19Waypoints是一个库，可以在滚动到元素时轻松执行函数
20jquery.countup.js
21scrollup 底部返回到顶部
22font-family
23jquery CDN
24font-awesome 升级到5.7
25bootstrap-slider.js
26axios http客户端
27ES6 promise 构造函数
28ruby 数组取随机数 Array#sample

==自适应页面==
# 让用户在桌面和移动设备上垂直滚动网站，而不是水平！
# 不要使用大的固定宽度元素，，会导致水平滚动。
# 不要让内容依赖于宽度来渲染。
# 使用css media查询为小屏幕和大屏幕应用不同的样式。考虑设置相对的宽度值。

==CSS实现三角形==
https://www.cnblogs.com/keepfool/p/5616326.html

== 服务 ==
[[第三方API地址]]

前端模板： http://www.cssmoban.com/

'''vultr服务器：''' https://www.vultr.com/pricing/

ubuntu出现：too many open files 的问题，需要ulimit -a查看open file最大值，然后同修改配置文件永久修改，在修改内存的。就ok了。

代理免费账号：https://gitlab.com/Alvin9999/free/wikis/ss%E5%85%8D%E8%B4%B9%E8%B4%A6%E5%8F%B7

http-equiv="x-ua-compatible" content="ie=edge"  : X-UA-Compatible是针对IE8新加的一个设置，对于IE8之外的浏览器是不识别的，
----
==Modernizr==
class='no-js‘ :no-js 是配合 Modernizr 一起使用的类名（class）。

=== 什么是Modernizr？ ===

Modernizr是一小段JavaScript代码，可自动检测用户浏览器中下一代Web技术的可用性。Modernizr 不是基于“ UA嗅探” 将整个浏览器列入黑名单，而是使用功能检测，使您可以根据浏览器的实际功能轻松定制用户体验。

利用Modernizr为您提供的这些知识，您可以在浏览器中利用这些新功能来呈现或利用它们，并且仍然可以通过简单可靠的方式来控制不能使用的浏览器。


===什么是特征检测？===
在网络开发的黑暗时代，我们经常不得不求助于UA嗅探，以确定他们的用户是否能够使用Awesome-New-Feature ™。在实践中，这意味着做类似以下的事情


----

== 一键转发工具 Share.js ==
 一键分享到微博、QQ空间、QQ好友、微信、腾讯微博、豆瓣、Facebook、Twitter、Linkedin、Google+、点点等
 https://www.oschina.net/p/share-js
 https://github.com/overtrue/share.js

== Owl Carousel 2 ==
：触控启用的jQuery插件，可让您创建一个漂亮的响应式旋转木马滑块。 http://owlcarousel2.github.io/OwlCarousel2/

yarn add owl.carousel jquery


yarn url: https://yarnpkg.com/zh-Hant/package/owl.carousel

== meanmenu: ==
 A responsive menu plugin

https://jquery-plugins.net/meanmenu-jquery-responsive-menu-plugin

https://github.com/meanthemes/meanMenu

==jQuery.mmenu==
The best javascript plugin for app look-alike on- and off-canvas menus with sliding submenus for your website and webapp. https://yarnpkg.com/zh-Hant/package/jquery.mmenu

http://mmenu.frebsite.nl/

https://github.com/FrDH/jQuery.mmenu

<pre>yarn add jquery.mmenu



</pre>

https://mmenujs.com/documentation/wrappers/bootstrap.html

https://mmenujs.com/demo/index.html?demo=bootstrap-navbar


===去掉/修改默认的‘Menu’===
https://mmenujs.com/documentation/core/options.html

去掉：
navbars[
{},
{add:!0}
]

修改：带参数
<pre>
navbar: { add:!0, title: '导航', titleLink: 'parent'}
</pre>

<pre>
navbar
{
add true Boolean Whether or not to add a navbar above the panels.
title null 1 String 2 The title above the panels.
For the main panel it defaults to "Menu", for subpanels it defaults to the text in its parent menu item.
titleLink "parent" String The type of link to set for the title.
Possible values: "parent", "anchor" or "none".
}

</pre>

==webpacker & bootstrap==
https://getbootstrap.com/docs/4.0/getting-started/webpack/

== animate.css 一款强大的预设css3动画库 ==
 A cross-browser library of CSS animations. As easy to use as an easy thing. http://daneden.github.io/animate.css

animate.css 包含了一组炫酷、有趣、跨浏览器的动画，可以在你的项目中直接使用。

https://github.com/daneden/animate.css

使用起来比较简单，感觉非常棒。
 <pre><h1 class="animated infinite bounce delay-2s">Example</h1></pre>


animate.css  CDN:  https://www.bootcdn.cn/animate.css/


== Moment.js ==
JavaScript 日期处理类库


== WOW.js css的动画 ==
: Reveal(展示） CSS animation as you scroll down a page，https://www.delac.io/wow/

https://github.com/matthieua/WOW

向下滚动页面时显示CSS动画。默认情况下，您可以使用它来触发'''animate.css'''动画。但您可以轻松地将设置更改为您喜欢的动画库。

好处：

比其他JavaScript视差插件更小，比如Scrollorama（它们做的很棒，但对于简单的需求可能太重了）
安装超级简单，并且与animate.css一起使用，因此如果您已经使用它，那么设置起来会非常快
快速执行和轻量级代码：浏览器会喜欢它;-)

==jquery lazyload==
注意1.9.7版本和2.0+版本的差别
https://github.com/tuupola/jquery_lazyload/tree/1.9.7

== jQuery Nivo Slide ==
  cdn： https://www.bootcdn.cn/jquery-nivoslider/

  Jquery的图片切换插件
  https://github.com/Codeinwp/Nivo-Slider-jQuery
  https://docs.themeisle.com/article/485-getting-started-with-the-nivo-slider-jquery-plugin
  https://www.cnblogs.com/jackzzx/p/4599108.html

<pre>
effect 图片切换效果。默认：random；

提供了11种效果：'sliceDownRight','sliceDownLeft','sliceUpRight','sliceUpLeft', 'sliceUpDown','sliceUpDownLeft', 'fold','fade','slideInRight','slideInLeft'，诸如渐入渐出，滑动，百叶窗等等都有。
<script type="text/javascript"> 
$(window).on('load', function() {
    $('#slider').nivoSlider(); 
}); 
</script>

</pre>

== jQuery FlexSlider更新比较及时==

yarn add flexslider


== javascript 3D==
https://threejs.org/

http://oatthegoat.co.nz/

==slick-carousel==
https://github.com/kenwheeler/slick

http://kenwheeler.github.io/slick/

== 倒计时插件jquery.countdown ==
 This plugin sets a div or span to show a countdown to a given time
 http://plugins.jquery.com/kbw.countdown/
 https://github.com/kbwood/countdown
 如何使用：http://keith-wood.name/countdown.html

== Waypoints是一个库，可以在滚动到元素时轻松执行函数 ==
 is a library that makes it easy to execute a function whenever you scroll to an element.滚动到元素那执行function。
  https://github.com/imakewebthings/waypoints

== jquery.countup.js ==
是一款轻量级jquery数字动画插件。该数字动画插件可以在页面滚动时，将指定的数字从0开始计数增加动画。

==scrollup 底部返回到顶部==

Url: http://markgoodyear.com/labs/scrollup/


==font-family==
Bootstrap字体的设置，   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";


== jquery CDN ==

https://cdnjs.com/libraries/jquery/


== font-awesome 升级到5.7 ==
https://fontawesome.com

升级说明：https://fontawesome.com/how-to-use/on-the-web/setup/upgrading-from-version-4
<pre>
yarn add @fortawesome/fontawesome-free

import "@fortawesome/fontawesome-free/js/all";

<i class="fa fa-camera-retro"></i>  <!-- version 4's syntax -->

<i class="fas fa-camera-retro"></i> <!-- version 5's syntax -->
<i class="far fa-camera-retro"></i> <!-- example: regular style of camera-retro -->
<i class="fal fa-camera-retro"></i> <!-- example: light style of camera-retro -->
</pre>

==bootstrap-slider.js==
Slider for Bootstrap bootstrap-slider.js

https://seiyria.com/bootstrap-slider/


==axios http客户端==
基于promise用于浏览器和node.js的http客户端

==ES6 promise 构造函数==
ES6 Promise 用法讲解

Promise是一个构造函数，自己身上有all、reject、resolve这几个眼熟的方法，原型上有then、catch等同样很眼熟的方法。

==ruby 数组取随机数 Array#sample==
Just use Array#sample:

[:foo, :bar].sample # => :foo, or :bar :-)

(1..5).to_a.sample

It is available in Ruby 1.9.1+. To be also able to use it with an earlier version of Ruby, you could require "backports/1.9.1/array/sample".

Note that in Ruby 1.8.7 it exists under the unfortunate name choice; it was renamed in later version so you shouldn't use that.

Although not useful in this case, sample accepts a number argument in case you want a number of distinct samples.