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结构
H5-2.20bootstrap中js插件的应用_第1张图片
代码展示
大屏效果
H5-2.20bootstrap中js插件的应用_第2张图片
手机屏幕效果

二. 插件

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


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

   1) 传统的JS方式调用 

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

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

       

三. 插件-标签页

html代码
效果展示

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

1. 工具提示框(tooltip)

    data-toggle="tooltip"

2. 弹出框(popover)

    data-toggle="popover"

3. 警告框(alert)
H5-2.20bootstrap中js插件的应用_第4张图片
html代码展示
效果展示
4. 模态对话框(modal)

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

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

  2. 模态框必需的结构
H5-2.20bootstrap中js插件的应用_第5张图片
html代码展示
H5-2.20bootstrap中js插件的应用_第6张图片
效果展示
  3. 显示一个模态框

      1) 
      2) 

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

 1. 触发一个折叠效果

     1)

     2) 
代码展示
H5-2.20bootstrap中js插件的应用_第8张图片
效果展示
H5-2.20bootstrap中js插件的应用_第9张图片
效果展示

一首不错的歌。

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

你可能感兴趣的:(H5-2.20bootstrap中js插件的应用)