English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Bootstrap4 기본 가이드

Bootstrap4 목록 그룹

목록 그룹은 매우 유용하고 유연한 컴포넌트로, 요소 목록을 아름다운 방식으로 표시하는 데 사용됩니다. 가장 기본적인 형태에서 목록 그룹은 단지 .list를 가지고 있습니다.-group 클래스의 불순서 목록이며, 목록 항목은 .list를 가집니다。-group-item 클래스。

大部分基础列表组都是无序的。

要创建列表组，可以在 <ul> 元素上添加 .list-group 类, 在 <li> 元素上添加 .list-group-item 类:

<!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　示例</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width,　initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js">/script>
</head>
<body>
<div class="container">
　　<h2>基础列表组</h2>
　　<ul class="list-group">
　　　　<li class="list-group-item">第一项</li>
　　　　<li class="list-group-item">第二项</li>
　　　　<li class="list-group-item">第三项</li>
　　</ul>
</div>
</body>
</html>
테스트를 보세요.‹/›

运行后效果如下：

激活状态的列表项

通过添加 .active 类来设置激活状态的列表项：

<!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　示例</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width,　initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js">/script>
</head>
<body>
<div class="container">
　　<h2>激活状态的列表项</h2>
　　<ul class="list-group">
　　　　<li class="list-group-item active">Active　item</li>
　　　　<li class="list-group-item">Second　item</li>
　　　　<li class="list-group-item">Third　item</li>
　　</ul>
</div>
</body>
</html>
테스트를 보세요.‹/›

禁用的列表项

.disabled 类用于设置禁用的列表项:

<!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　示例</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width,　initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js">/script>
</head>
<body>
<div class="container">
　　<h2>禁用的列表项</h2>
　　<ul class="list-group">
　　　　<li class="list-group-item disabled">Disabled　item</li>
　　　　<li class="list-group-item">Second　item</li>
　　　　<li class="list-group-item">Third　item</li>
　　</ul>
</div>
</body>
</html>
테스트를 보세요.‹/›

链接列表项

要创建一个链接的列表项，可以将 <ul> 替换为 <div> ， <a> 替换 <li>。如果你想鼠标悬停显示灰色背景就添加.list-group-item-action 类:

<!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　示例</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width,　initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js">/script>
</head>
<body>
<div class="container">
　　<h2>链接列表项</h2>
　　<div class="list-group">
　　　　<a href="#" class="list-group-item list-group-item-action">First　item</a>
　　　　<a href="#" class="list-group-item list-group-item-action">Second　item</a>
　　　　<a href="#" class="list-group-item list-group-item-action">Third　item</a>
　　</div>
</div>
</body>
</html>
테스트를 보세요.‹/›

多种颜色列表项

列表项目的颜色可以通过以下列来设置： .list-group-item-success, list-group-item-secondary, list-group-item-info, list-group-item-warning, .list-group-item-danger, list-group-item-dark 和 list-group-item-light:

<!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　示例</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width,　initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js">/script>
</head>
<body>
<div class="container">
　　<h2>다양한 색상 목록 항목</h2>
　　<ul class="list-group">
　　　　<li class="list-group-item list-group-item-success">성공 목록 항목</li>
　　　　<li class="list-group-item list-group-item-secondary">보조 목록 항목</li>
　　　　<li class="list-group-item list-group-item-info">정보 목록 항목</li>
　　　　<li class="list-group-item list-group-item-warning">경고 목록 항목</li>
　　　　<li class="list-group-item list-group-item-danger">위험 목록 항목</li>
　　　　<li class="list-group-item list-group-item-primary">주요 목록 항목</li>
　　　　<li class="list-group-item list-group-item-dark">검은색 목록 항목</li>
　　　　<li class="list-group-item list-group-item-light">은은색 목록 항목</li>
　　</ul>
</div>
</body>
</html>
테스트를 보세요.‹/›

链接的多种颜色列表项

<!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　示例</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width,　initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js">/script>
</head>
<body>
<div class="container">
　　<h2>다양한 색상 목록 항목</h2>
　　<div class="list-group">
　　　　<a href="#" class="list-group-item list-group-item-action">활성 목록 항목</a>
　　　　<a href="#" class="list-group-item list-group-item-success">성공 목록 항목</a>
　　　　<a href="#" class="list-group-item list-group-item-secondary">보조 목록 항목</a>
　　　　<a href="#" class="list-group-item list-group-item-info">정보 목록 항목</a>
　　　　<a href="#" class="list-group-item list-group-item-warning">경고 목록 항목</a>
　　　　<a href="#" class="list-group-item list-group-item-danger">위험 목록 항목</a>
　　　　<a href="#" class="list-group-item list-group-item-primary">주요 목록 항목</a>
　　　　<a href="#" class="list-group-item list-group-item-dark">검은색 목록 항목</a>
　　　　<a href="#" class="list-group-item list-group-item-light">은은색 목록 항목</a>
　　</div>
</div>
</body>
</html>
테스트를 보세요.‹/›
Bootstrap4 카드Bootstrap4 페이지네이션