djingo中使用bootstrap

利用Python開發web時，使用djingo架構和bootstrap前端架構。

在djingo項目根目錄下建立static目錄，靜态檔案放在此目錄下。

<a href="https://s2.51cto.com/wyfs02/M00/8E/A8/wKioL1jIlkeDRo7_AACa_epwrzw508.png-wh_500x0-wm_3-wmp_4-s_3003344969.png" target="_blank"></a>

在settings.py檔案中配置

1

2

3

4

5

6

7

<code>STATIC_URL </code><code>=</code> <code>'/static/'</code>

<code>TEMPLATE_DIRS </code><code>=</code> <code>(os.path.join(BASE_DIR,  </code><code>'templates'</code><code>),)</code>

<code>STATIC_ROOT </code><code>=</code> <code>os.path.join(BASE_DIR, </code><code>'collectstatic'</code><code>)</code><code>#此處必須，為新添加</code>

<code>STATICFILES_DIRS </code><code>=</code> <code>(</code>

<code>    </code><code>os.path.join(BASE_DIR, </code><code>"static"</code><code>),</code><code>#此處必須，為新添加</code>

<code>)</code>

在html檔案中引入bootstrap檔案

<code>&lt;link rel</code><code>=</code><code>"stylesheet"</code> <code>type</code><code>=</code><code>"text/css"</code> <code>href</code><code>=</code><code>"static/css/background.css"</code> <code>/</code><code>&gt;</code>

<code>&lt;link rel</code><code>=</code><code>"stylesheet"</code> <code>type</code><code>=</code><code>"text/css"</code> <code>href</code><code>=</code><code>"static/bootstrap-3.3.5-dist/css/bootstrap.min.css"</code> <code>/</code><code>&gt;</code>

<code>&lt;script src</code><code>=</code><code>"static/js/jquery-2.1.1.min.js"</code><code>&gt;&lt;</code><code>/</code><code>script&gt;</code>

<code>&lt;script  src</code><code>=</code><code>"static/bootstrap-3.3.5-dist/js/bootstrap.min.js"</code><code>&gt;</code>

效果圖：

<a href="https://s2.51cto.com/wyfs02/M00/8E/AA/wKiom1jImB_zoJWaAAAlCqFypOg551.png-wh_500x0-wm_3-wmp_4-s_2991187839.png" target="_blank"></a>

 本文轉自 matengbing 51CTO部落格，原文連結:http://blog.51cto.com/matengbing/1906610