<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <h2>Menu editor</h2> </div> <form method="post" action="?"> <input type="hidden" id="fld-id" name="fld-id" value=""> <div class="row"> <div class="form-group col-md-10"> <label class="control-label col-md-12" for="fld-title">Title <input id="fld-title" name="fld-title" class="form-control" placeholder="item title" type="text"> </label> </div> <div class="form-group col-md-2"> <label class=" control-label col-md-12" for="fld-order">Order <input id="fld-order" name="fld-order" class="form-control" placeholder="order" type="numeric"> </label> </div> <div class="form-group col-md-3"> <label class=" control-label col-md-12" for="fld-context">Context <div> <label class="radio-inline" for="fld-context-0"> <input type="radio" name="fld-context" id="fld-context-0" value="menu" > menu </label> <label class="radio-inline" for="fld-context-1"> <input type="radio" name="fld-context" id="fld-context-1" value="view"> view </label> <label class="radio-inline" for="fld-context-2"> <input type="radio" name="fld-context" id="fld-context-2" value="list"> list </label> </div> </label> </div> <div class="form-group col-md-3"> <label class=" control-label col-md-12" for="fld-type">Type <div> <label class="radio-inline" for="fld-type-0"> <input type="radio" name="fld-type" id="fld-type-0" value="url" > URL </label> <label class="radio-inline" for="fld-type-1"> <input type="radio" name="fld-type" id="fld-type-1" value="dynamic"> Dynamic </label> <label class="radio-inline" for="fld-type-2"> <input type="radio" name="fld-type" id="fld-type-2" value="none"> None </label> </div> </label> </div> <div class="form-group col-md-3"> <label class=" control-label col-md-12" for="fld-status">Status <div> <label class="radio-inline" for="fld-status-0"> <input type="radio" name="fld-status" id="fld-status-0" value="active" checked="checked" > Active </label> <label class="radio-inline" for="fld-status-1"> <input type="radio" name="fld-status" id="fld-status-1" value="inactive"> Inactive </label> </div> </label> </div> <div class="form-group col-md-3"> <label class=" control-label col-md-12" for="fld-kind">Kind <div> <label class="radio-inline" for="fld-kind-0"> <input type="radio" name="fld-kind" id="fld-kind-0" value="active" checked="checked" > Private </label> <label class="radio-inline" for="fld-kind-1"> <input type="radio" name="fld-kind" id="fld-kind-1" value="shared"> Shared </label> </div> </label> </div> <div class="form-group col-md-4"> <label class=" control-label col-md-12" for="fld-module">Module <input id="fld-module" name="fld-module" class="form-control" placeholder="module" type="text"> </label> </div> <div class="form-group col-md-4"> <label class=" control-label col-md-12" for="fld-module">Class <input id="fld-class" name="fld-class" class="form-control" placeholder="class" type="text"> </label> </div> <div class="form-group col-md-4"> <label class=" control-label col-md-12" for="fld-action">Action <input id="fld-action" name="fld-action" class="form-control" placeholder="action" type="text"> </label> </div> <div class="form-group col-md-4"> <label class=" control-label col-md-12" for="fld-url">URL <input id="fld-url" name="fld-url" class="form-control" placeholder="http://" type="text"> </label> </div> <div class="form-group col-md-4"> <label class=" control-label col-md-12" for="fld-icon-class">Icon class <input id="fld-icon-class" name="fld-icon-class" class="form-control" placeholder="css class" type="text"> </label> </div> </div> <div class="row"> <h4>Dynamic call</h4> <div class="form-group col-md-2"> <label class=" control-label col-md-12" for="fld-dyn-application">Application <input id="fld-dyn-application" name="fld-dyn-application" class="form-control" placeholder="Application" type="text"> </label> </div> <div class="form-group col-md-2"> <label class=" control-label col-md-12" for="fld-dyn-module">Module <input id="fld-dyn-module" name="fld-dyn-module" class="form-control" placeholder="module" type="text"> </label> </div> <div class="form-group col-md-2"> <label class=" control-label col-md-12" for="fld-dyn-class">Class <input id="fld-dyn-class" name="fld-dyn-class" class="form-control" placeholder="class" type="text"> </label> </div> <div class="form-group col-md-3"> <label class=" control-label col-md-12" for="fld-dyn-action">Action <input id="fld-dyn-action" name="fld-dyn-action" class="form-control" placeholder="action" type="text"> </label> </div> <div class="form-group col-md-3"> <label class=" control-label col-md-12" for="fld-kind">Kind <div> <label class="radio-inline" for="fld-kind-0"> <input type="radio" name="fld-kind" id="fld-kind-0" value="active" checked="checked" > Private </label> <label class="radio-inline" for="fld-kind-1"> <input type="radio" name="fld-kind" id="fld-kind-1" value="shared"> Shared </label> </div> </label> </div> </div> <div class="row"> <div class="form-group"> <div class=" pull-right"> <button id="bt-cancel" class="btn btn-link">Cancel</button> <button id="bt-save" class="btn btn-success">Save</button> </div> </div> </div> </form> </div>