Les grandes différences entre bootstrap 3 et 2.3

Le plus ennuyeux lors du passage à bootstrap 3 est le l'intégration totalement différente du code CSS Responsive design pour la grille Bootstrap 3.

Alors que bootstrap 2.3 utilise un simple span- + le nombre de colonne de 1 à 12 : span-6 par exemple.

Bootstrap 3 utilise un nommage assez exotique mais logique col-xs-, col-sm-, col-md-, col-lg- correspondant dans l'ordre au téléphone mobile(xs), tablette(sm), ecran standard(md) et enfin ecran large(lg)  : col-md-6 par exemple.

Donc avec bootstrap 3, vous pouvez definir chaque type d'écran, pour améliorer le colonage de votre template selon la cible.

A savoir que la class parent row n'est plus lié pour gérer les colonnes, mais que pour ajuster les marges et que row-fluid n'existe plus.

pour l'offset, ou décallage de colonne, il suffit d'ajouter -offset a la class de base : col-md-offset-6 par exemple.

Sachant qu'au total on doit arriver à 12 colonnes par ligne.

Migrer vers bootstrap 3

Guide complet pour migrer le CSS et la javascript de bootstrap 2.x vers bootstrap 3 sur bootply

Par contre, si vous voulez utiliser les icônes de joomla, il faudra rechanger les classes des icônes du fait que les Jform ne sont pas modifiable actuellement ou surcharger les "views" de tous les composants les utilisant.

Inclure bootstrap 3 dans votre template 

Pour faire fonctionner (au moins partiellement votre template avec bootstrap 3, il faut surcharger celui de Joomla car nous voulons éviter les conflits et n'avoir toujours qu'une seul fois bootstrap, jQuery et le CSS qui va avec.

Pour cela, il faut tous simplement l'inclure dans votre template.

Pour le javascript, joomla vas chercher dans le sous répertoire js et pour le css dans le répertoire css

voir par exemple le code HTML généré

<script src="/templates/bootstrap3/js/jui/jquery.min.js" type="text/javascript"></script>
<script src="/media/jui/js/jquery-noconflict.js" type="text/javascript"></script>
<script src="/media/jui/js/jquery-migrate.min.js" type="text/javascript"></script>
<script src="/media/system/js/mootools-core.js" type="text/javascript"></script>
<script src="/templates/bootstrap3/js/jui/bootstrap.min.js" type="text/javascript"></script>

Aucun changement n'est nécessaire dans le code de joomla, il faut juste placer les fichier dans votre template à l' emplacement correct: js/jui/bootstrap.min.js pour bootstrap par exemple.

Comme vous voyez dans le code plus haut, ceux qui ne sont pas présent, utilisent les fichiers dans /media

la seul instruction nécessaire et encore si vous avez des javascript inclus dans votre template est JHtml::_('bootstrap.framework');

pour le css n'utilisez pas JHtml::_('bootstrap.loadCss');

Car cela va charger tous les css et le fichier bootstrap-responsive.min.css qui est obsolète dans bootstrap 3 car inclus mais simplement

$doc = JFactory::getDocument();
$doc->addStyleSheet('templates/' . $this->template . '/css/bootstrap.css');

 SI néanmoins un composant essaye de le charger alors ajouter dans votre répertoire css/jui des fichiers vides (a part bootstrap.css ou demandez au créateur de ne pas charger les css, si possible.

Ajouter les icones de joomla

Cette partie est un peut compliqué car bootstrap 3 utilise les classes glyphicon .glyphicon-  + le nom de l'icone pour  le rendu des icônes. Le plus simple est de supprimer les icones, class commençant avec glyphicon, du fichier bootstrap.css version 3 est d' inclure le fichier media\jui\less\icomoon.less.

Cela évitera de perdre les icônes, si vous avez déjà un template existant ou sur le rendu de joomla et autres composants.

Un exemple concret

Ci dessous, le code complet d'un template qui reprend une partie du code du template Isis et d'un template libre de bootply, bien sur sous licence Gnu/Gpl.

Il comporte des overrides standard par exemple dans : /bs3/html/com_content/article/
les overrides des fichiers javascript dans jui qui se trouve dans : /bs3/js/jui/
la fonte qui est une copie de l'original de joomla dans /bs3/font/
et enfin l'ajout du fichier /bs3/css/icomoon.css reprenant les déclaration des icones façon Joomla pour ne pas perdre l'affichage de ces icônes dans les composants.

J'ai volontairement laissé chaque fichier css séparé pour une étude plus simple de la procédure.

le fichier 90113.htm est une des bases de ce design, ainsi que protostar pour gagné un peu de temps. Mais il y a très peu de code qui changerait sur la base d'un autre template bootstrap.