Django开发实践-2

最新推荐文章于 2024-08-21 08:25:58 发布
最新推荐文章于 2024-08-21 08:25:58 发布
阅读量628 收藏 1
点赞数
分类专栏： Django 文章标签： django bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhaoxz1985/article/details/74591093
版权

Bootstrap学习

Bootstrap包的内容：

  • 基本结构： Bootstrap提供了一个带有网格系统、链接样式、背景的基本结构。

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

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

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

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

HTML模板：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Bootstrap 模板</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

        <!-- HTML5 Shim 和 Respond.js 用于让IE8支持HTML5元素和媒体查询 -->
        <!-- 注意：如果通过file:// 引入Respond.js文件，则该文件无法起效果 -->
        <!-- [if lt IE 9]>
            <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
            <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
        <![endif]-->
    </head>
    <body>
        <h1>Hello World!</h1>

        <!-- jQuery (Bootstrap的JavaScript插件需要引入jQuery) -->
        <script src="https://code.jquery.com/jquery.js"></script>
        <!-- 包括所有已编译的插件 -->
        <script src="js/bootstrap.min.js"></script>
    </body>
</html>

jquery.js、bootstrap.min.js、bootstrap.min.css文件，用于让一个常规HTML文件变更为使用Bootstrap的模板。


Bootstrap CDN推荐：


Bootstrap的简单学习：

这个bootstrap源自Twitter，是目前最受欢迎的前端框架，全学一遍，我就不用做现在的工作了，就捡我们需要的学吧，我们主要是用到了导航栏、表格、分页这些内容，所以就针对这三章的内容进行简单的学习。


Bootstrap导航栏：

在Bootstrap导航栏的核心中，导航栏包括了站点名称和基本的导航定义样式。

  • 默认的导航栏：

    • 向<nav>标签添加class=”navbar navbar-default”。

    • 向上面的元素添加role=”navigation”，有助于增加可访问性。

    • 向<div>标签添加一个标题class=”navbar-header”，内部包含了带有class=”navbar-brand”的<a>元素，这会让文本看起来更大一号。

    • 为了向导航栏添加链接，只需要简单地添加带有class=”nav navbar-nav”的无序列表即可。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>股票管理助手</title>
        <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
        <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <body>
        <nav class="navbar navbar-default" role="navigation">
            <div class="container-fluid">
                <div class="navbar-header">
                    <a class="navbar-brand" href="#">股票管理助手</a>
                </div>
                <div>
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="#">iOS</a></li>
                        <li><a href="#">SVN</a></li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                Java
                                <b class="caret"></b>
                            </a>
                            <ul class="dropdown-menu">
                                <li><a href="#">jmeter</a></li>
                                <li><a href="#">EJB</a></li>
                                <li><a href="#">Jasper Report</a></li>
                                <li class="divider"></li>
                                <li><a href="#">分离的链接</li>
                                <li class="divider"></li>
                                <li><a href="#">另一个分离的链接</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </body>
</html>

运行后的效果图：

这里写图片描述

  • 导航栏中的表单：

导航栏中的表单使用 .navbar-form class。这确保了表单适当的垂直对齐和在较窄的视窗中折叠的行为。使用对齐方式选项来决定导航栏中的内容放置在哪里。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Bootstrap 实例 - 导航栏中的表单</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid"> 
    <div class="navbar-header">
        <a class="navbar-brand" href="#">菜鸟教程</a>
    </div>
    <div>
        <form class="navbar-form navbar-left" role="search">
            <div class="form-group">
                <input type="text" class="form-control" placeholder="Search">
            </div>
            <button type="submit" class="btn btn-default">提交</button>
        </form>
    </div>
    </div>
</nav>

</body>
</html>

运行后的效果图：

这里写图片描述

  • 导航栏中的按钮：

使用class .navbar-btn向不在<form>中的<button>元素添加按钮，按钮在导航栏上垂直居中。.navbar-btn可被使用在<a>和<input>元素上。

注意：不要在.navbar-nav内的<a>元素上使用.navbar-btn，因为它不是标准的button class。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Bootstrap 实例 - 导航栏中的按钮</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
    <div class="navbar-header">
        <a class="navbar-brand" href="#">菜鸟教程</a>
    </div>
    <div>
        <form class="navbar-form navbar-left" role="search">
            <div class="form-group">
                <input type="text" class="form-control" placeholder="Search">
            </div>
            <button type="submit" class="btn btn-default">提交按钮</button>
        </form>
        <button type="button" class="btn btn-default navbar-btn">
            导航栏按钮
        </button>
    </div>
    </div>
</nav>

</body>
</html>

运行后的效果图：

这里写图片描述

  • 导航栏中的文本：

如果需要在导航栏中包含文本字符串，需要使用 class .navbar-text。通常与<p>标签一起使用，确保适当的前导和颜色。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Bootstrap 实例 - 导航栏中的文本</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid"> 
    <div class="navbar-header">
        <a class="navbar-brand" href="#">菜鸟教程</a>
    </div>
    <div>
        <p class="navbar-text">Runoob 用户登录</p>
    </div>
    </div>
</nav>

</body>
</html>

运行后的效果图：

这里写图片描述

  • 结合图标的导航链接：

如果想在常规的导航栏导航组件内使用图标，那么请使用class glyphicon glyphicon-*来设置图标。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap 实例 - 非导航链接</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">菜鸟教程</a>
    </div>
    <ul class="nav navbar-nav navbar-right">
      <li><a href="#"><span class="glyphicon glyphicon-user"></span> 注册</a></li>
      <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> 登录</a></li>
    </ul>
  </div>
</nav>

</body>
</html>

运行后的效果图：

这里写图片描述

  • 组件对齐方式：

可以使用工具 class .navbar-left 或 .navbar-right向左或向右对齐导航栏中的导航链接、表单、按钮、文本这些组件，这两个class逗会在指定的方向上添加CSS浮动。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Bootstrap 实例 - 组件对齐方式</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid"> 
    <div class="navbar-header">
        <a class="navbar-brand" href="#">菜鸟教程</a>
    </div>
    <div>
        <!--向左对齐-->
        <ul class="nav navbar-nav navbar-left">
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                    Java
                    <b class="caret"></b>
                </a>
                <ul class="dropdown-menu">
                    <li><a href="#">jmeter</a></li>
                    <li><a href="#">EJB</a></li>
                    <li><a href="#">Jasper Report</a></li>
                    <li class="divider"></li>
                    <li><a href="#">分离的链接</a></li>
                    <li class="divider"></li>
                    <li><a href="#">另一个分离的链接</a></li>
                </ul>
            </li>
        </ul>
        <form class="navbar-form navbar-left" role="search">
            <button type="submit" class="btn btn-default">
                向左对齐-提交按钮
            </button>
        </form>
        <p class="navbar-text navbar-left">向左对齐-文本</p>
        <!--向右对齐-->
        <ul class="nav navbar-nav navbar-right">
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                    Java <b class="caret"></b>
                </a>
                <ul class="dropdown-menu">
                    <li><a href="#">jmeter</a></li>
                    <li><a href="#">EJB</a></li>
                    <li><a href="#">Jasper Report</a></li>
                    <li class="divider"></li>
                    <li><a href="#">分离的链接</a></li>
                    <li class="divider"></li>
                    <li><a href="#">另一个分离的链接</a></li>
                </ul>
            </li>
        </ul>
        <form class="navbar-form navbar-right" role="search">
            <button type="submit" class="btn btn-default">
                向右对齐-提交按钮
            </button>
        </form>
        <p class="navbar-text navbar-right">向右对齐-文本</p>
    </div>
    </div>
</nav>

</body>
</html>

运行后的效果图：

这里写图片描述

  • 固定到顶部：

Bootstrap的导航栏key动态定位，默认情况下，它是块级元素，它是基于在HTML中放置的位置定位的。通过一些帮助器类，可以把它放置在页面的顶部或底部，还可以随着页面一起滚动显示。

注意：

为了防止导航栏与页面主体中的其他内容的顶部相交错，需要在<body>标签中添加至少50像素的内边距（padding），内边距的值可以根据实际情况进行设置。但是如果设置导航栏为随页面一起滚动显示的情况，那么就不能设置内边距值。

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">固定到顶部
<nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">固定到底部
<nav class="navbar navbar-default navbar-static-top" role="navigation">随页面一起滚动显示
  • 反色的导航栏：

为了创建一个带有黑色背景白色文本的反色的导航栏，只需要简单地向 .navbar class 添加 .navbar-inverse class 即可。

<nav class="navbar navbar-inverse" role="navigation">


Bootstrap表格：

Bootstrap提供了一个清晰的创建表格的布局，下表列出了Bootstrap支持的一些表格元素：

标签描述
<table>为表格添加基础样式
<thead>表格标题行的容器元素（<tr>），用来标识表格列
<tbody>表格主体中的表格行的容器元素（<tr>）
<tr>一组出现在单行上的表格单元格的容器元素（<td> 或 <th>）
<td>默认的表格单元格
<th>特殊的表格单元格，用来标识列或行（取决于范围和位置），必须在<thead>内使用
<caption>关于表格存储内容的描述或总结


  • 表格类：
<table class="table"> 为任意<table>添加基本样式只有横向分隔线
<table class="table table-striped"> 在<tbody>内添加斑马线形式的条纹
<table class="table table-bordered"> 为所有表格的单元格添加边框
<table class="table table-hover"> 在<tbody>内的任一行启用鼠标悬停状态
<table class="table table-condensed"> 让表格更加紧凑
  • <tr>,<th>和<td>类：
<tr class="active"> .active类将悬停的颜色应用在行或者单元格上
<tr class="success"> .success类表示执行成功的操作
<tr class="info"> .info类表示信息变化的操作
<tr class="warning"> .warning类表示一个警告操作
<tr class="danger"> .danger类表示一个危险的操作
  • 基本的表格：

基本表格，只带内边距和水平分割的表格

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"> 
    <title>Bootstrap 实例 - 基本的表格</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">  
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<table class="table">
    <caption>基本的表格布局</caption>
   <thead>
      <tr>
         <th>名称</th>
         <th>城市</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>Tanmay</td>
         <td>Bangalore</td>
      </tr>
      <tr>
         <td>Sachin</td>
         <td>Mumbai</td>
      </tr>
   </tbody>
</table>

</body>
</html>

效果图：

这里写图片描述

  • 条纹表格：

通过添加 .table-striped，将在<tbody>内的行上看到条纹。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"> 
    <title>Bootstrap 实例 - 条纹表格</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">  
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<table class="table table-striped">
    <caption>条纹表格布局</caption>
    <thead>
        <tr>
            <th>名称</th>
            <th>城市</th>
            <th>邮编</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Tanmay</td>
            <td>Bangalore</td>
            <td>560001</td>
        </tr>
        <tr>
            <td>Sachin</td>
            <td>Mumbai</td>
            <td>400003</td>
        </tr>
        <tr>
            <td>Uma</td>
            <td>Pune</td>
            <td>411027</td>
        </tr>
    </tbody>
</table>

</body>
</html>

效果图：

这里写图片描述

  • 边框表格：

通过添加 .table-bordered，将在每个元素周五都有边框，且占整个表格是圆角的。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"> 
    <title>Bootstrap 实例 - 边框表格</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">  
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<table class="table table-bordered">
    <caption>边框表格布局</caption>
    <thead>
        <tr>
            <th>名称</th>
            <th>城市</th>
            <th>邮编</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Tanmay</td>
            <td>Bangalore</td>
            <td>560001</td>
        </tr>
        <tr>
            <td>Sachin</td>
            <td>Mumbai</td>
            <td>400003</td>
        </tr>
        <tr>
            <td>Uma</td>
            <td>Pune</td>
            <td>411027</td>
        </tr>
    </tbody>
</table>

</body>
</html>

效果图：

这里写图片描述

  • 悬停表格：

通过添加 .table-hover，当指针悬停在行上时会出现浅灰色背景。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"> 
    <title>Bootstrap 实例 - 悬停表格</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">  
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<table class="table table-hover">
    <caption>悬停表格布局</caption>
    <thead>
        <tr>
            <th>名称</th>
            <th>城市</th>
            <th>邮编</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Tanmay</td>
            <td>Bangalore</td>
            <td>560001</td>
        </tr>
        <tr>
            <td>Sachin</td>
            <td>Mumbai</td>
            <td>400003</td>
        </tr>
        <tr>
            <td>Uma</td>
            <td>Pune</td>
            <td>411027</td>
        </tr>
    </tbody>
</table>

</body>
</html>

效果图：

这里写图片描述

  • 精简表格：

通过添加 .table-condensed，行内边距被切为两半，以便让表格看起来更紧凑。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"> 
    <title>Bootstrap 实例 - 精简表格</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">  
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<table class="table table-condensed">
    <caption>精简表格布局</caption>
    <thead>
        <tr>
            <th>名称</th>
            <th>城市</th>
            <th>邮编</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Tanmay</td>
            <td>Bangalore</td>
            <td>560001</td>
        </tr>
        <tr>
            <td>Sachin</td>
            <td>Mumbai</td>
            <td>400003</td>
        </tr>
        <tr>
            <td>Uma</td>
            <td>Pune</td>
            <td>411027</td>
        </tr>
    </tbody>
</table>

</body>
</html>

效果图：

这里写图片描述

  • 上下文类：

通过添加不同的上下文类，可以让表格行或单个单元格变成不同的背景颜色。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Bootstrap 实例 - 上下文类</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">  
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<table class="table">
    <caption>上下文表格布局</caption>
    <thead>
        <tr>
            <th>产品</th>
            <th>付款日期</th>
            <th>状态</th>
        </tr>
    </thead>
    <tbody>
        <tr class="active">
            <td>产品1</td>
            <td>23/11/2013</td>
            <td>待发货</td>
        </tr>
        <tr class="success">
            <td>产品2</td>
            <td>10/11/2013</td>
            <td>发货中</td>
        </tr>
        <tr  class="warning">
            <td>产品3</td>
            <td>20/10/2013</td>
            <td>待确认</td>
        </tr>
        <tr  class="danger">
            <td>产品4</td>
            <td>20/10/2013</td>
            <td>已退货</td>
        </tr>
    </tbody>
</table>

</body>
</html>

效果图：

这里写图片描述

  • 响应式表格：

通过把任意 .table 包在 .table-responsive class内，可以让表格水平滚动以适应小型设备（小于768px），当在大于768px宽的大型设备上查看时，看不到任何的差别。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Bootstrap 实例 - 响应式表格</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">  
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="table-responsive">
    <table class="table">
        <caption>响应式表格布局</caption>
        <thead>
            <tr>
                <th>产品</th>
                <th>付款日期</th>
                <th>状态</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>产品1</td>
                <td>23/11/2013</td>
                <td>待发货</td>
            </tr>
            <tr>
                <td>产品2</td>
                <td>10/11/2013</td>
                <td>发货中</td>
            </tr>
            <tr>
                <td>产品3</td>
                <td>20/10/2013</td>
                <td>待确认</td>
            </tr>
            <tr>
                <td>产品4</td>
                <td>20/10/2013</td>
                <td>已退货</td>
            </tr>
        </tbody>
</table>
</div>      

</body>
</html>

效果图：

这里写图片描述


Bootstrap分页

分页（Pagination）是一种无序列表，Bootstrap像处理其他界面元素一样处理分页。

Class描述
.pagination添加该class来在页面上显示分页
.disabled/.active可以自定义链接，通过使用 .disabled来定义不可点击的链接，通过使用 .active来指示当前的页面
.pagination-lg/.pagination-sm使用这些class来获取不同大小的项


  • 默认的分页：
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"> 
    <title>Bootstrap 实例 - 默认的分页</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">  
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<ul class="pagination">
    <li><a href="#">&laquo;</a></li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">&raquo;</a></li>
</ul>

</body>
</html>

效果图：

这里写图片描述

  • 给分页增加状态：
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"> 
    <title>Bootstrap 实例 - 分页的状态</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">  
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<ul class="pagination">
    <li><a href="#">&laquo;</a></li>
    <li class="active"><a href="#">1</a></li>
    <li class="disabled"><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">&raquo;</a></li>
</ul>

</body>
</html>

效果图：

这里写图片描述

  • 分页的大小：

通过.pagination-*来设置分页的大小。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"> 
    <title>Bootstrap 实例 - 分页的大小</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">  
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<ul class="pagination pagination-lg">
    <li><a href="#">&laquo;</a></li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">&raquo;</a></li>
</ul><br>
<ul class="pagination">
    <li><a href="#">&laquo;</a></li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">&raquo;</a></li>
</ul><br>
<ul class="pagination pagination-sm">
    <li><a href="#">&laquo;</a></li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">&raquo;</a></li>
</ul>

</body>
</html>

效果图：

这里写图片描述


Bootstrap的翻页

如果想创建一个简单的分页链接为用户提供导航，可通过翻页来实现，翻页也是无序列表，默认情况下，链接是居中显示，下表列出了Bootstrap处理翻页的class：

Class描述
.pager添加该class来获得翻页链接
.previous/.next使用 class .previous把链接向左对齐，使用 .next把链接向右对齐
.disabled添加该class来获得一个颜色变淡的外观
.pagination分页链接
.pagination-lg更大尺寸的分页链接
.pagination-sm更小尺寸的分页链接
.active当前放弃页面链接样式


  • 默认的翻页：
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"> 
    <title>Bootstrap 实例 - 默认的翻页</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">  
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<ul class="pager">
    <li><a href="#">Previous</a></li>
    <li><a href="#">Next</a></li>
</ul>

</body>
</html>

效果图：

这里写图片描述

  • 对齐的链接：
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"> 
    <title>Bootstrap 实例 - 翻页中对齐的链接</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">  
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<ul class="pager">
    <li class="previous"><a href="#">&larr; Older</a></li>
    <li class="next"><a href="#">Newer &rarr;</a></li>
</ul>

</body>
</html>

效果图：

这里写图片描述

  • 翻页的状态：
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"> 
    <title>Bootstrap 实例 - 翻页的状态</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">  
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<ul class="pager">
    <li class="previous disabled"><a href="#">&larr; Older</a></li>
    <li class="next"><a href="#">Newer &rarr;</a></li>
</ul>

</body>
</html>

效果图：

这里写图片描述

二的平方
关注
专栏目录
Django入门实践- 开启后台admin管理
allensong815260的博客
07-27 734
1.启用默认admin管理后台 a.添加sqlite db b.添加完成之后执行Test Connection，若是没有驱动会提示下载驱动 c.执行指令 # python manage.py migrate Operations to perform: Apply all migrations: admin, auth, contenttypes, sessions Running migrations: Applying contenttypes.0001_initial... O
django-cors-headers 使用指南
gitblog_00399的博客
08-15 827
django-cors-headers 使用指南 django-cors-headers项目地址:https://gitcode.com/gh_mirrors/dja/django-cors-headers 项目介绍 django-cors-headers 是一个专为 Django 应用设计的库，用于处理跨域资源共享（CORS, Cross-Origin Resource Sharing）所需的...
Django-Vue-Admin项目指南
最新发布
gitblog_00496的博客
08-21 1026
Django-Vue-Admin项目指南 django-vue-admin基于RBAC模型权限控制的中小型应用的基础开发平台,前后端分离,后端采用django+django-rest-framework,前端采用vue+ElementUI,移动端采用uniapp+uView(可发布h5和小程序).项目地址:https://gitcode.com/gh_mirrors/dj/django-vue-...
Django-Vue-Admin-Pro 教程
gitblog_01156的博客
08-08 437
Django-Vue-Admin-Pro 教程 django-vue-admin-pro项目地址:https://gitcode.com/gh_mirrors/dj/django-vue-admin-pro 1. 项目介绍 Django-Vue-Admin-Pro 是一个全面开源的快速开发平台，专为个人和企业免费使用。它结合了前端的 D2Admin 和 Vue.js，以及后端的 Python 语...
Django开发实践-1
zhaoxz1985的博客
06-27 1037
参考虫师的《Web接口开发与自动化测试基于Python语言》，决定自己开发一个简单的Django项目，以下就是全部开发过程。
Django实践-05Cookie和Session
IT从业者的成长历程
03-10 1496
本文主要是Django系列博客。本文是Django静态资源与Ajax请求示例。1.创建静态资源目录2.配置settings.py文件3.修改urls.py文件4.修改views.py文件5.修改teachers.html文件。
运维开发实践 - Django Redis Sentinel
Yuan_xii的博客
04-10 323
当我们的Django需要使用redis sentinel模式时，会安装。太久没更新，其与我们Django，django-redis之间不兼容；
Django实践-07日志调试,Django-Debug-Toolbar配置与sql优化
IT从业者的成长历程
03-31 810
本文主要是Django系列博客。本文是Django日志配置与Django-Debug-Toolbar配置。日志配置:1.配置settings.py中的LOGGINGDjango-Debug-Toolbar配置:1.安装依赖库2.修改settings.py文件3.修改urls.py文件4.测试运行。
54.Python-web框架-Django-免费模板django-datta-able
坐忘了说的画
06-14 1830
当你在一个基础模板（通常是布局模板）中使用 block 标签时，你实际上是在标记那些可以在继承该基础模板的子模板中自定义内容的部分。这对于实现模板的继承和内容重用至关重要。例如：base.html中定义的{% block content %}{% endblock content %}
Django实践-01入门
IT从业者的成长历程
02-19 1173
Django是一个免费的开源的python WEB框架。本文主要是Django系列博客。包括虚拟环境安装，Django安装，配置修改与运行测试。
django-oauth-toolkit：Djangonauts的OAuth2好东西！
02-05
"django-oauth-toolkit" 是一个基于 Django 框架的 OAuth2 库，由 Djangonauts 社区开发。标题强调了这个库是 "好东西"，暗示它在实现 OAuth2 认证和授权流程方面非常实用且功能强大。 **描述分析：** 描述与标题...
django-excel-response：Django包，可轻松呈现Excel电子表格
02-04
10. **最佳实践**: 在实际项目中，使用django-excel-response时，建议考虑分页导出，避免一次性处理大量数据；同时，提供合理的请求限速和错误重试机制，以防止服务过载。 通过以上知识点，我们可以看出django-...
DRF跨域后端解决之django-cors-headers的使用
09-19
### DRF跨域问题与django-cors-headers的解决方案 #### 跨域问题概述 在Web开发中，出于安全考虑，浏览器实施了同源策略...希望上述内容能帮助你在实践中更好地运用`django-cors-headers`来解决DRF中的跨域问题。
Django教程-Python开发-Django-Django学习研究-教学研究，配套资源
02-14
这份教案不仅全面覆盖了Django框架的基础知识，包括模型、视图、模板、表单、URL分发等核心组件，还通过丰富的实践项目，让你在动手操作中深入理解Django的运作原理。你将学习如何构建高效、可扩展的Web应用，并掌握...
django-registration：Django-registration（redux）为Django网站提供用户注册功能
02-05
**正文** `django-registration`是基于Django框架的一个开源库，专为Django网站提供用户注册功能。...在本文中，我们将深入探讨`django-registration`的...记得在实际开发中，始终遵循最佳实践，确保用户数据的安全性。
如何重置Django的Admin密码
zhaoxz1985的博客
04-26 2938
如何重置Django的Admin密码背景解决办法 背景 还是前年的时候自己做的一个小Django网站，今天翻出来想改良一下，结果发现时间过去太久，自己居然忘记了admin密码，把各种常用的密码都试了一遍，依然没有一个正确的，无奈只能通过技术手段来恢复了。 解决办法 不可行： Django对密码有保护策略，所以没法从数据库重置。 可行： 进入程序所在目录，执行如下命令： python manag...
Djanog学习笔记-模型
zhaoxz1985的博客
05-15 1484
Djanog学习笔记-模型数据库驱动网站： 在后台连接数据库服务器，从中取出一些数据，然后在Web页面用漂亮的格式展示这些数据。网站还可能会向访问者提供修改数据库数据的方法。
Django学习笔记-第一个应用程序
zhaoxz1985的博客
05-15 901
Django学习笔记-第一个应用程序Project和APP的区别： 一个是配置，一个是代码； 一个project包含很多个Django app以及对它们的配置； 技术上，project的作用是提供配置文件，比方说哪里定义数据库连接信息，安装的app列表，TEMPLATE_DIRS，等； 一个app是一套Django功能的集合，通常包括模型和视图，按python的包结构的方式存在； Django本身内
Django学习笔记-站点管理
zhaoxz1985的博客
05-25 854
django.contribDjango自动管理工具是django.contrib的一部分。django.contrib是一套庞大的功能集，它是Django基本代码的组成部分，Django框架就是由众多包含附加组件(add-on)的基本代码构成的。
Python Django库django-des-1.0.2资源详解
开发一个Django库需要遵循Django的设计哲学和规范，同时还需要遵循Python编程的最佳实践。库的开发通常包括以下几个方面： - **模块化**：库应该提供独立的模块，便于用户按需引入。 - **文档编写**：良好的文档对于...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值