목차
- BS4 소개
- BS4 예제 - 코드 맛보기
- BS4 / BS3 비교
- BS4 영어 매뉴얼 사이트
- BS4 무료 편집기
BS4 소개
가장 최신 BootStrap (= HTML, CSS, JS 이용한 무료 반응형 프레임워크).
BS4 예제 - 코드 맛보기
<!DOCTYPE html>
<html lang="ko">
<head>
<title>BS4 예제</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="jumbotron text-center">
<h1>홈짱닷컴 Homzzang.com</h1>
<p>코딩언어 무료강의</p>
</div>
<div class="container">
<div class="row">
<div class="col-sm-4 text-center">
<h3>HTML</h3>
<p>기본틀</p>
</div>
<div class="col-sm-4 text-center">
<h3>CSS</h3>
<p>디자인</p>
</div>
<div class="col-sm-4 text-center">
<h3>JS</h3>
<p>디자인</p>
</div>
</div>
</div>
</body>
</html>
결과보기
BS4 / BS3 비교
BS3
- float 이용해 레이아웃 제어
- Glyphicon 지원 O
- 여전히 버그수정 지원되나, 새로운 기능은 추가 안 됨.
- IE8-9부터 지원 필요.
BS4
- flex 이용해 레이아웃 제어
- Glyphicon 지원 X (※ fontawesome, google 아이콘 이용 !!)
- (새로운 구성요소, 더 빠른 스타일시트, 더 상세한 반응형) 제공.
- IE10 이상 지원.
BS4 영어 매뉴얼 사이트
https://getbootstrap.com/docs/versions/
BS4 무료 편집기
https://themestr.app/
