表格標簽是最原始的HTML標簽之一。作為老的HTML規范的一部分，表單一般不適合以移動端為中心的設計，也不提供任何先進功能。以下為大家分享功能強大的jQuery表格插件，來拓展或提高你創建的表格。

EBS是一個簡單高效的后臺權限管理系統。項目基礎框架采用全新的Java Web開發框架 —— Spring Boot2.0.4，消除了繁雜的XML配置，使得二次開發更為簡單；數據訪問層采用Mybatis，同時引入了通用Mapper和PageHelper插件，可快速高效的對單表進行增刪改查操作，消除了大量傳統XML配置SQL的代碼；安全框架采用時下流行的Apache Shiro，可實現對按鈕級別的權限控制；前端頁面使用Bootstrap構建，主題風格為時下Google最新設計語言Material Design，并提供多套配色以供選擇。FEBS意指：Fast，Easy use，Beautiful和Safe。

功能模塊

系統功能模塊組成如下所示：

|-------------------------------------------|
| ______ ______ ____ _____ |
| | ____| ____| _ \ / ____| |
| | |__ | |__ | |_) | (___ |
| | __| | __| | _ < \___ \ |
| | | | |____| |_) |____) | |
| |_| |______|____/|_____/ |
| Spring-Boot-Version: 2.0.4.RELEASE |
|-------------------------------------------|
|
├─系統管理
│ ├─字典管理
│ ├─用戶管理
│ ├─菜單管理
│ ├─角色管理
│ └─部門管理
├─系統監控
│ ├─在線用戶
│ ├─系統日志
│ ├─Redis監控
│ └─Redis終端
│─網絡資源
│ ├─One一個
│ │ ├─散文
│ │ ├─繪畫
│ │ └─語文
│ ├─天氣查詢
│ ├─影視資訊
│ │ ├─即將上映
│ │ └─正在熱映
│ └─每日一文
└─任務調度
 ├─定時任務
 └─調度日志

技術選型

后端

• 基礎框架：Spring Boot 2.0.4.RELEASE
• 持久層框架：Mybatis 3.4.5
• 安全框架：Apache Shiro 1.4.0
• 摸板引擎：Thymeleaf 3.0.9.RELEASE
• 數據庫連接池：阿里巴巴Druid 1.1.10
• 緩存框架：Redis
• 日志打印：logback
• 其他：fastjson，poi，javacsv，quartz等。

前端

• 基礎框架：Bootstrap 4
• JavaScript框架：jQuery
• 消息組件：Bootstrap notify
• 提示框插件：SweetAlert2
• 樹形插件：jsTree
• 樹形表格插件：jqTreeGrid
• 表格插件：BootstrapTable
• 表單校驗插件：jQuery-validate
• 多選下拉框插件：multiple-select
• 圖表插件：Highcharts
• 時間插件：daterangepicker

開發環境

• 語言：Java 8
• IDE：Eclipse Oxygen & IDEA 2018.1.4(Ultimate Edition)
• 依賴管理：Maven
• 數據庫：MySQL5.7
• 版本管理：SVN，git

系統預覽

項目地址

https://github.com/wuyouzhuguli/FEBS-Shiro

Spring Security版本已發布：https://github.com/wuyouzhuguli/FEBS-Security

端開發比設計和程序都要難做在于，要做好前端需要對設計和程序都有些許了解，當然這個只是額外需要了解的，主要還需要精通html，css，javascript，jQuery，響應式布局，移動網頁布局等經驗，當然時刻關注web前端技術也不可少，下面介紹了15款流行的響應式css框架。

前端開發并不是一個容易的工作，不僅需要掌握HTML、CSS和JavaScript，針對不同的瀏覽器版本和平臺，還需要了解如何設計出跨平臺的網站。如今隨著響應式設計的流行，前端開發變得越來越困難，且花費的時間更長。

本文收集了15個響應式前端開發框架，可以幫助前端開發人員大大簡化開發過程。針對每個框架，文中均指出了它所包含的UI組件及JavaScript插件。幾乎所有的框架都采用了響應式網格系統。

使用這些前端框架，有如下好處：

• 跨瀏覽器。這一點已被證實。

• 一致性。UI組件，如導航、按鈕、標簽、表單、下拉框、表格……，在設計上保持風格一致。

• 快速開發。你可以快速、容易地構建布局。這些框架都配有詳細的說明文檔。

• 響應式。所有CSS組件及JavaScript插件可以很好地從桌面過渡到移動設備上。

快切css

快切css是由切圖網推出的一款響應式css框架——Quickcss，最早10年就推出了，算是國內css框架鼻祖了，后經過不斷衍化，逐步完善了不足之處，它的最大特色在于簡單易用，和兼容性強，兼容ie6+，firefox，chrome等瀏覽器和移動設備。

http://kuai.qietu.com

InK

Ink為一個界面工具包，用于快速開發Web界面，具有易于使用、易于擴展特點。它可以為構建布局提供解決方案，可以展示普通的界面元素，可以實現以內容為中心、對用戶友好的交互方式。

• HTML&CSS：布局、導航、排版、圖標、表單、提示框、表格

• JS：Gallery、表格、樹視圖、排序列表、日期選擇插件、制表符、表單驗證及一些行為（停靠、折疊、關閉）

• 其他：Sass Mixins

GroundworkCSS Beta

GroundworkCSS是一個基于Sass預處理器的開源項目 ，主要用于快速構建響應式Web應用程序。擁有一個靈活的、可嵌套的網格系統，可以創建適應多種瀏覽設備的布局。GroundworkCSS還提供多種UI 組件，如導航、按鈕、圖標、表單、Tabs、對話框、工具提示等等。

• HTML&CSS：網格、布局、排版、按鍵、標題、表單、圖標、社交圖標、響應式文本、對話框、工具提示

• JS：導航、制表符（Tab）、提示框、Cycle2

• 其他：Sass Mixins

Ivory

這是一個靈活、強大的響應式Web框架，使Web開發更快速、更簡單。

• HTML&CSS：網格、排版、表單、按鈕、提示框、頁碼、面包屑導航（breadcrumb）、列表、表格

• JS：提示框、制表符（Tab）、切換開關（Toggle switch）、折疊

ZURB

Foundation由ZURB公司設計，ZURB是一家產品設計公司，位于加州坎貝爾。Foundation為最先進的響應式前端開發框架，它擁有很多布局模板、CSS樣式表及自己開發的優秀JavaScript插件。

• HTML&CSS：網格、布局模板、圖標字體、響應式表格、SVG格式的社交圖標、頁碼、面包屑導航（breadcrumbs）、側導航、按鍵、排版、標簽、提示框、面板、價格表、進度欄、表格、縮略圖

• JS：下拉按鈕、拆分按鈕、轉換開關、Flex視頻、燈箱、下拉、響應式布局（通過轉換圖片大小來實現）、旅游導航、麥哲倫全局導航（Magellan Sticky Nav）、Orbit圖片滑動幻燈片插件等

• 其他：可定制皮膚表單（Custom Skinned Forms）、SCSS Mixin

Grumby

Gumby 2基于Sass開發。Sass為功能強大的CSS預處理器，利用它可以快速開發Gumby。

• HTML&CSS：網格、表單、按鈕、導航、標簽、Entypo圖標

• JS：下拉、浮窗、制表符（Tab）、開關與轉換（Toggles & Switches）

• 其他：可定制皮膚表單（Custom Skinned Forms）、SASS和Compass

HTML KickStart

該框架集合了HTML5、CSS和JavaScript，幫助開發人員快速開發Web產品。它覆蓋了所有UI組件，同時也包含一些有用的JavaScript插件。

• HTML&CSS：網格、排版按鈕、列表、表格、圖標、面包屑導航、圖片、表單

• JS：菜單、代碼高亮插件、制表符（Tab）、幻燈片播放、表單驗證

• 其他：CSS幫助文檔

Maxmertkit

Maxmertkit擁有完整的文檔，包含大量實例，并且提供了拖拽生成代碼的功能。

• HTML&CSS：網格、布局、徽章、按鈕、表單、圖標、標簽、菜單、進度欄、表格、下拉、工具提示

• JS：按鈕、旋轉木馬、通知、彈出框、滾動條、制表符（Tab）

• 其他： Sass、Coffee腳本語言

Twitter Bootstrap

大家對Twitter Bootstrap已十分熟悉了。憑借全面的UI組件、易用的網格和組件，Bootstrap已成為眾多設計者和開發者最喜歡的快速開發工具。現在已經有很多第三方Bootstrap程序和JavaScript插件可供使用。

• HTML&CSS：網格、布局、排版、編碼、表格、表單、按鍵、圖片、圖標、按鈕組、導航、面包屑導航、頁碼、標簽、徽章、縮略圖、提示框、進度欄

• JS：模態窗口（Modals）、提示效果（Tool Tips）、“泡芙”效果（Popovers）、滾動監控（Scrollspy）、旋轉木馬（Carousel）、輸入提示（Typeahead）等等。

• 其他：定制器（Customizer）、 LESS CSS

Skeleton

Skeleton 是一個小的JS和CSS文件集合，可幫你快速開發漂亮的網站，適合各種屏幕設備，包括手機。Skeleton基于960 Grid開發，是一個UI框架。

• HTML&CSS：GRid、排版、按鈕、表單、媒體查詢（Media Queries）

Kube

Kube是一款最小化的，支持響應式的前端框架，包括一個簡潔的CSS文件，用于方便地創建響應式布局，包括了兩個JS文件來完成Tab以及頁面的按鈕操作。

• HTML&CSS：排版、網格、表單、表格、按鈕、導航、圖標

• JS：按鈕、制表符（Tab）

• 其他： LESS CSS

Helium

Helium是一個前端響應式Web框架，使用HTML5、CSS3快速制作原型以及開發產品。Helium很像Twitter Bootstrap和ZURB Foundation，事實上，Helium使用了兩者不少的代碼。但與這兩個框架不同的是，Helium設計更加輕量級，而且更容易修改。Helium只有30KB左右，而Bootstrap有100KB，ZURB有200多KB。

• HTML&CSS：網格、按鈕、排版、表單

• JS：下拉、表單驗證

• 其他：Sass、Compass

The Markup Framework

Markup是一套集布局、小組件、UI組件和字體排版樣式為一體的框架。它可以作為你設計自己網站的起點。

• HTML&CSS：布局、網格、排版、表單、按鈕、面包屑導航、導航列表、導航菜單

• JS：沒有JavaScripts，只有單純的CSS

Topcoat

TopCoat是一套免費的開源UI元素類庫，整套類庫不使用任何JavaScript，而是使用CSS和HTML來生成。

• HTML&CSS：圖標、字體、按鍵、面包屑導航、表單、下拉、滑動開關、選擇、滾動條、切換按鈕

• JS：沒有JavaScripts，只有單純的CSS

PureCSS

Pure是一個相當小的框架，壓縮及最小化后僅有5.7KB。它沒有使用任何JavaScript，只是HTML和CSS。該CSS框架為響應式布局，采用模塊化結構，每個模塊的樣式可以單獨使用。

• HTML&CSS：網格、排版、表單、按鍵、表格、菜單

• JS：沒有JavaScripts，只有單純的CSS

• 其他：程序皮膚制作工具（Skin Builder）、YU 庫。

結論

根據你的需要，選擇可以與設計相匹配的框架。我們不應該根據框架來構建網站，因為它會很大程度上限制設計者的思維。

如果前端設計/布局不是那么重要，那么我們可以選擇使用某一框架。（編譯：陳秋歌/責編：夏夢竹）

原文來自：queness.com

切圖網是國內網頁前端開發服務領跑者，提供專業的網頁切圖前端開發服務。