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

2024-09-29 14:42:38

上两篇只讲了组件如何使用，基本没有说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属性

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

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

JS组件Bootstrap Table使用方法详解

最近客户提出需求,想将原有的管理系统,做下优化,通过手机也能很好展现,想到2个方案: a方案:保留原有的页面,新设计一套适合手机的页面,当手机访问时,进入m.zhy.com(手机页面),pc设备访问时,进入www.zhy.com(pc页面) b方案:采用bootstrap框架,替换原有页面,自动适应手机.平板.PC 设备采用a方案,需要设计一套界面,并且要得重新写适合页面的接口,考虑到时间及成本问题,故项目采用了b方案一.效果展示二.BootStrap table简单介绍 bootStra
JS组件Form表单验证神器BootstrapValidator

本文为大家分享了JS组件Form表单验证神器BootstrapValidator,供大家参考,具体内容如下 1.初级用法来看bootstrapvalidator的描述:A jQuery form validator for Bootstrap 3.从描述中我们就可以知道它至少需要jQuery.bootstrap的支持.我们首先引入需要的js组件: <script src="~/Scripts/jquery-1.10.2.js"></script> <sc
JS组件福利大放送推荐12款好用的Bootstrap组件

前言:之前分享过很多bootstrap常用组件,包括表格.表单验证.文件上传.复选下拉框.弹出框等.这段时间,博主又收藏了一些好用的组件(有些在项目中已经用起来了),经过两天的时间,已经整理出了一部分,本着"好东西要与人分享"的原则,今天还是来点福利,将博主收藏的东西分享出来,供需要的园友参考.组件大部分都是些开源组件,也有部分是博主自己在网上找到然后改写出来的效果,可能不尽如人意,有兴趣的且看看吧. 一.时间组件 bootstrap风格的时间组件非常多,你可以在github上面随便搜
JS组件系列之Bootstrap Icon图标选择组件

前言:最近好多朋友在群里面聊到bootstrap icon图标的问题,比如最常见的菜单管理,每个菜单肯定需要一个对应的菜单图标,要是有一个可视化的图标选择组件就好了,最好是直接选择图标,就能得到对应的class样式.于是乎各种百度,皇天不负有心人,最后被博主找到了,感觉效果还不错,并且支持自定义的图标,今天就拿出来分享下,绝对的干货哦! 一.Bootstrap icon picker组件这个组件是在github上面搜索的时候找到的,初初看上去,确实是很不错的,并且是基于bootstrap风格的
JS组件Bootstrap Select2使用方法详解

在介绍select组件的时候,之前分享过一篇JS组件中bootstrap multiselect两大组件较量的文章,这两个组件的功能确实很强大,本文分享下select组件的一些用法和特性. 一些通用的单选.多选.分组等功能这里就不多做介绍了,multiselect这方面是强项.重点介绍下select2的一些特性效果: 一.特性效果 1.多选效果可以设置最多只能选几个 2.图文结合的效果 3.远程搜索功能(即在用户输入搜索内容时动态去后台取数据) 输入内容前输入空格搜索出全部滚动条滑动到底部
JS组件中bootstrap multiselect两大组件较量

两个这种组件,大体样式和功能基本相同,本文就来带领大家看看这两个组件的用法. 一.组件说明以及API 1.第一个组件--multiple-select.这个组件风格简单.文档全.功能强大.但是觉得它选中的效果不太好.关于它的效果展示,我们放在后面. 2.第二个组件--bootstrap-multiselect.这个组件风格和第一个非常相似,文档也挺全面. 二.Multiple-select组件 1.组件说明这个组件需要的浏览器支持如下: IE 7+ Chrome 8+ Firefox 10+
JS表格组件神器bootstrap table详解（基础版）

一.Bootstrap Table的引入关于Bootstrap Table的引入,一般来说还是两种方法: 1.直接下载源码,添加到项目里面来. 由于Bootstrap Table是Bootstrap的一个组件,所以它是依赖Bootstrap的,我们首先需要添加Bootstrap的引用. 2.使用我们神奇的Nuget 打开Nuget,搜索这两个包 Bootstrap已经是最新的3.3.5了,我们直接安装即可. 而Bootstrap Table的版本竟然是0.4,这也太坑爹了.所以博主建议Boot
JS组件Bootstrap Table表格多行拖拽效果实现代码

前言:前天刚写了篇JS组件Bootstrap Table表格行拖拽效果,今天接到新的需要,需要在之前表格行拖拽的基础上能够同时拖拽选中的多行.用了半天时间研究了下,效果是出来了,但是感觉不尽如人意.先把它分享出来,以后想到更好的办法再优化吧. 一.效果展示 1.拖动前 2.拖动中 3.拖动后 4.撤销回到拖动前状态二.需求分析通过上篇我们知道,如果要实现拖拽,必须要有一个可以拖拽的标签,或者叫容器,比如上篇里面的tr就是一个拖拽的容器,那么如果要实现选择行的拖拽,那么博主的第一反应是将选中的
JS组件Bootstrap实现弹出框和提示框效果代码

前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你的系统有一个友好的弹出提示框,自然能给用户很好的页面体验.前面几章介绍了bootstrap的几个常用组件,这章来看看bootstrap里面弹出框和提示框的处理.总的来说,弹出提示主要分为三种:弹出框.确定取消提示框.信息提示框.本篇就结合这三种类型分别来介绍下它们的使用. 一.Bootstrap弹出框
JS组件Bootstrap Table表格行拖拽效果实现代码

一.业务需求及实现效果项目涉及到订单模块,那天突然接到一个需求,说是两种不同状态的订单之间要实现插单的效果,页面上呈现方式是:左右两个Table,左边Table里面是状态为1的订单,右边Table里面是状态为2订单,左边Table里面的行数据拖动到右边Table里面指定行的位置,拖动完成后,左边表格减少一行,右边表格增加一行.除此之外,还需要撤销操作(相当于Ctrl + Z操作),能够返回到上一步的状态.可能描述会让大家模拟两可,反正已经实现了,先来看看效果图吧. 1.先看看拖动之前的效果 2

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

相关推荐

随机推荐