web-dev-qa-db-fra.com

Utiliser bootstrap et django

J'essaie de faire démarrer Bootstrap dans mon projet Django et de suivre le tutoriel ici Mais cela n'a pas fonctionné. Lorsque je visite le mon projet local dans le navigateur, il affiche simplement une page vierge avec 4 liens bleus. pas exactement ce à quoi je m'attendais. Dans pycharm (mon idée), il me dit que ma référence à STATIC_URL n'est pas résolue. Je pense que le problème est que le simple fait de placer bootstrap dans mon projet et de le définir dans mes paramètres ne suffisait pas. des idées?

Désolé, voici en gros la configuration de mon projet. Main_Project / App_1, app_2, media /, templates /, Main_Project /, Dois-je donc ajouter boostrap au premier projet Main_Project ou la seconde

Aussi voici mes réglages au cas où ça compte.

STATIC_ROOT = os.path.join(SITE_ROOT, 'static_files')

# URL prefix for static files.
# Example: "http://media.lawrence.com/static/"
STATIC_URL = '/static/'
pythonhtmldjangotwitter-bootstrap
9
user2251164

Kevin ici, l'auteur de cet article de Python Diary. Depuis que j'ai posté ce tutoriel, j'ai créé d'autres méthodes d'activation de Bootstrap dans un projet Django, y compris un modèle de projet pratique, qui peut être téléchargé à partir d'ici:

http://www.pythondiary.com/templates/bootstrap

J'ai également lancé un projet sur BitBucket depuis lequel une application thème Django Bootstrap est extrêmement facile à utiliser. Ajoutez-la simplement à votre "INSTALLED_APPS", puis étendez le modèle du site Web Bootstrap d'origine, tel que starter.html, entre autres choisissez parmi. Bien sûr, vous pouvez également créer votre propre thème bootstrap. J'essaie de l'actualiser activement et je recherche plus de suggestions pour en faire "l'application Django goto" pour les développeurs qui souhaitent utiliser Bootstrap dans leur projet. Vous pouvez trouver le dépôt BitBucket ici:

https://bitbucket.org/kveroneau/Django-bootstrap-theme

J'espère que cela aidera tous ceux qui pourraient tomber sur cette page Stackoverflow.

15
kveroneau

Fichier settings.py du projet (ces lignes sont des valeurs par défaut et ne les modifient pas):

BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
STATIC_URL = '/static/'

Dans votre dossier d'application (le dossier templates avec le fichier .html devrait également être là):

Créez un dossier "statique" avec des sous-dossiers (fichiers d'amorçage), la structure devrait ressembler à ceci:

app folder structure

static folder structure

Dans votre fichier de modèle html, l’importation de fichier est la suivante (notez que CSS va dans head et JS va dans body section):

<html>
<head>
    <title> Your title </title> 

    <!-- To prepare Django for loading static files -->
    {%load staticfiles %}

    <!-- And with <link> or <script> tag you actualy import bootstrap files in page -->
    <link href={% static "css/bootstrap.min.css" %} rel="stylesheet">
</head>

<body>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src={% static "js/bootstrap.min.js" %}></script>


<p> Next your page code ............... </p>
<p> Next your page code ............... </p>
<p> Next your page code ............... </p>


</body>

2
FirePower

  1. d'abord, l'URL statique dans le fichier settings.py devrait ressembler à ceci:

    STATIC_URL = '/ static /'

  2. Après vous devriez être un dossier create 3 dans le dossier static:

    • img
    • css
    • js

  3. Téléchargez Bootstrap et insérez correctement chaque fichier dans les dossiers ci-dessus.

  4. Enfin, dans le modèle, importez le bootstrap:

    <link rel="stylesheet" type="text/css" href="{{STATIC_URL}}css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="{{STATIC_URL}}css/bootstrap-responsive.min.css"/> 
<script type="text/javascript" src="{{STATIC_URL}}js/bootstrap.min.js"></script>

  5. Vous devez placer les fichiers en dehors de l'application ou à l'intérieur de l'application pour personnaliser chaque application avec vos fichiers statiques. La différence est l'URL du fichier statique.

    5.1 En dehors de l'application le 

    STATIC_URL = '/ static /'

    5.2 À l'intérieur de chaque application:

    STATIC_URL = '/ App1/static /'

    STATIC_URL = '/ App2/static /'

  6. Et le STATIC_ROOT put 

    STATIC_ROOT = ''

2
Gianfranco Lemmo

C'est ce qui a fonctionné pour moi, j'ai suivi ce qui est écrit dans la doc:

https://docs.djangoproject.com/fr/1.10/howto/static-files/

INSTALLED_APPS = [
    'Django.contrib.admin',
    'Django.contrib.auth',
    'Django.contrib.contenttypes',
    'Django.contrib.sessions',
    'Django.contrib.messages',
    'Django.contrib.staticfiles',
    'settings'
]

...

STATIC_URL = '/static/'

Fichiers statiques placés dans project/my_app/static/my_app/css/bootstrap.min.css

Le modèle placé ici dans project/my_app/templates/my_app/base.html

{% load static %}
<!DOCTYPE html>
<html lang="en">

<head>

    <!-- Bootstrap Core CSS -->
    <link href="{% static "my_app/css/bootstrap.min.css" %}" rel="stylesheet">
0
Luca Giovenzana