html日记——使用强大的Bootstrap（3）

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

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

首先导入css和js

1.模态框

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

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

然后写模态框


    
    
        
            
            
                
                
                
                Modal title
            
            
            
                
                
                
                    
                        username
                        
                    
                    
                        password

如果是点击按钮然后向模态框的表格传入参数的话
在按钮的属性要加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.标签页

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

首先写标签栏

然后写不同标签的内容

可以用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篇讲的是按钮的基本样式，这次是进阶使用，可以让按钮在加载时显示不同的文字

然后要用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

这是面板组的堆叠

8.轮换页

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

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

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

9.侧边栏

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


    
        
            hello
            hello
            hello
            hello
            hello
            hello
            hello
            hello

再写style

还要加一些js

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

        }
    })

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

html日记——使用强大的Bootstrap（3）

1.模态框

2.滚动监听

@iwen

@ime

@one

@two

@three

3.标签页

4.工具提示

6.按钮

7.堆叠

item1

item1

item1

8.轮换页

U3D

U3D

Apple

9.侧边栏

你可能感兴趣的:(html日记——使用强大的Bootstrap（3）)