En este artículo, veremos qué framework CSS es mejor Tailwind CSS o Bootstrap. Ambos son marcos CSS ampliamente utilizados para diseñar el front-end. Vamos a entender cada uno de ellos en detalle. Ambos marcos tienen sus propios pros y contras, por lo que depende del tipo de aplicación que vaya a crear y, en consecuencia, puede elegir el mejor marco entre ambos.
Entendamos la diferencia entre ambos uno por uno.
Tailwind CSS : Tailwind CSS es básicamente un marco CSS de primera utilidad para construir rápidamente interfaces de usuario personalizadas. Es un marco CSS de bajo nivel altamente personalizable que le brinda todos los componentes básicos que necesita para crear diseños personalizados sin ningún estilo obstinado molesto que tenga que luchar para anular.
La belleza de esta cosa llamada viento de cola es que no impone especificaciones de diseño o cómo debería verse su sitio, simplemente reúne pequeños componentes para construir una interfaz de usuario que es única. Lo que Tailwind simplemente hace es tomar un archivo CSS ‘sin procesar’, procesar este archivo CSS sobre un archivo de configuración y producir una salida.
Procedimiento de uso: Podemos usar Tailwind CSS en nuestra aplicación usando el siguiente enlace CDN e incluirlo en la sección principal del archivo.
<!– Agréguelo a la sección de encabezado del archivo html –>
<link href=”https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css” rel=”stylesheet”>
Características:
- Proceso de creación de interfaz de usuario más rápido
- Es un marco CSS de utilidad primero, lo que significa que podemos usar clases de utilidad para crear diseños personalizados sin escribir CSS como en el enfoque tradicional.
- No más nombres tontos para las clases de CSS y las identificaciones.
- Líneas mínimas de código en el archivo CSS.
- Podemos personalizar los diseños para hacer los componentes.
- Hace que el sitio web sea receptivo.
ventajas:
- No más nombres tontos para las clases de CSS y las identificaciones.
- Líneas mínimas de código en el archivo CSS.
- Podemos personalizar los diseños para hacer los componentes.
- Hace que el sitio web sea receptivo.
- Realiza los cambios de la manera deseada.
- CSS es de naturaleza global y si realiza cambios en el archivo, la propiedad cambia en todos los archivos HTML vinculados a él. Pero con la ayuda de Tailwind CSS podemos usar clases de utilidad y hacer cambios locales.
Desventajas:
- Su marcado se vuelve muy detallado.
- Puede que tenga que trabajar usted mismo alrededor del marco a veces.
- Es una muleta para los desarrolladores que no conocen bien CSS.
- Se necesita tiempo para volverse productivo con él.
Ejemplo: En este ejemplo, vamos a crear un componente de tarjeta Tailwind.
índice.html
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link href= "https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"> </head> <body class="h-screen bg-gray-100"> <div class="flex flex-wrap -m-4"> <div class="p-4 sm:w-1/2 lg:w-1/3"> <div class="h-full border-2 border-gray-200 border-opacity-60 rounded-lg overflow-hidden"> <img class="lg:h-72 md:h-48 w-full object-cover object-center" src= "https://media.geeksforgeeks.org/wp-content/uploads/20210818132338/download.png" alt="blog"> <div class="p-6 hover:bg-red-700 hover:text-white transition duration-300 ease-in"> <h2 class="text-base font-medium text-indigo-300 mb-1"> 1 July 2021 </h2> <h1 class="text-2xl font-semibold mb-3"> Data Structures and Algorithms </h1> <p class="leading-relaxed mb-3"> Wishing to learn DSA but don't know where to start? Don't worry, this course is a complete package for you to learn all the concepts at your own pace. Its perfect for students and working professionals who know at least anyone coding language. </p> </div> </div> </div> </div> </body> </html>
Producción:
Tarjeta de viento de cola
Bootstrap: es una colección de herramientas gratuitas y de código abierto para crear sitios web y aplicaciones web receptivos. Es el marco HTML, CSS y JavaScript más popular para desarrollar sitios web receptivos y móviles. Hoy en día, los sitios web son perfectos para todos los navegadores (IE, Firefox y Chrome) y para todos los tamaños de pantalla (Escritorio, Tabletas, Phablets y Teléfonos). Todo gracias a los desarrolladores de Bootstrap: Mark Otto y Jacob Thornton de Twitter, aunque más tarde se declaró que era un proyecto de código abierto.
Procedimiento de uso: podemos usar Bootstrap en nuestra aplicación usando el siguiente enlace CDN e incluyéndolo en la sección principal del archivo.
<enlace href=”https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/
bootstrap.min.css” rel=”stylesheet” integridad=”sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/
Nosotros” origen cruzado =”anónimo”>
Características:
- Cualquiera puede implementar el arranque en Proyectos. Es bastante fácil de implementar.
- Fácilmente personalizable.
- Clases de utilidad receptivas.
- Componentes de Bootstrap.
- Menú desplegable de componentes.
- Plantillas de arranque.
ventajas:
- Una alianza es bastante fácil:
- Marco rápido y que ahorra tiempo:
- Refuerzo de Rejillas
- Cumplir con los conceptos básicos
- Un paquete de fundamentos de JavaScript
- El soporte es increíble
- Bootstrap es totalmente personalizable
- ágil receptivo
- Consistencia de Bootstrap
- Actualizaciones frecuentes
Desventaja:
- Algunos de los elementos faltan en Bootstrap, por lo que a veces es difícil de implementar.
- Bootstrap necesita mucha personalización de CSS para hacer buenos sitios web receptivos
- Hay un problema con la pantalla ancha extragrande.
Ejemplo: en este ejemplo, vamos a crear un componente de tarjeta Bootstrap.
HTML
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content= "width=device-width, initial-scale=1"> <link href= "https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity= "sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous"> <title>Card Bootstrap</title> </head> <body> <div class="container"> <div class="card" style="width: 18rem;"> <img class="card-img-top" src= "https://media.geeksforgeeks.org/wp-content/uploads/20210818132338/download-200x200.png"> <div class="card-body"> <p class="card-text"> 1 July 2021 </p> <h5 class="card-title"> Data Structure and Algorithm </h5> <p class="card-text"> Wishing to learn DSA but don't know where to start? Don't worry, this course is a complete package for you to learn all the concepts at your own pace. Its perfect for students and working professionals who know at least anyone coding language. </p> </div> </div> </div> <script src= "https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" integrity= "sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"> </script> </body> </html>
Producción:
tarjeta de arranque
Conclusión: ahora depende totalmente de cuál sea su proyecto, si es nuevo en CSS, ambos son una excelente opción para elegir, y si está trabajando con modos como oscuro y brillante, entonces Tailwind CSS debería ser la elección.
Publicación traducida automáticamente
Artículo escrito por GeeksforGeeks-1 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA