zoukankan      html  css  js  c++  java
  • bootstrap课程13 bootstrap的官方文档中有一些控件的使用有bug,如何解决这个问题

    bootstrap课程13  bootstrap的官方文档中有一些控件的使用有bug,如何解决这个问题

    一、总结

    一句话总结:因为演示是正常的,所以检查演示效果的代码,把那一段相关的都弄过来就可以了

    1、工具提示是怎么做出来的?

    Hover over the links below to see tooltips:
    data-toggle="tooltip" data-placement="top" title="Tooltip on top"
    如果这个没有效果,就看它样例里面是怎么写的,如果把样例拿下来还不行,那就是差文件了,把js下下来就可以了

    二、bootstrap的官方文档中有一些控件的使用有bug,如何解决这个问题

    1、相关知识

    滚动监听:
    data-spy='scroll'
    data-target='#mynav'
    data-offset='150'

    [自定义滚动监听实例]

    标签页:
    [data-toggle='tab']
    .tab-content
    .tab-pane
    .active
    .fade
    .in

    折叠效果:
    [data-toggle="collapse"]
    [data-parent='#accordion']
    .panel-collapse
    .collapse
    .panel-group

    幻灯片:
    .carousel
    .slide
    [data-ride='carousel']
    .carousel-inner
    .item
    .active
    .carousel-indicators
    [data-slide-to='0']
    .left
    .carousel-control
    [data-slide='prev']
    [data-slide='next']

     

    2、代码

    图片新闻幻灯片2

     1 <!doctype html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>index</title>
     6     <style>
     7         *{
     8             font-family: 微软雅黑;
     9         }
    10 
    11         .carousel-caption{
    12             background: #000;
    13             opacity:0.7;
    14             width:100%;
    15             position: absolute;
    16             bottom:0px!important;
    17             left:0px!important;
    18             height:100px;
    19         }
    20 
    21         .carousel-caption p{
    22             text-align: left;
    23         }
    24 
    25         .carousel-caption h3{
    26             margin:0px;
    27         }
    28     </style>
    29     <link rel="stylesheet" href="bs/css/bootstrap.min.css">
    30     <script src="bs/js/jquery.min.js"></script>
    31     <script src="bs/js/bootstrap.min.js"></script>
    32     <script src="bs/js/docs.min.js"></script>
    33 </head>
    34 <body>
    35     <div class="container">
    36         <h1 class="page-header">Bootstrap框架</h1>
    37         
    38         <div id='mycarousel' class='carousel slide' data-ride='carousel'>
    39             <!-- 幻灯片图片 -->
    40             <div class='carousel-inner'>
    41                 <div class="item active">
    42                     <img src="1.jpg" alt="">
    43                     <div class="carousel-caption">
    44                         <h3>linux技术文档</h3>
    45                         <p>linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!</p>
    46                     </div>
    47                 </div>    
    48                 <div class="item">
    49                     <img src="2.jpg" alt="">
    50                     <div class="carousel-caption">
    51                         <h3>php技术文档</h3>
    52                         <p>php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!</p>
    53                     </div>
    54                 </div>    
    55                 <div class="item">
    56                     <img src="3.jpg" alt="">
    57                     <div class="carousel-caption">
    58                         <h3>javascript技术文档</h3>
    59                         <p>javascript is very much!javascript is very much!javascript is very much!javascript is very much!javascript is very much!javascript is very much!javascript is very much!javascript is very much!javascript is very much!</p>
    60                     </div>
    61                 </div>    
    62             </div>    
    63 
    64 
    65             <!-- 左右控制 -->
    66             <a href="#mycarousel" class='left carousel-control' data-slide='prev'>
    67                 <span class='glyphicon glyphicon-chevron-left'></span>
    68             </a>
    69 
    70             <a href="#mycarousel" class='right carousel-control' data-slide='next'>
    71                 <span class='glyphicon glyphicon-chevron-right'></span>
    72             </a>
    73         </div>        
    74     </div>    
    75 </body>
    76 <script>
    77 $('.carousel-caption').hide();
    78 $('.item').hover(
    79     function(){
    80         $(this).find('.carousel-caption').slideDown();
    81     },
    82     function(){
    83         $(this).find('.carousel-caption').slideUp();
    84     }
    85 );
    86 </script>
    87 </html>

    折叠效果

     1 <!doctype html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>index</title>
     6     <style>
     7         *{
     8             font-family: 微软雅黑;
     9         }
    10     </style>
    11     <link rel="stylesheet" href="bs/css/bootstrap.min.css">
    12     <script src="bs/js/jquery.min.js"></script>
    13     <script src="bs/js/bootstrap.min.js"></script>
    14     <script src="bs/js/docs.min.js"></script>
    15 </head>
    16 <body>
    17     <div class="container">
    18         <h1 class="page-header">Bootstrap框架</h1>
    19         
    20         <div class="panel-group">
    21             <div class="panel panel-primary">
    22                 <div class="panel-heading">
    23                     <div class="panel-title"><a href='javascript:'>linux</a></div>
    24                 </div>
    25                 <div class="panel-body">
    26                     linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!
    27                 </div>
    28             </div>
    29 
    30             <div class="panel panel-primary">
    31                 <div class="panel-heading">
    32                     <div class="panel-title"><a href="javascript:">php</a></div>
    33                 </div>
    34                 <div class="panel-body">
    35                     php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!
    36                 </div>
    37             </div>
    38 
    39             <div class="panel panel-primary">
    40                 <div class="panel-heading">
    41                     <div class="panel-title"><a href="javascript:">javascript</a></div>
    42                 </div>
    43                 <div class="panel-body">
    44                     js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!
    45                 </div>
    46             </div>
    47         </div>
    48         
    49     </div>    
    50 </body>
    51 <script>
    52 $('.panel-body').hide().first().show();
    53 
    54 
    55 $('.panel-title').click(function(){
    56     $(this).parent().next().slideDown();
    57     $('.panel-body').not($(this).parent().next()).slideUp();
    58 });
    59 </script>
    60 </html>

    消息提示

     1 <!doctype html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>index</title>
     6     <style>
     7         *{
     8             font-family: 微软雅黑;
     9         }
    10         body{
    11             padding-top:60px;
    12             position: relative;
    13         }
    14 
    15         .list-group{
    16             position: fixed;
    17             top:200px;
    18         }
    19     </style>
    20     <link rel="stylesheet" href="bs/css/bootstrap.min.css">
    21     <script src="bs/js/jquery.min.js"></script>
    22     <script src="bs/js/bootstrap.min.js"></script>
    23     <script src="bs/js/docs.min.js"></script>
    24 </head>
    25 <body data-spy='scroll' data-target='#mynav' data-offset='150'>
    26     <div class="container">
    27         <nav class="navbar navbar-inverse navbar-fixed-top">
    28           <div class="container">
    29             <!-- Brand and toggle get grouped for better mobile display -->
    30             <div class="navbar-header">
    31               <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
    32                 <span class="sr-only">Toggle navigation</span>
    33                 <span class="icon-bar"></span>
    34                 <span class="icon-bar"></span>
    35                 <span class="icon-bar"></span>
    36               </button>
    37               <a class="navbar-brand" href="#">Brand</a>
    38             </div>
    39 
    40             <!-- Collect the nav links, forms, and other content for toggling -->
    41             <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    42               <ul class="nav navbar-nav">
    43                    <li class='active linux'><a href="">linux</a></li> 
    44                    <li class='php'><a href="">php</a></li> 
    45                    <li class='js'><a href="">js</a></li> 
    46                    <li class='html5'><a href="">html5</a></li> 
    47               </ul>
    48             </div>
    49           </div>
    50         </nav>
    51 
    52         <div class="tooltip-demo">
    53              <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="" data-original-title="Tooltip on left">Tooltip on left</button>
    54         </div>
    55     </div>    
    56 </body>
    57 </html>
     
  • 相关阅读:
    Python strip()方法
    C#操作计划任务
    C# Task的用法
    C#异步编程之浅谈Task
    [深入学习C#]C#实现多线程的方法:线程(Thread类)和线程池(ThreadPool)
    [深入学习C#]C#实现多线程的方式:使用Parallel类
    详细的.Net并行编程高级教程--Parallel
    5天玩转C#并行和多线程编程 —— 第一天 认识Parallel
    C# 并行任务——Parallel类
    C#多线程--线程池(ThreadPool)
  • 原文地址:https://www.cnblogs.com/Renyi-Fan/p/9359705.html
Copyright © 2011-2022 走看看