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

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

1.模态框
2.滚动监听
3.标签页
4.工具提示
5.弹出框
6.按钮
7.堆叠
8.轮换页
9.侧边栏

首先导入css和js

1.模态框

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

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

  打开模态框

然后写模态框

  
  
    
      
      
 
 
   ×
 
 
 Modal title
      
      
      
 
 
 
      
      
      
 
   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

  
    .affixed-element-top.affix{
      
      top:10px;
    }
    .affixed-element-top.affix-bottom{
      position: relative;
    }
  

还要加一些js

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

    }
  })

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

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