[Bootstrap] 예제
- FRONTEND/Bootstrap
- 2017. 12. 29. 13:18
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../bootstrap337/css/bootstrap.min.css">
</head>
<body>
<div class="jumbotron text-center">
<h1>My First Bootstrap Page</h1>
<p>Resize this responsive page to see the effect!</p>
</div>
<div class="container">
<div class="row">
<div class="col-sm-4">
<h3>Column 1</h3>
<p>Lorem ipsum dolor..</p>
<p>Ut enim ad..</p>
</div>
<div class="col-sm-4">
<h3>Column 2</h3>
<p>Lorem ipsum dolor..</p>
<p>Ut enim ad..</p>
</div>
<div class="col-sm-4">
<h3>Column 3</h3>
<p>Lorem ipsum dolor..</p>
<p>Ut enim ad..</p>
</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../bootstrap337/css/bootstrap.min.css">
<title>Insert title here</title>
</head>
<body>
<h2>가시성 테스트</h2>
<p>이 글은 모든 해상도에 보입니다.</p>
<h3>visible-*(기본값이 hidden)</h3>
<p class="visible-lg">현재 글은 1200px 이상 해상도에서만 보입니다.</p>
<p class="visible-md">현재 글은 992~1200px 이상 해상도에서만 보입니다.</p>
<p class="visible-sm">현재 글은 768~992px 이상 해상도에서만 보입니다.</p>
<p class="visible-xs">현재 글은 768px 이하 해상도에서만 보입니다.</p>
<h3>visible-*(기본값이 visible)</h3>
<p class="hidden-lg">현재 글은 1200px 이상 해상도에서만 보입니다.</p>
<p class="hidden-md">현재 글은 992~1200px 이상 해상도에서만 보입니다.</p>
<p class="hidden-sm">현재 글은 768~992px 이상 해상도에서만 보입니다.</p>
<p class="hidden-xs">현재 글은 768px 이하 해상도에서만 보입니다.</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../bootstrap337/css/bootstrap.min.css">
<title>Insert title here</title>
<style>
div{border:1px solid red}
</style>
</head>
<body>
<h3>2단 레이아웃</h3>
<div class="col-md-4">컬럼 4개</div>
<div class="col-md-8">컬럼 8개</div>
<h3>3단 레이아웃</h3>
<div class="col-md-3">컬럼 3개</div>
<div class="col-md-6">컬럼 6개</div>
<div class="col-md-3">컬럼 3개</div>
<h3>2단과 3단의 혼용</h3>
<div class="row">
<div class="col-md-3 hidden-xs">컬럼 3개</div>
<div class="col-md-6 col-xs-3">컬럼 6개 - 3개로 변경</div>
<div class="col-md-3 col-xs-6">컬럼 3개 - 6개로 변경</div>
</div>
<h3>컨테이너 사용(고정크기)</h3>
<div class="container">
<div class="row">
<div class="col-md-3 hidden-xs">컬럼 3개</div>
<div class="col-md-6 col-xs-3">컬럼 6개 - 3개로 변경</div>
<div class="col-md-3 col-xs-6">컬럼 3개 - 6개로 변경</div>
</div>
</div>
<h3>컨테이너 사용(유동크기)</h3>
<div class="container-fluid">
<div class="row">
<div class="col-md-3 hidden-xs">컬럼 3개</div>
<div class="col-md-6 col-xs-3">컬럼 6개 - 3개로 변경</div>
<div class="col-md-3 col-xs-6">컬럼 3개 - 6개로 변경</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../bootstrap337/css/bootstrap.min.css">
<title>Insert title here</title>
</head>
<body>
For example, <code><section></code> shoud be wrapped
<hr/>
<pre class="pre-scrollable">
<p>Sample text here...</p>
<p>Sample text here...</p>
<p>Sample text here...</p>
<p>Sample text here...</p>
<p>Sample text here...</p>
<p>Sample text here...</p>
<p>Sample text here...</p>
<p>Sample text here...</p>
<p>Sample text here...</p>
<p>Sample text here...</p>
<p>Sample text here...</p>
<p>Sample text here...</p>
<p>Sample text here...</p>
<p>Sample text here...</p>
<p>Sample text here...</p>
<p>Sample text here...</p>
<p>Sample text here...</p>
<p>Sample text here...</p>
<p>Sample text here...</p>
<p>Sample text here...</p>
</pre>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../bootstrap337/css/bootstrap.min.css">
<title>Insert title here</title>
<style>
.table-hover>tbody>tr:hover {
background-color: yellow;
}
</style>
</head>
<body>
<div class="col-md-8">
<table class="table table-bordered table-hover table-condensed table-striped">
<caption>강의 리스트</caption>
<thead>
<tr>
<th>구분</th> <th>제목</th>
</tr>
</thead>
<tbody>
<tr>
<td>프로그래밍 언어</td><td>JAVA</td>
</tr>
<tr>
<td>프로그래밍 언어</td><td>C++</td>
</tr>
<tr>
<td>디자인</td><td>Photoshop</td>
</tr>
<tr>
<td>멀티미디어</td><td>Premiere</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../bootstrap337/css/bootstrap.min.css">
<title>Insert title here</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<h2>기본 폼</h2>
<form>
<fieldset>
<legend>범례</legend>
<label>라벨</label>
<input type="text" placeholder="플레이스 홀더"/>
<span class="help-block"> 샘플 도움말 텍스트 </span>
<label class="checkbox"><input type="checkbox"/>체크박스</label>
<button type="submit" class="btn btn-primary">전송</button>
</fieldset>
</form>
</div>
</div>
<div class="row">
<div class="col-md-12">
<h2>폼 레이아웃 옵션</h2>
<h3>1. 일반 폼</h3>
<form>
<label for="txtEmail">이메일</label>
<input type="text" id="txtEmail" class= "form-control" placeholder="이메일 입력"/>
</form>
<h3>2. 검색 폼</h3>
<form>
<div class="input-group">
<input type="search" class= "form-control" placeholder="검색"/>
<div class="input-group-btn">
<button type="submit" class= "btn btn-info"><span class="glyphicon glyphicon-search"/></button>
</div>
</div>
</form>
<h3>3. 인라인 폼</h3>
<form class="form-inline">
<input type="text" class= "form-control" placeholder="이메일 입력"/>
<input type="text" class= "form-control" placeholder="패스워드 입력"/>
<label class="checkbox"><input type="checkbox"/>체크박스</label>
</form>
<h3>4. 수평 폼</h3>
<form class="form-horizontal`">
<div class="form-group">
<label class="col-md-3 control-label">이메일</label>
<div class="col-md-9 controls">
<input type="text" class="form-control"/>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">암호</label>
<div class="col-md-9 controls">
<input type="password" class="form-control"/>
</div>
</div>
<div class="form-group">
<div class="controls col-sm-9 col-sm-offset-3">
<label><input type="checkbox"/>체크박스</label>
<input type="submit" value="로그인" class="btn btn-primary"/>
</div>
</div>
</form>
<div class="row">
<div class="col-md-12">
<h2>유효성 검사</h2>
<form action="test.jsp">
<input type="email" required="required"/>
<button type="submit">전송</button>
</form>
</div>
</div>
<br><br><br><br><br><br><br><br><br><br><br>
</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../bootstrap337/css/bootstrap.min.css">
<title>Insert title here</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<span class="glyphicon glyphicon-user"/>
<span class="glyphicon glyphicon-th-list"/>
<span class="glyphicon glyphicon-gift"/>
<hr/>
<h1><span class="glyphicon glyphicon-thumbs-up"/></h1>
</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../bootstrap337/css/bootstrap.min.css">
<title>Insert title here</title>
<script src="../bootstrap337/js/jquery-3.2.1.min.js"></script>
<script src="../bootstrap337/js/bootstrap.min.js"></script>
<style>
body{margin-top:50px}
</style>
</head>
<body>
<!-- navbar -->
<nav class="navbar navbar-default navbar-fixed-top navbar-inverse">
<div class="navbar-inner">
<a href="#" class="btn btn-navbar navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav ">
<li><a href="#" class="brand">BRAND</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
<form class="navbar-form pull-right">
<input type="text"/>
<input type="submit" value="검색"/>
</form>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-md-9">
내용이 들어오는 곳..<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="col-md-3">
<ul class="nav nav-list">
<li class="nav-header">메뉴 선택</li>
<li><a href="#">Home</a></li>
<li class="active"><a href="#">Contact</a></li>
<li><a href="#">Abut</a></li>
<hr/>
<li class="nav-header">메뉴 선택</li>
<li><a href="#">Home</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Abut</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../bootstrap337/css/bootstrap.min.css">
<script src="../bootstrap337/js/jquery-3.2.1.min.js"></script>
<script src="../bootstrap337/js/bootstrap.min.js"></script>
<title>Insert title here</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="dropdown">
<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><a href="#">w3schools.com</a></li>
<li><a href="#">getbootrap.com</a></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><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="dropdown dropup">
<a href="#" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">즐겨찾기<span class="caret"></span></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><a href="#">w3schools.com</a></li>
<li><a href="#">getbootrap.com</a></li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
'FRONTEND > Bootstrap' 카테고리의 다른 글
| [Bootstrap] modal에서 영역 밖을 선택했을 때 modal 닫히는걸 방지하는 방법 (0) | 2018.11.08 |
|---|---|
| [Bootstrap] 부트스트랩 (0) | 2017.12.28 |