테이블 스타일 클래스 속성
- table: 넓이가 100%인 기본 테이블, 행 사이에 border 적용.
- table-striped: 테이블의 각 행에 교차 색상을 적용.
- table-bordered: 기본 테이블은 각 행에 밑줄, 테이블 전체에 테두리를 설정.
- table-hover: 각 행에 마우스를 갖다대면 색상이 변경.
- table-condensed: 각 셀의 padding 값을 작게 하여 타이트한 느낌을 적용.
- table-responsive: 브라우저의 길이에 맞춰 테이블의 크기 및 내용이 가변적으로 변함. 테이블 태그 전체를 <div class="table-responsive">로 감쌈.
예제 ✍️
<!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">
<title>부트스트랩</title>
<!-- 부트스트랩 -->
<link href="../css/bootstrap.min.css" rel="stylesheet">
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<h4 class="text-info text-center">class="table-hover"준 경우</h4>
<table class="table table-bordered table-hover">
<thead>
<tr>
<td>번호</td><td>글제목</td><td>작성자</td>
</tr>
</thead>
<tr>
<td>1</td><td>게시판 글제목</td><td>홍길동</td>
</tr>
<tr>
<td>2</td><td>게시판 글제목2</td><td>테스트</td>
</tr>
</table>
<h4 class="text-primary text-right">class="table-condensed"준 경우</h4>
<table class="table table-bordered table-condensed">
<!-- 타이틀 제목에 적합하게 적용된 태그(<thead></thead> -->
<thead>
<tr class="active">
<td>번호</td><td>글제목</td><td>작성자</td>
</tr>
</thead>
<tr class="success">
<td>1</td><td>게시판 글제목</td><td>홍길동</td>
</tr>
<tr class="warning">
<td>2</td><td>게시판 글제목2</td><td>테스트</td>
</tr>
</table>
</div>
<!-- jQuery (부트스트랩의 자바스크립트 플러그인을 위해 필요합니다) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- 모든 컴파일된 플러그인을 포함합니다 (아래), 원하지 않는다면 필요한 각각의 파일을 포함하세요 -->
<script src="../js/bootstrap.min.js"></script>
</body>
</html>결과 화면 💻
폼 스타일 클래스 속성
- form-control: 폼 요소를 일관성 있게 스타일링.
- form-inline: 브라우저의 폭에 따라 폼 배치 방법이 변경. 폭이 넓으면 가로로, 좁으면 세로로 정렬.
- form-horizontal: 폼 요소를 수평으로 정렬. 그리드 시스템과 혼합하여 사용.
- sr-only: 레이블을 화면에 보이지 않게 설정.
- checkbox: 체크박스 그룹을 스타일링.
- radio: 라디오 버튼 그룹을 스타일링.
- radio-inline: 라디오 버튼을 수평으로 정렬.
- checkbox-inline: 체크박스를 수평으로 정렬.
예제 ✍️
<!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">
<title>부트스트랩</title>
<!-- 부트스트랩 -->
<link href="../css/bootstrap.min.css" rel="stylesheet">
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h2>bootstrap 예제</h2>
<div class="container">
<h3 class="text-info text-center">기본폼 양식</h3>
<form>
<label for="Name">이름</label>
<input type="text" placeholder="이름" name="Name">
<label for="emailaddress">이메일</label>
<input type="email" placeholder="이름" name="emailaddress">
<button type="submit">확인</button>
</form>
<hr>
<h3 class="text-primary text-center">부트스트랩 폼 양식 적용</h3>
<form role="form"><!-- 폼역할(입력한 값을 서버에 전송하는 역할) 안써도됨 -->
<div class="form-group">
<label for="Name">이름</label>
<input type="text" class="form-control" placeholder="이름" name="Name">
</div>
<div class="form-group">
<label for="emailaddress">이메일</label>
<input type="email" class="form-control" placeholder="이메일" name="emailaddress">
</div>
<div class="form-group"> <!-- margin-bottom 15px만큼 거리유지 -->
<button type="submit">확인</button>
</div>
</form>
</div>
<!-- jQuery (부트스트랩의 자바스크립트 플러그인을 위해 필요합니다) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- 모든 컴파일된 플러그인을 포함합니다 (아래), 원하지 않는다면 필요한 각각의 파일을 포함하세요 -->
<script src="../js/bootstrap.min.js"></script>
</body>
</html>결과 화면 💻
개발 꿈나무