列表组
基本示例
  • 第一回 甄士隐梦幻识通灵 贾雨村风尘怀闺秀
  • 第二回 贾夫人仙逝扬州城 冷子兴演说荣国府
  • 第三回 贾雨村夤缘复旧职 林黛玉抛父进京都
  • 第四回 薄命女偏逢薄命郎 葫芦僧乱判葫芦案
  • 第五回 游幻境指迷十二钗 饮仙醪曲演红楼梦
列表(启用)状态
  • 第六回 贾宝玉初试云雨情 刘姥姥一进荣国府
  • 第七回 送宫花贾琏戏熙凤 宴宁府宝玉会秦钟
  • 第八回 比通灵金莺微露意 探宝钗黛玉半含酸
  • 第九回 恋风流情友入家塾 起嫌疑顽童闹学堂
  • 第十回 金寡妇贪利权受辱 张太医论病细穷源
列表(禁用)状态
  • 第十一回 庆寿辰宁府排家宴 见熙凤贾瑞起淫心
  • 第十二回 王熙凤毒设相思局 贾天祥正照风月鉴
  • 第十三回 秦可卿死封龙禁尉 王熙凤协理宁国府
  • 第十四回 林如海捐馆扬州城 贾宝玉路谒北静王
  • 第十五回 王凤姐弄权铁槛寺 秦鲸卿得趣馒头庵
链接和按钮

使用 <a><button>来创建具有 hover、禁用、悬停和活动状态的列表组.list-group-item-action,我们分离这些Class样式,以确保由非交互元素组成的列表群组(如 <li><div>)不提供可点击或触击(即可以用一个父<div>代替<ul>-译者注)。

请务必 不要在这里使用 .btn 标准样式。

使用<button>元素,你还可以使用disabled 属性来达到禁用状态指示(或引用 .disabled 样式),不过这一属性不支持HTML5中的 <a>标签。

Flush边缘对齐

加入 .list-group-flush 选择器,可以实现移除部分边框以及圆角,从而产生边缘贴齐的列表组,这在诸如Card卡片等容器中很实用(达成更好的呈现效果)。

  • 第二十六回 蜂腰桥设言传心事 潇湘馆春困发幽情
  • 第二十七回 滴翠亭杨妃戏彩蝶 埋香冢飞燕泣残红
  • 第二十八回 蒋玉菡情赠茜香罗 薛宝钗羞笼红麝串
  • 第二十九回 享福人福深还祷福 痴情女情重愈斟情
  • 第三十回 宝钗借扇机带双敲 龄官划蔷痴及局外
上下文语境颜色呈现样式
  • 第三十一回 撕扇子作千金一笑 因麒麟伏白首双星
  • 第三十二回 诉肺腑心迷活宝玉 含耻辱情烈死金钏
  • 第三十三回 手足耽耽小动唇舌 不肖种种大承笞挞
  • 第三十四回 情中情因情感妹妹 错里错以错劝哥哥
  • 第三十五回 白玉钏亲尝莲叶羹 黄金莺巧结梅花络
  • 第三十六回 绣鸳鸯梦兆绛芸轩 识分定情悟梨香院
  • 第三十七回 秋爽斋偶结海棠社 蘅芜苑夜拟菊花题
  • 第五十七回 慧紫鹃情辞试忙玉 慈姨妈爱语慰痴颦
  • 第五十八回 杏子阴假凤泣虚凰 茜纱窗真情揆痴理

情景式class也可以使用 .list-group-item-action 样式,注意,在上述示例中,不存在 hover 样式指示器,事实上它是支持的,而且还支持 .active 状态指示-我们可以应用它们在上下文情景列表组的项目上进行活动状态选择指示。

引入badge微章
  • 第四十六回 尴尬人难免尴尬事 鸳鸯女誓绝鸳鸯偶 14
  • 第四十七回 呆霸王调情遭苦打 冷郎君惧祸走他乡 2
  • 第四十八回 情人情误思游艺慕 雅女雅集苦吟诗 1
自定义内容
JavaScript 行为