您好,欢迎来到站长目录(28sn.com)!


Django web开发系列(六)前端页面之Bootstrap

来源:本站原创 浏览:1433次 时间:2019-08-19
一 前言

在上节已经了解到,使用模板语法可以实现把后台返回的动态数据渲染到前端页面,但这个页面太单调、没有css的装扮,可能丑的不忍直视。而css\js相对于后端开发人员来说,可能写起来又不太顺手或者经验匮乏,如果没有专业的前端人员配合,最好的方法就是引入现成的前端css框架,Bootstrap就是最好的css框架之一。

二 Django项目引入Bootstrap

1) 下载Bootstrap从https://v3.bootcss.com/getting-started/#download下载Bootstrap,选择用于生产环境的Bootstrap下载即可;2) 配置Bootstrap路径解压下载后的Bootstrap并放在Django的static目录(新建用于专门存放静态文件),然后在settings.py配置路径,如:

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

3) HTML引入BootstrapCSS:

<link rel="stylesheet" href="/static/bootstrap-3.3.7-dist/css/bootstrap.min.css">

JS:

<script src="/static/bookms/js/jquery-3.3.1.min.js"></script><script src="/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>

注意:Bootstrap依赖JQuery,所以需要引入。

三 Bootstrap的作用

如果是第一次接触Bootstrap,可能会疑惑它是个什么玩意儿?为什么要用它呢?Bootstrap是Twitter推出的一款前端测试框架,通俗的将,它封装了很多漂亮、高大上的控件,通过在html中使用控件的类名就能引入封装的控件,让页面显得漂亮起来。另外,这样的页面是响应式布局,一次编写就能自动适配PC、手机、平板等设备。站在巨人的肩膀上,是不是顿时觉得轻松很多。

四 使用Bootstrap

Bootstrap提供了很多封装好的控件,参考https://v3.bootcss.com/components/,【组件】页面,借用该页面的话说,“无数可复用的组件,包括字体图标、下拉菜单、导航、警告框、弹出框等更多功能”。下面是图书管理系统页面使用的Bootstrap导航组件:

6.png

稍加修改,就为我所用了:

7.png

注意使用Bootstrap时,按照第二部分说明,在html页面引入CSS\JS。

其他

关于python学习、分享、交流,笔者开通了微信公众号【小蟒社区】,感兴趣的朋友可以关注下,欢迎加入,建立属于我们自己的小圈子,一起学python。

推荐站点

  • 我爱发烧音乐我爱发烧音乐

    我爱发烧音乐囊括了从流行音乐到古典音乐多个类型的音乐作品,专栏推荐最新的音乐,提供音乐排名榜单!可供免费线上收听音乐,歌曲流畅,音效极佳! 网站提供的钢琴以及二胡专栏,可供收听者,陶冶情操,改善心情,是难得的轻音乐典藏!

    www.520fs.com
  • 世纪音乐网世纪音乐网

    世纪音乐网是专业的在线音乐试听MP3下载网站。歌曲总计30余万首,收录了网上最新歌曲和流行音乐,DJ舞曲,非主流音乐,经典老歌,劲舞团歌曲,搞笑歌曲,儿童歌曲,英文歌曲等。是您上网听歌的最佳网站。

    www.ssjj.com
  • 怒江大峡谷网怒江大峡谷网

    怒江大峡谷网内容包括:新闻、要闻、怒江报、视频、文化、民俗、人文、音乐、政务、公告、政策等地方信息。

    www.nujiang.cn
  • 杭州网杭州网

      杭州网是杭州地区唯一的新闻门户网站,由中共杭州市委宣传部、杭州日报报业集团和杭州广播电视集团共同组建的杭州网络传媒有限公司运营。

    www.hangzhou.com.cn
  • 深圳在线深圳在线

      深圳在线 www.szol.net是深圳本地最大、最早的地方生活资讯网站之一,网站名“深圳在线www.szol.net”由南方报业传媒集团编辑委员会总编辑、南方日报社总编辑、南方都市报总编辑、南方书画院名誉院长王春芙亲笔题名,深圳在线www.szol.net团队与深圳热线www.szonline.net、奥一网www.oeeee.com都源于全国最早成立于1996年的知名网络公司——深圳万用网。

    www.szol.net

鄂公网安备 42062502000001号