GitHub

Bootstrap 5

Le framework PHP EasyFrame a été conçu pour fonctionner avec Bootstrap 5.

Lorsque vous créez une page web, la mise en page CSS demande souvent beaucoup de temps. Bootstrap 5 vous permettra d'en économiser et de vous consacrer à d'autres tâches. C'est une puissante boîte à outils.

Ce kit CSS, créé par les développeurs de Twitter, est devenu en peu de temps le framework CSS de référence. Vous pourrez construire rapidement et facilement des sites web esthétiques et responsives. Bootstrap offre aussi des plugins jQuery de qualité pour enrichir vos pages. Il ne vous reste plus qu'à l'adapter à vos besoins !

Parmi l'ensemble de ses possibilités, il vous permettra entre autres :

Consultez la documentation détaillée de Bootstrap 5. Site officiel.

Ajoutez une feuille de styles .css

Pour ajouter vos propres feuilles de styles .css, en complément ou à la place, du framework CSS Bootstrap 5, procédez de la manière suivante :

  1. Placez votre feuille de styles .css dans le dossier css/
  2. Indiquez son nom et le nom de son fichier dans le fichier setting.php
  3. Reliez-la aux pages de votre choix depuis le fichier root.php

// Fichier setting.php
// Nom et adresse du fichier .css
   
$headHTML = [
            
    ...
    
    // NOM des fichiers .CSS rangés dans le dossier css/
    // Vous pouvez indiquer autant de fichiers que vous souhaitez. Ils s'ajouteront dans le même ordre
    // 'Nom UNIQUE du fichier' => 'nom du fichier .css'
    'bootstrap' => 'bootstrap.min.css',
    'css' => 'style.css',
    'css2' => 'style2.css',

    ...

];

Lorsque vous reliez vos feuilles de styles .css à vos pages, choisissez la façon de chargement de ces fichiers. Ils seront chargés de manière classique grâce à la balise <link> située entre les balises <head>, ou chargés de manière asynchrone afin de ne pas bloquer le chargement des différents éléments de la page.


// Fichier root.php
// Selection des fichier .css et .js pour chaque page
   
// Page 
"contact"  => array ( 

    'nom' => 'contact',
    'title' => 'Contactez-nous',
    'description' => 'Description de la page',
    'layout' => 'front',
    
    // Chargement de la ou des feuille(s) de styles grâce à la balise <link> entre les balises <head>
    // Séparez chacun des nom des feuilles de styles par une virgule s'il y en a plusieurs
    'css' => 'css',
    
    // Chargement de la ou des feuille(s) de styles de manière asyncrone
    // Séparez chacun des nom des feuilles de styles par une virgule s'il y en a plusieurs
    'cssasync' => 'bootstrap',
    
    'jshead' => '',
    'jsfoot' => 'jquery,bootstrapjs,highlightjs'

)

Ajoutez un script .js

Pour ajouter vos scripts .js, procédez de la manière suivante :

  1. Placez votre script .js dans le dossier js/
  2. Indiquez son nom et le nom de son fichier dans le fichier setting.php
  3. Reliez-le aux pages de votre choix depuis le fichier root.php

// Fichier setting.php
// Nom et adresse du fichier .css
   
$headHTML = [
            
    ...
    
    // NOM des fichiers .JS rangés dans le dossier js/
    // Vous pouvez indiquer autant de fichiers que vous souhaitez. Ils s'ajouteront dans le même ordre
    // 'Nom UNIQUE du fichier' => 'nom du fichier .js'
    'jquery' => 'jquery.min.js',
    'bootstrapjs' => 'bootstrap.min.js',
    'monScript' => 'monscript.js',
    'monScript2' => 'monscript2.min.js',

    ...

];

Lorsque vous reliez vos scripts .js à vos pages, choisissez la façon de chargement de ces fichiers : Ils seront soit chargés entre les balises <head> soit juste avant la balise </body>.


// Fichier root.php
// Selection des fichiers .css et .js pour chaque page
   
// Page 
"contact"  => array ( 

    'nom' => 'contact',
    'title' => 'Contactez-nous',
    'description' => 'Description de la page',
    'layout' => 'front',
    'css' => 'css',
    'cssasync' => 'bootstrap',
    
    // Chargement du, ou des, script(s) JS entre les balises <head>
    // Séparez chacun des nom des feuilles de styles par une virgule s'il y en a plusieurs
    'jshead' => 'jquery',
    
    // Chargement du, ou des, script(s) JS avant la balise </body>
    // Séparez chacun des nom des feuilles de styles par une virgule s'il y en a plusieurs
    'jsfoot' => ',bootstrapjs,highlightjs'

)