web-dev-qa-db-fra.com

Bootstrap 3 pour les vues de composants avec Joomla 3.x

Je comprends que la version 3.x de Joomla est livrée avec Bootstrap 2.x et de nombreux composants essentiels tels que les contacts, la connexion, etc. ... utilisent le Bootstrap = Framework 2.x. Même certains modèles comme prostar, beez utilisent le même travail sur frame.

Nous développons un composant et prévoyons d’utiliser le framework Bootstrap 3.x pour les vues de composant. Je ne souhaite pas pirater le framework principal ni aucun fichier ...

Tout ce que j'ai besoin de savoir s'il existe un moyen (sûr) d'utiliser Bootstrap 3.x uniquement sur les vues de composant sans aucun conflit.

Pas sûr que ma question ait un sens, mais au final, je veux tirer parti des fonctionnalités réactives de Bootstrap 3.x pour mes vues de composant.

joomla-3.xtwitter-bootstrap-3
3
Malaiselvan

C’est ce que j’utilise pour remplacer bootstrap2 par bootstrap3:

$doc = JFactory::getDocument();
$assets = "templates/".$this->template;

// load jquery
JHtml::_('jquery.framework');

// remove default bootstrap js
foreach ($doc->_scripts as $url => $pars) {
    if ((strpos($url, "bootstrap.js") !== false) || (strpos($url, "bootstrap.min.js") !== false)) {
    unset($doc->_scripts[$url]); // remove from head
    JHtml::stylesheet($assets.'/css/bootstrapjserror.css'); // Generate error message at bottom of browserscreen
}
}

// add bootstrap 3 js
JHtml::script($assets.'/js/bootstrap.min.js');

// remove default bootstrap css
foreach ($doc->_styleSheets as $url => $pars) {
if ((strpos($url, "bootstrap.css") !== false) || (strpos($url, "bootstrap.min.css") !== false)) {
    unset($doc->_styleSheets[$url]); // remove from head
    JHtml::stylesheet($assets.'/css/bootstrapcsserror.css'); //Generate error message at bottom of browserscreen
}
}
// add bootstrap 3 css
JHtml::stylesheet($assets.'/css/bootstrap.min.css'); 

// add template css
JHtml::stylesheet($assets.'/css/template.css');

J'espère que cela t'aides!

Vous pouvez bien sûr utiliser certaines parties uniquement dans vos vues personnalisées ...

2
COBIZ webdevelopment

Vous pouvez nommer toute la syntaxe BS3 de l’espace de noms afin qu’il n’y ait pas de conflit avec le BS2 déjà chargé, c’est probablement l’option la plus simple, mais elle nécessitera un travail supplémentaire. Il devrait être relativement simple d’utiliser la version SCSS de Bootstrap) pour préfixer tous les flux de sortie.

1
Seth Warburton

Vous pouvez supprimer les scripts de la déclaration principale en créant un plugin:

class PlgSystemDelbootstrap extends JPlugin {

public function onBeforeCompileHead() {
    $app = JFactory::getApplication();

    //return noting to do if its admin
    if ($app->isAdmin()) {
        return;
    }

    $doc = JFactory::getDocument();
    // uncomment unwanted script
    //unset($doc->_scripts['/media/jui/js/jquery.min.js']);
    //unset($doc->_scripts['/media/jui/js/jquery-noconflict.js']);
    //unset($doc->_scripts['/media/jui/js/jquery-migrate.min.js']);
    unset($doc->_scripts['/media/jui/js/bootstrap.min.js']);
    //unset($doc->_scripts['/media/jui/js/jquery.autocomplete.min.js']);
    //unset($doc->_scripts['/media/system/js/caption.js']);
}
}
0
Dawid Świtoń

Ça peut être fait. Mais, il n’existe pas de moyen facile de charger Bootstrap 3.x au-dessus de Bootstrap 2.x.

Vous devez potentiellement avoir à faire face à des conflits CSS et Javascript. Par exemple, avec la définition .table, où les deux frameworks essaient de charger des styles. À l'intérieur de la principale

<section id="content">
    <div class="row-fluid">
        <div class="span12">

vous pouvez définir votre propre BS3:

<div class="mycomponent container">
    <div class="row">
        <div class="col-md-9" role="main">

D'après mon expérience avec Joomla v2.5, lors du chargement Bootstrap 2.x par-dessus les styles J25, même si vous ajoutez un nouveau niveau (table .mycomponent)), vous devez vérifier si toutes les déclarations sont appliquées. correctement et résoudre les problèmes en ajoutant plus de niveaux ou! important.

Du côté JavaScript, il est encore plus complexe, où il n’est pas possible de simplement désactiver tous les scripts chargés (à présent, vous devez également vérifier les conflits BS2 et mootools, par exemple les modaux).

0
Anibal