le css bootstrap n'est pas appliqué a ma page.twig

**Toufik83** · 24/09/2016, 18h47

bonsoir,
je viens d'installer php5.6 sous xamp, j'appelle le fichier bootstrap.min.css depuis la page avec href="{{asset("bundles/...")}}".
tout mes fichiers css et javascript sont bien importés.
maintenant quand je met ma barre de navigation bootstrap dans ma page.twig, la barre est afficher sans CSS.

Code twig :

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
23
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width-device-width, initial-scale=1.0"/>
        <title>{% block title %}Welcome!{% endblock %}</title>
        {% block stylesheets %}
            <link  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
            {#<link rel="stylesheet" href="{{ asset('bootstrap/css/bootstrap-responsive.min.css') }}" />#}
        {% endblock %}
        <link rel="icon" type="image/x-icon" href="{{ asset('favicon.ico') }}" />
    </head>
    <body>
        {% block nav %}{% include "::nav.html.twig" %}{% endblock %}
        {% block body %}{% endblock %}
        {% block javascripts %}
            {#<script src="{{ asset('bundles/dwmcatalogue/bootstrap/js/jquery-2.1.4.min.js') }}"></script>#}
            <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
            <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
            <script src="{{ asset('bundles/dwmcatalogue/bootstrap/js/mesFonctions.js') }}"></script>
        {% endblock %}
    </body>
</html>

est-ce que j'ai oublié quelque chose?

**MehrezLabidi** · 24/09/2016, 19h13

Bonjour,
es ce que en inspectant le code navigateur le chemin des ton fichier css correspond au bon chemin?
es ce que la barre de navigation est déjà inclut dans ??

Code :

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

{% include "::nav.html.twig" %}

si Oui alors ilfaut verifier l'arborescence des fichiers twig (les quatres points avant le nav peuvent être modifié)

**Toufik83** · 24/09/2016, 19h20

oui, la page nav.html.twig est dans le même dossier que base.html.twig et elle est déclaré comme suite :

Code twig :

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

1
2
3
4
5
<ul class="nav nav-tabs">
    <li role="presentation" class="active"><a href="#">Home</a></li>
    <li role="presentation"><a href="#">Profile</a></li>
    <li role="presentation"><a href="#">Messages</a></li>
</ul>

puis quand je vois dans le firebug de chrome, je ne vois pas d'erreur, normalement tout est bon mais je ne sais pas pourquoi le css bootstrap n'est pas appliqué a ma page.
EDIT : par-contre quand j'affiche le code source de la page base.html.twig, je ne vois plus le bootstrap dans la balise <link.../>, les fichiers js sont bien là.

**MehrezLabidi** · 24/09/2016, 21h43

Si le javascript est bien interpreté donc le morceau twig est bien inclut.
Si tu fais un Ctrl+U plusieurs fichiers css et js sont affichés avec leurs liens .
Cherche le fichier style de bootstrap et clique , si tu as bien ecrit son chemin tu va voir son contenu.
Es ce que ton fichier css est bien copié sous web ?

**Toufik83** · 24/09/2016, 22h47

justement quand j'ai fais CTRL+U (code source) y'avait pas de fichier css de bootstrap, le problème était tout bête, par-ce que j'ai ajouté le css dans le block {% block stylesheets %}

Code twig :

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

1
2
3
4
{% block stylesheets %}
            <link  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
            {#<link rel="stylesheet" href="{{ asset('bootstrap/css/bootstrap-responsive.min.css') }}" />#}
        {% endblock %}

j'ai essayé de le mettre dehors de ce block et ça a fonctionné.

le css bootstrap n'est pas appliqué a ma page.twig

Symfony PHP

Discussions similaires

Partager

Partager