Bootstrap 대시보드 템플릿

1 개요[ | ]

Bootstrap 대시보드 템플릿
부트스트랩 dashboard template

2 소스 코드[ | ]

<!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 주석[ | ]

  1. 나눔고딕, 맑은고딕 폰트 적용

5 참고[ | ]

문서 댓글 ({{ doc_comments.length }})
{{ comment.name }} {{ comment.created | snstime }}