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 路径导航 分页 进度条的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • Javascript 使用function定义构造函数

    Javascript 使用function定义构造函数

    Javascript并不像Java、C#等语言那样支持真正的类。但是在js中可以定义伪类。做到这一点的工具就是构造函数和原型对象。首先介绍js中的构造函数。
    2010-02-02
  • 详解javascript事件冒泡

    详解javascript事件冒泡

    这篇文章主要向大家介绍了javascript事件冒泡,以及javascript阻止事件冒泡的实现代码,感兴趣的朋友可以参考一下
    2016-01-01
  • 如何高效率去掉js数组中的重复项

    如何高效率去掉js数组中的重复项

    如何高效率去掉js数组中的重复项呢?下面小编就为大家带来一篇高效率去掉js数组中重复项的实现方法。希望对大家有所帮助。一起跟随小编过来看看吧
    2016-04-04
  • 重写javascript中window.confirm的行为

    重写javascript中window.confirm的行为

    javascript中window.confirm这个方法很好用,可以弹出一个确认对话框.但有一个问题是,它默认的情况下,将选中那个"确定"按钮,当用户有意无意的在键盘回车,就是说按下Enter键的时候,就会自动返回true。在很多时候其实我们不希望这样
    2012-10-10
  • 简易的JS计算器实现代码

    简易的JS计算器实现代码

    这篇文章主要为大家详细介绍了JS简易的计算器实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-10-10
  • JavaScript中的onerror事件概述及使用

    JavaScript中的onerror事件概述及使用

    onerror事件用来协助处理页面中的JavaScript错误主要包括:Window.onerror事件,img载入错误,接下来为大家详细介绍下,感兴趣的朋友可以参考下哈
    2013-04-04
  • ES6正则表达式扩展笔记

    ES6正则表达式扩展笔记

    正则表达式是javascript操作字符串的一个重要组成部分,然而,在ES6中,随着字符串操作的变更, ES6也对正则表达式进行了一些更新。本文将详细介绍ES6正则表达式扩展
    2017-07-07
  • js去除浏览器默认底图的方法

    js去除浏览器默认底图的方法

    这篇文章主要介绍了js去除浏览器默认底图的方法,可以实现图片loading预加载效果,非常具有实用价值,需要的朋友可以参考下
    2015-06-06
  • 基于Bootstrap里面的Button dropdown打造自定义select

    基于Bootstrap里面的Button dropdown打造自定义select

    这篇文章主要介绍了基于Bootstrap里面的Button dropdown打造自定义select的相关资料,非常不错具有参考借鉴价值,需要的朋友可以参考下
    2016-05-05
  • react router4+redux实现路由权限控制的方法

    react router4+redux实现路由权限控制的方法

    本篇文章主要介绍了react router4+redux实现路由权限控制的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-05-05

最新评论