<!-- 그리드 부모 요소 시작 -->
<div class="row">
<div class="col">그리드 자식요소</div>
</div>
<!-- 그리드 부모 요소 종료 -->
<div class="row">
<div class="col left">좌측 정렬</div>
<div class="col center">가운데 정렬</div>
<div class="col right">우측 정렬</div>
</div>
<div class="row row-table">
<div class="col top">상단 정렬</div>
<div class="col middle">가운데 정렬</div>
<div class="col bottom">하단 정렬</div>
</div>
<div class="row">
<div class="col col-pd">기본 패딩</div>
<div class="col col-pd-lg">넓은 패딩</div>
</div>
<div class="row row-auto">
<div class="col-1">.col-1 클래스로 적용되어 있으나 내용이 많으면 크기를 넓혀 줍니다.</div>
</div>
<div class="row">
<div class="col">contents</div>
<div class="col">contents</div>
<div class="col">contents</div>
</div>
<div class="row">
<div class="col col-auto">최소 너비를 가지는 내용</div>
<div class="col-1 col-auto">.col-1이 적용되었으나, col-1 보다 큰 너비의 내용에 대해서도 너비를 적용 할 수 있습니다.</div>
</div>
<div class="row row-weight">
<div class="col-1">.col-1이 적용되었으나 1/12 너비가 아닌 1/3 너비</div>
<div class="col-2">.col-2이 적용되었으나 2/12 너비가 아닌 2/3 너비</div>
</div>
<div class="row">
<div class="col-2">.col-2</div>
<div class="col-3 col-ofs-2">2/12 만큼 띄워 그리드 적용 (.col-3 .col-ofs-2)</div>
</div>
<div class="row row-compact">
<div class="col col-pd col-auto">contents</div>
<div class="col col-pd col-auto">contents</div>
</div>
<h1>H1</h1>
<h2>H2</h2>
<h3>H3</h3>
<h4>H4</h4>
<h5>H5</h5>
<h6>H6</h6>
<ul>
<li>ITEM1</li>
<li>ITEM2</li>
<li>ITEM3</li>
<li>ITEM4</li>
<li>ITEM5</li>
</ul>
<ol>
<li>ITEM1</li>
<li>ITEM2</li>
<li>ITEM3</li>
<li>ITEM4</li>
<li>ITEM5</li>
</ol>
<h1>H1</h1>
<h2>H2</h2>
<h3>H3</h3>
<h4>H4</h4>
<h5>H5</h5>
<h6>H6</h6>
* PRIMARY 이 영역 안쪽의 내용은 강조됩니다.
NORMAL 이 영역 안쪽의 내용은 강조됩니다.
DEFAULT 이 영역 안쪽의 내용은 강조됩니다.
FORCE 이 영역 안쪽의 내용은 강조됩니다.
NOTICE 이 영역 안쪽의 내용은 강조됩니다.
COBALT 이 영역 안쪽의 내용은 강조됩니다.
DANGER 이 영역 안쪽의 내용은 강조됩니다.
ALERT 이 영역 안쪽의 내용은 강조됩니다.
SUCCESS 이 영역 안쪽의 내용은 강조됩니다.
<div class="guide">
이곳에는 내용이 들어갈 수 있습니다.
</div>
<a href="#" class="btn">NORMAL</a>
<a href="#" class="btn btn-default">DEFAULT</a>
<a href="#" class="btn btn-force">FORCE</a>
<a href="#" class="btn btn-primary">PRIMARYT</a>
<a href="#" class="btn btn-notice">NOTICE</a>
<a href="#" class="btn btn-cobalt">COBALT</a>
<a href="#" class="btn btn-danger">DANGER</a>
<a href="#" class="btn btn-alert">ALERT</a>
<a href="#" class="btn btn-success">SUCCESS</a>
<a href="#" class="btn btn-bordered">NORMAL</a>
<a href="#" class="btn btn-bordered btn-default">DEFAULT</a>
<a href="#" class="btn btn-bordered btn-force">FORCE</a>
<a href="#" class="btn btn-bordered btn-primary">PRIMARYT</a>
<a href="#" class="btn btn-bordered btn-notice">NOTICE</a>
<a href="#" class="btn btn-bordered btn-cobalt">COBALT</a>
<a href="#" class="btn btn-bordered btn-danger">DANGER</a>
<a href="#" class="btn btn-bordered btn-alert">ALERT</a>
<a href="#" class="btn btn-bordered btn-success">SUCCESS</a>
<a href="#" class="btn btn-material">NORMAL</a>
<a href="#" class="btn btn-material btn-default">DEFAULT</a>
<a href="#" class="btn btn-material btn-force">FORCE</a>
<a href="#" class="btn btn-material btn-primary">PRIMARYT</a>
<a href="#" class="btn btn-material btn-notice">NOTICE</a>
<a href="#" class="btn btn-material btn-cobalt">COBALT</a>
<a href="#" class="btn btn-material btn-danger">DANGER</a>
<a href="#" class="btn btn-material btn-alert">ALERT</a>
<a href="#" class="btn btn-material btn-success">SUCCESS</a>
<a href="#" class="btn btn-rounded">NORMAL</a>
<a href="#" class="btn btn-rounded btn-default">DEFAULT</a>
<a href="#" class="btn btn-rounded btn-force">FORCE</a>
<a href="#" class="btn btn-rounded btn-primary">PRIMARYT</a>
<a href="#" class="btn btn-rounded btn-notice">NOTICE</a>
<a href="#" class="btn btn-rounded btn-cobalt">COBALT</a>
<a href="#" class="btn btn-rounded btn-danger">DANGER</a>
<a href="#" class="btn btn-rounded btn-alert">ALERT</a>
<a href="#" class="btn btn-rounded btn-success">SUCCESS</a>
<a href="#" class="btn btn-rounded btn-bordered">NORMAL</a>
<a href="#" class="btn btn-rounded btn-bordered btn-default">DEFAULT</a>
<a href="#" class="btn btn-rounded btn-bordered btn-force">FORCE</a>
<a href="#" class="btn btn-rounded btn-bordered btn-primary">PRIMARYT</a>
<a href="#" class="btn btn-rounded btn-bordered btn-notice">NOTICE</a>
<a href="#" class="btn btn-rounded btn-bordered btn-cobalt">COBALT</a>
<a href="#" class="btn btn-rounded btn-bordered btn-danger">DANGER</a>
<a href="#" class="btn btn-rounded btn-bordered btn-alert">ALERT</a>
<a href="#" class="btn btn-rounded btn-bordered btn-success">SUCCESS</a>
<a href="#" class="btn btn-rounded btn-material">NORMAL</a>
<a href="#" class="btn btn-rounded btn-material btn-default">DEFAULT</a>
<a href="#" class="btn btn-rounded btn-material btn-force">FORCE</a>
<a href="#" class="btn btn-rounded btn-material btn-primary">PRIMARYT</a>
<a href="#" class="btn btn-rounded btn-material btn-notice">NOTICE</a>
<a href="#" class="btn btn-rounded btn-material btn-cobalt">COBALT</a>
<a href="#" class="btn btn-rounded btn-material btn-danger">DANGER</a>
<a href="#" class="btn btn-rounded btn-material btn-alert">ALERT</a>
<a href="#" class="btn btn-rounded btn-material btn-success">SUCCESS</a>
<div class="btn-group">
<a href="#" class="btn" ripple="dark">NORMAL 1</a>
<a href="#" class="btn" ripple="dark">NORMAL 2</a>
</div>
<div class="btn-group">
<a href="#" class="btn btn-default" ripple="dark">DEFAULT 1</a>
<a href="#" class="btn btn-default" ripple="dark">DEFAULT 2</a>
</div>
<div class="btn-group">
<a href="#" class="btn btn-force" ripple="dark">FORCE 1</a>
<a href="#" class="btn btn-force" ripple="dark">FORCE 2</a>
</div>
<div class="btn-group">
<a href="#" class="btn btn-primary" ripple="dark">PRIMARY 1 *</a>
<a href="#" class="btn btn-primary" ripple="dark">PRIMARY 2 *</a>
</div>
<div class="btn-group">
<a href="#" class="btn btn-notice" ripple="dark">NOTICE 1</a>
<a href="#" class="btn btn-notice" ripple="dark">NOTICE 2</a>
</div>
<div class="btn-group">
<a href="#" class="btn btn-cobalt" ripple="dark">COBALT 1</a>
<a href="#" class="btn btn-cobalt" ripple="dark">COBALT 2</a>
</div>
<div class="btn-group">
<a href="#" class="btn btn-danger" ripple="dark">DANGER 1</a>
<a href="#" class="btn btn-danger" ripple="dark">DANGER 2</a>
</div>
<div class="btn-group">
<a href="#" class="btn btn-alert" ripple="dark">ALERT 1</a>
<a href="#" class="btn btn-alert" ripple="dark">ALERT 2</a>
</div>
<div class="btn-group">
<a href="#" class="btn btn-success" ripple="dark">SUCCESS 1</a>
<a href="#" class="btn btn-success" ripple="dark">SUCCESS 2</a>
</div>
<div class="btn-group">
<a href="#" class="btn btn-bordered" ripple="dark">NORMAL 1</a>
<a href="#" class="btn btn-bordered" ripple="dark">NORMAL 2</a>
</div>
<div class="btn-group">
<a href="#" class="btn btn-bordered btn-default" ripple="dark">DEFAULT 1</a>
<a href="#" class="btn btn-bordered btn-default" ripple="dark">DEFAULT 2</a>
</div>
<div class="btn-group">
<a href="#" class="btn btn-bordered btn-force" ripple="dark">FORCE 1</a>
<a href="#" class="btn btn-bordered btn-force" ripple="dark">FORCE 2</a>
</div>
<div class="btn-group">
<a href="#" class="btn btn-bordered btn-primary" ripple="dark">PRIMARY 1 *</a>
<a href="#" class="btn btn-bordered btn-primary" ripple="dark">PRIMARY 2 *</a>
</div>
<div class="btn-group">
<a href="#" class="btn btn-bordered btn-notice" ripple="dark">NOTICE 1</a>
<a href="#" class="btn btn-bordered btn-notice" ripple="dark">NOTICE 2</a>
</div>
<div class="btn-group">
<a href="#" class="btn btn-bordered btn-cobalt" ripple="dark">COBALT 1</a>
<a href="#" class="btn btn-bordered btn-cobalt" ripple="dark">COBALT 2</a>
</div>
<div class="btn-group">
<a href="#" class="btn btn-bordered btn-danger" ripple="dark">DANGER 1</a>
<a href="#" class="btn btn-bordered btn-danger" ripple="dark">DANGER 2</a>
</div>
<div class="btn-group">
<a href="#" class="btn btn-bordered btn-alert" ripple="dark">ALERT 1</a>
<a href="#" class="btn btn-bordered btn-alert" ripple="dark">ALERT 2</a>
</div>
<div class="btn-group">
<a href="#" class="btn btn-bordered btn-success" ripple="dark">SUCCESS 1</a>
<a href="#" class="btn btn-bordered btn-success" ripple="dark">SUCCESS 2</a>
</div>
<div class="btn-group">
<a href="#" class="btn btn-material" ripple="dark">NORMAL 1</a>
<a href="#" class="btn btn-material" ripple="dark">NORMAL 2</a>
</div>
<div class="btn-group">
<a href="#" class="btn btn-material btn-default" ripple="dark">DEFAULT 1</a>
<a href="#" class="btn btn-material btn-default" ripple="dark">DEFAULT 2</a>
</div>
<div class="btn-group">
<a href="#" class="btn btn-material btn-force" ripple="dark">FORCE 1</a>
<a href="#" class="btn btn-material btn-force" ripple="dark">FORCE 2</a>
</div>>
<div class="btn-group">
<a href="#" class="btn btn-material btn-primary" ripple="dark">PRIMARY 1 *</a>
<a href="#" class="btn btn-material btn-primary" ripple="dark">PRIMARY 2 *</a>
</div>
<div class="btn-group">
<a href="#" class="btn btn-material btn-notice" ripple="dark">NOTICE 1</a>
<a href="#" class="btn btn-material btn-notice" ripple="dark">NOTICE 2</a>
</div>
<div class="btn-group">
<a href="#" class="btn btn-material btn-cobalt" ripple="dark">COBALT 1</a>
<a href="#" class="btn btn-material btn-cobalt" ripple="dark">COBALT 2</a>
</div>
<div class="btn-group">
<a href="#" class="btn btn-material btn-danger" ripple="dark">DANGER 1</a>
<a href="#" class="btn btn-material btn-danger" ripple="dark">DANGER 2</a>
</div>
<div class="btn-group">
<a href="#" class="btn btn-material btn-alert" ripple="dark">ALERT 1</a>
<a href="#" class="btn btn-material btn-alert" ripple="dark">ALERT 2</a>
</div>
<div class="btn-group">
<a href="#" class="btn btn-material btn-success" ripple="dark">SUCCESS 1</a>
<a href="#" class="btn btn-material btn-success" ripple="dark">SUCCESS 2</a>
</div>
<div class="btn-group">
<a href="#" class="btn btn-rounded" ripple="dark">NORMAL 1</a>
<a href="#" class="btn btn-rounded" ripple="dark">NORMAL 2</a>
</div>
<div class="btn-group">
<a href="#" class="btn btn-rounded btn-default" ripple="dark">DEFAULT 1</a>
<a href="#" class="btn btn-rounded btn-default" ripple="dark">DEFAULT 2</a>
</div>
<div class="btn-group">
<a href="#" class="btn btn-rounded btn-force" ripple="dark">FORCE 1</a>
<a href="#" class="btn btn-rounded btn-force" ripple="dark">FORCE 2</a>
</div>
<div class="btn-group">
<a href="#" class="btn btn-rounded btn-primary" ripple="dark">PRIMARY 1 *</a>
<a href="#" class="btn btn-rounded btn-primary" ripple="dark">PRIMARY 2 *</a>
</div>
<div class="btn-group">
<a href="#" class="btn btn-rounded btn-notice" ripple="dark">NOTICE 1</a>
<a href="#" class="btn btn-rounded btn-notice" ripple="dark">NOTICE 2</a>
</div>
<div class="btn-group">
<a href="#" class="btn btn-rounded btn-cobalt" ripple="dark">COBALT 1</a>
<a href="#" class="btn btn-rounded btn-cobalt" ripple="dark">COBALT 2</a>
</div>
<div class="btn-group">
<a href="#" class="btn btn-rounded btn-danger" ripple="dark">DANGER 1</a>
<a href="#" class="btn btn-rounded btn-danger" ripple="dark">DANGER 2</a>
</div>
<div class="btn-group">
<a href="#" class="btn btn-rounded btn-alert" ripple="dark">ALERT 1</a>
<a href="#" class="btn btn-rounded btn-alert" ripple="dark">ALERT 2</a>
</div>
<div class="btn-group">
<a href="#" class="btn btn-rounded btn-success" ripple="dark">SUCCESS 1</a>
<a href="#" class="btn btn-rounded btn-success" ripple="dark">SUCCESS 2</a>
</div>
<span class="btn btn-file" ripple="dark">
<input type="file" class="file" />
<span>NORMAL</span>
</span>
<span class="btn btn-default btn-file" ripple="dark">
<input type="file" class="file" />
<span>DEFAULT</span>
</span>
<span class="btn btn-force btn-file" ripple="dark">
<input type="file" class="file" />
<span>FORCE</span>
</span>
<span class="btn btn-primary btn-file" ripple="dark">
<input type="file" class="file" />
<span>PRIMARY *</span>
</span>
<span class="btn btn-notice btn-file" ripple="dark">
<input type="file" class="file" />
<span>NOTICE</span>
</span>
<span class="btn btn-cobalt btn-file" ripple="dark">
<input type="file" class="file" />
<span>COBALT</span>
</span>
<span class="btn btn-danger btn-file" ripple="dark">
<input type="file" class="file" />
<span>DANGER</span>
</span>
<span class="btn btn-alert btn-file" ripple="dark">
<input type="file" class="file" />
<span>ALERT</span>
</span>
<span class="btn btn-success btn-file" ripple="dark">
<input type="file" class="file" />
<span>SUCCESS</span>
</span>
<a href="#" class="btn btn-xs">EXTRA SMALL</a>
<a href="#" class="btn btn-sm">SMALL</a>
<a href="#" class="btn">NORMAL</a>
<a href="#" class="btn btn-lg">LARGE</a>
<a href="#" class="btn btn-xg">EXTRA LARGE</a>
<a href="#" class="btn btn-block">BLOCK BUTTON</a>
<a href="#" class="floating"><!--NORMAL FLOATING--></a>
<a href="#" class="floating floating-default"><!--DEFAULT FLOATING--></a>
<a href="#" class="floating floating-force"><!--FORCE FLOATING--></a>
<a href="#" class="floating floating-primary"><!--PRIMARY FLOATING--></a>
<a href="#" class="floating floating-notice"><!--NOTICE FLOATING--></a>
<a href="#" class="floating floating-cobalt"><!--COBALT FLOATING--></a>
<a href="#" class="floating floating-danger"><!--DANGER FLOATING--></a>
<a href="#" class="floating floating-alert"><!--ALERT FLOATING--></a>
<a href="#" class="floating floating-success"><!--SUCCESS FLOATING--></a>
<span class="label">NORMAL</span>
<span class="label label-default">DEFAULT</span>
<span class="label label-force">FORCE</span>
<span class="label label-primary">PRIMARY *</span>
<span class="label label-notice">NOTICE</span>
<span class="label label-cobalt">COBALT</span>
<span class="label label-danger">DANGER</span>
<span class="label label-alert">ALERT</span>
<span class="label label-success">SUCCESS</span>
<a href="#" class="btn btn-bordered">NORMAL</a>
<a href="#" class="btn btn-bordered btn-default">DEFAULT</a>
<a href="#" class="btn btn-bordered btn-force">FORCE</a>
<a href="#" class="btn btn-bordered btn-primary">PRIMARYT</a>
<a href="#" class="btn btn-bordered btn-notice">NOTICE</a>
<a href="#" class="btn btn-bordered btn-cobalt">COBALT</a>
<a href="#" class="btn btn-bordered btn-danger">DANGER</a>
<a href="#" class="btn btn-bordered btn-alert">ALERT</a>
<a href="#" class="btn btn-bordered btn-success">SUCCESS</a>
<span class="label label-primary label-xs">EXTRA SMALL</span>
<span class="label label-primary label-sm">SMALL</span>
<span class="label label-primary">NORMAL</span>
<span class="label label-primary label-lg">LARGE</span>
<span class="label label-primary label-xg">EXTRA LARGE</span>
<span class="badge badge-primary badge-xs">EXTRA SMALL</span>
<span class="badge badge-primary badge-sm">SMALL</span>
<span class="badge badge-primary">NORMAL</span>
<span class="badge badge-primary badge-lg">LARGE</span>
<span class="badge badge-primary badge-xg">EXTRA LARGE</span>
<input type="text" class="input" input placeholder="NORMAL" />
<input type="text" class="input input-default" input placeholder="DEFAULT" />
<input type="text" class="input input-force" input placeholder="FORCE" />
<input type="text" class="input input-primary" input placeholder="PRIMARY" />
<input type="text" class="input input-notice" input placeholder="NOTICE" />
<input type="text" class="input input-cobalt" input placeholder="COBALT" />
<input type="text" class="input input-danger" input placeholder="DANGER" />
<input type="text" class="input input-alert" input placeholder="ALERT" />
<input type="text" class="input input-success" input placeholder="SUCCESS" />
<select class="input" spinner>
<option>NORMAL OPTION1</option>
<option>NORMAL OPTION2</option>
<option>NORMAL OPTION3</option>
<option>NORMAL OPTION4</option>
<option>NORMAL OPTION5</option>
</select>
<select class="input input-default" spinner>
<option>DEFAULT OPTION1</option>
<option>DEFAULT OPTION2</option>
<option>DEFAULT OPTION3</option>
<option>DEFAULT OPTION4</option>
<option>DEFAULT OPTION5</option>
</select>
<select class="input input-force" spinner>
<option>FORCE OPTION1</option>
<option>FORCE OPTION2</option>
<option>FORCE OPTION3</option>
<option>FORCE OPTION4</option>
<option>FORCE OPTION5</option>
</select>
<select class="input input-primary" spinner>
<option>PRIMARY * OPTION1</option>
<option>PRIMARY * OPTION2</option>
<option>PRIMARY * OPTION3</option>
<option>PRIMARY * OPTION4</option>
<option>PRIMARY * OPTION5</option>
</select>
<select class="input input-notice" spinner>
<option>NOTICE OPTION1</option>
<option>NOTICE OPTION2</option>
<option>NOTICE OPTION3</option>
<option>NOTICE OPTION4</option>
<option>NOTICE OPTION5</option>
</select>
<select class="input input-cobalt" spinner>
<option>COBALT OPTION1</option>
<option>COBALT OPTION2</option>
<option>COBALT OPTION3</option>
<option>COBALT OPTION4</option>
<option>COBALT OPTION5</option>
</select>
<select class="input input-danger" spinner>
<option>DANGER OPTION1</option>
<option>DANGER OPTION2</option>
<option>DANGER OPTION3</option>
<option>DANGER OPTION4</option>
<option>DANGER OPTION5</option>
</select>
<select class="input input-alert" spinner>
<option>ALERT OPTION1</option>
<option>ALERT OPTION2</option>
<option>ALERT OPTION3</option>
<option>ALERT OPTION4</option>
<option>ALERT OPTION5</option>
</select>
<select class="input input-success" spinner>
<option>SUCCESS OPTION1</option>
<option>SUCCESS OPTION2</option>
<option>SUCCESS OPTION3</option>
<option>SUCCESS OPTION4</option>
<option>SUCCESS OPTION5</option>
</select>
<label>
<input type="checkbox" class="input" checkbox />
<span>NORMAL</span>
</label>
<label>
<input type="checkbox" class="input input-default" checkbox />
<span>DEFAULT</span>
</label>
<label>
<input type="checkbox" class="input input-force" checkbox />
<span>FORCE</span>
</label>
<label>
<input type="checkbox" class="input input-primary" checkbox />
<span>PRIMARY *</span>
</label>
<label>
<input type="checkbox" class="input input-notice" checkbox />
<span>NOTICE</span>
</label>
<label>
<input type="checkbox" class="input input-cobalt" checkbox />
<span>COBALT</span>
</label>
<label>
<input type="checkbox" class="input input-danger" checkbox />
<span>DANGER</span>
</label>
<label>
<input type="checkbox" class="input input-alert" checkbox />
<span>ALERT</span>
</label>
<label>
<input type="checkbox" class="input input-success" checkbox />
<span>SUCCESS</span>
</label>
<input type="radio" class="input" toggle placeholder="['Off', 'NORMAL']" />
<input type="radio" class="input input-default" toggle placeholder="['Off', 'DEFAULT']" />
<input type="radio" class="input input-force" toggle placeholder="['Off', 'FORCE']" />
<input type="radio" class="input input-primary" toggle placeholder="['Off', 'PRIMARY']" />
<input type="radio" class="input input-notice" toggle placeholder="['Off', 'NOTICE']" />
<input type="radio" class="input input-cobalt" toggle placeholder="['Off', 'COBALT']" />
<input type="radio" class="input input-danger" toggle placeholder="['Off', 'DANGER']" />
<input type="radio" class="input input-alert" toggle placeholder="['Off', 'ALERT']" />
<input type="radio" class="input input-success" toggle placeholder="['Off', 'SUCCESS']" />
<!-- DROPDOWN [NORMAL] START -->
<a href="#" class="btn btn-default btn-dropdown-default">DROPDOWN</a>
<div class="dropdown" dropdown="true" pen=".btn-dropdown-default" direction="center">
<a href="#" class="dropdown-menu" onClick="toast('Dropdown 1');">Dropdown Menu 1</a>
<a href="#" class="dropdown-menu" onClick="toast('Dropdown 2');">Dropdown Menu 2</a>
<a href="#" class="dropdown-menu" onClick="toast('Dropdown 3');">Dropdown Menu 3</a>
</div>
<!-- DROPDOWN [NORMAL] END -->
<!-- DROPDOWN [ADVANCED] START -->
<a href="#" class="btn btn-default btn-dropdown-advanced">DROPDOWN (ADVANCED)</a>
<div class="dropdown" dropdown="true" pen=".btn-dropdown-advanced" direction="center">
<a href="#" class="dropdown-menu" onClick="toast('Dropdown 1');">
<i class="fa fa-info-circle" aria-hidden="true"></i>
<span>Dropdown Menu 1</span>
</a>
<a href="#" class="dropdown-menu" onClick="toast('Dropdown 2');">
<i class="fa fa-heart" aria-hidden="true"></i>
<span>Dropdown Menu 2</span>
</a>
<div class="dropdown-divider"> </div>
<a href="#" class="dropdown-menu" onClick="toast('Dropdown 3');">
<i class="fa fa-cog" aria-hidden="true"></i>
<span>Dropdown Menu 3</span>
</a>
</div>
<!-- DROPDOWN [ADVANCED] END -->
<a href="#" class="btn btn-material btn-block" tooltip="LEFT" tooltip-direction="left">LEFT</a>
<a href="#" class="btn btn-material btn-block" tooltip="TOP" tooltip-direction="top">TOP</a>
<a href="#" class="btn btn-material btn-block" tooltip="RIGHT" tooltip-direction="right">RIGHT</a>
<a href="#" class="btn btn-material btn-block" tooltip="BOTTOM" tooltip-direction="bottom">BOTTOM</a>
<script>notificaiton('HELLO HOMEWOKRS!'m '노티피케이션 노출 내용을 여기에 제공해주시기 바랍니다.');</script>
<table class="table table-bordered">
<thead>
<tr>
<th>No</th>
<th>Subject1</th>
<th>Subject2</th>
<th>Subject3</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<th>Contents1</th>
<th>Contents2</th>
<th>Contents3</th>
</tr>
<tr>
<th>2</th>
<th>Contents1</th>
<th>Contents2</th>
<th>Contents3</th>
</tr>
<tr>
<th>3</th>
<th>Contents1</th>
<th>Contents2</th>
<th>Contents3</th>
</tr>
<tr>
<th>4</th>
<th>Contents1</th>
<th>Contents2</th>
<th>Contents3</th>
</tr>
<tr>
<th>5</th>
<th>Contents1</th>
<th>Contents2</th>
<th>Contents3</th>
</tr>
</tbody>
</table>
No | Subject1 | Subject2 | Subject3 |
---|---|---|---|
1 | Contents1 | Contents2 | Contents3 |
2 | Contents1 | Contents2 | Contents3 |
3 | Contents1 | Contents2 | Contents3 |
4 | Contents1 | Contents2 | Contents3 |
5 | Contents1 | Contents2 | Contents3 |
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>No</th>
<th>Subject1</th>
<th>Subject2</th>
<th>Subject3</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<th>Contents1</th>
<th>Contents2</th>
<th>Contents3</th>
</tr>
<tr>
<th>2</th>
<th>Contents1</th>
<th>Contents2</th>
<th>Contents3</th>
</tr>
<tr>
<th>3</th>
<th>Contents1</th>
<th>Contents2</th>
<th>Contents3</th>
</tr>
<tr>
<th>4</th>
<th>Contents1</th>
<th>Contents2</th>
<th>Contents3</th>
</tr>
<tr>
<th>5</th>
<th>Contents1</th>
<th>Contents2</th>
<th>Contents3</th>
</tr>
</tbody>
</table>
No | Subject1 | Subject2 | Subject3 |
---|---|---|---|
1 | Contents1 | Contents2 | Contents3 |
2 | Contents1 | Contents2 | Contents3 |
3 | Contents1 | Contents2 | Contents3 |
4 | Contents1 | Contents2 | Contents3 |
5 | Contents1 | Contents2 | Contents3 |
<table class="table table-bordered table-hover">
<thead>
<tr>
<th>No</th>
<th>Subject1</th>
<th>Subject2</th>
<th>Subject3</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<th>Contents1</th>
<th>Contents2</th>
<th>Contents3</th>
</tr>
<tr>
<th>2</th>
<th>Contents1</th>
<th>Contents2</th>
<th>Contents3</th>
</tr>
<tr>
<th>3</th>
<th>Contents1</th>
<th>Contents2</th>
<th>Contents3</th>
</tr>
<tr>
<th>4</th>
<th>Contents1</th>
<th>Contents2</th>
<th>Contents3</th>
</tr>
<tr>
<th>5</th>
<th>Contents1</th>
<th>Contents2</th>
<th>Contents3</th>
</tr>
</tbody>
</table>
No | Subject1 | Subject2 | Subject3 |
---|---|---|---|
1 | Contents1 | Contents2 | Contents3 |
2 | Contents1 | Contents2 | Contents3 |
3 | Contents1 | Contents2 | Contents3 |
4 | Contents1 | Contents2 | Contents3 |
5 | Contents1 | Contents2 | Contents3 |
<table class="table table-bordered table-hover">
<colgroup>
<col style="width: 80px;" />
<col style="width: 240px;" />
<col />
</colgroup>
<thead>
<tr>
<th>No</th>
<th>Subject</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Subject</td>
<td>But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure? On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee</td>
</tr>
<tr>
<td>2</td>
<td>Subject</td>
<td>The European languages are members of the same family. Their separate existence is a myth. For science, music, sport, etc, Europe uses the same vocabulary. The languages only differ in their grammar, their pronunciation and their most common words. Everyone realizes why a new common language would be desirable: one could refuse to pay expensive translators. To achieve this, it would be necessary to have uniform grammar, pronunciation and more common words. If several languages coalesce, the grammar of the resulting language is more simple and regular than that of the individual languages. The new common language will be more simple and regular than the existing European languages. It will be as simple as Occidental; in fact, it will be Occidental. To an English person, it will seem like simplified English, as a skeptical Cambridge friend of mine told me what Occidental is.The European languages are members of the same family. Their separate existence is a myth. For science, music, sport, etc, Europe uses the same vocabulary. The languages only differ in their grammar, their pronunciation and their most common words. Everyone realizes why a new common language would be desirable: one could refuse to pay expensive translators. To</td>
</tr>
<tr>
<td>3</td>
<td>Subject</td>
<td>A.wonderful.serenity.has.taken.possession.of.my.entire.soul,.like.these.sweet.mornings.of.spring.which.I.enjoy.with.my.whole.heart..I.am.alone,.and.feel.the.charm.of.existence.in.this.spot,.which.was.created.for.the.bliss.of.souls.like.mine..I.am.so.happy,.my.dear.friend,.so.absorbed.in.the.exquisite.sense.of.mere.tranquil.existence,.that.I.neglect.my.talents..I.should.be.incapable.of.drawing.a.single.stroke.at.the.present.moment;.and.yet.I.feel.that.I.never.was.a.greater.artist.than.now..When,.while.the.lovely.valley.teems.with.vapour.around.me,.and.the.meridian.sun.strikes.the.upper.surface.of.the.impenetrable.foliage.of.my.trees,.and.but.a.few.stray.gleams.steal.into.the.inner.sanctuary,.I.throw.myself.down.among.the.tall.grass.by.the.trickling.stream;.and,.as.I.lie.close.to.the.earth,.a.thousand.unknown.plants.are.noticed.by.me:.when.I.hear.the.buzz.of.the.little.world.among.the.stalks,.and.grow.familiar.with.the.countless.indescribable.forms.of.the.insects.and.flies,.then.I.feel.the.presence.of.the.Almighty,.who.formed.us.in.his.own.image,.and.the.breath</td>
</tr>
</tbody>
</table>
No | Subject | Description |
---|---|---|
1 | Subject | But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure? On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee |
2 | Subject | The European languages are members of the same family. Their separate existence is a myth. For science, music, sport, etc, Europe uses the same vocabulary. The languages only differ in their grammar, their pronunciation and their most common words. Everyone realizes why a new common language would be desirable: one could refuse to pay expensive translators. To achieve this, it would be necessary to have uniform grammar, pronunciation and more common words. If several languages coalesce, the grammar of the resulting language is more simple and regular than that of the individual languages. The new common language will be more simple and regular than the existing European languages. It will be as simple as Occidental; in fact, it will be Occidental. To an English person, it will seem like simplified English, as a skeptical Cambridge friend of mine told me what Occidental is.The European languages are members of the same family. Their separate existence is a myth. For science, music, sport, etc, Europe uses the same vocabulary. The languages only differ in their grammar, their pronunciation and their most common words. Everyone realizes why a new common language would be desirable: one could refuse to pay expensive translators. To |
3 | Subject | A.wonderful.serenity.has.taken.possession.of.my.entire.soul,.like.these.sweet.mornings.of.spring.which.I.enjoy.with.my.whole.heart..I.am.alone,.and.feel.the.charm.of.existence.in.this.spot,.which.was.created.for.the.bliss.of.souls.like.mine..I.am.so.happy,.my.dear.friend,.so.absorbed.in.the.exquisite.sense.of.mere.tranquil.existence,.that.I.neglect.my.talents..I.should.be.incapable.of.drawing.a.single.stroke.at.the.present.moment;.and.yet.I.feel.that.I.never.was.a.greater.artist.than.now..When,.while.the.lovely.valley.teems.with.vapour.around.me,.and.the.meridian.sun.strikes.the.upper.surface.of.the.impenetrable.foliage.of.my.trees,.and.but.a.few.stray.gleams.steal.into.the.inner.sanctuary,.I.throw.myself.down.among.the.tall.grass.by.the.trickling.stream;.and,.as.I.lie.close.to.the.earth,.a.thousand.unknown.plants.are.noticed.by.me:.when.I.hear.the.buzz.of.the.little.world.among.the.stalks,.and.grow.familiar.with.the.countless.indescribable.forms.of.the.insects.and.flies,.then.I.feel.the.presence.of.the.Almighty,.who.formed.us.in.his.own.image,.and.the.breath |
<div class="tab" tab="true">
<a href="#" class="tab-item active">Title 1</a>
<a href="#" class="tab-item">Title 2</a>
</div>
<div class="tab-container">
<div class="tab-container-item">
<h2 class="section-title">
<span class="pull-left">Sub title 1</span>
</h2>
<div class="guide">
Tab 1 contents
</div>
</div>
<div class="tab-container-item">
<h2 class="section-title">
<span class="pull-left">Sub title 2</span>
</h2>
<div class="guide">
Tab 2 contents
</div>
</div>
</div>
<div class="panel">
<div class="panel-header">
<h3>PANEL NORMAL</h3>
</div>
<div class="panel-body">
<strong>패널</strong> 요소입니다.<br />
패널 요소를 통하여 제목과 본문이 연결된 하나의 그룹 컨텐츠를 제공하실 수 있습니다.
</div>
</div>
<div class="panel panel-default">
<div class="panel-header">
<h3>PANEL DEFAULT</h3>
</div>
<div class="panel-body">
<strong>패널</strong> 요소입니다.<br />
패널 요소를 통하여 제목과 본문이 연결된 하나의 그룹 컨텐츠를 제공하실 수 있습니다.
</div>
</div>
<div class="panel panel-force">
<div class="panel-header">
<h3>PANEL FORCE</h3>
</div>
<div class="panel-body">
<strong>패널</strong> 요소입니다.<br />
패널 요소를 통하여 제목과 본문이 연결된 하나의 그룹 컨텐츠를 제공하실 수 있습니다.
</div>
</div>
<div class="panel panel-primary">
<div class="panel-header">
<h3>PANEL PRIMARY *</h3>
</div>
<div class="panel-body">
<strong>패널</strong> 요소입니다.<br />
패널 요소를 통하여 제목과 본문이 연결된 하나의 그룹 컨텐츠를 제공하실 수 있습니다.
</div>
</div>
<div class="panel panel-notice">
<div class="panel-header">
<h3>PANEL NOTICE</h3>
</div>
<div class="panel-body">
<strong>패널</strong> 요소입니다.<br />
패널 요소를 통하여 제목과 본문이 연결된 하나의 그룹 컨텐츠를 제공하실 수 있습니다.
</div>
</div>
<div class="panel panel-cobalt">
<div class="panel-header">
<h3>PANEL COBALT</h3>
</div>
<div class="panel-body">
<strong>패널</strong> 요소입니다.<br />
패널 요소를 통하여 제목과 본문이 연결된 하나의 그룹 컨텐츠를 제공하실 수 있습니다.
</div>
</div>
<div class="panel panel-danger">
<div class="panel-header">
<h3>PANEL DANGER</h3>
</div>
<div class="panel-body">
<strong>패널</strong> 요소입니다.<br />
패널 요소를 통하여 제목과 본문이 연결된 하나의 그룹 컨텐츠를 제공하실 수 있습니다.
</div>
</div>
<div class="panel panel-alert">
<div class="panel-header">
<h3>PANEL ALERT</h3>
</div>
<div class="panel-body">
<strong>패널</strong> 요소입니다.<br />
패널 요소를 통하여 제목과 본문이 연결된 하나의 그룹 컨텐츠를 제공하실 수 있습니다.
</div>
</div>
<div class="panel panel-success">
<div class="panel-header">
<h3>PANEL SUCCESS</h3>
</div>
<div class="panel-body">
<strong>패널</strong> 요소입니다.<br />
패널 요소를 통하여 제목과 본문이 연결된 하나의 그룹 컨텐츠를 제공하실 수 있습니다.
</div>
</div>
<div class="modal default-modal">
<div class="modal-header">
<h2>DEFAULT MODAL</h2>
<a href="#" class="btn-close">
<i class="pe-7s-close"></i>
</a>
</div>
<div class="modal-body">
MODAL BODY CONTENT
</div>
<div class="modal-footer">
<a href="#" class="btn btn-sm btn-default">CANCEL</a>
<a href="#" class="btn btn-sm btn-primary">OK</a>
</div>
</div>
<a href="#" modal="true" pen=".default-modal" class="btn btn-block btn-force btn-lg">OPEN MODAL</a>