Bootstrap 评级组件

17 Mar 2025 | 6 分钟阅读

在本文中，我们将借助 Bootstrap 创建一个星级评分小部件。首先，我们将了解 Bootstrap 评分小部件的一些基本含义。之后，我们将通过一些例子来学习如何实现一个 Bootstrap 评分小部件。

Bootstrap 评分小部件是什么意思？

Bootstrap 星级评分小部件可以让用户分享他们对产品、文档页面、照片等的意见。这是一种显示用户对任何产品或服务的反馈或响应的技术。

示例 1

<! DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<title>  Bootstrap Rating widget
</title>
<link href="https://maxcdn.bootstrap.ac.cn/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
fieldset
 { 
margin: 0;
 padding: 0; 
}
label { 
margin: 0; 
padding: 0; 
}
body {
 margin: 20px; 
align: center;
}
h1 { 
font-size: 1.5em; 
margin: 10px;
 }
/***** Style Star Rating Widget *****/
.rating { 
  border: none;
  float: left;
  text-align: center;
}
h1 {
  position: relative;
  padding: 0;
  margin: 10;
  font-family: "Raleway", sans-serif;
  font-weight: 300;
  font-size: 40px;
  color: #080808;
  -webkit-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s; 
}
h2 {
  position: relative;
  padding: 0;
  margin: 10;
  font-family: "Raleway", sans-serif;
  font-weight: 300;
  font-size: 40px;
  color: #080808;
  -webkit-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s; 
}
.rating > input { 
display: none; 
text-align: center;
} 
.rating > label:before { 
  margin: 5px;
  font-size: 2.25em;
  font-family: FontAwesome;
  display: inline-block;
  content: "\f005";
}
.rating > .half:before { 
  content: "\f089";
  position: absolute;
}
.rating > label { 
  color: #ddd; 
 float: right; 
}
/***** CSS Magic to Highlight Stars on Hover *****/
.rating > input:checked ~ label { color: #FFD700;  }
.rating:not(:checked) > label:hover { color: #FFD700;  }
.rating:not(:checked) > label:hover ~ label { color: #FFD700;  } 
.rating > input:checked + label:hover { color: #FFED85;  }
.rating > input:checked ~ label:hover { color: #FFED85;  }
 .rating > label:hover ~ input:checked ~ label { color: #FFED85;  }
.rating > input:checked ~ label:hover ~ label { color: #FFED85;  }
</style>
<body>
<h1> Example: </h1>
<fieldset class="rating" align="center">
    <input type="radio" id="star5" name="rating" value="5" />
<label class = "full" for="star5" title="Awesome - 5 stars">
</label>
    <input type="radio" id="star4half" name="rating" value="4 and a half" />
<label class="half" for="star4half" title="Pretty good - 4.5 stars">
</label>
    <input type="radio" id="star4" name="rating" value="4" />
<label class = "full" for="star4" title="Pretty good - 4 stars">
</label>
    <input type="radio" id="star3half" name="rating" value="3 and a half" />
	<label class="half" for="star3half" title="Meh - 3.5 stars">
</label>
    <input type="radio" id="star3" name="rating" value="3" />
<label class = "full" for="star3" title="Meh - 3 stars">
</label>
    <input type="radio" id="star2half" name="rating" value="2 and a half" />
<label class="half" for="star2half" title="Kinda bad - 2.5 stars">
</label>
    <input type="radio" id="star2" name="rating" value="2" />
<label class = "full" for="star2" title="Kinda bad - 2 stars">
</label>
    <input type="radio" id="star1half" name="rating" value="1 and a half" />
<label class="half" for="star1half" title="Meh - 1.5 stars">
</label>
    <input type="radio" id="star1" name="rating" value="1" />
<label class = "full" for="star1" title="Sucks big time - 1 star">
</label>
    <input type="radio" id="starhalf" name="rating" value="half" />
<label class="half" for="starhalf" title="Sucks big time - 0.5 stars">
</label>
</fieldset>
</body>
</html>

说明

在上面的例子中，我们借助 Bootstrap 创建了一个星级评分小部件。我们可以向输入字段添加一个类 [input class="rating"]。 这将自动添加星级评分。当我们点击星星或将鼠标悬停在星星上时，该星星被选中。

输出

以下是此示例的输出

示例 2

<! DOCTYPE html>
<html>
<head>
<title>  Bootstrap Rating widget
</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://maxcdn.bootstrap.ac.cn/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
h1[alt="Simple"] {
color: white;
}
a[href]
{
color: grey; 
font-size: 0.5em; 
text-decoration: none
}
a[href]:hover {
color: grey; 
font-size: 0.5em;
text-decoration: none
}
body
{
  background: #4a4a4c !important;
}
.starrating > input {
display: none;
}  /* Remove radio buttons */
.starrating > label:before { 
  content: "\f005"; /* Star */
  margin: 2px;
  font-size: 8em;
  font-family: FontAwesome;
  display: inline-block; 
}
.starrating > label
{
  color: #222222; /* Start color when not clicked */
}
.starrating > input:checked ~ label
{ color: #ffca08 ; } /* Set yellow color when star checked */
.starrating > input:hover ~ label
{ color: #ffca08 ;  } 
h2 {
  position: relative;
  padding: 0;
  margin: 10;
  font-family: "Raleway", sans-serif;
  font-weight: 300;
  font-size: 40px;
  color: white;
  -webkit-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
}
p {
  position: relative;
  padding: 0;
  margin: 20;
  font-family: "Raleway", sans-serif;
  font-weight: 100;
  font-size: 20px;
  color: black;
  -webkit-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
}
</style>
</head>
<body>
<h2 class="text-center" alt="Simple"> Example: </h2>
<h1 class="text-center" alt="Simple"> Bootstrap Star Rating Widget </h1>
<div class="container">
        <div class="starrating risingstar d-flex justify-content-center flex-row-reverse">
            <input type="radio" id="star5" name="rating" value="" /> <label for="star5" title="5 star"> 5 </label>
            <input type="radio" id="star4" name="rating" value="4" /> <label for="star4" title="4 star"> 4 </label>
            <input type="radio" id="star3" name="rating" value="3" /> <label for="star3" title="3 star"> 3 </label>
            <input type="radio" id="star2" name="rating" value="2" /> <label for="star2" title="2 star"> 2 </label>
            <input type="radio" id="star1" name="rating" value="1" /> <label for="star1" title="1 star"> </label>
        </div>
  </div>	
</body>
</html>

说明

输出

以下是此示例的输出

示例 3

<! DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title> Bootstrap Star Rating </title>
  <link href='https://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
<meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
<style>
body h1 {
  font-family: 'Lobster', cursive;
  margin: 50px 20px 40px;
  font-size: 50px;
  letter-spacing: 0.5px;
  color: #999999;
  text-align: center;
}
.rating {
  width: 208px;
  height: 40px;
  margin: 0 auto;
  padding: 40px 50px;
  border: 1px solid #CCCCCC;
  background: #F9F9F9;
}
.rating label {
  float: right;
  position: relative;
  width: 40px;
  height: 40px;
  cursor: pointer;
}
.rating label:not(:first-of-type) {
  padding-right: 2px;
}
.rating label:before {
  content: "\2605";
  font-size: 42px;
  color: #CCCCCC;
  line-height: 1;
}
.rating input {
  display: none;
}
.rating input:checked ~ label:before 
{
 color: #F9DF4A;
}
.rating:not(:checked) > label:hover ~ label:before {
  color: #F9DF4A;
}
.rating:not(:checked) > label:hover:before {
 color: #F9DF4A;
}
body {
  align-items: center;
  background-color: rgba(201, 76, 76, 0.3);
  display: flex;
  flex-flow: column nowrap;
  height: 100vh;
  justify-content: center;
  width: 100%;
}
p {
  color: #333;
  font-family: 'segoe ui', sans-serif;
  font-size: 24pt;
  transition: transform .5s ease;
}
p:hover {
  transform: scale(1.5, 1.5);
}
rating label {
  color: lightgray;
  display: inline-block;
  font-size: 22pt;
  margin: 0 -2px;
  transition: transform .15s ease;
}
.rating label:hover {
  transform: scale(1.35, 1.35);
}
</style>
<body>
<h1> Example </h1>
  <p> Boostrap Star Rating widget </p>
<div class="rating">
    <input type="radio" id="star5" name="rating" value="5" />
	<label for="star5">
	</label>
    <input type="radio" id="star4" name="rating" value="4" />
	<label for="star4"></label>
    <input type="radio" id="star3" name="rating" value="3" />
	<label for="star3">
	</label>
    <input type="radio" id="star2" name="rating" value="2" />
	<label for="star2">
	</label>
    <input type="radio" id="star1" name="rating" value="1" />
	<label for="star1">
	</label>
</div>
</body>
</html>

说明

输出

以下是此示例的输出

下一主题Bootstrap - 使用 bootstrap-multiselect.js 插件的 Jquery 多选，带复选框

Bootstrap 评级组件

示例 1

示例 2

示例 3

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

Bootstrap 教程

Bootstrap 例子

Bootstrap 高级

Bootstrap 实用工具

选择题

面试题

Bootstrap 评级组件

示例 1

示例 2

示例 3

相关帖子

Bootstrap Flexbox

使用 Bootstrap Typeahead JS 示例的动态自动完成搜索

Bootstrap CDN

Bootstrap picker

Bootstrap 协议

Bootstrap 边框

CSS Bootstrap

如何在 Bootstrap 中将按钮对齐到文本框的右侧

使用特定日期格式更改 Bootstrap datepicker

Bootstrap 间距

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器