Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • 117 vistas

    Tipografia Bootstrap

    Cargado por

    Souvenirs E Ideas de Gael
    Bootstrap establece configuraciones predeterminadas para la tipografía como un tamaño de fuente de 16px, espacio entre líneas de 1.5 y fuente Helvetica Neue. Define clases para cambiar el tamaño de los encabezados h1-h6. Incluye etiquetas para resaltar texto, código y comandos de teclado. Permite aplicar colores a texto y fondo según su significado.

    Copyright:

    © All Rights Reserved
    Descargue como PDF, TXT o lea en línea desde Scribd

    Tipografia Bootstrap

    Cargado por

    Souvenirs E Ideas de Gael
    117 vistas16 páginas
    Bootstrap establece configuraciones predeterminadas para la tipografía como un tamaño de fuente de 16px, espacio entre líneas de 1.5 y fuente Helvetica Neue. Define clases para cambiar el tamaño de los encabezados h1-h6. Incluye etiquetas para resaltar texto, código y comandos de teclado. Permite aplicar colores a texto y fondo según su significado.

    Derechos de autor

    © © All Rights Reserved

    Formatos disponibles

    PDF, TXT o lea en línea desde Scribd

    ¿Le pareció útil este documento?

    ¿Este contenido es inapropiado?

    Bootstrap establece configuraciones predeterminadas para la tipografía como un tamaño de fuente de 16px, espacio entre líneas de 1.5 y fuente Helvetica Neue. Define clases para cambiar el tamaño de los encabezados h1-h6. Incluye etiquetas para resaltar texto, código y comandos de teclado. Permite aplicar colores a texto y fondo según su significado.

    Copyright:

    © All Rights Reserved
    Descargue como PDF, TXT o lea en línea desde Scribd
    Descargar como pdf o txt
    117 vistas16 páginas

    Tipografia Bootstrap

    Cargado por

    Souvenirs E Ideas de Gael
    Bootstrap establece configuraciones predeterminadas para la tipografía como un tamaño de fuente de 16px, espacio entre líneas de 1.5 y fuente Helvetica Neue. Define clases para cambiar el tamaño de los encabezados h1-h6. Incluye etiquetas para resaltar texto, código y comandos de teclado. Permite aplicar colores a texto y fondo según su significado.

    Copyright:

    © All Rights Reserved
    Descargue como PDF, TXT o lea en línea desde Scribd
    Descargar como pdf o txt
    de 16

    BOOTSTRAP. TIPOGRAFIA.

    CSS
    ELABORADO POR INST. LETICIA MENDIETA
    TIPOGRAFIA

    En primer lugar Bootstrap usa la siguiente configuración predeterminada:

     Tamaño de letra (font-size) de 16px.


     Espacio entre líneas (line-height) de 1.5.
     Fuente (font-family) es «Helvetica Neue», Helvetica, Arial, sans-serif.
     Los elementos parrafo (<p>) tienen margin-top: 0 y margin-bottom: 1rem.

    Tamaño de la fuente esta definida en rems, , el rem (o root em) es una unidad de medida relativa en este caso basada en el
    tamaño de la fuente definido en el body.
    Es decir que si nuestro body tiene un tamaño de fuente de 16px eso es lo que vale 1 rem, por tanto 2 rems valen 32px, 3
    rem valen 48px, etc…
    ENCABEZADOS

    Los encabezados disponibles en HTML son h1, h2, h3, h4, h5. y h6, y como ya sabemos se usan para titulares. En Bootstrap tiene un diseño un
    poco diferente siendo la fuente un poco más grande que para el html normal.
    En Bootstrap podemos aplicarles 4 clases a estos encabezados:
    <h1 class="display-1">Ejemplo h1 display-1</h1>
    <p>Texto del ejemplo</p>
    <h1 class="display-2">Ejemplo h1 display-2</h1>
    <p>Texto del ejemplo</p>
    <h1 class="display-3">Ejemplo h1 display-3</h1>
    <p>Texto del ejemplo</p>
    <h1 class="display-4">Ejemplo h1 display-4</h1>
    <p>Texto del ejemplo</p>
    De este modo podemos establecer un encabezado con diferentes tamaños.
    Utilizando la clase display-[número del 1 al 6] podemos hacer que cambie el tamaño de la letra, donde 1 es el más
    grande (algo mayor que el h1 normal) y 6 el más pequeño pero aun muy grande para el texto normal, por lo que es
    usual utilizar la clase display en las cabeceras html.
    OTROS ELEMENTOS

    SMALL
    En Bootstrap se usa para crear un titular más pequeño debajo del encabezado.
    <h1>SMALL <small>Prueba small</small></h1>
    MARK
    A este elemento de marcación, Bootstrap le añade un diseño tipo resaltado con rotulador.
    <p>Esto es una prueba de <mark>mark</mark>.</p>
    ABBR
    Este elemento que sirve para añadir significado a las abreviaciones Bootstrap le añade un subrayado especial para que se vea
    que esconde ese texto explicativo.
    <p><abbr title=“Servicio Nacional de Promocion Profesional">SNPP</abbr> Cursos a distancia.</p>
    OTROS ELEMENTOS

    BLOCKQUOTE
    Esta etiqueta se usa para cuando introducimos un texto copiado de otra fuente. Bootstrap añade a la etiqueta footer un diseño tipo para señalar que
    la fuente es otro.
    <blockquote>
    <p>Este es un texto de prueba.</p>
    <footer class="blockquote-footer">Fuente imacreste.com</footer>
    </blockquote>
    dl, dt, dd
    Estas etiquetas son para definir definiciones de términos. Bootstrap resalta la palabra que luego se define.
    <dl>
    <dt>Bootstrap</dt>
    <dd>- Es un FrameWork.</dd>
    </dl>
    OTROS ELEMENTOS

    code
    Esta etiqueta se usa para hacer referencia a códigos reservados. Bootstrap lo presenta con otro color.
    <p>Esto es un <code>code</code</p>

    kbd
    En HTML se usa para identificar comandos de teclado o formulas, se presentan con un color de fondo negro sobre
    letra en blanco.
    <p>esto es <kbd>kbd + Y</kbd></p>
    ETIQUETAS DE TIPOGRAFÍA

     .font-weight-bold, .font-weight-normal, .font-weight-light. Permite añadir grosor a la fuente.


     .font-italic Italica. Añade cursiva.
     .lead. Destaca el elemento con una fuente un poco más grande.
     .small. Añade una fuente más pequeña.
     .text-left, .text-center, .text-right, .text-justify. Etiquetas para alinear el texto dentro de un bloque.
    ETIQUETAS DE TIPOGRAFIA

     .text-lowercase, .text-uppercase, .text-capitalize. Estos atributos permiten hacer que el texto sea todo
    minúsculas, mayúsculas, o que todas las palabras empiecen por mayúsculas.
     .list-unstyled. Quita el list-style y margin-left en elementos de lista ul u ol.
     .list-inline. Coloca los elementos li de una lista en una línea horizontal.
    COLORES EN BOOTSTRAP

    Bootstrap viene con una serie de etiquetas que permiten añadir colores basados en el «significado de
    los colores», como por ejemplo el rojo indica peligro.
    Estos colores se pueden aplicar tanto a textos como a fondos, simplemente se necesita cambiar la etiqueta:
    text-muted (texto con apariencia de apagado), .text-primary (texto con azul tipo enlace), .text-success (Verde), .text-
    info (Azul claro), .text-warning (Amarillo), .text-danger (Rojo), .text-secondary (Gris), .text-white (Blanco), .text-dark
    (Negro) y .text-light (Muy claro, prácticamente blanco).
    Si sustituimos el text por bg (background), lo que hacemos es añadir color de fondo.

    <p class="bg-muted">bg-muted</p>
    <p class="bg-primary">bg-primary</p>
    <p class="bg-success">bg-success</p>
    <p class="bg-info">bg-info</p>
    <p class="bg-warning">bg-warning</p>
    <p class="bg-danger">bg-danger</p>
    <p class="bg-secondary">bg-secondary</p>
    <p class="bg-white">bg-white</p>
    <p class="bg-dark">bg-dark</p>
    <p class="bg-light">bg-light</p>
     https://getbootstrap.com/
     https://www.w3schools.com/bootstrap4/bootstrap_typography.asp
     http://mialtoweb.es/tipografias-en-bootstrap-4/
     https://imacreste.com/bootstrap-colores-fuentes-y-tipografias/

    FUENTES CONSULTADAS

    También podría gustarte