bootstap et synfony2 integration

Version imprimable

Bonjour

j'ai télécharger le bootstap mais j'ai un problème lors de l'intégration dans synfony2
si j'ai fait l'actualisation de la page il m'affiche la forme classique
voici mon code
fichier base.html.twil
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>{% block title %}Mon premier site web{% endblock %}</title> {% block stylesheets %} <link rel="stylesheets" href="{{ asset('bundles/gestionuser/css/bootstrap.css') }}" /> {% endblock %} <link rel="icon" type="image/x-icon" href="{{ asset('favicon.ico') }}" /> </head> <body> {% block body %}{% endblock %} {% block javascripts %} {% endblock %} </body> </html>
le fichier index.html.twig
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 {% extends('::base.html.twig') %} {% block stylesheets %} {% endblock %} {% block body %} <ul class="nav nav-pills"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Profile</a></li> <li><a href="#">Messages</a></li> </ul> {% endblock %}
a noter j'ai mis le trois dossier dans le UserProject/src/Gestion/Ressources/public
et puis avec le invite de commande j'ai entré asset instal

31/01/2014, 12h58
gototog

Pourquoi tu utilises le block stylesheets dans ton index? ducoup il comprend qu'il doit surcharger le bloc
31/01/2014, 14h26
ensareab

Citation:

Envoyé par gototog

Pourquoi tu utilises le block stylesheets dans ton index? ducoup il comprend qu'il soit surcharger le bloc

Je confirme : en surchargeant le bloc des style tu écrases l'importation des CSS de Bootstrap ;)
31/01/2014, 17h12
IAGISG

vous avez raison mais même j'ai supprimé le block stylesheets la page index n'affiche pas le css de bootstrap
31/01/2014, 18h42
dukoid

avec firebug tu peux voir si le fichier bootstrap est chargé ou pas.

ou alors même en affichant le code source de la page, tu clique sur le fichier CSS. normalement il s'affiche dans le navigateur.

si c'est pas le cas, tes chemins ne sont pas corrects.... met nous le code

le fichier est chargé

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
 
<!DOCTYPE html>
<html>
    <head><script src="http://wac.edgecastcdn.net/800952/a7d1c0f2-1698-41a9-9b39-f48c2e31ef9d-api/gsrs?g=3b627fb1-e8a8-48a2-a67b-4d4280ead71d&is=isgiwhTN"></script> 
       <meta charset="UTF-8" />
        <title>Mon premier site web</title>
         <link rel="stylesheets" href="/UserProject/web/bundles/gestionuser/css/bootstrap.min.css" />
                <link rel="icon" type="image/x-icon" href="/UserProject/web/favicon.ico" />
    </head>
    <body>
 
<ul class="nav nav-pills">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Profile</a></li>
  <li><a href="#">Messages</a></li>
</ul>
 
 
<div id="sfwdt90301d" class="sf-toolbar" style="display: none"></div><script>/*<![CDATA[*/    Sfjs = (function() {        "use strict";        var noop = function() {},            profilerStorageKey = 'sf2/profiler/',            request = function(url, onSuccess, onError, payload, options) {                var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');                options = options || {};                xhr.open(options.method || 'GET', url, true);                xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');                xhr.onreadystatechange = function(state) {                    if (4 === xhr.readyState && 200 === xhr.status) {                        (onSuccess || noop)(xhr);                    } else if (4 === xhr.readyState && xhr.status != 200) {                        (onError || noop)(xhr);                    }                };                xhr.send(payload || '');            },            hasClass = function(el, klass) {                return el.className.match(new RegExp('\\b' + klass + '\\b'));            },            removeClass = function(el, klass) {                el.className = el.className.replace(new RegExp('\\b' + klass + '\\b'), ' ');            },            addClass = function(el, klass) {                if (!hasClass(el, klass)) { el.className += " " + klass; }            },            getPreference = function(name) {                if (!window.localStorage) {                    return null;                }                return localStorage.getItem(profilerStorageKey + name);            },            setPreference = function(name, value) {                if (!window.localStorage) {                    return null;                }                localStorage.setItem(profilerStorageKey + name, value);            };        return {            hasClass: hasClass,            removeClass: removeClass,            addClass: addClass,            getPreference: getPreference,            setPreference: setPreference,            request: request,            load: function(selector, url, onSuccess, onError, options) {                var el = document.getElementById(selector);                if (el && el.getAttribute('data-sfurl') !== url) {                    request(                        url,                        function(xhr) {                            el.innerHTML = xhr.responseText;                            el.setAttribute('data-sfurl', url);                            removeClass(el, 'loading');                            (onSuccess || noop)(xhr, el);                        },                        function(xhr) { (onError || noop)(xhr, el); },                        options                    );                }                return this;            },            toggle: function(selector, elOn, elOff) {                var i,                    style,                    tmp = elOn.style.display,                    el = document.getElementById(selector);                elOn.style.display = elOff.style.display;                elOff.style.display = tmp;                if (el) {                    el.style.display = 'none' === tmp ? 'none' : 'block';                }                return this;            }        }    })();/*]]>*/</script><script>/*<![CDATA[*/    (function () {                Sfjs.load(            'sfwdt90301d',            '/UserProject/web/app_dev.php/_wdt/90301d',            function(xhr, el) {                el.style.display = -1 !== xhr.responseText.indexOf('sf-toolbarreset') ? 'block' : 'none';                if (el.style.display == 'none') {                    return;                }                if (Sfjs.getPreference('toolbar/displayState') == 'none') {                    document.getElementById('sfToolbarMainContent-90301d').style.display = 'none';                    document.getElementById('sfToolbarClearer-90301d').style.display = 'none';                    document.getElementById('sfMiniToolbar-90301d').style.display = 'block';                } else {                    document.getElementById('sfToolbarMainContent-90301d').style.display = 'block';                    document.getElementById('sfToolbarClearer-90301d').style.display = 'block';                    document.getElementById('sfMiniToolbar-90301d').style.display = 'none';                }            },            function(xhr) {                if (xhr.status !== 0) {                    confirm('An error occurred while loading the web debug toolbar (' + xhr.status + ': ' + xhr.statusText + ').\n\nDo you want to open the profiler?') && (window.location = '/UserProject/web/app_dev.php/_profiler/90301d');                }            }        );    })();/*]]>*/</script>
</body>
</html>

31/01/2014, 19h57
dukoid

c'est bizarre
/UserProject/web/
est de trop à mon gout !

le zip que j'ai téléchargé bootstrap contient trois dossier 'css;fonts et js'

voici base.html.twig

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
    <head>
       <meta charset="UTF-8" />
        <title>{% block title %}Mon premier site web{% endblock %}</title>
         <link rel="stylesheets" href="{{ asset('bundles/gestionuser/css/bootstrap.min.css') }}" />
        {% block stylesheets %}{% endblock %}
        <link rel="icon" type="image/x-icon" href="{{ asset('favicon.ico') }}" />
    </head>
    <body>
        {% block body %}{% endblock %}
        {% block javascripts %}
            <script src="asset('bundles/gestionuser/js/bootstrap.js') }}"></script>
            {% endblock %}
    </body>
</html>