Bootstrap3基础 pagination 分页按钮 简单示例

礼悟:
     公恒学思合行悟,尊师重道存感恩。叶见寻根三返一,江河湖海同一体。
          虚怀若谷良心主,愿行无悔给最苦。读书锻炼养身心,诚劝且行且珍惜。


               ide:visual studio 2017  
            browser:Firefox / Chrome
     bootstrap:3.3.7

代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>

    <!-- 页面的宽度与设备屏幕的宽度一致 -->
	<meta name="viewport" content="width=device-width">
	<!-- 初始缩放比例 1:1,没有横线滚动的效果 -->
	<meta name="viewport" content="initial-scale=1">
	<!-- 禁止用户缩放 -->
	<meta name="viewport" content="user-scalable=no">

    <!-- 引入外部bootstrap的css文件(压缩版) -->
	<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
	<!-- NO.1 先引入jQuery文件(压缩版) -->
	<script src="bootstrap/js/jquery.min.js"></script>
	<!-- NO.2 再引入js文件(压缩版) -->
	<script src="bootstrap/js/bootstrap.min.js"></script>

</head>
<body>
    <div class="container">
        <div>
            <ul class="pagination">
                <li><a href="#">?</a></li>
                <li class="active"><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="#">6</a></li>
                <li><a href="#">?</a></li>
            </ul>
        </div>
    </div>
</body>
</html>

效果



Bootstrap,优秀的前端开源框架,值得学习。
学习资源:v3.bootcss.com + itcast和itheima视频库 + 清净的心地。如果您有公开的资源,可以分享给我的话,用您的资源学习也可以。
博文是观看视频后,融入思考写成的。博文好,是老师讲得好。博文坏,是 给最苦 没认真。

原文地址:https://www.cnblogs.com/jizuiku/p/8280844.html

时间: 2024-10-08 14:29:43

Bootstrap3基础 pagination 分页按钮 简单示例的相关文章

Bootstrap3基础 navbar 导航条 简单示例

? 内容 参数 ??OS ??Windows 10 x64 ??browser ??Firefox 65.0.2 ??framework?? ??Bootstrap 3.3.7 ??editor ??Visual Studio Code 1.32.1?? ??typesetting ??Markdown ? code <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="U

Python3基础 内嵌函数 简单示例

? ???????Python : 3.7.0 ?????????OS : Ubuntu 18.04.1 LTS ????????IDE : PyCharm 2018.2.4 ??????Conda : 4.5.11 ???typesetting : Markdown ? code """ @Author : 行初心 @Date : 18-9-24 @Blog : www.cnblogs.com/xingchuxin @Gitee : gitee.com/zhichengji

Python3基础 生成器推导式 简单示例

? ???????Python : 3.7.0 ?????????OS : Ubuntu 18.04.1 LTS ????????IDE : PyCharm 2018.2.4 ??????Conda : 4.5.11 ???typesetting : Markdown ? code """ @Author : 行初心 @Date : 18-9-24 @Blog : www.cnblogs.com/xingchuxin @Gitee : gitee.com/zhichengji

JavaSE8基础 构造代码块简单示例

os :windows7 x64    jdk:jdk-8u131-windows-x64    ide:Eclipse Oxygen Release (4.7.0) 代码: class Test { //在类中的成员位置,多个构造函数的公共代码放在这里面 { //构造代码块中 //对象进行初始化 会调用 System.out.println("调用构造函数时,构造代码块中的代码先执行"); } public Test() { System.out.println("无参数构

JavaSE8基础 静态代码块 简单示例

os :windows7 x64    jdk:jdk-8u131-windows-x64    ide:Eclipse Oxygen Release (4.7.0) 代码: class Test { /* * 在类中的成员位置,要用static修饰 * 可以对类进行初始化,而不是对对象进行初始化.在对象未有之前,他已存在. * 只执行一次 */ static{ //静态代码块中 System.out.println("静态代码块中的代码先执行,且只会执行一次"); } public

Bootstrap3基础 btn-xs/sm... 按钮的四种大小

礼悟:    公恒学思合行悟,尊师重道存感恩.叶见寻根三返一,江河湖海同一体.          虚怀若谷良心主,愿行无悔给最苦.读书锻炼养身心,诚劝且行且珍惜.              ide:visual studio 2017             browser:Firefox / Chrome   bootstrap:3.3.7 代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8&qu

css3基础 :nth-child(3n+1) 简单示例

礼悟:    公恒学思合行悟,尊师重道存感恩.叶见寻根三返一,江河湖海同一体.          虚怀若谷良心主,愿行无悔给最苦.读书锻炼养身心,诚劝且行且珍惜.              ide:visual studio 2017             browser:Chrome                     os:win7 代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8&qu

css3基础 rgba 背景半透明 简单示例

礼悟:    公恒学思合行悟,尊师重道存感恩.叶见寻根三返一,江河湖海同一体.          虚怀若谷良心主,愿行无悔给最苦.读书锻炼养身心,诚劝且行且珍惜.              ide:visual studio 2017             browser:Chrome                     os:win7 代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8&qu

EasyUI基础入门之Pagination(分页)

前言 对于一些企业级的应用来说(非站点),页面上最为基本的内容也就是表格和form了.对于类似于ERP这类系统来说数据记录比較大,前端表格展示的时候必需得实现分页功能了.恰巧EasyUI就提供了分页组件Pagination pagination覆盖默认$.fn.pagination.defaults.Pagination分页同意用户通过分页的方式来浏览数据,它支持可配置的选项,页面导航和页面长度的选择,并且用户能够加入?分页的右边定制button来增强分页功能. 只是pagination是依赖于