现代 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. which---查找并显示给定命令的绝对路径

    which命令用于查找并显示给定命令的绝对路径,环境变量PATH中保存了查找命令时需要遍历的目录.which指令会在环境变量$PATH设置的目录里查找符合条件的文件.也就是说,使用which命令,就可 ...

  2. 关于结构体内存对齐方式的总结（#pragma pack()和alignas()）

    最近闲来无事,翻阅msdn,在预编译指令中,翻阅到#pragma pack这个预处理指令,这个预处理指令为结构体内存对齐指令,偶然发现还有另外的内存对齐指令aligns(C++11),__declsp ...

  3. 洛谷 P1244 青蛙过河

    P1244 青蛙过河 题目描述 有一条河,左边一个石墩(A区)上有编号为1,2,3,4,…,n的n只青蛙,河中有k个荷叶(C区),还有h个石墩(D区),右边有一个石墩(B区),如下图所示.n只青蛙要过 ...

  4. RvmTranslator6.3 is released

    RvmTranslator6.3 is released eryar@163.com RvmTranslator can translate the RVM file exported by AVEV ...

  5. LeetCode Implement strStr()（Sunday算法）

    LeetCode解题之Implement strStr() 原题 实现字符串子串匹配函数strStr(). 假设字符串A是字符串B的子串.则返回A在B中首次出现的地址.否则返回-1. 注意点: - 空 ...

  6. BZOJ离线版

    http://dh.attack.cf/bzoj/ 闲来无事自己搞的 可以查看权限题 至于这个东西怎么搞, 可以私信我2333 网站已经挂掉. 想看的可以去rxz大爷的blog http://ruan ...

  7. Kinect 开发 —— 杂一

    Kinect 提供了非托管(C++)和托管(.NET)两种开发方式的SDK,如果您用C++开发的话,需要安装Speech Runtime(V11),Kinect for Windows Runtime ...

  8. 购买VPS时机房的选择

    购买VPS时机房的选择 对于配置差不多的VPS,距离越近的一般网速越快,所以有必要使用谷歌地图,查看城市的所在位置 比如ChicagoVPS,不时有邮件销售它的VPS,虽然说不上怎么好,但是一般的使用 ...

  9. 【单词】常见单词含义的辨异（emulator/simulator、hardware/firmware）

    1. emulator 与 simulator The Simulator tries to duplicate the behavior of the device.(仿真的是行为): The Em ...

  10. Python 标准库 csv —— csv 文件的读写

    csv 文件,逗号分割文件. 0. 读取 csv 到 list from csv import reader def load_csv(csvfile): dataset = [] with open ...