Bootstrap Introduction (iv) Table

Bootstrap Getting Started (iv) Tables <table> tags First, introduce the bootstrap CSS file, and then put the table contents in a class table <table> tag (class= "Table" Complements the padding and horizontal split lines)

<class= "table">  ... </ Table >

1. Several different styles of tables (modify <table> tag Class) 1.1 "table" normal

           <Tableclass= "Table">                <thead>                    <TR>                        <th>Biaoti</th>                        <th>Biaoti</th>                        <th>Biaoti</th>                    </TR>                </thead>                <tbody>                    <TR>                        <th>Danyuange</th>                        <th>Danyuange</th>                        <th>Danyuange</th>                    </TR>                    <TR>                        <th>Danyuange</th>                        <th>Danyuange</th>                        <th>Danyuange</th>                    </TR>                    <TR>                        <th>Danyuange</th>                        <th>Danyuange</th>                        <th>Danyuange</th>                    </TR>                </tbody>            </Table>      

Effect:

The 1.2<table> tag has a different color ("zebra") effect before changing the class to "table Table-striped" two lines:

The class in the 1.3<table> tag is changed to "table table-striped table-bordered" with the split line and border effect in the horizontal direction:

The class in the 1.4<table> tag is changed to "table table-striped table-bordered table-hover" When the mouse is over and hovering is 2. Status Class (in <tr> Tag modified Class) similar to the previous one, with Active,info,success,warning,danger, etc. to add an identity to a cell

                <Tableclass= "Table table-striped table-bordered">                    <thead>                        <TRclass= "Active">                            <th>Biaoti</th>                            <th>Biaoti</th>                            <th>Biaoti</th>                        </TR>                    </thead>                    <tbody>                        <TRclass= "Success">                            <th>Danyuange</th>                            <th>Danyuange</th>                            <th>Danyuange</th>                        </TR>                        <TRclass= "Info">                            <th>Danyuange</th>                            <th>Danyuange</th>                            <th>Danyuange</th>                        </TR>                        <TRclass= "Warning">                            <th>Danyuange</th>                            <th>Danyuange</th>                            <th>Danyuange</th>                        </TR>                        <TRclass= "Danger">                            <th>Danyuange</th>                            <th>Danyuange</th>                            <th>Danyuange</th>                        </TR>                    </tbody>                </Table>

Effect:

3. Responsive effects put content in a class table-responsive div <table> class to "table Table-condensed" when the browser becomes smaller, does not affect the table content, Instead, one more scroll bar effect is below:

Bootstrap Introduction (iv) Table