- Introducción e instalación
- Sistema de red
- Formularios verticales, formularios horizontales, formularios en línea
- Pestañas desplegables y receptivas
- Barra de progreso y Jumbotron
Después del artículo anterior , uno debe estar familiarizado con el Sistema Grid de Bootstrap. Ahora, aprenderemos a crear botones, los nuevos Glyphicons y Tables. Empecemos.
Hermosos botones:
Podemos hacer Botones en Bootstrap de dos maneras (o más específicamente, usando dos etiquetas). Primero, con la etiqueta <a> y segundo usando la etiqueta <button>.
<a href="https://www.geeksforgeeks.org"class="btn btn-danger"> Button with'a'tag </a> <button type="button" class="btn btn-info" >Button with 'button' tag </button>
Podemos tener Botones en diferentes colores usando Bootstrap. Cada uno tiene un nombre específico como btn-default, btn-primary, btn-success, btn-info, btn-warning, btn-danger y btn-link. Todos ellos representan un color específico del botón.
También podemos hacer botones de diferentes tamaños (utilizando los atributos btn-lg, btn-sm, btn-xs y btn-block)
- <a href=” “>Botón con <a> etiqueta </a>
Ejemplo:
Bloque de código
Producción:
- Magníficos glificones:
Glyphicons es una biblioteca de iconos y símbolos monocromáticos preparados con precisión, creados con énfasis en la simplicidad y la fácil orientación. Podemos usar Glyphicons dentro de la etiqueta span de esta manera:
<span class="Name of the glyphicon"> </span>
Los glifos también se pueden usar dentro de botones como este:
<a href="" class="btn btn-default"><span class="Name of the glyphicon"> </span> </a>
Uno puede ver todos los glyphicons disponibles en http://getbootstrap.com/components de forma gratuita. Puede copiar sus nombres y pegarlos dentro de la clase de comillas = «Pegar aquí». Si necesita glyphicons más específicos, puede visitar http://glyphicons.com/ y comprarlos.
Ejemplo:
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"> </script> </head> <body> <div class="container" style="color:green"> <h1>GeeksforGeeks</h1> </div> <div class="container"> <p>Correct <span class="glyphicon glyphicon-ok"></span> </p> <p>Incorrect <span class="glyphicon glyphicon-remove"></span> </p> <h4>Glyphicon with buttons</h4> <a href="https://www.geeksforgeeks.org" class="btn btn-primary"> <span class="glyphicon glyphicon-backward"></span> </a> <a href="https://www.geeksforgeeks.org" class="btn btn-danger"> <span class="glyphicon glyphicon-pause"></span> </a> <a href="https://www.geeksforgeeks.org" class="btn btn-success"> <span class="glyphicon glyphicon-play"></span> </a> <a href="https://www.geeksforgeeks.org" class="btn btn-primary"> <span class="glyphicon glyphicon-forward"></span> </a> </div> <br> <div class="container"> <a href="https://www.geeksforgeeks.org" class="btn btn-primary"> <span class="glyphicon glyphicon-thumbs-up"></span> Like Button </a> </div> </body> </html>
Producción:
- Mesas tentadoras:
Para crear tablas, necesitamos la etiqueta <table> dentro de la cual usamos la etiqueta <tr> para definir cada fila y la etiqueta <td>/<th> para representar la celda de datos real. En la etiqueta de la tabla, podemos agregar diferentes clases atribuidas a ellos que pueden hacer que nuestra tabla se vea mejor. Algunas de las clases de tablas serían table-striped, table-borded, table-hover, table-condensed, etc. Puede encontrar todas las clases de tablas aquí . La estructura básica de la tabla es:
<table class="table-striped">
<tr>
<td>First Column</td>
<td>Second Column</td>
<td>Third Column</td>
</tr>
</table>
También puede agregar diferentes colores a cada fila de la tabla usando el color en la etiqueta <tr> como <tr class=”danger”> </tr> De manera similar, también puede agregar colores a cada celda al incluir la clase de colores en la etiqueta <td>.
Ejemplo:
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"> </script> </head> <body> <div class="container" style="color:green"> <h1>GeeksforGeeks</h1> </div> <div class="container"> <h4>Tables using Bootstrap</h4> <hr> <hr> <div class="container"> <div class="bg bg-success"> <table class="table table-hover"> <tr class="danger"> <td>First Column</td> <td>Second Column</td> <td>Third Column</td> </tr> <tr class="info"> <td>Python</td> <td>Java</td> <td>Swift</td> </tr> <tr class="danger"> <td>HTML</td> <td>CSS</td> <td>JavaScript</td> </tr> <tr class="info"> <td>MySql</td> <td>MongoDB</td> <td>SQL lit</td> </tr> </table> </div> </div> </div> </body> </html>
Producción:
Navegadores compatibles:
- Google Chrome
- Borde de Microsoft
- Firefox
- Ópera
- Safari
Publicación traducida automáticamente
Artículo escrito por GeeksforGeeks-1 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA