Bootstrap 4 中文开发手册
简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
예배 규칙서 찾다
Getting started Accessibility（无障碍） Browsers and devices（浏览器和设备） Build tools（构建工具） Contents（内容） Download（下载） JavaScript Theming Bootstrap（主题Bootstrap） Webpack Components: Alerts Alerts（警报） Components: Badges Badges（徽章） Components: Breadcrumb Breadcrumb Components: Button group Button group（按钮组） Components: Buttons Buttons（按钮） Components: Cards Components: Carousel Cards（卡） Carousel（圆盘传送带） Components: Collapse Collapse（折叠） Components: Dropdowns Dropdowns（下拉菜单） Components: Forms Forms（表单） Components: Input group Input group（输入群组） Components: Input group Jumbotron（广告大屏幕） Components: List group List group（列表组） Components: Modal Modal（互动视窗） Components: Navbar Navbar（导航栏） Components: Navs Navs（导航栏） Components: Pagination Pagination（分页） Components: Popovers Popovers（弹出框） Components: Progress Progress（进度条） Components: Scrollspy Scrollspy（滚动监听） Components: Tooltips Tooltips（提示工具） Content Code（代码） Figures（图片区） Images（图片） Reboot（重置） Tables（表格） Typography（排版） Layout Grid（网格） Layout（布局） Media object（多媒体对象） Utilities for layout（排版通用类别） Migration Migrating to v4（迁移到v4） Utilities Borders（边框） Clearfix（清除浮动） Close icon（关闭图标） Colors（颜色） Display property（显示属性） Embeds（内嵌） Flex（弹性） Float（浮动） Image replacement（图像替换） Position（位置） Screenreaders（荧幕阅读器） Sizing（尺寸） Spacing（间隔） Text（文本） Vertical alignment（垂直对齐） Visibility（能见度）

©
이 문서에서는PHP 중국어 웹사이트 매뉴얼풀어 주다

문자

列表组是用于显示一系列内容的灵活且强大的组件。修改并扩展它们以支持其中的任何内容。

基本示例

最基本的列表组是包含列表项和适当类的无序列表。使用后面的选项构建它，或根据需要使用您自己的 CSS。

     
  • Cras justo odio
    •  
  • Dapibus ac facilisis in
    •  
  • Morbi leo risus
    •  
  • Porta ac consectetur ac
    •  
  • Vestibulum at eros

活动项目

添加.active到一个.list-group-item以指示当前的活动选择。

     
  • Cras justo odio
    •  
  • Dapibus ac facilisis in
    •  
  • Morbi leo risus
    •  
  • Porta ac consectetur ac
    •  
  • Vestibulum at eros

禁用的项目

添加.disabled到一个.list-group-item使其显示禁用。请注意，一些带有.disabled元素.disabled还需要自定义 JavaScript 来完全禁用其点击事件（例如，链接）。

     
  • Cras justo odio
    •  
  • Dapibus ac facilisis in
    •  
  • Morbi leo risus
    •  
  • Porta ac consectetur ac
    •  
  • Vestibulum at eros

链接和按钮

使用或

一定不要在这里使用标准.btn类。

  Cras justo odio  Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Vestibulum at eros

使用

上下文类

使用上下文类来设置具有状态背景和颜色的列表项。

     
  • Dapibus ac facilisis in
    •  
  • This is a primary list group item
    •  
  • This is a secondary list group item
    •  
  • This is a success list group item
    •  
  • This is a danger list group item
    •  
  • This is a warning list group item
    •  
  • This is a info list group item
    •  
  • This is a light list group item
    •  
  • This is a dark list group item

上下文类也适用于.list-group-item-action。请注意，在前面的示例中不存在悬停样式。还支持的是.active状态；将其应用于指示上下文列表组项目上的活动选择。

 Dapibus ac facilisis in This is a primary list group item This is a secondary list group item This is a success list group item This is a danger list group item This is a warning list group item This is a info list group item This is a light list group item This is a dark list group item

将意义传递给辅助技术

使用颜色来增加意义只能提供一种视觉指示，而不会传达给辅助技术的用户 - 如屏幕阅读器。确保由颜色表示的信息或者来自内容本身（例如可见文本），或者通过其他方式包含，例如隐藏在.sr-only类中的其他文本。

带有徽章

在一些实用程序的帮助下，将徽章添加到任何列表组项目以显示未读的计数，活动等等。

     
  •  Cras justo odio 14 
    •  
  •  Dapibus ac facilisis in 2 
    •  
  •  Morbi leo risus 1

自定义内容

在 Flexbox 实用程序的帮助下，添加几乎所有的 HTML，甚至包括下面的链接列表组。

  
 
List group item heading
 3 days ago 
 
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
 Donec id elit non mi porta.   
 
List group item heading
 3 days ago 
 
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
 Donec id elit non mi porta.   
 
List group item heading
 3 days ago 
 
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
 Donec id elit non mi porta.

JavaScript 行为

使用选项卡 JavaScript 插件 - 单独包含它或通过编译的bootstrap.js文件 - 扩展我们的列表组以创建本地内容的可放置窗格。

 
  
 
 
 
...
 
...
 
...
 
...

使用数据属性

您可以通过简单地指定data-toggle="list"或在元素上书写任何JavaScript来激活列表组导航。在.list-group-item使用这些数据属性。

 
...
 
...
 
...
 
...

通过 JavaScript

通过 JavaScript 启用可放置列表项（每个列表项需要单独激活）：

$('#myList a').on('click', function (e) { e.preventDefault() $(this).tab('show')})

您可以通过几种方式激活单个列表项目：

$('#myList a[href="#profile"]').tab('show') // Select tab by name$('#myList a:first').tab('show') // Select first tab$('#myList a:last').tab('show') // Select last tab$('#myList li:eq(2) a').tab('show') // Select third tab (0-indexed)

淡入淡出效果

为了使制表符面板淡入，添加.fade到每个.tab-pane。第一个选项卡窗格还必须有.show使初始内容可见。

 
...
 
...
 
...
 
...

方法

$().tab

激活列表项元素和内容容器。标签应该有一个data-target或一个href目标在 DOM 的容器节点。

 
...
 
...
 
...
 
...

.tab(‘show’)

选择给定的列表项并显示其关联窗格。之前选择的任何其他列表项目将被取消选中，并且其关联的窗格将被隐藏。在实际显示选项卡窗格之前返回给调用方（例如，在shown.bs.tab事件发生之前）。

$('#someListItem').tab('show')

活动

当显示新选项卡时，事件按以下顺序触发：

1.hide.bs.tab（在当前活动选项卡上）

2.show.bs.tab（在待显示的选项卡上）

3.hidden.bs.tab（在上一个活动选项卡上，与hide.bs.tab事件相同）

4.shown.bs.tab（在新近活动的刚显示的标签上，与show.bs.tab事件相同）

如果没有标签已经活跃，hide.bs.tab和hidden.bs.tab事件不会被解雇。

事件类型

描述

show.bs.tab

此事件在选项卡显示中触发，但在显示新选项卡之前。使用 event.target和event.relatedTarget分别定位活动选项卡和上一个活动选项卡（如果可用）。

shown.bs.tab

在显示标签后，此事件会在标签上显示。使用 event.target 和 event.relatedTarget 分别定位活动选项卡和上一个活动选项卡（如果可用）。

hide.bs.tab

当要显示新选项卡时会触发此事件（因此将隐藏上一个活动选项卡）。使用event.target和event.relatedTarget分别定位当前活动选项卡和即将生效的新选项卡。

hidden.bs.tab

此事件在显示新选项卡后触发（因此上一个活动选项卡被隐藏）。使用event.target和event.relatedTarget分别定位上一个活动选项卡和新活动选项卡。

 
$('a[data-toggle="list"]').on('shown.bs.tab', function (e) { e.target // newly activated tab e.relatedTarget // previous active tab})
이전 기사： 다음 기사：