Django-引入Bootstrap

Posted 2021-04-29 测试家

概述

Bootstrap 是一个用于快速开发Web 应用程序和网站的前端框架。Bootstrap 是基于html、CSS、javascript 的。

为什么使用 Bootstrap

移动设备优先：自 Bootstrap 3 起，框架包含了贯穿于整个库的移动设备优先的样式。

浏览器支持：所有的主流浏览器都支持 Bootstrap。

容易上手：只要您具备 HTML 和CSS 的基础知识，您就可以开始学习 Bootstrap。

响应式设计：Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。

它为开发人员创建接口提供了一个简洁统一的解决方案。

它包含了功能强大的内置组件，易于定制。

它还提供了基于 Web 的定制。

它是开源的。

Bootstrap 包的内容

基本结构：Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。这将在 Bootstrap 基本结构 部分详细讲解。

CSS：Bootstrap 自带以下特性：全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的 class，以及一个先进的网格系统。

组件：Bootstrap 包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等。

JavaScript 插件：Bootstrap包含了十几个自定义的 jQuery 插件。您可以直接包含所有的插件，也可以逐个包含这些插件。

定制：您可以定制 Bootstrap 的组件、LESS 变量和 jQuery 插件来得到您自己的版本。

Bootstrap环境安装

官网下载 Bootstrap

http://getbootstrap.com/ 

从上下载 Bootstrap 的最新版本

也可以在

https://v3.bootcss.com/getting-started/#download

中文网站下载

Bootstrap 源代码

如果下载了 Bootstrap 源代码，那么文件结构将如下所示：

less/、js/和fonts/ 下的文件分别是Bootstrap CSS、JS和图标字体的源代码。

dist/ 文件夹包含了上面预编译下载部分中所列的文件和文件夹。

docs-assets/、examples/和所有的 *.html 文件是 Bootstrap 文档。

引入Bootstrap

下载bootstrap源码，在项目根目录（manage.py同级）下新建一个static目录，并将解压后的bootstrap-3.3.7-dist目录，整体拷贝到static目录中，如下图所示：

由于Bootstrap依赖JQuery，所以我们需要提前下载并引入JQuery，在static目录下，新建一个css和js目录，作为以后的样式文件和js文件的存放地，将我们的jquery文件拷贝到static/js目录下。

然后打开项目的settings文件，在最下面添加配置，用于指定静态文件的搜索目录：

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

以上就是django- 引入Bootstrap基础讲解 ，后续详细讲解django对Bootstrap的引用。 大家学到了吗，欢迎点赞、评论、打赏作者，更多知识点将在后续继续分享学习。