기본 콘텐츠로 건너뛰기

Bootstrap 사용법


매번 테스트 하나 할때마다
화면 만드는거 때문에 귀찮았는데,
간단한 테스트 화면 만들기에는 딱인듯.
css 랑 js만 있어서 쓰기도 편하고 ㅎ
html5의 app cache하고 같이쓰면 앞으로 좀 더 유행하지 할 것 같은 느낌은 개인적은 느낌. ㅎㅎㅎ

css하고 js라 사실 간단하다.
http://twitter.github.com/bootstrap/index.html 여기서 원본 보시고, ㅎ
영어 읽기 귀찮으면 이거 계속 보는거고 ^^;;

2. Grid system
이게 사실 핵심인거 같은데, div 사이즈 조절하기가 겁나 편해졌다.


이미지
<div class="container">
   <div class="row">
     <div class="span3"/> <!-- 왼쪽 사이드메뉴 영역 -->
     <div class="span9">  <!-- 오른쪽 바디 -->
        <div class="span2"/> <!-- 폼1-->
        <div class="span2"/> <!-- 폼2-->
        <div class="span2"/> <!-- 폼3-->
        <div class="span2"/> <!-- 폼4-->
     </div>
   </div>
 </div>
일반적으로 container를 가장 상위에 쓰는데 이놈은 span12사이즈로 정해져있다.
그래서 이놈을 3과 9로 구분한 다음에
남은 9안에다가 폼 4개를 넣어야 되서
각 2사이즈씩 넣어줬다.
1이 남았는데,
바디 오른쪽에 네번째 폼이 다른 부분보다 여백이 좀 더 많은데,
바로 그부분이다.

3. 화면 기본 요소 (table, form, button..)
화면에서 가장 빈번하게 사용되는 요소들이다.
부트스트랩에서는 이부분도 꽤나 신경을 써줬다.
일단 기본적으로 디자인은 적용되어있고,
사이즈 조절은 grid system을 적용하여 유연하게 사용할 수 있다.
btnspan
버튼의 경우 7가지 색이 기본적으로 제공된다. 따로 디자인입힌 버튼만 아니라면  이정도면 충분하지 않나 싶다. ㅎ
btncolor
요런 것들 때문에 기본적으로 요소들 위치만 잘잡고 사이즈만 적당히 조절하면 간단한 화면은 이쁘게 나올 수 있다.
4.  Component(navbar, modal)
기본요소들 말고도 화면을 좀더 풍성 하게 해줄 만한것들이 이것저것 많다.
쓰는 방법은  css 추가하고 해당 js 추가 하면 된다.
간단하다. ㅎ
그래서 오히려 여기서 설명하는것보다
가서 한번 훑어보는게 훨 좋을 것 같아
마무리는 여기서 하시는는 걸로. ㅎ

5. Bootstrap 관련 사이트 
 무료 테마 : http://bootswatch.com/
 흔하지 않은 아이콘 모음 : http://aristeides.com/elusive-iconfont/index.html

라벨:

댓글

댓글 쓰기

이 블로그의 인기 게시물

메일서버가 스팸으로 취급받을때

설치한 메일서버를 통해 발송되는 메일이 스팸으로 들어가는 경우가 더러 있다. 이게 한번 들어가기는 쉬운데, 빠져나오기는 드럽게 힘든것 같다... 본인의 경우에는 우선 국내서비스에는 별 무리 없이 들어간다. (naver,daum 등) 그런데 해외메일 그중 Gmail, Hotmail 에는 에누리없이 스팸으로 간주되고 있었다. Gmail같은 경우에는 그래도 스팸함으로 발송은 제대로 되는반면에 Hotmail같은경우에는 아예 수신자체가 안되는 경우도 더러있다.. ㅡ,.ㅡ; 제일 좋은 방법은 Gmail,Hotmail에 전화걸어서 우리 메일서버 IP white Ip로 등록해달라!!! 하면 좋지만, 얘네들은 걸어봤자 자동응답기고, 문의채널은 구글 그룹스 게시판이 전부다.. 본론으로 들어가서. 해외 메일이 차단될 경우 내 매일서버ip가 스팸ip로 등록되 버린 경우일 수 있다. (본인처럼. ㅎ) 이것부터 조회 해보고 싶으면 RBL(real-time blocking List) 체크를 해야 하는데, RBL체크 해주는 사이트는 꽤 많이 있고, 그중 좀 깔끔해 보이는곳 하나 소개. http://www.anti-abuse.org/ 메일서버ip 입력하고 조회해보면 쭈루룩 리스트가 나온다. 그 중 빨간불이 들어온 부분이 메일 서버가 스팸서버가 된 각종 이유들이다.ㅋ 본인의 경우 CBL 때문에 걸렸는데, 내용은 아래와 같다. This IP address is HELO'ing as  "localhost.localdomain"  which violates the relevant standards (specifically: RFC5321). 메일서버 도메인에 별다른 작업을 안해놓아서 "localhost.localdomain" 으로 설정되어있었다. 만약 CBL만 바로 테스트 해보고 싶으면 http://cbl.abusea...
댓글 4개
자세한 내용 보기

[javascript] 특정시간에만 함수 실행

특정시간에만 팝업을 띄우려면?? 특정시간에만 로그인을 막으려면?? 특정시간에만 할일은 의외로 참 많다. 방법? 딱히 없다. 현재시간 구해서 시작시간, 종료시간 사이에 있을때 시작하는 수밖엔. if ((현재시간 > 시작시간) && (현재시간 < 종료시간)){ .. 팝업노출(); 공사페이지 리다이렉트(); 기타등등(); .. } 자바스크립트로 작성하면 다음과 같다. var startdate = "2014012008" ; var enddate = "2014012418" ; var now = new Date (); //현재시간 year = now. getFullYear (); //현재시간 중 4자리 연도 month = now. getMonth () + 1 ; //현재시간 중 달. 달은 0부터 시작하기 때문에 +1 if ((month + "" ). length < 2 ){ month = "0" + month; //달의 숫자가 1자리면 앞에 0을 붙임. } date = now. getDate (); //현재 시간 중 날짜. if ((date + "" ). length < 2 ){ date = "0" + date; } hour = now. getHours (); //현재 시간 중 시간. if ((hour + "" ). length < 2 ){ hour = "0" + hour; } today = year + "" + month + "" + date + "" + hour; //오늘 날짜 완성. / / 시간비교 i...
댓글 6개
자세한 내용 보기

[spring] 인터셉터 와 필터

스프링에서 전후처리기(?)를 담당하는 인터셉터 와   필터 라는게 있다.  둘다 알고 계신 훌륭한 개발자 분들도 많으시겠지만 ㅋ  본인처럼 인터셉터만 알고 있는 경우에는  가볍게라도 필터에 대해서 알아두시라고 몇자 적어 본다. ㅎ  사실  기능만 보면  인터셉터와 필터는  무척 비슷해 보인다.  게다가 filter로 해야 되는 일들은  사실   interceptor로 해결할 수 있는 듯 하다.  (적어도 본인이 하고 있는 프로젝트에서는.. ㅋ) 구글 창에다가  'difference interceptor and filter' 의 검색결과가 여러페이지 나오는 걸 보면 많은 사람들이 궁금해 하는게  다 이러한 이유인것 같다.  본론으로 들어가서  우선 인터셉터 설정파일을 보면  < mvc:interceptors > < mvc:interceptor > < mvc:mapping path = "/api1/*" /> < mvc:mapping path = "/api2/*" /> < mvc:mapping path = "/api3/*" /> < bean class = "com.changpd.test.interceptor.인터셉터클래스" /> </ mvc:interceptor > </ mvc:interceptors > 보통 이런식으로 선언 되어있을듯 하다.  해석은  api1,2,3 호출되기전에 인터셉터클래스를 먼저 호출하겠다.  뭐 이런...
댓글 7개
자세한 내용 보기