幽灵资源网 Design By www.bzswh.com
上两篇只讲了组件如何使用，基本没有说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="/UploadFiles/2021-04-02/jquery-3.1.0.min.js">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是第一个），如果是下拉菜单里的标签页，数字要加14.工具提示
<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="/UploadFiles/2021-04-02/4.jpg">可以用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的基本用法就这样，掌握后就可以做出很好的网页了。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
幽灵资源网 Design By www.bzswh.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
幽灵资源网 Design By www.bzswh.com
暂无评论...
《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。