Bootstrap est un framework CSS incroyable pour ceux qui ont des difficultés avec la conception, le CSS ou qui ont besoin de créer quelque chose rapidement.  Mais les composants Bootstrap que vous copiez et collez à partir de la documentation présentent des défauts.  Ces défauts freinent vos créations !  Voici 5 conseils de conception pour corriger ces défauts et améliorer Bootstrap.  1) Attirez l'attention sur les alertes  Ajoutez des bordures sombres et des icônes svg pour attirer l'attention de l'utilisateur.    <div class="alert alert-primary rounded-0 border-0 border-start border-primary border-4" role="alert"> <p class="fs-6 mb-0 d-flex align-items-center">  <svg xmlns="http://www.w3.org/2000/svg" class="me-1" width="16" height="16" viewBox="0 0 20 20" fill="currentColor"> <path d="M11 3a1 1 0 10-2 0v1a1 1 0 102 0V3zM15.657 5.757a1 1 0 00-1.414-1.414l-.707.707a1 1 0 001.414 1.414l.707-.707zM18 10a1 1 0 01-1 1h-1a1 1 0 110-2h1a1 1 0 011 1zM5.05 6.464A1 1 0 106.464 5.05l-.707-.707a1 1 0 00-1.414 1.414l.707.707zM5 10a1 1 0 01-1 1H3a1 1 0 110-2h1a1 1 0 011 1zM8 16v-1h4v1a2 2 0 11-4 0zM12 14c.015-.34.208-.646.477-.859a4 4 0 10-4.954 0c.27.213.462.519.476.859h4.002z" /> </svg> <span>A simple primary alert—check it out!</span> </p> </div>  2) Les tables ne doivent pas nécessairement correspondre à votre base de données  Les tableaux HTML ne doivent pas nécessairement être une copie de la structure de votre base de données. Supprimez les noms de colonne, les identifiants et combinez les champs lorsque cela a du sens.    <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>  3) Les boutons secondaires n'ont pas besoin d'une couleur de fond  Donner aux actions principales une couleur d'arrière-plan et aux actions secondaires aucune couleur d'arrière-plan établira une hiérarchie d'importance.    <div class="card border-0 shadow p-2"> <div class="card-body"> <h5 class="card-title">Special offer</h5> <p class="card-text">Are you sure you want to cancel your subscription? We have a special offer if you want to stick around!</p> <buttons class="btn btn-primary">View Details</buttons> <buttons class="btn btn-link text-secondary text-decoration-none">Cancel</buttons> </div> </div>  4) Arrêtez de tout étiqueter !  Les développeurs adorent étiqueter les valeurs. Arrête ça! Affichez les informations comme s'il s'agissait d'une phrase dans un livre, et non d'une paire clé-valeur.    <div class="card border-0 shadow"> <img src="..." class="card-img-top" alt="..."> <div class="card-body"> <h1 class="card-title fs-5">Rocky Mount, MI</h1> <h2 class="card-title fs-6 text-muted fw-light">100 miles away</h2> <p class="card-text fw-light"><span class="fw-bold">$150</span> night</p> </div> </div>  5) Ombres > Bordures  Les bordures de cartes semblent souvent maladroites. Les ombres soulignent les éléments et donnent de la profondeur à la page, ce qui rend l'élément plus proche de l'utilisateur.    <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>  Plus de conseils de conception Bootstrap ??  Si cela vous a plu, pensez à consulter mon nouveau projet -  Better Bootstrap  Vous y trouverez un livre gratuit contenant plus de conseils de conception Bootstrap comme ceux de cet article.  ✌️ - Wes

Bootstrap CSS est toujours le sh * t mais nous pouvons l'améliorer

About Author

COMMENTAIRES

ÉTIQUETTES

CET ARTICLE A ÉTÉ PARU DANS

Related Stories

Le guide complet pour réussir une migration vers le cloud : stratégies et bonnes pratiques

Le modèle Bitcoin UTXO, alimentant un écosystème unique

Télégramme : le pont de Crypto Island vers le continent

Croissance des crypto-monnaies : créer des profils d'utilisateurs efficaces

Le guide complet pour réussir une migration vers le cloud : stratégies et bonnes pratiques

Le modèle Bitcoin UTXO, alimentant un écosystème unique

Télégramme : le pont de Crypto Island vers le continent

Croissance des crypto-monnaies : créer des profils d'utilisateurs efficaces

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps