집 > 기사 > 웹 프론트엔드 > Bootstrap 학습의 목록 그룹 구성 요소를 사용하는 방법

Bootstrap 학습의 목록 그룹 구성 요소를 사용하는 방법

青灯夜游앞으로: 2021-02-20 17:50:212030검색

이 문서에서는 Bootstrap에서 목록 그룹 구성 요소를 사용하는 방법을 보여줍니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

목록 그룹은 목록, 수직 탐색 및 기타 효과를 만드는 데 사용할 수 있으며, 더 아름다운 구성 요소를 만들기 위해 다른 구성 요소와 함께 사용할 수도 있습니다. 부트스트랩 프레임워크의 독립 구성 요소이므로 자체 독립 소스 코드도 있습니다.

LESS: list-group.less
SASS:_list-group.scss

목록 그룹은 다음과 같습니다. 목록 기호가 있는 목록은 항목을 제거하고 일부 특정 스타일을 갖추고 있습니다. 부트스트랩 프레임워크의 기본 목록 그룹은 주로 두 부분으로 구성됩니다.

list-group: 일반적으로 사용되는 목록 그룹 컨테이너는 ul 요소입니다. ol 또는 p 요소가 되십시오
list-group-item: 목록 항목은 일반적으로 li 요소 또는 p 요소입니다.

기본 목록 그룹에 대한 스타일 설정을 너무 많이 하지 않았습니다.

.list-group {
  padding-left: 0;
  margin-bottom: 20px;
}
.list-group-item {
  position: relative;
  display: block;
  padding: 10px 15px;
  margin-bottom: -1px;
  background-color: #fff;
  border: 1px solid #ddd;
}
.list-group-item:first-child {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}
.list-group-item:last-child {
  margin-bottom: 0;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
}

예를 살펴보겠습니다.

<h1>基础列表组</h1>
    <ul class="list-group">
        <li class="list-group-item">腊肉土豆焖饭</li>
        <li class="list-group-item">香辣风味炸鸡块</li>
        <li class="list-group-item">香菜皮蛋豆腐</li>
        <li class="list-group-item">荷兰豆炒马蹄</li>
        <li class="list-group-item">山楂排骨</li>
        <li class="list-group-item">韭菜炒河虾</li>
    </ul>

Bootstrap 학습의 목록 그룹 구성 요소를 사용하는 방법

배지가 있는 목록 그룹

배지가 있는 목록 그룹은 실제로 배지 구성 요소와 부트스트랩 프레임워크의 기본 목록 구성 요소는 매우 간단합니다. .list-group-item

을 기반으로 배지 구성 요소 "배지"를 추가하면 됩니다. 구현 원칙:

배지에 대한 올바른 부동을 설정합니다. 물론 두 개의 뱃지가 동시에 같은 목록 항목에 있는 경우 에 나타날 때 둘 사이의 거리도 설정됩니다. 실제로는 각 목록 항목에 링크 효과가 있다는 의미입니다. 일반적으로 사람들이 생각하는 것은 기본 목록 그룹을 기반으로 목록 항목의 텍스트에 링크를 추가하는 것입니다.

.list-group-item > .badge {
  float: right;
}
.list-group-item > .badge + .badge {
  margin-right: 5px;
}

효과는 다음과 같습니다.

Bootstrap 학습의 목록 그룹 구성 요소를 사용하는 방법

이것의 단점은 링크의 클릭 영역이 텍스트에만 있다는 것입니다. 효과적이지만 목록 항목의 모든 영역을 클릭 가능하게 만들고 싶을 때가 많습니다. link label: display: block; 그러나 부트스트랩 프레임워크에서는 다른 구현 방법이 사용됩니다. ul.list-group을 p.list-group으로 바꾸고 li.list-group-item을 a.list-group-item으로 바꾸십시오. 원하는 효과를 얻으려면.

구현 원칙:

.list-group-item을 사용하는 경우 텍스트 밑줄 제거, 플로팅 효과 추가 등 스타일을 어느 정도 처리해야 합니다. 다음은 CSS입니다. 소스 코드:

<h1>带徽章的列表组</h1>
    <ul class="list-group">
        <li class="list-group-item">
            <span class="badge">13</span>
            腊肉土豆焖饭
        </li>
        <li class="list-group-item">
            <span class="badge">20</span>
            香辣风味炸鸡块
        </li>
        <li class="list-group-item">
            <span class="badge">12</span>
            香菜皮蛋豆腐
        </li>
        <li class="list-group-item">
            <span class="badge">5</span>
            荷兰豆炒马蹄
        </li>
        <li class="list-group-item">
            <span class="badge">8</span>
            山楂排骨
        </li>
        <li class="list-group-item">
            <span class="badge">15</span>
            韭菜炒河虾
        </li>
    </ul>

list 그룹(링크 포함) 애플리케이션: Bootstrap 학습의 목록 그룹 구성 요소를 사용하는 방법

<ul class="list-group">
        <li class="list-group-item"><a href="#">腊肉土豆焖饭</a></li>
        <li class="list-group-item"><a href="#">香辣风味炸鸡块</a></li>
        <li class="list-group-item"><a href="#">香菜皮蛋豆腐</a></li>
        <li class="list-group-item"><a href="#">荷兰豆炒马蹄</a></li>
        <li class="list-group-item"><a href="#">山楂排骨</a></li>
        <li class="list-group-item"><a href="#">韭菜炒河虾</a></li>
</ul>

효과는 다음과 같습니다:

Customized list group

부트스트랩 프레임워크는 연결된 목록 그룹을 기반으로 두 가지 스타일을 추가합니다:

.list -group-item-heading: 사용 목록 항목 헤더 스타일 정의

.list-group-item-text: 목록 항목의 주요 내용을 정의하는 데 사용 Bootstrap 학습의 목록 그룹 구성 요소를 사용하는 방법

이 두 가지 스타일의 가장 큰 역할은 개발자가 목록 항목의 내용

구현 원칙:

이 두 스타일은 주로 호환되지 않는 상태에서 텍스트 색상을 제어합니다. 다음은 CSS 소스 코드입니다.

a.list-group-item {
  color: #555;
}
a.list-group-item .list-group-item-heading {
  color: #333;
}
a.list-group-item:hover,
a.list-group-item:focus {
  color: #555;
  text-decoration: none;
  background-color: #f5f5f5;
}

사용자 정의 목록 그룹 사용

<h1>带链接的列表组</h1>
    <ul class="list-group">
        <a class="list-group-item" href="#">腊肉土豆焖饭</a>
        <a class="list-group-item" href="#">香辣风味炸鸡块</a>
        <a class="list-group-item" href="#">香菜皮蛋豆腐</a>
        <a class="list-group-item" href="#">荷兰豆炒马蹄</a>
        <a class="list-group-item" href="#">山楂排骨</a>
        <a class="list-group-item" href="#">韭菜炒河虾</a>
    </ul>

列表项的状态设置

bootstrap框架中也给组合列表项提供了状态效果，特别是链接列表组，实现方法和前面介绍的组件类似，在列表组中只需在对应的列表项中添加类名：.active(表示当前状态)、.disabled（表示禁用状态）

实现原理：

在样式上主要对列表项的背景色和文本做了样式设置，下面是css源码：

.list-group-item.disabled,
.list-group-item.disabled:hover,
.list-group-item.disabled:focus {
  color: #777;
  background-color: #eee;
}

.list-group-item.active,
.list-group-item.active:hover,
.list-group-item.active:focus {
  z-index: 2;
  color: #fff;
  background-color: #428bca;
  border-color: #428bca;
}

例子：

<h1>列表组状态设置</h1>
    <ul class="list-group">
        <a class="list-group-item active">
            <h4 class="list-group-item-heading">列表1标题</h4>
            <p class="list-group-item-text">列表1内容列表1内容列表1内容列表1内容列表1内容列表1内容列表1内容列表1内容列表1内容</p>
        </a>
        <a class="list-group-item">
            <h4 class="list-group-item-heading">列表2标题</h4>
            <p class="list-group-item-text">列表2内容列表2内容列表2内容列表2内容列表2内容列表2内容列表2内容列表2内容列表2内容列表2内容列表2内容列表2内容</p>
        </a>
        <a class="list-group-item disabled">
            <h4 class="list-group-item-heading">列表3标题</h4>
            <p class="list-group-item-text">列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容</p>
        </a>
        <a class="list-group-item">
            <h4 class="list-group-item-heading">列表4标题</h4>
            <p class="list-group-item-text">列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容</p>
        </a>
        <a class="list-group-item">
            <h4 class="list-group-item-heading">列表5标题</h4>
            <p class="list-group-item-text">列表5内容列表5内容列表5内容列表5内容列表5内容列表5内容列表5内容列表5内容列表5内容列表5内容列表5内容列表5内容</p>
        </a>
        <a class="list-group-item">
            <h4 class="list-group-item-heading">列表6标题</h4>
            <p class="list-group-item-text">列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容</p>
        </a>
    </ul>

效果如下（第三个列表项是禁用状态，鼠标移放在它上面有个禁用图标，这里是直接截的图，看不到这个效果）：

Bootstrap 학습의 목록 그룹 구성 요소를 사용하는 방법

多彩列表组

列表组组件和警告组件一样，bootstrap为不同的状态提供了不同的背景色和文本色，可以使用这几个类名定义不同背景色的列表项：

.list-group-item-success:成功绿色（背景色）

.list-group-item-info:信息蓝色（背景色）

.list-group-item-warning:警告黄色（背景色）

.list-group-item-danger:错误红色（背景色）

实现原理：

这几个类名仅修改了背景色和文本色，对应的源码如下：

.list-group-item-success {
  color: #3c763d;
  background-color: #dff0d8;
}
a.list-group-item-success {
  color: #3c763d;
}
a.list-group-item-success .list-group-item-heading {
  color: inherit;
}
a.list-group-item-success:hover,
a.list-group-item-success:focus {
  color: #3c763d;
  background-color: #d0e9c6;
}
a.list-group-item-success.active,
a.list-group-item-success.active:hover,
a.list-group-item-success.active:focus {
  color: #fff;
  background-color: #3c763d;
  border-color: #3c763d;
}

其它状态样式代码请查看源码文件,如果想给列表项添加背景色，只需在类.lis-group-item的基础上追加对应的类名即可。

多彩列表组的运用：

<h1>多彩列表组</h1>

列表项1 10

效果如下：

Bootstrap 학습의 목록 그룹 구성 요소를 사용하는 방법

更多编程相关知识，请访问：编程教学！！

위 내용은 Bootstrap 학습의 목록 그룹 구성 요소를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

css bootstrap less scss display ul li

성명：

이 기사는 cnblogs.com에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제

이전 기사：Bootstrap의 패널 구성 요소에 대한 심층 분석다음 기사：Bootstrap의 패널 구성 요소에 대한 심층 분석