-2
https://cloud.githubusercontent.com/assets/8532166/23761874/55406dc2-051a-11e7-92b8-18921f8aa365.png評級酒吧酥料餅？（像在亞馬遜）
我想創建一個類似於亞馬遜的評級酒吧酥料餅如上面URL。我試圖用bootstrap popover創建它，但由於某種原因，它不起作用。我需要一些幫助。
$(document).ready(function(){
$('[data-toggle="popover"]').popover({
html: true,
template: '<div class="popover"><div class="arrow"></div><div class="popover-content"><div style="width:220px"><div class="small-space text-center"><span>4.1 out of 5 stars</span></div><table class="small-space"id="histogramTable"><tr><td class="rating-number"><span><a title="55% of reviews have 5 stars">5 star</a> </span><span class="letter-space"></span><td class="histoBar"><a title="55% of reviews have 5 stars"><div class="histo-meter"aria-label="55%"><div class="histo-meter-filled"style="width:55%"></div></div></a><td class="rating-percent"><span class="letter-space"></span> <span class="a-size-small">55%</span><tr><td class="rating-number"><span><a title="21% of reviews have 4 stars">4 star</a> </span><span class="letter-space"></span><td class="histoBar"><a title="21% of reviews have 4 stars"><div class="histo-meter"aria-label="21%"><div class="histo-meter-filled"style="width:21%"></div></div></a><td class="rating-percent"><span class="letter-space"></span> <span class="a-size-small">21%</span><tr><td class="rating-number"><span><a title="10% of reviews have 3 stars">3 star</a> </span><span class="letter-space"></span><td class="histoBar"><a title="10% of reviews have 3 stars"><div class="histo-meter"aria-label="10%"><div class="histo-meter-filled"style="width:10%"></div></div></a><td class="rating-percent"><span class="letter-space"></span> <span class="a-size-small">10%</span><tr><td class="rating-number"><span><a title="8% of reviews have 2 stars">2 star</a> </span><span class="letter-space"></span><td class="histoBar"><a title="8% of reviews have 2 stars"><div class="histo-meter"aria-label="8%"><div class="histo-meter-filled"style="width:8%"></div></div></a><td class="rating-percent"><span class="letter-space"></span> <span class="a-size-small">8%</span><tr><td class="rating-number"><span><a title="6% of reviews have 1 stars">1 star</a> </span><span class="letter-space"></span><td class="histoBar"><a title="6% of reviews have 1 stars"><div class="histo-meter"aria-label="6%"><div class="histo-meter-filled"style="width:6%"></div></div></a><td class="rating-percent"><span class="letter-space"></span> <span class="a-size-small">6%</span></table></div></div></div>'
});
// Custom jQuery to hide popover on click of the close button
$(document).on("click", ".popover-footer .btn" , function(){
$(this).parents(".popover").popover('hide');
});
});.small-space{
margin-bottom: 10px;
}
.rating-number{
padding: 1px 3px;
}
.letter-space{
display: inline-block;
width: .385em;
}
.histoBar{
width: 60%;
}
.histo-meter{
border-radius: 1px;
box-shadow: inset 0 1px 2px rgba(0,0,0,.4), inset 0 0 0 1px rgba(0,0,0,.1);
overflow: hidden;
background: #f2f2f2;
background: -webkit-linear-gradient(top,#eee,#f6f6f6);
background: linear-gradient(to bottom,#eee,#f6f6f6);
background-color: #f3f3f3;
height: 17px
}
.histo-meter-filled{
box-shadow: inset 0 0 0 1px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.05);
border-radius: 1px;
background: #ffba00;
background: -webkit-linear-gradient(top,#ffce00,#ffa700);
background: linear-gradient(to bottom,#ffce00,#ffa700);
background-color: #ffce00;
transition: width .5s ease;
float: left;
font-size: 0;
height: 100%;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="bs-example">
<button type="button" class="btn btn-primary btn-lg" data-toggle="popover">Customized Popover</button>
</div>
你嘗試過到現在什麼碼？ –