将 HTML 内容添加到 Bootstrap 列表组

使用 list-group-item 类添加引导列表组。

使用以下代码将 HTML 内容添加到链接列表组

示例

<!DOCTYPE html>

<html>

   <head>

      <title>Bootstrap Example</title>

      <link href = "/bootstrap/css/bootstrap.min.css" rel = "stylesheet">

      <script src = "/scripts/jquery.min.js"></script>

      <script src = "/bootstrap/js/bootstrap.min.js"></script>

   </head>

   <body>

      <div class = "list-group">

         <a href = "#" class = "list-group-item active">

            <h4 class = "list-group-item-heading">

               Tutorials

            </h4>

         </a>

         <a href = "#" class = "list-group-item">

            <h4 class = "list-group-item-heading">

               Programming

            </h4>

            <p class = "list-group-item-text">

               Tutorials on Java, C, C++, etc.

            </p>

         </a>

         <a href = "#" class = "list-group-item">

            <h4 class = "list-group-item-heading">

               Web Development

            </h4>

            <p class = "list-group-item-text">

               Tutorials on PHP, HTML5, etc.

            </p>

         </a>

         <a href = "#" class = "list-group-item">

            <h4 class = "list-group-item-heading">

               Database

            </h4>

            <p class = "list-group-item-text">

               Tutorials on DBMS, MySQL, DB2, etc.

            </p>

         </a>

      </div>

      <div class = "list-group">

         <a href = "#" class = "list-group-item active">

            <h4 class = "list-group-item-heading">

               Quiz

            </h4>

         </a>

         <a href = "#" class="list-group-item">

            <h4 class = "list-group-item-heading">

               CAT

            </h4>

            <p class = "list-group-item-text">

               Quiz for CAT students.

            </p>

         </a>

         <a href = "#" class = "list-group-item">

            <h4 class = "list-group-item-heading">NEET</h4>

            <p class = "list-group-item-text">Quiz for NEET students.</p>

         </a>

      </div>

   </body>

</html>

以上是 将 HTML 内容添加到 Bootstrap 列表组 的全部内容, 来源链接: utcz.com/z/352709.html

回到顶部