안녕하세요. 이번에는 BootStrap 를 다운받아서 HTML 페이지에서 이를 적용후 화면출력까지 해보려 합니다. 저와같이 따라오시면 누구든지 할수 있습니다. 두려워 하지 마시고 시작해보시기를 권합니다.
부트 스트랩 사이트 사이트 접속(http://getbootstrap.com/) 후 부트스트랩 다운로드 클릭.
여기서 최종 버전은 4.0 Ver 이지만 Beta 상태라 V3.3.7 버전을 다운 받도록 합니다.
파일을 다운받으시면 bootstrap-3.3.7-dist.zip 형태의 파일을 다운 받아져 있습니다.해당 파일 압축을 풉니다. 저는 D드라이브에 Bootstrap 폴더를 만들고 압축 푼 파일을 옴기고 Test.html파일을 하나 만들었습니다.
test.html 파일을 노트패드로 열어서 수정을 합니다.
<!DOCTYPE html><html lang="en"> <head></head> <body></body></html>
이후 구문을 추가합니다.
참조 경로 및 Input Box 하나 추가를 하였습니다.
<!DOCTYPE html><html lang="en"> <head> <link rel="stylesheet" href="css/bootstrap.css" />
<script src="js/bootstrap.min.js" type="javascript"></script>
</head> <body> <div class="container">
<div class="row">
<div class="col-xs-3">
ID
</div>
<div class="col-xs-9">
<input type="text" class="form-control" />
</div>
</div>
</div>
</body></html>
재대로 경로를 찾지못해서 Bootstrap 를 사용하지 못하는 화면
정상적으로 적용이 된 화면으로 TextBox 형태가 바뀌었습니다.
너무 쉽습니다. 환경설정이 끝났습니다. 이제 BootStrap를 활용해서 기존 반응형이 아닌 화면을 반응형으로 바꾸어 보도록 하겠습니다. 감사합니다.
'프로그래밍 > BootStrap' 카테고리의 다른 글
| 반응형 웹 프레임워크 BootStrap 기본 개념의 이해. (0) | 2017.09.14 |
|---|---|
| TouchSpin 컨트롤의 버튼 클릭 이벤트 주는 방법 (1) | 2016.03.08 |
