首页
所有分类
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 相关文章推荐
javascript 构造函数强制调用经验总结
Dec 02 Javascript
jQuery.validate 常用方法及需要注意的问题
Mar 20 Javascript
extjs 3.31 TreeGrid实现静态页面加载json到TreeGrid里面
Apr 02 Javascript
Javascript操作URL函数修改版
Nov 07 Javascript
浅析tr的隐藏和显示问题
Mar 05 Javascript
jQuery回调函数的定义及用法实例
Dec 23 Javascript
JS中多步骤多分步的StepJump组件实例详解
Apr 01 Javascript
BootStrap响应式导航条实例介绍
May 06 Javascript
用jquery获取select标签中选中的option值及文本的示例
Jan 25 jQuery
vue-resource post数据时碰到Django csrf问题的解决
Mar 13 Javascript
vue+vant使用图片预览功能ImagePreview的问题解决
Apr 10 Javascript
解决Echarts 显示隐藏后宽度高度变小的问题
Jul 19 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
暴雪(1) 小缇娜的奇幻之地(1) 绿林侠盗(1) LOL(1) 遗弃(1) 铁拳(1) 东方异文石(1) 吸血鬼(1) 我的世界(1) 战锤40K(1)
You might like
PHP加密解密实例分析
2015/12/25 PHP
Joomla简单判断用户是否登录的方法
2016/05/04 PHP
PHP十六进制颜色随机生成器功能示例
2017/07/24 PHP
php使用yield对性能提升的测试实例分析
2019/09/19 PHP
EasyUi tabs的高度与宽度根据IE窗口的变化自适应代码
2010/10/26 Javascript
jquery 提交值不为空的元素示例代码
2013/05/10 Javascript
页面定时刷新(1秒刷新一次)
2013/11/22 Javascript
jQuery中:lt选择器用法实例
2014/12/29 Javascript
javascript变量声明实例分析
2015/04/25 Javascript
jquery+html5时钟特效代码分享（可设置闹钟并且语音提醒）
2020/03/30 Javascript
jquery ezUI 双击行记录弹窗查看明细的实现方法
2016/06/01 Javascript
vue.js表格分页示例
2016/10/18 Javascript
基于Vue实现微信小程序的图文编辑器
2018/07/25 Javascript
JavaScript设计模式之原型模式分析【ES5与ES6】
2018/07/26 Javascript
Vue+Express实现登录注销功能的实例代码
2019/05/05 Javascript
JS中比较两个Object数组是否相等方法实例
2019/11/11 Javascript
详解js中的原型，原型对象，原型链
2020/07/16 Javascript
Vue实现购物车基本功能
2020/11/08 Javascript
[41:52]2018DOTA2亚洲邀请赛3月29日小组赛B组Effect VS Secret
2018/03/30 DOTA
python从ftp下载数据保存实例
2013/11/20 Python
python爬虫面试宝典(常见问题)
2018/03/02 Python
python 数字类型和字符串类型的相互转换实例
2018/07/17 Python
Python面向对象程序设计类的多态用法详解
2019/04/12 Python
python Plotly绘图工具的简单使用
2020/03/03 Python
Jupyter notebook如何修改平台字体
2020/05/13 Python
python安装mysql的依赖包mysql-python操作
2021/01/01 Python
凯特王妃父母建立的派对用品网站：Party Pieces
2017/05/28 全球购物
Myprotein台湾官方网站：全球领先的运动营养品牌
2018/12/10 全球购物
维也纳通行证：Vienna PASS
2019/07/18 全球购物
Dodax奥地利：音乐、电影、书籍、玩具、电子产品等
2019/08/31 全球购物
Yahoo-PHP面试题2
2014/12/06 面试题
幼儿园托班开学寄语
2014/01/18 职场文书
房地产端午节活动方案
2014/08/24 职场文书
机关领导干部作风整顿整改措施
2014/09/19 职场文书
2014年客户经理工作总结
2014/11/20 职场文书
Python几种酷炫的进度条的方式
2022/04/11 Python