Bootstrap es un proceso de desarrollo más rápido de sitios web receptivos mediante el uso de clases escritas previamente. También hace que los sitios web sean receptivos y agrega estilos. Una de esas características es la copia del cuerpo principal. Texto principal del cuerpo se utiliza para agregar énfasis a un párrafo en una etiqueta de cuerpo. Las etiquetas de párrafo están dentro de las etiquetas de cuerpo. Esto nos da un tamaño de fuente grande y liviano y una altura de línea alta. Esta característica se puede usar usando la clase predefinida « .lead » y ver su funcionalidad.
Comprendamos la copia del cuerpo principal con la siguiente implementación paso a paso.
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=”http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css”>
<script src=”http://ajax.googleapis.com/ ajax/libs/jquery/1.11.1/jquery.min.js”></script>
<script src=”http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js” ></guión>
Paso 2 : Agregue CSS interno usando la etiqueta <style> dentro de la etiqueta <head> .
Paso 3: use .lead: :first-letter Selector en la etiqueta <style> para agregar un estilo a la primera letra del selector especificado.
Paso 4: agregue la etiqueta <div> en el cuerpo HTML con el contenedor de clase.
Paso 5: agregue la etiqueta <p> en el código HTML con la clase .lead.
Ejemplo: El siguiente ejemplo muestra el uso de la clase .lead con algunos estilos adicionales.
HTML
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<head>
<title>Bootstrap lead body copy example</title>
<link rel="stylesheet" href=
"http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<style media="screen">
.lead {
color: blue;
}
.lead::first-line {
font-size: 150%;
background-color: yellow;
color: green;
}
</style>
</head>
<body>
<div class="container">
<div class="col-md-12">
<h1><b>
<span style="color:green">
Geeks
</span>For
<span style="color:green">
Geeks
</span>
</b>
</h1>
<p class="lead">
Web development refers to the building,
creating, and maintaining of websites.
It includes aspects such as web design,
web publishing, web programming, and
database management.It is the creation
of an application that works over the
internet i.e. websites.
</p>
<hr style="height: 2px; border-width: 0;
color: gray; background-color:gray">
<p style="color:green">
Web development refers to the building,
creating, and maintaining of websites.
It includes aspects such as web design,
web publishing, web programming, and
database management.It is the creation
of an application that works over the
internet i.e. websites.
</p>
<hr style="height: 2px; border-width: 0;
color:gray; background-color:gray">
</div>
</div>
</body>
</html>
Producción:
Clase .lead con algunos estilos adicionales
Publicación traducida automáticamente
Artículo escrito por saksham894954 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA