Comment créer une chronologie dans Bootstrap

Pour créer une chronologie bootstrap, vous devez utiliser la grille de bootstrap et la disposition des cartes pour coopérer avec l'implémentation CSS personnalisée. 1. Utilisez .Row et .Col-MD-6 pour disposer les points de temps alternatifs à gauche et à droite et à contrôler l'ordre d'affichage du grand écran via l'ordre-MD-2; 2. Utilisez le :: avant le pseudo-élément pour ajouter des lignes verticales au centre du conteneur et ajouter des points de marquage circulaires à chaque carte; 3. Ajustez le style mobile via la requête multimédia, alignez le contenu qui est gauche et repositionnez la marque de chronologie pour assurer une adaptation réactive et réaliser finalement une chronologie verticale réactive esthétique construite sans JavaScript et uniquement HTML et CSS.

La création d'une chronologie dans Bootstrap ne nécessite aucun composant bootstrap intégré appelé "Timeline" - vous aurez besoin de le construire en utilisant des classes bootstrap standard et un peu de CSS personnalisés. Voici comment créer une chronologie verticale propre et réactive à l'aide de Bootstrap 5.

1. Utilisez la grille de bootstrap et les cartes pour la structure

Le moyen le plus simple est d'utiliser le système de grille de bootstrap ainsi que les cartes et les services publics flexibles. Vous pouvez alterner des entrées de chronologie à gauche et à droite sur de grands écrans et les empiler sur mobile.

 <div class = "conteneur my-5">
  <div class = "row">
    <! - Élément de chronologie ->
    <div class = "col-md-6">
      <div class = "Card MB-4">
        <div class = "card-body">
          <h5 class = "card-title"> Titre de l&#39;événement 1 </h5>
          <p class = "card-text"> Il s&#39;agit d&#39;une description du premier événement dans la chronologie. </p>
          <small class = "Text-Muted"> janvier 2023 </small>
        </div>
      </div>
    </div>
    <div class = "col-md-6 text-start text-md-end">
      <small class = "Text-Muted"> Étape 1 </small>
    </div>

    <! - Élément de chronologie ->
    <div class = "col-md-6 order-md-2">
      <div class = "Card MB-4">
        <div class = "card-body">
          <h5 class = "card-title"> Titre de l&#39;événement 2 </h5>
          <p class = "card-text"> Il s&#39;agit du deuxième jalon de la chronologie. </p>
          <small class = "Text-Muted"> mars 2023 </small>
        </div>
      </div>
    </div>
    <div class = "Col-MD-6 Order-MD-1-Start">
      <small class = "Text-Muted"> Étape 2 </small>
    </div>

    <! - Ajoutez plus d&#39;éléments au besoin ->
  </div>
</div>

2. Ajouter une ligne de chronologie centrale avec CSS

Pour le faire ressembler à une véritable chronologie, ajoutez une ligne verticale dans le centre à l'aide de CSS personnalisés.

 <style>
  .rangée {
    Position: relative;
  }

  .row :: avant {
    contenu: &#39;&#39;;
    Position: absolue;
    en haut: 0;
    en bas: 0;
    Gauche: 50%;
    Largeur: 2px;
    Color d&#39;arrière-plan: # DEE2E6;
    Transform: Translatex (-50%);
  }

  @media (max-large: 767.98px) {
    .row :: avant {
      Gauche: 25px;
    }
  }

  .Col-MD-6: Nth-Child (Odd) .Card,
  .Col-md-6: nth-child (pair) .card {
    Position: relative;
    marge-gauche: 25px;
  }

  .Col-MD-6: Nth-Child (Odd) .Card :: avant,
  .col-md-6: nth-child (même) .card :: avant {
    contenu: &#39;&#39;;
    Position: absolue;
    Largeur: 16px;
    hauteur: 16px;
    Border-Radius: 50%;
    Background-Color: # 0D6EFD;
    Gauche: -35px;
    En haut: 30px;
    Border: 3px solide #ffff;
    Box-shadow: 0 0 0 2px # DEE2E6;
  }

  @media (max-large: 767.98px) {
    .Col-MD-6: Nth-Child (Odd) .Card :: avant,
    .col-md-6: nth-child (même) .card :: avant {
      gauche: -29px;
    }
  }
</ style>

3. Rendez-le réactif

Sur mobile, vous voudrez peut-être empiler tous les événements à gauche et ajuster la position du marqueur de la chronologie.

• Utilisez les classes order-md-* pour contrôler l'ordre de mise en page.
• Masquer ou repositionner les étiquettes à l'aide d-md-none ou d-none d-md-block .
• Ajustez la ligne de chronologie et les balles pour les écrans plus petits.

Conseils clés

• Utilisez les utilitaires d'espacement de bootstrap ( my-4 , ms-3 , etc.) pour affiner les marges.
• Ajoutez des icônes (via des icônes bootstrap ou de la police impressionnante) à l'intérieur des marqueurs de la chronologie pour de meilleurs visuels.
• Enveloppez la chronologie dans un récipient défilable s'il devient trop long.

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

Vous n'avez pas besoin de JavaScript - juste HTML, des classes bootstrap et un petit CSS.

Fondamentalement, il s'agit de combiner les outils de mise en page de Bootstrap avec un style créatif pour simuler une chronologie. Ce n'est pas complexe, mais de petits détails comme l'alignement, le comportement réactif et les marqueurs visuels le rendent efficace.

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!