In this lesson, we mainly learn about Bootstrap table and button functions, which can display various rich effects through built-in CSS definitions.
one. sheet
Bootstrap provides some rich table styles for developers to use.
1. Basic format
// implement the basic table style
<tableclass="table">
Note: We can view the corresponding CSS through Firebug .
2. Striped form
// Let the lines in <tbody> produce a line-by-line plus a monochrome background effect
<tableclass="table table-striped">
Note: The table effect needs to be based on the basic format .table
3. Tables with borders
// add a border to the table
<tableclass="table table-bordered">
4. Hover the mouse
/ / Let the table under <tbody> hover the mouse to achieve the background effect
<tableclass="table table-hover">
5. Status class
// You can set the background style of each row individually
<trclass="success">
Note: There are five different styles to choose from.
style |
illustrate |
active mouseover on row or cell
success identifies success or positive action
info identifies common prompt information or actions
warning identifies a warning or requires user attention
danger indicates a dangerous or potentially negative action
6. Hide a row
// hide row
<trclass="sr-only">
7. Responsive Forms
// The parent element of the table is set to be responsive, and the border will appear when it is less than 768px
<bodyclass="table-responsive">
two. button
Bootstrap provides many rich buttons for developers to use. 1. Labels or elements that can be used as buttons // Convert to normal buttons
<ahref="###" class="btn btn-default">Link</a>
<buttonclass="btn btn-default">Button</button>
<inputtype="button" class="btn btn-default"value="input">
There are three things to note:
(1). Notes on components
Although button classes can be applied to <a> and <button> elements, the Navigation and Navigation Bar components only support
<button> element.
(2). Notes when the link is used as a button If the <a> element is used as a button -- and used to trigger certain functions on the current page -- not used for
Link to other pages or link to other parts of the current page, then be sure to set the role="button" attribute for it.
(3). Cross-browser presentation
The best practice we've come up with is: It's strongly recommended to use the <button> element whenever possible to get matching rendering across browsers.
In addition, we also discovered a bug in Firefox <30 browsers that prevented us from setting the line-height attribute for buttons created on the basis of <input> elements, which caused the failure to work on Firefox browsers. It is exactly the same height as the other buttons.
2. Predefined Styles // General Information
<buttonclass="btn btn-info">Button</button>
style |
illustrate |
btn-default default style
btn-success success style
btn-info general information style
btn-warning warning style
btn-danger dangerous style
btn-primary preference style
btn-link link style
3. Size size // size from large to small
<button class="btnbtn-lg">Button</button> <buttonclass="btn">Button</button> <button class="btnbtn-sm">Button</button> <button class="btnbtn-xs">Button</button>
4. Block-level button // block-level wrap
<button class="btnbtn-block">Button</button> <button class="btnbtn-block">Button</button>
5. Activation Status // Activation Button
<buttonclass="btn active">Button</button>
6. Disable state // Disable button
<buttonclass="btn active disabled">Button</button>