模态框

<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. C# 编辑距离实现
			
    /// <summary> /// 计算 /// </summary> /// <param name="str1"></param> ...
    
			
    2. 
						
  2. 显示进度条tqdm
			
    http://www.open-open.com/lib/view/open1451794925808.html
    
			
    3. 
						
  3. CSS中background:url(图片) 不能显示的问题
			
    刚刚碰到一个奇怪的问题,这样一段CSS代码:   .pho6 { background: url(img/pho6.jpg);  } 这段代码居然不能显示出背景图片,路经绝对是没错的代码肯定没有问题, ...
    
			
    4. 
						
  4. AS3.0杂记——Dictionary、Object与Array
			
    来源:http://blog.csdn.net/m_leonwang/article/details/8811829 Object.Array与Dictionary都是关联数组,就是用“键”来索引存储 ...
    
			
    5. 
						
  5. Laravel框架开发规范-修订前期版
			
    1.追加App/Models目录,App/User.php迁移至App/Models目录中 ①配置内容属于架构信息.服务器信息.有必要隐藏无法提交git的信息,请使用.env文件配合env()方法进行 ...
    
			
    6. 
						
  6. 正则表达式 替换 <img > 标签
			
    /** * 正则表达式过滤<img > 标签 * @param str * @return */ public static String cutOutImgPrefix(String s ...
    
			
    7. 
						
  7. Linux通过XAMPP集成软件包搭建LAMPP环境
			
    前面介绍过一篇“Linux手动搭建LAMP环境”,今天再来整理一篇“Linux通过XAMPP集成软件包搭建LAMPP环境”. 其实当初整理通过XAMPP集成软件包搭建LAMPP环境的原因是这样的: 自 ...
    
			
    8. 
						
  8. JQuery 多选按钮checkbox
			
    JQuery 多选按钮checkbox 在需要全选和选择部分的时候我们就需要多选在这里主要介绍了具体的实现 JQuery $(function () { //全选或全不选 $("#allbo ...
    
			
    9. 
						
  9. 2016年7款最流行的Java框架
			
    虽然Java一直被唱衰,但是直到现在Java也坚持霸主地位不动摇,毫无疑问,Java是目前最热门的编程语言之一,所以我们为大家搜集了一些目前比较受欢迎的Java框架的消息. 根据RebelLabs对在 ...
    
			
    10. 
						
  10. C# 网上收集的一些所谓的开源项目
			
    C#开源 商业协作和项目管理平台-TeamLab 网络视频会议软件-VMukti 驰骋工作流程引擎-ccflow [免费]正则表达式测试工具-Regex-Tester Windows-Phone-7- ...
    
			
    11.