HTML & CSS
40일차: Bootstrap 적용 2021.08.09
wellow
2021. 8. 9. 21:27
1. Bootstrap 예제
- W3Schools (www.w3schools.com)에서 제공하는 CSS Bootstrap 예제들을 활용할 수 있다.
- 경로: W3School 메인에서 메뉴바의 ‘References’ > CSS에서 ‘Bootstrap4 Reference’ 클릭
<예시>
• 버튼
- References > Bootstrap 4 Reference > BS4 Buttons
① Button Styles → ★button01.html 참고
[코드]
<button type="button" class="btn">Basic</button>
<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-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-link">Link</button>
[결과]
② Button Outline → ★button02.html 참고
[코드]
<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-dark">Dark</button>
<button type="button" class="btn btn-outline-light text-dark">Light</button>
[결과]
