微信扫一扫打赏支持

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>

 

 

 

 

 

 
posted @ 2018-07-24 14:19  范仁义  阅读(457)  评论(0)  编辑  收藏  举报