脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → bootstrap-路径导航 分页 进度条

bootstrap 路径导航 分页 进度条的实例代码

 更新时间：2018年08月06日 15:14:32   作者：嫌疑-人  
本文通过实例代码给大家介绍了bootstrap 路径导航 分页 进度条的相关知识，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下

路径导航

<ol class="breadcrumb">
 <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Home</a></li>
 <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Library</a></li>
 <li class="active">Data</li>
</ol>

分页

<ul class="pagination">
      <li class="disabled">
       <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
       </a>
      </li>
      <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >1</a></li>
      <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >2</a></li>
      <li class="active"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >3</a></li>
      <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >4</a></li>
      <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >5</a></li>
      <li>
       <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
       </a>
      </li>
     </ul>

这里写图片描述

进度条动画

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <link rel="stylesheet" href="css/bootstrap.css" rel="external nofollow" >
  <script src="js/jquery.1.12.4.min.js"></script>
  <script src="js/bootstrap.js"></script>
  <title>Bootstrap</title>
</head>
<style type="text/css">
  *{
    font-family: 微软雅黑;
  }

</style>
<body>
  <div class="container">
    <h1 class="page-header">BootStrap</h1>
      <div class="progress">
        <div class="progress-bar progress-bar-warning progress-bar-striped active" style="width: 0%;">
        </div>
      </div>
  </div>
</body>
<script type="text/javascript">
  s=0;
  v=5;
  sObj=setInterval(function(){
    s+=v;
    if(s>=100){
      clearInterval(sObj);
    }
    $('.progress-bar').html(s+'%').css({'width':s+'%'});
  },50);
</script>
</html>

这里写图片描述

总结

以上所述是小编给大家介绍的bootstrap 路径导航 分页 进度条的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

相关文章

  • echarts设置图例颜色和地图底色的方法实例

    echarts设置图例颜色和地图底色的方法实例

    最近项目要使用echarts进行数据可视化，所以下面这篇文章主要给大家介绍了关于echarts设置图例颜色和地图底色的相关资料，需要的朋友可以参考借鉴，下面随着小编来一起学习学习吧
    2018-08-08
  • JS中可以改善代码的5种重构技术分享

    JS中可以改善代码的5种重构技术分享

    代码重构涉及在不改变其外部功能的情况下对现有代码进行改进，这是编程的核心部分之一，所以下面我们将研究一些技巧，这些技巧可以帮助我们以更好的方式重构代码，希望对大家有所帮助
    2023-06-06
  • JavaScript游戏之是男人就下100层代码打包

    JavaScript游戏之是男人就下100层代码打包

    不知不觉，就到了11月份了，其实我为啥要写js游戏，觉得游戏更能引起共鸣。11月份开篇之作：是男人就下100层，相信大家都玩过。
    2010-11-11
  • JS如何设置元素样式的方法示例

    JS如何设置元素样式的方法示例

    本篇文章主要介绍了JS如何设置元素样式的方法示例，主要介绍了三种方法，具有一定的参考价值，有兴趣的可以了解一下
    2017-08-08
  • JavaScript阻止浏览器返回按钮的方法

    JavaScript阻止浏览器返回按钮的方法

    这篇文章主要介绍了JavaScript阻止浏览器返回按钮的方法,可实现通过javascript禁用掉返回按钮的功能,需要的朋友可以参考下
    2015-03-03
  • JS实现的tab切换选项卡效果示例

    JS实现的tab切换选项卡效果示例

    这篇文章主要介绍了JS实现的tab切换选项卡效果,结合具体实例形式分析了JS通过鼠标事件触发自定义函数控制页面元素样式变换实现tab切换功能的相关实现技巧,需要的朋友可以参考下
    2017-02-02
  • 一步步教你用js简单实现新年倒计时

    一步步教你用js简单实现新年倒计时

    一转眼已经腊月了,相信小伙伴们一定想知道我们距离2023新年还有多少天,下面这篇文章主要给大家介绍了关于如何一步步教你用js简单实现新年倒计时的相关资料,需要的朋友可以参考下
    2022-12-12
  • 解决localstorage存储boolean类型值的小坑

    解决localstorage存储boolean类型值的小坑

    这篇文章主要介绍了解决localstorage存储boolean类型值的小坑，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2021-06-06
  • JS实现淘宝支付宝网站的控制台菜单效果

    JS实现淘宝支付宝网站的控制台菜单效果

    这篇文章主要介绍了JS实现淘宝支付宝网站的控制台菜单效果,涉及JavaScript基于时间函数及数学运算控制页面动画弹出菜单效果的实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-09-09
  • Javascript中this绑定的3种方法与比较

    Javascript中this绑定的3种方法与比较

    大家都知道JS是一门动态语言，与传统的c和c++最大的区别就是js是在运行时动态检测值的类型和变化。this是js中的一个关键字，它代表当前作用域的上下文环境，而且随着上下文的改变而动态变化。这篇文章我们将详细介绍Javascript中绑定this的三种方法与简单的比较。
    2016-10-10

最新评论