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插件使用教程
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
相关推荐
-
BootStrap的alert提示框的关闭后再显示怎么解决
bootstrap中有alert组件,如果点击关闭按钮后该组件会被删除而不是被隐藏,想再显示怎么办呢? bootstrap-alert.js源码片段: function removeElement() { $parent .trigger('closed') .remove() } 理论上把.remove()改为.hide(),然后在需要重新显示的地方,加上$('#alert').show();就可以了. 但实际应用中,可以把 close button 的 data-dismiss 去掉,加上
-
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实现提示框和弹出框效果
首先讲一讲提示框(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提示框效果的实例代码
本文介绍了Bootstrap提示框,分享给大家,顺便也给自己留个笔记 前面的话 提示框是一个比较常见的功能,一般来说是鼠标移动到特定元素上时,显示相关的提示语.本文将详细介绍Bootstrap提示框 基本用法 Bootstrap框架中的提示框,结构非常简单,常常使用的是按钮<button>标签或者链接<a>标签来制作.不管是使用按钮还是链接来制作提示框,他们都需要满足下列条件: 1.通过 title 属性的值来定义提示信息(也可以使用自定义属性 data-original-titl
-
JS组件Bootstrap实现弹出框和提示框效果代码
前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你的系统有一个友好的弹出提示框,自然能给用户很好的页面体验.前面几章介绍了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 Metronic开发框架经验小结【六】对话框及提示框的处理和优化
在各种Web开发过程中,对话框和提示框的处理是很常见的一种界面处理技术,用得好,可以给用户很好的页面体验,Bootstrap开发也一样,我们往往在页面新增.编辑.查看详细等界面使用弹出对话框层的方式进行显示数据,删除则可能使用一个提示确认框,如果操作成功,我们可以使用更丰富的提示框来处理,本篇主要对比说明在Bootstrap开发中用到的这些技术要点. 1.Bootstrap对话框的使用 常规的Bootstrap有几种尺寸的对话框,包括默认状态的小对话框,中等宽度的对话框,和全尺寸的对话框几种,B
-
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)
提示工具(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)
和前面的模态对话框类似. 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自带了很多JQuery插件,给用户做前端开发提供了很大的方便.对于每一个插件,有2种引用方式:一是单独引用,即使用Bootstrap的单独*.js文件,这种方式需要注意的是一些插件和CSS组件可能依赖其他插件,所以单独引用的时候,需要弄清楚这种包含关系一并引用:二是直接引用完整的bootstrap.js或者压缩版的bootstrap.min.js,需要注意的是不能同时引用这2个文件. Bootstrap自带了很多基本的插件,包括模态对话框.标签切换.Tooltip提示工具等.首
-
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)
折叠(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 轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式. 0x01 基本实例 Bootstrap实现轮播幻灯片的效果,只需要简单地使用class开发就可以了: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="
-
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
随机推荐
- django实现同一个ip十分钟内只能注册一次的实例
- sql server 2012安装程序图集
- 用Windows Media Service打造的流媒体直播系统
- Mybatis常用分页插件实现快速分页处理技巧
- 浅谈.NET反射机制的性能优化 附实例下载
- Laravel 5.3 学习笔记之 安装
- php利用curl抓取新浪微博内容示例
- Python实现二叉堆
- php实现遍历文件夹的方法汇总
- js监听键盘事件示例代码
- shell脚本中取消重定向的方法实例
- ionic 3.0+ 项目搭建运行环境的教程
- PHP 存取 MySQL 数据库的一个例子
- 用VBS将一篇txt后缀的内容保存为html格式
- php操作memcache缓存方法分享
- 详解Java中的JDK、JRE、JVM
- Android view随触碰滑动效果
- PHP彩蛋信息介绍和阻止泄漏的方法(隐藏功能)
- Python socket实现简单聊天室
- iOS逆向教程之动态调试详解