Para trabajar mas facilmente en un documento hay que separalo por partes
Es lo que vamos hacer con nuestro documento, vamos crear dos partes, que van estar en todos los sitios que son:
- Cabecera
- Pie de pagina o footer
Como bien sabemos nos quedamos con una parte centrar que va a cambiar en cada página
Cortar o dividir el documento
En la carpeta templates creamos dos ficheros
...- header.php
- footer.php
Cortamos desde la linea row del cuerpo y todo ese fragmento de codigo lo pegamos en el fichero header.php
este es el fragmento de codigo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/bootstrap.css">
</head>
<body>
<nav class="navbar navbar-expand navbar-light bg-light">
<ul class="nav navbar-nav">
<li class="nav-item">
<a class="nav-link " href="#">FrioyElectronica</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Inicio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Libros</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Nosotros</a>
</li>
</ul>
</nav>
<div class="container">
<div class="row">
template footer
Para el footer hacemos lo mismo, cortamos los dos div antes de la etiqueta body hasta el final y la pegamos en el otro fichero que se llama footer.php
este es el fragmento de codigo:
</div>
</div>
</body>
<div class="alerta-oscura footer">
<p>Pagina creada por Frioyelectronica.blogspot.com </p>
<p>Copyright derechos reservados 2022</p>
</div>
</html>
Inclusion de los fragmentos de codigo
ahora tendremos que incluir los fragmentos de codigo, respectivamiente en el mismo sitio onde los cortamos
entonces nos vamos arriba de todo y con codigo php incluimos la cabecera
el codigo es el seguiente:
Al final de la pagina hacemos la misma inclusion
Tenemos el mismo codigo de inicio pero mas pequeno, mas simple, mas entendible
Veamos el codigo:
<?php include_once("templates/header.php") ?>
<div class="row align-items-md-stretch">
<div class="col-md-6">
<div class="h-100 p-5 text-white bg-primary border rounded-3">
<h2>Change the background</h2>
<p>Swap the background-color utility and add a `.text-*` color utility to mix up the jumbotron
look. Then,
mix and match with additional component themes and more.</p>
<button class="btn btn-outline-primary" type="button">Example button</button>
</div>
</div>
</div>
<?php include_once("templates/footer.php") ?>
0 Comentarios
Si desea contactar comigo, lo puede hacer atravez deste formulario gracias