Comment créer une carte en bootstrap

Pour créer une carte bootstrap, vous devez utiliser des conteneurs de classe de cartes et des éléments enfants. 1. La structure de base comprend des images, des titres, des textes et des boutons; 2. Vous pouvez ajouter. CARTE-HEDER ET .CARD-FOOTER pour réaliser la tête et le bas; 3. Utiliser .List-group pour créer des cartes de groupe de liste; 4. Utiliser .Card-IMG-Orlay pour réaliser des effets de texte de superposition d'image; 5. Utiliser des classes pratiques telles que .W-100, .Shadow et .Bg- pour l'optimisation du style; 6. La disposition multi-cartes peut être combinée avec .Row-Col- pour obtenir des grilles réactives; 7. Assurez-vous que les fichiers CSS de Bootstrap 5 sont introduits pour garantir des fonctions normales et que les composants de la carte sont flexibles et adaptés à divers appareils.

La création d'une carte dans Bootstrap est simple et flexible, grâce au composant de carte intégré de Bootstrap. Les cartes sont utilisées pour regrouper le contenu associé comme des images, du texte et des liens dans un conteneur propre et bordé. Voici comment créer une carte de base à l'aide de Bootstrap 5.

Structure de la carte bootstrap de base

Une carte est construite à l'aide de la classe .card comme conteneur et des éléments enfants en option pour le contenu. Voici un exemple minimum:

 <div class = "card" style = "width: 18rem;">
  <img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/175702316553312.jpeg"  class="lazy"  src = "image.jpg" class = "card-img-top" alt = "card image">
  <div class = "card-body">
    <h5 class = "card-title"> Titre de la carte </h5>
    <p class = "card-text"> un exemple de texte rapide à construire sur le titre de la carte. </p>
    <a href = "#" class = "btn btn-primary"> Allez quelque part </a>
  </div>
</div>

Composants et options clés

Vous pouvez personnaliser votre carte à l'aide de diverses classes bootstrap:

• Carte avec en-tête et pied de page

   <div class = "card">
    <div class = "card-header">
      En vedette
    </div>
    <div class = "card-body">
      <h5 class = "card-title"> titre spécial </h5>
      <p class = "card-text"> avec le texte de support ci-dessous. </p>
      <a href = "#" class = "btn btn-primary"> bouton </a>
    </div>
    <div class = "Card-Footer Text-Muted">
      Mise à jour récemment
    </div>
  </div>

• Carte avec des groupes de liste

  

   <div class = "card" style = "width: 18rem;">
    <ul class = "list-group list-group-flush">
      <li class = "list-group-item"> cras juste odio </li>
      <li class = "list-group-item"> dapibus ac facilisis </li>
      <li class = "list-group-item"> vestibulum à eros </li>
    </ul>
  </div>

• Carte avec superposition (légende d'image)

   <div class = "card bg-dark text-blanc">
    <img src = "image.jpg" class = "card-img" alt = "...">
    <div class = "card-img-overlay">
      <h5 class = "card-title"> Titre de la carte </h5>
      <p class = "card-text"> Le texte de superposition va ici. </p>
    </div>
  </div>

Conseils pour le style et la mise en page

• Utilisez des cours d'utilité comme w-100 ou mx-auto pour un dimensionnement réactif.
• Combinez des cartes dans une disposition .row et .col-* pour les grilles de cartes.
• Utilisez des classes contextuelles comme .bg-primary , .text-white pour styliser les arrière-plans et le texte.
• Ajoutez des ombres avec .shadow-sm , .shadow ou .shadow-lg pour la profondeur.

Pour plusieurs cartes, enveloppez-les dans un conteneur flex ou grille:

 <div class = "row">
  <div class = "col-md-4">
    <div class = "card">
      <! - Contenu de la carte ->
    </div>
  </div>
  <div class = "col-md-4">
    <div class = "card">
      <! - Contenu de la carte ->
    </div>
  </div>
  <div class = "col-md-4">
    <div class = "card">
      <! - Contenu de la carte ->
    </div>
  </div>
</div>

Assurez-vous que Bootstrap CSS est inclus dans votre fichier HTML:

 <link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel = "Stylesheet">

C'est ça. Les cartes sont très réutilisables et fonctionnent bien entre les appareils. Structurez simplement votre contenu et appliquez les bonnes classes.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!