Scribd
Upload
26 views

6bootstrap: Doctype HTML Head Title Title Link

The document demonstrates using Bootstrap for page layout and formatting. It includes 3 examples: 1) Summing two numbers in JSP, 2) Creating a single-column layout, and 3) Separating styles into an external CSS file. The examples show including Bootstrap CSS, adding columns, styling columns with colors and heights, and linking an external CSS file.

Uploaded by

Rosa America Cobeñas Sanchez
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
26 views

6bootstrap: Doctype HTML Head Title Title Link

The document demonstrates using Bootstrap for page layout and formatting. It includes 3 examples: 1) Summing two numbers in JSP, 2) Creating a single-column layout, and 3) Separating styles into an external CSS file. The examples show including Bootstrap CSS, adding columns, styling columns with colors and heights, and linking an external CSS file.

Uploaded by

Rosa America Cobeñas Sanchez
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 4

6Bootstrap

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"


pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
<head>
<title>Insert title here</title>
<link

href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet" />
</head>
<body>
<div align="left">
<img width="20%" height="30%" src="images/upnorte_nuevo_logo.jpg"
alt="Italian Trulli">
</div>
<h3 class="h3" align="center">HTML &amp; CSS -UPN</h3>
<div align="center">
<h4 class="h4" align="center">Suma de 2 números en JSP</h4>
<form action="suma.jsp" method="POST">
<table>
<tr>
<td class="text-muted">Ingrese número 1 :</td>
<td><input type="text" name="numero1"
required="required"
class="form-control"></td>
</tr>
<tr>
<td class="text-muted">Ingrese número 2 :</td>
<td><input type="text" name="numero2"
required="required"
class="form-control"></td>
</tr>
<tr>
<td><input type="submit" name="enviar"
value="Sumar"
class="btn btn-danger"></td>
</tr>
</table>
<div>
<h4 class="h4" align="center">Respuesta:</h4>
<%
if (request.getParameter("enviar") != null) {
int num1 =
Integer.parseInt(request.getParameter("numero1"));
int num2 =
Integer.parseInt(request.getParameter("numero2"));
int suma = num1 + num2;
out.print("La suma es : " + suma);
}
%>
</div>
</form>
</div>
</body>
</html>
Maquetado Bootstrap uno solo

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">

</head>
<body>

<div class="container">
<div class="row" style="height: 140px">
<div class="col" style="background-color: green;">One of two
columns</div>
</div>
<div class="row align-items-start" >
<div class="col" style="background-color: red;height: 340px">One
of two
columns</div>
<div class="col" style="background-color: yellow;height:
340px">One of two
columns</div>
</div>
<div class="row" >
<div class="col" style="background-color: blue;height: 100px">One
of two
columns</div>
</div>
</div>
</body>
</html>
Bootstrap 2 archivois

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<link

href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">
<link rel="stylesheet" href="resources/css.css" type="text/css" />
</head>
<body>

<div class="container">
<div class="uno row">
<div class="col">One of two columns</div>
</div>
<div class="row align-items-start">
<div class="dos col">One
of two columns</div>
<div class="cuatro col">One
of two columns</div>
</div>
<div class="row tres">
<div class="col">One
of two columns</div>
</div>
</div>
</body>
</html>

.uno{
background-color: green;
height: 140px
}
.dos{
background-color: red;
height: 340px
}
.tres{
background-color: blue;
height: 100px
}
.cuatro{
background-color: pink;
height: 340px
}

You might also like