bootstap et synfony2 integration

**IAGISG** · 31/01/2014, 11h27

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**gototog** · 31/01/2014, 12h58

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

**ensareab** · 31/01/2014, 14h26

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

**IAGISG** · 31/01/2014, 17h12

vous avez raison mais même j'ai supprimé le block stylesheets la page index n'affiche pas le css de bootstrap

**dukoid** · 31/01/2014, 18h42

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

**IAGISG** · 31/01/2014, 18h52

le fichier est chargé

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

bootstap et synfony2 integration

Symfony PHP

Vue hybride

Discussions similaires

Partager

Partager