Bootstrap 4 es uno de los Marcos m s populares para el desarrollo de sitios web y aplicaciones. Proporciona una variedad de opciones para crear una p gina web de aspecto moderno con el m nimo esfuerzo. Una de las caracter sticas importantes de Bootstrap 4 es la capacidad de ajustar los tama os de fuente dentro de los componentes y clases prefabricados.
Los tama os de fuente en Bootstrap 4 se establecen utilizando **variables**. El Tama o de la fuente depende de la resoluci n de la pantalla y del dispositivo del usuario. El marco proporciona varios tama os de fuente predefinidos: 0.75 rem (75% de la base), 0.875 rem (87.5% de la base), 1rem (Tama o base), 1.125 rem (112.5% de la base) y 1.25 rem (125% de la base).
Para facilitar el uso de estos tama os de fuente, Bootstrap 4 define las clases apropiadas. Por ejemplo, la clase **.text-muted * * aplica el Tama o de fuente m s peque o 0.875 rem. Clase **.text-primary**, a su vez, tiene un Tama o de fuente de 1.25 rem. Las clases tambi n se pueden combinar con otras clases para establecer tama os de fuente solo para dispositivos espec ficos (por ejemplo, **.d-none * * para ocultar el elemento en pantallas peque as y clase**.d-sm-block * * para Mostrar en todos los dispositivos).
Por lo tanto, Bootstrap 4 ofrece una amplia variedad de tama os de fuente y personalizarlos con clases y variables listas para usar. Esto permite a los desarrolladores crear f cilmente p ginas web receptivas y elegantes con una cantidad m nima de c digo.
- Qu es Bootstrap 4?
- Configuraci n de Fuentes en Bootstrap 4
- Cambiar el Tama o de fuente
- Ajuste del peso de la fuente
- Selecci n de Esquema de fuente
- Caracter sticas de la personalizaci n de Fuentes en Bootstrap 4
Qu es Bootstrap 4?
Una de las caracter sticas principales de Bootstrap 4 es el dise o responsivo, es decir, la capacidad de adaptarse a diferentes dispositivos y pantallas, como una computadora de Escritorio, tableta o Tel fono inteligente. El marco proporciona un sistema de cuadr cula (grid system) que permite la flexibilidad de colocar elementos en una p gina y crear dise os receptivos.
Bootstrap 4 tambi n proporciona una gran cantidad de componentes prefabricados, como botones, barras de navegaci n, ventanas modales, formularios, tablas, etc. Estos componentes se pueden personalizar y dise ar f cilmente para satisfacer las necesidades del proyecto. De este modo, el desarrollo de una interfaz web se convierte en una tarea m s sencilla y r pida.
Otra caracter stica til de Bootstrap 4 son las clases para trabajar con tipograf a y Fuentes. El marco proporciona varias clases para personalizar los tama os, colores y estilos de texto, lo que permite a los desarrolladores controlar f cilmente la apariencia de los elementos de texto.
Por ltimo, Bootstrap 4 cuenta con una amplia comunidad de usuarios y desarrolladores, lo que permite el acceso a una gran cantidad de documentaci n, tutoriales y soporte. Por lo tanto, el marco es una excelente plataforma para desarrollar aplicaciones y sitios web modernos, flexibles y elegantes.
Configuraci n de Fuentes en Bootstrap 4
Bootstrap 4 ofrece varias opciones de fuente que se pueden usar para estilizar el texto. Las Fuentes en Bootstrap 4 se definen como variables y se pueden configurar en el archivo de variables de Bootstrap.
La fuente principal en Bootstrap 4 es la familia de Fuentes "Helvetica Neue", con soporte para una variedad de opciones de grosor de fuente que incluyen delgado, normal, negrita y negrita. Para usar la fuente principal, es suficiente aplicar clases a los elementos, por ejemplo .font-weight-normal para la fuente normal y .font-weight-bold para negrita.
Bootstrap 4 tambi n ofrece la fuente "Roboto", que se ha hecho popular por su legibilidad y simplicidad. La fuente "Roboto" se puede usar de la misma manera que la fuente principal.
Para cambiar el Tama o de fuente, Bootstrap 4 tambi n proporciona clases de Tama o que se pueden aplicar a un elemento. Por ejemplo, una clase .display - 1 especifica el Tama o de fuente m s grande, y la clase .lead se usa para un Tama o de texto m s grande que llama la atenci n.
Adem s, Bootstrap 4 ofrece la posibilidad de ajustar el Tama o de fuente utilizando variables. Para hacer esto, debe cambiar el valor de la variable $font-size-base en el archivo de variables Bootstrap.
Como puede ver, Bootstrap 4 proporciona un conjunto de herramientas flexible y potente para personalizar las Fuentes en aplicaciones web. Le permite elegir las Fuentes adecuadas, administrar el grosor y el Tama o de la fuente para satisfacer sus necesidades y captar la atenci n de los usuarios.
Cambiar el Tama o de fuente
En Bootstrap 4, puede cambiar f cilmente el Tama o de fuente de una p gina web. Hay varias clases que le permiten especificar el Tama o del texto:
- : el Tama o de texto m s grande
.display-2.display-3- : Tama o de fuente m s grande para t tulos
Adem s, Bootstrap 4 ofrece la posibilidad de establecer el Tama o del texto entre las clases especificadas. Por ejemplo:
- : Tama o del texto correspondiente
.h2.h3.h4.h5- : Tama o de fuente m s peque o para encabezados
.display-4
:
.h3
:Texto con Tama o de fuente cambiado
Usando estas clases de Bootstrap 4, puede ajustar f cilmente el Tama o del texto de una p gina web para que se ajuste a los requisitos de dise o correctos.
Ajuste del peso de la fuente
Bootstrap 4 proporciona varias clases para ajustar el peso de la fuente. Puede usar estas clases para cambiar la visualizaci n del texto:
font-weight-normal: esta clase se utiliza para establecer el peso normal de la fuente. Se pone a cero cualquier configuraci n de peso de fuente anterior.
font-weight-bold: esta clase agrega negrita al texto. Hace que la fuente sea m s expresiva y prominente.
font-weight-light: esta clase se utiliza para establecer el peso ligero de la fuente. El texto con esta clase se ve m s sutil y sutil.
font-weight-italic: esta clase agrega cursiva al texto. Le da al texto una inclinaci n y enfatiza su emotividad y nfasis.
Ejemplo de uso:
Este texto ser el peso normal de la fuente.
Este texto ser el peso en negrita de la fuente.
Este texto ser una fuente de peso ligero.
Este texto ser cursiva.
Selecci n de Esquema de fuente
Bootstrap 4 proporciona varios esquemas de Fuentes que puede usar para cambiar la apariencia del texto en un sitio web. Los esquemas de Fuentes de Bootstrap se definen en variables Sass, por lo que puede cambiar f cilmente el Esquema de Fuentes en su proyecto.
El Esquema de Fuentes de Bootstrap 4 incluye varios conjuntos de Fuentes, incluidas Fuentes tipogr ficas b sicas como Arial, Helvetica, Georgia y m s. Puede elegir un Esquema de fuente que se adapte a sus preferencias y al dise o de su sitio web.
Para seleccionar un Esquema de fuente, abra el archivo variables.scss en la carpeta src / scss y busque la variable $font-family-base. En esta variable, puede reemplazar los valores de las Fuentes con cualquier otra fuente que desee utilizar en su proyecto.
Adem s del conjunto b sico de Fuentes, tambi n puede ajustar los tama os de fuente para diferentes elementos, como t tulos, p rrafos, listas y otros. Para ello, abra el archivo variables.scss y busque las variables definidas para cada elemento. Cambie estas variables a los valores deseados.
Despu s de configurar el Esquema de fuente y los tama os de fuente, compile sus archivos scss en CSS y con ctelos a su archivo HTML. El sitio web utilizar el Esquema de fuente y los tama os de fuente seleccionados para Mostrar el texto.
Elegir un Esquema de fuente y ajustar los tama os de fuente en Bootstrap 4 le permite crear un dise o nico para su sitio web y lograr el aspecto Visual deseado del texto.
Caracter sticas de la personalizaci n de Fuentes en Bootstrap 4
display-2
text-danger
se utiliza para Mostrar texto rojo que indica peligro o error.
3. Configuraci n del auricular de fuente: Bootstrap 4 ofrece la conexi n de diferentes conjuntos de Fuentes, lo que le permite crear una variedad de combinaciones de Fuentes en la p gina. Para ello, se utiliza la conexi n de un archivo de estilo con Fuentes o la integraci n con un Servicio p blico como Google Fonts. Esto le permite elegir y usar la fuente que mejor se adapte al dise o del sitio.
4. Configuraci n personalizada: Adem s de las 4 clases de personalizaci n de Fuentes proporcionadas por Bootstrap, puede usar estilos personalizados para crear una apariencia nica de los elementos de texto. Para ello, puede definir sus propias clases con estilos de fuente y aplicarlas en las ubicaciones deseadas del documento.