Bootstrap Tables and buttons

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