我正在使用 twitter bootstrap 来构建我的网站 UI。
我想创建一个星级评分页面。
我希望它是从右到左（意味着一颗星选择在右边）
我认为我最好的选择是使用 Jquery-UI 插件，因为 bootstrap 没有这样的工具？
如何制定评分方向：rtl？
另外，如何将星星调整为黄色而不是红色
（悬停时和选择后）？
【问题讨论】：
标签： jquery asp.net-mvc user-interface twitter-bootstrap
我也使用引导程序。今天早上，我开始查看星级评分，发现了FontAwesome 网站。在这里，您将找到引导程序中星级评级的工作示例。
CSS-tricks 站点提供了所需的 CSS，并很好地解释了它在做什么。
对于下面缺少链接，我深表歉意。由于我是 stackoverflow 上的“新海报”，我只能包含两个超链接。因此，您需要将要点粘贴到 dabble.com 的 URL 中才能看到它们。（请有人投票支持我的声誉，以便我可以发布更多链接 :)
您可以在 dabblet.com 网站上找到工作示例，在将其引入您的 cown 代码库之前对其进行一些操作。 css-tricks dabblet 位于https://gist.github.com/1709019 .
您可能还想查看其他几个 dabblets：
@chriscoyier 在 https://gist.github.com/1718992 .在此实现中，您可以通过更改 float:right; 从 LTR 更改为 RTL；浮动：向左；
@mprogano 在https://gist.github.com/1712123 上有一个更简洁的版本。您可以使用方向从 LTR 更改为 RTL：rtl;
一些涉猎示例允许您更改星形颜色，其他示例使用图像，因此您必须创建自己的图像来更改颜色。
希望这会有所帮助。
【讨论】：
得到了一些启发，并尝试了一些类似“更少代码”的东西。还添加了一个js函数来提醒选择的星星数量（当然可以很容易地改变它来做一些更花哨的事情）。
http://jsfiddle.net/RpfLa/135/
<div class="star-rating"><s><s><s><s><s></s></s></s></s></s></div>
<div class="star-rating-rtl"><s><s><s><s><s></s></s></s></s></s></div>
玩得开心！
编辑：另请参阅http://jsfiddle.net/RpfLa/400/ 了解预设评级。
<s class="rated"></s>
【讨论】：
$(this).replaceWith(numStars + (numStars == 1 ? " star" : " stars!"));
这是一个简单的纯 CSS 解决方案，用于为 twitter bootstrap 的字体图标评分。要与任何其他字体图标（如 fontawesome 等）一起使用，只需更改 HTML 中的类名
HTML：
<div class="rating"
<span id="5" class="glyphicon glyphicon-star"></span>
<span id="4" class="glyphicon glyphicon-star"></span>
<span id="3" class="glyphicon glyphicon-star"></span>
<span id="2" class="glyphicon glyphicon-star"></span>
<span id="1" class="glyphicon glyphicon-star"></span>
</div>
CSS：
.rating span {
font-size: 25px;
cursor: pointer;
float: right; //remove 'float right' for right to left
}
.rating span:hover, .rating span:hover ~ span{
color: red; //gold or any other color
}
Jquery 获取点击评分
$('.rating span').click(function(){
alert($(this).attr('id'));
})
这里是working code
【讨论】：
前段时间我遇到了同样的问题，最后创建了一个小插件。我最近为 Bootstrap 3 更新了它：
https://github.com/javiertoledo/bootstrap-rating-input
欢迎您发送反馈或拉取请求 :-)
最好的问候！
【讨论】：
考虑到各种插件面临的问题 - 这是我使用各种可配置选项创建的Bootstrap JQuery Star rating plugin（其中包含场景演示）。其中一些灵感来自各种想法（例如 Victor）和其他用户需求。我认为您可以针对您提到的场景尝试此操作并告知。
尽可能使用 Bootstrap 3.x 字形图标和纯 CSS，包括 RTL 支持，支持插件事件和方法。可以参考source here。
编辑：该插件现在支持分数星级评分，并且还提供了一些其他增强功能。
【讨论】：