功能强大的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的基本用法就这样,掌握后就可以做出很好的网页了。

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

Javascript 相关文章推荐
Jquery中的CheckBox、RadioButton、DropDownList的取值赋值实现代码
Oct 12 Javascript
jQuery 在光标定位的地方插入文字的插件
May 10 Javascript
教你在heroku云平台上部署Node.js应用
Jul 30 Javascript
AngularJS Module方法详解
Dec 08 Javascript
jQuery实现select模糊查询(反射机制)
Jan 14 Javascript
React-Native中props具体使用详解
Sep 04 Javascript
JavaScript设计模式之代理模式简单实例教程
Jul 03 Javascript
layui select获取自定义属性方法
Aug 15 Javascript
node app 打包工具pkg的具体使用
Jan 17 Javascript
layui table 获取分页 limit的方法
Sep 20 Javascript
element实现合并单元格通用方法
Nov 13 Javascript
vue项目配置sass及引入外部scss文件
Apr 14 Vue.js
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
You might like
php更新mysql后获取改变行数的方法
2014/12/25 PHP
PHP MYSQL实现登陆和模糊查询两大功能
2016/02/05 PHP
PHP访问数据库集群的方法小结
2016/03/14 PHP
CI框架(CodeIgniter)实现的导入、导出数据操作示例
2018/05/24 PHP
Laravel框架表单验证操作实例分析
2019/09/30 PHP
jQuery中文入门指南,翻译加实例,jQuery的起点教程
2007/02/09 Javascript
IE autocomplete internet explorer's autocomplete
2007/06/30 Javascript
JavaScript库 开发规则
2009/01/31 Javascript
js+css使DIV始终居于屏幕中间 左下 左上 右上 右下的代码集合
2011/03/10 Javascript
jQuery 1.7.2中getAll方法的疑惑分析
2012/05/23 Javascript
JavaScript版TAB选项卡效果实例
2013/08/16 Javascript
jquery实现图片滚动效果的简单实例
2013/11/23 Javascript
Jqgrid设置全选(选择)及获取选择行的值示例代码
2013/12/28 Javascript
图片翻转效果具体实现代码
2014/01/09 Javascript
基于jQuery仿淘宝产品图片放大镜代码分享
2020/06/23 Javascript
jQuery 3.0中存在问题及解决办法
2016/07/15 Javascript
vue中如何引入jQuery和Bootstrap
2017/04/10 jQuery
React-Native中禁用Navigator手势返回的示例代码
2017/09/09 Javascript
AngularJS使用ng-repeat遍历二维数组元素的方法详解
2017/11/11 Javascript
JavaScript定义及输出螺旋矩阵的方法详解
2017/12/01 Javascript
详解如何模拟实现node中的Events模块(通俗易懂版)
2019/04/15 Javascript
浅谈微信小程序列表埋点曝光指南
2019/10/15 Javascript
[00:14]PWL:老朋友Mushi拍VLOG与中国玩家问好
2020/11/04 DOTA
python调用shell的方法
2013/11/20 Python
Python2中的raw_input() 与 input()
2015/06/12 Python
在Python中pandas.DataFrame重置索引名称的实例
2018/11/06 Python
Python 定义只读属性的实现方式
2020/03/05 Python
Python求凸包及多边形面积教程
2020/04/12 Python
北美女性服装零售连锁店:maurices
2019/06/12 全球购物
纪念建党演讲稿范文
2014/01/13 职场文书
大学理论知识学习自我鉴定
2014/04/28 职场文书
工会换届选举方案
2014/05/21 职场文书
合作协议书模板
2014/10/10 职场文书
2014年环卫工作总结
2014/11/22 职场文书
Mac环境Nginx配置和访问本地静态资源的实现
2021/03/31 Servers
JVM入门之类加载与字节码技术(类加载与类的加载器)
2021/06/15 Java/Android