1. 全星，零星

<div class="ratings"><p class="pull-right">15 reviews</p><p><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-empty"></span></p>
</div>

2. 全星，半星，零星

<div class="ratings"><p class="star-rating" data-rating="4.33"><i class="fa fa-star" data-prev-rating-class="fa fa-star"></i><i class="fa fa-star" data-prev-rating-class="fa fa-star"></i><i class="fa fa-star" data-prev-rating-class="fa fa-star"></i><i class="fa fa-star-half-full" data-prev-rating-class="fa fa-star-half-full"></i><i class="fa fa-star-o" data-prev-rating-class="fa fa-star-o"></i></p>
</div>

3. 全星，半星，零星, 可点击

<div class="container" style="margin-top:30px"><h3 class="text-center">You can display half stars<br><small>while mouse-over working with whole stars as expected!</small></h3><p class="text-center"><a class="btn btn-danger btn-xs star-rating" data-rating="4.33"><i class="fa fa-star" data-prev-rating-class="fa fa-star"></i><i class="fa fa-star" data-prev-rating-class="fa fa-star"></i><i class="fa fa-star" data-prev-rating-class="fa fa-star"></i><i class="fa fa-star" data-prev-rating-class="fa fa-star"></i><i class="fa fa-star-half-full" data-prev-rating-class="fa fa-star-half-full"></i></a></p><h4 class="text-center">Mouse over to see the function</h4><p class="text-center"><a class="btn btn-primary btn-xs star-rating" data-rating="2.33"><i class="fa fa-star" data-prev-rating-class="fa fa-star"></i><i class="fa fa-star" data-prev-rating-class="fa fa-star"></i><i class="fa fa-star-half-full" data-prev-rating-class="fa fa-star-half-full"></i><i class="fa fa-star-o" data-prev-rating-class="fa fa-star-o"></i><i class="fa fa-star-o" data-prev-rating-class="fa fa-star-o"></i></a></p><p class="text-center">Notice the data-rating attribute as well as prev-rating-star attributes.</p><p class="text-center">This snippet allows you to show star rating with half-star precision preserving the expceted whole-star mouse effect!</p>
</div>

$(document).ready(function () {$('.star-rating i').hover(function () {$(this).prevAll().removeClass('fa-star-o fa-star-half-full').addClass('fa-star');$(this).removeClass('fa-star-o fa-star-half-full').addClass('fa-star');$(this).nextAll().addClass('fa-star-o').removeClass('fa-star fa-star-half-full');}, function () {//});$('.star-rating').hover(function () {//}, function () {$(this).children('i').each(function () {$(this).removeClass('fa-star-o fa-star-half-full')$(this).attr('class', $(this).attr('data-prev-rating-class'));});});
});

原文/转自：Bootstrap 3 加半星 Star rating with half-stars