模态框

放在body内的直接子元素

弹出方式

 1.通过 data 属性

　　data-toggle="modal" data-target="#myModal"

　　按钮的data-target要与模态框的id建立关联

2.通过 JS代码

通过JS代码实现模态框的显示与隐藏

- $("#myModal").modal("show")  --> 显示出来- $("#myModal").modal("hide)   --> 隐藏

 

模态框大小

在模态框的第一子类中添加  model-lg,model-md,model-sm,model-xs

 模态框结构

一个模态框包括

1. .modal-header 2. .modal-body 3. .modal-footer

 

样式

 

模态框动画

模态框动画：在模态框的父类中添加 fade

 若模态框类中没有fade则模态框不会有一个缓慢的弹出过程，只会立即跳出

 模态框参数

1.backdrop:遮罩层参数　　--->   true/false/static  

　　默认为true 显示灰色遮罩层，false为去掉遮罩层，static为点击空白不关闭模态框

 

2.keyboard: 按键Esc　　--->   true/false

　　默认为true 按esc退出，false为按esc不退出模态框

 

3.模态框中的参数可以是多个值

 

模态框事件

 

1.模态框显示之前，模态框显示之后

$(document).ready(function () {    $('#myModal').on('show.bs.modal', function (e) {    // do something...    alert("我让模态框显示出来，但是它还没来得及显示");    });    $('#myModal').on('shown.bs.modal', function (e) {                 // do something...                alert("我让模态框显示出来，现在它已经显示出来了");    })

2.模态框隐藏前，隐藏后

    
          
          
              
      
      
       导航
      
      
      
           。。。。
      
      点我
      
      
  
       
    
        
      
         
        
          ×        
          
这里是标题
      
         
      
         
        
          
  
           
 
            姓名 
            
 
              
            
 
           
  
           
 
            邮箱 
            
 
              
            
 
           
  
           
 
            爱好 
            
 
              
            
 
           
          
      
         
      
         
        
          取消        
          保存      
         
    
        
          
       
       
      
      

轮播图

$(document).ready(function () {    $('#myModal').on('show.bs.modal', function (e) {    // do something...    alert("我让模态框显示出来，但是它还没来得及显示");    });    $('#myModal').on('shown.bs.modal', function (e) {                 // do something...                alert("我让模态框显示出来，现在它已经显示出来了");    })

 轮播图结构

 

轮播时间间隔

    
          
          
              
      
      
  
         
       
    
        
    
        
    
        
  
       
  
         
       
    
        
      
            
               
         
        
          
这是第一张图
                 
                    
          
你好好看
                     
                
         
    
        
    
        
      
               
         
        
          
这是第二张图
          
          
你好好看
      
         
    
        
     
        
      
               
         
        
          
这是第三张图
          
          
你好好看
      
         
    
        
  
       
  
         
               Previous    
               Next  
      

左侧下拉菜单

 菜单结构

 

菜单点击与文本关系

 

    
          
          
              
      
      
  
       
    
        
      
         
                  Collapsible Group Item #1              
    
        
    
        
      
         
        
          
          
           
111
          
           
222
          
           
333
        
          
      
         
    
        
  
       
  
       
    
        
      
         
                  Collapsible Group Item #2              
    
        
    
        
      
         
                  Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.      
         
    
        
  
       
  
       
    
        
      
         
                  Collapsible Group Item #3              
    
        
    
        
      
         
                  Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.      
         
    
        
  
       
      

 

前端插件

 FontAwesome字体插件

字体样式多，图标多

官网      

下载后 使用fontawesome文件中的css文件与fonts文件，放到自己文件中

 代码导入结构

    
          
          
          
              
          
      Loading...
          fa-twitter on fa-square-o
    fa-flag on fa-circle

SweetAlert2 插件

各种登录框，弹出框

官网 · 

下载后，把sweetalert2文件拷入文件中

 

代码导入结构

 

    
          
          
              
          
      点我