40일차: Bootstrap 적용 2021.08.09

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>

 

[결과]