1 개요[ | ]
- Bootstrap 대시보드 템플릿
- 부트스트랩 dashboard template
- 한국어 적용 + 폰트 스타일 적용[1]
- 최신 온라인 css, js 적용
- 예제: http://zetawiki.com/ex/bootstrap/dashboard.php
2 소스 코드[ | ]
html
Copy
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>대시보드 템플릿</title>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
* { font-family: NanumGothic, 'Malgun Gothic'; }
body { padding-top: 50px; }
.sub-header {
padding-bottom: 10px;
border-bottom: 1px solid #eee;
}
.navbar-fixed-top { border: 0; }
.sidebar { display: none; }
@media (min-width: 768px) {
.sidebar {
position: fixed;
top: 51px;
bottom: 0;
left: 0;
z-index: 1000;
display: block;
padding: 20px;
overflow-x: hidden;
overflow-y: auto;
background-color: #f5f5f5;
border-right: 1px solid #eee;
}
}
.nav-sidebar {
margin-right: -21px;
margin-bottom: 20px;
margin-left: -20px;
}
.nav-sidebar > li > a {
padding-right: 20px;
padding-left: 20px;
}
.nav-sidebar > .active > a,
.nav-sidebar > .active > a:hover,
.nav-sidebar > .active > a:focus {
color: #fff;
background-color: #428bca;
}
.main { padding: 20px; }
@media (min-width: 768px) {
.main {
padding-right: 40px;
padding-left: 40px;
}
}
.main .page-header { margin-top: 0; }
.placeholders {
margin-bottom: 30px;
text-align: center;
}
.placeholders h4 { margin-bottom: 0; }
.placeholder { margin-bottom: 20px; }
.placeholder img {
display: inline-block;
border-radius: 50%;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/latest/js/bootstrap.min.js"></script>
<script src="//getbootstrap.com/assets/js/docs.min.js"></script>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">네비게이션 토글</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">대시보드</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">대시보드</a></li>
<li><a href="#">설정</a></li>
<li><a href="#">프로필</a></li>
<li><a href="#">도움말</a></li>
</ul>
<form class="navbar-form navbar-right">
<input type="text" class="form-control" placeholder="검색...">
</form>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-2 sidebar">
<ul class="nav nav-sidebar">
<li class="active"><a href="#">개요</a></li>
<li><a href="#">보고서</a></li>
<li><a href="#">분석결과</a></li>
<li><a href="#">내보내기</a></li>
</ul>
<ul class="nav nav-sidebar">
<li><a href="">네비게이션A1</a></li>
<li><a href="">네비게이션A2</a></li>
<li><a href="">네비게이션A3</a></li>
</ul>
<ul class="nav nav-sidebar">
<li><a href="">네비게이션B1</a></li>
<li><a href="">네비게이션B2</a></li>
</ul>
</div>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
<h1 class="page-header">대시보드</h1>
<div class="row placeholders">
<div class="col-xs-6 col-sm-3 placeholder">
<img data-src="holder.js/200x200/auto/sky" class="img-responsive" alt="Generic placeholder thumbnail">
<h4>이름</h4>
<span class="text-muted">어떤 내용</span>
</div>
<div class="col-xs-6 col-sm-3 placeholder">
<img data-src="holder.js/200x200/auto/vine" class="img-responsive" alt="Generic placeholder thumbnail">
<h4>이름</h4>
<span class="text-muted">어떤 내용</span>
</div>
<div class="col-xs-6 col-sm-3 placeholder">
<img data-src="holder.js/200x200/auto/sky" class="img-responsive" alt="Generic placeholder thumbnail">
<h4>이름</h4>
<span class="text-muted">어떤 내용</span>
</div>
<div class="col-xs-6 col-sm-3 placeholder">
<img data-src="holder.js/200x200/auto/vine" class="img-responsive" alt="Generic placeholder thumbnail">
<h4>이름</h4>
<span class="text-muted">어떤 내용</span>
</div>
</div>
<h2 class="sub-header">처리현황</h2>
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>컬럼1</th>
<th>컬럼2</th>
<th>컬럼3</th>
<th>컬럼4</th>
</tr>
</thead>
<tbody>
<tr>
<td>101</td>
<td>Lorem</td>
<td>ipsum</td>
<td>dolor</td>
<td>dolor</td>
</tr>
<tr>
<td>102</td>
<td>amet</td>
<td>consectetur</td>
<td>adipiscing</td>
<td>dolor</td>
</tr>
<tr>
<td>103</td>
<td>Integer</td>
<td>nec</td>
<td>odio</td>
<td>dolor</td>
</tr>
<tr>
<td>104</td>
<td>dapibus</td>
<td>diam</td>
<td>Sed</td>
<td>dolor</td>
</tr>
<tr>
<td>105</td>
<td>Nulla</td>
<td>quis</td>
<td>sem</td>
<td>dolor</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</body>
</html>
3 같이 보기[ | ]
4 주석[ | ]
- ↑ 나눔고딕, 맑은고딕 폰트 적용
5 참고[ | ]
편집자 Jmnote Jmnote bot
로그인하시면 댓글을 쓸 수 있습니다.