Skip to content

Astro Bootstrap 4.6 + jQuery

Cette architecture sert à produire du HTML classique avec Astro, Bootstrap v4.6 et jQuery.

Astro est responsable des pages, du layout et du build statique. Les pages sont composées avec des fichiers .astro, les styles spécifiques vont dans src/styles/custom.css, le JavaScript global va dans public/navbar.js, et le build final sort dans dist/.

Structure cible

Section titled “Structure cible”

Reprendre cette arborescence :

test-bootstrap/
  astro.config.mjs
  package.json
  public/
    favicon.ico
    favicon.svg
    navbar.js
  src/
    assets/
      astro.svg
      background.svg
    components/
      Navbar.astro
      Welcome.astro
    layouts/
      Layout.astro
    pages/
      index.astro
    styles/
      custom.css

Les rôles sont les suivants :

  1. src/pages/ contient les pages Astro finales.
  2. src/layouts/Layout.astro contient le document HTML commun.
  3. src/components/*.astro contient les blocs HTML réutilisables.
  4. src/styles/custom.css contient les styles projet qui surchargent Bootstrap.
  5. public/navbar.js contient le JavaScript global classique.
  6. src/assets/ contient les images importées par des composants Astro.
  7. public/ contient les fichiers servis tels quels à la racine du build.

Configuration Astro

Section titled “Configuration Astro”

Utiliser une sortie statique et des chemins d’assets relatifs.

astro.config.mjs
// @ts-check
import { defineConfig } from "astro/config";


export default defineConfig({
  output: "static",
  build: {
    assetsPrefix: ".",
  },
  vite: {
    build: {
      cssCodeSplit: true,
      assetsInlineLimit: 0,
    },
  },
});

Points importants :

  1. output: "static" génère des fichiers HTML dans dist/.
  2. assetsPrefix: "." aide à obtenir des liens relatifs vers les assets Astro.
  3. assetsInlineLimit: 0 évite les images inline en base64.
  4. Pas besoin de React pour cette variante.

Layout global

Section titled “Layout global”

Le layout contient tout ce qui doit être présent sur chaque page :

  1. balises HTML communes ;
  2. meta viewport ;
  3. favicons ;
  4. Bootstrap v4.6 CSS ;
  5. jQuery slim ;
  6. Bootstrap bundle ;
  7. import du CSS projet ;
  8. slot de page ;
  9. script global navbar.js.
src/layouts/Layout.astro
---
import "../styles/custom.css";
---


<!doctype html>
<html lang="fr">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <link rel="icon" type="image/svg+xml" href="./favicon.svg" />
    <link rel="icon" href="./favicon.ico" />
    <meta name="generator" content={Astro.generator} />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"
      integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N"
      crossorigin="anonymous"
    />
    <script
      src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
      integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
      crossorigin="anonymous"></script>
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct"
      crossorigin="anonymous"></script>
    <title>Astro Basics</title>
  </head>
  <body>
    <slot />
    <script is:inline src="./navbar.js"></script>
  </body>
</html>


<style>
  html,
  body {
    margin: 0;
    width: 100%;
    height: 100%;
  }
</style>

Pages

Section titled “Pages”

Une page importe le layout et assemble les composants.

src/pages/index.astro
---
import Navbar from "../components/Navbar.astro";
import Layout from "../layouts/Layout.astro";
---


<Layout>
  <Navbar />
  <main class="jumbotron jumbotron-fluid bg-primary text-white">
    <div class="container">
      <h1 class="display-4">Bienvenue !</h1>
      <p class="lead">
        Ceci est un hero simple construit avec Bootstrap 4.6 et Astro.
      </p>
      <hr class="my-4" style="border-color: rgba(255,255,255,0.3)" />
      <p class="test-text">
        Il utilise les classes utilitaires de Bootstrap pour la mise en page,
        les couleurs et la typographie.
      </p>
      <button class="btn btn-light" type="button">En savoir plus</button>
    </div>
  </main>
</Layout>

Règle pratique :

  1. une URL = un fichier dans src/pages/ ;
  2. une section réutilisable = un fichier dans src/components/ ;
  3. le layout ne connaît pas le contenu métier de la page ;
  4. la page décide quels composants afficher.

Composants .astro

Section titled “Composants .astro”

Les composants .astro sont le bon format pour du HTML classique.

src/components/Navbar.astro
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <span class="navbar-brand mb-0">Mon Site</span>
  <button
    class="navbar-toggler"
    type="button"
    aria-controls="navbarNav"
    aria-expanded="false"
    aria-label="Toggle navigation"
    id="navbar-toggle"
  >
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <button class="nav-link btn btn-link" type="button">Accueil</button>
      </li>
      <li class="nav-item">
        <button class="nav-link btn btn-link" type="button">À propos</button>
      </li>
      <li class="nav-item">
        <button class="nav-link btn btn-link" type="button">Contact</button>
      </li>
    </ul>
    <ul class="navbar-nav">
      <li class="nav-item">
        <button
          class="btn btn-outline-light btn-sm nav-link d-flex align-items-center"
          id="notif-btn"
          style="border: none; background: transparent;"
        >
          Notifications
          <span class="badge badge-danger ml-2" id="notif-count">3</span>
        </button>
      </li>
    </ul>
  </div>
</nav>

Les composants .astro peuvent aussi importer des images depuis src/assets/.

src/components/Logo.astro
---
import logo from "../assets/astro.svg";
---


<img src={logo.src} width="115" height="48" alt="Logo" />

Utiliser src/assets/ quand Astro doit traiter l’image au build. Utiliser public/ quand le fichier doit garder son nom et son chemin exact.

Styles

Section titled “Styles”

Le fichier src/styles/custom.css contient uniquement le CSS projet.

src/styles/custom.css
.test-text {
  color: burlywood;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

Ordre recommandé :

  1. Bootstrap charge d’abord les styles de base ;
  2. custom.css charge ensuite les adaptations projet ;
  3. les styles très locaux peuvent rester dans un bloc <style> du composant Astro.

JavaScript global

Section titled “JavaScript global”

Le fichier public/navbar.js contient le comportement global de la navbar.

public/navbar.js
$(document).ready(function () {
  var count = 3;


  $("#notif-btn").on("click", function () {
    count += 1;
    $("#notif-count").text(count);
  });


  $("#navbar-toggle").on("click", function () {
    var isOpen = $("#navbarNav").toggleClass("show").hasClass("show");
    $(this).attr("aria-expanded", String(isOpen));
  });
});

Conventions :

  1. garder les sélecteurs stables avec des id explicites ;
  2. ne pas mettre de logique dans les composants .astro ;
  3. centraliser les comportements globaux dans navbar.js ;
  4. renommer en navbar.js si le fichier ne gère que la navbar ;
  5. passer par Bootstrap/jQuery quand le projet doit rester compatible HTML classique.

Build et sortie

Section titled “Build et sortie”

Lancer :

Terminal window
npm run build

Sortie attendue :

dist/
  index.html
  favicon.ico
  favicon.svg
  navbar.js
  _astro/
    index@_@astro.[hash].css

Vérifier dans dist/index.html :

  1. Bootstrap CSS est chargé depuis le CDN ;
  2. jQuery est chargé avant Bootstrap bundle ;
  3. le CSS Astro pointe vers ./_astro/...;
  4. le HTML de Navbar.astro est rendu directement ;
  5. navbar.js est copié dans dist/ et chargé depuis le HTML.

Quand choisir cette variante

Section titled “Quand choisir cette variante”

Choisir Bootstrap 4.6 + jQuery + .astro si :

  1. l’intégration finale est une page HTML classique ;
  2. le back doit reprendre du HTML/CSS sans runtime React ;
  3. les interactions sont simples ;
  4. Bootstrap 4.6 est déjà imposé ;
  5. les développeurs doivent pouvoir lire et modifier le HTML directement.

Références

Section titled “Références”