BOOTSTRAP

BOOTSTRAP

• Semantic UI와 함께 레이아웃 제작에 도움이 되는 CSS FRAMEWORK이다.

사용법

1. 먼저 BOOTSTRAP 사이트에 들어가 소스 파일을 다운받고, 사용하고자 하는 디렉토리에 다운로드 받은 파일의 압축을 푼다. 링크
2. 다음으로, 디렉토리의 위치를 잘 파악하고, 해당 다운로드 받은 파일 내의 bootstrap.css 와 bootstrap.js 파일에 접근할 수 있도록 주소를 연결해준다.
3. Semantic UI의 홈페이지에 들어가서 해당 요소의 사용법과 예시를 찾아보고, 해당 코드를 가져와서 사용한다.

<div class="mb-3">
  <label for="formGroupExampleInput" class="form-label">Example label</label>
  <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input placeholder">
</div>
<div class="mb-3">
  <label for="formGroupExampleInput2" class="form-label">Another label</label>
  <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input placeholder">
</div>

4. Semantic UI 사용법과 마찬가지로 동적으로 작동하는 요소를 동작시키고 싶다면, 자바스크립트 코드를 추가하여 사용한다.