Le template Protostar pour Joomla 3.2 dispose d'un framework par défaut qui permet d'intégrer les positions de module et utilise également le système de grille de Bootstrap pour un design responsive. Ce framework revisé a été mis à jour pour inclure les divisions HTML5 telles que <header>, <nav>, <main> et <footer>.
Si vous enlevez tout le php et extrayez le fichier index.php de Protostar, vous voyez le framework du template comme montré ci-dessous. C'est pour la mise en page statique, avec le <div class="container">. La mise en page fluide a la class="container-fluid" assignée, ce qui permet au conteneur d'être aussi grand que la taille de l'écran et de se réduire proportionnellement. Lorsque vous sélectionnez l'un ou l'autre dans le gestionnaire de templates, il utilise php pour ajouter "-fluid" au conteneur.
<!DOCTYPE html> <html> <head> </head> <body> <div> <div> <header role="banner"> <div></div> <a> <span></span> </a> </header> <nav role="navigation"></nav> <div></div> <div> <div id="sidebar"></div> <div id="content"></div> <div id="aside"></div> </div> </div> </div> <footer> <div></div> </footer> </body> </html>
Le style par défaut du tempalte Protostar donne une margin de 20px au container, puis le header et la navigation n'ont pas de largeur particulière attribuées et prennent toute la largeur du conteneur moins le padding. Le logo est situé dans le header.
Le .row-fluid se voit attribuer une largeur de 100%. Il s'agit d'une désignation Bootstrap si les divs à l'intérieur de .row-fluid doivent s' ajouter jusqu'à 12 pour le grid 12 dans Bootstrap. Protostar par défaut assigne .span3 a #sidebar et #aside et attribue à content .span6 pour compléter jusque 12.
Touutes les divs dans .row-fluid avec une désignation .span3 ont une largeur de 23.4043% et .span6 ont une largeur de 48.9362%. Avec la mise en page statique le conteneur a des étapes définies pour sa largeur et les colonnes prennent alors un certain pourcentage de cette largeur. Avec l'agencement fluide, le conteneur est aussi large que l'écran et les pourcentages des colonnes font en sorte qu'ils changent de largeur proportionnellement à la largeur de l'écran. Une fois que la taille de l'écran atteint la gamme des petits écrans comme dans les téléphones, par exemple, la largeur de ces divs est définie sur 100 % et float : none et les divs vont s'empiler verticalement.
Vous pouvez tester cela en réduisant la taille de la fenêtre de votre moniteur, ou par l'outil « voir les modèles adaptatifs » du plugin webdevelopper de firefox.