logo标签列表

如何在 Bootstrap 3 中填充 glyphicon 的百分比

htmlcsstwitter-bootstrapglyphicons
5

你好，我有一个5星评级系统，我想让它支持添加例如4.3颗星而不仅仅是4颗星。我该如何实现？以下是我的当前代码：

<center>
  <span class="glyphicon glyphicon-star" style="color:#BBD41C"></span>
  <span class="glyphicon glyphicon-star" style="color:#BBD41C"></span>
  <span class="glyphicon glyphicon-star" style="color:#BBD41C"></span>
  <span class="glyphicon glyphicon-star" style="color:#BBD41C"></span>
  <span class="glyphicon glyphicon-star"></span>
</center>
5个回答
6
您可以重叠2个绝对定位的div。每个div都包含全部的5颗星。然后，顶部的div中可以放置一个overflow:hidden的div，其中您可以将宽度设置为百分比（基于评级）。
这里是我准备的一个CodePen示例：http://codepen.io/anon/pen/ogBWwX 以下是代码片段供参考，包含了一些额外的内容，仅用于演示目的。
HTML: 

<div class="container">
  <div class="flt_left">
    <form id="star_form">
      <label for="star_input">Stars:</label>
      <input type="text" id="star_input" />
      <button id="setStars">Set Rating</button>
    </form>
  </div>
  <div class="flt_left">
    <div id="star_box">
      <div class="star_limiter">
        <div class="longbar">
          <span class="glyphicon glyphicon-star"></span>
          <span class="glyphicon glyphicon-star"></span>
          <span class="glyphicon glyphicon-star"></span>
          <span class="glyphicon glyphicon-star"></span>
          <span class="glyphicon glyphicon-star"></span>
        </div>
      </div>
    </div>
    <div class="star_bg">
      <span class="glyphicon glyphicon-star"></span>
      <span class="glyphicon glyphicon-star"></span>
      <span class="glyphicon glyphicon-star"></span>
      <span class="glyphicon glyphicon-star"></span>
      <span class="glyphicon glyphicon-star"></span>
    </div>
  </div>
  <div style="clear:both;"></div>
  <p id="rating_data"></p>
</div>

CSS：

.container{
  padding: 15px;
  margin: 10px;
}
p{
  margin: 10px 0;
}
.flt_left{
  float: left;
  margin-right: 10px;
  position: relative;
  /*min-width: 250px;*/
}
#star_box,
.star_bg{
  color: #BBD41C;
  position: absolute;
  margin: 4px 0;
  top: 0;
  left: 0;
  display: table;
}
.glyphicon{
  display: table-cell;
  padding: 0 0 0 2px;
  font-size: 18px;
}
#star_box{
  z-index: 2;
}
.star_bg{
  color: #555;
}
#star_box .star_limiter{
  width:100%;
  overflow: hidden;
  position: relative;
}

Javascript:

function setWidth(perc){
  $('#star_box .star_limiter').css('width',perc+'%');
}
function starToPercent(amt,outof){
  if(typeof outof == 'undefined') outof = 5;
  var percent = Math.round(amt*100/outof);
  if(percent > 100) percent = 100;
  $('#rating_data').text(amt+' of '+outof+' stars, or '+percent+'%');
  setWidth(percent);
}
function setRating(){
  var input = parseFloat($('#star_input').val());
  var num_stars = $('#star_box .star_limiter .glyphicon-star').length;


  if(!isNaN(input)) starToPercent(input, num_stars);
}

$(document).ready(function(){
  var star_width = $('#star_box').width();
  var star_height = $('#star_box').height();
  $('#star_box').css('width',star_width+'px');
  $('#star_box .star_limiter').css('height',star_height+'px');
  $('#star_box .longbar').css('width',star_width+'px');
  
  $('#setStars').click(setRating);
  $('#star_form').submit(function(e){
    e.preventDefault();
    setRating();
  });
});

注： 重叠的星星看起来不太好看，因为在边缘处会显示出背景星星的颜色。所以如果你去掉背景星星，只使用纯色就会更好看。并且颜色匹配得越好，越不容易被注意到。

我将字体图标的CSS设置为display: table-cell，可以防止它们换行并使它们更加紧凑地排列。星星之间的空间越大，浮动结果就越不准确。

我突然想到，如果在每个星星上使用overflow:hidden的div，你可以使其更加灵活和准确。因此，评分为3.4将给您5个div，其中3个设置为100％，1个设置为40％，1个设置为0％宽度。 - ironic_ollins
您，真是太棒了！谢谢 +1 - Piotr Kula
4
您无法在图标字体上使用多种颜色，因此您所要求的不可能实现。您可以使用部分背景填充，但这似乎不是很理想。
如果您切换到Font Awesome，您将至少可以访问half-star符号。
3
我发现这个方法可行，主要缺点是需要根据字体大小设置特定的类样式：
HTML:
 <i class="glyphicon glyphicon-star"></i>
 <i class="glyphicon glyphicon-star"></i>
 <i class="glyphicon glyphicon-star"></i>
 <i class="glyphicon glyphicon-star"></i>
 <i class="glyphicon glyphicon-star half-star"></i>

CSS：
.half-star {
        width:5px; // Roughly half the font size
        overflow:hidden;
 }
1

虽然这些答案都是正确的（关于多种颜色），而且可能过于详细（重叠的div，使用像素来移动元素），但我刚刚发现了一个很棒的hack，涉及到:after选择器。

基本上，如果你知道背景颜色将会是什么，你可以通过以下方式覆盖字符的一半（或任何你需要的百分比）：

HTML:

     <span class="glyphicon glyphicon-star"></span>
     <span class="glyphicon glyphicon-star"></span>
     <span class="glyphicon glyphicon-star"></span>
     <span class="glyphicon glyphicon-star"></span>
     <span class="glyphicon glyphicon-star half-star"></span>`

CSS：
   .half-star {
     letter-spacing: -0.5em;
       &:after {
       position: absolute;
       content: "";
       left: 0.5em;
       width: 0.5em;
       height: 1em;
       background-color: $body-bg;
     }
   }

首先，我将字母间距设置为默认字体的一半，以正确对齐以下文本、星号或其他元素。然后，我创建一个绝对定位块，它的宽度是星形图案的一半，位置在星形图案的中心（这是为了4.5颗星的评级）。您可以更改该小数来匹配所需的评级。

您无法更改图标的颜色，如果想要添加不同颜色或图标来覆盖第一个图标，则需要更多的技巧（从另一个方向思考）。但通过这种方式，可以仅使用HTML和CSS完成，而无需使用任何JavaScript。

1

Font-awesome有一个现成的星级系统解决方案: 看看“Star Ratings (inspired by CSS Tricks)” 在他们的网站上

没有一个字提到星号的百分比。 - Pavel Dubinin
页面底部有一个指向此源的链接：http://css-tricks.com/star-ratings/。 - Dudi
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接