資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何使用 Bootstrap 在 optgroup 標籤前新增圖片？
簡介
在使用 Bootstrap 構建網頁時，在 optgroup 元素的標籤前新增圖片可能很有用。這有助於在選擇元素中直觀地對選項進行分組，並使頁面更易於使用者使用。在本文中，我們將討論如何使用 Bootstrap 在 optgroup 元素的標籤前新增圖片。
什麼是 optgroup？
optgroup 是一個 HTML 元素，用於在選擇元素中對相關選項進行分組。optgroup 元素為選項組建立標籤，並且 optgroup 中的選項會縮排並直觀地組合在一起。
語法
<select>
<optgroup label="Group 1">
<option>Option 1</option>
<option>Option 2</option>
</optgroup>
<optgroup label="Group 2">
<option>Option 3</option>
<option>Option 4</option>
</optgroup>
</select>
讓我們透過一個帶有程式碼的示例來更好地理解這一點。
示例
在本例中，我們將使用 Bootstrap 和 HTML 在 optgroup 元素的標籤前新增圖片。
步驟 1 - 在專案目錄中使用檔案瀏覽器建立一個 index.html 檔案。
步驟 2 - 在 HTML 檔案的頭部部分包含必要的元標記、指令碼和樣式。這包括指向 Bootstrap CSS 和 JavaScript 檔案以及 bootstrapselect 庫的連結。
<meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <script src= "https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/css/bootstrap-select.min.css"> <script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/js/bootstrap-select.min.js"></script>
步驟 3 - 接下來，我們建立一個帶有類 "d-flex align-items-center" 的 div，它將用於居中選擇元素。
<div class="d-flex align-items-center">
步驟 4 - 在 div 內部，我們建立一個帶有類 "selectpicker" 的選擇元素。此類用於將 Bootstrap 的樣式應用於選擇元素。
<select class="selectpicker">
步驟 5 - 在選擇元素內，我們建立兩個 optgroup 元素。每個 optgroup 元素都有一個標籤，其中包含一個影像。影像使用 "img" 標籤新增，"src" 屬性設定為影像的 URL。標籤文字是在影像旁邊顯示的文字。在每個 optgroup 元素內部，我們都有幾個 option 元素。這些是在選擇元素中顯示的選項。
<optgroup label= "<img src='https://cdn-icons-png.flaticon.com/128/3085/3085330.png'> Type 1"> <option value="one">Car 1</option> <option value="two">Car 2</option> <option value="three">Car 3</option> </optgroup>
步驟 6 - 接下來，我們有一個包含 JavaScript 程式碼的指令碼標籤，該程式碼用於處理選擇元素顯示時的事件。該指令碼使用 jQuery 選擇選擇元素內所有帶有類 "dropdown-header" 的元素。
<script>
$('.selectpicker').on('shown.bs.select', function () {
})
</script>
步驟 7 - 在指令碼中，我們使用 each() 方法迴圈遍歷所有 dropdown-header 元素。我們檢查元素是否具有屬性 "data-unescaped" 且值為 "1" -
$('.bootstrap-select .dropdown-header').each(function () {
if ((this.dataset.unescaped || '1') == '1' }
步驟 8 - 如果元素具有屬性 "data-unescaped" 且值為 "1"，我們將元素的 html 設定為元素的文字。
$('.bootstrap-select .dropdown-header').each(function () {
if ((this.dataset.unescaped || '1') == '1') {
let element = $(this);
element.html(element.text());
element.attr('data-unescaped', '0');
}
步驟 9 - 使用此程式碼，我們可以使用 Bootstrap 在 optgroup 元素的標籤前新增圖片。
示例
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1,
shrink-to-fit=no">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"> </script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"> </script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/css/bootstrap-select.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/js/bootstrap-select.min.js"></script>
<style>
.bootstrap-select img {
width: 20px;
}
</style>
</head>
<body>
<h1>Welcome to Tutorials Point</h1>
<div class="d-flex align-items-center">
<select class="selectpicker">
<optgroup label=
"<img src='https://cdn-icons-png.flaticon.com/128/3085/3085330.png'> Type 1">
<option value="one">Car 1</option>
<option value="two">Car 2</option>
<option value="three">Car 3</option>
</optgroup>
<optgroup label=
"<img src='https://cdn-icons-png.flaticon.com/128/3202/3202926.png'> Type 2">
<option value="4">Car 4</option>
<option value="5"Car >5</option>
<option value="6">Car 6</option>
</optgroup>
</select>
</div>
<script>
$('.selectpicker').on('shown.bs.select', function () {
$('.bootstrap-select .dropdown-header').each(function () {
if ((this.dataset.unescaped || '1') == '1') {
let element = $(this);
element.html(element.text());
element.attr('data-unescaped', '0');
}
})
})
</script>
</body>
</html>
結論
在本文中，我們討論瞭如何使用 Bootstrap 在 optgroup 元素的標籤前新增圖片。我們首先介紹了什麼是 optgroup 及其語法。然後，我們提供了一個分步指南，其中包含程式碼片段，說明如何建立 HTML 檔案並實現必要的指令碼和樣式，以便使用 Bootstrap 在 optgroup 元素的標籤前顯示圖片。我們還演示瞭如何使用 JavaScript 處理事件。此技術可用於透過在選擇元素中直觀地對選項進行分組來使網頁更易於使用者使用。
664 次檢視
