bootstrap-组件-响应式导航条以及几种插件

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

1. 特征

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

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

  0) 基础class-navbar

  1) 按位置区分

      顶部导航条和底部导航条

  2)按颜色区分

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

  3)按定位方式分

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

 3. html结构

      

导航及手风琴折叠效果示例




    
    响应式导航
    
    

    

    

    
    
    
    


    
    
    

响应式导航















































手风琴折叠效果

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam quasi voluptas tempora maxime eveniet tenetur sint laudantium fugit odio laborum facilis mollitia dicta ipsum reiciendis numquam est harum neque id!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi cumque officiis placeat est pariatur mollitia aliquid provident culpa nihil commodi quas doloremque doloribus? Eveniet in quidem libero impedit mollitia blanditiis!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis commodi voluptate asperiores minus dicta corporis animi placeat accusamus dolorem sint non tempore provident tenetur suscipit repellat eveniet voluptatibus omnis quibusdam.

二. 插件

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


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

   1) 传统的JS方式调用 

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

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

       

三. 插件-标签页

 

  
十元套餐详情
二十元套餐详情
三十元套餐详情

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

1. 工具提示框(tooltip)

    data-toggle="tooltip"

2. 弹出框(popover)

    data-toggle="popover"

3. 警告框(alert)
    
    
× xxxx
4. 模态对话框(modal)

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

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

  2. 模态框必需的结构

      


  3. 显示一个模态框

      1) 
      2) 

几种js插件示例




    
    js插件
    
    

    

    

    
    


    
    
    
    
杨可儿大傻逼
圈圈大傻逼
屁屁大傻逼



提示框

× Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente minima voluptatem quasi at magni totam eveniet reiciendis laudantium doloribus aspernatur nisi corporis blanditiis sunt est cupiditate amet debitis libero itaque?
× Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente minima voluptatem quasi at magni totam eveniet reiciendis laudantium doloribus aspernatur nisi corporis blanditiis sunt est cupiditate amet debitis libero itaque?
× Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente minima voluptatem quasi at magni totam eveniet reiciendis laudantium doloribus aspernatur nisi corporis blanditiis sunt est cupiditate amet debitis libero itaque?

模态框

modal显示

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

 1. 触发一个折叠效果

     1)

     2) 

你可能感兴趣的:(bootstrap-组件-响应式导航条以及几种插件)