Bootstrap教程笔记-JS插件3/3

字数 763阅读 182

学习bootstrap插件的时候,很多时候要看着版本2里面的介绍,不然多多少少的会懵逼一两次

Bootstrap-JS插件

bootstrap.js提供了各种各样的JS特效。如果只想要其中的某种特效,只要引种其中某一个单独的文件即可

一、模态框 modal.js

1.静态

结构为:(modal) > (modal-dialog) > (modal-content )> (modal-header + modal-body + modal-footer)

    <div class="modal show" tabindex="-1" >
      <div class="modal-dialog" >
        <div class="modal-content">
        <!-- content可忽略 -->
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">
               <span aria-hidden="true">×</span>
            </button>
            <h4>标题</h4>
          </div>
          <div class="modal-body">
            <p>中心内容</p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            <button type="button" class="btn btn-primary">按钮</button>
          </div>
        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
2.动态

在我们之前的静态基础上加上一个激活按钮即可,静态的ID要和按钮的data-target绑定

    <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
      激活按钮
    </button>
3.尺寸

我们modal元素的下一层元素 modal-dialog就起到了控制尺寸大小的作用,在此基础上,还有两个状态,更大和更小

    <div class="modal fade" tabindex="-1" >
      <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
          ...
        </div>
      </div>
    </div>
    <div class="modal fade" tabindex="-1" >
      <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
          ...
        </div>
      </div>
    </div>
4.禁止动画效果

只要在modal标签元素中,去掉 fade 类即可

5.通过JS调用

modal元素添加属性tabindex="-1"

参数 类型 默认值 功能
keyboard boolean true 键盘上的 esc 键被按下时关闭模态框。
show boolean false 模态框初始化之后就立即显示出来
    $('#myModal').modal(参数)

二、下拉菜单 dropdown.js

见css组件-下拉菜单部分

三、滚动监听 scrollspy.js

只需将data-spy="scroll"添加到被监听的页面元素上(大部分情况是添加到body上),再用data-target=".navbar"将导航绑定。

    <body data-spy="scroll" data-target=".navbar">...</body>
    <div class="navbar navbar-default">...</div>

必须为导航条中的链接指定相应的目标id。

   <body>
       ...
       <div id="home">home</div>
       ...
   </body>
    <div class="navbar navbar-default">
        <ul class="nav navbar-nav">
            <li><a href="#home">home</a></li>
            ...
        </ul>
    </div>

四、标签页(选项卡)tab.js

1.html结构

要在a标签中的href属性或者data-target中指定目标内容

    <ul class="nav nav-tabs">
        <li class="active"><a href="#home">主页</a></li>
        ...
        <li><a href="#" data-target="#news">新闻</a></li>
    </ul>

在目标内容中写入相应的ID名

    <div class="tab-content">
      <div class="tab-pane active" id="home">...</div>
       ...
      <div class="tab-pane" id="news">...</div>
    </div>
2.属性调用

在a标签中将data-toggle属性设置为:tab或者pill指定相应内容

    <ul class="nav nav-tabs">
      <li><a href="#home" data-toggle="tab">首页</a></li>
       ...
      <li><a href="#news" data-toggle="tab">新闻</a></li>
    </ul>
3.JavaScript调用

通过JavaScript启动标签页(每个标签都需要被单独激活),需要给导航添加一个ID值

    $('#myTab a').click(function (e) {
      e.preventDefault();
      $(this).tab('show');
    })

五、工具提示 tooltip.js

1.html结构

a标签或者按钮标签,为data-toggle属性添加属性值tooltip

  <a href="#" data-toggle="tooltip" title="水果之王">苹果</a>
2.激活
    $(function () {
      $('[data-toggle="tooltip"]').tooltip()
    })
3.方向

为data-placement属性添加left、right、top、bottom方向属性值

  <a href="#"  data-toggle="tooltip"  data-placement="right" title="水果之王">苹果</a>

六、弹出框 popover.js

1.基础代码

title属性添加标题,data-content属性添加文本内容,data-toggle绑定弹出框

    <button type="button" class="btn btn-lg btn-danger"
      title="我想吃水果" data-toggle="popover"
      data-content="可是冰箱里空空如也,明天中午就去买">
      点我弹出/隐藏弹出框
    </button>
2.激活
 $(function () {
      $('[data-toggle="popover"]').popover()
    })
3.方向

用法和工具提示一样:data-placement="left/right/top/bottom"

4.可消失的弹出框

为了更好的跨浏览器和跨平台效果,你必须使用 a 标签,不能使用 button 标签,并且,还必须包含 data-trigger="focus" 和 tabindex 属性。

    <a tabindex="0" class="btn btn-lg btn-danger" data-toggle="popover"
    data-trigger="focus" title="标题" data-content="这是一大堆的内容">
     可消失的弹出框
    </a>

七、折叠 collapse.js

data-toggle绑定collapse,如果是button则用data-target连接内容ID

    <button class="btn btn-success" data-toggle="collapse" data-target="#MyCont">按钮</button>
    <a class="btn btn-primary"  data-toggle="collapse" href="#Mycont" >按钮</a>

内容类名为.collapse,ID值要和按钮响应。.well标签包裹着弹出的内容

    <div class="collapse" id="collapseExample">
      <div class="well">
        ...
      </div>
    </div>

八、轮播图 carousel.js

使用data属性可以很容易的控制轮播的位置。data-slide内可以包含prev 或 next,他们可以改变当前帧。另外,使用data-slide-to可以传递某个帧的下标,例如data-slide-to="2",这样就可以直接跳转到这个指定的帧 -- 下标从0开始计算

    <div id="myCarousel" 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="active item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
      </div>
      <!-- 导航 -->
      <a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
      <a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
    </div>

推荐阅读更多精彩内容