bootstrap组件2

  1. <!DOCTYPE html>
  2. <html lang="zh-cn">
  3. <head >
  4.  
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="x-ua-compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width,initial-scale=1">
  8.     <title>bootstrap</title>
  9.     <link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet" >
  10.     <!--[if lt IE 9]>
  11.     <script src="../bootstrap/html5shiv.min.bootstrap"></script>
  12.     <script src="../bootstrap/respond.min.bootstrap"></script>
  13.     <![endif]-->
  14.     <script src="../scripts/jquery-1.12.2.min.js" ></script>
  15.     <script src="../bootstrap/js/bootstrap.min.js"></script>
  16. </head>
  17. <body class="container" style="padding-top: 30px; padding-bottom: 100px;">
  18. <!--导航条详细版-->
  19. <nav class="navbar navbar-default navbar-fixed-top ">
  20.     <div class="container-fluid">
  21.         <!--品牌-->
  22.         <div class="navbar-header">
  23.             <div class="navbar-brand">Bootstrap</div>
  24.             <!--data-target="#divNav" 对应导航id   data-toggle="collapse" 展开效果-->
  25.             <button data-target="#divNav" data-toggle="collapse" type="button" class="navbar-toggle">
  26.                 <span class="icon-bar"></span>
  27.                 <span class="icon-bar"></span>
  28.                 <span class="icon-bar"></span>
  29.             </button>
  30.         </div>
  31.         <!--导航内容-->
  32.         <div class="collapse navbar-collapse" id="divNav">
  33.             <ul class="nav navbar-nav">
  34.                 <li><a href="#"><span class="glyphicon glyphicon-home"></span> Home</a></li>
  35.                 <li><a href="#"><span class="glyphicon glyphicon-music"></span> Music</a></li>
  36.                 <li><p class="navbar-text">Search</p></li>
  37.                 <li>
  38.  
  39.                     <form class="navbar-form">
  40.                         <input type="search" class="form-control" placeholder="Enter search" >
  41.                         <button type="button" class="btn btn-primary">
  42.                             <span class="glyphicon glyphicon-search"></span>
  43.                         </button>
  44.                     </form>
  45.                 </li>
  46.                 <li><a href="#" class="navbar-link">Help</a> </li>
  47.             </ul>
  48.             <!--两个右对齐-->
  49.             <ul class="nav navbar-nav navbar-right">
  50.                 <li><a href="#"><span class="glyphicon glyphicon-home"></span> Email</a></li>
  51.                 <li><a href="#"><span class="glyphicon glyphicon-music"></span> About</a></li>
  52.                 <li><button type="button" class="btn btn-info navbar-btn">Suggess</button></li>
  53.             </ul>
  54.         </div>
  55.     </div>
  56. </nav>
  57. <hr/>
  58. <p class="page-header">大小屏幕排版</p>
  59. <div class="row">
  60.     <!--中屏幕各4列，小屏幕a占2列 b占10列 c占另起一行12列，-->
  61.     <div class="col-md-4 col-sm-2">a</div>
  62.     <div class="col-md-4 col-sm-10">b</div>
  63.     <div class="col-md-4 col-sm-12">c</div>
  64.     <hr/>
  65.     <code>document.getElementById();</code>
  66.     <p><kbd>ctrl</kbd>+<kbd>f5</kbd></p>
  67.     <samp>var a = document.getElementById();</samp>
  68. </div>
  69. <hr/>
  70. <p class="page-header">分页</p>
  71. <div class="text-center">
  72.     <ul class="pagination pagination-lg">
  73.         <li><span >&laquo;</span></li>
  74.         <li class="active"><a href="#">1</a></li>
  75.         <li><a href="#">2</a></li>
  76.         <li><a href="#">3</a></li>
  77.         <li><a href="#">4</a></li>
  78.         <li><a href="#">5</a></li>
  79.         <li><span >&raquo;</span></li>
  80.     </ul>
  81. </div>
  82. <script>
  83.     $(".pagination li").click(function () {
  84.         $(".pagination li").removeClass();  //单击时全移除样式
  85.         $(this).addClass("active");  //  this 添加样式
  86.     });
  87. </script>
  88. <hr/>
  89. <!--徽章-->
  90. <p>Email <span class="badge">33</span> </p>
  91. <button type="button" class="btn btn-primary"> Email <span class="badge">33</span> </button>
  92.  
  93. <hr/>
  94. <!--警告框 -->
  95. <div class="alert alert-danger">
  96.     <button data-dismiss="alert" class="close">&times;</button>
  97.     <p>dangerous!<a href="#" class="alert-link">LINK</a></p>
  98. </div>
  99.  
  100. <p class="page-header">进度条</p>
  101. <div class="progress">
  102.     <div class="progress-bar" style="width:30%">30%</div>
  103. </div>
  104. <div class="progress">
  105.     <div class="progress-bar active progress-bar-danger progress-bar-striped" style="width:40%">40%</div>
  106. </div>
  107.  
  108. <div class="progress">
  109.     <div class="progress-bar active progress-bar-warning progress-bar-striped" style="width:40%">40%</div>
  110.     <div class="progress-bar active progress-bar-danger progress-bar-striped" style="width:30%">30%</div>
  111. </div>
  112.  
  113. <div id="divProgress" class="progress">
  114.     <div id="divBar" class="progress-bar active progress-bar-danger progress-bar-striped" style="width:0%">0%</div>
  115. </div>
  116. <button id="btnStart" class="btn btn-primary">Start</button>
  117. <script>
  118.  
  119.     $().ready(function () {
  120.         var width=0;
  121.         function changeBar(){
  122.             $("#divBar").attr("style","width:"+width+"%").html(width+"%");
  123.             if(width<100){
  124.                 width+=1;
  125.             }
  126.         }
  127.         $("#btnStart").click(function () {
  128.             setInterval(function () {     //多添加了一个函数 function(){changeBar();};
  129.                 changeBar();
  130.             },100);   // 函数名要加  “”
  131.         });
  132.     });
  133. </script>
  134.  
  135.     <div class="media">
  136.         <div class="media-left"><img  src="../img/superman.jpg" class=" media-object"></div>
  137.         <div class="media-body"><p class="media-heading">pic mes</p> </div>
  138.     </div>
  139.  
  140. <p class="page-header">列表组</p>
  141.     <div class="list-group">
  142.         <!--<span class="media glyphicon">   不懂。。-->
  143.         <span class="media glyphicon"><a class="list-group-item" href="#">文学类<sup><span class="badge">20</span></sup></a></span>
  144.         <a class="list-group-item list-group-item-success" href="#">文学类<span class="badge">20</span> </a>
  145.         <a class="list-group-item" href="#">文学类<span class="badge">20</span> </a>
  146.         <a class="list-group-item" href="#">文学类<span class="badge">20</span> </a>
  147.     </div>
  148.  
  149. <!--面板 -->
  150. <p class="page-header">面板</p>
  151. <div class="panel panel-info">
  152.     <div class="panel-heading">123</div>
  153.     <div class="panel-body">body</div>
  154.     <div class="panel-footer text-right">时间</div>
  155. </div>
  156. <!--视频-->
  157. <div class="embed-responsive embed-responsive-16by9">
  158.     <iframe class="embed-responsive-item" src="..."></iframe>
  159. </div>
  160. <!--底部-->
  161. <button type="button" class="btn btn-primary btn-block navbar-fixed-bottom">
  162.     <span class="glyphicon glyphicon-log-in" ></span> button
  163. </button>
  164. <!--滚动监听-->
  165. 123
  166. </body>
  167. </html>
  1. <!--看不出效果-->
  2.     <h2 class="page-header">滚动监听</h2>
  3.     <nav id="nav-test" class="navbar-default navbar">
  4.         <ul class="nav navbar-nav">
  5.             <li><a href="#ios">ios</a></li>
  6.             <li><a href="#svn">svn</a></li>
  7.         </ul>
  8.     </nav>
  9.     <div data-spy="scroll" data-target="nav-test" data-offset="0" style="height: 100px;overflow:auto;position: relative;">
  10.         <h4 id="ios">ios</h4>
  11.         <p>iOS是由苹果公司开发的移动操作系统[1]  。苹果公司最早于2007年1月9日的Macworld大会上公布这个系统，最初是设计给iPhone使用的，后来陆续套用到iPod touch、iPad以及Apple TV等产品上。iOS与苹果的Mac OS X操作系统一样，属于类Unix的商业操作系统。原本这个系统名为iPhone OS，因为iPad，iPhone，iPod touch都使用iPhone OS，所以2010WWDC大会上宣布改名为iOS（iOS为美国Cisco公司网络设备操作系统注册商标，苹果改名已获得Cisco公司授权）。iOS是由苹果公司开发的移动操作系统[1]  。苹果公司最早于2007年1月9日的Macworld大会上公布这个系统，最初是设计给iPhone使用的，后来陆续套用到iPod touch、iPad以及Apple TV等产品上。iOS与苹果的Mac OS X操作系统一样，属于类Unix的商业操作系统。原本这个系统名为iPhone OS，因为iPad，iPhone，iPod touch都使用iPhone OS，所以2010WWDC大会上宣布改名为iOS（iOS为美国Cisco公司网络设备操作系统注册商标，苹果改名已获得Cisco公司授权）。</p>
  12.         <h4 id="svn">svn</h4>
  13.         <p>所有的文档都显示SVN可以取代CVS，同时SVN的问题和缺点都被隐藏了。不幸的是，我们并不认为SVN是CVS的替代品，尽管很多缺陷都被修改了。更有甚者，它甚至让人重回CVS。CVS和SVN的比较类似于比较C++和Java。很明显CVS和SVN都远比SourceSafe强大的多，如同C++和Java比Basic强大的多。CVS代表了几乎代码控制系统的所有功能项，尽管有时他的实现并不很方便。SVN修正并添加了一些CVS并不拥有的功能。例如，创建标志和分支dubious，你在编辑文件时其他人不会有任何通知。SVN并不是CVS的替代品，只是个不同的系统，类似于CVS。它有些特有的功能，足以作为采用它的理由。这些功能使他更适合于开发环境，例如对PowerBuilder。下面你可以找到两者的相对优势、劣势。所有的文档都显示SVN可以取代CVS，同时SVN的问题和缺点都被隐藏了。不幸的是，我们并不认为SVN是CVS的替代品，尽管很多缺陷都被修改了。更有甚者，它甚至让人重回CVS。CVS和SVN的比较类似于比较C++和Java。很明显CVS和SVN都远比SourceSafe强大的多，如同C++和Java比Basic强大的多。CVS代表了几乎代码控制系统的所有功能项，尽管有时他的实现并不很方便。SVN修正并添加了一些CVS并不拥有的功能。例如，创建标志和分支dubious，你在编辑文件时其他人不会有任何通知。SVN并不是CVS的替代品，只是个不同的系统，类似于CVS。它有些特有的功能，足以作为采用它的理由。这些功能使他更适合于开发环境，例如对PowerBuilder。下面你可以找到两者的相对优势、劣势。</p>
  14.     </div>

bootstrap组件 2的更多相关文章

  1. JS组件系列——Bootstrap组件福利篇：几款好用的组件推荐（二）

    前言:上篇 JS组件系列——Bootstrap组件福利篇:几款好用的组件推荐 分享了几个项目中比较常用的组件,引起了许多园友的关注.这篇还是继续,因为博主觉得还有几个非常简单.实用的组件,实在不愿自己 ...

  2. bootstrap学习笔记--bootstrap组件

    前面已经学习了bootstrap环境搭建以及基本布局方面的知识,下面将学习下关于bootstrap的相关组件,知识点有点多. 关于bootstrap组件知识点目录: Bootstrap--代码显示 B ...

  3. bootstrap 组件

      bootstrap  组件 1下拉菜单(dropdown)  下拉菜单切换(dropdown-toggle)  下拉菜单对齐(dropdown-menu-right-右对齐) 下拉菜单分割线(di ...

  4. Bootstrap组件

    1.Bootstrap组件——Glyphicons图标字体 图标字体:可以表示的文字不是abcd或1234,而是一个又一个图形符号,比直接使用图片好处:可以任意放大不会失真:所有能使用文字的地方都可以 ...

  5. ASP.NET MVC使用Bootstrap系列（3）——使用Bootstrap 组件

    阅读目录 Bootstrap 导航条 列表组 徽章 媒体对象 页头 路径导航 分页 输入框组 按钮式下拉菜单 警告框 进度条 小结 Bootstrap为我们提供了十几种的可复用组件,包括字体图标.下拉 ...

  6. bootstrap组件学习

    转自http://v3.bootcss.com/components/ bootstrap组件学习 矢量图标的用法<span class="glyphicon glyphicon-se ...

  7. UIBootatrap:是由AngularJS UI团队编写的纯AngularJS实现的Bootstrap组件

    本文为翻译文档.原文是https://angular-ui.github.io/bootstrap/(需要FQ). 准备工作: 依赖关系:这个库中包含一组基于Bootstrap组件和CSS的原生Ang ...

  8. Angular -ui - BootStrap组件的解释以及使用

    关于UI BootStrap UI BootStrap 是angularUI团队用纯粹angularJS语法编写的Bootstrap组件. 1. 关于ng-router(angular-router. ...

  9. python 全栈开发，Day58(bootstrap组件,bootstrap JavaScript 插件,后台模板,图表插件,jQuery插件库,Animate.css,swiper,运行vue项目)

    一.bootstrap组件 无数可复用的组件,包括字体图标.下拉菜单.导航.警告框.弹出框等更多功能. 组件和插件的区别? 插件:一个功能,比如js文件 组件:html css js 组件包含插件 面 ...

随机推荐

  1. MySQL用法

    查询数据库表 通过查询INFORMATION_SCHEMA.TABLES查询数据库表的结构信息 SELECT  *  FROM  INFORMATION_SCHEMA.TABLES WHERE TAB ...

  2. 【leetcode】N-Queens II

    N-Queens II Follow up for N-Queens problem. Now, instead outputting board configurations, return the ...

  3. C++实现VPN工具之代码示例

    创建.连接.挂断.删除VPN实现起来并不难,下面给出一套比较完整的代码.该段代码只是示例代码,但是已经通过了编译,对API的使用和VPN操作步骤是没问题的.具体每个API代表的意义可以参看<C+ ...

  4. winform,wpf,winrt获取屏幕分辨率

    winform 当前的屏幕除任务栏外的工作域大小     this.Width = System.Windows.Forms.Screen.PrimaryScreen.WorkingArea.Widt ...

  5. [ 转]Collections.unmodifiableList方法的使用与场景

    在公司接触到Collections.unmodifiableList(List<? extends T> list)) 觉得用法挺特殊的,所以学习了下,简单而言,看名字就知道,将参数中的L ...

  6. nyoj138 找球号(二）_离散化

    找球号(二) 时间限制:1000 ms  |  内存限制:65535 KB 难度:5   描述 在某一国度里流行着一种游戏.游戏规则为:现有一堆球中,每个球上都有一个整数编号i(0<=i< ...

  7. ios调用c#后台接口报文格式

    - NSString *soapMessage = - [NSString stringWithFormat: - @"<?xml version=\"1.0\" ...

  8. 转载jQuery图片放大插件[twiPicZoom]

    转载http://xuzhihong1987.blog.163.com/blog/static/26731587201312821725913/ 功能说明: 双击查看大图,鼠标滚动放大缩小,能够切换到 ...

  9. LightOJ 1234 Harmonic Number

    D - Harmonic Number Time Limit:3000MS     Memory Limit:32768KB     64bit IO Format:%lld & %llu S ...

  10. 如何用Jquery判断在键盘上敲的哪个按键

    有时候我们需要判断我们在键盘上敲了哪个键,这个需要查询下键盘上的键对应的值是多少,比如Enter键是13. 下面是Jquery代码,别忘了引用Jquery包哈. <script type=&qu ...