当前位置: 首页 > 软件库 > Web应用开发 > CSS框架 >

yigezi

CSS 布局库
授权协议 MIT
开发语言 JavaScript HTML/CSS
所属分类 Web应用开发、 CSS框架
软件类型 开源软件
地区 国产
投 递 者 秦信瑞
操作系统 跨平台
开源组织
适用人群 未知
 软件概览

yigezi (易格子) 是一个纯粹的 CSS 布局库,用于水平方向的 1 - 12 任意等份布局。

文档

yigezi 官方文档

仓库

github 仓库地址 https://github.com/chenbimo/yigezi

gitee 仓库地址 https://gitee.com/chenbimo/yigezi

演示

演示 demo

写法

<!-- 任意等份栅格布局库(易格子) -->
<div class="col sm-1-1 mb-1-2 pad-1-4 pc-1-5 lg-1-6">
    <div class="col-wrapper">1-3</div>
</div>
<div class="col sm-1-1 mb-1-2 pad-1-4 pc-1-5 lg-1-6">
    <div class="col-wrapper">1-3</div>
</div>
<div class="col sm-1-1 mb-1-1 pad-1-4 pc-1-5 lg-1-6">
    <div class="col-wrapper">1-3</div>
</div>
<div class="col sm-1-1 mb-1-2 pad-1-4 pc-1-5 lg-1-6">
    <div class="col-wrapper">2-5</div>
</div>
<div class="col sm-1-1 mb-1-2 pad-1-4 pc-1-5 lg-1-6">
    <div class="col-wrapper">1-5</div>
</div>
<div class="col sm-1-1 mb-1-2 pad-1-4 pc-1-5 lg-1-6">
    <div class="col-wrapper">2-5</div>
</div>
<div class="col sm-1-1 mb-1-2 pad-1-4 pc-1-5 lg-1-6">
    <div class="col-wrapper">2-7</div>
</div>
<div class="col sm-1-1 mb-1-2 pad-1-4 pc-1-5 lg-1-6">
    <div class="col-wrapper">2-7</div>
</div>
<div class="col sm-1-1 mb-1-2 pad-1-4 pc-1-5 lg-1-6">
    <div class="col-wrapper">4-9</div>
</div>
<div class="col sm-1-1 mb-1-2 pad-1-4 pc-1-5 lg-1-6">
    <div class="col-wrapper">2-9</div>
</div>
<div class="col sm-1-1 mb-1-2 pad-1-4 pc-1-5 lg-1-6">
    <div class="col-wrapper">1-9</div>
</div>
<div class="col sm-1-1 mb-1-2 pad-1-4 pc-1-5 lg-1-6">
    <div class="col-wrapper">2-10</div>
</div>

 

 相关资料
  • Tabris.js使用原生平台的能力来对UI界面进行布局。由于显示密度在移动设备之间差异很大,因此Tabris.js中的像素始终用设备独立像素表示。 布局数据 全部控件都支持layoutData属性,该属性定义了控件的排列方式。layoutData的值必须是下列属性组成的一个对象: left right top bottom centerX centerY baseline width heigh

  • 准则 单位和度量 度量与边框 结构 自适应 UI

  • 布局 学习布局前须知道 CSS 中的定位机制。 标准文档流(Normal Flow) 浮动(Float) 绝对定位(Absolute Positioning) 标准文档流,从上到下,从左到右的输出文档内容。它由块级(block)元素和行级元素组成,且它们都是盒子模型。 下面为 Firefox 布局可视化 Gecko Reflow Visualisation,布局是指浏览器将元素以正确的大小摆放在正

  • 页面整体布局是一个产品最外层的框架结构,往往会包含导航、侧边栏、面包屑以及内容等。想要了解一个后台项目,先要了解它的基础布局。 Layout 对应代码 @/layout @ 是 webpack 的 alias 不懂得请自行研究 vue-element-admin 中大部分页面都是基于这个 layout 的,除了个别页面如:login , 404, 401 等页面没有使用该layout。如果你想在一

  • 布局模式,有时简称为布局,是一种基于盒子与其兄弟和祖辈盒子的交互方式来确定盒子的位置和大小的算法。在 LCUI 中参与布局计算的数据包括 display 属性、定位属性、几何属性、盒模型、尺寸规则、布局规则等,这些数据的用途大致如下: 在布局开始前,组件的 display 属性、定位属性和几何属性会被用于计算盒模型和尺寸规则。 在布局开始时,组件的 display 属性、定位属性和尺寸规则用于选择

  • 如果你想从头开始,起始页是构建应用程序的好地方。 布局包括 4个主要部分: 包装器 .wrapper。包含整个网站的 div。 主标题 .main-header。 包含 LOGO 和导航栏。 侧边栏 .sidebar-wrapper。包含用户面板和侧边栏菜单。 内容 .content-wrapper。包含页面标题和内容。 布局设置 你不能同时使用 boxbox-boxed 和 layout-nav

  • 我试图使用相对布局与一个扩展视图的自定义类,和几个按钮。这就是我最终希望它看起来的样子: http://imgur.com/b5mtdj7 null 编辑:这是“vs programmatic”的原因是,我认为重写measure不会是一个糟糕的口号,但我不知道这将如何与XML交互。我宁愿布局定义也在一个地方。 我的XML如下所示:

  • pre { white-space: pre-wrap; } jQuery EasyUI 插件 通过 $.fn.layout.defaults 重写默认的 defaults。 布局(layout)是有五个区域(北区 north、南区 south、东区 east、西区 west 和中区 center)的容器。中间的区域面板是必需的,边缘区域面板是可选的。每个边缘区域面板可通过拖拽边框调整尺寸,也可以