Bootstrap 5 列表组的编号

Bootstrap 5 List Group Numbered是Bootstrap 5中List Group提供的功能之一，它用于以列表的形式保留项目，并通过使用数字按顺序显示它们。

列出小组编号的类：

list-group-item。该类用于指示和增加列表中的项目。
list-group。该类用于创建Bootstrap列表。
list-group-numbered。该类用于生成项目的编号，它被用于<ol>标签。

语法:

<ol class="list-group list-group-numbered">
      <li class="list-group-item">...</li>
      <li class="list-group-item">...</li>
</ol>

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

<!DOCTYPE html>
<html>
  
<head>
    <title>Bootstrap 5 List group Numbered</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>
    <h1 class="text-success"> 
        GeeksforGeeks 
    </h1>
      
    <h2>Bootstrap 5 List group Numbered</h2>
      
    <ol class="list-group list-group-numbered">
        <li class="list-group-item">
            List Group Numbered
        </li>
        <li class="list-group-item">
            Bootstrap 5
        </li>
        <li class="list-group-item">
            GeeksforGeeks
        </li>
    </ol>
</body>
  
</html>

输出:

Bootstrap 5 列表组的编号

示例2：以下代码演示了使用Bootstrap 5功能的嵌套列表组编号。

<!DOCTYPE html>
<html>
  
<head>
    <title>Bootstrap 5 List group Numbered</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>
        <h2>Bootstrap 5 List group Numbered</h2>
        <ol class="list-group list-group-numbered">
            <li class="list-group-item"> Courses
                <ol class="list-group 
                    list-group-numbered">
                    <li class="list-group-item">
                        Full Stack Course</li>
                    <li class="list-group-item">
                        Android Development</li>
                    <li class="list-group-item">
                        DSA Full Course</li>
                </ol>
            </li>
            <li class="list-group-item">Languages
                <ol class="list-group list-group-numbered">
                    <li class="list-group-item">ReactJs</li>
                    <li class="list-group-item">Java</li>
                    <li class="list-group-item">C++</li>
                </ol>
            </li>
        </ol>
    </div>
</body>
  
</html>

输出:

Bootstrap 5 列表组的编号