테스트 사이트 - 개발 중인 베타 버전입니다
SIR

부트스트랩 List Groups -> Custom Content

수다왕
프로필 보기이 회원 글보기
 · 7년 전 · 3206
스크린샷 2017-12-04 오후 10.38.09.png
부트스트랩 List Groups -> Custom Content

목록 그룹 항목 내에 거의 모든 HTML을 추가 할 수 있습니다.

부트 스트랩은 .list-group-item-heading, list-group-item-text클래스를 제공하고 다음과 같이 사용할 수 있습니다

예
<div class="list-group">
<a href="#" class="list-group-item active">
<h4 class="list-group-item-heading">First List Group Item Heading</h4>
<p class="list-group-item-text">List Group Item Text</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">Second List Group Item Heading</h4>
<p class="list-group-item-text">List Group Item Text</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">Third List Group Item Heading</h4>
<p class="list-group-item-text">List Group Item Text</p>
</a>
</div>


[전체소스]
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
<h2>List Group With Custom Content</h2>
<div class="list-group">
<a href="#" class="list-group-item active">
<h4 class="list-group-item-heading">First List Group Item Heading</h4>
<p class="list-group-item-text">List Group Item Text</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">Second List Group Item Heading</h4>
<p class="list-group-item-text">List Group Item Text</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">Third List Group Item Heading</h4>
<p class="list-group-item-text">List Group Item Text</p>
</a>
</div>
</div>

</body>
</html>

첨부파일

스크린샷 2017-12-04 오후 10.38.09.png (40.5 KB, 1회)
목록
이전글 다음글

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

게시글 목록

번호 제목
1547
CSS 반응형 네비게이션(햄버거 메뉴) 구현
1546
CSS 스크롤 애니메이션 인터랙션
1545
CSS 이미지 비율 유지 반응형 처리
1544
CSS CSS 변수와 다크 모드 테마
1542
CSS 실무에서 자주 쓰이는 레이아웃 구성 방식 3가지
1541
CSS 반응형 웹을 위한 미디어쿼리 1
1540
CSS display 속성 완전 이해하기
1539
CSS 텍스트 말줄임(...) 처리 – text-overflow: ellipsis
1538
CSS 간단한 반응형 폰트 설정 실전 팁
1537
CSS 박스 모델 완전 이해
1535
CSS margin과 padding의 차이 완벽 이해
1534
CSS CSS 트랜지션, 웹을 살아 숨 쉬게 합니다 1
1533
CSS CSS의 기본 중의 기본: 박스 모델을 파헤쳐보자!
1532
CSS Flexbox로 레이아웃을 자유롭게
1531
CSS perspective와 transform-style: preserve-3d로 3D 공간만들기
1512
CSS 댓글 해킹 방어? & 강제 실행 방어 댓글 8
1508
CSS CSS 스위치형 버튼 4
1479
CSS 간단하게 메뉴꾸미기2 13
1478
CSS 간단하게 메뉴꾸미기 1 16
1475
반응형웹 html5 js 로 캔버스 그리기... - 사인입력 받을 때 응용하면 좋을 듯하네요
1474
반응형웹 flex 와 grid 강의... 와... 대단함다@@ 1
1460
부트스트랩 비활성화 및 활성 항목 2
1459
부트스트랩 드롭 다운 헤더 7
1458
부트스트랩 드롭 다운 분배기 2
1457
부트스트랩 부트 스트랩 드롭 다운
1456
부트스트랩 패널 바닥 글, 패널 그룹
1455
부트스트랩 부트스트랩 패널 제목
1454
부트스트랩 부트스트랩 panel
1453
부트스트랩 부트스트랩 List Groups -> Custom Content 현재글
1452
부트스트랩 부트스트랩 List Groups -> Contextual Classes
다음
전체 목록