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>
     
  • 相关阅读:
    [navicat premium] [IM002] [Microsoft][ODBC 驱动程序管理器] 未发现数据源名称并且未指定默认驱动程序
    阿里云推荐码优惠享9折
    [eclipse]maven 编译时报错:编码 UTF-8 的不可映射字符
    Aqua Data Studio【下载】ads-windows-x64-16.0.5
    PL/SQL Develper配置Oracle client
    SecureCRT 访问本地Linux虚拟机NAT网络(VMware workstation 9+secureCRT+Ubuntu12.04)
    Spring官方下载地址
    dom4j创建XML文件
    azure devops
    html里如何获取每次点击select里的option值
  • 原文地址:https://www.cnblogs.com/Renyi-Fan/p/9359705.html
Copyright © 2011-2022 走看看