功能强大的Bootstrap组件（结合js）

上两篇只讲了组件如何使用，基本没有说js，这篇博客要结合js来讲讲

主要讲解一下几个组件

1.模态框

2.滚动监听

3.标签页

4.工具提示

5.弹出框

6.按钮

7.堆叠

8.轮换页

9.侧边栏

首先导入css和js

1.模态框

我们通常在登录注册，或者阅读某些条例时都是用这个模态框，所以模态框是非常常见的

首先写一个打开模态框的按钮

  打开模态框

然后写模态框

  
  

    

      
      

        
        
          ×
        
        
        
Modal title
      
      
      

        
        
        

          

            username
            
          
          

            password
            
          
        
      
      
      

        
          Close
        
        
          保存
        
      
    
  

如果是点击按钮然后向模态框的表格传入参数的话

在按钮的属性要加data-标签：值

以上面data-whatever=”@ime”为例加了一个标签为whatever，值为@ime的参数

下面是js操作

//  绑定模态框展示的方法
  $("#myModal").on("show.bs.modal",function(e){
//    获得点击打开的按钮
    var button=$(e.relatedTarget)
//    根据标签获得按钮传入的参数
    var recipient=button.data("whatever")
//    获得模态框本身
    var modal=$(this)
//    更改将title的text
    modal.find(".modal-title").text("Hello"+recipient);
//    更改body里input的值
    modal.find(".modal-body input").val(recipient)
  })

2.滚动监听

滑动到不同内容，标签页选中会变化

首先写body属性

然后写标签页

然后写内容

@iwen
这是一个人 这是一个人
@ime
这是一个人 这是一个人
@one
这是一个人 这是一个人
@two
这是一个人 这是一个人
@three
这是一个人 这是一个人

建议把内容写得长一点，这样效果才会更加明显，这里演示不方便写太多无用的文字

还可以写一些js的方法

// 绑定标签切换时的方法
  $("#myScrollspy").on("activate.bs.scrollspy",function(e){
    alert("hello");
  })

3.标签页

点击不同的标签可以显示不同的内容

首先写标签栏

    
    
Home 
    
Profile 
    

      
        下拉菜单
        
      
      

        
        
one 
        
two 
      
    
  

然后写不同标签的内容

 

    

      
home
    

      
profile
    

      
one
    

      
two

可以用js初始化显示的标签页

有下面几种选择标签页的方式

$('#myTabs a[href="#profile"]').tab('show') // 根据名字选择
$('#myTabs a:first').tab('show') // 选择第一个标签页
$('#myTabs a:last').tab('show') // 选择最后一个标签页
$('#myTabs li:eq(2) a').tab('show') // 选择第三个标签页（因为0是第一个），如果是下拉菜单里的标签页，数字要加1

4.工具提示

    
    
    欢迎来到jack's page
  

然后要用js初始化，否则会没有任何效果

//初始化tooltip，指向则显示

$('[data-toggle="tooltip"]').tooltip();

5.弹出框

弹出框类似工具提示，但显示的内容比工具提示更加丰富，也比它常用

  
  
    弹出框
  

然后要用js初始化

// 初始化popover

$(".js-popover").popover();

6.按钮

前2篇讲的是按钮的基本样式，这次是进阶使用，可以让按钮在加载时显示不同的文字

 
  
    Loading Status
  

然后要用js绑定点击事件

//  绑定按钮的点击事件
  $(".js-loading-btn").on("click", function (e) {
//    点击后设为loading状态，显示loading的文字
    var btn = $(this).button("loading");
//    3s后恢复
    setTimeout(function (e) {
      btn.button("reset")
    }, 3000)
  })

7.堆叠

堆叠效果可以节省大量的屏幕控件，非常实用

这是点击按钮打开堆叠的

  点击查看
  

    

      Hello
    
  

这是面板组的堆叠

    

      

        
        

          
          item1
        
      
      
      

        

          Hello

          Hello

          Hello

        
      
    
    

      

        

          item1
        
      
      

        

          Hello

          Hello

          Hello

        
      
    
    

      

        

          item1
        
      
      

        

          Hello

          Hello

          Hello

        
      
    
  

8.轮换页

我们经常可以在网站的主页可以看到

    
    

      

      

      

    
    
    

      

        
        
        

          
U3D
          
新版本升级
        
      
      

        
        

          
U3D
          
新品上线
        
      
      

        
        

          
Apple
          
Apple手表
        
      
    
    
    
      
    
    
      
    
  

可以用js设置间隔和自动开始

  //设置间隔为2s且自动轮播
  $(".carousel").carousel({
    interval:2000
  })

9.侧边栏

侧边栏的主要内容是一个列表

  

    

      hello
      hello
      hello
      hello
      hello
      hello
      hello
      hello
    
  

再写style

还要加一些js

 $(".js-affixed-element-top").affix({
    offset:{

    }
  })

Boostrap的基本用法就这样，掌握后就可以做出很好的网页了。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持全福编程网。