BootSraep 5 Typography Lists Unstyled

Bootstrap 5 Typography Lists Unstyled用于删除订单或列表下的默认样式。它还可以移除列表的左边缘。这只适用于直接的子列表项。

类型学列表未定型类：

列表样式。该类用于移除列表中的默认样式。

语法:

<ul class="list-unstyled">
  <li>...</li>
  <li>...</li>
  ...
</ul>

下面的例子说明了排版表无样式的问题。

例子1：在这个例子中，我们将创建2个订单列表，并在其中一个列表上使用一个list-unstyled类。

<!DOCTYPE html>
<html>
  
<head>
    <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 text-center">
        Geeksforgeeks
    </h1>
    <p class="text-center">Geeks Learning Together</p>
    <ol>
        <li class="">We are Geeks</li>
        <li class="">We help each other</li>
        <li class="">We love Stackoverflow</li>
    </ol>
    <!-- Bootstrap 5 Unstyled Class Used-->
    <strong>Bootstrap 5 Unstyled Class Used</strong>
    <ol class="list-unstyled">
        <li class="">We are Geeks</li>
        <li class="">We help each other</li>
        <li class="">We love Stackoverflow</li>
    </ol>
</body>
  
</html>

输出:

BootSraep 5 Typography Lists Unstyled

例子2：在这个例子中，我们将创建嵌套的无序列表，并使用一个 “list-unstyled“类在外层的无序列表下。

<!DOCTYPE html>
<html>
  
<head>
    <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 text-center">
        Geeksforgeeks
    </h1>
    <p class="text-center">Geeks Learning Together</p>
    <ul class="list-unstyled">
        <li>Geeks help each Other</li>
        <li>Consistency is the key of Success</li>
        <li>Follow for more:
            <ul>
                <li>Are you with us</li>
            </ul>
        </li>
        <li>1 Problem a day recession keeps away</li>
    </ul>
</body>
  
</html>