bootstrap提示

青旅半醒 2022-10-02 10:42 147阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>bootstrap</title>
    	<style type="text/css">		
    
    		div.d1{ 
       			padding-top:70px;
    		}
    	</style>
    </head>
    <body>
    	<script src="jquery.min.js"></script>
    	<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap/3.3.6/bootstrap.min.css">
    	<script src="bootstrap/js/bootstrap/3.3.6/bootstrap.min.js"></script>
    	
    	<div class="d1" style="width:800px;margin:10px">
    		<button class="btn btn-default" title="提示信息">非bootstrap提示信息</button><br>
    		<button style="margin-left:100px" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="提示信息">鼠标悬停在左侧</button><br>
    		<button class="btn btn-default" data-toggle="tooltip" data-placement="right" title="提示信息">右侧提示</button>
    		<button class="btn btn-default" data-toggle="tooltip" data-placement="top" title="提示信息">上侧提示</button>
    		<button class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="提示信息">下侧提示</button>
    	</div>
    	<script type="text/javascript">
    		$(function(){ 
    			$("[data-toggle='tooltip']").tooltip();
    		});
    	</script>
    </body>
    </html>

![在这里插入图片描述][20190618100737931.png]

[20190618100737931.png]: /images/20220112/26c151da8e164f1ebe2bcd5911d2412a.png

发表评论取消回复

表情：

评论列表（有 0 条评论，147人围观）

还没有评论，来说两句吧...

相关阅读

相关 Bootstrap Tooltip 弹出图片提示信息

html中引入bootstrap的css和js，然后在需要提示的标签上，加上： data-toggle="tooltip" data-placement="bottom...

骑猪看日落/ 2024年04月17日 18:52/ 0 赞/ 68 阅读

相关 bootstrap 提示CORS 头缺少 'Access-Control-Allow-Origin'

今天打开导航发现变成这样 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6L

快来打我*/ 2023年07月08日 02:42/ 0 赞/ 11 阅读

相关 bootstrap提示

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti

青旅半醒/ 2022年10月02日 10:42/ 0 赞/ 148 阅读

相关 bootstrap标签、消息提示

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti

快来打我*/ 2022年10月02日 05:00/ 0 赞/ 177 阅读

相关 Bootstrap学习js插件篇之提示框

案例受到Jason Frame开发的jQuery.tipsy插件的启发，我们才把这个工具提示插件做的更好，而且此插件不依赖图片，只是使用CSS3来实现动画效果，并使用d

￡神魔★判官ぃ/ 2022年08月27日 03:58/ 0 赞/ 248 阅读

相关 bootstrap错误警告信息提示

bootstrap提供了成功执行、警告和错误信息的样式. 在使用该功能的时候需要引入以下几个文件: bootstrap.css jquery.js(需放在bootstra

短命女/ 2022年08月23日 14:42/ 0 赞/ 243 阅读

相关 Bootstrap的工具提示（Tooltip）

在html中引入bootstrap的css和js，然后在需要提示的标签上加上： data-toggle="tooltip" data-placement="botto

妖狐艹你老母/ 2022年07月16日 23:22/ 0 赞/ 191 阅读

相关 Bootstrap标签页和工具提示插件

标签页插件 > 标签页就是通常所说的选项卡功能 //也可以换成胶囊式 //<ul class="nav nav-pills"> <ul id="

雨点打透心脏的1/2处/ 2022年06月12日 06:21/ 0 赞/ 199 阅读

相关文本框鼠标悬停添加提示 bootstrap

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstr

本是古典何须时尚/ 2021年10月08日 05:44/ 0 赞/ 412 阅读

相关 Bootstrap智能消息提示框

Bootstrap智能消息提示框。 “我觉得操作成功后，需要一个弹出提示框”，客户说。 “需要吗？我觉得没必要，错误的时候提示，成功时自动跳转就行了！”，我弱弱的答。

柔光的暖阳◎/ 2021年09月10日 15:26/ 0 赞/ 520 阅读