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>
     
  • 相关阅读:
    scss的初级学习随笔小计
    trimpash实现jd选项卡首次输入
    透明度动画
    js原生动画一匀速动画
    filter滤镜的使用
    scss实现不同方向的三角
    模板方法模式-考题抄错,会做也白搭
    设计模式概述
    mysql数据库
    夜饮东坡醒复醉
  • 原文地址:https://www.cnblogs.com/Renyi-Fan/p/9359705.html
Copyright © 2011-2022 走看看