[Bootstrap] 버튼, 드롭다운
1. Bootstrap 버튼, 버튼 그룹
<!-- index.html -->
<body>
<!-- 버튼 그룹 -->
<div class="btn-group">
<!-- 기본 버튼 -->
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>
<!-- 아웃라인 버튼 -->
<div class="btn btn-outline-primary">ABC</div>
<div class="btn btn-outline-success">ABC</div>
<!-- 버튼 사이즈 -->
<div class="btn btn-primary btn-lg">ABC</div>
<div class="btn btn-primary btn-sm">ABC</div>
<!-- 버튼 비활성화 -->
<div class="btn btn-primary btn-lg" disabled>ABC</div>
</div>
</body>
2. Bootstrap 드롭다운, 리스트
<body>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown"
aria-expanded="false">
Dropdown button
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
<ul class="list-group">
<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 list-group-item-action">A fourth item</li>
<li class="list-group-item list-group-item-action">And a fifth one</li>
</ul>
</body>
댓글남기기