Bootstrap基本插件学习笔记之Popover提示框(19)

Tooltip采用的是hover方式弹出提示框（参见前一篇：Bootstrap学习总结笔记（18）– 基本插件之Tooltip提示工具），适合提示内容比较少的情况，要是内容较多，就可以应用Popover提示框。

<!DOCTYPE html>
<html lang="zh-cn">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link href="../../css/bootstrap.min.css" rel="stylesheet">
 <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
 <script src="../../js/bootstrap.min.js"></script>
 <title>Popover提示弹出框</title>
</head>
<body>
<div class="container">
 <div class="page-header">
 <h1>Popover提示弹出框</h1>
 </div>
 <div>
 <button type="button" class="btn btn-default" data-toggle="popover"
 data-placement="left" title="popover left" data-content="测试">左边的按钮</button>
 <button type="button" class="btn btn-primary" data-toggle="popover"
 data-placement="right" title="popover right" data-content="测试">左边的按钮</button>
 <button type="button" class="btn btn-danger" data-toggle="popover"
 data-placement="top" title="popover top" data-content="测试">左边的按钮</button>
 <button type="button" class="btn btn-warning" data-toggle="popover"
 data-placement="bottom" title="popover bottom" data-content="测试">左边的按钮</button>
 </div>

</div>
<script>
 $(function () {
 $("[data-toggle='popover']").popover();
 })
</script>
</body>
</html>

效果如下：

如果大家还想深入学习，可以点击这里进行学习，再为大家附3个精彩的专题：

Bootstrap学习教程

Bootstrap实战教程

Bootstrap插件使用教程

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

赞 (0)

相关推荐

  • Bootstrap提示框效果的实例代码

    Bootstrap提示框效果的实例代码

    本文介绍了Bootstrap提示框,分享给大家,顺便也给自己留个笔记 前面的话 提示框是一个比较常见的功能,一般来说是鼠标移动到特定元素上时,显示相关的提示语.本文将详细介绍Bootstrap提示框 基本用法 Bootstrap框架中的提示框,结构非常简单,常常使用的是按钮<button>标签或者链接<a>标签来制作.不管是使用按钮还是链接来制作提示框,他们都需要满足下列条件: 1.通过 title 属性的值来定义提示信息(也可以使用自定义属性 data-original-titl

  • BootStrap的alert提示框的关闭后再显示怎么解决

    bootstrap中有alert组件,如果点击关闭按钮后该组件会被删除而不是被隐藏,想再显示怎么办呢? bootstrap-alert.js源码片段: function removeElement() { $parent .trigger('closed') .remove() } 理论上把.remove()改为.hide(),然后在需要重新显示的地方,加上$('#alert').show();就可以了. 但实际应用中,可以把 close button 的 data-dismiss 去掉,加上

  • JS组件Bootstrap实现弹出框和提示框效果代码

    JS组件Bootstrap实现弹出框和提示框效果代码

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

  • bootstrap提示标签、提示框实现代码

    bootstrap提示标签、提示框实现代码

    首先聊一聊提示标签: <body> <div class="container"> <div class="row"> <div class="col-lg-6"> <p> <a href="#" class="tool" data-toggle="tooltip" data-placement="top&quo

  • BootStrap tooltip提示框使用小结

    提示框 提示框的基本使用方式为: 复制代码 代码如下: <span data-toggle="tooltip" data-original-title="this is alert content">test message</span> data-original-title可以直接写为title,仍然能正常使用,源码中优先查找前者,前者不存在就会查找title 提示框不提供HTML触发方式只能通过JS来进行触发: $("[dat

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

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

    首先讲一讲提示框(Tooltip) 的使用方法 样式文件: LESS版本:对应源文件 tooltips.less <style id="jsbin-css"> body { padding: 100px; } .btn { margin: 20px 10px 20px; } </style> </head> <body> <h3>按钮做的提示框</h3> <button type="button&q

  • 基于BootStrap Metronic开发框架经验小结【六】对话框及提示框的处理和优化

    基于BootStrap Metronic开发框架经验小结【六】对话框及提示框的处理和优化

    在各种Web开发过程中,对话框和提示框的处理是很常见的一种界面处理技术,用得好,可以给用户很好的页面体验,Bootstrap开发也一样,我们往往在页面新增.编辑.查看详细等界面使用弹出对话框层的方式进行显示数据,删除则可能使用一个提示确认框,如果操作成功,我们可以使用更丰富的提示框来处理,本篇主要对比说明在Bootstrap开发中用到的这些技术要点. 1.Bootstrap对话框的使用 常规的Bootstrap有几种尺寸的对话框,包括默认状态的小对话框,中等宽度的对话框,和全尺寸的对话框几种,B

  • Bootstrap基本插件学习笔记之Popover提示框(19)

    Bootstrap基本插件学习笔记之Popover提示框(19)

    Tooltip采用的是hover方式弹出提示框(参见前一篇:Bootstrap学习总结笔记(18)– 基本插件之Tooltip提示工具),适合提示内容比较少的情况,要是内容较多,就可以应用Popover提示框. <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" cont

  • Bootstrap基本插件学习笔记之Tooltip提示工具(18)

    Bootstrap基本插件学习笔记之Tooltip提示工具(18)

    提示工具(Tooltip)插件根据需求生成内容和标记,默认情况下是把提示工具(Tooltip)放在它们的触发元素后面. <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1&

  • Bootstrap基本插件学习笔记之Alert警告框(20)

    Bootstrap基本插件学习笔记之Alert警告框(20)

    和前面的模态对话框类似. 0x01 例子 先看一个简单的例子: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href=&quo

  • Bootstrap基本插件学习笔记之模态对话框(16)

    Bootstrap基本插件学习笔记之模态对话框(16)

    Bootstrap自带了很多JQuery插件,给用户做前端开发提供了很大的方便.对于每一个插件,有2种引用方式:一是单独引用,即使用Bootstrap的单独*.js文件,这种方式需要注意的是一些插件和CSS组件可能依赖其他插件,所以单独引用的时候,需要弄清楚这种包含关系一并引用:二是直接引用完整的bootstrap.js或者压缩版的bootstrap.min.js,需要注意的是不能同时引用这2个文件. Bootstrap自带了很多基本的插件,包括模态对话框.标签切换.Tooltip提示工具等.首

  • Bootstrap基本插件学习笔记之按钮(21)

    Bootstrap基本插件学习笔记之按钮(21)

    前面已经介绍过Button的使用.通过button按钮,我们还能实现一些诸如按钮状态控制等形式的交互. 0x01 加载状态 添加data-loading-text="Loading-"属性: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" cont

  • Bootstrap基本插件学习笔记之折叠(22)

    Bootstrap基本插件学习笔记之折叠(22)

    折叠(Collapse)插件可以很容易地让页面区域折叠起来. 0x01 例子 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link hr

  • Bootstrap基本插件学习笔记之轮播幻灯片(23)

    Bootstrap基本插件学习笔记之轮播幻灯片(23)

    Bootstrap 轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式. 0x01 基本实例 Bootstrap实现轮播幻灯片的效果,只需要简单地使用class开发就可以了: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="

  • Bootstrap基本插件学习笔记之标签切换(17)

    Bootstrap基本插件学习笔记之标签切换(17)

    Bootstrap可以很轻松就实现标签切换的效果. 0x01 样式1 基本样式: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link

  • Bootstrap源码学习笔记之bootstrap进度条

    基本样式 要实现进度条效果要使用两个容器,外容器使用"progress"样式,子容器使用"progress-bar"样式.例如: <div class="progress"> <div class="progress-bar" style="width:40%"></div> </div> progress样式主要设置进度条容器的背景色,容器高度.间距等,pr

  • Flask框架学习笔记之消息提示与异常处理操作详解

    本文实例讲述了Flask框架学习笔记之消息提示与异常处理操作.分享给大家供大家参考,具体如下: flask通过flash方法来显示提示消息: from flask import Flask, flash, render_template, request, abort app = Flask(__name__) app.secret_key = '520' @app.route('/') def index(): flash("Hello loli") return render_te

随机推荐