Djangoweb开发系列（六）前端页面之Bootstrap-创新互联

一 前言

在上节已经了解到，使用模板语法可以实现把后台返回的动态数据渲染到前端页面，但这个页面太单调、没有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引入Bootstrap CSS：

<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导航组件:

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

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

其他

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

另外有需要云服务器可以了解下创新互联cdcxhl.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

新闻名称：Djangoweb开发系列（六）前端页面之Bootstrap-创新互联
文章分享：https://www.cdcxhl.com/article6/djsjig.html

成都网站建设公司_创新互联，为您提供微信公众号、动态网站、网页设计公司、建站公司、网站导航、域名注册

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联