웹마스터 팁
부트스트랩 툴팁 , 팝오버 TIP
2014.11.17 15:25
부트스트랩 다들 아실거라 생각하고 ..
모르시는분들은 : http://bootstrapk.com/
반응형웹에 천재상을 받은 부트스트랩..
여기서 부트스트랩 js 파일이 존재하는데 호출을 하였음에도 불구하고
툴팁 또는 팝오버가 실행되지 않으시는분은 해당 사이트에 메뉴얼을 놓치신겁니다.
<!--부트스트랩-->
<script src="./bootstrap.min.js"></script>
<link rel="stylesheet" href="./bootstrap.min.css" type="text/css" rel="stylesheet">
이와같이 호출을 하고서 그후에 스크립트는 들어있지만 속성값을 선언해줘야 된다는 메뉴얼대로
<script type="text/javascript">
$(document).ready(function(){
$(".popover-top").popover({trigger: 'hover click','placement': 'top'});
});
</script>
위와같이 해당 페이지 또는 상단 스크립트라인에 넣어주시고
(클래스를 보시면 popover-top으로 되어있고 오버 또는 클릭시 이벤트가 들어가있습니다.)
<a href="#" class="btn btn-info" data-toggle="popover-top" data-content="설명글" title="제목">버튼명</a>코드 사용시 버튼을 예로 들었는데요
data-toggle 이란 부트스트랩에 기초 스크립트 사용방법입니다.
자신이 사용할 스크립트를 적는거죠. 만약 저 부분에 툴팁이나 모달을 넣으시면 작동됩니다.
(단, 메뉴얼대로 스크립트를 지정해줘야하며 모달경우는 따로 페이지에 ID를 지정해줘야됩니다.)
popover-top 클래스는 제가 임의로 넣은거니 사용시와 스크립트코드 지정시에 알맞게 하시면됩니다.
제가 top을 예로 든건데 스크립트 맨 우측에 보면 top으로 지정되어있습니다.
즉. 마우스 클릭시 위로 팝오버가 뜨게 됩니다.
페이스북 클릭시 나오는 팝오버
반응형 , 웹표준 , 안드로이드앱 기타 등등 제작지원
댓글 0
| 제목 | 글쓴이 | 날짜 |
|---|---|---|
플래시 컨트럴 활성화하라는 메시지 없애기
[4]
 | 달구벌 | 2008.04.08 |
| 외부페이지에서 매개변수 사용하기 [2] | JnCsoft | 2008.04.07 |
| 사각박스 코너를 이미지없이 둥글게 만드는법 [5] | 느까끼 | 2008.04.07 |
|
최근 이미지 목록 + 라이트박스
[6]
| 베니 | 2008.04.04 |
| 플래시로 페이지에 랜덤 이미지 돌리기 [3] | ☜ TeRy ☞ | 2008.04.04 |
|
환율 계산 팝업창 띄우기
[9]
| RainSky | 2008.04.03 |
|
게시판을 외부레이아웃에 넣기
[4]
| 박봉수610 | 2008.04.03 |
| 갓난아기 상태의 제로보드 유저를 위한 팁. [2] | font | 2008.04.01 |
|
카테고리부분의 너비조절하기
[3]
| gajagu | 2008.04.01 |
| 탭 형태 문서출력에서 목록수 지정하기. [3] | Zerode | 2008.03.31 |
| 양력/음력DB 홈페이지에 사용하기 [2] | 감뿌리 | 2008.03.29 |
| 로그인풀림방지 - 자동 www 붙이는 다른 방법 [23] | RainSky | 2008.03.28 |
| 사이트 주소로 접속했을때 XE폴더로 이동하기 #2 [15] | 베니 | 2008.03.28 |
|
''권한이 없습니다'' 라는 문구를 조금 더 부드럽게 바꾸기
[3]
| RainSky | 2008.03.21 |
|
좁은폭의 레이아웃을 쓰시는 분들을 위하여 (게시판 제목부분 깔끔하게 만들기)
[5]
| gajagu | 2008.03.20 |
| 상담/신청 (쓰기만 가능한 게시판) 만들기 [10] | mmx900 | 2008.03.20 |
|
업데이트 후 댓글 입력 창이 안 나올때...(댓글 에디터)
| 수지보더 | 2008.03.20 |
| 로그인 풀림현상 원인 파악 [3] | 남국 | 2008.03.19 |
| 플래시 Embed패치(이올라스) 충돌에 의한 파일첨부버튼 해결법 [2] | Guns | 2008.03.18 |
| 큰 파일의 썸네일이 안생길때 해결방법-추가 [7] | HIKARU | 2008.03.18 |