Question

我一直在尝试使用Josh工厂和羊驼等json形式的各种库来创建json模式的表单，到目前为止我可以生成我想要的表单。但是，表单都是以垂直方式排列的，并且不能轻易地更改单个表单字段的呈现位置。

我尝试过羊驼模板来安排我的表单字段，但不适用于像textarea这样的字段。

引导程序中是否有一个库可用于从json生成表单并通过bootstrap css对它们进行样式设置和安排？

Answer 1

为什么不使用两个库的强度？ Bootstrap岩石布置响应网格＆amp;羊驼在将JSON转化为形式方面非常棒。

敲除引导程序布局并使用Alpaca的布局绑定功能来设置字段应该呈现的位置。

＆＃13;

$(document).ready(function () {
    $("#CustomFormLayout").alpaca({
    		"data": {
        		"Picture": "http://www.alpacajs.org/assets/themes/dbyll/images/alpaca-icon.png"
        },
        "schema": {
            "type": "object",
            "properties": {
                "Love": {
                    "required": true,
                    "enum": ["I like goat", "I like lama", "I like alpaca"]
                },
                "LoveFactor": {
                    "required": true,
                    "type": "number",
                    "minimum": 1,
                    "maximum": 10
                },
                "Picture": {
                    "type": "string"
                }
            },
            "dependencies": {
                "LoveFactor": ["Love"]
            }
        },
        "options": {
            "type": "object",
            "fields": {
                "Love": {
                    "type": "select",
                    "label": "Which animal do you love?",
                    "noneLabel": "-- Please Select an Animal --",
                    "removeDefaultNone": false
                },
                "LoveFactor": {
                    "label": "How much love does this animal get?",
                },
                "Picture": {
                		"type": "image",
                    "view": "bootstrap-display"
                }
                
            }
        },
        "view": {
            "parent": "bootstrap-create",
            "layout": {
                "template": `
                    <div class='row'>
                        <div class ="col-xs-12">
                            <div data-alpaca-layout-binding='Love' class ='col-xs-6'></div>
                            <div data-alpaca-layout-binding='LoveFactor' class ='col-xs-6'></div>
                        </div>
                        <div class ="col-xs-12">
                            <div data-alpaca-layout-binding='Picture' class ='col-xs-2 col-xs-offset-5'></div>
                        </div>
                    </div>
                `
            }
        }
    })
})

＆＃13;

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.10/handlebars.js"></script>
<script src="https://code.cloudcms.com/alpaca/1.5.23/bootstrap/alpaca.min.js"></script>

<link href="https://code.cloudcms.com/alpaca/1.5.23/bootstrap/alpaca.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div id="CustomFormLayout">

</div>

＆＃13;

Twitter bootstrap json形成安排

1 个答案: