django使用bootstrap前端框架

一、下载bootstrap相关文件，放在项目目录中。在blog 应用中新建static目录，bootstrap文件放在此目录下。

bootstrap下载网址：http://v3.bootcss.com/getting-started/

项目目录：

然后根据django1.8.2文档的简单教程修改HTML文件。文档链接：http://python.usyiyi.cn/django_182/intro/tutorial06.html

需要修改的地方：

1、使用静态文件标签

{% load staticfiles %}

2、修改链接

<link href="{% static ‘bootstrap/css/bootstrap.css‘ %}" rel="stylesheet"><script src="{% static ‘bootstrap/js/bootstrap.min.js‘ %}"></script>

ps:下一步使用bootstrap规划页面

时间： 2024-10-11 16:45:03

django使用bootstrap前端框架的相关文章

bootstrap 前端框架学习笔记

1.认识一下 bootstrap 带来的优雅效果: 代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 模板</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &

Bootstrap百度百科介绍: Bootstrap,来自 Twitter,是目前很受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷.它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架.Bootstrap提供了优雅的HTML和CSS规范,它即是由动态CSS语言Less写成. 这是优雅的分割线..................................

BootStrap 前端框架介绍

Bootstrap简介 Bootstrap 是 Twitter 推出的一个开源的用于前端开发的工具包.是一个CSS/HTML/JavaScript框架.Bootstrap 是基于HTML5和CSS3开发的,包含丰富的组件,根据这些组件可以快速的搭建一个漂亮.功能完备的网站.其中包括以下组件:下拉菜单.按钮组.导航.导航条等等.可以说 Bootstrap 是一个简洁简单的前端开发框架,可以让Web开发更迅速更简单. 学习和下载资料主要可以通过官方中文网 www.bootcss.com . Boo

Bootstrap 前端框架，迅速开发

Bootstrap 编码规范by @mdo Bootstrap 编码规范:编写灵活.稳定.高质量的 HTML 和 CSS 代码的规范. Headroom.js隐藏或展示页面元素 Headroom.js 是一个轻量级.纯 JavaScript 组件,用来隐藏或展现页面上的元素,为你的页面留下更多展示内容的空间. Open CDN开放CDN服务 Bootstrap中文网联合又拍云存储共同推出了开放CDN服务,我们对广泛的前端开源库提供了稳定的存储和带宽的支持,例如Bootstrap.jQuery等.

bootstrap前端框架使用总结分享

1.bootstrap 排版全局样式style.css: 1.移除body的margin声明 2.设置body的背景色为白色 3.为排版设置了基本的字体.字号和行高 4.设置全局链接颜色,且当链接处于悬浮":hover"状态时才会显示下划线样式标题 h1-h6 HTML 中的所有标题标签, 到均可使用.另外,还提供了 .h1 到 .h6 类选择器,为的是给内联(inline)属性的文本赋予标题的样式. 1.重新设置了margin-top和margin-bottom的值 2.h1~

Bootstrap前端框架入门

bootstrap下载:http://v3.bootcss.com/getting-started/ bootstrap中文文档:http://www.bootcss.com/ jquery下载:http://jquery.com/download/ 工具:HBuilder 下载地址:http://www.dcloud.io/ 下面是我刚学习的例子,主要是熟悉bootstrap自带的class. login.html内容如下: <!DOCTYPE html> <html> <

Bootstrap 前端框架遇到的问题解决方案

bootstrap实现导航栏的响应式布局,当在小屏幕.手机屏幕浏览时自动折叠隐藏直接放代码,更容易理解.下次可以套这个代码 <!DOCTYPE html> <html> <head> <title>bootstrap实现导航栏的响应式布局,当在小屏幕.手机屏幕浏览时自动折叠隐藏</title> <meta http-equiv="Content-Type" content="text/html; charse

吴裕雄 Bootstrap 前端框架开发——Bootstrap 排版：标题

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 实例 - 标题</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css&quo

吴裕雄 Bootstrap 前端框架开发——Bootstrap 排版：内联子标题

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 实例 - 内联子标题</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css&