bootstrap-提示标签、提示框

提示标签:

<body>
<div class="container">
    <div class="row">
        <div class="col-lg-6">
            <p>
                <a href="#" class="tool" data-toggle="tooltip" data-placement="top" title="用来开发网站的">java</a>
                一种语言
            </p>
            <p>
                <a href="#" class="tool" data-toggle="tooltip" data-placement="bottom" title="用来开发网站的">java</a>
                一种语言
            </p>
        </div>
        <div class="col-lg-6">
            <p>
                <a href="#" class="tool" data-toggle="tooltip" data-placement="left" title="用来开发网站的">java</a>
                一种语言
            </p>
            <p>
                <a href="#" class="tool" data-toggle="tooltip" data-placement="right" title="用来开发网站的">java</a>
                一种语言
            </p>
        </div>
    </div>
</div>
<script type="text/javascript" src="jquery/jquery.min.js"></script>
<script type="text/javascript" src="bootstrap/bootstrap.min.js"></script>
<script type="text/javascript">
    //$(‘.tool‘).tooltip();
    $(‘.tool‘).tooltip(‘show‘);    

    $(‘.tool‘).on(‘hidden.bs.tooltip‘, function () {
          alert(‘隐藏了‘);
    })
</script>
</body>

效果:

提示框:

<body>
<div class="container">
    <div class="row">
        <!--这边用的hover触发的-->
        <button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here‘s some amazing content. It‘s very engaging. Right?" data-delay=‘{"show": 1000, "hide": 1000 }‘ data-trigger="hover">Click to toggle popover</button>
    </div>
</div>

<script type="text/javascript" src="jquery/jquery.min.js"></script>
<script type="text/javascript" src="bootstrap/bootstrap.min.js"></script>
<script type="text/javascript">
$(function(){
    $(‘.btn‘).popover(‘show‘);
})
</script>
</body>

效果:

时间: 2024-09-29 10:52:10

bootstrap-提示标签、提示框的相关文章

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

JS组件Bootstrap实现弹出框和提示框效果代码 作者:懒得安分 字体:[增加 减小] 类型:转载 时间:2015-12-08我要评论 这篇文章主要介绍了JS组件Bootstrap实现弹出框和提示框效果代码,对弹出框和提示框感兴趣的小伙伴们可以参考一下 前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编 辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你的系统有一个友好的弹出提示框,自然能给用户

Bootstrap:弹出框和提示框效果以及代码展示

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

四种常见的提示弹出框(success,warning,error,loading)原生JavaScript和jQuery分别实现

虽然说现在官方的自带插件已经有很多了,但是有时候往往不能满足我们的需求,下面我简单介绍一些 常见的四种提示弹出框(success,loading,error,warning),我分别用原生JavaScript和jQuery来介绍分享给各位博友! 一.首先介绍原生JavaScript来实现四种提示弹出框: 第一步:先看看html的建立 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:

Bootstrap组件之警告框

.alert--指明div元素为警告框组件: .alert-info..alert-danger..alert-warning..alert-success--给警告框设置情景效果: .alert-dismissible--提示该警告框组件为可关闭的: .close--设置按钮为可关闭: .alert-link--可以为链接设置与当前警告框相符的颜色: <!DOCTYPE html> <html lang="en"> <head> <meta

自己写的基于bootstrap风格的弹框插件

自己写的一款基于bootstrap风格的弹框插件,暂时只有确认框.提示框.后续功能扩展.bug修改再更新. ;(function($){ //默认参数 var PARAMS; var DEFAULTPARAMS = { width: 500, title: '提示消息', content: '', okbtn: '确定', cancelbtn: '取消', headerBackground: 'info', vbackdrop: 'static', //默认点击遮罩不会关闭modal vkeyb

[Bootstrap]modal弹出框

写在前面 在实际开发中,为了友好,更需要一种美观的弹出框,js原生的alert,很难满足需求.这里推荐一个bootstrap的弹出框. 一个例子 先看效果吧 代码: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>模式弹出框</title> <meta name="viewport" content=&

Eclipse for android 实现代码自动提示智能提示功能

Eclipse for android 实现代码自动提示智能提示功能,介绍 Eclipse for android 编辑器中实现两种主要文件 java 与 xml 代码自动提示功能,解决 eclipse 代码提示失效.eclipse 不能自动提示.eclipse 没有代码提示的问题. 1.设置 java 文件的代码提示功能 打开 Eclipse 依次选择Window > Preferences > Java > Editor - Content Assist > Auto acti

Bootstrap Modals(模态框)

http://www.runoob.com/bootstrap/bootstrap-v2-modal-plugin.html 描述 Bootstrap Modals(模态框)是使用定制的 Jquery 插件创建的.它可以用来创建模态窗口丰富用户体验,或者为用户添加实用功能.您可以在 Modals(模态框)中使用 Popover(弹出框)和 Tooltip(工具提示插件). 在本教程中,将通过一些实例和解释来讨论如何使用 Bootstrap 创建模态窗口.同时,我们也会讨论用于定制的各种可用选项.

bootstrap select2使用模态框,搜索框无法输入问题解决

使用模态框,一般都会自动带上一个属性,tabindex="-1",因为这个属性的存在,导致select2的搜索框无法输入,去掉这个属性即可解决 html中的tabIndex属性可以设置键盘中的TAB键在控件中的移动顺序,即焦点的顺序. 把控件的tabIndex属性设成1到32767的一个值,就可以把这个控件加入到TAB键的序列中. 原文地址:bootstrap select2使用模态框,搜索框无法输入问题解决标签:bootstrap   select2 智能推荐 In MySQL, a

myeclipes代码提示异常提示

The'org.eclipse.jdt.ui.JavaAllCompletionProposalComputer' Proposal computer from the ' org.eclipse.jdt.ui' plug-in did not complete normally. ' computeCompletionProposals()' operation. To avoid this message, disable the ' org.eclipse.jdt.ui' plug-in