Incluir Bootstrap en un JSP
Consideremos la estructura básica de un JSP:<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
</head>
<body>
<!--Cuerpo de la página-->
</body>
</html>Modificamos la sección "head" para añadir el marco de trabajo:
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h1>La clase columna</h1>
<p>Nota: Se autodimensionan automáticamente en una fila de manera que tienen el mismo tamaño</p>
<div class="row">
<div class="col" style="background-color:lavender;">.col</div>
<div class="col" style="background-color:orange;">.col</div>
<div class="col" style="background-color:lavender;">.col</div>
<div class="col" style="background-color:orange;">.col</div>
<div class="col" style="background-color:lavender;">.col</div>
<div class="col" style="background-color:orange;">.col</div>
</div>
</div>
<div class="container-fluid">
<h2>Hoverable Dark Table</h2>
<div class="table-responsive">
<table class="table table-dark table-hover">
<thead>
<tr>
<th>Columna 1</th>
<th>Columna 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Dato 1.1</td>
<td>Dato 2.1</td>
</tr>
<tr>
<td>Dato 1.2</td>
<td>Dato 2.2</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
No hay comentarios:
Publicar un comentario