我沒有得到答案，但仍然做了一個由數據生成的html表單，並帶有bootstrap。這只是一個例子。數據是我製作的對象。您可以在這裏看到一些結構示例，這些結構是響應式的。
您需要下載鏈接的樣式表和腳本（請參閱HTML文件）才能使用。你只需要引導程序和JQuery的大部分應用程序，其他包括用於特定的控件。
我希望這可以幫助。
這是我的index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="js/bootstrap-checkbox.min.js" defer></script>
<script src="js/bootstrap-filestyle.min.js" defer></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.1/summernote.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.1/summernote.js"></script>
<script src="js/myJavaScript.js"></script>
</head>
<body onload="addAllElements()">
<h1>Exemple de formulaire responsive généré pour Bootstrap</h1>
<br/>
<div class="row" id="mainRow">
</div>
</body>
</html>
這是我的JavaScript文件
//This function should read a json file and produce the right form
function addAllElements() {
//A test for generated forms (from objects)
for (var i = 0; i < 3; i++) {
addElement({
label: "SAQ ID :",
tag: "input",
type: "text",
infos: { name: "sapID" }
});
addElement({
label: "Family of equipement :",
tag: "textarea",
infos: { name: "familyEQ" }
});
addElement({
label: "Category of equipement :",
tag: "textarea",
infos: { name: "categoryEQ" }
});
addElement({
label: "Name of the equipement :",
tag: "input",
type: "text",
infos: { name: "nameEQ" }
});
addElement({
label: "Serial Number :",
tag: "input",
type: "text",
infos: { name: "serial" }
});
addElement({
label: "Type/Model :",
tag: "input",
type: "text",
infos: { name: "typeModel" }
});
addElement({
label: "Photo :",
tag: "pictureUpload",
type: "file",
infos: { name: "photo" }
});
addElement({
label: "Can the material be assigned or sold :",
tag: "checkbox",
type: "checkbox",
infos: {}
});
addElement({
label: "Some rich text editing :",
tag: "richEditor",
});
}
//We add the styling for checkboxes, file inputs and rich editors
$(':checkbox').checkboxpicker();
$(":file").filestyle({ buttonText: "File", buttonName: "btn-primary", placeholder: "No file" });
$('.richEditor').summernote();
}
//This function add a single element to the form
function addElement() {
//We create the group div (the whole element div)
var newDiv = document.createElement("div");
if(arguments[0].tag !== "richEditor"){
newDiv.className = "form-group col-xs-12 col-sm-6 col-lg-4 col-xl-3";
}else{
newDiv.className = "form-group col-xs-12 col-sm-12 col-lg-12 col-xl-12";
}
//We create and add the label to the div
var newLabel = document.createElement("label");
if(arguments[0].tag == "richEditor"){
newLabel.className = "col-xs-12 col-sm-2 col-lg-2 col-xl-2 control-label";
}else{
newLabel.className = "col-xs-12 col-sm-5 control-label";
}
newLabel.innerHTML = arguments[0].label;
newDiv.appendChild(newLabel);
//We create and add the input to the div
var inputDiv = document.createElement("div");
if(arguments[0].tag == "richEditor"){
inputDiv.className = "col-xs-12 col-sm-10 col-lg-10 col-xl-10";
//inputDiv.style.paddingLeft = "5%"
}else{
inputDiv.className = "col-xs-12 col-sm-7";
}
newDiv.appendChild(inputDiv);
switch (arguments[0].tag) {
case "input":
var newInput = document.createElement("input");
newInput.className = "form-control";
newInput.type = (arguments[0].type !== undefined ? arguments[0].type : "");
newInput.placeholder = (arguments[0].infos.placeholder !== undefined ? arguments[0].infos.placeholder : "");
newInput.name = (arguments[0].infos.name !== undefined ? arguments[0].infos.name : "");
inputDiv.appendChild(newInput);
break;
case "textarea":
var newInput = document.createElement("textarea");
newInput.className = "form-control";
newInput.type = (arguments[0].type !== undefined ? arguments[0].type : "");
newInput.placeholder = (arguments[0].infos.placeholder !== undefined ? arguments[0].infos.placeholder : "");
newInput.name = (arguments[0].infos.name !== undefined ? arguments[0].infos.name : "");
newInput.style = "resize: vertical;";
inputDiv.appendChild(newInput);
break;
case "pictureUpload":
var newInput = document.createElement("input");
newInput.className = "form-control stylesheet";
newInput.type = "file";
newInput.placeholder = (arguments[0].infos.placeholder !== undefined ? arguments[0].infos.placeholder : "");
newInput.name = (arguments[0].infos.name !== undefined ? arguments[0].infos.name : "");
inputDiv.appendChild(newInput);
break;
case "checkbox":
var newInput = document.createElement("input");
newInput.className = "form-control";
newInput.type = "checkbox";
var att = document.createAttribute("data-reverse");
newInput.setAttributeNode(att);
att = document.createAttribute("checked");
newInput.setAttributeNode(att);
inputDiv.appendChild(newInput);
break;
case "richEditor":
var newInput = document.createElement("div");
newInput.className = "form-control richEditor";
inputDiv.appendChild(newInput);
break;
default:
}
var mainRow = document.getElementById("mainRow");
mainRow.appendChild(newDiv);
}