반응형
Dropdowns 사용 방법
https://getbootstrap.com/docs/5.0/components/dropdowns/
Dropdowns
Toggle contextual overlays for displaying lists of links and more with the Bootstrap dropdown plugin.
getbootstrap.com
드롭다운의 구조
아래와 같이 class 명을 선언해주어서 적용 시킨다.
List group 사용 방법
https://getbootstrap.com/docs/5.0/components/list-group/
List group
List groups are a flexible and powerful component for displaying a series of content. Modify and extend them to support just about any content within.
getbootstrap.com
리스트의 기본 구조
아래와 같이 class 이름을 선언해주어서 적용 시켜준다.
활성화 시킬 경우에는 active를 클래스명에 추가해주고
<li class="list-group-item active" aria-current="true">An active item</li>비활성화 시켜줄 경우에는 disabled를 클래스명에 추가 해준다.
aria-disabled="true" 는 웹 접근성을 위해서 추가해준것이니 필요가 없으면 추가 안해도 된다.
<li class="list-group-item disabled" aria-disabled="true">A disabled item</li>hover 효과를 주기 위해서는 클래스 명에 list-group-item-action 를 추가해준다.
<button type="button" class="list-group-item list-group-item-action">A fourth button item</button>
예제
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous">
</script>
<title>Document</title>
</head>
<body>
<ul class="list-group">
<!-- 3번째 항목까지 hover 효과를 준다. list-group-item-action -->
<li class="list-group-item list-group-item-action">An item</li>
<!-- 선택되었을 때의 효과를 추가해준다. -->
<li class="list-group-item list-group-item-action active">A second item</li>
<li class="list-group-item list-group-item-action">A third item</li>
<!-- 비활성화 시켜주었다. -->
<li class="list-group-item disabled">A fourth item</li>
<li class="list-group-item">And a fifth one</li>
</ul>
</body>
</html>
반응형
'프론트엔드 > Bootstrap' 카테고리의 다른 글
| 부트 스트랩 - Components 사용 방법 (Tooltips) (0) | 2021.06.29 |
|---|---|
| 부트 스트랩 - Components 사용 방법 (Modal) (0) | 2021.06.28 |
| 부트 스트랩 - Forms 사용 방법 (0) | 2021.06.28 |
| 부트 스트랩 - Components 사용 방법 (Button) (0) | 2021.06.28 |
| 부트 스트랩 시작 (0) | 2021.06.28 |
