1. 首页
  2. JAVA教程
  3. ACCP8.0Y2Web前端框架与移动应用开发第4章Bootstrap的JavaScript插件

ACCP8.0Y2Web前端框架与移动应用开发第4章Bootstrap的JavaScript插件

•Java教程•阅读 1594

杂记

插件之间的依赖关系

某些插件和 CSS 组件依赖于其它插件。如果你是单个引入每个插件的，请确保在文档中检查插件之间的依赖关系。注意，所有插件都依赖 jQuery （也就是说，jQuery必须在所有插件之前引入页面）。 bower.json 文件中列出了 Bootstrap 所支持的 jQuery 版本。

data 属性

你可以仅仅通过 data 属性 API 就能使用所有的 Bootstrap 插件，无需写一行 JavaScript 代码。这是 Bootstrap 中的一等 API，也应该是你的首选方式。

话又说回来，在某些情况下可能需要将此功能关闭。因此，我们还提供了关闭 data 属性 API 的方法，即解除以 data-api 为命名空间并绑定在文档上的事件。就像下面这样：

$(document).off('.data-api')

另外，如果是针对某个特定的插件，只需在 data-api 前面添加那个插件的名称作为命名空间，如下：

$(document).off('.alert.data-api')

编程方式的 API

我们为所有 Bootstrap 插件提供了纯 JavaScript 方式的 API。所有公开的 API 都是支持单独或链式调用方式，并且返回其所操作的元素集合（注：和 jQuery 的调用形式一致）。

$('.btn.danger').button('toggle').addClass('fat')

所有方法都可以接受一个可选的 option 对象作为参数，或者一个代表特定方法的字符串，或者什么也不提供（在这种情况下，插件将会以默认值初始化）：

$('#myModal').modal()                      // 以默认值初始化
$('#myModal').modal({ keyboard: false })   // initialized with no keyboard
$('#myModal').modal('show')                // 初始化后立即调用 show 方法

每个插件还通过 Constructor 属性暴露了其原始的构造函数：$.fn.popover.Constructor。如果你想获取某个插件的实例，可以直接通过页面元素获取：$('[rel="popover"]').data('popover')。

默认设置

每个插件都可以通过修改其自身的 Constructor.DEFAULTS 对象从而改变插件的默认设置：

$.fn.modal.Constructor.DEFAULTS.keyboard = false // 将模态框插件的 `keyboard` 默认选参数置为 false

一.单词部分

modal模态框 transition动画过渡效果插件 carousel旋转轮播

indicators指针 scroll滚动

二.预习部分

1.bootstrap有哪些插件？分别是什么

动画过渡，警告框，提示框，按钮

2.动画过渡插件应用在其他那些插件中

①模态框的滑动和渐变效果

②选项卡的渐变效果

③旋转轮播的滑动效果

三.练习部分

1.制作百度登录框

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title>百度一下</title>


</head>
<body>
<div class="container">
    <br><br><br>
    <div class="row">
        <div class="col-md-2 col-md-push-10">
            <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-sm">
                登录
            </button>
        </div>
    </div>
    <br><br>
    <div class="row">
        <div class="col-md-10 col-md-push-1">
            <div class="input-group">
           <input type="text" class="form-control" placeholder="">
            <span class="input-group-addon">百度一下</span>
            </div>
        </div>
    </div>

    <!--fade过渡效果-->
   <!-- <div class="modal fade bs-example-sm" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                这是小的
            </div>
        </div>
    </div>-->

    <div class="modal fade bs-example-sm"  tabindex="-1" role="dialog" aria-labelledby="myModal" aria-hidden="true">
        <div class="modal-dialog modal-sm">
            <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" >登录百度账号</h4>
                </div>
                <div class="modal-body">
                    <div class="input-group">

                        <input type="text" class="form-control" placeholder="手机/邮箱/用户名">

                        <input type="password" class="form-control" placeholder="密码">


                    </div>
                    <input type="radio">下次自动登录
                    <br>
                    <div class="container">

                        <div class="row">
                            <div class="col-md-3 col-md-push-0"><button type="button" class="btn btn-danger" >登录</button></div>
                        </div>
                    </div>

                </div>
                <div class="modal-footer">
                    <!--<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" data-dismiss="modal">Save</button>-->
                </div>
            </div>
        </div>
    </div>
</div>
<script src="../jquery-3.2.1.min.js"></script>
<link rel="stylesheet" href="../css/bootstrap.min.css">
<script src="../js/bootstrap.min.js"></script>
</body>
</html>

2.制作搜狐新闻选项卡

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title>Title</title>


        <style>
            .container{
                border: 1px rgba(222,180,233,0.95) solid;
                margin-top: 50px;
            }
            .img-rounded{
                margin-top: 20px;
                margin-left: 20px;
            }
        </style>
</head>
<body>
<div class="container">

<ul  class="nav nav-tabs">
    <li class="active"><a href="#news" data-toggle="tab" >
        新闻</a>
    </li>
    <li><a href="#play" data-toggle="tab">娱乐</a></li>
    <li><a href="#war" data-toggle="tab">
        军事</a>
    </li>
    <li><a href="#society" data-toggle="tab">社会</a></li>
    <li><a href="#phy" data-toggle="tab">
        体育</a>
    </li>


</ul>
<div  class="tab-content">
    <div class="tab-pane fade in active" >
     <img src="image/1.jpg" class="img-rounded">
        <ul>
            <li>村主任看风水收费一万不算违纪？</li>
            <li>女经理色诱警官卖17台伪劣安检机？</li>
            <li>男子
yiyeqing
后疑染病将女子推下楼？</li> <li>网传四川成都一女性头部被人割掉？</li> <li>游客遭老虎咬死专家称园方无责任？</li> </ul> </div> <div class="tab-pane fade" > <img src="image/2.jpg" class="img-rounded"> <ul> <li>村主任看风水收费一万不算违纪？</li> <li>女经理色诱警官卖17台伪劣安检机？</li> <li>男子
yiyeqing
后疑染病将女子推下楼？</li> <li>网传四川成都一女性头部被人割掉？</li> <li>游客遭老虎咬死专家称园方无责任？</li> </ul> </div> <div class="tab-pane fade" > <img src="image/3.jpg" class="img-rounded"> <ul> <li>村主任看风水收费一万不算违纪？</li> <li>女经理色诱警官卖17台伪劣安检机？</li> <li>男子
yiyeqing
后疑染病将女子推下楼？</li> <li>网传四川成都一女性头部被人割掉？</li> <li>游客遭老虎咬死专家称园方无责任？</li> </ul> </div> <div class="tab-pane fade" > <img src="image/4.jpg" class="img-rounded"> <ul> <li>村主任看风水收费一万不算违纪？</li> <li>女经理色诱警官卖17台伪劣安检机？</li> <li>男子yiyeqing后疑染病将女子推下楼？</li> <li>网传四川成都一女性头部被人割掉？</li> <li>游客遭老虎咬死专家称园方无责任？</li> </ul> </div> <div class="tab-pane fade" > <img src="image/5.jpg" class="img-rounded"> <ul> <li>村主任看风水收费一万不算违纪？</li> <li>女经理色诱警官卖17台伪劣安检机？</li> <li>男子
yiyeqing
后疑染病将女子推下楼？</li> <li>网传四川成都一女性头部被人割掉？</li> <li>游客遭老虎咬死专家称园方无责任？</li> </ul> </div> </div> </div> <script src="../jquery-3.2.1.min.js"></script> <link rel="stylesheet" href="../css/bootstrap.min.css"> <script src="../js/bootstrap.min.js"></script> <script> $(function () { $('#one').tab('show'); }); </script> </body> </html>

3.制作美联英语在线VIP轮播图

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title>美联英语</title>

    <style>
        .row{
            background-color: rgba(142,131,132,0.95);
        }
        #ulli li{
            float: left;
            list-style: none;
            margin-left: 10px;
            margin-top: 5px;
        }
        #ullii li{
            float: left;
            list-style: none;
        }

    </style>


</head>
<body>

        <div class="row">
            <div class="col-md-3">
                <ul >

                    <li><span class="glyphicon glyphicon-phone-alt"></span>400-777-8828</li>
                    <li>中文</li>
                    <li>英文</li></ul>
            </div>
            <div class="col-md-3 col-md-push-6">
                <ul >
                    <li><button type="button" class="btn btn-danger btn-sm">免费注册</button> </li>
                    <li><button type="button" class="btn btn-danger btn-sm">登录</button></li>
                    </ul>
            </div>
        </div>

<div  class="carousel slide">
    <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="image/img1.jpg">
            <div class="carousel-caption"></div>
        </div>
        <div class="item">
            <img src="image/img2.jpg">
            <div class="carousel-caption"></div>
        </div>
        <div class="item">
            <img src="image/img3.jpg">
            <div class="carousel-caption"></div>
        </div>
    </div>
    <a class="carousel-control leftt" href="#myCarousel"
       data-slide="prev"></a>
    <a class="carousel-control rightt" href="#myCarousel"
       data-slide="next"></a>
</div>
        <script src="../jquery-3.2.1.min.js"></script>
        <link rel="stylesheet" href="../css/bootstrap.css">
        <!--<script src="../js/bootstrap.min.js"></script>-->
        <script src="../js/bootstrap.js"></script>
        <script>
          $(".carousel").carousel({
              interval:2000
          })
        </script>
</body>

</html>

4.制作所问数据页面

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title>所问数据</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
</head>
<body data-spy="scroll" data-target="#myScrollspy" data-offset="0">

<nav class="nav navbar-inverse navbar-static navbar-fixed-top"  role="navigation">
    <div class="navbar-header">
        <button class="navbar-toggle" data-toggle="collapse" type="button"
                data-target=".navbar-collapse">
            <span class="icon-bar active"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>

        </button>
        <h4 >所问数据</h4>
    </div>
    <div class="collapse navbar-collapse navbar-right">
        <ul class="nav navbar-nav">
            <li  class="active"><a href="#chanpin">产品优势</a></li>
            <li><a href="#jiejue">解决方案</a></li>
            <li><a href="#guanyu">关于我们</a></li>
            <li><a href="#lianxi">联系我们</a></li>
        </ul>

    </div>

</nav>
<br><br><br>
<div class="container">
    <div   class="row">
        <div class="col-md-10 col-xs-10"  image/header-bg.jpg'); background-size: cover"></div>
    </div>
    <div class="row" ><div class="col-md-5 col-md-offset-4 col-xs-12"><h1>行业解决方案</h1>
    <h4  >数据分析，未来市场预判</h4>
    </div><br>
        <br><br>

    </div>
    <div class="row" >
        <div class="col-md-4 col-xs-12">
            <div class="thumbnail">
                <img src="image/analysis.jpg">
                <div class="caption">
                    <p>kbhkbkjkjbhkbhbkhbhkb</p>
                </div>
            </div>
        </div>
        <div class="col-md-4 col-xs-12">
            <div class="thumbnail">
                <img src="image/antiterrorism.jpg">
                <div class="caption">
                    <p>kbhkbkjkjbhkbhbkhbhkb</p>
                </div>
            </div>
        </div>
        <div class="col-md-4 col-xs-12">
            <div class="thumbnail">
                <img src="image/financial.jpg">
                <div class="caption">
                    <p>kbhkbkjkjbhkbhbkhbhkb</p>
                </div>
            </div>
        </div>
        <div class="col-md-4 col-xs-12">
            <div class="thumbnail">
                <img src="image/forecast.jpg">
                <div class="caption">
                    <p>kbhkbkjkjbhkbhbkhbhkb</p>
                </div>
            </div>
        </div>
        <div class="col-md-4 col-xs-12">
            <div class="thumbnail">
                <img src="image/gov.jpg">
                <div class="caption">
                    <p>kbhkbkjkjbhkbhbkhbhkb</p>
                </div>
            </div>
        </div>
        <div class="col-md-4 col-xs-12">
            <div class="thumbnail">
                <img src="image/medical.jpg">
                <div class="caption">
                    <p>kbhkbkjkjbhkbhbkhbhkb</p>
                </div>
            </div>
        </div>

    </div>
    <div class="row">
        <div class="col-md-4 col-md-offset-2"><img src="image/peng.jpg" ></div>
        <div class="col-md-4"><img src="image/shengchao.jpg"></div>
        <div class="col-md-4"><img src="image/shengchao.jpg"></div><div class="col-md-4"><img src="image/shengchao.jpg"></div>
        <div class="col-md-4"><img src="image/shengchao.jpg"></div>

    </div>
<div class="row">
    <form action="#"   >
<h1  >jnjknjknknkj</h1>
        <div class="form-group">
          <input class="input-lg" type="text" placeholder="联系我们">
        </div>
        <div class="form-group">
           <input class="input-lg" type="text" placeholder="地址">
        </div>
        &nbsp;&nbsp;&nbsp;<div class="form-group">
        <input class="input-lg" type="text" placeholder="电话">
    </div>
        <div class="form-group">
            <input class="input-lg" type="text" placeholder="地址">
        </div>
        &nbsp;&nbsp;&nbsp;<div class="form-group">
        <input class="input-lg" type="text" placeholder="电话">
    </div>
        <div class="form-group">
            <input class="input-lg" type="text" placeholder="地址">
        </div>
        &nbsp;&nbsp;&nbsp;<div class="form-group">
        <input class="input-lg" type="text" placeholder="电话">
    </div>
        &nbsp;&nbsp;&nbsp;<div class="form-group">
        <input class="input-lg" type="text" placeholder="电话">
    </div>
        <div class="form-group">
            <input class="input-lg" type="text" placeholder="地址">
        </div>
        &nbsp;&nbsp;&nbsp;<div class="form-group">
        <input class="input-lg" type="text" placeholder="电话">
    </div>
        &nbsp;&nbsp;&nbsp;<div class="form-group">
        <input class="input-lg" type="text" placeholder="电话">
    </div>
        <div class="form-group">
            <input class="input-lg" type="text" placeholder="地址">
        </div>
        &nbsp;&nbsp;&nbsp;<div class="form-group">
        <input class="input-lg" type="text" placeholder="电话">
    </div>  &nbsp;&nbsp;&nbsp;<div class="form-group">
        <input class="input-lg" type="text" placeholder="电话">
    </div>
        <div class="form-group">
            <input class="input-lg" type="text" placeholder="地址">
        </div>
        &nbsp;&nbsp;&nbsp;<div class="form-group">
        <input class="input-lg" type="text" placeholder="电话">
    </div>
        <br>
    </form>
</div>
</div>
<script>
    $(function(){
       
        $("#myScrollspy").scrollspy();
    });
</script>
<script src="../jquery-3.2.1.min.js"></script>

<script src="../js/bootstrap.min.js"></script>


</body>

</html>

四.总结部分

事件

Bootstrap 为大部分插件所具有的动作提供了自定义事件。一般来说，这些事件都有不定式和过去式两种动词的命名形式，例如，不定式形式的动词（例如 show）表示其在事件开始时被触发；而过去式动词（例如 shown ）表示在动作执行完毕之后被触发。

从 3.0.0 版本开始，所有 Bootstrap 事件的名称都采用命名空间方式。

所有以不定式形式的动词命名的事件都提供了 preventDefault 功能。这就赋予你在动作开始执行前将其停止的能力。

$('#myModal').on('show.bs.modal', function (e) {
  if (!data) return e.preventDefault() // 阻止模态框的展示
})

未对禁用 JavaScript 的浏览器提供补救措施

Bootstrap 插件未对禁用 JavaScript 的浏览器提供补救措施。如果你对这种情况下的用户体验很关心的话，请添加<noscript> 标签向你的用户进行解释（并告诉他们如何启用 JavaScript），或者按照你自己的方式提供补救措施。

欢迎提问，欢迎指错，欢迎讨论学习信息 有需要的私聊 发布评论即可 都能回复的

原文在博客园http://www.cnblogs.com/a782126844/有需要可以联系扣扣：2265682997

相关推荐

Copyright © 2008-2024渝ICP备2022006305号-5.

本站所有数据收集于网络如有侵犯到您的权益请联系，进行下架处理。