El encabezado de página se usa para agregar un espacio adecuado alrededor de los encabezados de una página y agrega una línea horizontal debajo del encabezado. Esto ayuda particularmente a una página web en la que puede tener varios títulos de publicaciones y necesita una forma de agregar distinción a cada uno de ellos. Como cabecera es siempre la primera impresión del espectador. Por lo tanto, uno querría que su página tenga un encabezado atractivo en la parte superior de la página y que el encabezado se pueda resaltar fácilmente. Para este propósito, los desarrolladores web utilizan un encabezado de página que agrega espacio alrededor de los encabezados en una página y agrega una línea horizontal debajo del encabezado.
Veamos el enfoque paso a paso para la implementación.
Paso 1: Incluya Bootstrap y jQuery CDN en la etiqueta <head> antes que todas las demás hojas de estilo para cargar nuestro CSS.
<enlace rel=”hoja de estilo” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css”>
<script src=”https://ajax.googleapis.com/ ajax/libs/jquery/3.5.1/jquery.min.js”></script>
<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js” ></guión>
Paso 2: agregue la etiqueta <div> en el cuerpo HTML con el contenedor de clase.
Paso 3: para usar un encabezado de página, envuelva su encabezado en un <div> con una clase de .page-header .
<div class = "page-header"> </div>
Ejemplo 1: En este ejemplo, veremos cómo usar el encabezado de página Bootstrap con encabezado subrayado.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example</title>
<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.5.1/jquery.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">
</script>
<style>
img {
border-radius: 50%;
}
</style>
</head>
<body>
<div class="container">
<div class="page-header">
<h1 style="color: green">Example Page Header</h1>
</div>
<p>This is a paragraph</p>
<img
src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
alt="Flowers in Chania"
width="460"
height="345"/>
<p>This is another text.</p>
</div>
</body>
</html>
Producción:
espacio adecuado y una línea horizontal debajo del título
Ejemplo 2: En este ejemplo, veremos un encabezado de página con diferentes tamaños de encabezados y sin subrayado.
index.html
<!DOCTYPE html> <html lang="en"> <head> <title>Example</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.3.7/css/bootstrap.min.css"/> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> </script> </head> <body> <div class="container"> <div class="page-header"> <h1 style="color: green"> GeeksForGeeks <small> All In One</small> </h1> </div> <p>Extensive collection of questions ranging variety of topics</p> <p>All done by Experts</p> </div> </body> </html>
Producción:
espaciado adecuado sin subrayar
Publicación traducida automáticamente
Artículo escrito por saksham894954 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA