html - Display form in tabular form using bootstrap -
i display form in tabular form this:
<div class = "row"> <table class="table"> <thead> <tr> <th> selection </th> <th> ticket type </th> <th> price </th> <th> quantity <th> </tr> </thead> <tbody> <tr> <td> <input type="radio" value="selected"></td> <td> 3d </td> <td> 16000 </td> <td> 1 <td> </tr> </tbody> </table> </div>
how intergrate form elements bootstrap enable me that? example of how form should in image attached
take @ jsfiddle:
html:
<div class="container"> <div class="panel panel-default"> <div class="panel-heading"><b>ticket details</b> </div> <table class="table table-striped"> <thead> <tr> <th class="col-xs-3">selection</th> <th class="col-xs-3">ticket type</th> <th class="col-xs-3">price (ugx)</th> <th class="col-xs-3">quantity</th> </tr> </thead> <tbody> <tr> <td> <div class="radio"> <input type="radio" value="selected" /> </div> </td> <td> <p class="form-control-static">3d</p> </td> <td> <p class="form-control-static">16000</p> </td> <td> <div class="input-group spinner"> <input type="text" class="form-control" value="1" /> <div class="input-group-btn-vertical"> <button class="btn btn-default"><i class="glyphicon glyphicon-chevron-up"></i> </button> <button class="btn btn-default"><i class="glyphicon glyphicon-chevron-down"></i> </button> </div> </div> </td> </tr> </tbody> </table> </div> <div class="col-xs-12 text-right"> <p>ps: there <strong>40</strong> ticket still available.</p> <input type="button" class="btn btn-success" value="get movie tickets" /> </div>
css:
.spinner input { text-align: right; } .input-group-btn-vertical { position: relative; white-space: nowrap; width: 2%; vertical-align: middle; display: table-cell; } .input-group-btn-vertical > .btn { display: block; float: none; width: 100%; max-width: 100%; padding: 8px; margin-left: -1px; position: relative; border-radius: 0; } .input-group-btn-vertical > .btn:first-child { border-top-right-radius: 4px; } .input-group-btn-vertical > .btn:last-child { margin-top: -2px; border-bottom-right-radius: 4px; } .input-group-btn-vertical { position: absolute; top: 0; left: 1px; }
javasript:
(function ($) { $('.spinner .btn:first-of-type').on('click', function () { $('.spinner input').val(parseint($('.spinner input').val(), 10) + 1); }); $('.spinner .btn:last-of-type').on('click', function () { $('.spinner input').val(parseint($('.spinner input').val(), 10) - 1); }); })(jquery);
p.s. used spinner link.
Comments
Post a Comment