Bootstrap实现提示框和弹出框效果

网络编程 2024/9/22 佚名

3 1 2

首先讲一讲提示框(Tooltip) 的使用方法

样式文件：

LESS版本：对应源文件 tooltips.less

<style id="jsbin-css">
 body {
 padding: 100px;
 }
 .btn {
 margin: 20px 10px 20px;
 }
 </style>
</head>
<body>
 <h3>按钮做的提示框</h3>
 <button type="button" 
   class="btn btn-default" 
   data-toggle="tooltip" 
   data-placement="left" 
   data-original-title="提示框居左" 
   title="">
 提示框居左  
 </button> 

 <button type="button" 
   class="btn btn-default" 
   data-toggle="tooltip" 
   data-placement="top" 
   data-original-title="提示框在顶部">
 提示框在顶部
 </button>

 <button type="button" 
   class="btn btn-default" 
   data-toggle="tooltip" 
   data-placement="bottom" 
   data-original-title="提示框在底部">
 提示框在底部    
 </button>

 <button type="button" 
   class="btn btn-default" 
   data-toggle="tooltip" 
   data-placement="right" 
   data-original-title="提示框居右">
 提示框居右  
 </button>

 <h3>链接制作的提示框</h3>
 <a class="btn btn-primary" 
  data-toggle="tooltip" 
  data-placement="left" 
  title="提示框居左">
  提示框居左
 </a>

 <a class="btn btn-primary" 
  data-toggle="tooltip" 
  data-placement="top" 
  title="提示框在顶部">
  提示框在顶部
 </a>

 <a class="btn btn-primary" 
  data-toggle="tooltip" 
  data-placement="bottom" 
  title="提示框在底部">
  提示框在底部
 </a>

 <a class="btn btn-primary" 
  data-toggle="tooltip" 
  data-placement="right" 
  title="提示框在居右">
  提示框居右
 </a>

 <a href="##" 
  class="btn btn-primary" 
  id="myTooltip">
  我是提示框
 </a>

 <a href="##" 
  class="btn btn-primary" 
  id="myTooltip2">
  我是提示框2
 </a>
 <script src="/UploadFiles/2021-04-02/jquery.js">

通过 title 属性的值来定义提示信息(也可以使用自定义属性 data-original-title 来设置提示信息)。 

通过 data-placement 自定义属性来控制提示信息框的位置，根据四种不同的位置，data-placement具有四个值：top、right、bottom和left，分别表示提示框出现的位置在顶部、右边、底部和左边。 

还有一个最重要的参数不可缺少，data-toggle=”tooltip”。
需要特别注意的是： 


1、如果同时设置了 data-original-title 和 title 定义提示信息，那么 data-original-title 的优先级要高于 title。只有 data-original-title 值为空时，才会取 title 的值做为提示信息的内容。
2、Bootstrap框架中的提示框的触发方式和前面介绍的插件略有不同。不能直接通过自定义的属性 data- 来触发。必须得依赖于JavaScript的代码触发。
提示框–其他的自定义属性 



提示框–JS设置参数方法 



使用过JQuery UI应该知道，它里面有一个dialog的弹出框组件，功能也很丰富。与jQuery UI的dialog类似，Bootstrap里面也内置了弹出框组件。打开bootstrap 文档可以看到它的dialog是直接嵌入到bootstrap.js和bootstrap.css里面的，也就是说，只要我们引入了bootstrap的文件，就可以直接使用它的dialog组件，是不是很方便。本篇我们就结合新增编辑的功能来介绍下bootstrap dialog的使用。废话不多说，直接看来它如何使用吧。
弹出框（Popover） 

不同的是：弹出框除了有标题 title 以外还增加了内容 content 部分。这个在提示框中是没有的。 

样式文件： 

"htmlcode">

<button type="button" class="btn btn-default" id="myPopover">猛击我吧</button>

<script src="/UploadFiles/2021-04-02/jquery.js">

弹出框–弹出框的结构 


弹出框Popover和提示框tooltip相比，就多了一个content内容，那么在此使用 data-content 来定义弹出框中的内容。同样可以使用或者标签来制作， 

调用popover的时候，options的参数与声明式选择里以data-开头的自定义属性一样。都可以在options里设置。


<button type="button" 
   data-toggle="popover" 
   class="btn btn-default" 
   id="myPopover">
   鼠标放上显示弹出框
 </button>

<script src="/UploadFiles/2021-04-02/jquery.js">


弹出框–提示框和弹出框的异同 


提示框 tooltip 的默认触发事件是 hover 和 focus，而弹出框 popover 是 click 

提示框 tooltip 只有一个内容(title)，而弹出框不仅可以设置标题（title）还可以设置内容(content)
提示框tooltip的模板：


<div class="tooltip" role="tooltip">
 <div class="tooltip-arrow"></div>
 <div class="tooltip-inner"></div>
</div>



弹出框popover的模板：


<div class="popover" role="tooltip">
  <div class="arrow"></div>
  <h3 class="popover-title"></h3>
  <div class="popover-content"></div>
</div>


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

                                
                                
                                    Bootstrap,弹出框,提示框 
                                风云阁资源网 Design By www.bgabc.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

风云阁资源网 Design By www.bgabc.com

评论“Bootstrap实现提示框和弹出框效果”

暂无评论...

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

更新日志

2024年09月22日

Bootstrap实现提示框和弹出框效果

WebView启动支付宝客户端支付失败的问题小结

分享bootstrap学习笔记心得(组件及其属性)

评论“Bootstrap实现提示框和弹出框效果”

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新日志

友情链接