首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onAugust 03, 2016

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

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

首先导入css和js

<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="js/jquery-3.1.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>

1.模态框

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

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

<!--data-target是我们的模态框的id，data-whatever="@ime"是我们传入模态框的标签和值-->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" data-whatever="@ime">
  打开模态框
</button>

然后写模态框

<div class="modal " id="myModal" role="dialog" aria-label="myModalLabel" aria-hidden="true">
  <!--这是小模态框，将modal-sm换成modal-lg是大模态框-->
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <!--模态框头部-->
      <div class="modal-header">
        <!--右上角的关闭按钮-->
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
        <!--标题-->
        <div class="modal-title">Modal title</div>
      </div>
      <!--模态框内容-->
      <div class="modal-body">
        <!--模态框内容可以是文字或表格-->
        <!--<p>hello</p>-->
        <form>
          <div class="form-group">
            <label class="control-label">username</label>
            <input class="form-control" type="text">
          </div>
          <div class="form-group">
            <label class="control-label">password</label>
            <input class="form-control" type="password">
          </div>
        </form>
      </div>
      <!--模态框脚部-->
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">
          Close
        </button>
        <button type="button" class="btn btn-primary">
          保存
        </button>
      </div>
    </div>
  </div>
</div>

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

<!--offset设为70，这个值是经过测试最佳的值-->
<body data-spy="scroll" data-target=".navbar" data-offset="70">

然后写标签页

<!--标签栏固定的显示内容的顶部-->
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
      <div class="container-fluid">
        <div class="collapse navbar-collapse js-navbar-scrollyspy" id="myScrollspy">
          <ul class="nav navbar-nav">
            <!--a标签中的连接是下面标题的id-->
            <li><a href="#iwen">iwen</a> </li>
            <li><a href="#ime">ime</a> </li>
            <!--在标签页中嵌套下拉菜单-->
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                下拉菜单
                <span class="caret"></span>
              </a>
              <ul class="dropdown-menu" role="menu">
                <li><a href="#one" tabindex="-1">one</a> </li>
                <li><a href="#two" tabindex="-1">two</a> </li>
                <li><a href="#three" tabindex="-1">three</a> </li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
    </nav>

然后写内容

<h2 id="iwen">@iwen</h2>
<p>这是一个人 这是一个人</p>
<h2 id="ime">@ime</h2>
<p>这是一个人 这是一个人</p>
<h2 id="one">@one</h2>
<p>这是一个人 这是一个人</p>
<h2 id="two">@two</h2>
<p>这是一个人 这是一个人</p>
<h2 id="three">@three</h2>
<p>这是一个人 这是一个人</p>

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

还可以写一些js的方法

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

3.标签页

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

首先写标签栏

<ul id="myTab" class="nav nav-tabs">
    <!--a标签链接对应下面tab-pane的id-->
    <li ><a href="#home" data-toggle="tab">Home</a> </li>
    <li><a href="#profile" data-toggle="tab">Profile</a> </li>
    <li class="dropdown">
      <a href="#" id="myTabdrop1" class="dropdown-toggle" data-toggle="dropdown">
        下拉菜单
        <span class="caret"></span>
      </a>
      <ul class="dropdown-menu" role="menu">
        <!--与普通下拉菜单不同，要加data-toggle="tab"-->
        <li><a href="#one" tabindex="-1" data-toggle="tab">one</a> </li>
        <li><a href="#two" tabindex="-1" data-toggle="tab">two</a> </li>
      </ul>
    </li>
  </ul>

然后写不同标签的内容

<div id="myTabContent" class="tab-content">
    <div class="tab-pane fade" id="home">
      <p>home</p>
    <div class="tab-pane fade" id="profile">
      <p>profile</p>
    <div class="tab-pane fade" id="one">
      <p>one</p>
    <div class="tab-pane fade" id="two">
      <p>two</p>

可以用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.工具提示

<p>
    <!--若title内容为空则显示data-original-title的内容，placement为显示的位置，可设为top|bottom|left|right-->
    <!--参数可以以data-****的方式设置-->
    欢迎来到<a data-animation="false" id="myTooltip" href="#" data-toggle="tooltip" title="title"
        data-placement="bottom" data-original-title="www.jk.com">jack's page</a>
  </p>

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

//初始化tooltip，指向则显示
$('[data-toggle="tooltip"]').tooltip();

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

<!--data-trigger="foucus"点击空白可消失，不加的话点击按钮消失，设为hover的话鼠标移动的按钮显示，移开消失-->
  <!--这个弹出框标题为title，内容为content-->
  <button  type="button" class="btn btn-default js-popover" data-trigger="foucus" data-placement="bottom" data-toggle="popover" title="title" data-content="content">
    弹出框
  </button>

然后要用js初始化

//    初始化popover
 $(".js-popover").popover();

6.按钮

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

<!--可以设置按钮在loading时的文字-->
  <button type="button" data-loading-text="Loding for 3s" class="btn btn-primary js-loading-btn">
    Loading Status
  </button>

然后要用js绑定点击事件

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

7.堆叠

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

这是点击按钮打开堆叠的

<!--href为显示内容的id-->
  <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample">点击查看</a>
  <div class="collapse" id="collapseExample">
    <div class="well">
      Hello
    </div>
  </div>

这是面板组的堆叠

<div class="panel-group" id="accordion" role="tablist">
    <div class="panel panel-default">
      <div class="panel-heading" role="tab" id="headingOne">
        <!--显示的标题-->
        <h4 class="panel-title">
          <!--data-parent要是panel-group的id-->
          <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">item1</a>
        </h4>
      </div>
      <!--加了in表示打开，不加表示隐藏-->
      <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel">
        <div class="panel-body">
          Hello<br>
          Hello<br>
          Hello<br>
        </div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading" role="tab" id="headingTwo">
        <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">item1</a>
        </h4>
      </div>
      <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel">
        <div class="panel-body">
          Hello<br>
          Hello<br>
          Hello<br>
        </div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading" role="tab" id="headingThree">
        <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">item1</a>
        </h4>
      </div>
      <div id="collapseThree" class="panel-collapse collapse" role="tabpanel">
        <div class="panel-body">
          Hello<br>
          Hello<br>
          Hello<br>
        </div>
      </div>
    </div>
  </div>

8.轮换页

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

<div id="carousel-example-generic" class="carousel slide">
    <!--这是下面那三个白色圆indicator-->
    <ol class="carousel-indicators">
      <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
      <li data-target="#carousel-example-generic" data-slide-to="1"></li>
      <li data-target="#carousel-example-generic" data-slide-to="2"></li>
    </ol>
    <!--轮换页的内容-->
    <div class="carousel-inner">
      <div class="item active">
        <img src="images/4.jpg">
        <!--添加文字-->
        <div class="carousel-caption">
          <h3>U3D</h3>
          <p>新版本升级</p>
        </div>
      </div>
      <div class="item ">
        <img src="images/2.jpg">
        <div class="carousel-caption">
          <h3>U3D</h3>
          <p>新品上线</p>
        </div>
      </div>
      <div class="item ">
        <img src="images/3.jpg">
        <div class="carousel-caption">
          <h3>Apple</h3>
          <p>Apple手表</p>
        </div>
      </div>
    </div>
    <!--轮换页左边和右边的箭头-->
    <a class="left carousel-control" href="#carousel-example-generic" data-slide="prew">
      <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right"></span>
    </a>
  </div>

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

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

9.侧边栏

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

<!--要设置宽度，在手机屏幕上隐藏-->
  <div class="col-md-3 col-sm-4 hidden-xs">
    <ul class="list-group affixed-element-top js-affixed-element-top">
      <a href="#" class="list-group-item">hello</a>
      <a href="#" class="list-group-item">hello</a>
      <a href="#" class="list-group-item">hello</a>
      <a href="#" class="list-group-item">hello</a>
      <a href="#" class="list-group-item">hello</a>
      <a href="#" class="list-group-item">hello</a>
      <a href="#" class="list-group-item">hello</a>
      <a href="#" class="list-group-item">hello</a>
    </ul>
  </div>

再写style

<style>
    .affixed-element-top.affix{
      /*如果想在底部的话可以改为bottom:10px;*/
      top:10px;
    }
    .affixed-element-top.affix-bottom{
      position: relative;
    }
  </style>

还要加一些js

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

    }
  })

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

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

- Author -

qq_32198277

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
js对象之JS入门之Array对象操作小结
Jan 09 Javascript
网页右键ie不支持event.preventDefault和event.returnValue （需要加window）
Feb 22 Javascript
javascript中取前n天日期的两种方法分享
Jan 26 Javascript
jQuery之DOM对象和jQuery对象的转换与区别分析
Jan 08 Javascript
AngularJS实现表单手动验证和表单自动验证
Dec 09 Javascript
实例讲解javascript注册事件处理函数
Jan 09 Javascript
JS调用打印机功能简单示例
Nov 28 Javascript
深入理解Angularjs向指令传递数据双向绑定机制
Dec 31 Javascript
基于JSONP原理解析(推荐)
Dec 04 Javascript
详解Vue项目中出现Loading chunk {n} failed问题的解决方法
Sep 14 Javascript
JavaScript实现网页跨年倒计时
Dec 02 Javascript
用JS写一个发布订阅模式
Nov 07 Javascript
AngularJS基础 ng-submit 指令简单示例
Aug 03 #Javascript
一个简单的JavaScript Map实例(分享)
Aug 03 #Javascript
AngularJS教程 ng-style 指令简单示例
Aug 03 #Javascript
js判断数组key是否存在(不用循环)的简单实例
Aug 03 #Javascript
JavaScript将DOM事件处理程序封装为event.js 出现的低级错误问题
Aug 03 #Javascript
AngularJS基础 ng-srcset 指令简单示例
Aug 03 #Javascript
js删除Array数组中指定元素的两种方法
Aug 03 #Javascript
GZIP(2) 幻读(5) DBLink(1) 间隙锁(2) MVCC(4) 事务并发(1) 复读(1) ctypes(1) 经纬度(1) innoDB(3)
You might like
php session 预定义数组
2009/03/16 PHP
PHP提取字符串中的图片地址[正则表达式]
2011/11/12 PHP
求帮忙修改个php curl模拟post请求内容后并下载文件的解决思路
2015/09/20 PHP
Yii2.0 Basic代码中路由链接被转义的处理方法
2016/09/21 PHP
微信自定义分享php代码分析
2016/11/24 PHP
javascript 密码强弱度检测万能插件
2009/02/25 Javascript
jquery $.ajax相关用法分享
2012/03/16 Javascript
JavaScript中的变量定义与储存介绍
2014/12/31 Javascript
js实现右下角提示框的方法
2015/02/03 Javascript
纯JavaScript实现的分页插件实例
2015/07/14 Javascript
jquery+CSS实现的水平布局多级网页菜单效果
2015/08/24 Javascript
js中flexible.js实现淘宝弹性布局方案
2020/06/23 Javascript
简单实现js页面切换功能
2021/01/10 Javascript
JS中使用 after 伪类清除浮动实例
2017/03/01 Javascript
JavaScript脚本语言是什么_动力节点Java学院整理
2017/06/26 Javascript
extjs简介_动力节点Java学院整理
2017/07/17 Javascript
JS实现基于Sketch.js模拟成群游动的蝌蚪运动动画效果【附demo源码下载】
2017/08/18 Javascript
vue解决弹出蒙层滑动穿透问题的方法
2018/09/22 Javascript
通过说明与示例了解js五种设计模式
2019/06/17 Javascript
ES6的异步操作之promise用法和async函数的具体使用
2019/12/06 Javascript
vue实现图片懒加载的方法分析
2020/02/05 Javascript
[02:44]2014DOTA2 国际邀请赛中国区预选赛 大神红毯秀
2014/05/25 DOTA
Python2和Python3的共存和切换使用
2019/04/12 Python
Python shelve模块实现解析
2019/08/28 Python
Python使用jpype模块调用jar包过程解析
2020/07/29 Python
Python获取excel内容及相关操作代码实例
2020/08/10 Python
详解python程序中的多任务
2020/09/16 Python
Camper鞋西班牙官方网上商店：西班牙马略卡岛的鞋类品牌
2019/03/14 全球购物
俄罗斯隐形眼镜和眼镜在线商店：Cronos
2020/06/02 全球购物
mysql的最长数据库名，表名，字段名可以是多长
2014/04/21 面试题
个人求职意向书
2015/05/11 职场文书
忠犬八公的故事观后感
2015/06/05 职场文书
企业管理制度设计时要注意的几种“常见病”!
2019/04/19 职场文书
Python Django 后台管理之后台模型属性详解
2021/04/25 Python
sql中mod()函数取余数的用法
2021/05/29 SQL Server
Python中三种花式打印的示例详解
2022/03/19 Python