如何在bootstrap popover中创建一个范围项?我想使其与谷歌应用启动按钮完全相同,如下图所示:
我玩CSS并试着尽可能接近它,但似乎我是以错误的方式做到的。 https://jsfiddle.net/ueskyj1u/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<style type="text/css">
@import "compass/css3";
.popover-content {
overflow-y: scroll;
height: 200px;
}
.popover-footer {
margin: 0;
padding: 8px 14px;
font-size: 14px;
font-weight: 400;
line-height: 18px;
background-color: #F7F7F7;
border-bottom: 1px solid #EBEBEB;
border-radius: 5px 5px 0 0;
}
.flex-container {
padding: 0;
margin: 0;
list-style: none;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
justify-content: space-around;
}
.flex-item {
background: tomato;
/* padding: 13px;*/
width: 74px;
;
height: 83px;
margin-top: 2px;
color: white;
font-weight: bold;
font-size: 3em;
text-align: center;
}
/*---------------------*/
#General {
background: #383a35;
}
#sale {
background: #ffde6b;
}
#Servicing {
background: #762963;
}
#Purchasing {
background: #22d65b;
}
#Billing {
background: #67a0e1;
}
#Accounts {
background: #a22ee3;
}
#GST {
background: #39c5ac;
}
#StockControl {
background: #ef5836;
}
#System {
background: #69cbf5;
}
</style>
<body>
<div>
<!-- <div class="flex-container">
<div id="General" class="flex-item"> 1
<div class="glyphicon glyphicon-envelope"> </div>
</div>
<div id="sale" class="flex-item">
<div class=" glyphicon glyphicon-ok"> </div> 2</div>
<div id="Servicing" class="flex-item">
<div class="glyphicon glyphicon-globe "> </div> 3</div>
<div id="Purchasing" class="flex-item">
<div class="glyphicon glyphicon-envelope"> </div> 4</div>
<div id="Billing" class="flex-item">
<div class=" glyphicon glyphicon-usd"> </div> 5</div>
<div id="Accounts" class="flex-item">
<div class=" glyphicon glyphicon-user"> </div> 6</div>
<div id="GST" class="flex-item">
<div class=" glyphicon glyphicon-stats"> </div> 7</div>
<div id="StockControl" class="flex-item">
<div class="glyphicon glyphicon-envelope"> </div> 8</div>
<div id="StockControl" class="flex-item">
<div class="glyphicon glyphicon-cog"> </div> 8</div>
</div>
-->
</div>
<a href="#" rel="details" class="btn btn-small pull-left" data-toggle="popover">click me to see popover</a>
<script type="text/javascript">
$("[rel=details]").popover({
trigger: 'click',
placement: 'bottom',
html: 'true',
content: '<div class="flex-container"><div id="General" class="flex-item"> 1<div class="glyphicon glyphicon-envelope"></div></div><div id="sale" class="flex-item"><div class=" glyphicon glyphicon-ok"> </div> 2</div><div id="Servicing" class="flex-item"><div class="glyphicon glyphicon-globe "> </div> 3</div><div id="Purchasing" class="flex-item"><div class="glyphicon glyphicon-envelope"></div>4</div><div id="Billing" class="flex-item"><div class=" glyphicon glyphicon-usd"> </div> 5</div><div id="Accounts" class="flex-item"><div class=" glyphicon glyphicon-user"> </div>6</div><div id="GST" class="flex-item"><div class=" glyphicon glyphicon-stats"> </div>7</div><div id="StockControl" class="flex-item"><div class="glyphicon glyphicon-envelope"></div> 8</div><div id="StockControl" class="flex-item"><div class="glyphicon glyphicon-cog"> </div> 8</div></div>',
template: '<div class="popover"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'
});
</script>
</body>
</html>
答案 0 :(得分:2)
在弹出式模板中进行更改
<div class="popover">
<div class="arrow"></div>
<h3 class="popover-title"></h3>
<div class="popover-content"></div>
<div class="footer">
<center>
<a href="" >more</a>
</center>
</div>
</div>
添加课程
.footer{
width: 101%;
margin-left: -0.5%;
background-color:rgba(128, 128, 128, 0.48);
margin-bottom:-1%;
border-bottom-right-radius: 16%;
border-bottom-left-radius: 16%;
}