django 008 应用bootstrap美化页面

一、选择css框架

1.为什么用css框架

2.如何选择css框架

二、部署Bootstrap：

1.下载bootstrap：网站（www.bootcss.com）下载-->bootstrap中文文档v3.3.7-->下载Bootstrap-->本地。（CDN提供网络连接使用）解压文件夹（min是压缩过的文件小一些）。

2.将文件夹中css、fonts、js三个文件拷贝到static/bootstrap-3.3.7文件夹中。（删除一些不需要的文件，保留css中bootstrap.min.css和bootstrap.min.css.map两个文件以及js中bootstrap.min.js文件）

3.引用：

参照 www.bootstrap.com-->起步页面-->基本模板。设置

引进头部设置：<meta>标签头部信息，引进css、js文件（基本模板找到jQuery库链接，打开后存为本地文件，然后引用）。

 1 <html lang='zh-hans'>
 2 <head>
 3     <meta charset="UTF-8">
 4     <meta http-equiv="X-UA-Compatible" content="IE=edge">  /*针对IE浏览器设置*/
 5     <meta name="viewport" content="width=device-width, initial-scale=1">  /*响应式设置，根据不同屏幕自动布局*/
 6     
 7     <title>{% block title %}{% endblock %}</title>
 8     
 9     <link rel="stylesheet" href="{% static 'css/base.css' %}">
10     <link rel="stylesheet" href="{% static 'bootstrap/css/bootstrap.min.css' %}">
11     
12     <script type="text/javascript" src="{% static 'jquery-1.12.4.min.js' %}"></script>  /*jquery 库文件 */
13     <script type="text/javascript" src="{% static 'bootstrap/js/bootstrap.min.js' %}"></script>
14     
15     {% block header_extends %}{% endblock %}
16 </head>

4. 布局容器----栅格系统： <div class="container"> 用于固定宽度并支持响应式布局容器。

<div class="container-fluid">用于100%宽度占据全部视口的容器

极小屏幕手机 col-xs- 小屏幕平板 col-sm- 中屏幕笔记本 col-md- 大屏幕 col-lg-

5.设置导航条参照导航条进行设置-->删除base.css中的设置。

 1     <div class="navbar navbar-default" role="navigation">
 2         <div class="container-fluid">
 3             <div class="navbar-header">
 4                 <a class="navbar-brand" href="{% url 'home' %}"><h3>个人博客网站</h3></a>
 5             </div>
 6             <ul class="nav navbar-nav">
 7                 <li><a href="{% url 'home' %}">首页</a></li>
 8                 <li><a href="{% url 'myblog' %}">博客</a></li>
 9             </ul>
10         </div>        
11     </div>

导航条当页面缩小是显示下拉菜单。添加<button>标签及<span>标签。以及对应的id。

 1 <body>
 2     <div class="navbar navbar-default" role="navigation">
 3         <div class="container-fluid">
 4             <div class="navbar-header">
 5                 <a class="navbar-brand" href="{% url 'home' %}"><h3>个人博客网站</h3></a>
 6                 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
 7                    <span class="icon-bar"></span>
 8                    <span class="icon-bar"></span>
 9                    <span class="icon-bar"></span>
10                 </button>  
11             </div>
12             <div id="bs-example-navbar-collapse-1" class="collapse navbar-collapse" >
13                <ul class="nav navbar-nav">
14                    <li><a href="{% url 'home' %}">首页</a></li>
15                    <li><a href="{% url 'myblog' %}">博客</a></li>
16                </ul>
17             </div>            
18         </div>        
19     </div>        
20     {% block content %}{% endblock %}    
21 </body>
22 </html>

设置打开相应页面时，导航栏中显示激活。设置active状态。

图中首页为激活状态。

在base.html 中设置class属性，引入块标签block。在index.html和blog_list.html添加块。

<li class="{% block nav_index_active %}{% endblock %}">
     <a href="{% url 'home' %}">首页</a>
</li>
<li class="{% block nav_blog_list_active %}{% endblock %}">
     <a href="{% url 'myblog' %}">博客</a>
</li>

{% block nav_index_active %}active{% endblock %}
{% block nav_blog_list_active %}active{% endblock %}

posted on 2018-11-19 22:23 南飞雁ht 阅读(111) 评论(0) 收藏举报