본문 바로가기

프로그래밍/BootStrap

부트 스트랩 (BootStrap) 다운로드 및 설치 , 간단한 적용 테스트 안녕하세요. 이번에는 BootStrap 를 다운받아서 HTML 페이지에서 이를 적용후 화면출력까지 해보려 합니다. 저와같이 따라오시면 누구든지 할수 있습니다. 두려워 하지 마시고 시작해보시기를 권합니다. 부트 스트랩 사이트 사이트 접속(http://getbootstrap.com/) 후 부트스트랩 다운로드 클릭. 여기서 최종 버전은 4.0 Ver 이지만 Beta 상태라 V3.3.7 버전을 다운 받도록 합니다. 파일을 다운받으시면 bootstrap-3.3.7-dist.zip 형태의 파일을 다운 받아져 있습니다.해당 파일 압축을 풉니다. 저는 D드라이브에 Bootstrap 폴더를 만들고 압축 푼 파일을 옴기고 Test.html파일을 하나 만들었습니다. test.html 파일을 노트패드로 열어서 수정을 합니다... 더보기
반응형 웹 프레임워크 BootStrap 기본 개념의 이해. BootStrap 이란? 부트스트랩은 반응형이며 모바일 우선인 웹프로젝트 개발을 위한 가장 인기있는 HTML, CSS, JS 프레임워크입니다. Bootstrapk.com에서 정리된 부트스트랩에 대한 요약 내용 입니다. 참고하시면 도움이 될듯합니다. 행은 반드시 적절한 정렬과 패딩을 위해서 .container (fixed-width) 나 .container-fluid (full-width) 안에 위치해야 합니다. 열들의 수평그룹을 만드는데 행을 이용하세요. 콘텐츠는 열안에 위치해야 합니다. 그리고 열들만이 행의 바로 아래에 올 수 있습니다. .row 과 .col-xs-4 같은 사전정의된 그리드 클래스들은 간편하게 그리드 레이아웃 만드는 것을 가능하게 합니다. Less 믹스인은 좀 더 시멘틱한 레이아웃을 위.. 더보기
TouchSpin 컨트롤의 버튼 클릭 이벤트 주는 방법 TouchSpin 이라는 Bootstrap 의 사용자 컨트롤을 사용할때 아래와 같은 + 버튼 클릭시 수치값은 자동 증가합니다. 하지만 자동 증가하는 수치값에 따른 계산식이 변경될때 이벤트를 줘야 하는데 해당 이벤트는 아래와 같습니다. 12345678910111213141516$("#txtTest").TouchSpin({ min: 0, max: 1000, step: 0.1, decimals: 2, boostat: 5, maxboostedstep: 10 }).on('touchspin.on.startspin', function () { TEST(); }); function TEST(){ alert('test');}Colored by Color Scriptercs 이와같이 이벤트를 줄수 있습니다. TouchSp.. 더보기