django 結合 bootstrap 使用


git clone https://github.com/dyve/django-bootstrap3.git

要運行demo,需要在demo 中為其增加一個符號鏈接 bootstrap3 到上層目錄的同名文件夾

sudo ln -s ../bootstrap3 ./bootstrap3

 

==================================================

直接使用bootstrap:

下載: http://getbootstrap.com/getting-started/#download

在 Django 項目的app目錄下新建一個static文件夾,再在static里面新建一個bootstrap文件夾,將下載的三個文件夾放進去. 並修改 settings.py

關於static文件的使用,詳細 settings.py 的 STATIC_URL 附近的注釋網址,例如: https://docs.djangoproject.com/en/1.8/howto/static-files/

STATIC_URL = '/static/'
STATICFILES_DIRS = (
    os.path.join(BASE_DIR, 'static'),
)

將static目錄放在 STATICFILES_DIRS 中,以便 load 到我們剛下載的bootstrap,bootstrap依賴於jQuery庫,所以一定要添加,我們這里是直接引用的,如果有下載版本只需放在static里再引用就行。

使用時,在模板文件開頭的 {% load staticfiles %}就是加載static目錄,找到static目錄,后續就可以使用相關bootstrap屬性

<!DOCTYPE html> {% load staticfiles %} <html>
<head lang="en">
    <meta charset="UTF-8">
     <!-- 引入jQuery -->
    <script src="http://apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
     <!-- 引入 Bootstrap -->
     <link href="{% static 'bootstrap/css/bootstrap.min.css' %}" rel="stylesheet" type="text/css">
     <link href="{% static 'bootstrap/css/bootstrap.css' %}" rel="stylesheet" type="text/css">
      <script type="text/javascript" src="{% static 'bootstrap/js/bootstrap.min.js' %}"></script>
     <script type="text/javascript" src="{% static 'bootstrap/js/bootstrap.js' %}"></script>         
     <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
        <![endif]-->
    <title>數據展示平台</title>        
</head>
<body>
<!-- bootstrap 特性容器 -->
 <div class="container">
     <h1>Hello, world! </h1>
 </div>
</body>
</html>
. 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM