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

随机推荐

关于socket客户端接收不定长数据的解决方案
#!/usr/bin/env python3.5 # -*-coding:utf8-*- """ 本实例客户端用于不断接收不定长数据,存储到变量res "&qu ...
【Loadrunner】初学Loadrunner——IP欺骗
因为在默认情况下,同一个用户用同一个IP访问运行是不符合实际情况的,而且很多网站会自动屏蔽同个IP多次重复访问.那么就想到了Loadrunner的虚拟IP技术,也就是常说的IP欺骗.在用Loadrun ...
php笔记(一)面向对象编程
<?php //定义一个类 class Car { var $name = '汽车'; function getName() { return $this->name; } } //实例化 ...
Round Numbers（组合数学）
Round Numbers Time Limit : 4000/2000ms (Java/Other) Memory Limit : 131072/65536K (Java/Other) Tota ...
Pots（BFS）
Pots Time Limit : 2000/1000ms (Java/Other) Memory Limit : 131072/65536K (Java/Other) Total Submiss ...
UIScrollView 加载多个view view还可以交换顺序（1）
#import "ViewController.h" #define kWidthOfScreen self.view.frame.size.width #define kHeig ...
shell脚本调试方法
我们开启了 Shell 脚本调试系列文章,先是解释了不同的调试选项,下面介绍如何启用 Shell 调试模式. 写完脚本后,建议在运行脚本之前先检查脚本中的语法,而不是查看它们的输出以确认它们是否正常工 ...
PMP培训感想
终于等到了C打头的邮件,等了几个星期,悬着的心终于放了.1P4M,基本跟平时模块成绩一致.当初模考时,第一次考了126,还算比较满意,毕竟还没开始苦逼看嘛,悲剧的是不管后面再怎么努力,成绩始终在1 ...
照着例子学习protobuf-python
以下是照着python操作protobuf进行的protobuf-python的学习笔记: 首先是protobuf的下载与安装: 1 由于google被墙,所以去github上面搜索了一下protob ...
unknow type name 'off64_t'
或者错误"error: 'off64_t' does not name a type" MinGW的bug,使用-std=c++11, 有可能出现, 修改{MinGW dir} ...

Bootstrap学习 - JavaScript插件

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

随机推荐

热门专题