Bootstrap Tables and buttons

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.