Bootstrap 5 列表组禁用的项目

Bootstrap 5提供了列表组禁用项目的功能，其中的项目是以列表形式存储的。列表组是一个灵活而强大的组件，用于显示一系列的内容。列表组禁用项目功能用于表示该项目目前是禁用的。

列表组禁用的项目类别：

disabled。该类用于使列表中的项目出现禁用。
list-group-item。该类用于指示和增加列表中的项目。
list-group。该类用于创建Bootstrap列表。

注意：要完全阻止具有 “禁用 “类的特定组件的点击事件，你需要使用自定义的JavaScript。

语法:

<ul class="list-group">
    <li class="list-group-item disabled">...</li>
     <li class="list-group-item">...</li>
     <li class="list-group-item">...</li>
</ul>

示例1：以下代码演示了使用列表组禁用项目属性的列表组禁用项目。

<!DOCTYPE html>
<html>
  
<head>
    <title>Bootstrap 5 List group Disabled items</title>
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
        rel="stylesheet"
        integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
        crossorigin="anonymous">
</head>
  
<body>
    <div class="container">
        <h1 class="text-success">
            GeeksforGeeks
        </h1>
          
        <ul class="list-group">
            <li class="list-group-item disabled">Hello</li>
            <li class="list-group-item">Geek</li>
            <li class="list-group-item">GeeksforGeeks</li>
        </ul>
    </div>
</body>
  
</html>

输出:

Bootstrap 5 列表组禁用的项目

示例2：以下代码演示了在多个项目上使用禁用项目属性的列表组。

<!DOCTYPE html>
<html>
  
<head>
    <title>Bootstrap 5 List group Disabled items</title>
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
        rel="stylesheet"
        integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
        crossorigin="anonymous">
</head>
  
<body>
    <div class="container">
        <h1 class="text-success">
            GeeksforGeeks
        </h1>
          
        <ul class="list-group">
            <li class="list-group-item disabled">C++</li>
            <li class="list-group-item">Python</li>
            <li class="list-group-item disabled">C</li>
            <li class="list-group-item">Java</li>
            <li class="list-group-item">JavaScript</li>
        </ul>
    </div>
</body>
  
</html>