Django开发实践-2

来源：互联网发布：unity3d视频教程2017 编辑：程序博客网时间：2024/06/06 07:33

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>

效果图：

这里写图片描述

阅读全文

0 0