bootstrap javascript插件部分的笔记整理

Posted 郑爽阿

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了bootstrap javascript插件部分的笔记整理相关的知识，希望对你有一定的参考价值。

概览
（1）每一个插件（带有js功能的组件），想使用bootstrap插件，一个是要去写他的html，第二个是使用CSS去修饰它，再引入相应的js文件。
 
bootstrap框架里的轮播图，他有自己的js文件。
javascript 插件可以单个引入（使用 Bootstrap 提供的单个 *.js 文件），或者一次性全部引入（使用 bootstrap.js 或压缩版的 bootstrap.min.js）。
建议使用压缩版的 JavaScript 文件
bootstrap.js 和 bootstrap.min.js 都包含了所有插件，你在使用时，只需选择一个引入页面就可以了。
（2）组件的 data 属性
data-toggle：指的是什么事件触发
data-target :  绑定其效果的对象
 
（3）插件之间的依赖关系
导入bootstrap.min.js 之前 要导入jquery.js
 
模态框 modal.js  -----  以弹出对话框的形式出现 。
点击按钮即可通过 JavaScript 启动一个模态框。此模态框将从上到下、逐渐浮现到页面前。
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
    模态按钮
</button>
<!-- Modal -->   fade的过渡效果是加在madal中的，不是加在button上！
<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）内容 -->
      <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>
 

增强模态框的可访问性

务必为 .modal 添加 role="dialog" 属性，aria-labelledby="myModalLabel" 属性用于只想模态框的标题栏，aria-hidden="true" 用于通知辅助性工具略过模态框的 DOM元素。

另外，你还应该通过 aria-describedby 属性为模态框 .modal 添加描述性信息。
可选尺寸模态框提供了两个可选尺寸（modal-lg/modal-sm），通过为 .modal-dialog 增加一个样式调整类实现。
 
 
下拉菜单---dropdown.js
 
<!-- 小的下拉按钮 -->
<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 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">这是面板</div>
</div>
 
滚动监听--- scrollspy.js
     1.给想要滑动的区块设置 data-spy="scroll" 
     2.给设置data-spy=“scroll”的区块设置  相对定位 
 
<!-- 系统提供的源代码 -->
<!-- <body data-spy="scroll" data-target=".navbar-example">
  ...
  <div class="navbar-example">
    <ul class="nav nav-tabs" role="tablist">
      ...
    </ul>
  </div>
  ...
</body> -->
 
<!-- 自己写 -->
<!-- （2）做一个简单的导航 -->
<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>
<!-- （1）这是滑动监听空间 -->
<!-- 核心是：监听控件里的滑动到一个锚点，然后修改这个锚点的active -->
<div data-spy="scroll" data-target=".navbar-example" style="position: relative;height: 300px;overflow: auto;">
  <!-- （3）设置id对象让与导航栏里的标签对应起来，导致标签可以定位行（锚点特性），滑动监听到某个位置，回设导航栏上的相对应a标签的active -->
  <h3 id ="ios">IOS</h3>
  <p>...</p>*n
  <h3 id ="html">HTML</h3>
    <p>...</p>*n
  <h3 id ="php">PHP后台</h3>
    <p>...</p>*n
 
标签页 Togglable tabs--- tab.js
 

 <!-- <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.给他设置功能面板 -->
 <!-- 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、
（1）给a标签设置 data-toggle ="tab"
 (2) 给a设置对应的锚点id
     -->
<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.给他设置功能面板 -->
<!-- Tab panes -->
<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> 
 

工具提示  Tooltips tooltip.js

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

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

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>
<!-- 光拷代码是没有用的，必须自己添加jq代码： $(‘#example‘).tooltip();-->
 
<script>
   获得所有的data-toggle的对象，给他们设置一个事件 tooltip
    $("[data-toggle =‘tooltip‘]").tooltip();
</script>
 
弹出框  Popovers popover.js
Copy
<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="left" data-content="内容，可以自己设置">
  Popover on left
</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on top
</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamussagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on bottom
</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on right
</button>
<!-- 必须自己添加jq代码 -->
<script>
  $("[data-toggle =‘popover‘]").popover();
</script>
 
折叠 Collapse collapse.js
bootstrap版本的代码
<!-- (1)设置一个div class为 panel-group -->
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <!-- (1)面板 -->
  <div class="panel panel-default">
    <!-- （2）此面板只有Heading 还可以有 /panel-heading/panel-body-->
    <div class="panel-heading" role="tab" id="headingOne">
      <!-- (3)标题 -->
      <h4 class="panel-title">
        <!-- a 链接有一个 事件，collapse 折叠，对折叠1（collapseOne ）的对象造成影响 -->
        <a 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">
       内容。文字区域
    </div>
  </div>
  <!-- ...............第二个面板...同第一个面板............... -->
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingTwo">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
          这是第二个部分
        </a>
      </h4>
    </div> 
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
      <div class="panel-body">
        内容。文字区域
      </div>
    </div>
  </div>
</div>
 
====================简单版本====================
<!-- (1)创建一个button
    （2）创建一个div面板
    （3）给button增加事件 折叠事件
 -->
<button class="btn btn-info btn-lg" data-toggle="collapse" data-target="#demo">按钮</button>
<!-- 小bug a标签通过href=#来控制折叠对象
     button或者其他可以用 data-target(绑定对象)
-->
<!-- 这样已经完成了 -->
<!-- <div id="demo" class="in">
  我就是面板。爱咋咋，爱的空间按回电话艾克好看后代卡号那块立方卡<br>
  ajka akd hakdhna ldkaljaa.ansc,cfav,cmam,va,vcma,mmd,am,dm,am,a 
  adakd akjahfjka jkafh
</div> -->

<!-- bootstrap里面 多加了一个class .collapse -->
<div id="demo" class="collapse in">
  我就是面板。爱咋咋，爱的空间按回电话艾克好看后代卡号那块立方卡<br>
  ajka akd hakdhna ldkaljaa.ansc,cfav,cmam,va,vcma,mmd,am,dm,am,a 
  adakd akjahfjka jkafh
</div>
 
 
轮播图 Carousel carousel.js
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators轮播图上的小圆圈（导航点）-->
  <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="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides   图片区域 -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    <div class="item">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    ...
  </div>

  <!-- Controls  左右的箭头 -->
  <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 javascript插件部分的笔记整理的主要内容，如果未能解决你的问题，请参考以下文章

bootstrap js插件

基于jquery的提示框JavaScript 插件，类Bootstrap

带有 Bootstrap 折叠插件的 Javascript 切换

Bootstrap JavaScript插件

用于bootstrap 4网格系统的可视化javascript编辑器，作为jQuery插件编写。

bootstrap的javascript插件