Cuando tenemos que citar algún contenido de una página web, podemos utilizar un panel. Colocamos la bandeja de entrada de contenido con algo de relleno alrededor. Un panel de arranque se indica con una clase de «panel».
Ejemplo: Este ejemplo describe el código básico para hacer un panel.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Panels</title>
<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>
<style>
.panel {
margin: 5px;
}
</style>
</head>
<body>
<h1 style="color:green; text-align:center;">
GeeksforGeeks
</h1>
<h2 style="text-align:center;">
Panel
</h2>
<div class="panel panel-default">
<div class="panel-body">
This is a body of bootstrap panel
</div>
</div>
</body>
</html>
Producción:
Diferentes clases de panel: Hay secciones disponibles en un panel de Bootstrap como las Tarjetas de Bootstrap . Todas las partes del cuerpo de Bootstrap Panel se describen a continuación:
- cuerpo del panel Se utiliza para definir el cuerpo de un panel.
- encabezado de panel: Se utiliza para dar encabezado a un panel.
- pie de página del panel: Se utiliza para dar clase de pie de página al panel.
- grupo de paneles: se utiliza para reunir diferentes paneles en un grupo.
panel con clases contextuales: Las clases contextuales se utilizan para colorear el panel.
- predeterminado del panel
- panel-primario
- éxito del panel
- información del panel
- panel de advertencia
- panel-peligro
Panel Heading: Se utiliza para crear un panel con encabezado.
- Ejemplo:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Panels</title>
<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>
<style>
.panel {
margin: 5px;
}
</style>
</head>
<body>
<h1 style="color:green; text-align:center;">
GeeksforGeeks
</h1>
<h2 style="text-align:center;">
Panel heading
</h2>
<div class="panel panel-default">
<div class="panel-heading">
This is a heading of bootstrap panel
</div>
<div class="panel-body">
This is a body of bootstrap panel
</div>
</div>
</body>
</html>
- Producción:
Pie de página del panel: se utiliza para agregar un pie de página en el panel.
- Ejemplo:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Panels</title>
<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>
<style>
.panel {
margin: 5px;
}
</style>
</head>
<body>
<h1 style="color:green; text-align:center;">
GeeksforGeeks
</h1>
<h2 style="text-align:center;">
Panel footer
</h2>
<div class="panel panel-default">
<div class="panel-body">
This is a body of bootstrap panel
</div>
<div class="panel-footer">
This is a footer of bootstrap panel
</div>
</div>
</body>
</html>
- Producción:
Grupos de paneles: se utiliza para reunir paneles en un grupo.
- Ejemplo:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Panels</title>
<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>
<style>
.panel {
margin: 5px;
}
</style>
</head>
<body>
<h1 style="color:green; text-align:center;">
GeeksforGeeks
</h1>
<div class="container">
<h2>Panel Group</h2>
<p>
The panel-group class clears the bottom-margin.
Try to remove the class and see what happens.
</p>
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-body">
This is bootstrap panel 1
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
This is bootstrap panel 2
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
This is bootstrap panel 3
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
This is bootstrap panel 4
</div>
</div>
</div>
</div>
</body>
</html>
- Producción
Paneles con clases contextuales: Se utilizan para resaltar el contenido del panel según diferentes situaciones de uso.
- Ejemplo:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Panels</title>
<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>
<style>
.panel {
margin: 5px;
}
</style>
</head>
<body>
<h1 style="color:green; text-align:center;">
GeeksforGeeks
</h1>
<div class="container">
<h2>Panels with Contextual Classes</h2>
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
panel-default</div>
<div class="panel-body">
Content</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">
panel-primary</div>
<div class="panel-body">
Content</div>
</div>
<div class="panel panel-success">
<div class="panel-heading">
panel-success</div>
<div class="panel-body">
Content</div>
</div>
<div class="panel panel-info">
<div class="panel-heading">
panel-info</div>
<div class="panel-body">
Content</div>
</div>
<div class="panel panel-warning">
<div class="panel-heading">
panel-warning</div>
<div class="panel-body">
Content</div>
</div>
<div class="panel panel-danger">
<div class="panel-heading">
panel-danger</div>
<div class="panel-body">
Content</div>
</div>
</div>
</div>
</body>
</html>
- Producción:
Publicación traducida automáticamente
Artículo escrito por vinaychopra92vc y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA