Bootstrap-Support über CDN

Erste Schritte: Bootstrap-Support über CDN

Viele moderne Webanwendungen setzen auf das Bootstrap-Framework,
um das Layout und Design von Webseiten schnell und einheitlich zu gestalten.
Das phpFK – PHP Framework bringt eine saubere MVC-Architektur mit,
in die du problemlos Bootstrap integrieren kannst – unter anderem ganz einfach
über ein Content Delivery Network (CDN).

Warum Bootstrap via CDN?

Wenn du nicht die gesamte Bootstrap-Bibliothek lokal in dein Projekt kopieren möchtest,
kannst du Bootstrap via CDN einbinden. Dadurch werden die CSS- und JavaScript-Dateien
von schnellen, weltweit verteilten Servern geladen. Das hat einige Vorteile:

  • Performance: Viele Nutzer haben ggf. die CDN-Version schon im Browser-Cache.
  • Einfache Aktualisierung: Du änderst einfach den Versionsstring im Link.
  • Kein zusätzlicher Speicherplatz: Auf deinem eigenen Webspace musst du keine
    CSS/JS-Dateien hinterlegen.

Öffentliche Dateien in phpFK

Das phpFK – PHP Framework legt alle öffentlichen (sichtbaren) Dateien in public/ ab,
z. B. index.php. Dort kannst du auch eigene statische Assets (CSS/JS) einbinden.
Für den Bootstrap-CDN empfiehlt sich, einen Link und ein Script Tag
im <head> oder kurz vor </body> zu setzen.

Grundstruktur in public/index.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Meine phpFK App</title>

    <!-- Bootstrap CSS (CDN) -->
    <link 
        rel="stylesheet" 
        href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" 
        integrity="sha384-..." 
        crossorigin="anonymous"
    >

    <!-- Optionale eigene CSS-Datei -->
    <link rel="stylesheet" href="/assets/css/custom.css">
</head>
<body>

    <!-- Inhalte, Routen oder Views -->
    <?php
        // Hier ruft phpFK den eigentlichen Controller auf,
        // z.B. \Core\Router::dispatch();
    ?>

    <!-- Bootstrap JS + Abhängigkeit Popper.js (CDN) -->
    <script 
        src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" 
        integrity="sha384-..." 
        crossorigin="anonymous"
    ></script>

    <!-- Optionale eigene JS-Datei -->
    <script src="/assets/js/custom.js"></script>
</body>
</html>

So blendest du Bootstrap 5.3 (Beispielversion) via CDN in dein Projekt ein.
Die integrity– und crossorigin-Attribute erhöhen die Sicherheit,
indem sie gewährleisten, dass niemand die Dateien auf dem CDN manipuliert hat.

Bootstrap in den Views verwenden

Wenn du z. B. eine View home.php in app/views/ hast, kannst du nun
Bootstrap-Komponenten verwenden, die in deiner public/index.php zur Verfügung stehen.
Beispielsweise: 

<?php // app/views/home.php ?>

<div class="container">
    <h1 class="text-center">Willkommen in meiner Bootstrap-Seite</h1>
    <p>Dies ist ein erster Absatz mit dem <strong>Bootstrap-Framework</strong>.</p>

    <div class="row">
        <div class="col-md-6">
            <p>Linke Spalte</p>
        </div>
        <div class="col-md-6">
            <p>Rechte Spalte</p>
        </div>
    </div>
</div>

Dadurch nutzt du ganz normal die Klassen .container, .row, .col-md-6,
.text-center usw. wie in jedem anderen Bootstrap-Projekt.

Pflege eigener Assets

Wenn du zusätzlich eigene Styles oder Skripte einbringen willst, kannst du diese
in public/assets/ ablegen. Dann referenzierst du sie via
/assets/css/custom.css oder /assets/js/custom.js (wie im Beispiel oben).
Dadurch hältst du dein Projekt strukturiert, ohne direkt in den Bootstrap-Code einzugreifen.

Versionswechsel oder Offline-Modus

  • Versionswechsel:
    Willst du auf eine neue Bootstrap-Version upgraden, änderst du einfach den Link
    bei href und script src. Achte darauf, dass sich ggf.
    einige Klassen oder Komponenten in neueren Releases geändert haben.
  • Offline-Modus:
    Möchtest du Bootstrap offline oder hinter einer Firewall nutzen,
    kannst du stattdessen das komplette Paket (CSS und JS) herunterladen
    und ins public/assets/bootstrap legen. Dann bindest du
    /assets/bootstrap/css/bootstrap.min.css ein.

Fazit

Durch die Integration von Bootstrap per CDN kannst du schnell und unkompliziert
moderne und responsive Layouts in deinem phpFK – PHP Framework umsetzen.
Ein einfacher Eintrag in deiner public/index.php (oder einem Master-Layout)
ermöglicht die Nutzung aller Bootstrap-Komponenten in deinen Views,
ohne Dateien lokal bereitzuhalten.
So profitierst du von schnellerem Laden via CDN und hältst deinen Code übersichtlich.
Wenn du später Erweiterungen oder eigene Stile ergänzen möchtest,
leg sie einfach in public/assets ab und binde sie ebenfalls in die Seite ein.