Bootstrap 列表组.pdfVIP

Bootstrap 列表组 Bootstrap 列表组 本章我们将讲解列表组。列表组件⽤于以列表形式呈现复杂的和⾃定义的内容。创建 ⼀ 基本的列表组的步骤如下： 向元素 ul 添加 class .list-group 。 向 li 添加 class .list-group-item 。 下⾯的实例演⽰了这点： !DOCTYPE html html head titleBootstrap 实例 - 基本的列表组/title link href=/ ootstrap/css/ ootstrap.min.css rel=stylesheet script src=/scripts/jquery .min.js/script script src=/ ootstrap/js/ ootstrap.min.js/script /head ody ul class=list-group li class=list-group-item免费域名注册/li li class=list-group-item免费 Window 空间托管/li li class=list-group-item图像的数量/li li class=list-group-item24*7 ⽀持/li li class=list-group-item每年更新成本/li /ul / ody /html 尝试⼀下 » 结果如下所⽰： 向列表组添加徽章 我们可以向任意的列表项添加徽章组件，它会⾃动定位到右边。只需要在 li 元素中 添加 span class= badge 即可。下⾯的实例演⽰了这点： !DOCTYPE html html head titleBootstrap 实例 - 向列表组添 徽章/title link href=/ ootstrap/css/ ootstrap.min.css rel=stylesheet script src=/scripts/jquery .min.js/script script src=/ ootstrap/js/ ootstrap.min.js/script /head ody ul class=list-group li class=list-group-item免费域名注册/li li class=list-group-item免费 Window 空间托管/li li class=list-group-item图像的数量/li li class=list-group-item span class= adge新/span 24*7 ⽀持 /li li class=list-group-item每年更新成本/li li class=list-group-item span class= adge新/span 折扣优惠 /li /ul / ody /html 尝试⼀下 » 结果如下所⽰： 向列表组添加链接 通过使⽤锚标签代替列表项，我们可以向列表组添加链接。我们需要使⽤ div 代替 ul 元素。下⾯的实例演⽰了这点： !DOCTYPE html html head titleBootstrap 实例 - 向列表组添 链接/title link href=/ ootstrap/css/ ootstrap.min.css rel=stylesheet script src=/scripts/jquery .min.js/script script src=/ ootstrap/js/ ootstrap.min.js/script /head ody a href=# class=list-group-item active 免费域名注册 /a a href=# class=list-group-item24*7 ⽀持/a a href=# class=list-group-item免费 Window 空间托管/a a href=# class=list-group-item图像的数量/a a href=# class=list-group-item每年更新成本/a / ody /html 尝试⼀下 » 结果如下所⽰： 向列表组添加⾃定义内容 我们可以向上⾯已添加链接的列表