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


Posted in Javascript onAugust 06, 2018

路径导航

<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">«</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">»</span>
       </a>
      </li>
     </ul>

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

进度条动画

<!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 路径导航 分页 进度条的实例代码

总结

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

Javascript 相关文章推荐
js模仿html5 placeholder适应于不支持的浏览器
Jan 13 Javascript
javascript版的in_array函数(判断数组中是否存在特定值)
May 09 Javascript
jQuery中借助deferred来请求及判断AJAX加载的实例讲解
May 24 Javascript
限制复选框最多选择项的实现代码
May 30 Javascript
js判断是否为空和typeof的用法(详解)
Oct 07 Javascript
AngularJS实现动态添加Option的方法
May 17 Javascript
修改node.js默认的npm安装目录实例
May 15 Javascript
通过jquery的ajax请求本地的json文件方法
Aug 08 jQuery
Vue图片浏览组件v-viewer用法分析【支持旋转、缩放、翻转等操作】
Nov 04 Javascript
vue实现带过渡效果的下拉菜单功能
Feb 19 Javascript
JavaScript 如何计算文本的行数的实现
Sep 14 Javascript
AJAX引擎原理以及XmlHttpRequest对象的axios、fetch区别详解
Apr 09 Javascript
react-native使用leanclound消息推送的方法
Aug 06 #Javascript
json数据传到前台并解析展示成列表的方法
Aug 06 #Javascript
使用js实现将后台传入的json数据放在前台显示
Aug 06 #Javascript
详解小程序原生使用ES7 async/await语法
Aug 06 #Javascript
JavaScript折半查找(二分查找)算法原理与实现方法示例
Aug 06 #Javascript
JavaScript插入排序算法原理与实现方法示例
Aug 06 #Javascript
微信小程序之多列表的显示和隐藏功能【附源码】
Aug 06 #Javascript
You might like
Zend Framework入门之环境配置及第一个Hello World示例(附demo源码下载)
2016/03/21 PHP
PHP操作FTP类 (上传、下载、移动、创建等)
2016/03/31 PHP
PHP实现数组array转换成xml的方法
2016/07/19 PHP
Thinkphp和Bootstrap结合打造个性的分页样式(推荐)
2016/08/01 PHP
YII中Ueditor富文本编辑器文件和图片上传的配置图文教程
2017/03/15 PHP
php简单读取.vcf格式文件的方法示例
2017/09/02 PHP
PHP文件操作简单介绍及函数汇总
2020/12/11 PHP
jQuery 中关于CSS操作部分使用说明
2007/06/10 Javascript
自己动手开发jQuery插件教程
2011/08/25 Javascript
各种常用的JS函数整理
2013/10/25 Javascript
javascript实现的DES加密示例
2013/10/30 Javascript
常用的JavaScript验证正则表达式汇总
2013/11/26 Javascript
用C/C++来实现 Node.js 的模块(一)
2014/09/24 Javascript
node.js中的buffer.Buffer.byteLength方法使用说明
2014/12/10 Javascript
node.js中的fs.closeSync方法使用说明
2014/12/17 Javascript
JavaScript实现身份证验证代码
2016/02/17 Javascript
jQuery.form插件的使用及跨域异步上传文件
2016/04/27 Javascript
AngularJS控制器之间的通信方式详解
2016/11/03 Javascript
JavaScript中localStorage对象存储方式实例分析
2017/01/12 Javascript
JS及JQuery对Html内容编码,Html转义
2017/02/17 Javascript
vue+vuecli+webpack中使用mockjs模拟后端数据的示例
2017/10/24 Javascript
JS限制输入框输入的实现代码
2018/07/02 Javascript
vue实现歌手列表字母排序下拉滚动条侧栏排序实时更新
2019/05/14 Javascript
Python使用smtp和pop简单收发邮件完整实例
2018/01/09 Python
如何安装2019Pycharm最新版本(详细教程)
2019/09/26 Python
手把手教你用Django执行原生SQL的方法
2021/02/18 Python
canvas之万花筒效果的简单实现(推荐)
2016/08/16 HTML / CSS
Lampenwelt德国:欧洲领先的灯具和照明在线商店
2018/08/05 全球购物
工作表现自我评价
2014/02/08 职场文书
幼儿评语大全
2014/04/30 职场文书
解放思想演讲稿
2014/09/11 职场文书
带刀到教室的检讨书
2014/10/04 职场文书
论群众路线学习笔记
2014/11/06 职场文书
2014年医德医风工作总结
2014/11/13 职场文书
2014年学习委员工作总结
2014/11/14 职场文书
清洁工个人工作总结
2015/03/05 职场文书