现代 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. 【Redis发布订阅】

    Redis通过PUBLISH.SUBSCRIBE等命令实现发布与订阅模式. 举例:QQ群的公告,单个发布者,多个收听着. *** 发布/订阅 PUBLISH 频道 消息 将消息发布到指定的频道. . ...

  2. 【Python】【Head First Python】【chapter1】1 - 导入模块

    导入模块 导入模块有三种方法,以导入sys模块为例: 第一是import module 形式导入 import sys location = sys.stdout 第二是from module imp ...

  3. modSecurity规则学习（五）——DDOS攻击检测

    1.IP访问频率 SecAction phase:1,nolog,pass,setvar:IP.counter=+1 SecRule IP:UPDATE_RATE "@gt 10" ...

  4. android 图片特效处理之图片叠加

    这篇将讲到图片特效处理的图片叠加效果.跟前面一样是对像素点进行处理,可参照前面的android图像处理系列之七--图片涂鸦,水印-图片叠加和android图像处理系列之六--给图片添加边框(下)-图片 ...

  5. vue中关于prop

    组件之间的项目通信在vue中十分常见,父组件的数据传到子组件需要prop的支持,我们来看下prop 1.html的特性名大小写不敏感,浏览器会把所有大写字母解释为小写字母,使用dom模板时,使用等价的 ...

  6. notepad++go语法高亮文件

    notepad++go语法高亮文件 下载 右键另存为下载后在语言栏中的自定义面板中直接导入,重启即可

  7. require和import的使用

    一.前言 ES6标准发布后,module成为标准,标准的使用是以export指令导出接口,以import引入模块,但是在我们一贯的node模块中,我们采用的是CommonJS规范,使用require引 ...

  8. Objective-C ,ios,iphone开发基础:UIAlertView使用详解

    UIAlertView使用详解 Ios中为我们提供了一个用来弹出提示框的类 UIAlertView,他类似于javascript中的alert 和c#中的MessageBox(); UIAlertVi ...

  9. src/MD2.c:31:20: 错误：Python.h：没有那个文件或目录

    一.前言 在CentOS 上安装fabric时出现问题,首先已安装pip, 用pip执行以下命令pip install 出现以下问题 [niy@niy-computer /]$ sudo pip in ...

  10. 保留的 IPv4 地址

    保留的IP地址   https://en.wikipedia.org/wiki/Reserved_IP_addresses 地址块(CIDR) 范围 地址数量 范围 目的 0.0.0.0/8 0.0. ...