模态框

<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="meLabel" aria-hidden="true">

    <div class="modal-dialog">

        <div class="modal-content">

            <div class="modal-header">

                <button type="button" class="close" data-dismiss="modal" aria-label="Close">

                    <span aria-hidden="true">&times;</span>

                </button>

                <h4 class="modal-title" id="myModalLabel">Title</h4>

                <div class="modal-body">

                    Content

                </div>

                <div class="modal-footer">

                    <button type="button" class="btn btn-info" data-dismiss="modal">Close</button>

                    <button type="button" class="btn btn-danger">Save</button>

                </div>

            </div>

        </div>

    </div>

</div>

调用方式一：

<button type="button" data-toggle="modal" data-target="#myModal" >

    启动Modal

</button>

方式二：

<script>

    $("#myModal").modal('show');   //其他方法   hide  toggle   {keyboard: false}

</script>

事件
$('#identifier').on('show.bs.modal', function () {

  // 执行一些动作...

})

show.bs.modal    shown.bs.modal

hide.bs.modal    hidden.bs.modal

loaded.bs.modal

下拉菜单

<button data-toggle="dropdown">

    Dropdown <span class="caret"></span>

</button>

<ul class="dropdown-menu" role="menu">

    <li><a>Python</a></li>

    <li><a>Python</a></li>

    <li><a>Python</a></li>

</ul>

事件：
　　show.bs.dropdown   shown.bs.dropdown   hide.bs.dropdown  hiden.bs.dropdown

监听滚动

<body data-spy="scroll" data-target=".navbar" data-offset="70">

    <div class="container">

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

            <div class="container-fluid">

                <div class="collapse navbar-collapse js-navbar-scrollpy" id="myScrollpy">

                    <ul class="nav navbar-nav">

                        <li><a href="#python">Python</a></li>

                        <li><a href="#php">PHP</a></li>

                        <li><a href="#java">Java</a></li>

                        <li class="dropdown">

                            <a href="#" data-toggle="dropdown">JavaScript <span class="caret"></span></a>

                            <ul class="dropdown-menu" role="menu">

                                <li><a href="#jquery">jQuery</a></li>

                                <li><a href="#angular">AngularJS</a></li>

                                <li><a href="#node">NodeJS</a></li>

                            </ul>

                        </li>

                    </ul>

                </div>

            </div>

        </nav>

　　　　<h2 id="Python">Python</h2>

　　　　　　...

事件：

　　<script>
　　　　$("#myScrollpy").on('activate.bs.scrollspy', function() {
　　　　　//do something 
　　})
   </srcipt>

标签页

<ul id="myTab" class="nav nav-tabs">

    <li class="active"><a href="#home" data-toggle="tab">Home</a></li>

    <li><a href="#profile" data-toggle="tab">Profile</a></li>

</ul>

<div  class="tab-content">

    <div id="home" class="tab-pane">        //   fade in active

        <p>I am in home page</p>

    </div>

    <div id="profile" class="tab-pane">

        <p>Now I am in profile page</p>

    </div>

</div>

事件：
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { ...})
show.bs.tab  shown.bs.tab  hide.bs.tab  hiden.bs.tab

工具提示

<a href="#" data-toggle="tooltip" title="索隆" data-placement="bottom">Roronoa zoro</a>

<script>

    $(a[data-toggle="tooltip"]').tooltip("show");

</script>

事件：

show.bs.tooltip ...

弹出框

<button type="button" class="btn btn-info btn-lg" data-toggle="popover" \

        title="popover title" data-content="popover content" data-placement="bottom" \

        data-trigger="focus"

>Popover</button>    //尽量用a代替button，但要加tabindex="0"属性

<script>

    $('[data-toggle="popover"]').popover();

</script>

事件： show.bs.popover ...

警告框定时关闭实例（jQuery方法）
    <script>

        $(document).ready(function() {

            setTimeout(function() {

                $("#flash").alert('close');

            }, 3000);

        })

    </script>


 






警告框




<div class="alert alert-danger fade in ">

    <button type="button" class="close" data-dismiss="alert">

        <span aria-hiden="true">&times;</span>

    </button>

    some text

</div>

事件：

close.bs.alert  closed.bs.alert






折叠




<a href="#collapseExample" class="btn btn-info" data-toggle="collapse">打开折叠</a>

<div class="collapse" id="collapseExample">

    <p class="well">Hello</p>

</div>

手风琴效果




<div class="panel-group" id="accordion">

    <div class="panel panel-default">

        <div class="panel-heading">

            <h4 class="panel-title">

                <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Title1</a>

            </h4>

        </div>

        <div id="collapse1" class="panel-collapse collapse">

            <div class="panel-body">

                Hello

            </div>

        </div>

    </div>

    <div class="panel panel-default">

        <div class="panel-heading">

            <h4 class="panel-title">

                <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Title2</a>

            </h4>

        </div>

        <div id="collapse2" class="panel-collapse collapse">

            <div class="panel-body">

                Hello

            </div>

        </div>

    </div>

</div>






事件： show shown hide hiden...






轮播




<div id="myCarousel" class="carousel slide">    默认属性 data-interval="5000"  data-pause="hover"  data-wrap="true"

    <!--轮播指标-->

    <ol class="carousel-indicators">

        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>

        <li data-target="#myCarousel" data-slide-to="1"></li>

        <li data-target="#myCarousel" data-slide-to="2"></li>

    </ol>

    <!--轮播项目-->

    <div class="carousel-inner">

        <div class="item active">

            <img src="src/img/bg1.jpg" alt="bg1">
　　　　　　　<div class="calsourel-caption">
　　　　　　　　  <h3>标题</h3>
　　　　　　　　　<p>描述</p>
　　　　　　　</div>

        </div>

        <div class="item">

            <img src="src/img/bg2.jpg" alt="bg2">

        </div>

        <div class="item">

            <img src="src/img/bg3.jpg" alt="bg3">

        </div>

    </div>

    <!--轮播导航-->

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

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

    </a>

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

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

    </a>

</div>

自动开始：


<script>
    $(".carousel").carousel({interval: 2000});
</script>


事件： slide.bs.carousel   slid.bs.carousel






附加菜单(侧边栏停靠)




<div class="container" >

    <div class="col-md-2">

        <ul class="list-group affixed-element-top js-affixed-element-top" >

            <li class="list-group-item"><a href="#">Python1</a></li>

            <li class="list-group-item"><a href="#">Python2</a></li>

            <li class="list-group-item"><a href="#">Python3</a></li>

        </ul>

    </div>

    <div class="col-md-8">

        ...

    </div>

    <div class="col-md-2 js-content">

        <ul class="list-group affixed-element-bottom js-affixed-element-bottom" >

            <li class="list-group-item"><a href="#">Python1</a></li>

            <li class="list-group-item"><a href="#">Python2</a></li>

            <li class="list-group-item"><a href="#">Python3</a></li>

        </ul>

    </div>

</div>

<style>

    .affixed-element-top.affix {

        top: 10px;

    }

    .affixed-element-top.affix-bottom {

        position: relative;

    }

    .affixed-element-bottom.affix {

        bottom: 10px;

    }

    .affixed-element-bottom.affix-bottom {

        position: relative;

    }

</style>

<script>

    $(function () {

        $(".js-affixed-element-top").affix({

            offset:{

            }

        })

    })

    $(function () {

        $(".js-affixed-element-bottom").affix({

            offset:{

                bottom:100

            }

        })

    })

</script>


												


											
Bootstrap学习 - JavaScript插件的更多相关文章
	

    
						
  1. bootstrap学习——javascript插件篇
		
    飞近期做的一个小项目须要用到一个模态框和一个图片浏览插件,并把二者结合,刚好bootstrap有相应插件,下面是学习应用流程: 1.    引入js文件: 能够单个引入相应插件文件,或一次所有引入.飞 ...
    
		
    2. 
								
  2. bootstrap导入JavaScript插件
		
    Bootstrap的JavaScript插件可以单独导入到页面中,也可以一次性导入到页面中.因为在Bootstrap中的JavaScript插件都是依赖于jQuery库,所以不论是单独导入还一次性导入 ...
    
		
    3. 
						
  3. bootstrap学习笔记 插件概述
		
    Bootstrap插件概览 在前面布局组件章节中所讨论的组件仅仅是个开始.Bootstrap自带的12种jQuery插件,扩展了功能,可以给站点添加更多的互动.即使您不是一名高级的js开发人员, 你也 ...
    
		
    4. 
						
  4. [Bootstrap]7天深入Bootstrap(5)JavaScript插件
		
    在bs3.X中,提供了12种JavaScript插件,分别是:动画过渡(Transition).模态弹窗(Modal).下拉菜单(Dropdown).滚动侦测(Scrollspy).选项卡(Tab). ...
    
		
    5. 
						
  5. bootstrap学习之三—插件
		
    一.模态框(modal)插件 1)为要触发模态框的组件添加data-toggle="modal",data-target="对应ID" 2)使用一个div实现m ...
    
		
    6. 
						
  6. Bootstrap学习js插件篇之滚动监听
		
    1.滚动监听 案例 滚动监听插件可以根据滚动条的位置自动更新所对应的导航标记.Bootstrap中文网左侧就是一个滚动监听的例子. 代码段: <nav id="navbar-examp ...
    
		
    7. 
						
  7. Bootstrap学习js插件篇之标签页
		
    简单的标签页 代码: <h1 class="page-header">4.3标签页</h1> <ul class="nav nav-tabs ...
    
		
    8. 
						
  8. Bootstrap学习js插件篇之提示框
		
    案例 受到Jason Frame开发的jQuery.tipsy插件的启发,我们才把这个工具提示插件做的更好,而且此插件不依赖图片,只是使用CSS3来实现动画效果,并使用data属性存储标题. 将鼠标悬 ...
    
		
    9. 
						
  9. Bootstrap学习js插件篇之下拉菜单
		
    案例 通过此插件可以为几乎所有东西添加下拉菜单,包括导航条.标签页.胶囊式按钮. 用于导航条 导航条分为四个部分.第一部分导航头,第二部分导航列,第三部分form查询表单,第四部分导航列. <n ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. Ecstore1.2启用mongodb添加索引
			
    配置config(连接mongo) mongo define('KVSTORE_STORAGE', 'base_kvstore_mongodb'); define('MONGODB_SERVER_CO ...
    
			
    2. 
						
  2. HDtune(硬盘检测) V5.5 中文绿色版
			
    软件名称:HDtune(硬盘检测) V5.5 中文绿色版软件语言: 简体中文授权方式: 免费软件运行环境: Win 32位/64位软件大小: 565KB 图片预览: 软件简介:HD Tune Pro一 ...
    
			
    3. 
						
  3. xml 和json 数据格式及解析
			
    来源:http://blog.jobbole.com/79252/ 引言 NOKIA 有句著名的广告语:“科技以人为本”.任何技术都是为了满足人的生产生活需要而产生的.具体到小小的一个手机,里面蕴含的 ...
    
			
    4. 
						
  4. 将网页中的html代码的table保存成word文件
			
    1.后台代码: string nowtime = DateTime.Now.ToString("yyyy-MM-dd"); Response.Clear(); Response.B ...
    
			
    5. 
						
  5. .net core 系列
			
    1..net core 验证码 2..net core 导出excel 3..net core 上传文件 4..net core 时间戳转换 5..net core 读取配置文件 6..net cor ...
    
			
    6. 
						
  6. mysql主从复制的配置总结
			
    首先确定安装配置的环境 centOS7,mysql5.6 在配置之前要保证的几个点 1.系统防火墙,如果只是测试,可以关闭防火墙,如果不是测试,请开发需要使用的端口号,如3306: 开放端口 fire ...
    
			
    7. 
						
  7. nefu 753 n!末尾有多少个0
			
    Problem : 753 Time Limit : 1000ms Memory Limit : 65536K description 计算N!末尾有多少个0 input 输入数据有多组,每组1行,每 ...
    
			
    8. 
						
  8. 第13章 Swing程序设计----JDialog窗体
			
    JDialog窗体是Swing组件中的对话框 JDialog窗体的功能是从一个窗体中弹出另一个窗体,就像是在使用IE浏览器时弹出的确定对话框一样. 在应用程序中创建JDialog窗体需要实例化JDia ...
    
			
    9. 
						
  9. 转载--C# PLINQ 内存列表查询优化历程
			
    http://www.cnblogs.com/dengxi/p/5305066.html 产品中(基于ASP.NET MVC开发)需要经常对药品名称及名称拼音码进行下拉匹配及结果查询.为了加快查询的速 ...
    
			
    10. 
						
  10. unable to connect to :5555
			
    有可能批处理文件用的adb和eclipse的adb不兼容.把你的批处理文件用的adb换成eclipse的adb就可以了: 运行结果:
    
			
    11.