Pregled code-a:
<!DOCTYPE HTML> <html lang="hr"> <head> <meta charset="UTF-8"> <!--[if IE]><meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'><![endif]--> <title>Bootstrap - Responsivna Hover Tablica</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="/0frameworks/css_frameworks/bootstrap-3.1.1/dist/css/bootstrap.min.css"> <style> .table-hover-custom > tbody > tr:hover > td, .table-hover-custom > tbody > tr:hover > th { background-color: Green; } body { padding: 10px; } </style> </head> <body> <div class="container"> <h3>Responsivna hover tablica <small>class="table table-hover"</small></h3> <table class="table table-hover"> <tr> <th>id</th> <th>ime i prezime</th> <th>mjesto</th> </tr> <tr> <td>1</td> <td>Pero Pertić</td> <td>Zagreb</td> </tr> <tr> <td>2</td> <td>Marko Markitić</td> <td>Rijeka</td> </tr> <tr> <td>3</td> <td>Džoko Đokić</td> <td>Beograd</td> </tr> </table> </div> <br> <br> <br> <div class="container"> <h3>Prilagođena hover tablica <small>class="table table-hover-custom"</small></h3> <table class="table table-hover-custom"> <tr> <th>id</th> <th>ime i prezime</th> <th>mjesto</th> </tr> <tr> <td>1</td> <td>Pero Pertić</td> <td>Zagreb</td> </tr> <tr> <td>2</td> <td>Marko Markitić</td> <td>Rijeka</td> </tr> <tr> <td>3</td> <td>Džoko Đokić</td> <td>Beograd</td> </tr> </table> </div> <br> <br> <br> <div class="container"> <h3>Hover tablica sa contextualnim redovima</h3> Pokazuje da za različiti kontekst je definirana različita hover boja. <table class="table table-hover"> <tr> <th>id</th> <th>class</th> <th>color</th> </tr> <tr class="success"> <td>1</td> <td>success</td> <td>green</td> </tr> <tr class="info"> <td>2</td> <td>info</td> <td>blue</td> </tr> <tr class="warning"> <td>3</td> <td>warning</td> <td>yellow</td> </tr> <tr class="danger"> <td>4</td> <td>danger</td> <td>red</td> </tr> <tr class="active"> <td>5</td> <td>active</td> <td>silver</td> </tr> </table> </div> </body> </html>
Pregled stranice:
Pogledaj stranicu
../css/bootstrap/primjeri/144table_hover.html
.