목차
- BS5 소개
- BS5 예제
- BS5 특징 - cf. BS4, BS3
BS5 소개
BS5 예제
<!DOCTYPE html>
<html lang="ko">
<head>
<title>홈짱닷컴 소개</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm//dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm//dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-fluid p-5 bg-primary text-white text-center">
<h1>홈짱닷컴</h1>
<p>Homzzang.com</p>
</div>
<div class="container mt-5">
<div class="row">
<div class="col-sm-4">
<h3>HTML</h3>
<p>기본틀</p>
</div>
<div class="col-sm-4">
<h3>CSS</h3>
<p>디자인</p>
</div>
<div class="col-sm-4">
<h3>JS</h3>
<p>기능/동작</p>
</div>
</div>
</div>
</body>
</html>
결과보기
PS. 닫는 태그를 제대로 안 닫으면, 그리드 작동 안 될 수 있으니 주의 !!
BS5 특징 - cf. BS4, BS3
- (새로운 구성요소, 더 빠른 스타일시트, 더 나은 응답성) 제공함.
- 모든 주요 브라우저 및 플랫폼에 대해 안정적으로 최신 버전 지원함.
- 단, IE11 이하는 지원 X.
- jQuery 대신 JavaScript 사용으로 바뀜. ★
- (BS 5.0), (BS 5.1~5.2), (BS 5.3) 버전은 서로 호환 X. 앞으로 1~2회 정도 호환 안 되게 업그레이드 가능성 존재. - 한별아빠 님 답변 -
- BS 5.3부터 다크모드 등 색상 테마 지원. 자세히보기
cf. (BS3 / BS4) 경우
- jQuery 사용
- 버그 수정 등 기본 지원 유지되나, 새 기능은 지원 X
- 계속 사용 가능
