부트스트랩콤포넌트_bootstrap

http://bootstrapk.com/components/#dropdowns

콤포넌트 · 부트스트랩

jsp 파일 생성 bootstrap03.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<jsp:include page="/WEB-INF/view/include/header.jsp">
	<jsp:param name="pageTitle" value="부트스트랩콤포넌트"/>
</jsp:include>

<jsp:include page="/WEB-INF/view//include/footer.jsp"></jsp:include>

 

클래스 구조

- html 구조에 대표 클래스와 옵션 클래스(접두사)의 구조로 이루어져 있다.

 

접두사 클래스 

- 대표 클래스가 접두사 형태로 사용되며, 접두사 형태의 클래스를 옵션이다.

- 옵션에는 색상, 크기, 여백을 나타낸다.

 

색상 클래스 

- 대표 클래스-* 형태

- default, success, info, primary, warning, danger

<button type="button" class="btn">버튼01</button>

 

 

<button type="button" class="btn btn-default">버튼01</button>

 

<button type="button" class="btn btn-default">버튼01</button>
<button type="button" class="btn btn-success">버튼01</button>
<button type="button" class="btn btn-info">버튼01</button>
<button type="button" class="btn btn-primary">버튼01</button>
<button type="button" class="btn btn-warning">버튼01</button>
<button type="button" class="btn btn-danger">버튼01</button>

 

크기 클래스

- 대표 클래스-* gudxo

- lg, md, sm, xs

<button type="button" class="btn btn-lg">버튼01</button>
<button type="button" class="btn btn-md">버튼01</button>
<button type="button" class="btn btn-sm">버튼01</button>
<button type="button" class="btn btn-xs">버튼01</button>

 

활성화 클래스

<button type="button" class="btn btn-sm">버튼01</button>
<button type="button" class="btn btn-sm active">활성화 버튼</button>

 

헬퍼 클래스(도움 클래스)

- 도움 클래스 - 텍스트 색상, 배경 색상, 정렬 등

- 여러 콤포넌트와 관계없이 별도 정의

 <h3>
   	표
   	<small class="pull-right">표 설명입니다.</small>
   </h3>

<table class="table">
      <thead>
         <tr>
            <th>제목</th>
         </tr>
      </thead>
      <tbody>
         <tr>
            <td class="">
               안녕하세요.
            </td>
            <td>
               <span class="text-primary">
                  안녕하세요.
               </span>
            </td>
         </tr>
         <tr class="bg-danger">
            <td class="bg-info">
               안녕하세요.
            </td>
            <td>
               안녕하세요
            </td>
         </tr>
      </tbody>
   </table>

 

table

<table class="table table-striped">
	<thead>
		<tr>
			<th>#</th>
			<th>제목</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>1</td>
			<td>공지사항입니다.</td>
		</tr>
		<tr>
			<td>2</td>
			<td>공지사항입니다.</td>
		</tr>
	</tbody>
</table>