선행지식
Twitter Bootstrap의 JavaScript 플러그인은 jQuery를 기반으로 만들어졌기 때문에 일부 기능은 jQuery의 문법을 요구한다. 생활코딩의 jQuery 수업을 통해서 jQuery의 사용법을 배울 수 있다. (생활코딩 jQuery 바로가기)
Modal
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 | <!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="js/bootstrap.min.js"></script> </body></html> |
scrollspy
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 | <!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="js/bootstrap.min.js"></script> </body></html> |
Tab
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 | <!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="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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | <!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="js/bootstrap.min.js"></script> <script> $('[rel="tooltip"]').tooltip('toggle') $('[rel="tooltip"]').tooltip('hide'); </script> </body></html> |
Carousel
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 | <!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"> <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"> <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"> <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">‹</a> <a class="carousel-control right" href="#myCarousel" data-slide="next">›</a> </div> <script src="js/bootstrap.min.js"></script> </body></html> |
