본문 바로가기

bootstrap4

[bootstrap] Bootstrap 이용하기 04 (170406) Bootstrap 이용하기 04 bootstrap을 이용한 navigation bar- jquery를 이용한 nav ** 출력 결과 ** - bootstrap을 이용한 nav - 훨씬 편리하게 tab을 만들 수 있다. - 탭의 클래스로 nav, nav-tabs 와 하위 a 요소에 data-toggle="tab" 을 준다. - contents에 tab-content 와 하위 div에 tab-pane를 주고 로딩 후 첫 화면에 띄울 요소인 id="one"인 div에 active를 준다. ** 실행 결과 ** - bootstrap nav의 class속성- nav-justified : nav의 li가 비율에 맞게 꽉차게 나타난다.- nav-pills : 버튼 형태의 nav를 생성한다.- nav-stacked :.. 2017. 4. 6.
[bootstrap] Bootstrap 이용하기 03 (170405) Bootstrap 이용하기 03 HelperClass 이용하기- 글자의 색상 지정(text-muted, text-primary, text-success, text-info, text-warning, text-danger)- 배경 색상 지정(bg-primary, bg-success, bg-info, bg-warning, bg-danger)- 닫는 아이콘(close)- float에 관련된 class(pull-left, pull-right, clearfix)- 가운데 블록 시키기(center-block) ** 출력 결과 ** Code 관련 요소 이용하기- , , 이용이 가능하다. ** 출력 결과 ** FontAwesome 이용하기- http://fontawesome.io/get-started/ 에 접속하여 다.. 2017. 4. 5.
[bootstrap] Bootstrap 이용하기 02 (170405) Bootstrap 이용하기 02 Button 이용하기- 색상별로 default, primary, success, info, warning, danger이 있다.- 크기별로 btn-xs, btn-sm, btn-lg 가 있다.- btn-block을 이용해 100% 크기의 버튼을 이용할 수 있다.- Anchor 요소에 class를 줘서 버튼 스타일로 이용이 가능하다.- disabled class로 버튼 사용을 막을 수 있다.- anchor요소는 disabled와 동시에 href에 "javascript:"를 줘야 새로고침을 막는다. ** 출력 결과 ** Form 이용하기- form-group 속 input클래스로 form-control이 와야한다.- form을 가운데 정렬하거나 크기 조정을 하려면 form밖에 .. 2017. 4. 5.
[bootstrap] Bootstrap 이용하기 01 (170404) Bootstrap 이용하기 bootstrap 이용하기- CDN 사용하기 1. 홈페이지에 접속한다. (http://getbootstrap.com/) 2. http://getbootstrap.com/getting-started/ 에서 CDN을 복사한다. 3. head영역에 링크를 붙인다. 4. 사용한다! ** 출력 결과 ** - 다운로드 받아 사용하기- 다운받은 css, fonts, js를 폴더 안에 넣는다.- 로딩한다.- 사용한다! Bootstrap GridSystem 이용하기- 12칸으로 나눈 것을 기준으로 하여 일정하게 배열할 수 있도록 하는 시스템- col-xs, col-sm, col-md, col-lg를 이용한다. ＃grid system을 유용하게 사용하기 위해 768px, 992px, 1200px.. 2017. 4. 4.

티스토리툴바