极客教程Bootstrap 如何在optgroup标签前添加图片
简介
在使用Bootstrap构建网页时，在选择组元素的标签前添加图片可能很有用。这可以帮助在选择元素中对选项进行视觉分组，使页面更方便用户使用。在这篇文章中，我们将讨论使用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文件的head部分包含必要的元标签、脚本和样式。这包括指向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元素里面，我们有几个选项元素。这些是将在选择元素中显示的选项。
<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()方法循环浏览所有下拉标题元素。我们检查该元素是否有 “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以及它的语法。然后，我们提供了一个包含代码片段的步骤指南，说明如何使用Bootstrap创建一个HTML文件并实现必要的脚本和样式，以便在optgroup元素的标签前显示一个图像。我们还演示了如何使用JavaScript处理事件。这种技术可以通过在选择元素中对选项进行视觉分组，使网页更方便用户使用。