H5-2.20bootstrap中js插件的应用

一. bootstrap-组件-响应式导航条

 1. 特征

      1）在PC和平板中默认要显示所有的内容
      2）在手机中导航条默认只显示logo，以及一个“菜单折叠展开按钮”，只有点击按钮后才显示所有的菜单项

 2. bootstrap中导航条的基本结构

  0) 基础class-navbar

  1) 按位置区分

      顶部导航条和底部导航条

  2）按颜色区分

     浅色底深色的字 - navbar-default
     深色底浅色的字 - navbar-inverse

  3）按定位方式分

     静态定位 - 默认值
     固态定位 - nav-fixed-top/bottom

 3. html结构

代码展示 大屏效果 手机屏幕效果

二. 插件

1. bootstrap基于JQ提供了十几个插件函数(类似于JQueryUI插件)，每个插件对应一个js文件，可以单独使用，也可以整体引用(bootstrap.js);


2. 调用上诉十几个插件可以用两种格式

   1) 传统的JS方式调用 

       $().dropdown()  $().tab();

   2) 使用data-*扩展属性方式调用

       <a data-toggle="dropdown">

三. 插件-标签页

html代码 效果展示

四. 插件-bootstrap提供的弹出框

1. 工具提示框(tooltip)

    data-toggle="tooltip"

2. 弹出框(popover)

    data-toggle="popover"

3. 警告框(alert)

html代码展示 效果展示

4. 模态对话框(modal)

五. 插件-bootstrap提供的弹出框 - 模态对话框(modal)

  1. 模态框定义：在父窗体中弹出一个子窗体，子窗体若不关闭，父窗体就无法获得焦点，同时父子窗体之间还可以传递数据，window.alert()/confirm()/prompt()就是典型的例子

  2. 模态框必需的结构

html代码展示 效果展示

  3. 显示一个模态框

      1） <a href="#模态框id" data-toggle="modal">
      2) <button data-toggle="modal" data-target="#模态框id">

  4. 关闭一个模态框

     <span data-dismiss="modal">&times</span>

六. 插件-折叠效果(collapse)

 1. 触发一个折叠效果

     1）<a href="#折叠元素id" data-toggle="collapse">

     2) <button data-toggle="collapse" data-target="#折叠元素id">

 2. 折叠元素

    <div id="折叠元素id" class="collapse in">

    </div> 


 3. 折叠组件的两个扩展用途

    1) 响应式导航条在手机屏幕中的效果
    2) according(手风琴)


 4. 手风琴html结构-依托于面板和折叠组件

代码展示 效果展示 效果展示

一首不错的歌。

http://music.163.com/#/song?id=26243686