初学者--bootstrap（五）JavaScript插件（上）----在路上（6）

时间：2021-07-16 05:12:11

jQuery 插件为 Bootstrap 的组件赋予了“生命”。可以简单地一次性引入所有插件，或者逐个引入到你的页面中。

一：首先要确认的是，单个还是全部引入：

JavaScript 插件可以单个引入（使用 Bootstrap 提供的单个 *.js 文件），或者一次性全部引入（使用 bootstrap.js 或压缩版的 bootstrap.min.js）。

注：建议使用压缩版的 JavaScript文件；bootstrap.js 和 bootstrap.min.js 都包含了所有插件，在使用时，只需选择一个引入页面就可以了。

二：关于JavaScript都包含哪些部分

（1） 过渡效果（  transition.js）

    对于简单的过渡效果，只需将 transition.js 和其它 JS 文件一起引入即可。如果你使用的是编译（或压缩）版的 bootstrap.js 文件，就无需再单独将其引入了。

    所包含的内容：Transition.js 是针对 transitionEnd 事件的一个基本辅助工具，也是对 CSS 过渡效果的模拟。它被其它插件用来检测当前浏览器对是否支持 CSS 的过渡效果。

（2）模态框（ modal.js ）

模态框经过了优化，更加灵活，以弹出对话框的形式出现，具有最小和最实用的功能集。

注：不支持模态框重叠，千万不要在一个模态框上重叠另一个模态框。要想同时支持多个模态框，需要自己写额外的代码来实现。

关于模态框的 HTML 代码放置的位置：

务必将模态框的 HTML 代码放在文档的最高层级内（也就是说，尽量作为 body 标签的直接子元素），以避免其他组件影响模态框的展现和/或功能。

注意，当我们使用modal时，前提是要有一个按钮进行触发模态框，具体代码如下：

<body>

   <!--  Button trigger modal 前提是要有一个按钮进行触发模态框 -->

    <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">

            触发模态按钮

    </button>

    <!--  Modal先进行隐藏，当点击按钮时，事件执行 -->

 <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

   <!-- 弹出的模态框对话框   此可以决定模态框的大小和位置 ,通过添加modal-lg类改变大小 -->

      <div class="modal-dialog modal-lg">

        <!-- 弹出的模态内容部分 -->

        <div class="modal-content">

          <!-- （1）header -->

          <div class="modal-header">

            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">关闭</span></button>

            <h4 class="modal-title" id="myModalLabel">表单提交</h4>

          </div>

          <!-- （2）内容 input-->

          <div class="modal-body">

              <input type="text" class ="form-control">

          </div>

             <!--（3）尾部 按钮 -->

          <div class="modal-footer">

            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

            <button type="button" class="btn btn-primary">Save changes</button>

          </div>

        </div>   <!-- 弹出模态内容部分结束 -->

      </div> <!--  弹出的模态框结束 -->

    </div>

                                  <!-- 引入的js与jq -->

    <script src="lib/jquery/jquery-3.1.1.min.js" type="text/javascript" ></script>

    <script src="lib/dist/js/bootstrap.min.js" type="text/javascript" ></script>

  </body>

（3）下拉菜单

   通过数据属性或JavaScript,下拉栏插件切换隐藏的内容(下拉菜单),切换。开放类的父列表项。

  在移动设备上,打开一个下拉菜单，dropdown-backdrop关闭下拉菜单应在菜单之外,要求适当的iOS的支持。这意味着,从打开的下拉菜单切换到一个不同的下拉菜单。

 注意:data-toggle 是bootstrap中封装好的进行切换的属性。具体实现代码如下：

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

           <!-- 引入bootstrap中的css -->

    <link href="lib/dist/css/bootstrap.css" rel="stylesheet">

  </head>

  <body>

    <!-- 小的下拉按钮 共两部分组成-->

 <div class="dropdown">

      <!-- (1)点击按钮-->

      <button id="dLabel" type="button" data-toggle="dropdown" class="btn btn-success btn-lg">

      按钮与符号<span class="caret"></span>

      </button>

      <!-- (2)菜单目录 可用ul也可div-->

      <ul class="dropdown-menu" >

         <li><a href="#">百度一下</a></li>

      </ul>

      <!-- <div class="dropdown-menu">adnajdhajkd</div> -->

 </div>

    <!-- 自己来写一个 -->

    <!-- 这是我的恩师总结的超简单写法 -->

    <div class="dropdown">

       <button class= "btn btn-danger" data-toggle="dropdown">按钮</button>

       <div class="dropdown-menu" role ="menu">这是面板<br>啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦<br>哈哈哈哈</div>

    </div>

    <script src="lib/jquery/jquery-3.1.1.min.js" type="text/javascript" ></script>

    <script src="lib/dist/js/bootstrap.min.js" type="text/javascript" ></script>

  </body>

</html>

（4）滚动监听

滚动监听提要：
1.给想要滑动的区块设置 data-spy="scroll"
2.给设置data-spy=“scroll”的区块设置 相对定位

注：系统提供的代码看起来总会有些复杂，下面就为大家提供了一种简单方法，关于滚动监听的这个思想，无非就是建一个导航栏，再加上一个滑动监听空间，再让创建的id或类与导航栏中的标签对应起来

具体步骤如下：

步骤（1）：建一个导航条

步骤（2）：建滑动监听空间 （核心是：监听控件里的内容滑动到一个锚点，然后修改这个锚点的active）

步骤（3）设置id或class对象，让其与导航栏里的标签对应起来，使标签可以定位行（锚点特性），当滑动监听到某个位置时，导航栏上的相对应a标签执行active

具体代码如下：

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

             <!-- 引入bootstrap中的css -->

    <link href="lib/dist/css/bootstrap.css" rel="stylesheet">

  </head>

  <body>

      <!-- 系统提供的源代码 -->

    <!-- <body data-spy="scroll" data-target=".navbar-example">

           ...

        <div class="navbar-example">

        <ul class="nav nav-tabs" role="tablist">

          ...

        </ul>

      </div>

      ...

    </body> -->

 <!-- 步骤（1）：建一个导航条 （恩师魏氏的一个简单的导航条）-->

    <div class="navbar-example">

        <ul class="nav nav-tabs" role="tablist">

          <li role="presentation" class="active"><a href="#ios">ios</a></li>

          <li role="presentation"><a href="#html">html</a></li>

          <li role="presentation"><a href="#php">php</a></li>

        </ul>

    </div>

 <!-- 步骤（2）：建滑动监听空间   （核心是：监听控件里的内容滑动到一个锚点，然后修改这个锚点的active）  -->

  <!-- 注意设置的属性，height overflow position -->

  <div data-spy="scroll" data-target=".navbar-example" style="position: relative;height: 300px;overflow: auto;">

<!--（3）设置id或class对象，让其与导航栏里的标签对应起来，使标签可以定位行（锚点特性），当滑动监听到某个位置时，导航栏上的相对应a标签执行active -->

      <h3 id ="ios">IOS</h3>

      <p>sadaadada</p>

      <p>sadaadada</p>

      <p>sadaadada</p>

      <p>sadaadada</p>

      <p>sadaadada</p>

      <p>sadaadada</p>

      <p>sadaadada</p>

      <p>sadaadada</p>

      <p>sadaadada</p>

      <p>sadaadada</p>

      <p>sadaadada</p>

      <p>sadaadada</p>

      <p>sadaadada</p>

      <p>sadaadada</p>

      <p>sadaadada</p>

      <p>sadaadada</p>

      <h3 id ="html">HTML</h3>

      <p>sadaadada</p>

      <p>sadaadada</p>

      <p>sadaadada</p>

      <p>sadaadada</p>

      <p>sadaadada</p>

      <p>sadaadada</p>

      <p>sadaadada</p>

      <p>sadaadada</p>

      <p>sadaadada</p>

      <p>sadaadada</p>

      <p>sadaadada</p>

      <p>sadaadada</p>

      <p>sadaadada</p>

      <p>sadaadada</p>

      <p>sadaadada</p>

      <h3 id ="php">PHP后台</h3>

      <p>sadaadada</p>

      <p>sadaadada</p>

      <p>sadaadada</p>

      <p>sadaadada</p>

      <p>sadaadada</p>

      <p>sadaadada</p>

      <p>sadaadada</p>

    </div>

    <script src="lib/jquery/jquery-3.1.1.min.js" type="text/javascript" ></script>

    <script src="lib/dist/js/bootstrap.min.js" type="text/javascript" ></script>

  </body>

</html>

（5）标签页（ tab.js）

     标签页（Tab）通过结合一些 data 属性，可以轻松地创建一个标签页界面。通过这个插件可以把内容放置在标签页或者是胶囊式标签页甚至是下拉菜单标签页中。

    通过 data 属性：您需要添加 data-toggle="tab" 或 data-toggle="pill" 到锚文本链接中。

添加 nav 和 nav-tabs 类到 ul 中，将会应用 Bootstrap 标签样式，添加 nav 和 nav-pills 类到 ul 中，将会应用 Bootstrap胶囊式样式。

 <!-- 1.复制的滚动监听的代码 -->

    <!--<ul class="nav nav-tabs" role = "tablist">

        <li role="presentation" class="active"><a href="#ios" role="tab" data-toggle="tab">Home</a></li>

        <li role="presentation" role="tab" ><a href="#android" data-toggle="tab">Profile</a></li>

        <li role="presentation" role="tab" ><a href="#html" data-toggle="tab">Messages</a></li>

        </ul> -->

     <!--2.给他设置功能面板 可以建在div上，也可以直接在a标签上设置-->

    <!-- Tab panes -->

    <!-- <div class="tab-content">

             <div role="tabpanel" class="tab-pane active" id="ios">这是ios面板</div>

             <div role="tabpanel" class="tab-pane" id="android">这是安卓面板</div>

             <div role="tabpanel" class="tab-pane" id="html">这是HTML面板</div>

        </div> -->

  <!--精简版 -->

    <!-- (1)给a标签直接设置按钮\切换tab\对应的锚点id  data-toggle ="tab"-->

       <a href="#ios" class="btn btn-danger" data-toggle="tab">iOS</a>

       <a href="#android" class="btn btn-danger" data-toggle="tab">安卓</a>

       <a href="#html" class="btn btn-danger" data-toggle="tab">HTML</a>

  <!-- (2)点击之后切换的对应内容,及执行active  div里可以是p标签 也可以是a链接 -->

    <div class="tab-content">

      <p id="ios" class="tab-pane active" >这是ios面板</p>

      <p id="android" class="tab-pane " >这是安卓面板</p>

      <p id="html" class="tab-pane " >这是HTML面板</p>

      <!-- <a href="#" id="html" class="tab-pane">我是html</a> -->

    </div>

（6）工具提示（tooltip.js）

     所谓工具提示，是当鼠标经过或鼠标点击事件时，弹出此按钮的解释说明或应用说明

注：使用bootstrap中的工具提示组件，需要在自己的html中加入自己的jquery代码，以找到对应的弹出框。

具体代码如下：

 <!-- 现在光靠代码没用了  工具提示：tooltip 布局：placement方向  默认：default -->

    <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="hahaha" style="margin-top: 20px;">我是向上的</button>

    <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="lalalala on left">我是向左的</button>

    <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="nanana on bottom">Tooltip on bottom</button>

    <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="hehehhe我的工具框">Tooltip on right</button>

    <script src="lib/jquery/jquery-3.1.1.min.js" type="text/javascript" ></script>

    <script src="lib/dist/js/bootstrap.min.js" type="text/javascript" ></script>

    <!-- 注意：必须自己添加jq代码 ！！！-->

    <script>

        // $('#example').tooltip();

        // 获得所有的data-toggle的对象，给他们设置一个事件 tooltip

        $("[data-toggle ='tooltip']").tooltip();

    </script>

（7）弹出框

这里的弹出框与上面的工具提示效果看似相同，但代码还是有些不同的，

如：工具提示的data-toggle为tooltip，而弹出框则为popover，相同点就是都得自己写js找到各自切换的属性

这里的tooltip、popover是bootstrap封装好的函数，会用就可。

具体代码如下：

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

    <link href="lib/dist/css/bootstrap.css" rel="stylesheet">

  </head>

  <body>

   <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" title="弹出框标题"

   data-content=  "<a href=''>www.baidu.com</a>">Popover on right</button>

   <!-- 注： //如果弹出的是内容是a标签，不会有作用。 -->

    <script src="lib/jquery/jquery-3.1.1.min.js" type="text/javascript" ></script>

    <script src="lib/dist/js/bootstrap.min.js" type="text/javascript" ></script>

    <!-- 必须自己添加jq代码 -->

    <script>

       $("[data-toggle ='popover']").popover();

    </script>

  </body>

</html>

（8）Collapse

      轮播图！没错，对于在没有学习bootstrap的js插件前的初学者来说，做轮播图是件很头疼的事情，但自从会了js插件，轮播图so easy！

   轮播图无非包括几张图，几个小圆点儿，用以说明当前轮播到第几张，有的轮播图会再加上两边的左右箭头按钮，在使用bootstrap 中js插件时，要注意各实现功能所对应的类名

具体怎么使用bootstrap的轮播插件，代码如下：

          <!-- 轮播大框架 carousel-example-generic 指的是轮播通用例   可以对其自行设置-->

  <div id="carousel-example-generic" class="carousel slide" data-ride="carousel" style="width: 50%;

  height:50%; margin: 100px auto;">

      <!-- 轮播图上的小导航点 -->

      <ol class="carousel-indicators">

        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>

        <li data-target="#carousel-example-generic" data-slide-to="0" ></li>

        <li data-target="#carousel-example-generic" data-slide-to="1"></li>

         <!--   是指当轮播到最后一张的时候，只再指向第几张 -->

        <!-- <li data-target="#carousel-example-generic" data-slide-to="2"></li> -->

      </ol>

      <!-- carousel-inner指的是 轮播内部图片区域  且role必须有  -->

      <div class="carousel-inner" role="listbox">

      <!-- active 是指当前显示的轮播 -->

        <div class="item active" style = "background: red;height: 200px;">

              <!-- <img src="..." alt="..."> -->           <!-- 图片链接部分 -->

              <div class="carousel-caption">hahahaha</div>    <!-- 轮播图上面的标题、文本说明部分 -->

        </div>

        <div class="item" style = "background: green;height: 200px;">

              <!-- <img src="..." alt="..."> -->

              <div class="carousel-caption">lalalalala</div>

        </div>

        <div class="item" style = "background: pink;height: 200px;">

                <!-- <img src="..." alt="..."> -->

               <div class="carousel-caption">nananana</div>

        </div>

      </div>

      <!-- 左右箭头 -->

      <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">

        <span class="glyphicon glyphicon-chevron-left"></span>

        <span class="sr-only">Previous</span>

      </a>

      <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">

        <span class="glyphicon glyphicon-chevron-right"></span>

        <span class="sr-only">Next</span>

      </a>

 </div>  <!--  轮播大框架结束 -->

学习心得：

      bootstrap为我们提供了13种JavaScript插件，无疑为我们编写代码提供巨大帮助，不管对于初学者或已工作的程序员来说，更是使编码效率迅速提高，前提是你懂得bootstrap为你提供的方便。

     工作后大部分都会使用专用的jQuery插件，公司不同，使用的插件也不同，但插件无非就那么几种，像专门用于手机上的zepto.js -jquery的精简版，但是zepto主体默认是没有触摸组件的，触摸的js需要在其官网额外下载；还有主要用于移动端网站和移动app页面的iscroll.js，常见的有上拉刷新啊，下拉加载啊它都有，but！如果你够牛，可以自己开发属于自己的js、jQuery库。

     类似的前端框架（这里以响应式UI介绍为主），除bootstrap外，还有frozenUI:FrozenUI--专注于移动web的UI框架，提供的CSS组件是目前QQ会员前端开发组所用的通用样式库，FrozenUI提供的一系列JavaScript插件，其更优雅地在移动端上呈现更灵动的动画效果，其中，FrozenJS 是针对移动端开发的 js 组件库，其依赖 zepto.js 和 FronzenUI，其所有组件均以 zepto 的插件的形式存在。 还有一款就是amazeui : 也叫‘妹子UI’，个人觉得啊，就ui样式上和组件上来说，虽然中规中矩，常用的都有，但js和CSS文件在体积上相比其他插件上并不占优势，一般开发团队应用较多的还是bootstrap、frozenUi、zepto较多些。有关bootstrap的发展优势在前面几篇的文章包含，在这不在赘述，若想了解更多bootstrap详情，请参考http://v3.bootcss.com/。

----------------------------------------共勉-----------------------------------------

相关文章