Tutorial #23 del curso de bootStrap v3.3.1, en este tutorial veremos algunos elementos secundarios que que nos pueden ser útiles en nuestros proyectos.
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <title>Varios bs 3.3.1</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" href="css/bootstrap.css"> </head> <body> <div class="container"> <h3>Tablas</h3> <table class="table table-striped table-bordered table-hover"> <thead> <tr> <th>#</th> <th>First Name</th> <th>Last Name</th> <th>Username</th> </tr> </thead> <tbody> <tr class="success"> <td>1</td> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr class="danger"> <td>2</td> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <td>3</td> <td>Larry</td> <td>the Bird</td> <td>@twitter</td> </tr> <tr> <td>4</td> <td>Carly</td> <td>the house</td> <td>@twitter</td> </tr> <tr> <td>5</td> <td>George</td> <td>the falcon</td> <td>@twitter</td> </tr> </tbody> </table> <h3>Tablas responsivas</h3> <div class="table-responsive"> <table class="table"> <thead> <tr> <th>#</th> <th>Table heading</th> <th>Table heading</th> <th>Table heading</th> <th>Table heading</th> <th>Table heading</th> <th>Table heading</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Table cell</td> <td>Table cell</td> <td>Table cell</td> <td>Table cell</td> <td>Table cell</td> <td>Table cell</td> </tr> <tr> <td>2</td> <td>Table cell</td> <td>Table cell</td> <td>Table cell</td> <td>Table cell</td> <td>Table cell</td> <td>Table cell</td> </tr> <tr> <td>3</td> <td>Table cell</td> <td>Table cell</td> <td>Table cell</td> <td>Table cell</td> <td>Table cell</td> <td>Table cell</td> </tr> </tbody> </table> </div> <div class="row"> <h3>Imágenes</h3> <div class="col-md-4"><img src="img/ariana-grande-christmas.png" alt="..." class="img-rounded"></div> <div class="col-md-4"><img src="img/ariana-grande-christmas.png" alt="..." class="img-circle"></div> <div class="col-md-4"><img src="img/ariana-grande-christmas.png" alt="..." class="img-thumbnail"></div> </div> <h3>Texto en colores </h3> <p class="text-muted">Lorem Ipsum es simplemente el texto de relleno de las imprentas</p> <p class="text-primary">Lorem Ipsum es simplemente el texto de relleno de las imprentas</p> <p class="text-success">Lorem Ipsum es simplemente el texto de relleno de las imprentas</p> <p class="text-info">Lorem Ipsum es simplemente el texto de relleno de las imprentas</p> <p class="text-warning">Lorem Ipsum es simplemente el texto de relleno de las imprentas</p> <p class="text-danger">Lorem Ipsum es simplemente el texto de relleno de las imprentas</p> <br> <h3>Texto en colores con fondo</h3> <p class="bg-primary">Lorem Ipsum es simplemente el texto de relleno de las imprentas</p> <p class="bg-success">Lorem Ipsum es simplemente el texto de relleno de las imprentas</p> <p class="bg-info">Lorem Ipsum es simplemente el texto de relleno de las imprentas</p> <p class="bg-warning">Lorem Ipsum es simplemente el texto de relleno de las imprentas</p> <p class="bg-danger">Lorem Ipsum es simplemente el texto de relleno de las imprentas</p> <h3>Alineación</h3> <div class="row"> <div class="pull-left"><img src="img/tw.jpg" alt="..." class="img-rounded"></div> <div class="pull-right"><img src="img/tw.jpg" alt="..." class="img-rounded"></div> </div> <div class="row"> <h3>Alineación de textos</h3> <p class="text-left">Left aligned text.</p> <p class="text-center">Center aligned text.</p> <p class="text-right">Right aligned text.</p> <p class="text-justify">Justified text.</p> <p class="text-nowrap">No wrap text.</p> </div> <script src="js/jquery-1.11.1.min.js"></script> <script src="js/bootstrap.js"></script> </body> </html>