A Form
1. Striped table
Row produces a single row and monochrome background effect
Note: The table effect needs to be based on the basic format. Table
<Tableclass= "Table table-striped"> <TR> <TD>1</TD> </TR> <TR> <TD>1</TD> </TR> <TR> <TD>1</TD> </TR> <TR> <TD>1</TD> </TR> </Table>
:
A table with borders
Add a border to a table
<Tableclass= "Table table-bordered"> <TR> <TD>1</TD> </TR> <TR> <TD>1</TD> </TR> <TR> <TD>1</TD> </TR> </Table>
4. Hover the mouse
Let the <tbody> table hover the mouse to achieve the background effect
<Tableclass= "Table Table-hover"> <TR> <TD>1</TD> </TR> <TR> <TD>1</TD> </TR> <TR> </Table>
5. Status class
You can set the background style for each row individually
Note: There are five different styles to choose from.
<Tableclass= "Table Table-hover"> <TRclass= "Active"> <TD>1</TD> </TR> <TRclass= "Success"> <TD>2</TD> </TR> <TRclass= "Info"> <TD>3</TD> </TR> <TRclass= "Warning"> <TD>4</TD> </TR> <TRclass= "Danger"> <TD>5</TD> </TR> </Table>
As follows:
6. Hide a row
Hide Rows
<class= "sr-only">
7. Responsive table
Table Parent Element set response, less than 768px appears border
<class= "table-responsive">
Two Button
1. Labels or elements that can be used as buttons
Convert to Normal button
<ahref="###"class= "Btn Btn-default">Link</a> <Buttonclass= "Btn Btn-default">Button</Button> <inputtype= "button"class= "Btn Btn-default"value= "Input">
As follows:
There are three things to note:
(1). Considerations for Components Although the button class can be applied to <a> and <button> elements, the navigation and navigation bar components only support <button> elements.
(2). Considerations when a link is used as a button if the <a> element is used as a button-and is used to trigger certain features on the current page-rather than to link other pages or links to other parts of the current page,
Then, be sure to set the Role= "button" property for it.
(3). Cross-browser presentation The best practice we summarize is that it is strongly recommended to use the <button> element as much as possible to get a matching drawing effect on each browser.
In addition, we found a bug on the Firefox <30 version of the browser that prevented us from setting the Line-height property for the button created based on the <input> element.
This results in a height that cannot be fully aligned with the other buttons on the Firefox browser.
2. Pre-defined Styles
<Buttonclass= "Btn Btn-default">1</Button> <Buttonclass= "Btn btn-success">2</Button> <Buttonclass= "Btn btn-info">3</Button> <Buttonclass= "Btn btn-warning">4</Button> <Buttonclass= "Btn Btn-danger">5</Button> <Buttonclass= "Btn btn-primary">6</Button> <Buttonclass= "Btn Btn-link">7</Button>
:
3. Size
Size from large to small
<Buttonclass= "Btn Btn-lg">Button</Button><Buttonclass= "BTN">Button</Button> <Buttonclass= "Btn btn-sm">Button</Button> <Buttonclass= "Btn Btn-xs">Button</Button>
:
4. Block-level buttons
Block-level line breaks
<class= "btn btn-block">button</ button ><class= "btn btn-block">button</ button>
As follows:
5. Activation status
Activate button
<class= "btn Active">button</button>
6. Disable status
Disable button
<class= "btn Active disabled">button</ Button>
Bootstrap Tables and buttons