OpenFrameWork

오픈프레임워크_Day49

px 2015. 5. 22. 16:23
### : 목차 구분 기호
--- : 목차 내에 항목 구분 기호
@@@ : 태그 용도 
,,, : 같은 항목 내에 구분 기호

목차
1. 이론 및 정보
2. 설정 및 그 밖에
3. 소스코드 또는 실습
4. 과제

###################################
1. 이론 및 정보
-----------------------------------
* BootStrap 의 js 파일을 쓰기 위해서는
jquery를 써야하는데 라이브러리 다운 받아야함
----------------------------------- 
* CDN 방식
다운 받지 않고 인터넷을 통해서 기능을 내려받아서 사용 가능
----------------------------------- 
----------------------------------- 
###################################
2. 설정 및 그 밖에
-----------------------------------
* jquery.com
Download the uncompressed, development jQuery 2.1.4
다운
/BootStrap2/WebContent/bootstrap/js/jquery-2.1.4.js
넣음

위 소스가 부트스트랩 스크립트 소스보다 위에 추가가 되어 있어야함
----------------------------------- 
###################################
3. 소스코드 또는 실습 
-----------------------------------
3-1
Workspace : ~\JSP\EclipseWork
/BootStrap2/WebContent/BaseCss/form_controls.html

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<form>
     <fieldset>
          <legend>범례</legend>
          <h3>텍스트 상자</h3>
          <label>Single Line : <input type="text" placeholder="데이터 입력"/></label>
          <label>password : <input type="password"/></label>
          <label>Multi Line : <textarea rows="3"></textarea></label>
          
          <h3>체크박스와 라디오버튼</h3>
          <label><input type="checkbox" checked="true"/>체크박스1</label>
          <label><input type="checkbox"/>체크박스2</label>
          
          <label><input type="radio" name="optData"/>라디오버튼1</label>
          <label><input type="radio" name="optData" checked="checked"/>라디오버튼2</label>
          
          <h3>인라인 체크박스</h3>
          <label class="checkbox inline"><input type="checkbox"/>체크박스1</label>
          <label class="checkbox inline"><input type="checkbox"/>체크박스2</label>
          <label class="checkbox inline"><input type="checkbox"/>체크박스3</label>
          
          <h3>유효성 검사</h3>
          <!-- HTML5에 새로 추가된 방식, bootstrap과 상관없음 -->
          <!-- required는 반드시 입력해야 한다는 의미로 쓰임 -->
          <input type="email" required="required"/>
          <input type="submit" value="전송"/>
          
          <h3>편집 불가</h3>
          <input type="text" value="편집 불가능한 컨트롤" disabled="disabled"
               class="uneditable-input"/>
     </fieldset>
</form>
</body>
</html>
-----------------------------------  
3-2
Workspace : ~\JSP\EclipseWork
/BootStrap2/WebContent/BaseCss/form_controls_etc.html

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<form>
     <fieldset>
          <legend>폼 컨트롤들</legend>
          
          <h2>폼 기능 확장</h2>
          <div class="input-prepend">
               <span class="add-on">@</span>
               <input type="text" placeholder="아이디" class="span2"/>
          </div>
          
          <div class="input-append">
               <input type="text" class="span2"/>
               <span class="add-on">.00</span>
          </div>
          
          <div class="input-prepend input-append">
               <span class="add-on">@</span>
               <input type="text" class="span2"/>
               <span class="add-on">.00</span>
          </div>
          
          <div class="input-prepend input-append">
               <input type="text" class="span2 search-query"/>
               <button class="btn" type="button">검색</button>
               <button class="btn" type="button">옵션</button>
          </div>
     </fieldset>
</form>
</body>
</html>
-----------------------------------  
3-3
Workspace : ~\JSP\EclipseWork
/BootStrap2/WebContent/layout/layout.html

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">
<style>
     div{border: 1px solid red}
</style>
</head>
<body>
<div class="row">
     <div class="span7">
          <h1>제목</h1>
          <p>내용...<br/>내용...<br/>내용...<br/>내용...<br/>
          내용...<br/>내용...<br/>내용...<br/>내용...</p>
     </div>
     
     <div class="span2">
          <h2>사이드바</h1>
          <p>내용...<br/>내용...<br/>내용...</p>
     </div>
</div>

<div class="row">
     <div class="span3">
          <h1>카테고리</h1>
     </div>
     
     <div class="span7">
          <h1>제목</h1>
          <p>내용...<br/>내용...<br/>내용...<br/>내용...<br/>
          내용...<br/>내용...<br/>내용...<br/>내용...</p>
     </div>
     
     <div class="span2">
          <h2>사이드바</h1>
          <p>내용...<br/>내용...<br/>내용...</p>
     </div>
</div>
</body>
</html>
----------------------------------- 
3-4
Workspace : ~\JSP\EclipseWork
/BootStrap2/WebContent/layout/fluidLayout.html

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">
<style>
     
     [class*="span"]{
          background-color: gray;
          text-align: center;
          margin-top: 10px;
     }
</style>
</head>
<div class="container">
     <div class="row">
          <div class="span7">
               <h1>제목</h1>
               <p>내용...<br/>내용...<br/>내용...<br/>내용...<br/>
               내용...<br/>내용...<br/>내용...<br/>내용...</p>
          </div>
          
          <div class="span2">
               <h2>사이드바</h1>
               <p>내용...<br/>내용...<br/>내용...</p>
          </div>
     </div>
     <div class="row">
          <div class="span3">3</div>
          <div class="span4">4</div>
          <div class="span5">5</div>
     </div>
     <div class="row">
          <div class="span3">3</div>
          <div class="span6 offset3">6 3칸공백</div>
     </div>
     <div class="row">
          <div class="span12">
               <img src="../images/Desert.jpg"/>
          </div>
     </div>
</div>

<h1>가변 길이</h1>
<div class="container-fluid">
     <div class="row-fluid">
          <div class="span7">
               <h1>제목</h1>
               <p>내용...<br/>내용...<br/>내용...<br/>내용...<br/>
               내용...<br/>내용...<br/>내용...<br/>내용...</p>
          </div>
          
          <div class="span2">
               <h2>사이드바</h1>
               <p>내용...<br/>내용...<br/>내용...</p>
          </div>
     </div>
     <div class="row-fluid">
          <div class="span3">3</div>
          <div class="span4">4</div>
          <div class="span5">5</div>
     </div>
     <div class="row-fluid">
          <div class="span3">3</div>
          <div class="span6 offset3">6 3칸공백</div>
     </div>
     <div class="row-fluid">
          <div class="span12">
               <img src="../images/Desert.jpg"/>
          </div>
     </div>
</div>


<div class="row">
     <div class="span3">
          <h1>카테고리</h1>
     </div>
     
     <div class="span7">
          <h1>제목</h1>
          <p>내용...<br/>내용...<br/>내용...<br/>내용...<br/>
          내용...<br/>내용...<br/>내용...<br/>내용...</p>
     </div>
     
     <div class="span2">
          <h2>사이드바</h1>
          <p>내용...<br/>내용...<br/>내용...</p>
     </div>
</div>
</body>
</html>
----------------------------------- 
3-5
Workspace : ~\JSP\EclipseWork
/BootStrap2/WebContent/layout/fixedLayout.html

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">
<style>
     
     [class*="span"]{
          background-color: gray;
          text-align: center;
          margin-top: 10px;
     }
</style>
</head>
<div class="container">
     <div class="row">
          <div class="span7">
               <h1>제목</h1>
               <p>내용...<br/>내용...<br/>내용...<br/>내용...<br/>
               내용...<br/>내용...<br/>내용...<br/>내용...</p>
          </div>
          
          <div class="span2">
               <h2>사이드바</h1>
               <p>내용...<br/>내용...<br/>내용...</p>
          </div>
     </div>
     <div class="row">
          <div class="span3">3</div>
          <div class="span4">4</div>
          <div class="span5">5</div>
     </div>
     <div class="row">
          <div class="span3">3</div>
          <div class="span6 offset3">6 3칸공백</div>
     </div>
     <div class="row">
          <div class="span12">
               <img src="../images/Desert.jpg"/>
          </div>
     </div>
</div>
<div class="row">
     <div class="span3">
          <h1>카테고리</h1>
     </div>
     
     <div class="span7">
          <h1>제목</h1>
          <p>내용...<br/>내용...<br/>내용...<br/>내용...<br/>
          내용...<br/>내용...<br/>내용...<br/>내용...</p>
     </div>
     
     <div class="span2">
          <h2>사이드바</h1>
          <p>내용...<br/>내용...<br/>내용...</p>
     </div>
</div>
</body>
</html>
----------------------------------- 
3-6
Workspace : ~\JSP\EclipseWork
/BootStrap2/WebContent/layout/responsiveDesign.html

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="../bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet">
<style>
     
     [class*="span"]{
          background-color: gray;
          text-align: center;
          margin-top: 10px;
     }
</style>
</head>
<div class="container">
     <div class="row">
          <div class="span7">
               <h1>제목</h1>
               <p>내용...<br/>내용...<br/>내용...<br/>내용...<br/>
               내용...<br/>내용...<br/>내용...<br/>내용...</p>
          </div>
          
          <div class="span2">
               <h2>사이드바</h1>
               <p>내용...<br/>내용...<br/>내용...</p>
          </div>
     </div>
     <div class="row">
          <div class="span3">3</div>
          <div class="span4">4</div>
          <div class="span5">5</div>
     </div>
     <div class="row">
          <div class="span3">3</div>
          <div class="span6 offset3">6 3칸공백</div>
     </div>
     <div class="row">
          <div class="span12">
               <img src="../images/Desert.jpg"/>
          </div>
     </div>
</div>

<h1>가변 길이</h1>
<div class="container-fluid">
     <div class="row-fluid">
          <div class="span7">
               <h1>제목</h1>
               <p>내용...<br/>내용...<br/>내용...<br/>내용...<br/>
               내용...<br/>내용...<br/>내용...<br/>내용...</p>
          </div>
          
          <div class="span2">
               <h2>사이드바</h1>
               <p>내용...<br/>내용...<br/>내용...</p>
          </div>
     </div>
     <div class="row-fluid">
          <div class="span3">3</div>
          <div class="span4">4</div>
          <div class="span5">5</div>
     </div>
     <div class="row-fluid">
          <div class="span3">3</div>
          <div class="span6 offset3">6 3칸공백</div>
     </div>
     <div class="row-fluid">
          <div class="span12">
               <img src="../images/Desert.jpg"/>
          </div>
     </div>
</div>


<div class="row">
     <div class="span3">
          <h1>카테고리</h1>
     </div>
     
     <div class="span7">
          <h1>제목</h1>
          <p>내용...<br/>내용...<br/>내용...<br/>내용...<br/>
          내용...<br/>내용...<br/>내용...<br/>내용...</p>
     </div>
     
     <div class="span2">
          <h2>사이드바</h1>
          <p>내용...<br/>내용...<br/>내용...</p>
     </div>
</div>
</body>
</html>
----------------------------------- 
3-7 
Workspace : ~\JSP\EclipseWork
/BootStrap2/WebContent/layout/responsiveDesignClass.html

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="../bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet">
<style>
     /*div{border:1px solid red}*/
     [class*="span"]{
          background-color:gray;
          text-align:center;
          margin-top:10px
     }
</style>
</head>
<body>
     <div class="container">
          <div class="row">
               <div class="span4">
                    <div class="visible-phone">휴대폰 환경에서만 보여짐</div>
               </div>
               <div class="span4">
                    <div class="visible-tablet">태블릿 환경에서만 보여짐</div>
               </div>
               <div class="span4">
                    <div class="visible-desktop">데스크 탑 환경에서만 보여짐</div>
               </div>
          </div>
     </div>
     
     <div class="container">
          <div class="row">
               <div class="span4">
                    <div class="hidden-phone">휴대폰 환경에서만 숨겨짐</div>
               </div>
               <div class="span4">
                    <div class="hidden-tablet">태블릿 환경에서만 숨겨짐</div>
               </div>
               <div class="span4">
                    <div class="hidden-desktop">데스크 탑 환경에서만 숨겨짐</div>
               </div>
          </div>
     </div>
</body>
</html>
-----------------------------------  
3-8 
Workspace : ~\JSP\EclipseWork
/BootStrap2/WebContent/Components/TabAndNavbar.html

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="../bootstrap/js/jquery-2.1.4.js"></script>
<script src="../bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
     <div class="row">
          <div class="span12">
               <h1>기본 탭</h1>
               <ul class="nav nav-tabs">
                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="#">Contact</a></li>
                    <li><a href="#">About</a></li>
               </ul>
          </div>
     </div>
     
     <div class="row">
          <div class="span12">
               <h1>기본 필(Pill)</h1>
               <ul class="nav nav-pills">
                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="#">Contact</a></li>
                    <li class="disabled"><a href="#">About</a></li>
               </ul>
          </div>
     </div>
</div>

<div class="container">
     <div class="row">
          <div class="span12">
               <h1>기본 탭</h1>
               <ul class="nav nav-tabs nav-stacked">
                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="#">Contact</a></li>
                    <li><a href="#">About</a></li>
               </ul>
          </div>
     </div>
     
     <div class="row">
          <div class="span12">
               <h1>기본 필(Pill)</h1>
               <ul class="nav nav-pills nav-stacked">
                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="#">Contact</a></li>
                    <li class="disabled"><a href="#">About</a></li>
               </ul>
          </div>
     </div>
</div>

<div class="container">
     <div class="row">
          <div class="span12">
               <h1>탭 리스트</h1>
               <ul class="span2 nav nav-list">
                    <li class="nav-header">메뉴 선택1</li>
                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="#">Contact</a></li>
                    <li><a href="#">About</a></li>
                    <li class="divider"></li>
                    <li class="nav-header">메뉴 선택2</li>
                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="#">Contact</a></li>
                    <li class="disabled"><a href="#">About</a></li>
               </ul>
          </div>
     </div>
</div>


<div class="container">
     <div class="row">
          <div class="span3">
               <h1>왼쪽 영역</h1>
               <ul class="span2 nav nav-list">
                    <li class="nav-header">메뉴 선택1</li>
                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="#">Contact</a></li>
                    <li><a href="#">About</a></li>
                    <li class="dropdown">
                         <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 즐겨 찾기
                         <i class="caret"></i></a>
                         <ul class="dropdown-menu">
                              <li><a href="#">회원가입</a></li>
                              <li class="divider"></li>
                              <li><a href="#">게시판</a></li>
                              <li class="dropdown-submenu">
                                   <a href="#">쇼핑몰</a>
                                   <ul class="dropdown-menu">
                                        <li><a href="#">의류</a></li>
                                        <li><a href="#">가전제품</a></li>
                                        <li><a href="#">식품</a></li>
                                   </ul>
                              </li>
                         </ul>
                    </li>
               </ul>
          </div>
          
          <div class="span9">
               <h1>내용 영역</h1>
               <div class="tabbabble tabs-below">
                    <ul class="nav nav-tabs">
                         <li class="active"><a href="#tab1" data-toggle="tab">Home</a></li>
                         <li><a href="#tab2" data-toggle="tab">Contact</a></li>
                         <li><a href="#tab3" data-toggle="tab">About</a></li>
                    </ul>
                    
                    <div class="tab-content">
                         <div class="tab-pane active" id="tab1">홈페이지</div>
                         <div class="tab-pane" id="tab2">연락처</div>
                         <div class="tab-pane" id="tab3">정보</div>
                    </div>
               </div>
          </div>
     </div>
</div>
</body>
</html>
-----------------------------------  
3-9 
Workspace : ~\JSP\EclipseWork
/BootStrap2/WebContent/Components/Navbar.html

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="../bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet">
<script src="../bootstrap/js/jquery-2.1.4.js"></script>
<script src="../bootstrap/js/bootstrap.min.js"></script>
<style>
     body{margin-top: 50px;}
</style>
</head>
<body>
<nav class="navbar navbar-fixed-top navbar-inverse">
     <div class="navbar-inner">
          <a href="#" class="brand">1503기</a>
          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
               <span class="icon-bar"></span>
               <span class="icon-bar"></span>
               <span class="icon-bar"></span>
          </a>
          <div class="nav-collapse collapse">
               <ul class="nav">
                    <li><a href="#">Home</a></li>
                    <li class="divider-vertical "></li>
                    <li><a href="#">Blog</a></li>
                    <li class="divider-vertical"></li>
                    <li><a href="#">Contact</a></li>
                    <li class="divider-vertical"></li>
                    <li><a href="#">About</a></li>
                    <li class="divider-vertical"></li>
                    <li class="dropdown">
                         <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 즐겨 찾기
                         <i class="caret"></i></a>
                         <ul class="dropdown-menu">
                              <li><a href="#">회원가입</a></li>
                              <li class="divider"></li>
                              <li><a href="#">게시판</a></li>
                              <li class="dropdown-submenu">
                                   <a href="#">쇼핑몰</a>
                                   <ul class="dropdown-menu">
                                        <li><a href="#">의류</a></li>
                                        <li><a href="#">가전제품</a></li>
                                        <li><a href="#">식품</a></li>
                                   </ul>
                              </li>
                         </ul>
                    </li>
               </ul>
               <form class="navbar-form pull-right">
                    <input type="text" name="txtSearch" />
                    <input type="submit" value="검색"/>
               </form>
          </div>
     </div>
</nav>
<div class="container">
     <div class="row">
          <div class="span9">
               내용 들어오는 곳...<br/><br/>내용 들어오는 곳...<br/><br/>
               내용 들어오는 곳...<br/><br/>내용 들어오는 곳...<br/><br/>
               내용 들어오는 곳...<br/><br/>내용 들어오는 곳...<br/><br/>
               내용 들어오는 곳...<br/><br/>내용 들어오는 곳...<br/><br/>
               내용 들어오는 곳...<br/><br/>내용 들어오는 곳...<br/><br/>
               내용 들어오는 곳...<br/><br/>내용 들어오는 곳...<br/><br/>
               내용 들어오는 곳...<br/><br/>내용 들어오는 곳...<br/><br/>
               내용 들어오는 곳...<br/><br/>내용 들어오는 곳...<br/><br/>     
               내용 들어오는 곳...<br/><br/>내용 들어오는 곳...<br/><br/>
               내용 들어오는 곳...<br/><br/>내용 들어오는 곳...<br/><br/>
               내용 들어오는 곳...<br/><br/>내용 들어오는 곳...<br/><br/>
               내용 들어오는 곳...<br/><br/>내용 들어오는 곳...<br/><br/>
               내용 들어오는 곳...<br/><br/>내용 들어오는 곳...<br/><br/>
               내용 들어오는 곳...<br/><br/>내용 들어오는 곳...<br/><br/>
               내용 들어오는 곳...<br/><br/>내용 들어오는 곳...<br/><br/>
               내용 들어오는 곳...<br/><br/>내용 들어오는 곳...<br/><br/>          
               내용 들어오는 곳...<br/><br/>내용 들어오는 곳...<br/><br/>
               내용 들어오는 곳...<br/><br/>내용 들어오는 곳...<br/><br/>
               내용 들어오는 곳...<br/><br/>내용 들어오는 곳...<br/><br/>
               내용 들어오는 곳...<br/><br/>내용 들어오는 곳...<br/><br/>
               내용 들어오는 곳...<br/><br/>내용 들어오는 곳...<br/><br/>
               내용 들어오는 곳...<br/><br/>내용 들어오는 곳...<br/><br/>
               내용 들어오는 곳...<br/><br/>내용 들어오는 곳...<br/><br/>
               내용 들어오는 곳...<br/><br/>내용 들어오는 곳...<br/><br/>          
               내용 들어오는 곳...<br/><br/>내용 들어오는 곳...<br/><br/>
               내용 들어오는 곳...<br/><br/>내용 들어오는 곳...<br/><br/>
               내용 들어오는 곳...<br/><br/>내용 들어오는 곳...<br/><br/>
               내용 들어오는 곳...<br/><br/>내용 들어오는 곳...<br/><br/>
               내용 들어오는 곳...<br/><br/>내용 들어오는 곳...<br/><br/>
               내용 들어오는 곳...<br/><br/>내용 들어오는 곳...<br/><br/>
               내용 들어오는 곳...<br/><br/>내용 들어오는 곳...<br/><br/>
               내용 들어오는 곳...<br/><br/>내용 들어오는 곳...<br/><br/>          
          </div>
          <div class="span3">
               <ul class="span2 nav nav-list">
                    <li class="nav-header">메뉴 선택1</li>
                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="#">Contact</a></li>
                    <li><a href="#">About</a></li>
                    <li class="divider"></li>
                    <li class="nav-header">메뉴 선택2</li>
                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="#">Contact</a></li>
                    <li class="disabled"><a href="#">About</a></li>
               </ul>
          </div>
     </div>
</div>
</body>
</html>
-----------------------------------  
3-10 
Workspace : ~\JSP\EclipseWork
/BootStrap2/WebContent/Components/DropDownMenu.html

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="../bootstrap/js/jquery-2.1.4.js"></script>
<script src="../bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
     <div class="row">
          <div class="span12">
               <div class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 즐겨 찾기
                    <i class="caret"></i></a>
                    <ul class="dropdown-menu">
                         <li><a href="#">회원가입</a></li>
                         <li class="divider"></li>
                         <li><a href="#">게시판</a></li>
                         <li class="dropdown-submenu">
                              <a href="#">쇼핑몰</a>
                              <ul class="dropdown-menu">
                                   <li><a href="#">의류</a></li>
                                   <li><a href="#">가전제품</a></li>
                                   <li><a href="#">식품</a></li>
                              </ul>
                         </li>
                    </ul>
               </div>
          </div>
     </div>
</div>
</body>
</html>
-----------------------------------  
3-11 
Workspace : ~\JSP\EclipseWork
/BootStrap2/WebContent/Components/BreadcrumbAndPager.html

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script>
     function name(f) {
          alert(f.value);
     }
</script>
</head>
<body>
<h1>BreadCrumb</h1>
<ul class="breadcrumb">
     <li><a href="#">Home</a><span class="divider">/</span></li>     
     <li><a href="#">Contact</a><span class="divider">/</span></li>
     <li><a class="active">About</a>
</ul>
<h1>Pager</h1>
<div class="pagination pagination-centered pagination-large">
     <ul>
          <li class="disabled"><a href="#">이전</a></li>
          <li class="active"><a href="#">1</a></li>
          <li><a href="#">2</a></li>
          <li><a href="#">3</a></li>
          <li><a href="#">4</a></li>
          <li><a href="#">5</a></li>
          <li><a href="#">다음</a></li>
     </ul>
</div>

<div class="pager">
     <ul>
          <li class="disabled"><a href="#">이전</a></li>
          <li class="active"><a href="#">1</a></li>
          <li><a href="#">2</a></li>
          <li><a href="#">3</a></li>
          <li><a href="#">4</a></li>
          <li><a href="#">5</a></li>
          <li><a href="#">다음</a></li>
     </ul>
</div>
</body>
</html>
-----------------------------------  
3-12 
Workspace : ~\JSP\EclipseWork
/BootStrap2/WebContent/Components/ButtonGroup.html

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="../bootstrap/js/jquery-2.1.4.js"></script>
<script src="../bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
     <div class="btn-group">
          <input type="button" value="왼쪽" class="btn"/>
          <input type="button" value="가운데" class="btn"/>
          <input type="button" value="오른쪽" class="btn"/>
     </div>
     <div class="btn-toolbar">
          <div class="btn-group">
               <input type="button" value="왼쪽" class="btn"/>
               <input type="button" value="가운데" class="btn"/>
               <input type="button" value="오른쪽" class="btn"/>
          </div>
     </div>
     <div class="btn-group btn-group-vertical">
          <input type="button" value="왼쪽" class="btn"/>
          <input type="button" value="가운데" class="btn"/>
          <input type="button" value="오른쪽" class="btn"/>
     </div>
</body>
</html>
-----------------------------------  
3-13 
Workspace : ~\JSP\EclipseWork
/BootStrap2/WebContent/Components/ButtonDropMenu.html

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="../bootstrap/js/jquery-2.1.4.js"></script>
<script src="../bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
     <div class="btn-group">
          <!-- 버튼이 아니어도 anchor 태그도 btn으로 변경이 됨 아래 처럼 -->
          <a href="#" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> 즐겨 찾기
               <i class="caret"></i>
          </a>
          <ul class="dropdown-menu">
               <li><a href="#">회원가입</a></li>
               <li class="divider"></li>
               <li><a href="#">게시판</a></li>
               <li class="dropdown-submenu"><a href="#">쇼핑몰</a>
                    <ul class="dropdown-menu">
                         <li><a href="#">의류</a></li>
                         <li><a href="#">가전제품</a></li>
                         <li><a href="#">식품</a></li>
                    </ul></li>
          </ul>
     </div>
     
     <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
     <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
     
     <div class="btn-group dropup">
          <!-- 버튼이 아니어도 anchor 태그도 btn으로 변경이 됨 아래 처럼 -->
          <a href="#" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> 즐겨 찾기</a>
          <a href="#" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
               <span class="caret"></span>
          </a>
          <ul class="dropdown-menu">
               <li><a href="#">회원가입</a></li>
               <li class="divider"></li>
               <li><a href="#">게시판</a></li>
               <li class="dropdown-submenu"><a href="#">쇼핑몰</a>
                    <ul class="dropdown-menu">
                         <li><a href="#">의류</a></li>
                         <li><a href="#">가전제품</a></li>
                         <li><a href="#">식품</a></li>
                    </ul></li>
          </ul>
     </div>
</body>
</html>
-----------------------------------  
3-14 
Workspace : ~\JSP\EclipseWork
/BootStrap2/WebContent/Components/Alert.html

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="../bootstrap/js/jquery-2.1.4.js"></script>
<script src="../bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
     <div class="row">
          <div class="alert">경고</div>
          <div class="alert alert-block alert-error">에러</div>
          <div class="alert alert-block alert-info">정보</div>
          <div class="alert alert-block alert-danger">위험</div>
          <div class="alert alert-block alert-success">성공</div>
          <div class="alert alert-block alert-success">
               <a href="#" class="close" data-dismiss="alert">&times;</a>성공 : 닫기 버튼
          </div>
          <div class="span5 alert alert-block alert-error">
               <a href="#" class="close" data-dismiss="alert">&times;</a>
               에러가 발생했습니다.
          </div>
     </div>
</div>
</body>
</html>
-----------------------------------  
3-15 
Workspace : ~\JSP\EclipseWork
/BootStrap2/WebContent/Javascript/Modal.html

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="../bootstrap/js/jquery-2.1.4.js"></script>
<script src="../bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
     <div class="row">
          <div class="span10">
               <div class="modal hide fade" id="theModal">
                    <div class="modal-header">
                         <a href="#" class="close" data-dismiss="modal">&times;</a>
                         <h3>모달 헤더</h3>
                    </div>
                    <div class="modal-body">
                         <p>본문 영역...</p>
                         <p>본문 영역...</p>
                    </div>
                    <div class="modal-footer">
                         <button class="btn btn-primary" data-dismiss="modal">닫기</button>
                    </div>
               </div>
               <a href="#theModal" class="btn" data-toggle="modal">모달창 열기</a>
               <input type="button" value="모달창 열기" data-toggle="modal" data-target="#theModal"/>
          </div>
     </div>
</div>
</body>
</html>
-----------------------------------  
3-16 
Workspace : ~\JSP\EclipseWork
/BootStrap2/WebContent/Javascript/Scrollspy.html

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="../bootstrap/js/jquery-2.1.4.js"></script>
<script src="../bootstrap/js/bootstrap.min.js"></script>
<style>
     body{margin-top: 40px;}
</style>
</head>
<!-- data-target은 해당 타켓의 class의 맨 처음 이름을 적는다
     data-spy의 정밀도를 높인다 , 제목에 가까워 졌을때 spy기능이 동작하도록 도와줌
-->
<body data-spy="scroll" data-target=".theScrollSpy" data-offset="50">
<div class="container">
     <div class="row">
          <div class="span12">
               <div class="theScrollSpy navbar navbar-fixed-top">
                    <div class="navbar-inner">
                         <a href="#" class="brand">데모</a>
                         <ul class="nav">
                              <li><a href="#section01">영역 01</a></li>
                              <li><a href="#section02">영역 02</a></li>
                              <li><a href="#section03">영역 03</a></li>
                         </ul>
                    </div>
               </div>
          </div>
     </div>
</div>
<div class="container">
     <div class="row">
          <div class="span9">
               <h3>본문</h3>
               <div id="section01">
                    <h3>영역 1</h3>
                    <p>엄청난 텍스트 내용</p><p>엄청난 텍스트 내용</p><p>엄청난 텍스트 내용</p><p>엄청난 텍스트 내용</p><p>엄청난 텍스트 내용</p>
                    <p>엄청난 텍스트 내용</p><p>엄청난 텍스트 내용</p><p>엄청난 텍스트 내용</p><p>엄청난 텍스트 내용</p><p>엄청난 텍스트 내용</p>
                    <p>엄청난 텍스트 내용</p><p>엄청난 텍스트 내용</p><p>엄청난 텍스트 내용</p><p>엄청난 텍스트 내용</p><p>엄청난 텍스트 내용</p>
                    <p>엄청난 텍스트 내용</p><p>엄청난 텍스트 내용</p><p>엄청난 텍스트 내용</p><p>엄청난 텍스트 내용</p><p>엄청난 텍스트 내용</p>
                    <p>엄청난 텍스트 내용</p><p>엄청난 텍스트 내용</p><p>엄청난 텍스트 내용</p><p>엄청난 텍스트 내용</p><p>엄청난 텍스트 내용</p>
                    <p>엄청난 텍스트 내용</p><p>엄청난 텍스트 내용</p><p>엄청난 텍스트 내용</p><p>엄청난 텍스트 내용</p><p>엄청난 텍스트 내용</p>
                    <p>엄청난 텍스트 내용</p><p>엄청난 텍스트 내용</p><p>엄청난 텍스트 내용</p><p>엄청난 텍스트 내용</p><p>엄청난 텍스트 내용</p>
               </div>
               <div id="section02">
                    <h3>영역 2</h3>
                    <p>엄청난 텍스트 내용</p><p>엄청난 텍스트 내용</p><p>엄청난 텍스트 내용</p><p>엄청난 텍스트 내용</p><p>엄청난 텍스트 내용</p>
                    <p>엄청난 텍스트 내용</p><p>엄청난 텍스트 내용</p><p>엄청난 텍스트 내용</p><p>엄청난 텍스트 내용</p><p>엄청난 텍스트 내용</p>
                    <p>엄청난 텍스트 내용</p><p>엄청난 텍스트 내용</p><p>엄청난 텍스트 내용</p><p>엄청난 텍스트 내용</p><p>엄청난 텍스트 내용</p>
                    <p>엄청난 텍스트 내용</p><p>엄청난 텍스트 내용</p><p>엄청난 텍스트 내용</p><p>엄청난 텍스트 내용</p><p>엄청난 텍스트 내용</p>
                    <p>엄청난 텍스트 내용</p><p>엄청난 텍스트 내용</p><p>엄청난 텍스트 내용</p><p>엄청난 텍스트 내용</p><p>엄청난 텍스트 내용</p>
                    <p>엄청난 텍스트 내용</p><p>엄청난 텍스트 내용</p><p>엄청난 텍스트 내용</p><p>엄청난 텍스트 내용</p><p>엄청난 텍스트 내용</p>
                    <p>엄청난 텍스트 내용</p><p>엄청난 텍스트 내용</p><p>엄청난 텍스트 내용</p><p>엄청난 텍스트 내용</p><p>엄청난 텍스트 내용</p>
               </div>
               <div id="section03">
                    <h3>영역 3</h3>
                    <p>엄청난 텍스트 내용</p><p>엄청난 텍스트 내용</p><p>엄청난 텍스트 내용</p><p>엄청난 텍스트 내용</p><p>엄청난 텍스트 내용</p>
                    <p>엄청난 텍스트 내용</p><p>엄청난 텍스트 내용</p><p>엄청난 텍스트 내용</p><p>엄청난 텍스트 내용</p><p>엄청난 텍스트 내용</p>
                    <p>엄청난 텍스트 내용</p><p>엄청난 텍스트 내용</p><p>엄청난 텍스트 내용</p><p>엄청난 텍스트 내용</p><p>엄청난 텍스트 내용</p>
                    <p>엄청난 텍스트 내용</p><p>엄청난 텍스트 내용</p><p>엄청난 텍스트 내용</p><p>엄청난 텍스트 내용</p><p>엄청난 텍스트 내용</p>
                    <p>엄청난 텍스트 내용</p><p>엄청난 텍스트 내용</p><p>엄청난 텍스트 내용</p><p>엄청난 텍스트 내용</p><p>엄청난 텍스트 내용</p>
                    <p>엄청난 텍스트 내용</p><p>엄청난 텍스트 내용</p><p>엄청난 텍스트 내용</p><p>엄청난 텍스트 내용</p><p>엄청난 텍스트 내용</p>
                    <p>엄청난 텍스트 내용</p><p>엄청난 텍스트 내용</p><p>엄청난 텍스트 내용</p><p>엄청난 텍스트 내용</p><p>엄청난 텍스트 내용</p>
               </div>
          </div>          
          <div class="span3">
               <h3>사이드 바</h3>
               <!-- 아래 클래스는 사용자가 임의로 만든 클래스 -->
               <div class="theScrollSpy">
                    <ul class="nav nav-pills nav-stacked affix">
                         <li><a href="#section01">영역 1</a></li>
                         <li><a href="#section02">영역 2</a></li>
                         <li><a href="#section03">영역 3</a></li>
                    </ul>
               </div>
          </div>
     </div>
</div>
</body>
</html>
----------------------------------- 
###################################
4. 과제
-----------------------------------
-----------------------------------
###################################
5. 과제 해결
-----------------------------------
-----------------------------------
###################################
6. 기타
----------------------------------- 
----------------------------------- 


저작자표시 비영리 변경금지 (새창열림)