<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap上下左右显示提示框代码</title>
<link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/demo.css">
<link href="css/bootstrap-popover-x.css" media="all" rel="stylesheet" type="text/css" />
</head>
<body>
<div style="max-width:1200px;margin:30px auto;padding:10px;border:1px solid #ddd;border-radius:5px;">
<div class="page-header">
<h2>Popover Placements</h2>
</div>
<div class="well text-center">
<!-- Button trigger popover-x -->
<button class="btn btn-primary btn-lg" data-toggle="popover-x" data-target="#myPopover1" data-placement="top">Top</button>
<button class="btn btn-primary btn-lg" data-toggle="popover-x" data-target="#myPopover2" data-placement="right">Right</button>
<button class="btn btn-primary btn-lg" data-toggle="popover-x" data-target="#myPopover3" data-placement="bottom">Bottom</button>
<button class="btn btn-primary btn-lg" data-toggle="popover-x" data-target="#myPopover4" data-placement="left">Left</button>
<hr>
<button class="btn btn-primary btn-lg" data-toggle="popover-x" data-target="#myPopover10a" data-placement="top top-left">Top Left</button>
<button class="btn btn-primary btn-lg" data-toggle="popover-x" data-target="#myPopover10b" data-placement="top top-right">Top Right</button>
<button class="btn btn-primary btn-lg" data-toggle="popover-x" data-target="#myPopover10c" data-placement="bottom bottom-left">Bottom Left</button>
<button class="btn btn-primary btn-lg" data-toggle="popover-x" data-target="#myPopover10d" data-placement="bottom bottom-right">Bottom Right</button>
<hr>
<button class="btn btn-primary btn-lg" data-toggle="popover-x" data-target="#myPopover20a" data-placement="left left-top">Left Top</button>
<button class="btn btn-primary btn-lg" data-toggle="popover-x" data-target="#myPopover20b" data-placement="left left-bottom">Left Bottom</button>
<button class="btn btn-primary btn-lg" data-toggle="popover-x" data-target="#myPopover20c" data-placement="right right-top">Right Top</button>
<button class="btn btn-primary btn-lg" data-toggle="popover-x" data-target="#myPopover20d" data-placement="right right-bottom">Right Bottom</button>
<!-- PopoverX content -->
<div id="myPopover1" class="popover popover-x popover-default">
<div class="arrow"></div>
<h3 class="popover-header popover-title"><span class="close pull-right" data-dismiss="popover-x">×</span>Title</h3>
<div class="popover-body popover-content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
<div class="popover-footer">
<button type="submit" class="btn btn-sm btn-primary">Submit</button><button type="reset" class="btn btn-sm btn-default">Reset</button>
</div>
</div>
<!-- PopoverX content -->
<div id="myPopover2" class="popover popover-x popover-default">
<div class="arrow"></div>
<h3 class="popover-header popover-title"><span class="close pull-right" data-dismiss="popover-x">×</span>Title</h3>
<div class="popover-body popover-content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
<div class="popover-footer">
<button type="submit" class="btn btn-sm btn-primary">Submit</button><button type="reset" class="btn btn-sm btn-default">Reset</button>
</div>
</div>
<!-- PopoverX content -->
<div id="myPopover3" class="popover popover-x popover-default">
<div class="arrow"></div>
<h3 class="popover-header popover-title"><span class="close pull-right" data-dismiss="popover-x">×</span>Title</h3>
<div class="popover-body popover-content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
<div class="popover-footer">
<button type="submit" class="btn btn-sm btn-primary">Submit</button><button type="reset" class="btn btn-sm btn-default">Reset</button>
</div>
</div>
<!-- PopoverX content -->
<div id="myPopover4" class="popover popover-x popover-default">
<div class="arrow"></div>
<h3 class="popover-header popover-title"><span class="close pull-right" data-dismiss="popover-x">×</span>Title</h3>
<div class="popover-body popover-content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
<div class="popover-footer">
<button type="submit" class="btn btn-sm btn-primary">Submit</button><button type="reset" class="btn btn-sm btn-default">Reset</button>
</div>
</div>
<!-- PopoverX content -->
<div id="myPopover10a" class="popover popover-x popover-default">
<div class="arrow"></div>
<h3 class="popover-header popover-title"><span class="close pull-right" data-dismiss="popover-x">×</span>Title</h3>
<div class="popover-body popover-content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
<div class="popover-footer">
<button type="submit" class="btn btn-sm btn-primary">Submit</button><button type="reset" class="btn btn-sm btn-default">Reset</button>
</div>
</div>
<!-- PopoverX content -->
<div id="myPopover10b" class="popover popover-x popover-default">
<div class="arrow"></div>
<h3 class="popover-header popover-title"><span class="close pull-right" data-dismiss="popover-x">×</span>Title</h3>
<div class="popover-body popover-content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
<div class="popover-footer">
<button type="submit" class="btn btn-sm btn-primary">Submit</button><button type="reset" class="btn btn-sm btn-default">Reset</button>
</div>
</div>
<!-- PopoverX content -->
<div id="myPopover10c" class="popover popover-x popover-default">
<div class="arrow"></div>
<h3 class="popover-header popover-title"><span class="close pull-right" data-dismiss="popover-x">×</span>Title</h3>
<div class="popover-body popover-content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
<div class="popover-footer">
<button type="submit" class="btn btn-sm btn-primary">Submit</button><button type="reset" class="btn btn-sm btn-default">Reset</button>
</div>
</div>
<!-- PopoverX content -->
<div id="myPopover10d" class="popover popover-x popover-default">
<div class="arrow"></div>
<h3 class="popover-header popover-title"><span class="close pull-right" data-dismiss="popover-x">×</span>Title</h3>
<div class="popover-body popover-content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Bootstrap制作上下左右显示提示框特效源码.zip
版权申诉
90 浏览量
2022-10-31
01:36:28
上传
评论
收藏 51KB ZIP 举报
毕业_设计
- 粉丝: 1932
- 资源: 1万+