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>
Copy after login 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>
Copy after login 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>
Copy after login 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>
Copy after login 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>
Copy after login 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, ,
<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>
Copy after login The above is the entire content of this article, I hope it will be helpful to everyone’s study.
Previous article：How to prevent SQL injection in JS code (super simple)_javascript skills
Next article：How to efficiently remove duplicate items from js array
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Latest Downloads
More>
|
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
