부트스트랩 목록 그룹


이 장에서는 목록 그룹에 대해 설명합니다. 목록 구성 요소는 복잡한 사용자 정의 콘텐츠를 목록 형식으로 표시하는 데 사용됩니다. 기본 목록 그룹을 생성하는 단계는 다음과 같습니다.

  • 클래스 .list-group을 요소 <ul>에 추가합니다.

  • <li>에 클래스 .list-group-item을 추가하세요.

다음 예에서는 이를 보여줍니다.

Instance

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 实例 - 基本的列表组</title>
	<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
	<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<ul class="list-group">
	<li class="list-group-item">免费域名注册</li>
	<li class="list-group-item">免费 Window 空间托管</li>
	<li class="list-group-item">图像的数量</li>
	<li class="list-group-item">24*7 支持</li>
	<li class="list-group-item">每年更新成本</li>
</ul>


</body>
</html>

인스턴스 실행»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요

목록 그룹에 배지 추가

추가할 수 있습니다 목록 항목에 배지 구성 요소를 추가하면 자동으로 오른쪽에 배치됩니다. <li> 요소에 <span class="badge">를 추가하면 됩니다. 다음 예는 이를 보여줍니다.

Instance

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 实例 - 向列表组添加徽章</title>
	<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
	<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<ul class="list-group">
	<li class="list-group-item">免费域名注册</li>
	<li class="list-group-item">免费 Window 空间托管</li>
	<li class="list-group-item">图像的数量</li>
	<li class="list-group-item">
		<span class="badge">新</span>
		24*7 支持
	</li>
	<li class="list-group-item">每年更新成本</li>
	<li class="list-group-item">
		<span class="badge">新</span>
		折扣优惠
	</li>
</ul>


</body>
</html>

인스턴스 실행»

온라인 예를 보려면 "인스턴스 실행" 버튼을 클릭하세요.

목록 그룹에 링크 추가

대신 앵커 태그 사용 목록 항목 중 목록 그룹에 대한 링크를 추가할 수 있습니다. <ul> 요소 대신 <div>를 사용해야 합니다. 아래 예는 이를 보여줍니다.

결과는 다음과 같습니다.

Instance

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 实例 - 向列表组添加链接</title>
	<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
	<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<a href="#" class="list-group-item active">
	免费域名注册
</a>
<a href="#" class="list-group-item">24*7 支持</a>
<a href="#" class="list-group-item">免费 Window 空间托管</a>
<a href="#" class="list-group-item">图像的数量</a>
<a href="#" class="list-group-item">每年更新成本</a>


</body>
</html>

인스턴스 실행»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.

목록에 사용자 정의 콘텐츠 추가 group

위의 연결 목록 그룹에 임의의 HTML 콘텐츠를 추가할 수 있습니다. 다음 예에서는 이를 보여줍니다.

Instance

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 实例 - 向列表组添加自定义内容</title>
	<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
	<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="list-group">
	<a href="#" class="list-group-item active">
		<h4 class="list-group-item-heading">
			入门网站包
		</h4>
	</a>
	<a href="#" class="list-group-item">
		<h4 class="list-group-item-heading">
			免费域名注册
		</h4>
		<p class="list-group-item-text">
			您将通过网页进行免费域名注册。
		</p>
	</a>
	<a href="#" class="list-group-item">
		<h4 class="list-group-item-heading">
			24*7 支持
		</h4>
		<p class="list-group-item-text">
			我们提供 24*7 支持。
		</p>
	</a>
</div>
<div class="list-group">
	<a href="#" class="list-group-item active">
		<h4 class="list-group-item-heading">
			商务网站包
		</h4>
	</a>
	<a href="#" class="list-group-item">
		<h4 class="list-group-item-heading">
			免费域名注册
		</h4>
		<p class="list-group-item-text">
			您将通过网页进行免费域名注册。
		</p>
	</a>
	<a href="#" class="list-group-item">
		<h4 class="list-group-item-heading">24*7 支持</h4>
		<p class="list-group-item-text">我们提供 24*7 支持。</p>
	</a>
</div>

</body>
</html>

인스턴스 실행 »

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요