html 栅格表单,col 栅格布局

## col 栅格布局规则

### 该文档不再维护,新版文档地址: [form-create 文档](http://fc.gd8.top)

**所有组件均支持布局配置规则,详细参考**[iview栅格布局](http://v2.iviewui.com/components/grid)

#### 举例

```javascript

//生成一个的按钮组件,通过col规则设置组件长度为50%

maker.create('i-button').props({

type:"primary",

size:"large",

shape:undefined,

long:true,

htmlType:"button",

disabled:false,

icon:"ios-upload",

loading:false,

show:true

})

.on({

"click":()=>{

console.log('click');

}).col({span:12,labelWidth:1}).children([

maker.create('span').domProps({

innerHTML:'测试自定义按钮'

})

])

//生成一个文字提示组件,通过col规则设置组件长度为50%

maker.create('Tooltip').props({

content:"这里是提示文字",

}).col({span:11,labelWidth:1,push:1}).children([

maker.create('span').domProps({

innerHTML:'当鼠标经过这段文字时，会显示一个气泡框'

})

]),

```

#### col规则配置项

| 属性 | 说明 | 类型 | 默认值 |

| :--- | :--- | :--- | :--- |

| xs | `<768px`响应式栅格，可为栅格数或一个包含其他属性的对象 | Number ,Object | - |

| sm | `≥768px`响应式栅格，可为栅格数或一个包含其他属性的对象 | Number ,Object | - |

| md | `≥992px`响应式栅格，可为栅格数或一个包含其他属性的对象 | Number ,Object | - |

| lg | `≥1200px`响应式栅格，可为栅格数或一个包含其他属性的对象 | Number ,Object | - |

---

html 栅格表单,col 栅格布局相关推荐

实战课【1】jQuery实现表单校验及布局
实战课[1]jQuery实现表单校验及布局在学习完html,css,js,mysql,jdbc,Servlet,filter,ajax,maven等web基础知识后,开始进行项目实战.此文就会记录在 ...
Bootstrap表单的可选布局
Bootstrap还提供了 3 个辅助类 .form-search..form-inline..form-horizontal,用来实现搜索表单.行内表单.水平布局的表单. 1.搜索表单为 < ...
Bootstrap表单的默认布局
Bootstrap 自带了基本的表单样式,不需要添加任何辅助类,即可使用表单的默认布局.默认布局中,表单元素采用垂直布局,标签和输入框使用顶对齐方式.如: <form> <fie ...
html flex 表单样式,Flexbox 布局的最简单表单的实现
弹性布局(Flexbox)逐渐流行,越来越多人使用,因为它写 CSS 布局真是太方便了. 三年前,我写过 Flexbox 的介绍(上,下),但是有些地方写得不清楚.今天,我看到一篇教程 ,才意识到一 ...
基于VUE的ElementUi可视化表单设计器布局器
码农苦码农懂的个人空间工作日志正文基于VUE的ElementUi可视化表单设计器布局器顶原码农苦码农懂发布于 09/11 15:35 字数 1187 阅读 41 收藏 0 点赞 1 评论 ...
自适应浮动表单填充布局脚本
效果 1.适合搜素表单布局,查询重置等功能块始终位于最后一行的最后一列 2.适合普通多行两端对齐,未填充满的行左对齐思路此脚本目的为实现整齐风格的表单布局,为了达到整齐的效果,每个表单元素或者块都 ...
python嵌套html开发gui_python GUI库图形界面开发之PyQt5表单布局控件QFormLayout详细使用方法与实例...
PyQt5布局控件QFormLayout简介 QFormLayout是label-field式的表单布局,顾明思议,就是实现表单方式的布局,表单是提示用户进行交互的一种模式,主要有两列组成,第一列用于 ...
从Antd 源码到自我实现之 Form表单
前言 Antd 中的组件大部分基于蚂蚁金服的组件库 react-component.antd 与 react-component 都是开源项目,阅读其源码可以给我们带来很多收益,比如: 了解各式各样的 ...
Bootstrap3 表单
表单 Bootstrap 为表单和表单控件提供了一些全局样式,不需要添加任何辅助类,即可让表单使用默认布局.默认布局中,表单元素采用垂直布局,标签和输入框采用顶对齐方式. Bootstrap 中创建表 ...

html 栅格表单,col 栅格布局

html 栅格表单,col 栅格布局相关推荐

最新文章

热门文章