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

 <!doctype html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>index</title>

     <style>

         *{

             font-family: 微软雅黑;

         }

         .carousel-caption{

             background: #000;

             opacity:0.7;

             width:100%;

             position: absolute;

             bottom:0px!important;

             left:0px!important;

             height:100px;

         }

         .carousel-caption p{

             text-align: left;

         }

         .carousel-caption h3{

             margin:0px;

         }

     </style>

     <link rel="stylesheet" href="bs/css/bootstrap.min.css">

     <script src="bs/js/jquery.min.js"></script>

     <script src="bs/js/bootstrap.min.js"></script>

     <script src="bs/js/docs.min.js"></script>

 </head>

 <body>

     <div class="container">

         <h1 class="page-header">Bootstrap框架</h1>

         <div id='mycarousel' class='carousel slide' data-ride='carousel'>

             <!-- 幻灯片图片 -->

             <div class='carousel-inner'>

                 <div class="item active">

                     <img src="1.jpg" alt="">

                     <div class="carousel-caption">

                         <h3>linux技术文档</h3>

                         <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>

                     </div>

                 </div>

                 <div class="item">

                     <img src="2.jpg" alt="">

                     <div class="carousel-caption">

                         <h3>php技术文档</h3>

                         <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>

                     </div>

                 </div>

                 <div class="item">

                     <img src="3.jpg" alt="">

                     <div class="carousel-caption">

                         <h3>javascript技术文档</h3>

                         <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>

                     </div>

                 </div>

             </div>    

             <!-- 左右控制 -->

             <a href="#mycarousel" class='left carousel-control' data-slide='prev'>

                 <span class='glyphicon glyphicon-chevron-left'></span>

             </a>

             <a href="#mycarousel" class='right carousel-control' data-slide='next'>

                 <span class='glyphicon glyphicon-chevron-right'></span>

             </a>

         </div>

     </div>

 </body>

 <script>

 $('.carousel-caption').hide();

 $('.item').hover(

     function(){

         $(this).find('.carousel-caption').slideDown();

     },

     function(){

         $(this).find('.carousel-caption').slideUp();

     }

 );

 </script>

 </html>

折叠效果

 <!doctype html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>index</title>

     <style>

         *{

             font-family: 微软雅黑;

         }

     </style>

     <link rel="stylesheet" href="bs/css/bootstrap.min.css">

     <script src="bs/js/jquery.min.js"></script>

     <script src="bs/js/bootstrap.min.js"></script>

     <script src="bs/js/docs.min.js"></script>

 </head>

 <body>

     <div class="container">

         <h1 class="page-header">Bootstrap框架</h1>

         <div class="panel-group">

             <div class="panel panel-primary">

                 <div class="panel-heading">

                     <div class="panel-title"><a href='javascript:'>linux</a></div>

                 </div>

                 <div class="panel-body">

                     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!

                 </div>

             </div>

             <div class="panel panel-primary">

                 <div class="panel-heading">

                     <div class="panel-title"><a href="javascript:">php</a></div>

                 </div>

                 <div class="panel-body">

                     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!

                 </div>

             </div>

             <div class="panel panel-primary">

                 <div class="panel-heading">

                     <div class="panel-title"><a href="javascript:">javascript</a></div>

                 </div>

                 <div class="panel-body">

                     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!

                 </div>

             </div>

         </div>

     </div>

 </body>

 <script>

 $('.panel-body').hide().first().show();

 $('.panel-title').click(function(){

     $(this).parent().next().slideDown();

     $('.panel-body').not($(this).parent().next()).slideUp();

 });

 </script>

 </html>

消息提示

 <!doctype html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>index</title>

     <style>

         *{

             font-family: 微软雅黑;

         }

         body{

             padding-top:60px;

             position: relative;

         }

         .list-group{

             position: fixed;

             top:200px;

         }

     </style>

     <link rel="stylesheet" href="bs/css/bootstrap.min.css">

     <script src="bs/js/jquery.min.js"></script>

     <script src="bs/js/bootstrap.min.js"></script>

     <script src="bs/js/docs.min.js"></script>

 </head>

 <body data-spy='scroll' data-target='#mynav' data-offset='150'>

     <div class="container">

         <nav class="navbar navbar-inverse navbar-fixed-top">

           <div class="container">

             <!-- Brand and toggle get grouped for better mobile display -->

             <div class="navbar-header">

               <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">

                 <span class="sr-only">Toggle navigation</span>

                 <span class="icon-bar"></span>

                 <span class="icon-bar"></span>

                 <span class="icon-bar"></span>

               </button>

               <a class="navbar-brand" href="#">Brand</a>

             </div>

             <!-- Collect the nav links, forms, and other content for toggling -->

             <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

               <ul class="nav navbar-nav">

                    <li class='active linux'><a href="">linux</a></li>

                    <li class='php'><a href="">php</a></li>

                    <li class='js'><a href="">js</a></li>

                    <li class='html5'><a href="">html5</a></li>

               </ul>

             </div>

           </div>

         </nav>

         <div class="tooltip-demo">

              <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="" data-original-title="Tooltip on left">Tooltip on left</button>

         </div>

     </div>

 </body>

 </html>
 

bootstrap课程13 bootstrap的官方文档中有一些控件的使用有bug，如何解决这个问题的更多相关文章

  1. 2DToolkit官方文档中文版打地鼠教程（三）：Sprite Collections 精灵集合

    这是2DToolkit官方文档中 Whack a Mole 打地鼠教程的译文,为了减少文中过多重复操作的翻译,以及一些无必要的句子,这里我假设你有Unity的基础知识(例如了解如何新建Sprite等) ...

  2. 2DToolkit官方文档中文版打地鼠教程（二）：设置摄像机

    这是2DToolkit官方文档中 Whack a Mole 打地鼠教程的译文,为了减少文中过多重复操作的翻译,以及一些无必要的句子,这里我假设你有Unity的基础知识(例如了解如何新建Sprite等) ...

  3. 2DToolkit官方文档中文版打地鼠教程（一）：初始设置

    这是2DToolkit官方文档中 Whack a Mole 打地鼠教程的译文,为了减少文中过多重复操作的翻译,以及一些无必要的句子,这里我假设你有Unity的基础知识(例如了解如何新建Sprite等) ...

  4. Bootstrap Table 3 官方文档

    备查 Bootstrap Table 3 官方文档 示例

  5. Spring 通读官方文档

    Spring 通读官方文档 这部分参考文档涵盖了Spring Framework绝对不可或缺的所有技术. 其中最重要的是Spring Framework的控制反转(IoC)容器.Spring框架的Io ...

  6. TestNG官方文档中文版(2)-annotation(转)

    1. 介绍    TestNG是一个设计用来简化广泛的测试需求的测试框架,从单元测试(隔离测试一个类)到集成测试(测试由有多个类多个包甚至多个外部框架组成的整个系统,例如运用服务器). 编写一个测试的 ...

  7. 【AutoMapper官方文档】DTO与Domin Model相互转换（下）

    写在前面 AutoMapper目录: [AutoMapper官方文档]DTO与Domin Model相互转换(上) [AutoMapper官方文档]DTO与Domin Model相互转换(中) [Au ...

  8. Spring Cloud官方文档中文版-Spring Cloud Config（上）

    官方文档地址为:http://cloud.spring.io/spring-cloud-static/Dalston.SR2/#spring-cloud-feign 文中例子我做了一些测试在:http ...

  9. Spring Cloud官方文档中文版-Spring Cloud Config（下）-客户端等

    官方文档地址为:http://cloud.spring.io/spring-cloud-static/Dalston.SR2/#_serving_alternative_formats 文中例子我做了 ...

随机推荐

  1. 启动springboot

    新建一个springboot项目,idea的做法:一般直接next就行 填写项目使用到的技术,上面的Spring Boot版本建议选择最新的稳定版,主要勾选上Web就可以了,如下图: 新建之后< ...

  2. Python(十) 函数式编程： 匿名函数、高阶函数、装饰器

    一.lambda表达式 lambda parameter_list: expression # 匿名函数 def add(x,y): return x+y print(add(1,2)) f = la ...

  3. selenium+python 安装使用

    一.序言 selenium官网selenium简单教程selenium完整教程python基础教程 二.安装python3 https://www.python.org/downloads/relea ...

  4. <QT之Bug制造机>QT中串口类“QSerialPort”的学习笔记

    QT5中已经增加了串口类QSrialPort,可以直接调用API函数进行快速开发. 1. 获取串口信息 Dialog::Dialog(QWidget *parent) : QDialog(parent ...

  5. SWFupload多图片上传入门教程

    本文为转载内容,但所讲内容亲身试验证明可用,转载过来希望能帮助到有需要的人. 转载地址:http://blog.csdn.net/kongjiea/article/details/24290373#c ...

  6. jq 克隆 移除table

    function addRow2(node){ var obj = $("tr[name='info']:last"); var objClone = $(obj).clone() ...

  7. cogs 1755. 爱上捉迷藏

    1755. 爱上捉迷藏 ☆   输入文件:kadun.in   输出文件:kadun.out   简单对比时间限制:0.001 s   内存限制:2 MB [背景] 乃们都玩过赛尔号吧……,那有木有玩 ...

  8. 错误：created a ThreadLocal with key of type ……but failed to remove it when the web application was stopped. This is very likely to create a memory leak.

    tomcat reload显示错误:SEVERE: The web application [/Interceptor] created a ThreadLocal with key of type ...

  9. 11.2.0.1升级到11.2.0.4报错之中的一个：UtilSession failed: Patch 9413827

    UtilSession failed: Patch 9413827 requires component(s) that are not installed in OracleHome. These ...

  10. jQuery源码04 data() : 数据缓存

    /* Implementation Summary 1. Enforce API surface and semantic compatibility with 1.9.x branch 2. Imp ...