實用！最新前端速查表集合（css3 Flexbox/CSS動畫/Bootstrap4）

Sponsor

今天分享的速查表你一定不會陌生，因為都是目前最新最流行的前端速查表（Cheat sheet），包含：Css3 Flexbox、ES6、jQuery 3 以及最新的 Bootstrap 4，前端人員可以將這些當作是備忘表或速記手冊，使用時可以快速查閱，相當便捷。

這些速查表設計達人網小編認為相當有用，如果我學前端時有這些表給我就好了T_T…

下面來看看介紹，必須收藏！

Flexbox Cheatsheet Cheatsheet

這里通過問答對話形式，很好的展示 flexbox 屬性的作用，我們只截了小圖，大圖以及 PDF 版請點擊鏈接查看。

點擊查看

Flexbox 視覺指南

這個特色就是有實時代碼演示，當用戶設置屬性，DEMO 可以實時更新效果，這樣用戶更好更容易地理解 Flexbox 某個屬性的作用。

同時也推薦大家查閱之前的文章「CSS3屬性: Flexbox 快速上手記」

點擊查看

CSS選擇器速查表

對于 CSS 剛入門的同學，建議看看這個 CSS 選擇器，可以讓你更易理解選擇器的用法。

點擊查看

CSS偽類 :nth-child 的用法

也是以可視化方式展示:nth-child的用法，用戶還可以自行修改它的數值來實時展示效果，真的方便。

點擊查看

Bootstrap 4 Cheat Sheet

Bootstrap 4 有新的很多組件樣式，熟記它不太可能，在官網找又太麻煩，那么這個Bootstrap 4是你最好的選擇，流布布局分類，支持一件復制代碼，超好用，小編正在用了。

點擊查看

前端框架兼容表

這個列表把所有流行的、不太流行的前端框架（Front end Frameworks）的瀏覽器兼容性一一列出來，框架有 Bootstrap, Kube, 960 Grid System, Foundation, Semantic UI 等等。

以后看框架的兼容性，這個頁面就夠了。

點擊查看

Bootstrap 4 速度表 + Class 列表

這個速查表特色就是還有效果預覽圖，鼠標移到小圖上面就會放大預覽圖，而當你想要這個代碼的時候，點擊表格右邊的鏈接就會跳到官網對應的代碼頁了。

點擊查看

jQuery 3 Cheatsheet

jQuery 大家都知道了吧，而這個速查表最新版本的 jQuery 3

點擊查看

ES6 CHEAT SHEET

主要是介紹ES2015 [ES6]常用的一些技巧、竅門和代碼實例。

點擊查看

CSS 動畫：Animate.css

Animate.css 這是一個非常優秀的樣式動畫庫，什么漸變、淡入淡出、放大縮小、旋轉等等，幾乎所有能用的CSS動畫都有了，超好用，想做 CSS 動畫，建議一定要參考這個樣式庫。

點擊查看

贊助商鏈接

喜歡這篇文章嗎？歡迎分享到你的微博、QQ群，并關注我們的微博，謝謝支持。
版權：除非注明，本站文章均為原創文章，轉載請聯系我們授權，否則禁止轉載。