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

前端技术 2023/09/01 JavaScript

上两篇只讲了组件如何使用，基本没有说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的基本用法就这样，掌握后就可以做出很好的网页了。

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

本文地址：https://www.stayed.cn/item/1652

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案