Bootstrap学习 - JavaScript插件

模态框

<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插件的更多相关文章

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

随机推荐

mac 隐藏显示文件
显示:defaults write com.apple.finder AppleShowAllFiles -bool true隐藏:defaults write com.apple.finder Ap ...
chapter5 函数
在lua中,函数是语句和表达式体现的主要机制.函数可以完成某些特定的任务.计算和返回执行结果. 前者当成一个语句,后者当成一个表达式: *,/) a = ) + ) print(os.date()) ...
CentOS 6下的VPN搭建
PPTP 全称为 Point to Point Tunneling Protocol — 点到点隧道协议,是VPN协议中的一种.虚拟专用网(VPN)被定义为通过一个公用网络(通常是因特网)建立一个临时 ...
Tomcat7调优及JVM性能优化for Linux环境
标签: tomcat7 jvm 性能分享到: 出处:http://www.iteye.com 该优化针对Linux X86_X64环境 1. Tomcat优化其实就是对server.xml优化(开户 ...
将网页中的html代码的table保存成word文件
1.后台代码: string nowtime = DateTime.Now.ToString("yyyy-MM-dd"); Response.Clear(); Response.B ...
JavaScript Function arguments.callee caller length return
一.Function 函数是对象,函数名是指针. 函数名实际上是一个指向函数对象的指针. 使用不带圆括号的函数名是访问函数指针,并非调用函数. 函数的名字仅仅是一个包含指针的变量而已.即使在不同的环境 ...
终于下决心在cnblogs上安家了，^_^
以前在这个地方学到了很多东西,希望在这里安家以后,自己也可以有很多成长. mark一下,~~
C语言_数字排列顺序
#include <stdio.h> #include <stdlib.h> #define LENGTH 8 void main() { , , , , , , , }; ; ...
GITLAB管理自己的私有源码
github是很好的公开源码管理器,但是,私有项目,需要付费才行,比较郁闷,特别是个人工作者 gitlab(英文我不咋滴),上貌似允许1000个私有项目,其他的权限,还没怎么看,估计简单的项目 ...
hdu_5775_Bubble Sort(树状数组)
题目链接:hdu_5775_Bubble Sort 题意: 让你找每一个数在冒泡排序中最右边和最左边的位置的差值题解: 还是官方题解,讲的已经很清楚了 1012 Bubble Sort 考虑一个位置 ...

Bootstrap学习 - JavaScript插件

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

随机推荐

热门专题