gpt4 book ai didi

javascript - 如何制作像谷歌应用程序启动按钮一样的 Bootstrap 弹出窗口?

转载 作者:行者123 更新时间:2023-11-30 16:24:24 25 4
gpt4 key购买 nike

如何在 bootstrap popover 中创建范围项?我想让它与谷歌应用程序启动按钮完全相同,如下图所示:

enter image description here

我尝试使用 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>

最佳答案

修改弹出模板

<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%;
}

https://jsfiddle.net/ueskyj1u/1/

关于javascript - 如何制作像谷歌应用程序启动按钮一样的 Bootstrap 弹出窗口?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34331283/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com