2013-05-04 41 views
8

Tôi đang cố gắng để có được bootstrap làm việc trong dự án django của tôi và làm theo hướng dẫn here nhưng nó không hoạt động. Khi tôi truy cập vào dự án địa phương của tôi trong trình duyệt, nó chỉ hiển thị một trang trống với 4 liên kết màu xanh lam. không exaclty những gì tôi đã mong đợi. Trong pycharm (ide của tôi) nó nói với tôi rằng tôi có một refrence chưa được giải quyết để STATIC_URL trong mẫu của tôi. Tôi nghĩ rằng vấn đề là bởi chỉ cần đặt bootstrap trong dự án của tôi và xác định nó trong các thiết lập của tôi là không đủ. bất kỳ ý tưởng?Sử dụng bootstrap và django

Xin lỗi, về cơ bản ở đây là dự án của tôi được thiết lập như thế nào. Main_Project/ app_1, app_2, phương tiện truyền thông /, templates /, Main_Project/ vì vậy tôi nên đặt boostrap dưới Main_Project đầu tiên, hoặc thứ hai

Ngoài ra ở đây là xác lập cá nhân trong trường hợp nó quan trọng.

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

# URL prefix for static files. 
# Example: "http://media.lawrence.com/static/" 
STATIC_URL = '/static/' 

Trả lời

2
  1. đầu tiên url tĩnh trong settings.py nên trông như sau:

    STATIC_URL = '/ tĩnh /'

  2. Sau khi bạn phải là một tạo 3 thư mục bên trong thư mục tĩnh:

    • img
    • cs s
    • js
  3. Tải Bootstrap một đặt bên trong mỗi file một cách chính xác trong các thư mục trên

  4. Cuối cùng trong mẫu nhập khẩu 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. Bạn nên đặt các tập tin bên ngoài ứng dụng hoặc bên trong ứng dụng để cá nhân hóa từng ứng dụng với các tệp tĩnh của bạn, sự khác biệt là url của tĩnh.

    5.1 Bên ngoài ứng dụng các

    STATIC_URL = '/ tĩnh /'

    5,2 Bên trong mỗi ứng dụng:

    STATIC_URL = '/ App1/tĩnh /'

    STATIC_URL = '/ App2/static /'

  6. Và STATIC_ROOT đặt

    STATIC_ROOT = ''

+1

Điều đó sẽ không hoạt động trừ khi bạn '{% tải staticfiles%}' – Ngenator

+0

tôi đã thay đổi thành {{STATIC_URL}} các câu không sử dụng {% load staticfiles%} –

+0

@Ngenator '{% static ...%}' sẽ không hoạt động không có '{ % load staticfiles%} ',' {{STATIC_URL}} 'chỉ là một biến được đặt trong ngữ cảnh bằng ứng dụng tĩnh. – J0HN

15

Kevin ở đây, tác giả của bài viết mà từ Python Diary.Kể từ khi tôi đăng rằng hướng dẫn, tôi đã tạo ra các phương pháp khác tạo điều kiện cho Bootstrap trong một dự án Django, trong đó có một mẫu Project tiện dụng, có thể được tải về từ đây:

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

Tôi cũng đã bắt đầu một dự án trên BitBucket kể từ đó có một ứng dụng chủ đề bootstrap Django mà là siêu dễ sử dụng, chỉ cần thêm nó vào "INSTALLED_APPS" của bạn và sau đó mở rộng bất kỳ mẫu từ trang web Bootstrap gốc, chẳng hạn như starter.html trong số những người khác để lựa chọn. Tất nhiên bạn cũng có thể quay chủ đề bootstrap của riêng bạn. Tôi cố gắng tích cực cập nhật nó và đang tìm thêm gợi ý để làm cho nó trở thành "ứng dụng goto Django" cho các nhà phát triển muốn sử dụng Bootstrap trong dự án của họ, repo BitBucket có thể được tìm thấy ở đây:

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

Hy vọng điều này giúp bất kỳ ai khác có thể vấp ngã trên trang Stackoverflow này.

0

Đây là những gì làm việc cho tôi, tôi đi theo những gì được viết trong doc:

https://docs.djangoproject.com/en/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' 
] 

...

file
STATIC_URL = '/static/' 

tĩnh đặt trong project/my_app/static/my_app/css/bootstrap.min.css

Mẫu được đặt ở đây trong 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"> 
2

tập tin settings.py dự án (dòng này là mặc định và không thay đổi chúng):

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

Trong thư mục ứng dụng của bạn (mẫu thư mục với tập tin .html nên có mặt ở đó quá):

Tạo thư mục "tĩnh" với các thư mục con (file bootstrap), cấu trúc sẽ giống như sau:

app folder structure

static folder structure

Trong html mẫu bootstrap tệp nhập của bạn như thế này (lưu ý CSS đi đầu và JS đi cơ thể mục):

<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> 

Các vấn đề liên quan