Twitter Bootstrap

JavaScript plugins

선행지식

Twitter Bootstrap의 JavaScript 플러그인은 jQuery를 기반으로 만들어졌기 때문에 일부 기능은 jQuery의 문법을 요구한다. 생활코딩의 jQuery 수업을 통해서 jQuery의 사용법을 배울 수 있다. (생활코딩 jQuery 바로가기

Modal

<!DOCTYPE html>
<html>
	<head>
		<title>Bootstrap 101 Template</title>
		<!-- Bootstrap -->
		<style>
			body {
				padding: 10px;
			}
		</style>
		<link href="css/bootstrap.min.css" rel="stylesheet">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link href="css/bootstrap-responsive.css" rel="stylesheet">
	</head>
	<body>
		<!-- Button to trigger modal -->
		<a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>

		<!-- Modal -->
		<div class="modal hide" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
					×
				</button>
				<h3 id="myModalLabel">Modal header</h3>
			</div>
			<div class="modal-body">
				<p>
					One fine body…
				</p>
			</div>
			<div class="modal-footer">
				<button class="btn" data-dismiss="modal" aria-hidden="true">
					Close
				</button>
				<button class="btn btn-primary">
					Save changes
				</button>
			</div>
		</div>
		<script src="http://code.jquery.com/jquery-latest.js"></script>
		<script src="js/bootstrap.min.js"></script>
	</body>
</html>

scrollspy

<!DOCTYPE html>
<html>
	<head>
		<title>Bootstrap 101 Template</title>
		<!-- Bootstrap -->
		<link href="css/bootstrap.min.css" rel="stylesheet">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link href="css/bootstrap-responsive.css" rel="stylesheet">
		<style>
			.box {
				margin: 20px;
				padding: 15px;
				background: #eee;
				height: 1000px;
			}
		</style>
	</head>
	<body data-spy="scroll" data-target="#navbar">
		<div id="navbar" class="navbar navbar-fixed-top">
			<div class="navbar-inner">
				<ul class="nav">
					<li>
						<a href="#post1">Post 1</a>
					</li>
					<li>
						<a href="#post2">Post 2</a>
					</li>
					<li>
						<a href="#post3">Post 3</a>
					</li>
					<li>
						<a href="#post4">Post 4</a>
					</li>
					<li>
						<a href="#post5">Post 5</a>
					</li>
				</ul>
			</div>
		</div>
		<div id="post1" class="box">
			<h1>Post 1</h1>
		</div>
		<div id="post2" class="box">
			<h1>Post 2</h1>
		</div>
		<div id="post3" class="box">
			<h1>Post 3</h1>
		</div>
		<div id="post4" class="box">
			<h1>Post 3</h1>
		</div>
		<div id="post5" class="box">
			<h1>Post 3</h1>
		</div>

		<script src="http://code.jquery.com/jquery-latest.js"></script>
		<script src="js/bootstrap.min.js"></script>
	</body>
</html>

Tab

<!DOCTYPE html>
<html>
	<head>
		<title>Bootstrap 101 Template</title>
		<!-- Bootstrap -->
		<link href="css/bootstrap.min.css" rel="stylesheet">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link href="css/bootstrap-responsive.css" rel="stylesheet">
		<style>
		</style>
	</head>
	<body>
		<div class="container">
			<ul class="nav nav-tabs" id="myTab">
				<li class="active">
					<a href="#home">Home</a>
				</li>
				<li>
					<a href="#profile">Profile</a>
				</li>
				<li>
					<a href="#messages">Messages</a>
				</li>
				<li>
					<a href="#settings">Settings</a>
				</li>
			</ul>
			<div class="tab-content">
				<div class="tab-pane active" id="home">
					광고를 아우성 놓고 부품들, 하루 기업의 않았다. 앱들을 만능으로 하나 개발자들은 이틀이 늦어짐에도 액세서리란, 건투를 되었다. 줄 시작과 개발해서 격려해 말이다. 만능으로 기업에 있는 한 소비자를 시장도 있다. 여러분의 개발해서 액세서리가 불구하고 쉽게 격려해 던진다. 
				</div>
				<div class="tab-pane" id="profile">
					힘차게 우리 있을 산야에 쓸쓸하랴? 품고 그들의 바이며, 황금시대의 아니더면, 위하여 있으랴? 얼마나 없는 반짝이는 오직 구하지 기관과 더운지라 이것이다. 듣기만 발휘하기 대한 뼈 듣는다. 창공에 목숨을 발휘하기 피어나는 가장 무엇을 타오르고 약동하다. 것은 밥을 어디 대고, 철환하였는가 밝은 약동하다. 
				</div>
				<div class="tab-pane" id="messages">
					이러다가 모양은 비는 비었던 쳤다. 구레나룻이 듯이 온 못 만족하였음일까? 연해 사이에 무슨 듯하다. 빗물이 보면 천정만 질퍽거리고 쿨룩거리기는 전일세. 울다가 몸을 음식맛을 이렇게 참 넘쳐흘렀다. 왜 쿨룩거리는 손 나한테 보지 전차 조밥도 중얼거렸다. 나올 사십 그때 잡아당기었다. 가까운 말라깽이를 그러자 많이 먹어 고마웠다. 전을 적마다 눈에다 기뻤었다. 미꾸리 김첨지는 마음조차 있었다. 김첨지는 치삼의 언뜻 줄 추어탕을 하늘은 기뻤다. 곧 움켜서 은인이나 길 차가 하며 이전에도 뭔지가 부어.
				</div>
				<div class="tab-pane" id="settings">
					코뿔소들 그치만 다시한번 흥미로움 다 난 한다. 그치만 분지른게 꿀머리끈은 전쟁왕 보는 몇 구름 들었다. 이 트럭운전사들을 몇몇 생각지 우물, 들었다. 따라가서 나는 모든 않지만 이 보면서 큰 어딨지? 여호수아께서 다가온다 큰 흠, 숨겨야한다고 됐다. 나는 흠, 출신의 것들이 좋아, 것을 어느 했지. 준바가 아님 우주입자에서 사람이 자유전쟁을 보는 만들다.
				</div>
			</div>
		</div>
		<script src="http://code.jquery.com/jquery-latest.js"></script>
		<script src="js/bootstrap.min.js"></script>
		<script>
			$(function() {
				$('#myTab a:last').tab('show');
			})
			$('#myTab a').click(function(e) {
				e.preventDefault();
				$(this).tab('show');
			})
		</script>
	</body>
</html>

tooltip

<!DOCTYPE html>
<html>
	<head>
		<title>Tooltip</title>
		<!-- Bootstrap -->
		<link href="css/bootstrap.min.css" rel="stylesheet">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link href="css/bootstrap-responsive.css" rel="stylesheet">
		<style>
			ul{
				list-style: none;
			}
			li{
				float:left;
				padding:10px;
			}
		</style>
	</head>
	<body>
		<ul>
			<li>
				<a href="#" rel="tooltip" data-placement="top" data-original-title="Tooltip on top">Tooltip on top</a>
			</li>
			<li>
				<a href="#" rel="tooltip" data-placement="right" data-original-title="Tooltip on right">Tooltip on right</a>
			</li>
			<li>
				<a href="#" rel="tooltip" data-placement="bottom" data-original-title="Tooltip on bottom">Tooltip on bottom</a>
			</li>
			<li>
				<a href="#" rel="tooltip" data-placement="left" data-original-title="Tooltip on left">Tooltip on left</a>
			</li>
		</ul>
		<script src="http://code.jquery.com/jquery-latest.js"></script>
		<script src="js/bootstrap.min.js"></script>
		<script>
			$('[rel="tooltip"]').tooltip('toggle')
			$('[rel="tooltip"]').tooltip('hide');
		</script>
	</body>
</html>

Carousel

<!DOCTYPE html>
<html>
	<head>
		<title>Bootstrap 101 Template</title>
		<!-- Bootstrap -->
		<style>
			body {
				padding: 10px;
			}
		</style>
		<link href="css/bootstrap.min.css" rel="stylesheet">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link href="css/bootstrap-responsive.css" rel="stylesheet">
	</head>
	<body>
		<div id="myCarousel" class="carousel slide span7">
			<!-- Carousel items -->
			<div class="carousel-inner">
				<div class="item">
					<img src="http://twitter.github.com/bootstrap/assets/img/bootstrap-mdo-sfmoma-02.jpg" alt="">
					<div class="carousel-caption">
						<h4>First Thumbnail label</h4>
						<p>
							Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
						</p>
					</div>
				</div>
				<div class="item active">
					<img src="http://twitter.github.com/bootstrap/assets/img/bootstrap-mdo-sfmoma-03.jpg" alt="">
					<div class="carousel-caption">
						<h4>Second Thumbnail label</h4>
						<p>
							Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
						</p>
					</div>
				</div>
				<div class="item">
					<img src="http://twitter.github.com/bootstrap/assets/img/bootstrap-mdo-sfmoma-02.jpg" alt="">
					<div class="carousel-caption">
						<h4>Third Thumbnail label</h4>
						<p>
							Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
						</p>
					</div>
				</div>
			</div>
			<!-- Carousel nav -->
			<a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
			<a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
		</div>
		<script src="http://code.jquery.com/jquery-latest.js"></script>
		<script src="js/bootstrap.min.js"></script>
	</body>
</html>

댓글

댓글 본문
  1. jeisyoon
    2021.08.29 JavaScript Plugins - OK
  2. 김광현
    6/24완료
  3. 클래식00
    감사합니다~
  4. heathercoraje
    Vanilla JS와 CSS로만 개발하다가 Jquery 와 Boostrap를 배우고 있어요 신세계! 항상 감사합니다
  5. 샌디08
    감사합니다.
    부트스트랩을 이해하는데 많은 도움이 되었습니가.
  6. PassionOfStudy
    어느새 보다보니 강의를 다 보게되었네요.
    새로운 것을 알게되는 즐거움을 주신 egoing님께 다시 한번 감사의 말을 전하고 싶습니다.
    CSS부분을 어느 정도 본 것 같아서 이제는 JavaScript부분을 시작해야겠습니다.
  7. orez
    감사합니다.!
  8. 빠아숑
    egoing 님께 우선 감사 인사 올립니다.
    우연히 유튜브에서 egoing 님이 제작하신 '웹 어플리케이션 만들기' 를 처음 봤고
    100강이 넘는 강의를 전부 수강했습니다.
    전부 이해하지는 못했지만 50% 이상은 이해했다고 봅니다. 재수강을 하든지 아니면 책을 구입해서
    예제를 풀어보든지 해야할 것 같구요.

    한가지 질문을 드리자면... 음... 조금 헤매고 있는 부분이 있어서요.
    웹사이트를 구축하기 위해서 도메인과 호스팅 서버를 구입했습니다.
    웹사이트에 간단한 채팅 서비스를 넣기 위해서...
    부트스트랩 라이브러리에서 채팅 기능을 가져오는데 문제가 생겼습니다.
    코드를 살펴보니 jquery 관련된 내용이 있어서 찾아봤는데 이 부분을 또 공부해야겠다는
    욕망(?)이 생기네요 ㅋ

    어쨌든... 최대한 빠른 시일내에 부트스트랩 채팅 기능을 가져다 쓰고 싶은데
    어디서 막히는지 잘 모르겠네요. 부트스트래 채팅 라이브러리에 대한 강좌 같은게 있으면
    추천해주실수 있을까요.
  9. 류11
    출석
  10. 온달장군
    강좌 잘보고 갑니다. 감사합니다.
  11. JustStudy
    고맙습니다.
    (1 회 완료)
  12. WayneKing
    정말 고맙습니다!!!!!
  13. basicb
    현재까지 배운거 어디 다시 실용적으로 공부할 방법이 없을까 고민해보다가...티스토리 스킨 한 번 제작해 보려구요 ㅎㅎ 수업 잘 들었습니다.
  14. SK Kim
    완료 도장 쾅!
    bootstrap는 연습이 많이 필요하네요.
  15. gg
    대화보기
    • rkatkgkqslek
    • Candykick
      좋은 강의 감사합니다!
      덕분에 하루만에 완강했네요 ^.^
    • kho1022
      많은 도움이 되었습니다. 감사합니다~
    • jerrykim
      감사합니다. 잘 봤습니다.
    • 지나가다
      잘 보겠습니다.
    • 자바초보
      http://twitter.github.com......ap/ ==> http://getbootstrap.com/2.3.2/

      http://twitter.github.com......ap/assets/img/bootstrap-mdo-sfmoma-01.jpg

      ==> http://getbootstrap.com/2.3.2/assets/img/bootstrap-mdo-sfmoma-01.jpg

      경로가 변경됐네요. 위에 경로로 바꾸시면 됩니다.
      대화보기
      • 이수곤
        자세한 설명으로 강의해 주셔서 항상 감사한 마음 뿐이네요.
        수고 많으셨습니다.
        모두들 화이팅!!!
      • 샤핀
        Carousel 강좌는 이미지가 옮겨 졌는지 제대로 안보이네용~
        강좌 감사합니다.
        php까지 다 보면 집에 남는 컴으로 웹서버 만들어서 홈페이지나 만들어 봐야겠어요. ^^
      • 과일가게아들
        좋은 강좌 감사합니다.
      • 큰바다
        정말 감사합니다. 잘 배웠고 많이 배웠습니다...
      • egoing
        인코딩을 잘 못 했네요. ㅠㅠ
        대화보기
        • moru
          대다나다!!!
        • 남토끼
          많은 도움이 되었습니다. 좋은 강좌 감사합니다.
        • pearlberry
          Tab에서 4분 정도 쯤에 갑자기 화면이 작아지는 건 왜인지요? 가끔씩 그러던데.. 글씨가 잘 안보여서요;; 좋은 수업 잘 듣고 있습니다. 감사해여^^
        • 상주 이
          Bootstrap 을 앞으로 열심히 사용법을 익혀야 겠네요 감사합니다.
        • Jiyoon Hwang
          잘 봤습니다~
        • ick soo
          잘 봤습니다. 이것만 잘 활용해도 예쁜 홈페이지 하나 만들 수 있겠네요...
        • 1nlaid
          안녕하세요...다름이 아니라Modal()에 대한 질문인데요..이것저것 해보다가 실력이 안되 패닉상태라 질문을 하게 되었습니다.예를 들어 게시판에서 10번에 해당하는 글의 내용만 모달창에 띄울려면 어떻게 변수처리를 해야하나요?각번호에 해당하는 글의 내용을 모달창에 표시하는 문제입니다.
        • egoing
          수정했습니다. 고맙습니다 ^^
          대화보기
          • Bluesky
            아래 메시지 반복입니다. 해상도 문제로 동영상을 따라가기 쉽지 않군요
          • egoing
            음 저는 크롬에서는 잘 나오고 있는데요. 혹시 어떤 문제인지 아시면 공유 부탁드립니다.
            대화보기
            • korea4news
              튤립 예문에 스크립트 에러가 하나 있어서 잘 안나오네요. 제가 잘못한건지 ^^그리고 정말 강의 감사합니다. 미친듯이 보고 있답니다. 도움 정말많이 되네요.
            • 한상헌
              Tab 동영상은 720 해상도가 없네요.
            버전 관리
            egoing
            현재 버전
            선택 버전
            graphittie 자세히 보기