Foundation CSS es un marco front-end receptivo y de código abierto creado por la fundación ZURB en septiembre de 2011, que facilita el diseño de hermosos sitios web, aplicaciones y correos electrónicos receptivos que se ven increíbles y pueden ser accesibles para cualquier dispositivo. Es utilizado por muchas empresas como Facebook, eBay, Mozilla, Adobe e incluso Disney. El marco se basa en un arranque similar a SaaS. Es más sofisticado, flexible y fácilmente personalizable. También viene con CLI, por lo que es fácil de usar con paquetes de módulos. Ofrece la herramienta Fastclick.js para una renderización más rápida en dispositivos móviles.
La transformación de texto de Prototyping Utilities ayuda a manejar el caso del texto, es decir, podemos convertir el caso a minúsculas, mayúsculas y mayúsculas.
Clases de transformación de texto de la utilidad de creación de prototipos CSS de Foundation :
- text-uppercase: esta clase se utiliza para cambiar el caso del contenido a mayúsculas.
- text-lowercase: esta clase se utiliza para cambiar el caso del contenido a minúsculas.
- text-capitalize: esta clase cambia la primera letra de cada palabra, dejando el caso de otras letras como está.
Habilitación de la transformación de texto:
@include foundation-prototype-text-transformation;
Sintaxis:
<p class="text-transformation-class"> Content </p>
Ejemplo 1: En este ejemplo, mostraremos texto para demostrar el uso de texto en minúsculas.
HTML
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"> <link rel="stylesheet" href= "https://get.foundation/sites/docs/assets/css/docs.css"> </head> <body> <h1 style="color:green">GeeksforGeeks</h1> <h3>Foundation CSS Prototyping Utilities Text-Transformation</h3> <br> <h2 style="color:red"> text-lowercase</h2> <p class="text-lowercase">Geeks for geeks is a computer science portal.It helps many tech aspirants to upskill their coding skills. It also gives opportunites to secure a job via various coding events like Job-a-thon. It provides a wide range of courses that facilitates the students to enhance their skills. </p> </body> </html>
Producción:
Ejemplo 2: En este ejemplo, mostraremos texto para demostrar el uso de texto en mayúsculas.
HTML
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"> <link rel="stylesheet" href= "https://get.foundation/sites/docs/assets/css/docs.css"> </head> <body> <h1 style="color:green">GeeksforGeeks</h1> <h3>Foundation CSS Prototyping Utilities Text-Transformation</h3> <br> <h2 style="color:red"> text-uppercase</h2> <p class="text-uppercase">Geeks for geeks is a computer science portal.It helps many tech aspirants to upskill their coding skills. It also gives opportunites to secure a job via various coding events like Job-a-thon. It provides a wide range of courses that facilitates the students to enhance their skills. </p> </body> </html>
Producción:
Ejemplo 3: En este ejemplo, mostraremos texto para demostrar el uso de text-captitalize .
HTML
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"> <link rel="stylesheet" href= "https://get.foundation/sites/docs/assets/css/docs.css"> </head> <body> <h1 style="color:green">GeeksforGeeks</h1> <h3>Foundation CSS Prototyping Utilities Text-Transformation</h3> <br> <h2 style="color:red"> text-capitalize</h2> <p class="text-capitalize">Geeks for geeks is a computer science portal.It helps many tech aspirants to upskill their coding skills. It also gives opportunites to secure a job via various coding events like Job-a-thon. It provides a wide range of courses that facilitates the students to enhance their skills. </p> </body> </html>
Producción:
Referencia: https://get.foundation/sites/docs/prototyping-utilities.html#text-transformation
Publicación traducida automáticamente
Artículo escrito por nikitamehrotra99 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA