Tipografía en Bootstrap

Posted on by Rudeus Greyrat

La tipografía es una característica de Bootstrap para diseñar y formatear el contenido del texto. Se utiliza para crear encabezados personalizados, subtítulos en línea, listas, párrafos, alinear, agregar más estilos de fuente orientados al diseño y mucho más. Bootstrap admite configuraciones globales para la pila de fuentes, encabezados y estilos de enlaces que se utilizarán en la aplicación web para cada tipo de sistema operativo y dispositivo para ofrecer la mejor interfaz de usuario.

La tipografía se puede utilizar para crear: 

  • encabezados
  • subtítulos
  • Color de fuente de texto y párrafo, tipo de fuente y alineación
  • Liza
  • Otros elementos en línea

Algunas clases y etiquetas para implementar la función de tipografía de bootstrap: 

   

  • h1 – h6: para hacer coincidir el estilo de fuente de un encabezado pero no puede usar el elemento HTML asociado.
  • text-muted : se usa para el color del texto, text-muted desvanece el texto. es decir, texto atenuado.
  • display : Se utiliza para crear mejores encabezados.
  • plomo : Se utiliza para hacer que un párrafo se destaque, es decir, visualmente mejor.
  • marca : Se utiliza para resaltar el texto.
  • small : Se utiliza para crear subtítulos secundarios.
  • inicialismo : se utiliza para representar abreviaturas en un tamaño de texto ligeramente pequeño.
  • blockquote : Se utiliza para citar contenido.
  • blockquote-footer : Son los detalles del pie de página para identificar la fuente de la cotización.
  • text-center : Se utiliza para alinear el texto al centro.
  • list-inline : se utiliza para hacer que el elemento de la lista esté en línea.
  • text-truncate : se utiliza para acortar el texto más largo truncándolo con puntos suspensivos.
  • text-uppercase : Se utiliza para convertir texto a mayúsculas.
  • text-lowercase : Se utiliza para convertir texto a minúsculas.
  • text-capitalize : Se utiliza para transformar texto a mayúscula la primera letra de cada palabra dejando las demás letras en minúsculas.
  • pre-scrollable : Hace que un elemento <pre> sea desplazable
  • dl-horizontal: alinea los elementos de términos (<dt>) y descripciones (<dd>) uno al lado del otro.
  • list-unstyled: se eliminan el estilo de lista predeterminado y el margen izquierdo de los elementos de la lista.
  • text-right : Representa texto alineado a la derecha.
  • text-left: Representa texto alineado a la izquierda.

 

Ejemplo 1 : para ilustrar las clases h1-h6 .

HTML

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
        integrity=
"sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
        crossorigin="anonymous">
    <title>
        Text-muted
    </title>
</head>
<body>
     
 
<p class="h1">h1. Bootstrap heading</p>
 
<p class="h2">h2. Bootstrap heading</p>
 
<p class="h3">h3. Bootstrap heading</p>
 
<p class="h4">h4. Bootstrap heading</p>
 
<p class="h5">h5. Bootstrap heading</p>
 
<p class="h6">h6. Bootstrap heading</p>
 
 
 
 
 
</body>
</html>

Producción:

 

 

Ejemplo 2: para ilustrar la clase silenciada por texto .

HTML

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
        integrity=
"sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
        crossorigin="anonymous">
    <title>
        Text-muted
    </title>
</head>
<body>
     
 
 
<p>GeeksforGeeks //A Normal Text.</p>
 
 
 
    <p class="text-muted">GeeksforGeeks //A Muted Text.</p>
 
 
 
</body>
</html>

Producción:

Ejemplo 3 : para ilustrar la clase de visualización .

HTML

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
        integrity=
"sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
        crossorigin="anonymous">
    <title>
        Display
    </title>
</head>
<body>
    <h3>GeeksforGeeks</h3>
    <h3 class="display-3">GeeksforGeeks</h3>
</body>
</html>

Producción:

Ejemplo 4 : para ilustrar la clase principal .

HTML

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
        integrity=
"sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
        crossorigin="anonymous">
    <title>
        Lead
    </title>
</head>
<body>
     
 
 
<p>GeeksforGeeks - Normal Paragraph</p>
 
 
 
    <p class="lead">GeeksforGeeks - Lead Paragraph</p>
 
 
 
</body>
</html>

Producción:

Ejemplo 5 : para ilustrar la etiqueta de marca .

HTML

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
        integrity=
"sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
        crossorigin="anonymous">
    <title>
        Mark
    </title>
</head>
<body>
     
 
 
<p>GeeksforGeeks - Normal</p>
 
 
 
    <mark>GeeksforGeeks - Highlighted</mark>
</body>
</html>

Producción:

Ejemplo 6 : Para ilustrar la etiqueta pequeña .

HTML

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
        integrity=
"sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
        crossorigin="anonymous">
    <title>
        Small
    </title>
</head>
<body>
    <h2 class="text-success">GeeksforGeeks
        <small>A CS Portal </small>
    </h2>
</body>
</html>

Producción:

Ejemplo 7 : para ilustrar la clase de inicialismo .

HTML

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
        integrity=
"sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
        crossorigin="anonymous">
    <title>
        Initialism
    </title>
</head>
<body>
    <abbr title="GeeksforGeeks"
        class="text-success initialism">
        GfG</abbr> is a CS portal
</body>
</html>

Producción:

Ejemplo 8 : para ilustrar la etiqueta blockquote y la clase blockquote-footer .

HTML

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
        integrity=
"sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
        crossorigin="anonymous">
    <title>
        Blockquote and Blockquote footer
    </title>
    <style>
        blockquote {
            font-size: 30px;
            color: green;
        }
    </style>
</head>
<body>
    <blockquote>GeeksforGeeks</blockquote>
    <blockquote class="blockquote-footer">
        a CS portal
    </blockquote>
</body>
</html>

Producción:

class=”alignnone size-medium wp-image-844239″/>
Ejemplo 9 : para ilustrar la clase de centro de texto .

HTML

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
        integrity=
"sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
        crossorigin="anonymous">
    <title>
        Text-Center
    </title>
    <style>
        p {
            color: green;
        }
    </style>
</head>
<body>
    <p class="display-4 text-center">GeeksforGeeks</p>
 
 
 
</body>
</html>

Producción:

Navegador compatible:

  • Google Chrome
  • Borde de Microsoft
  • Firefox
  • Ópera
  • Safari

Publicación traducida automáticamente

Artículo escrito por MayankKhare y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *