본문 바로가기

WEB기초/Bootstrap6

[bootstrap] Bootstrap 이용하기 06 (170407) Bootstrap 이용하기 06 tooltip 이용하기- tooltip은 팁이나 설명할 때 이용하기 좋다.- script로 띄우는 방향(placement), animation, 띄우는 시점(trigger)을 설정할 수 있다.- 해당 버튼의 속성값 data-placement로 띄우는 방향 설정이 가능하다.- tooltip("show"), tooltip("hide")로 trigger:"manual"(특정시점에 띄우기)의 설정을 해줄 수 있다. ** 출력 결과 ** popover 이용하기- tooltip보다 좀 더 많은 내용을 기록 가능- data-title="제목" data-content="내용" data-toggle="popover" ** 출력 결과 **Carousel 이용하기 - carousel은 회전목.. 2017. 4. 7.
[bootstrap] Bootstrap 이용하기 05 (170406) Bootstrap 이용하기 05 Panel 이용하기- panel의 색상 클래스 : panel-primary, panel-success, panel-info, panel-warning, panel-danger- panel은 panel heading, panel-body, panel-footer 로 구성된다.- panel 속에 table을 넣을 수 있다.- panel 속에 li를 넣을 수 있다.- insert효과를 well클래스로 줄 수 있다. ** 출력 결과 ** - 패널 예제- 패널 안에 크기가 유동적인 이미지를 넣기 위해서는 img-responsive 클래스를 이용한다. ** 출력 결과 ** ProgressBar 이용하기- progress-bar, progress-bar-(color속성:success,.. 2017. 4. 6.
[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.

티스토리툴바