Django开发实践-2

最新推荐文章于 2024-04-22 10:00:48 发布

二的平方

最新推荐文章于 2024-04-22 10:00:48 发布

阅读量599

点赞数

分类专栏： Django 文章标签： django bootstrap

本文链接：https://blog.csdn.net/zhaoxz1985/article/details/74591093

版权

Django 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

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推荐：

国内推荐使用：https://www.staticfile.org/
国际推荐使用：https://cdnjs.com/

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>