bootstrap评分打星
时间: 2023-08-31 18:09:26 浏览: 33
可以使用 Bootstrap 的星级评分组件来实现。这个组件有 5 个星星,用户可以点击星星来为某个项目打分。下面是一个简单的例子:
```html
<div class="rating">
<input type="radio" name="rating" id="star5" value="5">
<label for="star5"></label>
<input type="radio" name="rating" id="star4" value="4">
<label for="star4"></label>
<input type="radio" name="rating" id="star3" value="3">
<label for="star3"></label>
<input type="radio" name="rating" id="star2" value="2">
<label for="star2"></label>
<input type="radio" name="rating" id="star1" value="1">
<label for="star1"></label>
</div>
```
上面的代码使用了一组 radio 输入框和 label 标签来实现星级评分。每个输入框都有一个唯一的 ID 和一个 value 值,表示对应的星级评分。label 标签与输入框关联,当用户点击标签时会触发对应的输入框。
你可以使用 CSS 样式来美化这个评分组件,包括设置星星的颜色、大小等等。例如:
```css
.rating input[type="radio"] {
display: none;
}
.rating label:before {
content: "\f005";
font-family: FontAwesome;
font-size: 2em;
color: #ccc;
}
.rating input[type="radio"]:checked ~ label:before {
color: #ffce00;
}
```
上面的 CSS 样式使用了 Font Awesome 字体库来显示星星图标。它还设置了默认的颜色为灰色,选中时为黄色。你可以根据自己的需要调整这些样式。