djingo中使用bootstrap

简介:

利用Python开发web时,使用djingo框架和bootstrap前端框架。

在djingo项目根目录下新建static目录,静态文件放在此目录下。

wKioL1jIlkeDRo7_AACa_epwrzw508.png-wh_50

在settings.py文件中配置

1
2
3
4
5
6
7
STATIC_URL  =  '/static/'
 
TEMPLATE_DIRS  =  (os.path.join(BASE_DIR,   'templates' ),)
STATIC_ROOT  =  os.path.join(BASE_DIR,  'collectstatic' ) #此处必须,为新添加
STATICFILES_DIRS  =  (
     os.path.join(BASE_DIR,  "static" ), #此处必须,为新添加
)

在html文件中引入bootstrap文件

1
2
3
4
<link rel = "stylesheet"  type = "text/css"  href = "static/css/background.css"  / >
<link rel = "stylesheet"  type = "text/css"  href = "static/bootstrap-3.3.5-dist/css/bootstrap.min.css"  / >
<script src = "static/js/jquery-2.1.1.min.js" >< / script>
<script  src = "static/bootstrap-3.3.5-dist/js/bootstrap.min.js" >

效果图:

wKiom1jImB_zoJWaAAAlCqFypOg551.png-wh_50


 本文转自 matengbing 51CTO博客,原文链接:http://blog.51cto.com/matengbing/1906610


相关文章
|
7月前
|
前端开发 索引 容器
bootstrap4-部分总结
bootstrap4-部分总结。
|
7月前
|
开发框架 前端开发 JavaScript
Bootstrap
Bootstrap 是一个流行的前端开发框架,用于构建现代、响应式、移动设备优先的 Web 应用程序。它提供了大量的预构建组件和样式,使开发人员可以快速构建美观且功能强大的网站
86 4
|
7月前
|
前端开发
bootstrap
bootstrap
33 0
|
8月前
|
移动开发 前端开发 JavaScript
Bootstrap4
Bootstrap 是全球最受欢迎的前端组件库,用于开发响应式布局、移动设备优先的 WEB 项目。Bootstrap4 是一套用于 HTML、CSS 和 JS 开发的开源工具集。利用我们提供的 Sass 变量和大量 mixin、响应式栅格系统、可扩展的预制组件、基于 jQuery 的强大的插件系统,能够快速为你的想法开发出原型或者构建整个 app 。
85 0
|
前端开发
1、Bootstrap
1、Bootstrap
102 0
|
前端开发
bootstrap练习
bootstrap练习
86 0
|
前端开发 容器
一篇文章学会使用BootStrap
一篇文章学会使用BootStrap
229 0
一篇文章学会使用BootStrap
|
前端开发 JavaScript 编解码
Bootstrap 小结
Bootstrap 小结 Bootstrap4特点:1.兼容IE10+ 2.使用flexbox 布局 3.抛弃Nomalize.
1160 0
|
前端开发
|
前端开发 JavaScript 容器