Learn to use bootstarp basic controls (table, form, button)_javascript skills

Bootstrap defines simple and easy-to-use styles for us. We only need a few style specifications to complete a simple and elegant page display.
This article mainly introduces the following basic controls:
1. table
2. form
3. button

1. Table still uses

. There are the following classes to control table attributes. By default, the table style will occupy the parent container <div class="container"> <div class="row"> <div class="col-md-8 col-md-offset-2"> <table class="table table-bordered table-striped table-hover"> <tr> <th>标题一</th> <th>标题二</th> <th>标题三</th> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> </tr> </table> </div> </div> </div> Wrap any .table in .table-responsive to create a responsive table that will scroll horizontally on small screen devices (less than 768px). When the screen is 768px wider, the horizontal scrollbar disappears. 2. Form, there are several style definitions Lables and controls should be wrapped in divs of form-group type. The default form is as follows <div class="container"> <form> <div class="form-group"> <label for="exampleInputEmail1">Email address</label> <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email"> </div> <div class="form-group"> <label for="exampleInputPassword1">Password</label> <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> </div> <div class="checkbox"> <label> <input type="checkbox"> Check me out </label> </div> <button type="submit" class="btn btn-default">Submit</button> </form> </div> Inline form, Specify sr-only category for label, you can hide the label, but label must not be omitted. <div class="container"> <form class="form-inline"> <div class="form-group"> <label for="exampleInputEmail1" class="sr-only">Email address</label> <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email"> </div> <div class="form-group"> <label for="exampleInputPassword1">Password</label> <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> </div> <div class="checkbox"> <label> <input type="checkbox"> Check me out </label> </div> <button type="submit" class="btn btn-default">Submit</button> </form> </div> Horizontal form requires specifying the length of the label and label group, and adopting a grid system layout. The label is aligned to the right and the label group is aligned to the left. <div class="container"> <form class="form-horizontal"> <div class="form-group"> <label for="exampleInputEmail1" class="col-md-2 control-label">Email address</label> <div class="col-md-8"> <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email"> </div> </div> <div class="form-group" > <label for="exampleInputPassword1" class="col-md-2 control-label">Password</label> <div class="col-md-8"> <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> </div> </div> <div class="checkbox col-md-offset-2"> <label> <input type="checkbox"> Check me out </label> </div> <button type="submit" class="btn btn-default col-md-offset-2">Submit</button> </form> </div> form form validation, bootstrap3 supports custom validation of forms. Adding req uired indicates that the form is required, node.setCustomValidity can set the custom validation of the form <div class="container"> <form class="form-horizontal"> <div class="form-group"> <label for="exampleInputEmail1" class="col-md-2 control-label">Email address</label> <div class="col-md-8"> <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email" required> </div> </div> <div class="form-group"> <label for="password1" class="col-md-2 control-label">Password</label> <div class="col-md-8"> <input type="password" class="form-control" id="password1" placeholder="Password" required onchange="checkPassword()"> </div> </div> <div class="form-group"> <label for="password2" class="col-md-2 control-label" onchange="checkPassword()"> Password2</label> <div class="col-md-8"> <input type="password" class="form-control" id="password2" placeholder="Password2" required> </div> </div> <div class="checkbox col-md-offset-2"> <label> <input type="checkbox"> Check me out </label> </div> <button type="submit" class="btn btn-default col-md-offset-2">Submit</button> </form> </div> <script> function checkPassword() { var pwd1 = $("#password1").val(); var pwd2 = $("#password2").val(); if (pwd1 != pwd2) { document.getElementById("password1").setCustomValidity("两次输入的密码不一致"); } else { document.getElementById("password1").setCustomValidity(""); } } </script> 3. button style Use .btn-lg, .btn-sm, .btn-xs to get buttons of different sizes. Adding .btn-block to the button can make it fill 100% of the width of the parent node, and the button also becomes block level. (block) element, , or element adds button class. <div class="container"> <button type="button" class="btn btn-default btn-block">Default</button> <button type="button" class="btn btn-primary btn-block">Primary</button> <button type="button" class="btn btn-success">Success</button> <button type="button" class="btn btn-info">Info</button> <button type="button" class="btn btn-warning">Warning</button> <button type="button" class="btn btn-danger">Danger</button> <button type="button" class="btn btn-link">链接</button> <a class="btn btn-default" href="#" role="button">Link</a> <button class="btn btn-default" type="submit">Button</button> <input class="btn btn-default" type="button" value="Input"> <input class="btn btn-default" type="submit" value="Submit"> </div> The above is the entire content of this article, I hope it will be helpful to everyone’s study.