在項目開發中，我需要一個美觀且功能強大的星級評分控件。雖然 bootstrap 提供了基礎的表單元素，但自帶的評分控件樣式較為簡陋，難以滿足需求。我希望評分控件能夠支持半星顯示、自定義樣式、以及響應式布局。經過一番搜索，我發現了 kartik-v/bootstrap-star-rating 這個 jquery 插件，它完美地解決了我的問題。
kartik-v/bootstrap-star-rating 是一個基于 jquery 和 bootstrap 的星級評分插件。它提供了豐富的功能和高度的可定制性，可以輕松地將任何 html input 元素轉換為美觀的星級評分控件。
主要特點：
- 美觀的樣式： 默認使用純 css3 渲染星星，告別圖片精靈，提供清晰可縮放的矢量圖標。
- 靈活的定制： 支持自定義星星數量、最小值、最大值、步長，理論上支持任何分數評分。
- 主題支持： v4.0 版本引入了主題概念，可以通過簡單的配置切換不同的主題樣式，例如 krajee-svg (SVG 圖標), krajee-uni (Unicode 符號), krajee-fas (Font Awesome 5), krajee-fa (Font Awesome 4), krajee-gly (Bootstrap 3 Glyphicons)。
- RTL 支持： 自動檢測并調整樣式以支持從右到左的布局。
- 事件支持： 提供 rating.change, rating.clear, rating.reset, rating.refresh, rating.hover, 和 rating.hoverleave 等 jQuery 事件，方便進行高級開發。
- 其他功能： 支持禁用、只讀模式，自定義清除按鈕和評分描述，以及響應式布局。
安裝方式：
可以通過多種方式安裝 kartik-v/bootstrap-star-rating：
-
Bower:
bower install bootstrap-star-rating
-
php composer.phar require kartik-v/bootstrap-star-rating "@dev"
"require": { "kartik-v/bootstrap-star-rating": "@dev" } -
手動安裝：
下載源碼 ZIP 或 TAR 包，將 CSS 和 JS 文件夾解壓到你的項目目錄中。
使用方法：
-
引入資源文件：
在 HTML 文件中引入必要的 CSS 和 JS 文件。
<!-- Bootstrap CSS --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css"> <!-- Star Rating CSS --> <link href="https://cdn.jsdelivr.net/gh/kartik-v/bootstrap-star-rating@4.1.2/css/star-rating.min.css" media="all" rel="stylesheet" type="text/css" /> <!-- Krajee SVG Theme CSS (Default since v4.1.0) --> <link href="https://cdn.jsdelivr.net/gh/kartik-v/bootstrap-star-rating@4.1.2/themes/krajee-svg/theme.css" media="all" rel="stylesheet" type="text/css" /> <!-- jQuery --> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <!-- Star Rating JS --> <script src="https://cdn.jsdelivr.net/gh/kartik-v/bootstrap-star-rating@4.1.2/js/star-rating.min.js" type="text/javascript"></script> <!-- Krajee SVG Theme JS (Default since v4.1.0) --> <script src="https://cdn.jsdelivr.net/gh/kartik-v/bootstrap-star-rating@4.1.2/themes/krajee-svg/theme.js"></script> <!-- Locale (Optional) --> <script src="https://cdn.jsdelivr.net/gh/kartik-v/bootstrap-star-rating@4.1.2/js/locales/LANG.js"></script>
-
HTML 標記：
使用 HTML input 元素，并添加 rating class。
<input id="input-id" type="text" class="rating" data-size="lg">
-
初始化插件：
使用 jQuery 初始化插件。
// 使用默認配置 $("#input-id").rating(); // 使用自定義配置 $("#input-id").rating({'size':'lg'});
實際應用：
在我的項目中，我使用 kartik-v/bootstrap-star-rating 創建了一個產品評分功能。用戶可以對產品進行評分，評分結果會實時顯示在頁面上。通過自定義主題和樣式，我將評分控件與網站的整體風格完美融合，提升了用戶體驗。
總結：
kartik-v/bootstrap-star-rating 是一個強大而易于使用的 Bootstrap 星級評分插件。它提供了豐富的功能和高度的可定制性，可以幫助開發者快速創建美觀、可交互的評分控件，提升用戶體驗。如果你正在尋找一個優秀的星級評分解決方案，那么 kartik-v/bootstrap-star-rating 絕對是一個值得考慮的選擇。
通過Composer學習PHP插件：學習地址
