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 相关文章推荐
一个加密JavaScript的开源工具PACKER2.0.2
Nov 04 Javascript
JavaScript lodash常见用法系列小结
Aug 24 Javascript
概述jQuery的元素筛选
Nov 23 Javascript
JS实现物体带缓冲的间歇运动效果示例
Dec 22 Javascript
如何将 jQuery 从你的 Bootstrap 项目中移除(取而代之使用Vue.js)
Jul 17 jQuery
jQuery选择器特殊字符与属性空格问题
Aug 14 jQuery
JavaSctit 利用FileReader和滤镜上传图片预览功能
Sep 05 Javascript
JavaScript ES6中的简写语法总结与使用技巧
Dec 30 Javascript
Node.js 如何利用异步提升任务处理速度
Jan 07 Javascript
20道JS原理题助你面试一臂之力(必看)
Jul 22 Javascript
在VUE中实现文件下载并判断状态的方法
Nov 08 Javascript
JavaScript 声明私有变量的两种方式
Feb 05 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
php xml实例 留言本
2009/03/20 PHP
laravel自定义分页效果
2017/07/23 PHP
PHP实现打包zip并下载功能
2018/06/12 PHP
通过jquery实现tab标签浏览效果
2007/02/20 Javascript
javascript 事件处理程序介绍
2012/06/27 Javascript
jQuery计算textarea中文字数(剩余个数)的小程序
2013/11/28 Javascript
angular.element方法汇总
2015/01/07 Javascript
js鼠标单击和双击事件冲突问题的快速解决方法
2016/07/11 Javascript
jquery层级选择器(匹配父元素下的子元素实现代码)
2016/09/05 Javascript
Vue-Router实现组件间跳转的三种方法
2017/11/07 Javascript
webpack多页面开发实践
2017/12/18 Javascript
使用D3.js+Vue实现一个简单的柱形图
2018/08/05 Javascript
详解Vue项目中出现Loading chunk {n} failed问题的解决方法
2018/09/14 Javascript
JavaScript 变量,数据类型基础实例详解【变量、字符串、数组、对象等】
2020/01/04 Javascript
python回调函数的使用方法
2014/01/23 Python
python中使用enumerate函数遍历元素实例
2014/06/16 Python
python实现将pvr格式转换成pvr.ccz的方法
2015/04/28 Python
python中黄金分割法实现方法
2015/05/06 Python
python利用datetime模块计算时间差
2015/08/04 Python
python获取外网IP并发邮件的实现方法
2017/10/01 Python
Pytorch入门之mnist分类实例
2018/04/14 Python
pandas数据集的端到端处理
2019/02/18 Python
Python实现简单的列表冒泡排序和反转列表操作示例
2019/07/10 Python
python中的Elasticsearch操作汇总
2019/10/30 Python
python二分法查找算法实现方法【递归与非递归】
2019/12/06 Python
Linux下升级安装python3.8并配置pip及yum的教程
2020/01/02 Python
HTML5组件Canvas实现图像灰度化(步骤+实例效果)
2013/04/22 HTML / CSS
HTML实现代码雨源码及效果示例
2020/02/25 HTML / CSS
香港万宁官方海外旗舰店:香港健与美连锁店
2018/09/27 全球购物
蔻驰英国官网:COACH英国
2020/07/19 全球购物
会计电算化个人求职信范文
2014/01/24 职场文书
企业委托书范本
2014/09/13 职场文书
2014年班干部工作总结
2014/11/25 职场文书
化妆品促销活动总结
2015/05/07 职场文书
导游词之山西关帝庙
2019/11/01 职场文书
微软Win11什么功能最惊艳? Windows11新功能特性汇总
2021/11/21 数码科技