首页 > 软件开发 > JQUERY >

jQuery与bootstrap3结合分页

来源:互联网 2023-03-16 23:54:46 78

bootstrap3里面有很多的布局组件,我们可以直接使用,下面简单来介绍分页组件NGn办公区 - 实用经验教程分享!

工具/原料

  • Hbuilder

方法/步骤

  • 1

    下载bootstrap,解压里面的css,js,放入hbuiler待用NGn办公区 - 实用经验教程分享!

    jQuery与bootstrap3结合分页NGn办公区 - 实用经验教程分享!

  • 2

    !DOCTYPE html>html>NGn办公区 - 实用经验教程分享!

    head>meta charset="utf-8">script src="js/jquery.min.js">/script>引入jquery文件,NGn办公区 - 实用经验教程分享!

    NGn办公区 - 实用经验教程分享!

    jQuery与bootstrap3结合分页NGn办公区 - 实用经验教程分享!

  • 3

    link rel="stylesheet" href="css/bootstrap.min.css" />NGn办公区 - 实用经验教程分享!

    引入bootstrap的css样式,所有引入的样式,jquery都放在head>标签里面,NGn办公区 - 实用经验教程分享!

    最好是引用本地代码,不要引用链接,(下载jquery文件,不使用连接)NGn办公区 - 实用经验教程分享!

    jQuery与bootstrap3结合分页NGn办公区 - 实用经验教程分享!

  • 3该信息未经授权抓取自百度经验
  • 方法/步骤2

  • 1

    页面加载完成以后追加li>标签,点击页码弹出页码使用NGn办公区 - 实用经验教程分享!

    var a=$(this).index();alert(a);NGn办公区 - 实用经验教程分享!

    jQuery与bootstrap3结合分页NGn办公区 - 实用经验教程分享!

  • 2

    link rel="stylesheet" href="css/bootstrap.min.css" />script>$(function() {$('#ul').append('li>sdf/li>')$('#ul li').click(function() {var a=$(this).index();alert(a);})})/script>NGn办公区 - 实用经验教程分享!

    /head>NGn办公区 - 实用经验教程分享!

    NGn办公区 - 实用经验教程分享!

    jQuery与bootstrap3结合分页NGn办公区 - 实用经验教程分享!

  • 3

    body>ul id="ul" class="pagination pagination-sm">li>a href="#">1/a>/li>li>a href="#">2/a>/li>/ul>/body>NGn办公区 - 实用经验教程分享!

    jQuery与bootstrap3结合分页NGn办公区 - 实用经验教程分享!

  • 注意事项

    • css样式,jquery文件尽量下载下来使用,不使用链接地址

    以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!NGn办公区 - 实用经验教程分享!


    标签: JQUERY

    办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号统计代码