EniunEniunEniunEniun
  • Inicio
  • Servicios
    • Desarrollo Web
    • Diseño Web
    • Marketing Digital
    • Social Media
    • Experiencia de usuario
  • Nosotros
  • Diseño de Interfaces Web
  • Blog
  • Contacto
✕
            No results See all results
            bootstrap columnas rejillas
            Sistema de columnas y contenedores o rejillas de Bootstrap 4
            05/12/2019
            Tablas Bootstrap
            Tablas en Bootstrap 4
            06/12/2019

            Texto, tipografía y colores en Bootstrap 4

            texto tipografia Bootstrap

            Tabla de contenidos

            • 1. Configuración predeterminada de Bootstrap 4
            • 2. Estilos de los encabezados <h1> – <h6>
            • 3. Clase display-x
            • 4. Clases h1, h2, h3…
            • 5. Etiqueta <small>
            • 6. Etiqueta <mark>
            • 7. Etiqueta <abbr>
            • 8. Etiqueta <blockquote>
            • 9. Más clases para tipografías
            • 10. Etiquetas HTML y su estilo predefinido
            • 11. Colores de texto y fondo
              • 11.1. Colores de texto
              • 11.2. Colores de fondo

            1. Configuración predeterminada de Bootstrap 4

            Consideraciones a tener en cuenta sobre los estilos de los textos:

            • Bootstrap 4 define por defecto un font-size de 16px y un line-height de 1.5 rem.
            • Dispone de una font-family predeterminada de tipo «Helvetica Neue», Helvetica, Arial, sans-serif.
            • Además, las etiquetas <p> tienen margin-top: 0 y margin-bottom: 1rem (16px por defecto).
            Si el font-size se define con 16px, 1rem sería igual a 16px en cualquier parte del documento.

            2. Estilos de los encabezados <h1> – <h6>

            Los encabezados <h1> – <h6> disponen de estilos predefinidos:

            • h1 Bootstrap (2.5rem = 40px)
            • h2 Bootstrap (2rem = 32px)
            • h3 Bootstrap (1.75rem = 28px)
            • h4 Bootstrap (1.5rem = 24px)
            • h5 Bootstrap (1.25rem = 20px)
            • h6 Bootstrap (1rem = 16px)
            Cuando trabajamos con Bootstrap lo ideal es utilizar sus propias clases y recursos, en lugar de duplicar estilos o crear nuevos.

            3. Clase display-x

            Bootstrap nos ofrece diferentes clases para crear encabezados de mayor tamaño. Hay cuatro clases:

            .display-1 , .display-2 , .display-3 , .display-4

            Ejemplo:

            <h1 class="display-1">Encabezado Display-1</h1>

            4. Clases h1, h2, h3…

            Bootstrap nos ofrece diferentes clases para crear encabezados con los mismos estilos que otros encabezados h1, h2, h3…

            .h1 , .h2 , .h3 , .h4…

            Ejemplo:

            <h1 class="h2">Encabezado h1 con estilo h2</h1>

            5. Etiqueta <small>

            Gracias a la etiqueta <small> podemos crear un texto secundario más claro en cualquier encabezado:

            Ejemplo:

            <h1>h1 Encabezado <small>texto secundario</small></h1>

            6. Etiqueta <mark>

            La etiqueta <mark> es representada con un color de fondo amarillo y algo de relleno:

            Ejemplo:

            <p>Párrafo con <mark>etiqueta de marcado</mark> en un texto.</p>

            7. Etiqueta <abbr>

            La etiqueta <abbr> es representada mediante un borde inferior punteado:

            Ejemplo:

            <p>Esto es una etiqueta <abbr title="La etiqueta abbr se representa con un borde inferior punteado">abbr</abbr> en Bootstrap.</p>

            8. Etiqueta <blockquote>

            Agregando la clase .blockquote a <blockquote> obtenemos un estilo personalizado.

            Ejemplo:

            <blockquote class="blockquote">
              <p>Un buen desarrollador de software trabaja con disciplina y constancia desde el primer día.</p> 
              <footer class="blockquote-footer">Omar Bradley</footer> 
            </blockquote>

            9. Más clases para tipografías

            Las siguientes clases de Bootstrap 4 se pueden agregar a los elementos HTML de estilo:

            • .font-weight-bold Negrita
            • .font-weight-normal Normal
            • .font-weight-light Fina
            • .font-italic Itálica
            • .lead Destaca un párrafo
            • .small Más pequeño (85% del tamaño del padre)
            • .text-left Alineado izquierda
            • .text-center Alineado centro
            • .text-right Alineado derecha
            • .text-justify Justificado
            • .text-nowrap Texto nowrap
            • .text-lowercase Texto en minúsculas
            • .text-uppercase Texto en mayúsculas.text-capitalize Texto capitalizado
            • .initialism Muestra el texto en un elemento <abbr> con tamaño más pequeño
            • .list-unstyled Quita el list-style y margin-left en elementos de lista (funciona en <ul> y <ol> ). 
            • .list-inline Coloca todos los elementos de una lista en una única línea.

            10. Etiquetas HTML y su estilo predefinido

            Casi todas las etiquetas HTML5 tienen su estilo predefinido en Bootstrap. Puedes hacer la prueba incluyendo algunas de las etiquetas de contenido, formularios o tablas y viendo su resultado.


            Ejemplo

            default

            11. Colores de texto y fondo

            11.1. Colores de texto

            Las clases para los colores del texto son: .text-primary, .text-secondary, .text-muted, .text-success, .text-danger, .text-warning, .text-info, .text-white, .text-dark y .text-light.

            Las clases anteriores también se pueden usar en enlaces y tendrán un color más oscuro al hacer :hover con el ratón.


            Ejemplo

            default

            11.2. Colores de fondo

            Las clases de colores de fondo son: .bg-primary , .bg-success , .bg-info , .bg-warning , .bg-danger , .bg-secondary , .bg-dark y .bg-light .

            Cuando utilizamos los colores de fondo es muy usual combinarlo junto con las clases de los colores de texto para configurar un buen contraste entre ellos.


            Ejemplo

            default

            Comprueba tu aprendizaje

            ¿Qué clase de Bootstrap sirve para alinear un párrafo de texto en el centro?

            ¡Bien! ¡Has fallado!

            Indica las afirmaciones verdaderas del uso de las clases .display-1, display-2, display-3....

            ¡Bien! ¡Has fallado!

            Compartir

            UD7. Plantillas y frameworks de diseño

            • 1. Frameworks de diseño web
            • 2. Cómo descargar e instalar Bootstrap
            • 3. Sistema de columnas y contenedores Bootstrap
            • 4. Texto, tipografía y colores en Bootstrap
            • 5. Tablas en Bootstrap
            • 6. Imágenes en Bootstrap
            • 7. Botones en Bootstrap
            • 8. Componentes de Bootstrap
            • 9. Plantillas y temas gratis para Bootstrap
            • 10. Referencias y recursos

            Unidades

            • UD1. Planificación de interfaces gráficas
            • UD2. HTML
            • UD3. CSS básico
            • UD4. CSS avanzado
            • UD5. Imágenes, licencias y software de gestión
            • UD6. Sonido, vídeo y animaciones
            • UD7. Plantillas y frameworks de desarrollo
            • UD8. Integración de contenido interactivo
            • UD9. Diseño de webs accesibles
            • UD10. Usabilidad web
            • Metodología Scrum

            ENLACES

            • Nosotros
            • Contacto
            • Mapa del sitio
            • Blog

            CodePen

            codepen

            CURSOS

            • Diseño de Interfaces Web

            REDES SOCIALES

            NUESTRA MISIÓN

            Queremos que consigas tus objetivos y que tu proyecto llegue a todo el mundo de la manera más óptima. Tu éxito es nuestro deseo y pondremos en práctica toda nuestra experiencia para que lo consigas.

            Únete y recibe gratis contenido exclusivo



              © 2022 Eniun Diseño Web y Marketing Digital
              Política de privacidad y cookies
                          No results See all results