bootscript/javascript组件

时间:2023-12-29 18:20:14

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>
转载自:http://www.cnblogs.com/zhaojing/p/6183486.html。