BOOTSTRAP-T3

Bootstrap

Tema 3Formato y estilo utilizando clasesInstructora: M.G.T.I. Ana Paulina Ciénega Pérez

EMPEZAR

Objetivo

Al finalizar el tema el/la participante utilizara las variables relacionadas al formato del texto como colores, tamaño y alineación; además de manejo de tablas y botones con sus distintas clases y variantes que se pueden utilizar fácilmente en páginas web.

Presentación del tema

En el siguiente tema conoceremos la paleta de colores de Bootstrap la cual se ha ido expandiendo hasta su última versión 5.3.0 lo cual ha permitido la personalización de diversos componentes web y texto. Se expone el manejo del texto en cuanto a su alineación, tamaño y flujo; el uso de títulos predeterminados o creación de títulos personalizados. Además del manejo de tablas y el uso de botones con las variantes de estos últimos. Para finalmente llegar a las imágenes y su configuración básica.

SUBTEMA 3.1Formato a Texto

SUBTEMA 3.2Formato a Tablas

Índice

SUBTEMA 3.3Formato a Botones

Formato a Texto

Objetivo sub-tema 3.1

Al finalizar el subtema el/la participante practicará el diseño de formularios en Bootstrap para el desarrollo de páginas web.

Sub-tema 3.1 Formato a Texto

Colores de texto y elementos

La paleta de colores de Bootstrap continuó expandiéndose y adquiriendo más matices en la versión 5.3.0. Hemos agregado nuevas variables para texto secundario y terciario y colores de fondo, además de {color}-bg-subtle, {color}-border-subtle y {color}-text-emphasis para los colores de nuestro tema. Estos nuevos colores están disponibles a través de variables Sass y CSS (pero no nuestros mapas de colores o clases de utilidad) con el objetivo expreso de facilitar la personalización en múltiples modos de colores, como claro y oscuro.

Sub-tema 3.1 Formato a Texto

Variables de Colores

Border - Borde

Warning - Advertencia

Body - Cuerpo

10

Primary - Principal

Info - Información

Secondary - Secundario

11

Success - Éxito

Tertiary - Terciario

Light - Claro

12

Danger - Peligro

Dark - Oscuro

Emphasis - Énfasis:

Sub-tema 3.1 Formato a Texto

Manejo de texto

Bootstrap prevé el uso de texto como se hace en cualquier entorno HTML, pero ha intervenido la apariencia de las etiquetas de manejo de texto para dar un diseño integral desde su uso básico. Además, pone a su disposición varias clases que nos ayudaran a su manejo.

Sub-tema 3.1 Formato a Texto

Titulos con Boostrap

Su código es:<h1>h1. Bootstrap heading</h1> <h2>h2. Bootstrap heading</h2> <h3>h3. Bootstrap heading</h3> <h4>h4. Bootstrap heading</h4> <h5>h5. Bootstrap heading</h5> <h6>h6. Bootstrap heading</h6>

Sub-tema 3.1 Formato a Texto

Titulos personalizados

Su Código es: <h3> Fancy display heading <small class="text-body-secondary">With faded secondary text</small> </h3>

Sub-tema 3.1 Formato a Texto

Elementos de texto en línea

Su código es: <p>You can use the mark tag to <mark>highlight</mark> text.</p> <p><del>This line of text is meant to be treated as deleted text.</del></p> <p><s>This line of text is meant to be treated as no longer accurate.</s></p> <p><ins>This line of text is meant to be treated as an addition to the document.</ins></p> <p><u>This line of text will render as underlined.</u></p> <p><small>This line of text is meant to be treated as fine print.</small></p> <p><strong>This line rendered as bold text.</strong></p> <p><em>This line rendered as italicized text.</em></p>

Sub-tema 3.1 Formato a Texto

Alineación de textos

Lo primero que consideraremos es la alineación de textos. Podemos utilizar clases correspondientes a las 4 alineaciones: left, right, center y justify; en combinación con los condicionamientos que Bootstrap emplea según el infijo de tamaño de pantalla: sm, md, lg, xl y xxl.

Sub-tema 3.1 Formato a Texto

Flujo de Texto

La cantidad de texto que manejamos no siempre se ajusta al tamaño de su contenedor y requerimos tomar decisiones. Mostramos 3 clases que ayudan controlar el comportamiento del texto.

Sub-tema 3.1 Formato a Texto

3.2 Formato a Tablas

Objetivo sub-tema 3.2

Al finalizar el subtema el/la participante utilizará los controles de formulario en Bootstrap para el desarrollo de páginas web.

Sub-tema 3.2 Formato a Tablas

Manejo de tablas

Agregue la clase base .table a cualquier <tabla> y luego extiéndala con nuestras clases modificadoras opcionales o estilos personalizados. No todos los estilos de tabla se heredan en Bootstrap, lo que significa que cualquier tabla anidada puede tener un estilo independiente del padre. Usando el marcado de tabla más básico, así es como se ven las tablas basadas en tablas en Bootstrap.

Clic aquí

Sub-tema 3.2 Formato a Tablas

Variantes de tablas

Utilice clases contextuales para colorear tablas, filas de tablas o celdas individuales.

Clic aquí

Sub-tema 3.2 Formato a Tablas

Bootstrap proveerá un diseño básico que integra visualmente las tablas al entorno. Esta apariencia se implementa al incluir la clase table para cada uno de los elementos <table> que usemos.

Puede ser modificada en 4 aspectos: color general, colores alternos, resaltado al paso del puntero y bordes. Cada característica debe añadir (ademas de la clase table) la palabra table más la Nueva característica unida por un guión intermedio tal como muestra este ejemplo:

Sub-tema 3.2 Formato a Tablas

Manejo de tablas

De igual manera para emplear colores predefinidos en una tabla usamos después de indicar la clase table, el prefijo table seguido de un guión más el sufijo de la apariencia deseada.

Sub-tema 3.2 Formato a Tablas

Manejo de tablas

Definir colores alternados ayudará a la lectura de los datos por parte del usuario, se usa la clase table-stripped Para que el usuario vea un resaltado al pasar el puntero por las filas de la tabla usamos table-hover. Ejemplo de tabla con resaltado y colores alternados:

Sub-tema 3.2 Formato a Tablas

3.3 Formato a Botones

Objetivo sub-tema 3.3

Al finalizar el subtema el/la participante utilizará la validación de formularios de Bootstrap para el desarrollo de páginas web.

Sub-tema 3.3 Formato a Botones

Uso de Botones

Utilice los estilos de botones personalizados de Bootstrap para acciones en formularios, cuadros de diálogo y más con soporte para múltiples tamaños, estados y más. Las indicaciones van como en otros elementos la clase btn para todo botón, más su modificación agregando enseguida el prefijo btn seguido de un guión y el sufijo de la apariencia que desea darse.

Sub-tema 3.3 Formato a Botones

Clase Base

Bootstrap tiene una clase .btn base que configura estilos básicos como relleno y alineación de contenido. De forma predeterminada, los controles .btn tienen un borde transparente y un color de fondo, y carecen de enfoque explícito y estilos de desplazamiento. Su código es: <button type="button" class="btn">Base class</button> La clase .btn está diseñada para usarse junto con nuestras variantes de botones o para servir como base para sus propios estilos personalizados.

Sub-tema 3.3 Formato a Botones

Variantes de Botones

Bootstrap incluye varias variantes de botones, cada una con su propio propósito semántico, con algunos extras agregados para mayor control.

Sub-tema 3.3 Formato a Botones

Botones de vínculos

Las clases .btn están diseñadas para usarse con el elemento <button>. Sin embargo, también puedes usar estas clases en elementos <a> o <input> (aunque algunos navegadores pueden aplicar una representación ligeramente diferente). Cuando se utilizan clases de botones en elementos <a> que se utilizan para activar la funcionalidad en la página (como contraer contenido), en lugar de vincular a nuevas páginas o secciones dentro de la página actual, a estos vínculos se les debe asignar un rol="botón" para transmitir su propósito a tecnologías de asistencia como lectores de pantalla.

Sub-tema 3.3 Formato a Botones

Botones de contorno

¿Necesitas un botón, pero no los fuertes colores de fondo que traen? Reemplace las clases modificadoras predeterminadas con las .btn-outline-* para eliminar todas las imágenes de fondo y colores en cualquier botón.

Sub-tema 3.3 Formato a Botones

Tamaños de botón

¿Te gustarían botones más grandes o pequeños? Agregue .btn-lg o .btn-sm al código

<button type="button" class="btn btn-primary btn-sm">Small button</button> <button type="button" class="btn btn-secondary btn-sm">Small button</button>

<button type="button" class="btn btn-primary btn-lg">Large button</button> <button type="button" class="btn btn-secondary btn-lg">Large button</button>

Sub-tema 3.3 Formato a Botones

Imágenes

Las imágenes en Bootstrap responden con .img-fluid. Esto se aplica al ancho máximo: 100%; y altura: automático; a la imagen para que se escale con el ancho principal.

Su código es: <img src="..." class="img-fluid" alt="...">

Sub-tema 2.3 Contenedores

Actividad de aprendizaje 4

Actividad de aprendizaje 5

Actividad 4. Uso de texto

Actividad 5. Uso de Tablas

Actividad de aprendizaje 6

Evaluación Tema 3

Actividad 5. Uso de Botones

Recapitulación

En este Tercer tema conocimos las variables relacionadas al formato de Texto, Tablas y Botones utilizadas en Bootstrap para poder mejorar de forma rápida nuestra interfaz gráfica de paginas o sistemas web. Aplicando clases de estilos que modifican color, tamaño, bordes y más.

¡Temafinalizado!

Muchas gracias...

10

Define el color de éxito.

Miniaturas de imágenes Además de nuestras utilidades de radio de borde, puedes usar .img-thumbnail para darle a una imagen una apariencia de borde redondeado de 1 px. Su codigo es: <img src="..." class="img-thumbnail" alt="...">

Su código es: <a class="btn btn-primary" href="#" role="button">Link</a> <button class="btn btn-primary" type="submit">Button</button> <input class="btn btn-primary" type="button" value="Input"> <input class="btn btn-primary" type="submit" value="Submit"> <input class="btn btn-primary" type="reset" value="Reset">

Define el color de éxito.

Define el color de peligro.

Define el color de éxito.

Define el color de éxito.

Código de la tabla

<table class=”table table-hover”>

12

Las tablas en Bootstrap presentan bordes en horizontal que pueden ser alterados ya sea agregando todo borde posible con table-bordered, o por el contrario indicar que no haya ningún borde table-borderless.

Código de la tabla

Su código es: <button type="button" class="btn btn-primary">Primary</button> <button type="button" class="btn btn-secondary">Secondary</button> <button type="button" class="btn btn-success">Success</button> <button type="button" class="btn btn-danger">Danger</button> <button type="button" class="btn btn-warning">Warning</button> <button type="button" class="btn btn-info">Info</button> <button type="button" class="btn btn-light">Light</button> <button type="button" class="btn btn-dark">Dark</button> <button type="button" class="btn btn-link">Link</button>

11

Define el color de éxito.

Define el color de éxito.

Su código es: <button type="button" class="btn btn-outline-primary">Primary</button> <button type="button" class="btn btn-outline-secondary">Secondary</button> <button type="button" class="btn btn-outline-success">Success</button> <button type="button" class="btn btn-outline-danger">Danger</button> <button type="button" class="btn btn-outline-warning">Warning</button> <button type="button" class="btn btn-outline-info">Info</button> <button type="button" class="btn btn-outline-light">Light</button> <button type="button" class="btn btn-outline-dark">Dark</button>