Twitter bootstrap json表单排列

Question

我一直在尝试使用各种库（如 Josh factory 和 alpaca 的 json form）创建具有 json 模式的表单，到目前为止，我可以生成我想要的表单。但是，表单都是垂直排列的，不能轻易改变各个表单字段的呈现位置。

我已尝试使用 alpaca 模板来排列表单字段，但不适用于某些字段，例如 textarea。

bootstrap 中是否有一个库，我可以使用它从 json 生成表单并通过 bootstrap css 对其进行样式设置和排列？

Answer 1

为什么不利用这两个库的优势呢？ Bootstrap 在布局响应式网格方面非常出色，而 alpaca 在将 JSON 转换为表单方面非常出色。

构建一个引导布局并使用 Alpaca 的布局绑定功能来设置应在何处呈现字段。

$(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>
                `
            }
        }
    })
})

<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>