模态框

<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. Gentoo安装详解（五）-- 安装X桌面环境
			
    安装X桌面环境: 安装Xorg: 检测显卡信息: dmesg | grep video lspci | grep -i VGA 配置INPUT_DEVICE.VIDEO_CARDS变量: 在安装Xor ...
    
			
    2. 
						
  2. android Tweened Animations
			
    Android提供了两种类型的动画: 一类是Tween动画:提供了旋转.移动.伸展和淡出等效果: 第二类是Frame-by-frame动画:这一类Animations可以创建一个Drawable序列, ...
    
			
    3. 
						
  3. vmware虚拟机如何安装ubuntu14.10系统
			
    vmware虚拟机安装ubuntu14.10系统安装步骤如下:
    
			
    4. 
						
  4. NGUI等比缩放
			
    /// <summary> /// UI 等比缩放 /// </summary> static private void AdaptiveUI() { ; ; UIRoot u ...
    
			
    5. 
						
  5. PIVOT就是行转列，UNPIVOT就是列传行
			
    PIVOT通过将表达式某一列中的唯一值转换为输出中的多个列来旋转表值表达式,并在必要时对最终输出中所需的任何其余列值执行聚合.UNPIVOT与PIVOT执行相反的操作,将表值表达式的列转换为列值. 通 ...
    
			
    6. 
						
  6. Latex 中插入图片no bounding box 解决方案
			
    在windows下,用latex插入格式为jpg,png等图片会出现no bounding box 的编译错误,此时有两个解决办法: 1.将图片转换为eps格式的图片 \usepackage{grap ...
    
			
    7. 
						
  7. cookie和session的区别(搜狐笔试考到的一个题目)
			
    一.cookie机制和session机制的区别***************************************************************************** ...
    
			
    8. 
						
  8. win8.1去掉鼠标右键回收站“固定到开始”屏幕的方法
			
    平台:win8.1 问题:桌面“回收站”右键菜单里有个“固定到开始屏幕”,一不小心就误按,设法删除之. 打开注册表编辑器.在注册表编辑器里面定位到:HKEY_LOCAL_MACHINE\SOFTWAR ...
    
			
    9. 
						
  9. hdu_1253_胜利大逃亡(bfs+剪枝)
			
    题目连接:http://acm.hdu.edu.cn/showproblem.php?pid=1253 题意:三维BFS,不解释 题解:DFS+剪枝会超时,裸BFS会超时,BFS+剪枝才能AC,有点伤 ...
    
			
    10. 
						
  10. nefu 72 N!
			
    Description Given an integer N(0 ≤ N ≤ 10000), your task is to calculate N! Input One N in one line, ...
    
			
    11.