简体   繁体   中英

Bootstrap template not working correctly Django

I have a Bootstrap template that I am attempting to use with Django, and I have places the bootstrap resources in the template directory with the html file that I am trying to display. My problem is that when trying to display the html file, It only comes out as text in the browser window, so this would lead me to believe that the Bootstrap resources are not being properly used.

Here is the template I am trying to use: http://startbootstrap.com/template-overviews/stylish-portfolio/

Here is what my template directory looks like:

css
font-awesome
fonts
img
js
index.html

I am aware that It uses CDN links, but the resources were with the template when I downloaded the zip, so I left the in there. I am very new to Bootstrap and fairly new to Django as well so please go easy on me, and If I have something wrong in my terminology, please correct me. Thanks.

You should place it in a static folder and configure your settings. Otherwise, if you still want to put it in template then change your settings but it is unusual. Template folder should only contain html files.

Here's a sample settings for static files.

STATIC_URL = '/static/'

# Additional locations of static files
STATICFILES_DIRS = (
    # Put strings here, like "/home/html/static" or "C:/www/django/static".
    # Always use forward slashes, even on Windows.
    # Don't forget to use absolute paths, not relative paths.
    os.path.join(BASE_DIR, 'static'),
)

STATICFILES_FINDERS = (
    'django.contrib.staticfiles.finders.FileSystemFinder',
    'django.contrib.staticfiles.finders.AppDirectoriesFinder',
    # django.contrib.staticfiles.finders.DefaultStorageFinder',
)

and in your template (html file), call it like this:

{% load staticfiles %}
<link rel="stylesheet" type="text/css" href="{% static "css/bootstrap.min.css" %}" />

You need to declare a static folder where you place the CSS and JS files.

Refer to https://docs.djangoproject.com/en/1.7/howto/static-files/ on how to setup the static folder

A sample implementation https://github.com/Dsupreme/fests-django (Focus on where the css files are placed and how they are called)

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM