- 全星,零星
<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
相关推荐
最近使用了bootstrap提供的星级评价插件:bootstrap-star-rating,很好用的插件
前端项目-bootstrap-star-rating,一个简单但功能强大的jquery星级插件用于引导。
Ajax-bootstrap-star-rating-codeigniter.zip,带编码器点火器的动态自举星级评定,ajax代表异步javascript和xml。它是多种web技术的集合,包括html、css、json、xml和javascript。它用于创建动态网页,其中网页的小...
着重开发纯CSS-3样式来呈现控件。 该插件默认使用Bootstrap标记和样式,但是可以用任何其他CSS标记覆盖。 在Krajee JQuery插件上查看或。 注意:v4.0版是经过修改的重写,具有各种新增强功能和BC突破功能。 它允许...
angulr-bootstrap-admin-web-app-with-angularjs 2.0版本来拉。由于最近比较忙所有没有持续更新这个版本。在此特地发一下2.0.1版本的。如果有需要我之前版本的请查看我的资源,移驾之前的资源。绝对官网下载的完整包...
Bootstrap Yourself with Linux-USB Statck 英文版本,学习Linux USB驱动的好资料
Clever-Bootstrap-4-Admin-Template-with-AngularJS-Angular-2-support-master
bootstrapTable行内编辑插件bootstrap3-editable包含js和css。
赠送jar包:swagger-bootstrap-ui-1.9.6.jar; 赠送原API文档:swagger-bootstrap-ui-1.9.6-javadoc.jar; 赠送源代码:swagger-bootstrap-ui-1.9.6-sources.jar; 赠送Maven依赖信息文件:swagger-bootstrap-ui-...
Angulr – Bootstrap Admin Web App with AngularJS-v2.2.1 演示地址: http://themeforest.net/item/angulr-bootstrap-admin-web-app-with-angularjs/8437259
startbootstrap-sb-admin-gh-pages 免费模板 ,可以根据模板搭建自己的页面
Bootstrap-4-From-Scratch-With-5-Projects-源码.rar
可编辑bootstrap-table及相关组件:bootstrap3、bootstrap-table相关、bootstrap-table-editable.js、bootstrap-editable.js、bootstrap-editable.css; 配合起来,可以实现可编辑bootstrap-table列表。代码实现: ...
Angular-Clever-Bootstrap-4-Admin-Template-with-AngularJS-Angular-2-support.zip,clever是具有angular 2和angularjs支持的bootstrap 4管理模板clever bootstrap 4管理模板具有angularjs和angular2支持。...
* 本js只是在bootstrap3-dialog的基础上进行的2次封装, * bootstrap3-dialog已经是非常好用了,调用也非常简单。 * 详情请访问:https://github.com/nakupanda/bootstrap3-dialog, * 这是原项目地址,可以自行...
Bootstrap3最新管理平台模板,基于bootstrap3开发
fastadmin 表格添加固定表头 bootstrap-table-fixed-columns所需插件
bootstrap-table样式固定列js插件,在网上看到下载资源比较少,免费提供给大家下载使用,方便开发进度。
压缩包里面有: 1.bootstrap-table-editable.js 2.bootstrap-editable.js 3.bootstrap-editable.css 用于bootstrap table实现x-editable的行单元格编辑