python之路_前端基础之Bootstrap JS

相关详细内容参考如下链接：http://v3.bootcss.com/javascript/

一、模态框

　　位置要放在body里面，作为body的直接子元素：

1、弹出方式：
　　（1）.通过 data 属性：data-toggle="modal" data-target="#myModal"
　　（2）.通过JS代码：- $("#myModal").modal("show") --> 显示出来；- $("#myModal").modal("hide) --> 隐藏
2、模态框大小：

　　模态框提供了两个可选尺寸，通过为 .modal-dialog 增加一个样式调整类实现。.modal-lg为设置为大模态框，.modal-sm为设置为小模态框
3、设置动画效果：
　　如果你不需要模态框弹出时的动画效果（淡入淡出效果），删掉 .fade 类即可。

参数
　　backdrop： true/false/'static' --> 遮罩层的参数
　　keyboard: true/false --> 键盘上的ESC按键

二、轮播图

python之路_前端基础之Bootstrap JS

　　通过如下js形式设置图片自动切换的时间间隔：

<script>
    $('.carousel').carousel({
        interval: 2000                                                                //时间单位为毫秒
    })
</script>

三、左侧菜单

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
      <h4 class="panel-title">
        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
         菜单一
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
      <div class="panel-body">
       内容1
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingTwo">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
         菜单二
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
      <div class="panel-body">
       内容2
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingThree">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
         菜单三
        </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
      <div class="panel-body">
       内容3
      </div>
    </div>
  </div>
</div>

四、其他插件

1、FontAwesome字体

　　参考网址：http://fontawesome.io/；详细用法参见上述站点的Examples。需要强调的是使用此字体时需要引入相应的css样式，如下例：

 <link rel="stylesheet" href="fontAwesome/css/font-awesome.css">

2、SweetAlert系列

　　参考网址：https://github.com/limonte/sweetalert2；主要用于alert出不同的样式，需要强调的是使用此字体需要引入相应的css和js文件，如下例：

<script src="bower_components/sweetalert2/dist/sweetalert2.min.js"></script>
<link rel="stylesheet" href="bower_components/sweetalert2/dist/sweetalert2.min.css">

　　应用的实例如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>sweetalert示例</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="sweetalert/sweetalert2.min.css">
</head>
<body>

<button class="btn btn-success">点我</button>

<script src="jquery-3.2.1.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="sweetalert/sweetalert2.all.min.js"></script>
<script>
    $("button").on("click", function () {
        swal("标题", "内容", "success");                         //常用的有如下几种类型：success   error warning  info    question
    })
</script>
</body>
</html>

python之路_前端基础之Bootstrap JS

3、jQueryLazyLoad

　　称为懒加载，常见应用就是浏览器的省流量设置，使用原理为：加载时显示小图标，通过小图标点击触发真正的图标显示，应用实例如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>懒加载示例</title>
</head>
<body>
<div>
  <div><img src="img/0.jpg" alt="" class="lazy" data-original="img/5.jpg" width="600px" height="400px"></div>
  ...
  <div><img src="img/0.jpg" alt="" class="lazy" data-original="img/6.jpg" width="600px" height="400px"></div>
</div>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="jquery.lazyload.min.js"></script>                                         //需要引入此插件
<script>
  $("img.lazy").lazyload({
    effect: "fadeIn",
    event: "click"
  })
</script>
</body>
</html>

python之路_前端基础之Bootstrap JS

相关推荐