Una de las mejores cosas de Bootstrap CSS es que viene con ejemplos de componentes en su documentación.  Pero estos ejemplos tienen fallas. Defectos de diseño.  Afortunadamente, se pueden arreglar fácilmente con un poco de conocimiento de diseño y clases de Bootstrap listas para usar.  1) Reelaborar pastillas para una sensación más cálida y suave  Los colores de las píldoras Bootstrap son duros. Puede usar la variable CSS   que viene con Bootstrap. Esto suavizará el color de fondo para crear un mejor contraste.  --bs-bg-opacity   <span class="badge rounded-pill text-primary bg-primary" style="--bs-bg-opacity: .20;">Primary</span> <span class="badge rounded-pill text-secondary bg-secondary" style="--bs-bg-opacity: .20;">Secondary</span> <span class="badge rounded-pill text-success bg-success" style="--bs-bg-opacity: .20;">Success</span> <span class="badge rounded-pill text-danger bg-danger" style="--bs-bg-opacity: .20;">Danger</span>  2) Tirar grupos de listas por la ventana  Son feos. Utilice listas HTML estándar. Incluso puede agregar SVG en lugar de viñetas de lista estándar para llamar más la atención.    <div class="card border-0 shadow p-2"> <div class="card-body"> <h3 class="fs-5">Some items we sell</h3> <ul class="" style="list-style: none; list-style-position: outside; padding-left: 0px;"> <li class="d-flex align-items-center mb-1"> <svg xmlns="http://www.w3.org/2000/svg" class="me-2 text-primary" height="16" width="16" viewBox="0 0 20 20" fill="currentColor"> <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" /> </svg> An item </li> <li class="d-flex align-items-center mb-1"> <svg xmlns="http://www.w3.org/2000/svg" class="me-2 text-primary" height="16" width="16" viewBox="0 0 20 20" fill="currentColor"> <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" /> </svg> A second item </li> <li class="d-flex align-items-center mb-1"> <svg xmlns="http://www.w3.org/2000/svg" class="me-2 text-primary" height="16" width="16" viewBox="0 0 20 20" fill="currentColor"> <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" /> </svg> A third item </li> </ul> </div> </div>  3) Dale a los menús desplegables una sombra y algo de espacio para respirar.  Agregue sombras con la clase de   a los menús desplegables. Esto le da profundidad y la apariencia de que está más cerca del usuario. Agregue un pequeño margen con   para evitar que la lista se superponga al botón.  sombra mt-2   <div class="bg-white p-4 shadow d-flex justify-content-center" style="height: 200px;"> <div class="dropdown"> <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false"> Dropdown </button> <ul class="dropdown-menu shadow mt-2" aria-labelledby="dropdownMenuButton1"> <li><a class="dropdown-item" href="#">Action</a></li> <li><a class="dropdown-item" href="#">Another action</a></li> <li><a class="dropdown-item" href="#">Something else here</a></li> </ul> </div> </div>  4) Use sombras y relleno adicional en las tarjetas  Los bordes de las tarjetas a menudo se sienten torpes. Las sombras enfatizan los elementos y dan profundidad a la página. Use la clase de   para agregar una sombra a su clase y aumente el relleno con la clase   para darle más espacio interno.  sombra p-2   <div class="card border-0 shadow p-2"> <div class="card-body"> <h5 class="card-title fs-5">Collaborate</h5> <p class="card-text"> Share your work with hundreds of like minded individuals around the world! </p> </div> </div>  5) Las tablas HTML no tienen por qué ser aburridas  Las tablas no tienen que ser una representación directa 1-1 de su base de datos. Si tiene sentido, combine columnas y oculte encabezados. Esto hace que se sienta menos como una base de datos y más como un componente de interfaz de usuario.    <div class="border-0 shadow bg-white rounded"> <h3 class="fs-5 px-3 pt-3">Users</h3> <div class="px-2 pt-2"> <table class="table table-borderless fs-6"> <tbody> <tr> <td>Mark Otto</td> <td class="text-end text-muted">@mdo</td> </tr> <tr class="bg-light rounded-4"> <td>Jacob Thornton</td> <td class="text-end text-muted">@fat</td> </tr> <tr> <td>Larry the Bird</td> <td class="text-end text-muted">@twitter</td> </tr> </tbody> </table> </div> <div class="p-3 bg-light rounded d-flex justify-content-end"> <buttons class="btn btn-link text-secondary text-decoration-none">Cancel</buttons> <buttons class="btn btn-primary">View</buttons> </div> </div>  ¿Más consejos de Bootstrap?  Si disfrutaste esto, considera ver mi nuevo proyecto:  Better Bootstrap  Allí encontrará un libro gratuito que contiene 15 consejos de diseño de Bootstrap. El libro completo saldrá a finales de este año.

5 componentes CSS esenciales de Bootstrap y cómo mejorar su diseño

About Author

COMENTARIOS

ETIQUETAS

ESTE ARTÍCULO FUE PRESENTADO EN

Related Stories

Liberando el poder de la IA. Una revisión sistemática de técnicas de vanguardia: resumen e introducción

Valhalla de Floki se une como patrocinador asociado de la gira de la India por Sri Lanka

¿Quieres ganar un concurso de redacción de HackerNoon? Esto es lo que recomiendan los ganadores del concurso #crypto-api

La guía completa para una migración exitosa a la nube: estrategias y mejores prácticas

Liberando el poder de la IA. Una revisión sistemática de técnicas de vanguardia: resumen e introducción

Valhalla de Floki se une como patrocinador asociado de la gira de la India por Sri Lanka

¿Quieres ganar un concurso de redacción de HackerNoon? Esto es lo que recomiendan los ganadores del concurso #crypto-api

La guía completa para una migración exitosa a la nube: estrategias y mejores prácticas

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps