Un pozo de arranque es algo así como un panel de arranque con bordes redondos y relleno alrededor. Esto se utiliza para llamar la atención hacia algún contenido de la página web. La clase .well agrega un borde redondeado alrededor del elemento con un color de fondo gris y algo de relleno. Pero podemos cambiar el color del texto y el relleno con la ayuda de CSS.
Pozo básico: la clase .well se utiliza para crear pozos básicos.
- Ejemplo:
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Wells</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.1/css/bootstrap.min.css"> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"> </script> </head> <body> <div class="container"> <h1 align="center" style="color: green;"> GeeksforGeeks </h1> <h3 align="center">Bootstrap Wells</h3> <!-- By default wells are medium in size --> <div class="well"> This is a bootstrap well </div> </div> </body> </html>
- Producción:
Pozo pequeño: la clase .well-sm después de .well se usa para crear un pozo de tamaño pequeño. pozos pequeños son los siguientes:
- Ejemplo:
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Wells</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.1/css/bootstrap.min.css"> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"> </script> </head> <body> <div class="container"> <h1 align="center" style="color: green;"> GeeksforGeeks </h1> <h3 align="center">Bootstrap Wells</h3> <div class="well"> This is a bootstrap well(Default) </div> <div class="well well-sm"> This is a bootstrap well-sm </div> </div> </body> </html>
- Producción:
Pozo grande: la clase .well-lg después de .well se usa para crear un pozo de tamaño pequeño. Los pozos grandes son los siguientes:
- Ejemplo:
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Wells</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.1/css/bootstrap.min.css"> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"> </script> </head> <body> <div class="container"> <h1 align="center" style="color: green;"> GeeksforGeeks </h1> <h3 align="center">Bootstrap Wells</h3> <div class="well"> This is a bootstrap well(Default) </div> <div class="well well-lg"> This is a bootstrap well-lg </div> </div> </body> </html>
- Producción:
Navegadores compatibles:
- Google Chrome
- explorador de Internet
- Firefox
- Ópera
- Safari
Publicación traducida automáticamente
Artículo escrito por vinaychopra92vc y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA