Small bootstrap grid example

Author: davidlgj

examples/bootstrap-example.html

@@ -42,7 +42,6 @@ <h3>The Generated Form</h3>
             sf-form="form"
             sf-schema="schema"
             ng-submit="submitForm(ngform,modelData)">
-              <em>before</em><div sf-insert-field="name"></div><em>after</em>
       </form>
       <h3>Model</h3>
       <pre ng-cloak>{{pretty()}}</pre>
@@ -103,6 +102,7 @@ <h3>Schema</h3>
   $scope.tests = [
     { name: "Simple", data: 'data/simple.json' },
     { name: "Basic JSON Schema Type", data: 'data/types.json' },
+    { name: "Bootstrap Grid", data: 'data/grid.json' },
     { name: "Complex Key Support", data: 'data/complex-keys.json' },
     { name: "Array", data: 'data/array.json' },
     { name: "Tab Array", data: 'data/tabarray.json' },

examples/data/grid.json

@@ -0,0 +1,57 @@
+{
+  "schema": {
+    "type": "object",
+    "title": "Comment",
+    "properties": {
+      "name":  {
+        "title": "Name",
+        "type": "string"
+      },
+      "email":  {
+        "title": "Email",
+        "type": "string",
+        "pattern": "^\\S+@\\S+$",
+        "description": "Email will be used for evil."
+      },
+      "comment": {
+        "title": "Comment",
+        "type": "string",
+        "maxLength": 20,
+        "validationMessage": "Don't be greedy!"
+      }
+    },
+    "required": ["name","email","comment"]
+  },
+  "form": [
+    {
+      "type": "help",
+      "helpvalue": "<div class=\"alert alert-info\">Grid it up with bootstrap</div>"
+    },
+    {
+      "type": "section",
+      "htmlClass": "row",
+      "items": [
+        {
+          "type": "section",
+          "htmlClass": "col-xs-6",
+          "items": ["name"]
+        },
+        {
+          "type": "section",
+          "htmlClass": "col-xs-6",
+          "items": ["email"]
+        }
+      ]
+    },
+    {
+      "key": "comment",
+      "type": "textarea",
+      "placeholder": "Make a comment"
+    },
+    {
+      "type": "submit",
+	  "style": "btn-info",
+      "title": "OK"
+    }
+  ]
+}