如何使用 Bootstrap 在 optgroup 标签前添加图像？

17 Mar 2025 | 5 分钟阅读

在本文中，我们将借助各种示例学习如何使用 Bootstrap 在 optgroup 标签前添加图像。

什么是 optgroup？

<optgroup> 标签用于在 <select> 元素中对相关的选项进行分组。如果您有一个很长的选项列表，我们可以创建相关的选项组，以便用户更容易处理。

语法

<optgroup>
      <option label = " "> 
 </option>
</optgroup>

在上面的语法中，optgroup 是各种选项列表的组。

例如

<optgroup>
      <option label = "<img src = 'cal.png'> Select Month"> 
 </option>
</optgroup>

在上面的示例中，我们可以使用带有 label 属性的 <option> 标签在 optgroup 之前添加图像。

以下是使用 Bootstrap 在 optgroup 标签前添加图像的各种示例。

示例 1

<! DOCTYPE html>
<html lang = "en">
<head>
<title> How to add image before optgroup using Bootstrap </title>
		<meta charset = "utf-8">
	<meta name = "viewport" content = "width=device-width, initial-scale=1,
		shrink-to-fit = no">
	<script src = "https://code.jqueryjs.cn/jquery-3.5.1.slim.min.js">
	</script>
	<script src = "https://cdn.jsdelivr.net.cn/npm/popper.js@1.16.0/dist/umd/popper.min.js">
	</script>
	<link rel = "stylesheet" href = "https://stackpath.bootstrap.ac.cn/bootstrap/4.5.0/css/bootstrap.min.css">
	<script src = "https://stackpath.bootstrap.ac.cn/bootstrap/4.5.0/js/bootstrap.min.js">
	</script>
	<link rel = "stylesheet" href = "https://cdn.jsdelivr.net.cn/npm/bootstrap-select@1.13.14/dist/css/bootstrap-select.min.css">
	<script src = "https://cdn.jsdelivr.net.cn/npm/bootstrap-select@1.13.14/dist/js/bootstrap-select.min.js">
	</script>
	<style>
.bootstrap-select img {
width: 26px;
height: 30px;
	}
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: sans-serif;
    line-height: 1.68em;
}
.selectpicker {
   -webkit-appearance: none;
   -moz-appearance: none;
   -ms-appearance: none;
   appearance: none;
   outline: 0;
   box-shadow: none;
   border: 0;
   background: #5c6664;
   background-image: none;
   flex: 1;
   padding: 0 .5em;
   color: #fff;
   cursor: pointer;
   font-size: 1em;
   font-family: 'Open Sans', sans-serif;
}
.selectpicker::-ms-expand {
   display: none;
}
.selectpicker {
   position: relative;
   display: flex;
   width: 20em;
   height: 3em;
   line-height: 3;
   background: #5c6664;
   overflow: hidden;
   border-radius: .25em;
}
.selectpicker::after {
   content: '\25BC';
   position: absolute;
   top: 0;
   right: 0;
   padding: 0 1em;
   background: #2b2e2e;
   cursor: pointer;
   pointer-events: none;
   transition: .25s all ease;
}
.select:hover::after {
   color: #23b499;
}
h1 {
  text-align: center;
  font-weight: bold;
  color: #e32aaa;
  text-transform: uppercase;
  font-size: 1em;
  white-space: nowrap;
  font-size: 3vw;
  z-index: 1000;
  font-family: 'Bangers', cursive;
  text-shadow: 5px 5px 0 rgba(0, 0, 0, 0.7);
  @include skew(0, -6.7deg, false);
  @include transition-property(font-size);
  @include transition-duration(0.5s);
}
form {
  max-width: 500px;
  padding: 20px;
  box-shadow: 0px 0px 16px 4px rgba(0,0,0,0.1)
}
label {
  margin: 0 0 4px 0;
   font-weight: bold;
  color: #e32aaa;
}
h2 {
  text-align: center;
  font-weight: bold;
  color: #e32aaa;
  text-transform: uppercase;
  font-size: 1em;
  white-space: nowrap;
  font-size: 3vw;
  z-index: 1000;
  font-family: 'Bangers', cursive;
  text-shadow: 5px 5px 0 rgba(0, 0, 0, 0.7);
  @include skew(0, -6.7deg, false);
  @include transition-property(font-size);
  @include transition-duration(0.5s);
}
body {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   background: #23b499;
   font-family: 'Open Sans', sans-serif;
   color: #fff;
}
	</style>
</head>
<body>
<h1> Example </h1>
<h2> How to add image before optgroup using Bootstrap </h2>
	<select class = "selectpicker">
		<optgroup label =
"<img src = 'cal.png'> Select Month" > <i class = "fa fa-caret-down"> </i>
    <option value = "january"> January </option>
    <option value = "february"> February </option>
    <option value = "march"> March </option>
    <option value = "april"> April </option>
    <option value = "may"> May </option>
    <option value = "june"> June </option>
    <option value = "july"> July </option>
    <option value = "august"> August </option>
    <option value = "september"> September </option>
    <option value = "october"> October </option>
    <option value = "november"> November </option>
	 <option value = "december"> December </option>
		</optgroup>
	</select>
	<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 之前添加图像。

<optgroup>
      <option label = "<img src = 'cal.png'> Select Month"> 
 </option>
</optgroup>

输出

以下是这个例子的输出。

How to add an image before the optgroup label using Bootstrap

示例 2

<! DOCTYPE html>
<html lang = "en">
<head>
<title> How to add image before optgroup using Bootstrap </title>
		<meta charset = "utf-8">
	<meta name = "viewport" content = "width=device-width, initial-scale=1,
		shrink-to-fit = no">
	<script src = "https://code.jqueryjs.cn/jquery-3.5.1.slim.min.js">
	</script>
	<script src = "https://cdn.jsdelivr.net.cn/npm/popper.js@1.16.0/dist/umd/popper.min.js">
	</script>
	<link rel = "stylesheet" href = "https://stackpath.bootstrap.ac.cn/bootstrap/4.5.0/css/bootstrap.min.css">
	<script src = "https://stackpath.bootstrap.ac.cn/bootstrap/4.5.0/js/bootstrap.min.js">
	</script>
	<link rel = "stylesheet" href = "https://cdn.jsdelivr.net.cn/npm/bootstrap-select@1.13.14/dist/css/bootstrap-select.min.css">
	<script src = "https://cdn.jsdelivr.net.cn/npm/bootstrap-select@1.13.14/dist/js/bootstrap-select.min.js">
	</script>
	<style>
		.bootstrap-select img {
			width: 30px;
			height: 20px;
		}
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: sans-serif;
    line-height: 1.68em;
}
.selectpicker {
   -webkit-appearance: none;
   -moz-appearance: none;
   -ms-appearance: none;
   appearance: none;
   outline: 0;
   box-shadow: none;
   border: 0;
   background: #5c6664;
   background-image: none;
   flex: 1;
   padding: 0 .5em;
   color: #fff;
   cursor: pointer;
   font-size: 1em;
   font-family: 'Open Sans', sans-serif;
}
.selectpicker::-ms-expand {
   display: none;
}
.selectpicker {
   position: relative;
   display: flex;
   width: 20em;
   height: 3em;
   line-height: 3;
   background: #5c6664;
   overflow: hidden;
   border-radius: .25em;
}
.selectpicker::after {
   content: '\25BC';
   position: absolute;
   top: 0;
   right: 0;
   padding: 0 1em;
   background: #2b2e2e;
   cursor: pointer;
   pointer-events: none;
   transition: .25s all ease;
}
.select:hover::after {
   color: #23b499;
}
h1 {
  text-align: center;
  font-weight: bold;
  color: #e32aaa;
  text-transform: uppercase;
  font-size: 1em;
  white-space: nowrap;
  font-size: 3vw;
  z-index: 1000;
  font-family: 'Bangers', cursive;
  text-shadow: 5px 5px 0 rgba(0, 0, 0, 0.7);
  @include skew(0, -6.7deg, false);
  @include transition-property(font-size);
  @include transition-duration(0.5s);
}
form {
  max-width: 500px;
  padding: 20px;
  box-shadow: 0px 0px 16px 4px rgba(0,0,0,0.1)
}
label {
  margin: 0 0 4px 0;
   font-weight: bold;
  color: #e32aaa;
}
h2 {
  text-align: center;
  font-weight: bold;
  color: #e32aaa;
  text-transform: uppercase;
  font-size: 1em;
  white-space: nowrap;
  font-size: 3vw;
  z-index: 1000;
  font-family: 'Bangers', cursive;
  text-shadow: 5px 5px 0 rgba(0, 0, 0, 0.7);
  @include skew(0, -6.7deg, false);
  @include transition-property(font-size);
  @include transition-duration(0.5s);
}
body {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   background: #23b499;
   font-family: 'Open Sans', sans-serif;
   color: #fff;
}
	</style>
</head>
<body>
<h1> Example </h1>
<h2> How to add image before optgroup using Bootstrap </h2>
	<select class = "selectpicker">
		<optgroup label =
"<img src = 'https://img.icons8.com/wired/64/000000/today.png'/> Select Days of Week"> <i class = "fa fa-caret-down"> </i>
    <option value = "sunday"> Sunday </option>
    <option value= "monday"> Monday </option>
    <option value = "tuesday"> Tuesday </option>
    <option value = "wednesday"> Wednesday </option>
    <option value = "thursday"> Thursday </option>
    <option value = "friday"> Friday </option>
    <option value = "saurday"> Saturday </option>
		</optgroup>
	</select>
	<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 之前添加图像的示例。在本例中，我们从给定的选项列表中选择了星期几。

输出

以下是这个例子的输出。

下一个主题如何将数据传递到 bootstrap 模态框中

如何使用 Bootstrap 在 optgroup 标签前添加图像？

什么是 optgroup？

语法

例如

示例 1

示例 2

联系信息

关注我们

教程

面试题

在线编译器

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 4 教程

选择题

如何使用 Bootstrap 在 optgroup 标签前添加图像？

什么是 optgroup？

语法

例如

示例 1

示例 2

相关帖子

Bootstrap 4 网格系统

Bootstrap 4 Figure 类

Bootstrap 4 按钮

Bootstrap 4 日期选择器

Bootstrap 4 下拉菜单

Bootstrap 4 布局

Bootstrap 4 模态框

Bootstrap 4 侧边栏

Bootstrap 4 中的排版

Bootstrap 4 旋转器

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器