5 composants CSS Bootstrap essentiels et comment améliorer leur conception by@thefullstackdev
484 lectures

5 composants CSS Bootstrap essentiels et comment améliorer leur conception

2022/07/20
6 min
par @thefullstackdev 484 lectures
tldt arrow
FR
Read on Terminal Reader

Trop long; Pour lire

Bootstrap CSS présente quelques défauts qui peuvent facilement être corrigés avec un peu de savoir-faire en matière de conception et des classes Bootstrap prêtes à l'emploi. Reconcevez les composants Bootstrap pour créer une sensation plus chaude et plus douce. Utilisez la variable CSS --bs-bg-opacity fournie avec Bootstrap pour adoucir la couleur d'arrière-plan afin de créer un meilleur contraste. Utilisez des listes HTML standard pour attirer davantage l'attention et utilisez des SVG au lieu de puces pour attirer davantage l'attention. Utilisez une carte border-0 shadow p-2 pour ajouter plus d'attention à la liste des éléments.

Company Mentioned

Mention Thumbnail
featured image - 5 composants CSS Bootstrap essentiels et comment améliorer leur conception
Wes | The Full Stack Dev HackerNoon profile picture

@thefullstackdev

Wes | The Full Stack Dev

Hi, I'm Wes I simplify complex topics - like...

Apprendre encore plus
LEARN MORE ABOUT @THEFULLSTACKDEV'S EXPERTISE AND PLACE ON THE INTERNET.
react to story with heart

L'une des meilleures choses à propos de Bootstrap CSS est qu'il est fourni avec des exemples de composants dans sa documentation.

Mais ces exemples ont des défauts. Défauts de conception.

Heureusement, ils peuvent facilement être corrigés avec un peu de savoir-faire en conception et des classes Bootstrap prêtes à l'emploi.

1) Retravailler les pilules pour une sensation plus chaude et plus douce

Les couleurs des pilules Bootstrap sont dures. Vous pouvez utiliser la variable CSS --bs-bg-opacity fournie avec Bootstrap. Cela adoucira la couleur de fond pour créer un meilleur contraste.

Refonte des composants Bootstrap

Refonte des composants Bootstrap

 <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) Jeter les groupes de listes par la fenêtre

Ils sont moches. Utilisez des listes HTML standard. Vous pouvez même ajouter des SVG au lieu des puces de liste standard pour attirer davantage l'attention.

Styles de liste CSS d'amorçage

Styles de liste CSS d'amorçage

 <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) Donnez aux listes déroulantes une ombre et un peu d'espace pour respirer.

Ajoutez des ombres avec la classe shadow aux listes déroulantes. Cela lui donne de la profondeur et l'apparence qu'il est plus proche de l'utilisateur. Ajoutez une petite marge avec mt-2 pour empêcher la liste de chevaucher le bouton.

Refonte de la liste déroulante Bootstrap CSS

Refonte de la liste déroulante Bootstrap CSS

 <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) Utilisez des ombres et un rembourrage supplémentaire sur les cartes

Les bordures de cartes semblent souvent maladroites. Les ombres soulignent les éléments et donnent de la profondeur à la page. Utilisez la classe shadow pour ajouter une ombre à votre classe et augmentez le rembourrage avec la classe p-2 pour lui donner un peu plus d'espacement interne.

Cartes de refonte CSS Bootstrap

Cartes de refonte CSS Bootstrap

 <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) Les tableaux HTML ne doivent pas être ennuyeux

Les tables ne doivent pas nécessairement être une représentation directe 1-1 de votre base de données. Si cela a du sens, combinez les colonnes et masquez les en-têtes. Cela le fait ressembler moins à une base de données qu'à un composant d'interface utilisateur.

Tableaux CSS d'amorçage

Tableaux CSS d'amorçage

 <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>

Plus de conseils d'amorçage ??

Si cela vous a plu, pensez à consulter mon nouveau projet - Better Bootstrap

Vous y trouverez un livre gratuit contenant 15 conseils de conception Bootstrap. Le livre complet sortira plus tard cette année.

HISTOIRES CONNEXES

L O A D I N G
. . . comments & more!
Hackernoon hq - po box 2206, edwards, colorado 81632, usa