现代 Web 开发在将体验和功能做到极致的同时，对于美观的追求也越来越高。在推荐完图形库之后，再来推荐一些精品的独立 UI 组件。这些组件可组合在一起，形成美观而交互强大的 Web UI 。

下面将针对布局（Layout）、Icon（图标）、Progress（进度）、Button（按钮）、Picker（选择器）、Accordion（折叠）、Input（输入）、Overlay（重叠）、Content（内容/目录）、Editor（编辑）、Widget（挂件）等分别做一些推荐整理。由于篇幅有限，将分两期发布，欢迎保持关注。

一、布局

1、Split.js

一个轻量级的 JavaScript 工具，用于创建可调整的分割视图或者窗格，gzip 大小仅 2 KB。视图可以水平或者垂直分割，没有附加的开销和窗口，使用纯 CSS 进行调整。同时，还保证了与 IE9 和 IE8 ，以及 Firefox / Chrome / Safari / Opera 等主流浏览器的兼容性。

Demo 点此查看

2、Bricks.js

一个快速的布局堆砌器，不需要 HTML 标记或 CSS 样式表即可完成布局。功能强大，配置文件可读。

Demo 点此查看

3、masonry

一个老牌布局框架，已开发和维护 8 年，拥有自己的描述语法，采用优雅的链式语法封装自动布局。它可以根据可用的垂直空间将元素放置在最佳位置，类似于在墙壁上砌砖的经验丰富的泥水匠。

Demo 点此查看

4、React-Grid-Layout

不同于前面，这是一个 React Grid 布局系统，不需要 jQuery。它是响应式的，并且支持断点（breakpoints）。断点布局可由用户提供或自动生成，可随意拖动和调整大小。

Demo 点此查看

https://my.oschina.net/editorial-story/blog/1501570

四种布局JS的更多相关文章

  1. Vscode部分快捷键 Ps的简单使用 less中的除法问题 H5 四种布局

    vscode 部分快捷键 ctrl+/ 注释ctrl+回车 光标下移alt+shift+上下箭头 将本行代码向上或向下复制ul>li 自动写alt ,鼠标一直点,就会有很多光标,可以一起写ctr ...

  2. Android开发之基本控件和详解四种布局方式

    Android中的控件的使用方式和iOS中控件的使用方式基本相同,都是事件驱动.给控件添加事件也有接口回调和委托代理的方式.今天这篇博客就总结一下Android中常用的基本控件以及布局方式.说到布局方 ...

  3. Android学习笔记_3_四种布局

    Android布局是应用界面开发的重要一环,在Android中,共有四种布局方式, 分别是:FrameLayout( 帧布局 ).LinearLayout (线性布局).TableLayout(表格布 ...

  4. 有关于css的四种布局

    四种布局 (1).左右两侧,左侧固定宽度200px, 右侧自适应占满. (2).左中右三列,左右个200px固定,中间自适应占满. (3).上中下三行,头部200px高,底部200px高,中间自适应占 ...

  5. Android-基本控件和详解四种布局方式

    转自:https://www.cnblogs.com/ludashi/p/4883915.html 一.常用基本控件 1.TextView 看到Android中的TextView, 我不禁的想到了iO ...

  6. Android学习之基础知识六—Android四种布局详解

    一.Android基本布局 布局是一种可以放置多个控件的容器,它可以按照一定规律调整内部控件的位置,而且布局内部除了可以放置控件外,还可以放置布局,实现多层布局嵌套.布局和控件.布局和布局之间的关系如 ...

  7. 【Android学习】四种布局方式

    一.LinearLayout 线性布局,即一行展开或者一列展开,也可以嵌套,需要注意的属性如下: android:orentation  //对齐方式 二.FrameLayout 帧布局,即一层层叠起 ...

  8. Android常用的四种布局(或者说是五种)

    一.FrameLayout(帧布局): 显示特点:所有的子控件默认显示在FrameLayout的左上角,会重叠在一起显示. 常用属性: layout_gravity(设置给子控件,调整控件在容器内的重 ...

  9. Android四种布局方式

    线性布局 <LinearLayout android:layout_width="match_parent" android:layout_height="wrap ...

随机推荐

  1. unbound和mail服务的部署和简单应用

    1.服务的介绍 Unbound是一个缓存DNS解析器.unbound官网 它使用根区域的内置权威名称服务器列表 (.),所谓的根提示.在收到DNS查询时,它会询问 答案的根名称服务器,几乎在所有情况下 ...

  2. PHP保留两位小数

    1.不四舍五入 $number = 23.43453;$english_format_number = number_format($number, 2, '.', '');echo $english ...

  3. 【Henu ACM Round #13 F】Fibonacci-ish

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 枚举序列的头两个数字是什么 O(N^2) 然后头两个数字确定之后. f[3],f[4]..就确定了 只需查看f[3],f[4]..是 ...

  4. Chromium Graphics: Android L平台上WebView的变化及其对浏览器厂商的影响分析

    原创文章.转载请以链接形式注明原始出处为http://blog.csdn.net/hongbomin/article/details/40799167. 摘要:Google近期公布的Android L ...

  5. Java的线程机制

    一.Java中实现多线程的两种方式1) 继承Thread类 Thread类包括了包括和创建线程所需的一切东西. Thread 最重要的方法是 run().编写线程程序时须要覆盖 run() 方法,ru ...

  6. iOS Core Animation具体解释（四）AutoLayout中的动画

    原创blog.转载请注明出处 blog.csdn.net/hello_hwc 欢迎关注我的iOS SDK具体解释专栏 http://blog.csdn.net/column/details/huang ...

  7. .Net视图机制

    .Net会有默认的约定. HomeController下面的Index,会默认渲染Home/Index.cshtml. 当然可以设置成别的,比如设置成About. using System; usin ...

  8. 2017国家集训队作业[agc004f]Namori

    2017国家集训队作业[agc004f]Namori 题意: 给你一颗树或环套树,树上有\(N\)个点,有\(M\)条边.一开始,树上的点都是白色,一次操作可以选择一条端点颜色相同的边,使它的端点颜色 ...

  9. factor---将素数分解为质数

  10. 【OC学习-8】存取器方法？getter和setter？事实上就是赋值和返回值的两种函数

    我们在声明类的时候,有实例变量+方法(函数),这些实例变量假设默认的话都是protected类型,一般无法直接訪问.更别提赋值和调用了,所以就产生了两种函数,getter函数就是可以返回实例变量的值, ...