列表群组（List group）

您所在的位置：网站首页 › Autosar架构有关的编程语言 › 列表群组（List group）

列表群组（List group）

#列表群组（List group）| 来源: 网络整理| 查看: 265

基本示例

最基本的列表组是一个无序的列表，其中包含列表项和适当的类。在它的基础上使用下面的选项，或者根据需要使用您自己的CSS。

An item A second item A third item A fourth item And a fifth one An item A second item A third item A fourth item And a fifth one 活动项目

将.active加到.list-group-item指示当前的活动状态。

An active item A second item A third item A fourth item And a fifth one An active item A second item A third item A fourth item And a fifth one 禁用项目

将.disabled加到.list-group-item使其呈现禁用。请注意，一些带有.disabled的元素还需要自定义JavaScript才能完全禁用其点击事件（例如：链接）。

A disabled item A second item A third item A fourth item And a fifth one A disabled item A second item A third item A fourth item And a fifth one 链接和按钮

使用a或button，并加入.list-group-item-action来创建具有hover、禁用和启用状态的动态列表群组。我们分离这些伪类别，以确保由非交互元素组成的列表群组（如li或div）不提供点击或触击。

确保不要在这里使用标准的.btn。

The current link item A second link item A third link item A fourth link item A disabled link item The current link item A second link item A third link item A fourth link item A disabled link item

对于button，你也可以使用disabled属性而不是.disabled class。不幸的是，a不支持disabled属性。

The current button A second item A third button item A fourth button item A disabled button item 移除边框及圆角

加入.list-group-flush来移除部分边框及圆角，以在父容器中（如：卡片）产生边缘贴齐的列表群组。

An item A second item A third item A fourth item And a fifth one An item A second item A third item A fourth item And a fifth one 编号

添加.list group numbered修饰符类（并可选地使用ol元素）以选择编号的列表组项。数字是通过CSS生成的（与ol的默认浏览器样式相反），以便更好地放置在列表组项目中，并允许更好的自定义。

数字由ol上的counter reset生成，然后在li上用 ::before 元素设置样式并放置在counter increment和content中。

Cras justo odio Cras justo odio Cras justo odio Cras justo odio Cras justo odio Cras justo odio

这些对自定义内容也很有用。

Subheading Cras justo odio 14 Subheading Cras justo odio 14 Subheading Cras justo odio 14 Subheading Cras justo odio 14 Subheading Cras justo odio 14 Subheading Cras justo odio 14 水平

加入.list-group-horizontal可以将列表群组在所有断点的排版从垂直更改为水平。或者选择加入响应式变化.list-group-horizontal-{sm|md|lg|xl|xxl}，使列表群组从该断点的最小min-width开始水平放置。目前水平列表群组不能与Flush列表群组合并使用。

进阶应用：想要一个水平、等宽的列表群组吗？将.flex-fill加入到每个列表群组项目即可。

An item A second item A third item An item A second item A third item An item A second item A third item An item A second item A third item An item A second item A third item An item A second item A third item An item A second item A third item An item A second item A third item An item A second item A third item An item A second item A third item An item A second item A third item An item A second item A third item 背景和颜色

使用情境式Class来设计具有状态背景和颜色的列表项目。

A simple default list group item A simple primary list group item A simple secondary list group item A simple success list group item A simple danger list group item A simple warning list group item A simple info list group item A simple light list group item A simple dark list group item A simple default list group item A simple primary list group item A simple secondary list group item A simple success list group item A simple danger list group item A simple warning list group item A simple info list group item A simple light list group item A simple dark list group item

情境式Class也可用于.list组项操作。请注意，这里添加了上一个示例中没有的悬停样式。还支持.active状态；应用它以指示情境式列表组项上的活动选择。

Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the .visually-hidden class.

带徽章

透过某些通用类别，向任何列表项目添加标签以显示未读计数、活动等。

A list item 14 A second list item 2 A third list item 1 A list item 14 A second list item 2 A third list item 1 自定义内容

透过flexbox通用类别，几乎任何的HTML都能加入到项目内，如以下的列表群组连接。

List group item heading 3 days ago

Some placeholder content in a paragraph.

And some small print. List group item heading 3 days ago

Some placeholder content in a paragraph.

And some muted small print. List group item heading 3 days ago

Some placeholder content in a paragraph.

And some muted small print. List group item heading 3 days ago Some placeholder content in a paragraph. And some small print. List group item heading 3 days ago Some placeholder content in a paragraph. And some muted small print. List group item heading 3 days ago Some placeholder content in a paragraph. And some muted small print. 复选框和单项按钮

将Bootstrap的复选框与单选框放在列表群组中，并依据需要进行自定义。您可以在不使用label的情况下使用它们，但请记住要包含aria-label以及必要的内容。

First checkbox Second checkbox Third checkbox Fourth checkbox Fifth checkbox First checkbox Second checkbox Third checkbox Fourth checkbox Fifth checkbox

除此之外，如果您希望将label作为.list-group-item使用以创造较大的点击区域，这么做是可以的。

First checkbox Second checkbox Third checkbox Fourth checkbox Fifth checkbox Sass Variables $list-group-color: $gray-900; $list-group-bg: $white; $list-group-border-color: rgba($black, .125); $list-group-border-width: $border-width; $list-group-border-radius: $border-radius; $list-group-item-padding-y: $spacer / 2; $list-group-item-padding-x: $spacer; $list-group-item-bg-scale: -80%; $list-group-item-color-scale: 40%; $list-group-hover-bg: $gray-100; $list-group-active-color: $component-active-color; $list-group-active-bg: $component-active-bg; $list-group-active-border-color: $list-group-active-bg; $list-group-disabled-color: $gray-600; $list-group-disabled-bg: $list-group-bg; $list-group-action-color: $gray-700; $list-group-action-hover-color: $list-group-action-color; $list-group-action-active-color: $body-color; $list-group-action-active-bg: $gray-200; Mixins

Used in combination with $theme-colors to generate the contextual variant classes for .list-group-items.

@mixin list-group-item-variant($state, $background, $color) { .list-group-item-#{$state} { color: $color; background-color: $background; &.list-group-item-action { &:hover, &:focus { color: $color; background-color: shade-color($background, 10%); } &.active { color: $white; background-color: $color; border-color: $color; } } } } Loop

Loop that generates the modifier classes with the list-group-item-variant() mixin.

// List group contextual variants // // Add modifier classes to change text and background color on individual items. // Organizationally, this must come after the `:hover` states. @each $state, $value in $theme-colors { $list-group-background: shift-color($value, $list-group-item-bg-scale); $list-group-color: shift-color($value, $list-group-item-color-scale); @if (contrast-ratio($list-group-background, $list-group-color) ... ... ... ... 通过JavaScript

通过JavaScript启用可选的列表项目（每个列表项目需要单独启动）：

var triggerTabList = [].slice.call(document.querySelectorAll('#myTab a')) triggerTabList.forEach(function (triggerEl) { var tabTrigger = new bootstrap.Tab(triggerEl) triggerEl.addEventListener('click', function (event) { event.preventDefault() tabTrigger.show() }) })

您可以透过以下几种方式启动个别列表项目：

var triggerEl = document.querySelector('#myTab a[href="#profile"]') bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name var triggerFirstTabEl = document.querySelector('#myTab li:first-child a') bootstrap.Tab.getInstance(triggerFirstTabEl).show() // Select first tab 淡入效果

要使页签面板淡入淡出，请将.fade添加到每个.tab-pane中。第一个页签面板还必须具有.show使初始内容可见。

... ... ... ... 方法构造器

启动列表项目元素和内容容器。页签应该有一个data-bs-target或href定位在DOM中的一个容器节点。

Home Profile Messages Settings ... ... ... ... var firstTabEl = document.querySelector('#myTab a:last-child') var firstTab = new bootstrap.Tab(firstTabEl) firstTab.show() 显示

选择给定的列表项目并显示其关联的pane。而先前选择的任何其他列表项目将被取消，并使其关联的pane隐藏。在Tab pane显示之前回传给调用者（例如，在shown.bs.tab事件发生之前）。

var someListItemEl = document.querySelector('#someListItem') var tab = new bootstrap.Tab(someListItemEl) tab.show() 销毁

销毁元素的选项卡。

获取实例

Static方法可以使您获取与DOM元素相关联的实例。

var triggerEl = document.querySelector('#trigger') var tab = bootstrap.Tab.getInstance(triggerEl) // Returns a Bootstrap tab instance 事件

当显示新分页时，事件按以下顺序触发：

hide.bs.tab （在当前启用的页签上） show.bs.tab （在准备启用的页签上） hidden.bs.tab （在先前启用的页签上，与hide.bs.tab事件相同）) shown.bs.tab （在刚刚显示的页签上，与show.bs.tab事件相同）

如果没有选项启用，则hide.bs.tab和hidden.bs.tab事件将不被触发。

Event type Description 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分别定位先前启用的页签和新启用的页签。 var tabEl = document.querySelector('a[data-bs-toggle="list"]') tabEl.addEventListener('shown.bs.tab', function (event) { event.target // newly activated tab event.relatedTarget // previous active tab })

【本文地址】

公司简介

联系我们